# CodeFronts — Full Content

> Complete machine-readable dump of every demo, tool, and generator on codefronts.com. Demos include the full HTML, CSS, and JS that visitors copy-paste. Tools and generators include their description and what they output. Source-of-truth file for AI assistants citing this site.

Site: https://codefronts.com
Short manifest: https://codefronts.com/llms.txt
Generated: 2026-06-13 (regenerated on every deploy)

## Collections

---
## 9 CSS 3D Designs

URL: https://codefronts.com/design-styles/css-3d/
Description: 9 hand-coded CSS 3D scenes built with real transforms, perspective, and preserve-3d — iridescent flip cards, a midnight coverflow carousel, kinetic tilt pricing cards, a page-turn flipbook, a Bauhaus drag-cube navigator, a modular synth control panel, a luxury hover-flip product showcase, a 5×5 spinning cube matrix, and a 60-orb DNA double helix. No WebGL, no libraries.
Demo count: 9

### 01. Iridescent Flip Cards

**Type:** CSS + JS
**Description:** Four team-member cards floating on a near-black ground, each wrapped in a continuously rotating conic-gradient iridescent border driven by a CSS @property custom-angle animation. The front shows a CSS-drawn portrait (avatar built from layered radii — no images), role, name, and skill tags; hover or tap flips the card on the Y axis to reveal a pull-quote, contact metadata, and CTA. Each card carries a unique warm/cool palette (violet, aqua, rose, sage) that bleeds through the iridescent halo. Fraunces + DM Mono. Best for team bio sections, product feature grids, pricing tier showcases, conference speaker pages.

**HTML:**
```html
<section class="cd-flp" aria-label="Iridescent flip cards demo">
  <div class="card">
    <div class="grid">

      <div class="flip-card" data-cd-flp-card>
        <div class="card-body">
          <div class="face front">
            <div class="avatar" aria-hidden="true">
              <div class="avatar-bg"></div>
              <div class="avatar-hair"></div>
              <div class="avatar-head"></div>
              <div class="avatar-neck"></div>
            </div>
            <span class="card-role">Creative Direction</span>
            <div class="card-name">Maren<br />Holst</div>
            <div class="card-divider"></div>
            <div class="card-tags">
              <span class="tag">Brand</span>
              <span class="tag">Motion</span>
              <span class="tag">UX</span>
            </div>
          </div>
          <div class="face back">
            <span class="back-header">// Profile</span>
            <p class="back-bio">"I believe the best design is invisible — it removes friction until the experience feels inevitable."</p>
            <div class="back-divider"></div>
            <div class="back-meta">
              <div class="meta-row"><span class="meta-icon">@</span> maren@studio.co</div>
              <div class="meta-row"><span class="meta-icon">◎</span> Oslo, Norway · GMT+1</div>
              <div class="meta-row"><span class="meta-icon">★</span> 8 yrs experience</div>
            </div>
            <button class="back-cta" type="button">View Portfolio</button>
          </div>
        </div>
      </div>

      <div class="flip-card" data-cd-flp-card>
        <div class="card-body">
          <div class="face front">
            <div class="avatar" aria-hidden="true">
              <div class="avatar-bg"></div>
              <div class="avatar-hair"></div>
              <div class="avatar-head"></div>
              <div class="avatar-neck"></div>
            </div>
            <span class="card-role">Engineering Lead</span>
            <div class="card-name">Kai<br />Nakamura</div>
            <div class="card-divider"></div>
            <div class="card-tags">
              <span class="tag">Systems</span>
              <span class="tag">Rust</span>
              <span class="tag">Infra</span>
            </div>
          </div>
          <div class="face back">
            <span class="back-header">// Profile</span>
            <p class="back-bio">"Complex systems are just simple ones stacked with care. Every abstraction is a promise we make to the future."</p>
            <div class="back-divider"></div>
            <div class="back-meta">
              <div class="meta-row"><span class="meta-icon">@</span> kai@studio.co</div>
              <div class="meta-row"><span class="meta-icon">◎</span> Tokyo, Japan · JST</div>
              <div class="meta-row"><span class="meta-icon">★</span> 11 yrs experience</div>
            </div>
            <button class="back-cta" type="button">View GitHub</button>
          </div>
        </div>
      </div>

      <div class="flip-card" data-cd-flp-card>
        <div class="card-body">
          <div class="face front">
            <div class="avatar" aria-hidden="true">
              <div class="avatar-bg"></div>
              <div class="avatar-hair"></div>
              <div class="avatar-head"></div>
              <div class="avatar-neck"></div>
            </div>
            <span class="card-role">Product Strategy</span>
            <div class="card-name">Saoirse<br />Byrne</div>
            <div class="card-divider"></div>
            <div class="card-tags">
              <span class="tag">Growth</span>
              <span class="tag">GTM</span>
              <span class="tag">Data</span>
            </div>
          </div>
          <div class="face back">
            <span class="back-header">// Profile</span>
            <p class="back-bio">"Products don't fail because of bad code. They fail because nobody bothered to understand the person on the other end."</p>
            <div class="back-divider"></div>
            <div class="back-meta">
              <div class="meta-row"><span class="meta-icon">@</span> saoirse@studio.co</div>
              <div class="meta-row"><span class="meta-icon">◎</span> Dublin, Ireland · GMT</div>
              <div class="meta-row"><span class="meta-icon">★</span> 6 yrs experience</div>
            </div>
            <button class="back-cta" type="button">View Work</button>
          </div>
        </div>
      </div>

      <div class="flip-card" data-cd-flp-card>
        <div class="card-body">
          <div class="face front">
            <div class="avatar" aria-hidden="true">
              <div class="avatar-bg"></div>
              <div class="avatar-hair"></div>
              <div class="avatar-head"></div>
              <div class="avatar-neck"></div>
            </div>
            <span class="card-role">Visual Research</span>
            <div class="card-name">Olu<br />Adeyemi</div>
            <div class="card-divider"></div>
            <div class="card-tags">
              <span class="tag">Type</span>
              <span class="tag">Print</span>
              <span class="tag">3D</span>
            </div>
          </div>
          <div class="face back">
            <span class="back-header">// Profile</span>
            <p class="back-bio">"Typography is the voice of writing. If you can hear a typeface before you read it, the designer did their job."</p>
            <div class="back-divider"></div>
            <div class="back-meta">
              <div class="meta-row"><span class="meta-icon">@</span> olu@studio.co</div>
              <div class="meta-row"><span class="meta-icon">◎</span> Lagos, Nigeria · WAT</div>
              <div class="meta-row"><span class="meta-icon">★</span> 9 yrs experience</div>
            </div>
            <button class="back-cta" type="button">View Research</button>
          </div>
        </div>
      </div>

    </div>
  </div>
</section>
```

**CSS:**
```css
/* ─── 01 Iridescent Flip Cards — team/pricing card grid ───── */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&family=DM+Mono:wght@300;400;500&display=swap');

@property --cd-flp-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.cd-flp {
  --cd-flp-bg: #0a090e;
  --cd-flp-card-w: 224px;
  --cd-flp-card-h: 310px;

  position: relative;
  width: 100%;
  min-height: 480px;
  background: var(--cd-flp-bg);
  font-family: 'DM Mono', ui-monospace, monospace;
  overflow: hidden;
  box-sizing: border-box;
}

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

.cd-flp .card {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 24px;
}
.cd-flp .card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 50% at 50% 50%, rgba(60, 20, 100, 0.12) 0%, transparent 70%);
  pointer-events: none;
}

.cd-flp .grid {
  display: flex;
  gap: 24px;
  align-items: center;
  perspective: 1800px;
  position: relative;
  z-index: 1;
  flex-wrap: wrap;
  justify-content: center;
}

.cd-flp .flip-card {
  width: var(--cd-flp-card-w);
  height: var(--cd-flp-card-h);
  perspective: 1200px;
  cursor: pointer;
  position: relative;
}

.cd-flp .card-body {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.82s cubic-bezier(0.45, 0.05, 0.15, 0.98);
  position: relative;
}
.cd-flp .flip-card:hover .card-body,
.cd-flp .flip-card.flipped .card-body { transform: rotateY(180deg); }

.cd-flp .face {
  position: absolute;
  inset: 0;
  border-radius: 22px;
  backface-visibility: hidden;
  overflow: hidden;
}

.cd-flp .front {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30px 22px 24px;
}
.cd-flp .front::before {
  content: '';
  position: absolute;
  inset: -1.5px;
  border-radius: 23.5px;
  background: conic-gradient(
    from var(--cd-flp-angle, 0deg),
    #ff6ec4 0deg, #7873f5 72deg, #4adede 144deg, #c0f0a0 216deg, #ff6ec4 288deg, #7873f5 360deg
  );
  z-index: -1;
  animation: cd-flp-border-spin 6s linear infinite;
  animation-delay: var(--cd-flp-spin-delay, 0s);
}
@keyframes cd-flp-border-spin {
  to { --cd-flp-angle: 360deg; }
}

.cd-flp .avatar {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  margin-bottom: 20px;
  position: relative;
  flex-shrink: 0;
  overflow: hidden;
}
.cd-flp .avatar-bg { position: absolute; inset: 0; border-radius: 50%; }
.cd-flp .avatar-neck {
  position: absolute;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 26px; height: 28px;
  border-radius: 4px 4px 0 0;
}
.cd-flp .avatar-head {
  position: absolute;
  bottom: 20px; left: 50%;
  transform: translateX(-50%);
  width: 42px; height: 46px;
  border-radius: 22px 22px 18px 18px;
}
.cd-flp .avatar-hair {
  position: absolute;
  top: 8px; left: 50%;
  transform: translateX(-50%);
  width: 46px; height: 28px;
  border-radius: 23px 23px 0 0;
}

.cd-flp .card-role {
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.cd-flp .card-name {
  font-family: 'Fraunces', serif;
  font-size: 22px;
  font-weight: 700;
  text-align: center;
  line-height: 1.2;
  margin-bottom: 14px;
}
.cd-flp .card-divider {
  width: 1px;
  height: 32px;
  margin-bottom: 14px;
  flex-shrink: 0;
}
.cd-flp .card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: center;
}
.cd-flp .tag {
  font-family: 'DM Mono', monospace;
  font-size: 8px;
  letter-spacing: 1.4px;
  padding: 3px 8px;
  border-radius: 2px;
  text-transform: uppercase;
}

.cd-flp .back {
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  padding: 26px 22px;
}
.cd-flp .back::before {
  content: '';
  position: absolute;
  inset: -1.5px;
  border-radius: 23.5px;
  background: conic-gradient(
    from var(--cd-flp-angle, 0deg),
    #ff6ec4 0deg, #7873f5 72deg, #4adede 144deg, #c0f0a0 216deg, #ff6ec4 288deg, #7873f5 360deg
  );
  z-index: -1;
  animation: cd-flp-border-spin 6s linear infinite reverse;
  animation-delay: var(--cd-flp-spin-delay, 0s);
}

.cd-flp .back-header {
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.cd-flp .back-bio {
  font-family: 'Fraunces', serif;
  font-size: 13px;
  font-weight: 300;
  font-style: italic;
  line-height: 1.7;
  flex: 1;
}
.cd-flp .back-divider {
  width: 100%;
  height: 1px;
  margin: 16px 0 12px;
}
.cd-flp .back-meta { display: flex; flex-direction: column; gap: 7px; }
.cd-flp .meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.8px;
}
.cd-flp .meta-icon {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  flex-shrink: 0;
}
.cd-flp .back-cta {
  margin-top: 16px;
  padding: 9px 0;
  border-radius: 6px;
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  border: none;
  transition: opacity 0.2s;
}
.cd-flp .back-cta:hover { opacity: 0.82; }

/* Card 1: violet */
.cd-flp .flip-card:nth-child(1) .front { background: linear-gradient(150deg, #fdf8f0 0%, #f5edde 100%); }
.cd-flp .flip-card:nth-child(1) .back  { background: linear-gradient(148deg, #1c1228 0%, #150d22 100%); }
.cd-flp .flip-card:nth-child(1) .avatar-bg   { background: #e8d8c0; }
.cd-flp .flip-card:nth-child(1) .avatar-head { background: #c8a880; }
.cd-flp .flip-card:nth-child(1) .avatar-neck { background: #c8a880; }
.cd-flp .flip-card:nth-child(1) .avatar-hair { background: #2c1a0e; }
.cd-flp .flip-card:nth-child(1) .card-role   { color: #8860cc; }
.cd-flp .flip-card:nth-child(1) .card-name   { color: #1a0e2e; }
.cd-flp .flip-card:nth-child(1) .card-divider { background: linear-gradient(to bottom, transparent, #8860cc, transparent); }
.cd-flp .flip-card:nth-child(1) .tag  { background: rgba(136,96,204,0.1); color: #8860cc; border: 1px solid rgba(136,96,204,0.25); }
.cd-flp .flip-card:nth-child(1) .back-header { color: rgba(200,180,255,0.45); }
.cd-flp .flip-card:nth-child(1) .back-bio    { color: rgba(220,210,240,0.82); }
.cd-flp .flip-card:nth-child(1) .back-divider { background: linear-gradient(90deg, transparent, rgba(136,96,204,0.4), transparent); }
.cd-flp .flip-card:nth-child(1) .meta-row    { color: rgba(200,180,255,0.65); }
.cd-flp .flip-card:nth-child(1) .meta-icon   { background: rgba(136,96,204,0.15); color: #a880ff; }
.cd-flp .flip-card:nth-child(1) .back-cta    { background: #8860cc; color: #fff; }

/* Card 2: aqua */
.cd-flp .flip-card:nth-child(2) .front { background: linear-gradient(150deg, #e8f4f8 0%, #d4ecf4 100%); }
.cd-flp .flip-card:nth-child(2) .back  { background: linear-gradient(148deg, #0c1e2a 0%, #081520 100%); }
.cd-flp .flip-card:nth-child(2) .avatar-bg   { background: #c8e0f0; }
.cd-flp .flip-card:nth-child(2) .avatar-head { background: #f0c8a0; }
.cd-flp .flip-card:nth-child(2) .avatar-neck { background: #f0c8a0; }
.cd-flp .flip-card:nth-child(2) .avatar-hair { background: #1a2830; }
.cd-flp .flip-card:nth-child(2) .card-role   { color: #1890c0; }
.cd-flp .flip-card:nth-child(2) .card-name   { color: #0c1e2a; }
.cd-flp .flip-card:nth-child(2) .card-divider { background: linear-gradient(to bottom, transparent, #1890c0, transparent); }
.cd-flp .flip-card:nth-child(2) .tag  { background: rgba(24,144,192,0.1); color: #1890c0; border: 1px solid rgba(24,144,192,0.25); }
.cd-flp .flip-card:nth-child(2) .back-header { color: rgba(100,200,240,0.45); }
.cd-flp .flip-card:nth-child(2) .back-bio    { color: rgba(180,220,240,0.82); }
.cd-flp .flip-card:nth-child(2) .back-divider { background: linear-gradient(90deg, transparent, rgba(24,144,192,0.4), transparent); }
.cd-flp .flip-card:nth-child(2) .meta-row    { color: rgba(100,200,240,0.65); }
.cd-flp .flip-card:nth-child(2) .meta-icon   { background: rgba(24,144,192,0.15); color: #40d0ff; }
.cd-flp .flip-card:nth-child(2) .back-cta    { background: #1890c0; color: #fff; }

/* Card 3: rose */
.cd-flp .flip-card:nth-child(3) .front { background: linear-gradient(150deg, #fdf0f4 0%, #f8e4ea 100%); }
.cd-flp .flip-card:nth-child(3) .back  { background: linear-gradient(148deg, #241014 0%, #180a0d 100%); }
.cd-flp .flip-card:nth-child(3) .avatar-bg   { background: #f0d0d8; }
.cd-flp .flip-card:nth-child(3) .avatar-head { background: #e8b890; }
.cd-flp .flip-card:nth-child(3) .avatar-neck { background: #e8b890; }
.cd-flp .flip-card:nth-child(3) .avatar-hair { background: #8c3040; }
.cd-flp .flip-card:nth-child(3) .card-role   { color: #c03860; }
.cd-flp .flip-card:nth-child(3) .card-name   { color: #240a14; }
.cd-flp .flip-card:nth-child(3) .card-divider { background: linear-gradient(to bottom, transparent, #c03860, transparent); }
.cd-flp .flip-card:nth-child(3) .tag  { background: rgba(192,56,96,0.1); color: #c03860; border: 1px solid rgba(192,56,96,0.25); }
.cd-flp .flip-card:nth-child(3) .back-header { color: rgba(255,140,160,0.45); }
.cd-flp .flip-card:nth-child(3) .back-bio    { color: rgba(255,210,220,0.82); }
.cd-flp .flip-card:nth-child(3) .back-divider { background: linear-gradient(90deg, transparent, rgba(192,56,96,0.4), transparent); }
.cd-flp .flip-card:nth-child(3) .meta-row    { color: rgba(255,140,160,0.65); }
.cd-flp .flip-card:nth-child(3) .meta-icon   { background: rgba(192,56,96,0.15); color: #ff6080; }
.cd-flp .flip-card:nth-child(3) .back-cta    { background: #c03860; color: #fff; }

/* Card 4: sage */
.cd-flp .flip-card:nth-child(4) .front { background: linear-gradient(150deg, #eff5ee 0%, #e0f0dd 100%); }
.cd-flp .flip-card:nth-child(4) .back  { background: linear-gradient(148deg, #0e1e10 0%, #081408 100%); }
.cd-flp .flip-card:nth-child(4) .avatar-bg   { background: #c8e8c0; }
.cd-flp .flip-card:nth-child(4) .avatar-head { background: #d4a870; }
.cd-flp .flip-card:nth-child(4) .avatar-neck { background: #d4a870; }
.cd-flp .flip-card:nth-child(4) .avatar-hair { background: #1c2808; }
.cd-flp .flip-card:nth-child(4) .card-role   { color: #2a8840; }
.cd-flp .flip-card:nth-child(4) .card-name   { color: #0e1e10; }
.cd-flp .flip-card:nth-child(4) .card-divider { background: linear-gradient(to bottom, transparent, #2a8840, transparent); }
.cd-flp .flip-card:nth-child(4) .tag  { background: rgba(42,136,64,0.1); color: #2a8840; border: 1px solid rgba(42,136,64,0.25); }
.cd-flp .flip-card:nth-child(4) .back-header { color: rgba(100,220,120,0.45); }
.cd-flp .flip-card:nth-child(4) .back-bio    { color: rgba(180,240,190,0.82); }
.cd-flp .flip-card:nth-child(4) .back-divider { background: linear-gradient(90deg, transparent, rgba(42,136,64,0.4), transparent); }
.cd-flp .flip-card:nth-child(4) .meta-row    { color: rgba(100,220,120,0.65); }
.cd-flp .flip-card:nth-child(4) .meta-icon   { background: rgba(42,136,64,0.15); color: #50e070; }
.cd-flp .flip-card:nth-child(4) .back-cta    { background: #2a8840; color: #fff; }

/* Staggered spin delays */
.cd-flp .flip-card:nth-child(1) { --cd-flp-spin-delay: 0s; }
.cd-flp .flip-card:nth-child(2) { --cd-flp-spin-delay: -1.5s; }
.cd-flp .flip-card:nth-child(3) { --cd-flp-spin-delay: -3s; }
.cd-flp .flip-card:nth-child(4) { --cd-flp-spin-delay: -4.5s; }

@media (max-width: 720px) {
  .cd-flp { min-height: 720px; }
  .cd-flp .grid { gap: 18px; }
  .cd-flp .flip-card { width: 200px; height: 280px; }
}

@media (prefers-reduced-motion: reduce) {
  .cd-flp .card-body,
  .cd-flp .front::before,
  .cd-flp .back::before { animation: none !important; transition: none !important; }
}
```

**JS:**
```js
(() => {
  const root = document.querySelector('.cd-flp');
  if (!root) return;
  // Tap-to-flip on touch devices (hover already handled by CSS).
  root.querySelectorAll('[data-cd-flp-card]').forEach(card => {
    card.addEventListener('click', () => card.classList.toggle('flipped'));
  });
})();
```

### 02. Midnight Coverflow

**Type:** CSS + JS
**Description:** Seven cards arranged in a cylindrical coverflow perspective — the active card at full scale and brightness, flanking cards receding in angle, Z-depth, and brightness so the focused piece reads with cinematic clarity. Each card is a distinct dark ambient art piece built from layered radial gradients and decorative geometric blobs. A native -webkit-box-reflect floor reflection grounds the carousel, and users can navigate by arrows, dots, keyboard, or click-drag swipe. Space Grotesk + Unbounded. Best for portfolio galleries, media collections, hero sliders, editorial product reveals, music/film catalogs.

**HTML:**
```html
<section class="cd-cvr" aria-label="Midnight coverflow carousel demo">
  <div class="card">
    <div class="cvr-ground" aria-hidden="true"></div>

    <div class="viewport">
      <div class="stage" data-cd-cvr-stage>

        <div class="cf-card" data-i="0"><div class="cf-card-inner"><div class="card-art">
          <div class="geo geo-1a"></div>
          <div class="geo geo-1b"></div>
          <span class="card-title-sm">001 — Spectra</span>
          <div class="card-title-lg">Void<br />Protocol</div>
          <div class="card-sub">Digital Exploration</div>
        </div></div></div>

        <div class="cf-card" data-i="1"><div class="cf-card-inner"><div class="card-art">
          <div class="geo geo-2a"></div>
          <div class="geo geo-2b"></div>
          <span class="card-title-sm">002 — Azure</span>
          <div class="card-title-lg">Meridian<br />Drift</div>
          <div class="card-sub">Ocean Systems</div>
        </div></div></div>

        <div class="cf-card" data-i="2"><div class="cf-card-inner"><div class="card-art">
          <div class="geo geo-3a"></div>
          <div class="geo geo-3b"></div>
          <span class="card-title-sm">003 — Ember</span>
          <div class="card-title-lg">Solstice<br />Engine</div>
          <div class="card-sub">Heat Architecture</div>
        </div></div></div>

        <div class="cf-card" data-i="3"><div class="cf-card-inner"><div class="card-art">
          <div class="geo geo-4a"></div>
          <div class="geo geo-4b"></div>
          <span class="card-title-sm">004 — Canopy</span>
          <div class="card-title-lg">Biolum<br />Forest</div>
          <div class="card-sub">Living Systems</div>
        </div></div></div>

        <div class="cf-card" data-i="4"><div class="cf-card-inner"><div class="card-art">
          <div class="geo geo-5a"></div>
          <div class="geo geo-5b"></div>
          <span class="card-title-sm">005 — Rosa</span>
          <div class="card-title-lg">Ultraviolet<br />Bloom</div>
          <div class="card-sub">Bio-Digital</div>
        </div></div></div>

        <div class="cf-card" data-i="5"><div class="cf-card-inner"><div class="card-art">
          <div class="geo geo-6a"></div>
          <div class="geo geo-6b"></div>
          <span class="card-title-sm">006 — Sol</span>
          <div class="card-title-lg">Photon<br />Archive</div>
          <div class="card-sub">Light Research</div>
        </div></div></div>

        <div class="cf-card" data-i="6"><div class="cf-card-inner"><div class="card-art">
          <div class="geo geo-7a"></div>
          <div class="geo geo-7b"></div>
          <span class="card-title-sm">007 — Abyss</span>
          <div class="card-title-lg">Deep<br />Current</div>
          <div class="card-sub">Oceanic Studies</div>
        </div></div></div>

      </div>
    </div>

    <div class="nav-dots" data-cd-cvr-dots></div>

    <div class="arrows">
      <button class="arr" type="button" data-cd-cvr-prev aria-label="Previous">&#8592;</button>
      <button class="arr" type="button" data-cd-cvr-next aria-label="Next">&#8594;</button>
    </div>

  </div>
</section>
```

**CSS:**
```css
/* ─── 02 Midnight Coverflow — 7-card cylindrical carousel ──── */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;700&family=Unbounded:wght@200;400;700&display=swap');

.cd-cvr {
  --cd-cvr-bg: #060508;

  position: relative;
  width: 100%;
  height: 640px;
  background: var(--cd-cvr-bg);
  font-family: 'Space Grotesk', system-ui, sans-serif;
  overflow: hidden;
  user-select: none;
  box-sizing: border-box;
}

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

.cd-cvr .card {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.cd-cvr .card::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 90% 60% at 50% 40%, rgba(40,10,80,0.18) 0%, transparent 70%),
    radial-gradient(ellipse 60% 40% at 50% 90%, rgba(180,80,0,0.06) 0%, transparent 70%);
  pointer-events: none;
}

.cd-cvr .cvr-ground {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 45%;
  background: linear-gradient(to top, rgba(5,3,8,0.98) 0%, transparent 100%);
  pointer-events: none;
  z-index: 5;
}

.cd-cvr .viewport {
  perspective: 1000px;
  width: 100%;
  height: 420px;
  position: relative;
  z-index: 1;
}
.cd-cvr .stage {
  width: 100%;
  height: 420px;
  position: relative;
  transform-style: preserve-3d;
}

.cd-cvr .cf-card {
  width: 240px;
  height: 320px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -120px;
  margin-top: -160px;
  border-radius: 18px;
  overflow: hidden;
  cursor: pointer;
  transform-style: preserve-3d;
  transition: transform 0.65s cubic-bezier(0.23, 1, 0.32, 1),
              opacity 0.65s ease,
              filter 0.65s ease;
  -webkit-box-reflect: below 8px linear-gradient(transparent 75%, rgba(5,3,8,0.55) 100%);
}
.cd-cvr .cf-card-inner {
  width: 100%; height: 100%;
  position: relative;
  overflow: hidden;
  border-radius: 18px;
}
.cd-cvr .card-art {
  width: 100%; height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 22px;
}
.cd-cvr .card-art::before {
  content: '';
  position: absolute;
  inset: 0;
  background: inherit;
}

.cd-cvr .card-title-sm {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 9px;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 5px;
  position: relative;
  z-index: 1;
}
.cd-cvr .card-title-lg {
  font-family: 'Unbounded', sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
  position: relative;
  z-index: 1;
}
.cd-cvr .card-sub {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 10px;
  margin-top: 5px;
  position: relative;
  z-index: 1;
  opacity: 0.65;
}
.cd-cvr .cf-card-inner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, transparent 40%, rgba(0,0,0,0.2) 100%);
  pointer-events: none;
}

/* Per-card palettes */
.cd-cvr .cf-card[data-i="0"] .card-art { background: linear-gradient(148deg, #0d0020 0%, #2a0058 40%, #1a0040 100%); }
.cd-cvr .cf-card[data-i="0"] .card-art::before { background: radial-gradient(ellipse 70% 60% at 70% 30%, rgba(120,60,255,0.4) 0%, transparent 70%); }
.cd-cvr .cf-card[data-i="0"] .card-title-sm { color: rgba(180,140,255,0.7); }
.cd-cvr .cf-card[data-i="0"] .card-title-lg { color: #e8d8ff; }
.cd-cvr .cf-card[data-i="0"] .card-sub { color: rgba(180,140,255,0.5); }

.cd-cvr .cf-card[data-i="1"] .card-art { background: linear-gradient(148deg, #001a20 0%, #003050 40%, #001828 100%); }
.cd-cvr .cf-card[data-i="1"] .card-art::before { background: radial-gradient(ellipse 70% 60% at 30% 60%, rgba(0,180,255,0.35) 0%, transparent 70%); }
.cd-cvr .cf-card[data-i="1"] .card-title-sm { color: rgba(80,200,255,0.7); }
.cd-cvr .cf-card[data-i="1"] .card-title-lg { color: #c8f0ff; }
.cd-cvr .cf-card[data-i="1"] .card-sub { color: rgba(80,200,255,0.5); }

.cd-cvr .cf-card[data-i="2"] .card-art { background: linear-gradient(148deg, #100400 0%, #300e00 40%, #1e0800 100%); }
.cd-cvr .cf-card[data-i="2"] .card-art::before { background: radial-gradient(ellipse 70% 60% at 60% 40%, rgba(255,100,0,0.4) 0%, transparent 70%); }
.cd-cvr .cf-card[data-i="2"] .card-title-sm { color: rgba(255,160,80,0.7); }
.cd-cvr .cf-card[data-i="2"] .card-title-lg { color: #ffe8c8; }
.cd-cvr .cf-card[data-i="2"] .card-sub { color: rgba(255,160,80,0.5); }

.cd-cvr .cf-card[data-i="3"] .card-art { background: linear-gradient(148deg, #001800 0%, #003000 40%, #001a00 100%); }
.cd-cvr .cf-card[data-i="3"] .card-art::before { background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(0,220,80,0.35) 0%, transparent 70%); }
.cd-cvr .cf-card[data-i="3"] .card-title-sm { color: rgba(80,220,120,0.7); }
.cd-cvr .cf-card[data-i="3"] .card-title-lg { color: #c8ffe0; }
.cd-cvr .cf-card[data-i="3"] .card-sub { color: rgba(80,220,120,0.5); }

.cd-cvr .cf-card[data-i="4"] .card-art { background: linear-gradient(148deg, #1a0010 0%, #3a0028 40%, #220018 100%); }
.cd-cvr .cf-card[data-i="4"] .card-art::before { background: radial-gradient(ellipse 70% 60% at 40% 35%, rgba(255,40,180,0.38) 0%, transparent 70%); }
.cd-cvr .cf-card[data-i="4"] .card-title-sm { color: rgba(255,140,200,0.7); }
.cd-cvr .cf-card[data-i="4"] .card-title-lg { color: #ffd8f0; }
.cd-cvr .cf-card[data-i="4"] .card-sub { color: rgba(255,140,200,0.5); }

.cd-cvr .cf-card[data-i="5"] .card-art { background: linear-gradient(148deg, #0a0a00 0%, #1e1e00 40%, #121200 100%); }
.cd-cvr .cf-card[data-i="5"] .card-art::before { background: radial-gradient(ellipse 70% 60% at 60% 30%, rgba(220,220,0,0.35) 0%, transparent 70%); }
.cd-cvr .cf-card[data-i="5"] .card-title-sm { color: rgba(220,220,80,0.7); }
.cd-cvr .cf-card[data-i="5"] .card-title-lg { color: #fffff0; }
.cd-cvr .cf-card[data-i="5"] .card-sub { color: rgba(220,220,80,0.5); }

.cd-cvr .cf-card[data-i="6"] .card-art { background: linear-gradient(148deg, #000e18 0%, #001c30 40%, #001020 100%); }
.cd-cvr .cf-card[data-i="6"] .card-art::before { background: radial-gradient(ellipse 70% 60% at 50% 60%, rgba(40,120,200,0.35) 0%, transparent 70%); }
.cd-cvr .cf-card[data-i="6"] .card-title-sm { color: rgba(100,180,255,0.7); }
.cd-cvr .cf-card[data-i="6"] .card-title-lg { color: #d8eeff; }
.cd-cvr .cf-card[data-i="6"] .card-sub { color: rgba(100,180,255,0.5); }

/* Decorative geo blobs */
.cd-cvr .geo { position: absolute; border-radius: 50%; opacity: 0.15; }
.cd-cvr .geo-1a { width: 140px; height: 140px; background: #a060ff; top: -30px; right: -30px; }
.cd-cvr .geo-1b { width: 70px; height: 70px; background: #6020ff; bottom: 40%; left: 20%; }
.cd-cvr .geo-2a { width: 180px; height: 180px; background: #00aaff; top: -50px; left: -30px; }
.cd-cvr .geo-2b { width: 55px; height: 55px; background: #00e8ff; bottom: 30%; right: 15%; }
.cd-cvr .geo-3a { width: 110px; height: 110px; background: #ff6600; top: 20px; right: 20px; }
.cd-cvr .geo-3b { width: 160px; height: 160px; background: #ff3300; bottom: -30px; left: -30px; }
.cd-cvr .geo-4a { width: 130px; height: 130px; background: #00cc44; top: -20px; left: 50%; margin-left: -65px; }
.cd-cvr .geo-4b { width: 80px; height: 80px; background: #00ff88; bottom: 20%; right: 10%; }
.cd-cvr .geo-5a { width: 140px; height: 140px; background: #ff00cc; top: 10px; right: -30px; }
.cd-cvr .geo-5b { width: 90px; height: 90px; background: #cc0088; bottom: 30%; left: 0%; }
.cd-cvr .geo-6a { width: 180px; height: 180px; background: #dddd00; top: -40px; left: -20px; }
.cd-cvr .geo-6b { width: 60px; height: 60px; background: #ffff40; bottom: 35%; right: 20%; }
.cd-cvr .geo-7a { width: 120px; height: 120px; background: #1c78cc; top: 30px; left: 30px; }
.cd-cvr .geo-7b { width: 100px; height: 100px; background: #3090e0; bottom: 20%; right: -10px; }

/* Nav */
.cd-cvr .nav-dots {
  display: flex;
  gap: 8px;
  margin-top: 24px;
  position: relative;
  z-index: 10;
}
.cd-cvr .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  cursor: pointer;
  border: none;
  padding: 0;
  transition: all 0.3s;
}
.cd-cvr .dot.active {
  width: 22px;
  border-radius: 3px;
  background: rgba(255,255,255,0.7);
}

.cd-cvr .arrows {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 16px;
  z-index: 20;
}
.cd-cvr .arr {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.6);
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  backdrop-filter: blur(8px);
  font-family: sans-serif;
}
.cd-cvr .arr:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.25);
  color: #fff;
  transform: scale(1.08);
}
.cd-cvr .arr:active { transform: scale(0.96); }

@media (max-width: 720px) {
  .cd-cvr { height: 560px; }
  .cd-cvr .cf-card { width: 200px; height: 268px; margin-left: -100px; margin-top: -134px; }
}

@media (prefers-reduced-motion: reduce) {
  .cd-cvr .cf-card { transition: none !important; }
}
```

**JS:**
```js
(() => {
  const root = document.querySelector('.cd-cvr');
  if (!root) return;
  const stage = root.querySelector('[data-cd-cvr-stage]');
  const dotsEl = root.querySelector('[data-cd-cvr-dots]');
  const prevBtn = root.querySelector('[data-cd-cvr-prev]');
  const nextBtn = root.querySelector('[data-cd-cvr-next]');
  if (!stage || !dotsEl || !prevBtn || !nextBtn) return;

  const cards = Array.from(stage.querySelectorAll('.cf-card'));
  const N = cards.length;
  let current = Math.floor(N / 2);

  cards.forEach((_, i) => {
    const d = document.createElement('button');
    d.type = 'button';
    d.className = 'dot' + (i === current ? ' active' : '');
    d.setAttribute('aria-label', `Go to slide ${i + 1}`);
    d.addEventListener('click', () => goTo(i));
    dotsEl.appendChild(d);
  });

  function updatePositions() {
    const ANGLE_STEP = 42;
    const Z_OFFSET = 80;
    const SCALE_FALLOFF = 0.12;
    cards.forEach((card, i) => {
      const offset = i - current;
      const absOff = Math.abs(offset);
      const angle = offset * ANGLE_STEP;
      const z = -absOff * Z_OFFSET;
      const scale = Math.max(0.45, 1 - absOff * SCALE_FALLOFF);
      const opacity = absOff > 3 ? 0 : Math.max(0.25, 1 - absOff * 0.22);
      const brightness = Math.max(0.35, 1 - absOff * 0.2);
      card.style.transform = `rotateY(${angle}deg) translateZ(${z}px) scale(${scale})`;
      card.style.opacity = opacity;
      card.style.filter = `brightness(${brightness})`;
      card.style.zIndex = 10 - absOff;
      card.style.pointerEvents = absOff <= 1 ? 'auto' : 'none';
    });
    Array.from(dotsEl.children).forEach((d, i) => {
      d.className = 'dot' + (i === current ? ' active' : '');
    });
  }

  function goTo(n) {
    current = Math.max(0, Math.min(N - 1, n));
    updatePositions();
  }

  prevBtn.addEventListener('click', () => goTo(current - 1));
  nextBtn.addEventListener('click', () => goTo(current + 1));

  cards.forEach((card, i) => {
    card.addEventListener('click', () => { if (i !== current) goTo(i); });
  });

  // Keyboard — only when wrapper has focus or pointer is inside it
  let pointerInside = false;
  root.addEventListener('mouseenter', () => { pointerInside = true; });
  root.addEventListener('mouseleave', () => { pointerInside = false; });
  document.addEventListener('keydown', e => {
    if (!pointerInside) return;
    if (e.key === 'ArrowLeft')  { goTo(current - 1); e.preventDefault(); }
    if (e.key === 'ArrowRight') { goTo(current + 1); e.preventDefault(); }
  });

  // Drag scoped to wrapper
  let dragStart = null;
  root.addEventListener('mousedown', e => { dragStart = e.clientX; });
  root.addEventListener('mouseup', e => {
    if (dragStart === null) return;
    const dx = e.clientX - dragStart;
    if (Math.abs(dx) > 40) goTo(current + (dx < 0 ? 1 : -1));
    dragStart = null;
  });
  root.addEventListener('mouseleave', () => { dragStart = null; });
  root.addEventListener('touchstart', e => { dragStart = e.touches[0].clientX; }, { passive: true });
  root.addEventListener('touchend', e => {
    if (dragStart === null) return;
    const dx = e.changedTouches[0].clientX - dragStart;
    if (Math.abs(dx) > 40) goTo(current + (dx < 0 ? 1 : -1));
    dragStart = null;
  });

  updatePositions();
})();
```

### 03. Kinetic Tilt Cards

**Type:** CSS + JS
**Description:** Three pricing cards (Starter / Pro / Enterprise) that track individual mouse positions via smooth lerp animation loops — each card applies perspective + rotateX + rotateY relative to cursor, with a radial glare gradient following the hotspot. Parallax background and midground layers shift at different depths during the tilt to sell real volumetric depth, and the middle "Most Popular" card floats elevated to bias selection. Syne + Syne Mono. Best for pricing pages, premium product grids, SaaS upgrade flows, plan-comparison sections.

**HTML:**
```html
<section class="cd-tlt" aria-label="Kinetic tilt cards pricing demo">
  <div class="card">
    <div class="tilt-grid">

      <div class="tcard" data-cd-tlt-card data-max="18">
        <div class="tcard-inner">
          <div class="tcard-body">
            <div class="layer-bg" data-cd-tlt-bg></div>
            <div class="layer-mid" data-cd-tlt-mid></div>
            <div class="layer-fg">
              <div class="plan-badge">Starter</div>
              <div class="price-wrap">
                <span class="price-currency">$</span>
                <span class="price-amount">19</span>
                <span class="price-period">/ mo</span>
              </div>
              <p class="plan-desc">Everything you need to get off the ground fast, without compromise.</p>
              <ul class="features">
                <li class="feature">3 active projects</li>
                <li class="feature">10k API calls / mo</li>
                <li class="feature">Community support</li>
                <li class="feature">Basic analytics</li>
                <li class="feature">1 team member</li>
              </ul>
              <button class="plan-cta" type="button">Get Started</button>
            </div>
          </div>
          <div class="tcard-border"></div>
          <div class="glare" data-cd-tlt-glare></div>
        </div>
      </div>

      <div class="tcard featured" data-cd-tlt-card data-max="14" data-raised="1">
        <div class="tcard-inner">
          <div class="tcard-body">
            <div class="layer-bg" data-cd-tlt-bg></div>
            <div class="layer-mid" data-cd-tlt-mid></div>
            <div class="layer-fg">
              <div class="plan-badge">Pro</div>
              <div class="price-wrap">
                <span class="price-currency">$</span>
                <span class="price-amount">79</span>
                <span class="price-period">/ mo</span>
              </div>
              <p class="plan-desc">For growing teams that need power, speed, and room to breathe.</p>
              <ul class="features">
                <li class="feature">Unlimited projects</li>
                <li class="feature">500k API calls / mo</li>
                <li class="feature">Priority support</li>
                <li class="feature">Advanced analytics</li>
                <li class="feature">Up to 12 members</li>
              </ul>
              <button class="plan-cta" type="button">Start Free Trial</button>
            </div>
          </div>
          <div class="tcard-border"></div>
          <div class="glare" data-cd-tlt-glare></div>
        </div>
      </div>

      <div class="tcard" data-cd-tlt-card data-max="18">
        <div class="tcard-inner">
          <div class="tcard-body">
            <div class="layer-bg" data-cd-tlt-bg></div>
            <div class="layer-mid" data-cd-tlt-mid></div>
            <div class="layer-fg">
              <div class="plan-badge">Enterprise</div>
              <div class="price-wrap">
                <span class="price-amount custom">Custom</span>
              </div>
              <p class="plan-desc">Tailored scale, SLA guarantees, and white-glove onboarding for your organization.</p>
              <ul class="features">
                <li class="feature">Unlimited everything</li>
                <li class="feature">Dedicated infrastructure</li>
                <li class="feature">24/7 SLA support</li>
                <li class="feature">SSO + SAML + SOC 2</li>
                <li class="feature">Custom contracts</li>
              </ul>
              <button class="plan-cta" type="button">Contact Sales</button>
            </div>
          </div>
          <div class="tcard-border"></div>
          <div class="glare" data-cd-tlt-glare></div>
        </div>
      </div>

    </div>
  </div>
</section>
```

**CSS:**
```css
/* ─── 03 Kinetic Tilt Cards — pricing tier showcase ────────── */
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=Syne+Mono&display=swap');

.cd-tlt {
  --cd-tlt-bg: #07080e;

  position: relative;
  width: 100%;
  min-height: 500px;
  background: var(--cd-tlt-bg);
  font-family: 'Syne', system-ui, sans-serif;
  overflow: hidden;
  box-sizing: border-box;
}

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

.cd-tlt .card {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 36px 24px;
}
.cd-tlt .card::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 45% at 20% 30%, rgba(20,80,180,0.09) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 80% 70%, rgba(80,20,160,0.09) 0%, transparent 70%),
    radial-gradient(ellipse 40% 30% at 50% 50%, rgba(0,200,180,0.04) 0%, transparent 70%);
  pointer-events: none;
}

.cd-tlt .tilt-grid {
  display: flex;
  gap: 28px;
  align-items: center;
  perspective: 2000px;
  position: relative;
  z-index: 1;
  flex-wrap: wrap;
  justify-content: center;
}

.cd-tlt .tcard {
  width: 244px;
  height: 340px;
  position: relative;
  cursor: pointer;
  transform-style: preserve-3d;
  transition: transform 0.08s linear;
  border-radius: 22px;
}
.cd-tlt .tcard-inner {
  position: absolute;
  inset: 0;
  border-radius: 22px;
  overflow: hidden;
  transform-style: preserve-3d;
}
.cd-tlt .tcard-body {
  position: absolute;
  inset: 0;
  border-radius: 22px;
  padding: 26px 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}
.cd-tlt .glare {
  position: absolute;
  inset: 0;
  border-radius: 22px;
  pointer-events: none;
  z-index: 10;
  opacity: 0;
  transition: opacity 0.3s;
}
.cd-tlt .tcard:hover .glare { opacity: 1; }
.cd-tlt .tcard-border {
  position: absolute;
  inset: 0;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,0);
  pointer-events: none;
  z-index: 5;
  transition: border-color 0.3s;
}
.cd-tlt .tcard:hover .tcard-border { border-color: rgba(255,255,255,0.1); }

.cd-tlt .layer-bg { position: absolute; inset: 0; border-radius: 22px; transition: transform 0.08s linear; }
.cd-tlt .layer-mid { position: absolute; pointer-events: none; transition: transform 0.08s linear; }
.cd-tlt .layer-fg { position: relative; z-index: 3; }

.cd-tlt .plan-badge {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 4px;
  font-family: 'Syne Mono', monospace;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 14px;
  width: fit-content;
}
.cd-tlt .price-wrap { margin-bottom: 18px; }
.cd-tlt .price-currency {
  font-size: 13px;
  font-weight: 600;
  vertical-align: top;
  line-height: 2.4;
}
.cd-tlt .price-amount {
  font-size: 46px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -2px;
}
.cd-tlt .price-amount.custom {
  font-size: 32px;
  letter-spacing: -1px;
}
.cd-tlt .price-period {
  font-size: 12px;
  font-weight: 400;
  opacity: 0.55;
  margin-left: 2px;
}
.cd-tlt .plan-desc {
  font-size: 12px;
  font-weight: 400;
  opacity: 0.65;
  line-height: 1.6;
  margin-bottom: 20px;
}
.cd-tlt .features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.cd-tlt .feature {
  font-size: 11px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0.8;
}
.cd-tlt .feature::before {
  content: '◆';
  font-size: 9px;
  opacity: 0.4;
}
.cd-tlt .plan-cta {
  display: block;
  width: 100%;
  padding: 12px;
  border-radius: 10px;
  font-family: 'Syne', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  border: none;
  margin-top: 18px;
  transition: transform 0.15s, filter 0.15s;
}
.cd-tlt .plan-cta:hover { filter: brightness(1.12); transform: translateY(-1px); }
.cd-tlt .plan-cta:active { transform: translateY(1px); }

/* Card 1 — Starter / steel */
.cd-tlt .tcard:nth-child(1) .tcard-body { background: linear-gradient(145deg, #111420 0%, #0d1018 55%, #131722 100%); }
.cd-tlt .tcard:nth-child(1) .layer-bg { background: radial-gradient(ellipse 80% 60% at 30% 20%, rgba(40,100,200,0.12) 0%, transparent 70%); }
.cd-tlt .tcard:nth-child(1) .plan-badge { background: rgba(80,140,255,0.12); color: #5090ff; }
.cd-tlt .tcard:nth-child(1) .price-currency,
.cd-tlt .tcard:nth-child(1) .price-amount,
.cd-tlt .tcard:nth-child(1) .price-period { color: #c8d8ff; }
.cd-tlt .tcard:nth-child(1) .plan-desc { color: rgba(180,200,255,0.65); }
.cd-tlt .tcard:nth-child(1) .feature { color: rgba(180,200,255,0.75); }
.cd-tlt .tcard:nth-child(1) .plan-cta { background: rgba(80,140,255,0.15); color: #7090ff; border: 1px solid rgba(80,140,255,0.3); }
.cd-tlt .tcard:nth-child(1) .layer-mid {
  width: 180px; height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(60,120,255,0.06) 0%, transparent 70%);
  border: 1px solid rgba(60,120,255,0.08);
  top: -40px; right: -40px;
}

/* Card 2 — Pro / featured */
.cd-tlt .tcard.featured .tcard-body { background: linear-gradient(145deg, #0e1f0e 0%, #0a1808 55%, #101f10 100%); }
.cd-tlt .tcard.featured .layer-bg { background: radial-gradient(ellipse 80% 60% at 50% 25%, rgba(0,200,100,0.14) 0%, transparent 70%); }
.cd-tlt .tcard.featured .plan-badge { background: rgba(0,200,100,0.12); color: #00d468; }
.cd-tlt .tcard.featured .price-currency,
.cd-tlt .tcard.featured .price-amount,
.cd-tlt .tcard.featured .price-period { color: #c0ffd8; }
.cd-tlt .tcard.featured .plan-desc { color: rgba(160,240,190,0.65); }
.cd-tlt .tcard.featured .feature { color: rgba(160,240,190,0.75); }
.cd-tlt .tcard.featured .plan-cta { background: #00c860; color: #001a0a; border: none; font-weight: 800; }
.cd-tlt .tcard.featured {
  transform: translateY(-12px);
  box-shadow: 0 40px 80px rgba(0,200,80,0.08), 0 20px 40px rgba(0,0,0,0.6);
}
.cd-tlt .tcard.featured::after {
  content: 'MOST POPULAR';
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: #00c860;
  color: #001a0a;
  font-family: 'Syne', sans-serif;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 2.5px;
  padding: 4px 12px;
  border-radius: 3px;
  z-index: 20;
  white-space: nowrap;
}
.cd-tlt .tcard.featured .layer-mid {
  width: 220px; height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,200,100,0.07) 0%, transparent 70%);
  border: 1px solid rgba(0,200,100,0.1);
  top: -60px; right: -60px;
}

/* Card 3 — Enterprise */
.cd-tlt .tcard:nth-child(3) .tcard-body { background: linear-gradient(145deg, #1a0e1a 0%, #120a14 55%, #1c1020 100%); }
.cd-tlt .tcard:nth-child(3) .layer-bg { background: radial-gradient(ellipse 80% 60% at 70% 30%, rgba(180,80,255,0.12) 0%, transparent 70%); }
.cd-tlt .tcard:nth-child(3) .plan-badge { background: rgba(180,80,255,0.12); color: #c060ff; }
.cd-tlt .tcard:nth-child(3) .price-currency,
.cd-tlt .tcard:nth-child(3) .price-amount,
.cd-tlt .tcard:nth-child(3) .price-period { color: #ecd8ff; }
.cd-tlt .tcard:nth-child(3) .plan-desc { color: rgba(220,180,255,0.65); }
.cd-tlt .tcard:nth-child(3) .feature { color: rgba(220,180,255,0.75); }
.cd-tlt .tcard:nth-child(3) .plan-cta { background: rgba(180,80,255,0.15); color: #c080ff; border: 1px solid rgba(180,80,255,0.3); }
.cd-tlt .tcard:nth-child(3) .layer-mid {
  width: 160px; height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(180,80,255,0.06) 0%, transparent 70%);
  border: 1px solid rgba(180,80,255,0.08);
  bottom: 10px; left: -30px;
}

@media (max-width: 720px) {
  .cd-tlt { min-height: 1100px; }
  .cd-tlt .tcard.featured { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .cd-tlt .tcard,
  .cd-tlt .layer-bg,
  .cd-tlt .layer-mid { transition: none !important; transform: none !important; }
}
```

**JS:**
```js
(() => {
  const root = document.querySelector('.cd-tlt');
  if (!root) return;
  const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  if (prefersReduced) return;

  root.querySelectorAll('[data-cd-tlt-card]').forEach(card => {
    const maxTilt = parseFloat(card.dataset.max) || 16;
    const glare = card.querySelector('[data-cd-tlt-glare]');
    const layerBg = card.querySelector('[data-cd-tlt-bg]');
    const layerMid = card.querySelector('[data-cd-tlt-mid]');
    const raised = card.dataset.raised === '1';

    let animFrame = null;
    let targetRx = 0, targetRy = 0;
    let currentRx = 0, currentRy = 0;
    let active = false;

    function lerp(a, b, t) { return a + (b - a) * t; }

    function tick() {
      if (!active) {
        currentRx = lerp(currentRx, 0, 0.08);
        currentRy = lerp(currentRy, 0, 0.08);
      } else {
        currentRx = lerp(currentRx, targetRx, 0.12);
        currentRy = lerp(currentRy, targetRy, 0.12);
      }
      const baseY = raised ? -12 : 0;
      card.style.transform = `perspective(1000px) rotateX(${currentRx}deg) rotateY(${currentRy}deg) translateY(${baseY}px)`;
      if (layerBg) layerBg.style.transform = `translateX(${currentRy * 1.5}px) translateY(${-currentRx * 1.5}px)`;
      if (layerMid) layerMid.style.transform = `translateX(${currentRy * 3}px) translateY(${-currentRx * 3}px)`;

      if (active || Math.abs(currentRx) > 0.05 || Math.abs(currentRy) > 0.05) {
        animFrame = requestAnimationFrame(tick);
      } else {
        animFrame = null;
      }
    }

    card.addEventListener('mouseenter', () => {
      active = true;
      if (!animFrame) tick();
    });
    card.addEventListener('mousemove', e => {
      const rect = card.getBoundingClientRect();
      const cx = rect.left + rect.width / 2;
      const cy = rect.top + rect.height / 2;
      const dx = (e.clientX - cx) / (rect.width / 2);
      const dy = (e.clientY - cy) / (rect.height / 2);
      targetRy = dx * maxTilt;
      targetRx = -dy * maxTilt;
      const glareX = ((e.clientX - rect.left) / rect.width) * 100;
      const glareY = ((e.clientY - rect.top) / rect.height) * 100;
      if (glare) glare.style.background = `radial-gradient(circle at ${glareX}% ${glareY}%, rgba(255,255,255,0.18) 0%, transparent 55%)`;
    });
    card.addEventListener('mouseleave', () => {
      active = false;
      targetRx = 0;
      targetRy = 0;
      if (glare) glare.style.background = 'none';
      if (!animFrame) tick();
    });
  });
})();
```

### 04. Page-Turn Flipbook

**Type:** CSS + JS
**Description:** A physical book with a dark leather cover, cream parchment spreads, and pages that arc through a real 0° → -180° rotateY transform with the hinge anchored at transform-origin: left center. Each spread carries genuine editorial typography — pull quotes, column rules, drop caps, colored section pages — and the gutter shadow on each face simulates the dip near the spine. Click the right half of the book to advance, the left half to go back, or use the keyboard arrows / nav buttons. Playfair Display + EB Garamond. Best for digital magazines, restaurant menus, lookbooks, interactive storytelling, brand annual reports.

**HTML:**
```html
<section class="cd-flb" aria-label="Page-turn flipbook demo">
  <div class="card">
    <div class="book-scene">
      <div class="book" data-cd-flb-book>
        <div class="book-shadow" aria-hidden="true"></div>

        <div class="left-cover" data-cd-flb-cover>
          <div class="cover-art">
            <div class="cover-eyebrow">FORMA STUDIO</div>
            <div class="cover-rule"></div>
            <div class="cover-title">FORMA<span class="cover-vol">Vol. VI</span></div>
            <div class="cover-rule"></div>
            <div class="cover-sub">Design · Architecture · Thought</div>
          </div>
        </div>

        <div class="page" data-page="0">
          <div class="page-front paper-warm">
            <div class="pg pg-warm">
              <div class="spread-label">Chapter One</div>
              <div class="spread-title sm">The Weight<br />of Silence</div>
              <div class="spread-rule"></div>
              <p class="spread-body">There is a moment before speech when the world holds its breath. Architecture inhabits this pause — not the buildings themselves, but the spaces they carve from air.</p>
              <p class="spread-body mt">The corridor narrows, draws the eye forward. Light slants from an unseen source. To walk through is to be composed by the building.</p>
              <span class="pg-num right">1</span>
              <span class="spread-big-num">I</span>
            </div>
          </div>
          <div class="page-back paper-cool">
            <div class="pg pg-cool">
              <div class="spread-label">Essay II</div>
              <div class="spread-title xs">Form<br />Without<br />Apology</div>
              <div class="spread-rule alt"></div>
              <p class="spread-body alt">To design is to make a claim about the world as it should be — not as it is. The blueprint precedes the building, and in that gap lives everything called imagination.</p>
              <span class="pg-num left">2</span>
            </div>
          </div>
        </div>

        <div class="page" data-page="1">
          <div class="page-front paper-sage">
            <div class="pg pg-sage">
              <div class="spread-label">Visual Field</div>
              <div class="spread-img sage-img">
                <div class="circle-outer">
                  <div class="circle-inner"></div>
                </div>
              </div>
              <div class="spread-pullquote sage">"Growth is not linear. It is fractal — repeating at every scale."</div>
              <p class="spread-body sage-body">The forest does not plan its canopy. Each tree reaches for light by the same simple rule: grow toward the sun. The emergent whole is unplanned and irreducible.</p>
              <span class="pg-num right sage">3</span>
            </div>
          </div>
          <div class="page-back paper-rose">
            <div class="pg pg-rose">
              <div class="spread-label">Interlude</div>
              <div class="spread-title sm rose">Red<br />Notation</div>
              <div class="spread-rule rose"></div>
              <p class="spread-body rose-body">Color arrives before language. Red is felt in the chest before named by the tongue. The ancient painters knew this — their ochre hands pressed flat on cave walls were not decoration. They were declaration.</p>
              <span class="pg-num left rose">4</span>
            </div>
          </div>
        </div>

        <div class="page" data-page="2">
          <div class="page-front paper-warm">
            <div class="pg pg-warm">
              <div class="spread-label">Final Study</div>
              <div class="spread-title sm">Endings<br />as Form</div>
              <div class="spread-rule"></div>
              <p class="spread-body">Every designed thing must eventually end — the page turn, the last note, the exit from the building. The best designs make their endings feel inevitable, not arbitrary.</p>
              <div class="spread-pullquote warm">"The final line is the first thing written."</div>
              <span class="pg-num right">5</span>
            </div>
          </div>
          <div class="page-back paper-ink">
            <div class="pg pg-ink">
              <div class="colophon-label">COLOPHON</div>
              <div class="colophon-title">FORMA</div>
              <div class="colophon-sub">A Journal of Design Thought</div>
              <p class="colophon-body">Issue VI · Printed on FSC-certified stock · Typography set in Playfair Display and EB Garamond · All rights reserved ©</p>
              <span class="pg-num left ink">6</span>
            </div>
          </div>
        </div>

      </div>

      <div class="nav">
        <button class="nav-btn" type="button" data-cd-flb-prev disabled>← Prev</button>
        <span class="page-counter" data-cd-flb-counter>Spread 1 of 4</span>
        <button class="nav-btn" type="button" data-cd-flb-next>Next →</button>
      </div>

    </div>
  </div>
</section>
```

**CSS:**
```css
/* ─── 04 Page-Turn Flipbook — editorial book ───────────────── */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400;1,700&family=EB+Garamond:ital,wght@0,400;0,500;1,400;1,500&display=swap');

.cd-flb {
  --cd-flb-bg: #1c1410;

  position: relative;
  width: 100%;
  min-height: 600px;
  background: var(--cd-flb-bg);
  font-family: 'EB Garamond', Georgia, serif;
  overflow: hidden;
  perspective: 2400px;
  box-sizing: border-box;
}

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

.cd-flb .card {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 28px 16px;
}
.cd-flb .card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 50% at 50% 40%, rgba(180,120,40,0.06) 0%, transparent 70%);
  pointer-events: none;
}

.cd-flb .book-scene {
  transform-style: preserve-3d;
  transform: rotateX(5deg) rotateY(-4deg);
  transition: transform 0.6s ease;
  position: relative;
  z-index: 1;
}
.cd-flb .book-scene:hover { transform: rotateX(4deg) rotateY(-2deg); }

.cd-flb .book {
  width: 560px;
  height: 360px;
  position: relative;
  transform-style: preserve-3d;
}
.cd-flb .book::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0; bottom: 0;
  width: 12px;
  transform: translateX(-50%) translateZ(1px);
  background: linear-gradient(to right, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.1) 30%, rgba(0,0,0,0.1) 70%, rgba(0,0,0,0.4) 100%);
  z-index: 20;
  pointer-events: none;
}

.cd-flb .page {
  position: absolute;
  width: 280px;
  height: 360px;
  top: 0;
  left: 280px;
  transform-origin: left center;
  transform-style: preserve-3d;
  transition: transform 1.1s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.cd-flb .page.flipped { transform: rotateY(-180deg); }

.cd-flb .page-front,
.cd-flb .page-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  overflow: hidden;
}
.cd-flb .page-back { transform: rotateY(180deg); }

.cd-flb .left-cover {
  position: absolute;
  left: 0; top: 0;
  width: 280px; height: 360px;
  z-index: 0;
  border-radius: 4px 0 0 4px;
  overflow: hidden;
}

.cd-flb .pg {
  width: 100%; height: 100%;
  padding: 30px 26px;
  display: flex;
  flex-direction: column;
  position: relative;
}
.cd-flb .pg-warm { color: #2a1f14; }
.cd-flb .pg-cool { color: #2a2432; }
.cd-flb .pg-rose { color: #2a1418; }
.cd-flb .pg-sage { color: #1a2a1e; }
.cd-flb .pg-ink  { color: #e8d8c0; }

.cd-flb .pg-num {
  font-family: 'EB Garamond', serif;
  font-size: 10px;
  letter-spacing: 2px;
  position: absolute;
  bottom: 16px;
}
.cd-flb .pg-num.right { right: 22px; color: #8a6a4a; }
.cd-flb .pg-num.left  { left: 22px; color: #7a6898; }
.cd-flb .pg-num.rose  { color: #8a4050; }
.cd-flb .pg-num.sage  { color: #4a7a50; }
.cd-flb .pg-num.ink   { color: rgba(200,180,140,0.4); }

.cd-flb .page-front::after,
.cd-flb .page-back::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 40px;
  pointer-events: none;
}
.cd-flb .page-front::after { right: 0; background: linear-gradient(to right, transparent, rgba(0,0,0,0.14)); }
.cd-flb .page-back::after  { left: 0; background: linear-gradient(to left, transparent, rgba(0,0,0,0.14)); }
.cd-flb .left-cover::after {
  content: '';
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 30px;
  background: linear-gradient(to right, transparent, rgba(0,0,0,0.2));
}

.cd-flb .paper-warm { background: #f5ece0; }
.cd-flb .paper-cool { background: #ede8f0; }
.cd-flb .paper-rose { background: #f5e8e8; }
.cd-flb .paper-sage { background: #e8f0e8; }
.cd-flb .paper-ink  { background: #1a1510; }

.cd-flb .spread-label {
  font-family: 'EB Garamond', serif;
  font-size: 9px;
  letter-spacing: 4px;
  text-transform: uppercase;
  opacity: 0.4;
  margin-bottom: 16px;
}
.cd-flb .spread-title {
  font-family: 'Playfair Display', serif;
  font-weight: 900;
  line-height: 1.1;
  margin-bottom: 14px;
}
.cd-flb .spread-title.sm { font-size: 26px; }
.cd-flb .spread-title.xs { font-size: 22px; }
.cd-flb .spread-title.rose { color: #5a1828; }
.cd-flb .spread-body {
  font-family: 'EB Garamond', serif;
  font-size: 13px;
  line-height: 1.78;
  opacity: 0.75;
}
.cd-flb .spread-body.mt { margin-top: 10px; }
.cd-flb .spread-body.alt { color: #3a2a50; }
.cd-flb .spread-body.rose-body { color: #3a1820; }
.cd-flb .spread-body.sage-body { color: #2a3a26; }
.cd-flb .spread-pullquote {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 16px;
  line-height: 1.5;
  border-left: 2px solid currentColor;
  padding-left: 14px;
  margin: 16px 0;
  opacity: 0.8;
}
.cd-flb .spread-pullquote.warm { border-color: #8a6a4a; color: #4a3424; }
.cd-flb .spread-pullquote.sage { border-color: #3a6a40; color: #2a4a2e; }
.cd-flb .spread-rule {
  width: 40px; height: 1px;
  background: currentColor;
  opacity: 0.3;
  margin: 14px 0;
}
.cd-flb .spread-rule.alt { background: #4a3868; }
.cd-flb .spread-rule.rose { background: #8a3040; }
.cd-flb .spread-img {
  width: 100%; height: 100px;
  border-radius: 4px;
  margin: 14px 0;
  overflow: hidden;
  flex-shrink: 0;
}
.cd-flb .sage-img {
  background: linear-gradient(135deg, #2a4a2e, #1a3020);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cd-flb .circle-outer {
  width: 64px; height: 64px;
  border: 2px solid rgba(120,200,120,0.4);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cd-flb .circle-inner {
  width: 32px; height: 32px;
  background: rgba(120,200,120,0.2);
  border-radius: 50%;
}
.cd-flb .spread-big-num {
  font-family: 'Playfair Display', serif;
  font-size: 80px;
  font-weight: 900;
  line-height: 0.9;
  opacity: 0.07;
  position: absolute;
  right: 16px;
  bottom: 30px;
}

/* Cover art */
.cd-flb .cover-art {
  width: 100%; height: 100%;
  background: linear-gradient(148deg, #1a0f08, #0e0a06);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 26px;
  border-radius: 4px 0 0 4px;
  position: relative;
  overflow: hidden;
}
.cd-flb .cover-art::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 60% at 50% 40%, rgba(180,120,40,0.12) 0%, transparent 70%);
}
.cd-flb .cover-eyebrow {
  font-family: 'EB Garamond', serif;
  font-size: 9px;
  letter-spacing: 5px;
  color: rgba(200,160,80,0.55);
  margin-bottom: 26px;
  z-index: 1;
}
.cd-flb .cover-rule {
  width: 56px;
  height: 1px;
  background: rgba(200,160,80,0.35);
  margin: 0 0 26px;
  z-index: 1;
}
.cd-flb .cover-title {
  font-family: 'Playfair Display', serif;
  font-size: 34px;
  font-weight: 900;
  color: #f0e4cc;
  text-align: center;
  line-height: 1.1;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.cd-flb .cover-vol {
  font-style: italic;
  font-weight: 400;
  font-size: 20px;
  opacity: 0.7;
  margin-top: 6px;
}
.cd-flb .cover-rule:nth-of-type(2),
.cd-flb .cover-title + .cover-rule {
  margin: 26px 0;
}
.cd-flb .cover-sub {
  font-family: 'EB Garamond', serif;
  font-style: italic;
  font-size: 11px;
  color: rgba(200,160,80,0.55);
  letter-spacing: 1px;
  z-index: 1;
}

.cd-flb .colophon-label {
  font-family: 'EB Garamond', serif;
  font-size: 9px;
  letter-spacing: 4px;
  opacity: 0.35;
  margin-bottom: 18px;
}
.cd-flb .colophon-title {
  font-family: 'Playfair Display', serif;
  font-size: 18px;
  font-weight: 700;
  opacity: 0.9;
  margin-bottom: 8px;
}
.cd-flb .colophon-sub {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 12px;
  opacity: 0.5;
  margin-bottom: 22px;
}
.cd-flb .colophon-body {
  font-family: 'EB Garamond', serif;
  font-size: 11px;
  line-height: 1.8;
  opacity: 0.45;
}

.cd-flb .nav {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 26px;
  position: relative;
  z-index: 100;
}
.cd-flb .nav-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'EB Garamond', serif;
  font-size: 12px;
  letter-spacing: 2px;
  color: rgba(200,170,120,0.7);
  background: none;
  border: none;
  cursor: pointer;
  padding: 9px 18px;
  border-radius: 4px;
  transition: color 0.2s, background 0.2s;
}
.cd-flb .nav-btn:hover { color: rgba(220,190,140,1); background: rgba(200,170,120,0.08); }
.cd-flb .nav-btn:disabled { opacity: 0.3; cursor: default; }

.cd-flb .page-counter {
  font-family: 'EB Garamond', serif;
  font-size: 12px;
  color: rgba(200,170,120,0.45);
  letter-spacing: 2px;
  min-width: 80px;
  text-align: center;
}

.cd-flb .book-shadow {
  position: absolute;
  bottom: -18px;
  left: 10%;
  right: 10%;
  height: 28px;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.5) 0%, transparent 70%);
  filter: blur(12px);
  z-index: -1;
}

@media (max-width: 720px) {
  .cd-flb .book { width: 360px; height: 280px; }
  .cd-flb .page,
  .cd-flb .left-cover { width: 180px; height: 280px; }
  .cd-flb .page { left: 180px; }
  .cd-flb .pg { padding: 22px 18px; }
  .cd-flb .spread-title.sm { font-size: 20px; }
  .cd-flb .spread-title.xs { font-size: 18px; }
  .cd-flb .cover-title { font-size: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .cd-flb .book-scene,
  .cd-flb .page { transition: none !important; }
}
```

**JS:**
```js
(() => {
  const root = document.querySelector('.cd-flb');
  if (!root) return;
  const book = root.querySelector('[data-cd-flb-book]');
  const prevBtn = root.querySelector('[data-cd-flb-prev]');
  const nextBtn = root.querySelector('[data-cd-flb-next]');
  const counter = root.querySelector('[data-cd-flb-counter]');
  if (!book || !prevBtn || !nextBtn || !counter) return;

  const pages = Array.from(root.querySelectorAll('.page[data-page]'));
  const TOTAL_SPREADS = pages.length + 1;
  let currentSpread = 0;

  function update() {
    pages.forEach((page, i) => {
      page.classList.toggle('flipped', i < currentSpread);
      page.style.zIndex = i < currentSpread ? i + 1 : pages.length - i + 4;
    });
    counter.textContent = `Spread ${currentSpread + 1} of ${TOTAL_SPREADS}`;
    prevBtn.disabled = currentSpread === 0;
    nextBtn.disabled = currentSpread === TOTAL_SPREADS - 1;
  }

  prevBtn.addEventListener('click', () => { if (currentSpread > 0) { currentSpread--; update(); } });
  nextBtn.addEventListener('click', () => { if (currentSpread < TOTAL_SPREADS - 1) { currentSpread++; update(); } });

  // Click halves of the book to advance — scoped to the book itself
  book.addEventListener('click', e => {
    if (e.target.closest('.nav-btn')) return;
    const rect = book.getBoundingClientRect();
    if (e.clientX > rect.left + rect.width / 2) {
      if (currentSpread < TOTAL_SPREADS - 1) { currentSpread++; update(); }
    } else {
      if (currentSpread > 0) { currentSpread--; update(); }
    }
  });

  // Keyboard — only when pointer is inside the wrapper
  let pointerInside = false;
  root.addEventListener('mouseenter', () => { pointerInside = true; });
  root.addEventListener('mouseleave', () => { pointerInside = false; });
  document.addEventListener('keydown', e => {
    if (!pointerInside) return;
    if (e.key === 'ArrowRight') { nextBtn.click(); e.preventDefault(); }
    if (e.key === 'ArrowLeft')  { prevBtn.click(); e.preventDefault(); }
  });

  update();
})();
```

### 05. Bauhaus Cube Navigator

**Type:** CSS + JS
**Description:** A large drag-rotatable CSS 3D cube where each of the six genuine faces (built with translateZ + rotateX/Y) is a bold Bauhaus color block presenting a service category — Brand, Web, Motion, Space, Type, Print. Snap-to-face buttons below give precise navigation, an auto-rotate toggle keeps the cube turning slowly when idle, and both mouse and touch dragging let users orbit the cube freely. Bebas Neue + Space Grotesk. Best for product configurators, portfolio anchor sections, agency service navigators, interactive menus.

**HTML:**
```html
<section class="cd-bcb" aria-label="Bauhaus 3D cube navigator demo">
  <div class="card">
    <div class="scene">
      <div class="cube" data-cd-bcb-cube>

        <div class="face face-front">
          <span class="face-num">01</span>
          <span class="face-tag">Visual Identity</span>
          <div class="face-label">Brand<br />System</div>
        </div>
        <div class="face face-back">
          <span class="face-num">02</span>
          <span class="face-tag">Digital Experience</span>
          <div class="face-label">Web<br />Design</div>
        </div>
        <div class="face face-left">
          <span class="face-num">03</span>
          <span class="face-tag">Creative Strategy</span>
          <div class="face-label">Motion<br />Art</div>
        </div>
        <div class="face face-right">
          <span class="face-num">04</span>
          <span class="face-tag">Environmental</span>
          <div class="face-label">Space<br />Design</div>
        </div>
        <div class="face face-top">
          <span class="face-num">05</span>
          <span class="face-tag">Systems Thinking</span>
          <div class="face-label">Type<br />Craft</div>
        </div>
        <div class="face face-bottom">
          <span class="face-num">06</span>
          <span class="face-tag">Material Culture</span>
          <div class="face-label">Print<br />Works</div>
        </div>

      </div>
    </div>

    <div class="controls" data-cd-bcb-controls>
      <button class="ctrl-btn active" type="button" data-face="front"  data-rx="-18" data-ry="22">Brand</button>
      <button class="ctrl-btn"        type="button" data-face="back"   data-rx="-18" data-ry="202">Web</button>
      <button class="ctrl-btn"        type="button" data-face="left"   data-rx="-18" data-ry="112">Motion</button>
      <button class="ctrl-btn"        type="button" data-face="right"  data-rx="-18" data-ry="-68">Space</button>
      <button class="ctrl-btn"        type="button" data-face="top"    data-rx="-108" data-ry="22">Type</button>
      <button class="ctrl-btn"        type="button" data-face="bottom" data-rx="72"  data-ry="22">Print</button>
    </div>

    <div class="auto-toggle" data-cd-bcb-autotoggle>
      <div class="toggle-track" data-cd-bcb-autotrack>
        <div class="toggle-thumb"></div>
      </div>
      <span>Auto-rotate</span>
    </div>

  </div>
</section>
```

**CSS:**
```css
/* ─── 05 Bauhaus Cube Navigator — drag-rotatable 3D cube ───── */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Space+Grotesk:wght@300;400;500;600&display=swap');

.cd-bcb {
  --cd-bcb-bg: #f0ede8;

  position: relative;
  width: 100%;
  min-height: 620px;
  background: var(--cd-bcb-bg);
  font-family: 'Space Grotesk', system-ui, sans-serif;
  overflow: hidden;
  box-sizing: border-box;
}

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

.cd-bcb .card {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 24px;
}
.cd-bcb .card::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect width='1' height='1' x='0' y='0' fill='%23000' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
}

.cd-bcb .scene {
  perspective: 1400px;
  width: 320px;
  height: 320px;
  margin-bottom: 36px;
  position: relative;
  z-index: 1;
}

.cd-bcb .cube {
  width: 280px;
  height: 280px;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateX(-18deg) rotateY(22deg);
  transition: transform 0.85s cubic-bezier(0.23, 1, 0.32, 1);
  margin: 20px auto;
  will-change: transform;
  cursor: grab;
}
.cd-bcb .cube.dragging { cursor: grabbing; }

.cd-bcb .face {
  position: absolute;
  width: 280px;
  height: 280px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 24px;
  overflow: hidden;
  backface-visibility: visible;
}
.cd-bcb .face-front  { transform: translateZ(140px); }
.cd-bcb .face-back   { transform: rotateY(180deg) translateZ(140px); }
.cd-bcb .face-left   { transform: rotateY(-90deg) translateZ(140px); }
.cd-bcb .face-right  { transform: rotateY(90deg) translateZ(140px); }
.cd-bcb .face-top    { transform: rotateX(90deg) translateZ(140px); }
.cd-bcb .face-bottom { transform: rotateX(-90deg) translateZ(140px); }

.cd-bcb .face-front  { background: #e63b2e; }
.cd-bcb .face-back   { background: #2952cc; }
.cd-bcb .face-left   { background: #f0a500; }
.cd-bcb .face-right  { background: #1a8a4a; }
.cd-bcb .face-top    { background: #111111; }
.cd-bcb .face-bottom { background: #e8e2d8; }

.cd-bcb .face-front::before  { content: ''; position: absolute; top: -60px; right: -60px; width: 200px; height: 200px; border-radius: 50%; background: rgba(0,0,0,0.08); }
.cd-bcb .face-back::before   { content: ''; position: absolute; top: 20px; left: 20px; width: 0; height: 0; border-left: 110px solid transparent; border-right: 110px solid transparent; border-bottom: 180px solid rgba(255,255,255,0.06); }
.cd-bcb .face-left::before   { content: ''; position: absolute; inset: 20px; border: 2px solid rgba(0,0,0,0.1); }
.cd-bcb .face-right::before  { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 140px; height: 140px; background: rgba(255,255,255,0.07); }
.cd-bcb .face-top::before    { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(45deg, rgba(255,255,255,0.03) 0, rgba(255,255,255,0.03) 1px, transparent 0, transparent 50%); background-size: 20px 20px; }
.cd-bcb .face-bottom::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 30% 30%, rgba(0,0,0,0.04) 0%, transparent 70%); }

.cd-bcb .face-label {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 56px;
  letter-spacing: 2px;
  line-height: 0.9;
  position: relative;
  z-index: 1;
}
.cd-bcb .face-tag {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 9px;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 7px;
  position: relative;
  z-index: 1;
  opacity: 0.65;
}
.cd-bcb .face-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 108px;
  position: absolute;
  top: -18px;
  right: 14px;
  opacity: 0.06;
  line-height: 1;
  letter-spacing: -4px;
}

.cd-bcb .face-front .face-label, .cd-bcb .face-front .face-tag,
.cd-bcb .face-back  .face-label, .cd-bcb .face-back  .face-tag,
.cd-bcb .face-right .face-label, .cd-bcb .face-right .face-tag,
.cd-bcb .face-top   .face-label, .cd-bcb .face-top   .face-tag { color: #fff; }
.cd-bcb .face-left  .face-label, .cd-bcb .face-left  .face-tag,
.cd-bcb .face-bottom .face-label, .cd-bcb .face-bottom .face-tag { color: #1a1000; }
.cd-bcb .face-bottom .face-label { color: #111; }

.cd-bcb .face::after {
  content: '';
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08);
  pointer-events: none;
}

.cd-bcb .controls {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 420px;
  position: relative;
  z-index: 1;
}
.cd-bcb .ctrl-btn {
  padding: 8px 16px 8px 22px;
  border: 2px solid #111;
  background: transparent;
  color: #111;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.15s, color 0.15s;
  position: relative;
}
.cd-bcb .ctrl-btn::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cd-bcb-color);
}
.cd-bcb .ctrl-btn:hover,
.cd-bcb .ctrl-btn.active { background: #111; color: var(--cd-bcb-bg); }
.cd-bcb .ctrl-btn[data-face="front"]  { --cd-bcb-color: #e63b2e; }
.cd-bcb .ctrl-btn[data-face="back"]   { --cd-bcb-color: #2952cc; }
.cd-bcb .ctrl-btn[data-face="left"]   { --cd-bcb-color: #f0a500; }
.cd-bcb .ctrl-btn[data-face="right"]  { --cd-bcb-color: #1a8a4a; }
.cd-bcb .ctrl-btn[data-face="top"]    { --cd-bcb-color: #111111; }
.cd-bcb .ctrl-btn[data-face="bottom"] { --cd-bcb-color: #999; border-color: #999; }

.cd-bcb .auto-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  font-size: 11px;
  letter-spacing: 2px;
  color: rgba(0,0,0,0.45);
  text-transform: uppercase;
  cursor: pointer;
  user-select: none;
  position: relative;
  z-index: 1;
}
.cd-bcb .toggle-track {
  width: 36px;
  height: 18px;
  background: rgba(0,0,0,0.15);
  border-radius: 9px;
  position: relative;
  transition: background 0.2s;
}
.cd-bcb .toggle-track.on { background: #111; }
.cd-bcb .toggle-thumb {
  position: absolute;
  width: 12px;
  height: 12px;
  background: #fff;
  border-radius: 50%;
  top: 3px;
  left: 3px;
  transition: transform 0.2s;
}
.cd-bcb .toggle-track.on .toggle-thumb { transform: translateX(18px); }

@media (max-width: 720px) {
  .cd-bcb .scene { width: 260px; height: 260px; }
  .cd-bcb .cube { width: 220px; height: 220px; }
  .cd-bcb .face { width: 220px; height: 220px; padding: 18px; }
  .cd-bcb .face-front  { transform: translateZ(110px); }
  .cd-bcb .face-back   { transform: rotateY(180deg) translateZ(110px); }
  .cd-bcb .face-left   { transform: rotateY(-90deg) translateZ(110px); }
  .cd-bcb .face-right  { transform: rotateY(90deg) translateZ(110px); }
  .cd-bcb .face-top    { transform: rotateX(90deg) translateZ(110px); }
  .cd-bcb .face-bottom { transform: rotateX(-90deg) translateZ(110px); }
  .cd-bcb .face-label { font-size: 42px; }
}

@media (prefers-reduced-motion: reduce) {
  .cd-bcb .cube { transition: none !important; }
}
```

**JS:**
```js
(() => {
  const root = document.querySelector('.cd-bcb');
  if (!root) return;
  const cube = root.querySelector('[data-cd-bcb-cube]');
  const controls = root.querySelector('[data-cd-bcb-controls]');
  const toggle = root.querySelector('[data-cd-bcb-autotoggle]');
  const track = root.querySelector('[data-cd-bcb-autotrack]');
  if (!cube || !controls || !toggle || !track) return;

  const btns = controls.querySelectorAll('.ctrl-btn');
  let currentRx = -18, currentRy = 22;
  let autoRotate = false;
  let autoFrame = null;

  function setRotation(rx, ry) {
    currentRx = rx;
    currentRy = ry;
    cube.style.transform = `rotateX(${rx}deg) rotateY(${ry}deg)`;
  }

  btns.forEach(btn => {
    btn.addEventListener('click', () => {
      const rx = parseFloat(btn.dataset.rx);
      const ry = parseFloat(btn.dataset.ry);
      setRotation(rx, ry);
      btns.forEach(b => b.classList.remove('active'));
      btn.classList.add('active');
      if (autoRotate) stopAuto();
    });
  });

  function startAuto() {
    let start = null;
    const startRy = currentRy;
    function frame(ts) {
      if (!start) start = ts;
      const elapsed = ts - start;
      currentRy = startRy + elapsed * 0.04;
      cube.style.transform = `rotateX(${currentRx}deg) rotateY(${currentRy}deg)`;
      autoFrame = requestAnimationFrame(frame);
    }
    autoFrame = requestAnimationFrame(frame);
  }
  function stopAuto() {
    autoRotate = false;
    track.classList.remove('on');
    if (autoFrame) { cancelAnimationFrame(autoFrame); autoFrame = null; }
  }

  toggle.addEventListener('click', () => {
    autoRotate = !autoRotate;
    track.classList.toggle('on', autoRotate);
    if (autoRotate) startAuto();
    else stopAuto();
  });

  // Drag scoped to wrapper, not document
  let dragging = false, lastX = 0, lastY = 0;

  cube.addEventListener('mousedown', e => {
    dragging = true;
    cube.classList.add('dragging');
    lastX = e.clientX; lastY = e.clientY;
    if (autoRotate) stopAuto();
    e.preventDefault();
  });
  root.addEventListener('mousemove', e => {
    if (!dragging) return;
    currentRy += (e.clientX - lastX) * 0.5;
    currentRx -= (e.clientY - lastY) * 0.5;
    cube.style.transform = `rotateX(${currentRx}deg) rotateY(${currentRy}deg)`;
    lastX = e.clientX; lastY = e.clientY;
  });
  function endDrag() {
    dragging = false;
    cube.classList.remove('dragging');
  }
  root.addEventListener('mouseup', endDrag);
  root.addEventListener('mouseleave', endDrag);

  cube.addEventListener('touchstart', e => {
    dragging = true;
    lastX = e.touches[0].clientX;
    lastY = e.touches[0].clientY;
    if (autoRotate) stopAuto();
  }, { passive: true });
  root.addEventListener('touchmove', e => {
    if (!dragging) return;
    const t = e.touches[0];
    currentRy += (t.clientX - lastX) * 0.5;
    currentRx -= (t.clientY - lastY) * 0.5;
    cube.style.transform = `rotateX(${currentRx}deg) rotateY(${currentRy}deg)`;
    lastX = t.clientX;
    lastY = t.clientY;
  }, { passive: true });
  root.addEventListener('touchend', endDrag);
})();
```

### 06. Modular Synth Controls

**Type:** CSS + JS
**Description:** A dark anodized panel with four interaction systems working simultaneously: push buttons with 3D translateY press travel and colored LED dots, toggle switches with a spring-overshoot thumb animation, six vertical faders with drag-to-set handles + fill bars + real-time value readouts, and dual VU meters with color-coded segments (cyan → amber → red) animating continuously. A readout bar at the top updates live as controls change. Share Tech Mono + Rajdhani. Best for audio production apps, game HUDs, creative dashboards, hardware-inspired control panels.

**HTML:**
```html
<section class="cd-syn" aria-label="Modular synth control panel demo">
  <div class="card">
    <div class="panel">

      <div class="readout">
        <div class="readout-item">
          <div class="readout-key">Mode</div>
          <div class="readout-val" data-cd-syn-mode>STUDIO</div>
        </div>
        <div class="readout-item">
          <div class="readout-key">Master</div>
          <div class="readout-val" data-cd-syn-master>87</div>
        </div>
        <div class="readout-item">
          <div class="readout-key">BPM</div>
          <div class="readout-val" data-cd-syn-bpm>124</div>
        </div>
        <div class="readout-item">
          <div class="readout-key">Status</div>
          <div class="readout-val live">LIVE</div>
        </div>
      </div>

      <div class="main-layout">
        <div class="left-controls">

          <div class="section">
            <div class="section-label">Transport</div>
            <div class="btn-row">
              <button class="push-btn" type="button" data-action="play">
                <span class="push-btn-body"><span class="btn-led"></span><span class="push-btn-label">Play</span></span>
              </button>
              <button class="push-btn active" type="button" data-action="rec">
                <span class="push-btn-body"><span class="btn-led"></span><span class="push-btn-label">Rec</span></span>
              </button>
              <button class="push-btn" type="button" data-action="stop">
                <span class="push-btn-body"><span class="btn-led"></span><span class="push-btn-label">Stop</span></span>
              </button>
              <button class="push-btn active" type="button" data-action="loop">
                <span class="push-btn-body"><span class="btn-led"></span><span class="push-btn-label">Loop</span></span>
              </button>
              <button class="push-btn" type="button" data-action="fx">
                <span class="push-btn-body"><span class="btn-led"></span><span class="push-btn-label">FX</span></span>
              </button>
            </div>
          </div>

          <div class="section">
            <div class="section-label">Routing</div>
            <div class="toggle-row">
              <div class="toggle-unit">
                <button class="toggle-sw on" type="button" data-toggle="mono" style="--led-col:#00e8cc">
                  <span class="toggle-thumb"></span>
                  <span class="toggle-sw-led"></span>
                </button>
                <span class="toggle-label">Mono</span>
              </div>
              <div class="toggle-unit">
                <button class="toggle-sw" type="button" data-toggle="reverb" style="--led-col:#c060ff">
                  <span class="toggle-thumb"></span>
                  <span class="toggle-sw-led"></span>
                </button>
                <span class="toggle-label">Reverb</span>
              </div>
              <div class="toggle-unit">
                <button class="toggle-sw on" type="button" data-toggle="eq" style="--led-col:#ffaa00">
                  <span class="toggle-thumb"></span>
                  <span class="toggle-sw-led"></span>
                </button>
                <span class="toggle-label">EQ</span>
              </div>
              <div class="toggle-unit">
                <button class="toggle-sw" type="button" data-toggle="comp" style="--led-col:#ff3840">
                  <span class="toggle-thumb"></span>
                  <span class="toggle-sw-led"></span>
                </button>
                <span class="toggle-label">Comp</span>
              </div>
              <div class="toggle-unit">
                <button class="toggle-sw on" type="button" data-toggle="gate" style="--led-col:#00e060">
                  <span class="toggle-thumb"></span>
                  <span class="toggle-sw-led"></span>
                </button>
                <span class="toggle-label">Gate</span>
              </div>
            </div>
          </div>

          <div class="section">
            <div class="section-label">Channel Mix</div>
            <div class="fader-row" data-cd-syn-faderrow></div>
          </div>

        </div>

        <div class="right-controls">
          <div class="section-label rl">Level</div>
          <div class="vu-row" data-cd-syn-vurow></div>
        </div>

      </div>

    </div>
  </div>
</section>
```

**CSS:**
```css
/* ─── 06 Modular Synth Controls — audio control panel ──────── */
@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Rajdhani:wght@400;500;600;700&display=swap');

.cd-syn {
  --cd-syn-panel: #1a1c22;
  --cd-syn-inset: #14161b;
  --cd-syn-text-dim: rgba(120,140,180,0.4);
  --cd-syn-cyan: #00e8cc;
  --cd-syn-amber: #ffaa00;
  --cd-syn-red: #ff3840;
  --cd-syn-green: #00e060;
  --cd-syn-purple: #c060ff;
  --cd-syn-bg: #11131a;

  position: relative;
  width: 100%;
  min-height: 580px;
  background: var(--cd-syn-bg);
  font-family: 'Share Tech Mono', ui-monospace, monospace;
  overflow: hidden;
  box-sizing: border-box;
}

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

.cd-syn .card {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
}

.cd-syn .panel {
  width: 100%;
  max-width: 640px;
  background: var(--cd-syn-panel);
  border-radius: 16px;
  padding: 28px;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.05),
    0 2px 0 rgba(255,255,255,0.04),
    0 4px 24px rgba(0,0,0,0.6),
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 -1px 0 rgba(0,0,0,0.4) inset;
  position: relative;
}
.cd-syn .panel::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 16px;
  background-image: repeating-linear-gradient(90deg, transparent 0px, transparent 2px, rgba(255,255,255,0.007) 2px, rgba(255,255,255,0.007) 3px);
  pointer-events: none;
}

.cd-syn .readout {
  background: var(--cd-syn-inset);
  border-radius: 8px;
  padding: 11px 16px;
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.5);
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
  gap: 8px;
}
.cd-syn .readout-item { text-align: center; }
.cd-syn .readout-key {
  font-size: 7px;
  letter-spacing: 3px;
  color: var(--cd-syn-text-dim);
  text-transform: uppercase;
  margin-bottom: 3px;
}
.cd-syn .readout-val {
  font-family: 'Share Tech Mono', monospace;
  font-size: 13px;
  letter-spacing: 2px;
  color: var(--cd-syn-cyan);
  text-shadow: 0 0 10px rgba(0,232,204,0.5);
}
.cd-syn .readout-val.live {
  color: var(--cd-syn-green);
  text-shadow: 0 0 10px rgba(0,224,96,0.5);
}

.cd-syn .section { margin-bottom: 22px; }
.cd-syn .section:last-child { margin-bottom: 0; }
.cd-syn .section-label {
  font-family: 'Share Tech Mono', monospace;
  font-size: 9px;
  letter-spacing: 3px;
  color: var(--cd-syn-text-dim);
  text-transform: uppercase;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.cd-syn .section-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,0.06);
}
.cd-syn .section-label.rl { margin-bottom: 10px; }

.cd-syn .main-layout {
  display: flex;
  gap: 22px;
  align-items: flex-start;
}
.cd-syn .left-controls { flex: 1; }
.cd-syn .right-controls { display: flex; flex-direction: column; gap: 4px; }

/* Push buttons */
.cd-syn .btn-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.cd-syn .push-btn {
  position: relative;
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
  outline: none;
}
.cd-syn .push-btn-body {
  width: 72px;
  height: 50px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  position: relative;
  transition: transform 0.08s ease, box-shadow 0.08s ease;
  background: var(--cd-syn-btn-color);
  box-shadow:
    0 6px 0 var(--cd-syn-btn-shadow),
    0 7px 12px rgba(0,0,0,0.5),
    inset 0 1px 0 rgba(255,255,255,0.18),
    inset 0 -1px 0 rgba(0,0,0,0.3);
}
.cd-syn .push-btn:active .push-btn-body,
.cd-syn .push-btn.pressed .push-btn-body {
  transform: translateY(4px);
  box-shadow:
    0 2px 0 var(--cd-syn-btn-shadow),
    0 3px 6px rgba(0,0,0,0.5),
    inset 0 2px 4px rgba(0,0,0,0.3),
    inset 0 1px 0 rgba(255,255,255,0.08);
}
.cd-syn .push-btn-label {
  font-family: 'Share Tech Mono', monospace;
  font-size: 8px;
  letter-spacing: 1.5px;
  color: rgba(255,255,255,0.85);
  text-transform: uppercase;
}
.cd-syn .btn-led {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(0,0,0,0.4);
  transition: background 0.2s, box-shadow 0.2s;
}
.cd-syn .push-btn.active .btn-led {
  background: var(--cd-syn-led-color);
  box-shadow: 0 0 6px var(--cd-syn-led-color), 0 0 14px var(--cd-syn-led-color);
}
.cd-syn .push-btn:nth-child(1) { --cd-syn-btn-color: #1a2838; --cd-syn-btn-shadow: #0e1820; --cd-syn-led-color: #00e8cc; }
.cd-syn .push-btn:nth-child(2) { --cd-syn-btn-color: #281a10; --cd-syn-btn-shadow: #180e08; --cd-syn-led-color: #ffaa00; }
.cd-syn .push-btn:nth-child(3) { --cd-syn-btn-color: #281818; --cd-syn-btn-shadow: #180808; --cd-syn-led-color: #ff3840; }
.cd-syn .push-btn:nth-child(4) { --cd-syn-btn-color: #182818; --cd-syn-btn-shadow: #081808; --cd-syn-led-color: #00e060; }
.cd-syn .push-btn:nth-child(5) { --cd-syn-btn-color: #1e1a30; --cd-syn-btn-shadow: #100e20; --cd-syn-led-color: #c060ff; }

/* Toggles */
.cd-syn .toggle-row { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.cd-syn .toggle-unit { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.cd-syn .toggle-label {
  font-size: 8px;
  letter-spacing: 2px;
  color: var(--cd-syn-text-dim);
  text-transform: uppercase;
}
.cd-syn .toggle-sw {
  position: relative;
  width: 60px;
  height: 28px;
  cursor: pointer;
  border-radius: 6px;
  background: var(--cd-syn-inset);
  border: none;
  padding: 3px;
  box-shadow:
    inset 0 2px 6px rgba(0,0,0,0.6),
    inset 0 1px 2px rgba(0,0,0,0.8),
    0 1px 0 rgba(255,255,255,0.06);
}
.cd-syn .toggle-thumb {
  display: block;
  width: 26px;
  height: 22px;
  border-radius: 4px;
  background: linear-gradient(180deg, #2e3248 0%, #22263a 100%);
  box-shadow:
    0 3px 0 #12141e,
    0 4px 8px rgba(0,0,0,0.5),
    inset 0 1px 0 rgba(255,255,255,0.12);
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.cd-syn .toggle-sw.on .toggle-thumb { transform: translateX(28px); }
.cd-syn .toggle-sw-led {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  top: 50%;
  right: 7px;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.5);
  transition: background 0.2s, box-shadow 0.2s;
}
.cd-syn .toggle-sw.on .toggle-sw-led {
  background: var(--led-col);
  box-shadow: 0 0 6px var(--led-col);
}

/* Faders */
.cd-syn .fader-row { display: flex; gap: 18px; align-items: flex-end; flex-wrap: wrap; }
.cd-syn .fader-unit { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.cd-syn .fader-track-wrap {
  width: 28px;
  height: 120px;
  background: var(--cd-syn-inset);
  border-radius: 6px;
  box-shadow:
    inset 0 2px 6px rgba(0,0,0,0.6),
    inset 0 1px 3px rgba(0,0,0,0.8),
    0 1px 0 rgba(255,255,255,0.05);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cd-syn .fader-track-wrap::before {
  content: '';
  position: absolute;
  left: 4px;
  right: 4px;
  top: 10px;
  bottom: 10px;
  background: repeating-linear-gradient(to bottom, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 1px, transparent 1px, transparent 10px);
  pointer-events: none;
}
.cd-syn .fader-thumb {
  width: 24px;
  height: 20px;
  border-radius: 4px;
  background: linear-gradient(180deg, #3a3f58 0%, #2a2e44 100%);
  box-shadow:
    0 3px 0 #141620,
    0 4px 8px rgba(0,0,0,0.5),
    inset 0 1px 0 rgba(255,255,255,0.15);
  position: absolute;
  cursor: ns-resize;
  user-select: none;
  touch-action: none;
  z-index: 2;
}
.cd-syn .fader-fill {
  position: absolute;
  bottom: 10px;
  left: 10px;
  right: 10px;
  border-radius: 2px;
  background: linear-gradient(to top, var(--cd-syn-fader-color), transparent);
  opacity: 0.5;
  pointer-events: none;
}
.cd-syn .fader-label {
  font-size: 8px;
  letter-spacing: 2px;
  color: var(--cd-syn-text-dim);
  text-transform: uppercase;
}
.cd-syn .fader-value {
  font-size: 10px;
  font-family: 'Share Tech Mono', monospace;
  letter-spacing: 1px;
  min-height: 16px;
  color: var(--cd-syn-fader-color);
}

/* VU */
.cd-syn .vu-row { display: flex; gap: 9px; align-items: flex-end; margin-left: 8px; }
.cd-syn .vu-bar-wrap { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.cd-syn .vu-track {
  width: 13px;
  height: 120px;
  background: var(--cd-syn-inset);
  border-radius: 4px;
  box-shadow: inset 0 2px 5px rgba(0,0,0,0.6);
  display: flex;
  flex-direction: column-reverse;
  overflow: hidden;
  gap: 1px;
  padding: 3px;
}
.cd-syn .vu-seg {
  width: 100%;
  height: 7px;
  border-radius: 2px;
  background: var(--cd-syn-seg-color);
  opacity: 0.15;
  transition: opacity 0.08s;
  flex-shrink: 0;
}
.cd-syn .vu-seg.lit { opacity: 1; box-shadow: 0 0 6px var(--cd-syn-seg-color); }
.cd-syn .vu-label {
  font-size: 8px;
  letter-spacing: 2px;
  color: var(--cd-syn-text-dim);
  text-transform: uppercase;
}

@media (max-width: 720px) {
  .cd-syn .main-layout { flex-direction: column; }
  .cd-syn .right-controls { width: 100%; }
  .cd-syn .vu-row { justify-content: flex-start; margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .cd-syn .toggle-thumb { transition: none !important; }
  .cd-syn .vu-seg { transition: none !important; }
}
```

**JS:**
```js
(() => {
  const root = document.querySelector('.cd-syn');
  if (!root) return;

  // Push buttons
  const modeReadout = root.querySelector('[data-cd-syn-mode]');
  root.querySelectorAll('.push-btn').forEach(btn => {
    btn.addEventListener('click', () => {
      btn.classList.toggle('active');
      const action = btn.dataset.action;
      const modes = { play: 'PLAY', rec: 'RECORD', stop: 'STOPPED', loop: 'LOOP', fx: 'FX ON' };
      if (modes[action] && modeReadout) modeReadout.textContent = modes[action];
    });
  });

  // Toggles
  root.querySelectorAll('.toggle-sw').forEach(sw => {
    sw.addEventListener('click', () => sw.classList.toggle('on'));
  });

  // Faders
  const faderRow = root.querySelector('[data-cd-syn-faderrow]');
  const masterReadout = root.querySelector('[data-cd-syn-master]');
  const faderData = [
    { label: 'CH.1', color: 'var(--cd-syn-cyan)',   val: 87 },
    { label: 'CH.2', color: 'var(--cd-syn-cyan)',   val: 62 },
    { label: 'CH.3', color: 'var(--cd-syn-amber)',  val: 74 },
    { label: 'CH.4', color: 'var(--cd-syn-amber)',  val: 90 },
    { label: 'SUB',  color: 'var(--cd-syn-purple)', val: 55 },
    { label: 'MST',  color: 'var(--cd-syn-green)',  val: 87 },
  ];
  const TRACK_H = 120, PADDING = 10, THUMB_H = 20;
  const TRAVEL = TRACK_H - PADDING * 2 - THUMB_H;

  faderData.forEach((fd, fi) => {
    const unit = document.createElement('div');
    unit.className = 'fader-unit';
    unit.innerHTML = `
      <div class="fader-value" style="--cd-syn-fader-color:${fd.color}">${fd.val}</div>
      <div class="fader-track-wrap">
        <div class="fader-fill" style="--cd-syn-fader-color:${fd.color}"></div>
        <div class="fader-thumb"></div>
      </div>
      <div class="fader-label">${fd.label}</div>
    `;
    faderRow.appendChild(unit);

    const thumb = unit.querySelector('.fader-thumb');
    const fill = unit.querySelector('.fader-fill');
    const valEl = unit.querySelector('.fader-value');

    function setVal(v) {
      v = Math.max(0, Math.min(100, v));
      fd.val = Math.round(v);
      const pct = v / 100;
      thumb.style.top = (PADDING + TRAVEL * (1 - pct)) + 'px';
      fill.style.height = (TRAVEL * pct + THUMB_H / 2) + 'px';
      valEl.textContent = fd.val;
      if (fi === 5 && masterReadout) masterReadout.textContent = fd.val;
    }
    setVal(fd.val);

    let dragging = false, startY = 0, startVal = 0;
    thumb.addEventListener('mousedown', e => {
      dragging = true; startY = e.clientY; startVal = fd.val; e.preventDefault();
    });
    root.addEventListener('mousemove', e => {
      if (!dragging) return;
      setVal(startVal + ((startY - e.clientY) / TRAVEL) * 100);
    });
    root.addEventListener('mouseup', () => { dragging = false; });
    root.addEventListener('mouseleave', () => { dragging = false; });
    thumb.addEventListener('touchstart', e => {
      dragging = true; startY = e.touches[0].clientY; startVal = fd.val;
    }, { passive: true });
    root.addEventListener('touchmove', e => {
      if (!dragging) return;
      setVal(startVal + ((startY - e.touches[0].clientY) / TRAVEL) * 100);
    }, { passive: true });
    root.addEventListener('touchend', () => { dragging = false; });
  });

  // VU meters
  const vuRow = root.querySelector('[data-cd-syn-vurow]');
  const vuData = [
    { label: 'L', color: '#00e8cc' },
    { label: 'R', color: '#00e8cc' },
  ];
  const N_SEGS = 12;
  const vuIntervals = [];

  vuData.forEach((vu, vi) => {
    const wrap = document.createElement('div');
    wrap.className = 'vu-bar-wrap';
    const track = document.createElement('div');
    track.className = 'vu-track';
    for (let s = 0; s < N_SEGS; s++) {
      const seg = document.createElement('div');
      seg.className = 'vu-seg';
      const segColor = s >= N_SEGS - 2 ? '#ff3840' : s >= N_SEGS - 4 ? '#ffaa00' : vu.color;
      seg.style.setProperty('--cd-syn-seg-color', segColor);
      track.appendChild(seg);
    }
    const lbl = document.createElement('div');
    lbl.className = 'vu-label';
    lbl.textContent = vu.label;
    wrap.appendChild(track);
    wrap.appendChild(lbl);
    vuRow.appendChild(wrap);

    const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    if (prefersReduced) return;

    function animateVU() {
      const segs = track.querySelectorAll('.vu-seg');
      const base = 6;
      const variation = Math.random() > 0.9 ? Math.floor(Math.random() * 3) : 0;
      const level = base + variation;
      segs.forEach((seg, si) => {
        seg.classList.toggle('lit', si < level);
      });
      vuIntervals[vi] = setTimeout(animateVU, 80 + Math.random() * 60);
    }
    setTimeout(animateVU, vi * 40);
  });

  // BPM blink
  const bpmReadout = root.querySelector('[data-cd-syn-bpm]');
  if (bpmReadout) {
    setInterval(() => {
      bpmReadout.textContent = 124 + (Math.random() > 0.96 ? 1 : 0);
    }, 500);
  }
})();
```

### 07. Obsidian Vault

**Type:** CSS + JS
**Description:** Three floating jewel product cards (Amethyst, Sapphire, Ruby) hover-flip in a dark atmospheric void with drifting gold-dust particles. Each card bobs at its own rhythm and reveals a back face with acquisition details on hover. The CSS gem itself is built from clip-path hexagons with gradient facets and a slow breathing glow. The whole scene tilts in 3D space following the cursor via smooth parallax interpolation. Cormorant Garamond + Cinzel. Best for luxury e-commerce, high-end jewelry brands, watchmaker product pages, premium collectible drops.

**HTML:**
```html
<section class="cd-obs" aria-label="Obsidian Vault luxury cards demo">
  <div class="card">
    <div class="cd-obs-bg" aria-hidden="true"></div>
    <div class="cd-obs-floor" aria-hidden="true"></div>

    <div class="scene" data-cd-obs-scene>

      <article class="obs-card">
        <div class="face front">
          <span class="series-label">Collection I</span>
          <div class="gem-stage" style="--glow:rgba(148,80,230,0.85); --g-light:#c8a0f8; --g-mid:#8844e0; --g-dark:#4820a8;">
            <div class="gem-body">
              <div class="gem-table"></div>
              <div class="gem-crown-left"></div>
              <div class="gem-crown-right"></div>
            </div>
          </div>
          <div class="gem-name">Amethyst<br />Nocturne</div>
          <div class="gem-divider"></div>
          <div class="gem-price">$ 4,200</div>
          <div class="gem-dots">
            <div class="gem-dot active"></div>
            <div class="gem-dot active"></div>
            <div class="gem-dot active"></div>
            <div class="gem-dot"></div>
            <div class="gem-dot"></div>
          </div>
        </div>
        <div class="face back">
          <span class="back-ornament">◈</span>
          <span class="back-brand">Obsidian</span>
          <div class="back-rule"></div>
          <p class="back-description">A rare Zambian amethyst, set in cold-forged 18k white gold. Each stone selected for its violet depth and natural clarity.</p>
          <button class="back-cta" type="button">Acquire</button>
          <span class="back-sub">Limited Edition · No. 12 of 30</span>
        </div>
      </article>

      <article class="obs-card">
        <div class="face front">
          <span class="series-label">Collection II</span>
          <div class="gem-stage" style="--glow:rgba(30,140,240,0.85); --g-light:#80d0ff; --g-mid:#2888d8; --g-dark:#0c4a98;">
            <div class="gem-body">
              <div class="gem-table"></div>
              <div class="gem-crown-left"></div>
              <div class="gem-crown-right"></div>
            </div>
          </div>
          <div class="gem-name">Sapphire<br />Meridian</div>
          <div class="gem-divider"></div>
          <div class="gem-price">$ 7,800</div>
          <div class="gem-dots">
            <div class="gem-dot active"></div>
            <div class="gem-dot active"></div>
            <div class="gem-dot active"></div>
            <div class="gem-dot active"></div>
            <div class="gem-dot"></div>
          </div>
        </div>
        <div class="face back">
          <span class="back-ornament">◈</span>
          <span class="back-brand">Obsidian</span>
          <div class="back-rule"></div>
          <p class="back-description">Ceylon blue sapphire, untreated and certified. Suspended in a hand-finished platinum bezel, worn by the extraordinarily few.</p>
          <button class="back-cta" type="button">Acquire</button>
          <span class="back-sub">Limited Edition · No. 7 of 20</span>
        </div>
      </article>

      <article class="obs-card">
        <div class="face front">
          <span class="series-label">Collection III</span>
          <div class="gem-stage" style="--glow:rgba(228,55,50,0.85); --g-light:#ff9888; --g-mid:#d83030; --g-dark:#7a1018;">
            <div class="gem-body">
              <div class="gem-table"></div>
              <div class="gem-crown-left"></div>
              <div class="gem-crown-right"></div>
            </div>
          </div>
          <div class="gem-name">Ruby<br />Solstice</div>
          <div class="gem-divider"></div>
          <div class="gem-price">$ 12,400</div>
          <div class="gem-dots">
            <div class="gem-dot active"></div>
            <div class="gem-dot active"></div>
            <div class="gem-dot active"></div>
            <div class="gem-dot active"></div>
            <div class="gem-dot active"></div>
          </div>
        </div>
        <div class="face back">
          <span class="back-ornament">◈</span>
          <span class="back-brand">Obsidian</span>
          <div class="back-rule"></div>
          <p class="back-description">Burmese pigeon-blood ruby of extraordinary rarity. Each stone handpicked, individually documented, and signed by the master craftsman.</p>
          <button class="back-cta" type="button">Acquire</button>
          <span class="back-sub">Singular Edition · No. 1 of 8</span>
        </div>
      </article>

    </div>
  </div>
</section>
```

**CSS:**
```css
/* ─── 01 Obsidian Vault — luxury product cards ─────────────── */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=Cinzel:wght@400;600;700&display=swap');

.cd-obs {
  --cd-obs-bg: #060309;
  --cd-obs-gold: rgba(212, 168, 52, 0.85);

  position: relative;
  width: 100%;
  height: 560px;
  background: var(--cd-obs-bg);
  font-family: 'Cormorant Garamond', serif;
  overflow: hidden;
  perspective: 1600px;
  box-sizing: border-box;
}

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

.cd-obs .card {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Atmospheric background — scoped to wrapper, not body */
.cd-obs .cd-obs-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.cd-obs .cd-obs-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 55% at 18% 38%, rgba(90, 25, 150, 0.18) 0%, transparent 65%),
    radial-gradient(ellipse 45% 45% at 82% 62%, rgba(170, 80, 15, 0.13) 0%, transparent 65%),
    radial-gradient(ellipse 35% 50% at 50% 85%, rgba(15, 50, 90, 0.10) 0%, transparent 70%);
}
.cd-obs .cd-obs-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  opacity: 0.028;
  background-size: 300px 300px;
}

/* Floor reflection */
.cd-obs .cd-obs-floor {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 180px;
  background: linear-gradient(to top, rgba(212,168,52,0.04) 0%, transparent 100%);
  pointer-events: none;
}

/* Scene */
.cd-obs .scene {
  display: flex;
  gap: 30px;
  align-items: center;
  transform-style: preserve-3d;
  position: relative;
  z-index: 1;
  will-change: transform;
}

.cd-obs .obs-card {
  width: 196px;
  height: 288px;
  position: relative;
  transform-style: preserve-3d;
  cursor: pointer;
  transition: transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.cd-obs .obs-card:nth-child(1) { animation: cd-obs-float-a 6.4s ease-in-out infinite; }
.cd-obs .obs-card:nth-child(2) { animation: cd-obs-float-b 7.6s ease-in-out infinite -2.1s; }
.cd-obs .obs-card:nth-child(3) { animation: cd-obs-float-c 5.8s ease-in-out infinite -1.4s; }

@keyframes cd-obs-float-a { 0%,100%{transform:translateY(0) translateZ(0)} 50%{transform:translateY(-18px) translateZ(10px)} }
@keyframes cd-obs-float-b { 0%,100%{transform:translateY(-8px) translateZ(0)} 50%{transform:translateY(-24px) translateZ(12px)} }
@keyframes cd-obs-float-c { 0%,100%{transform:translateY(-4px) translateZ(0)} 50%{transform:translateY(-20px) translateZ(8px)} }

.cd-obs .obs-card:hover { transform: rotateY(180deg) translateZ(30px) !important; animation-play-state: paused; }

.cd-obs .face {
  position: absolute;
  inset: 0;
  border-radius: 20px;
  backface-visibility: hidden;
  overflow: hidden;
}

/* Front */
.cd-obs .front {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 26px 20px 22px;
  background: linear-gradient(148deg, #140c20 0%, #0c091a 42%, #160c22 100%);
  border: 1px solid rgba(212, 168, 52, 0.22);
  box-shadow:
    0 0 0 1px rgba(212,168,52,0.05),
    0 50px 100px rgba(0,0,0,0.85),
    0 25px 50px rgba(0,0,0,0.6),
    inset 0 1.5px 0 rgba(212,168,52,0.20),
    inset 0 -1px 0 rgba(0,0,0,0.5);
}
.cd-obs .front::before {
  content: '';
  position: absolute;
  top: 0; left: 14%; right: 14%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212,168,52,0.9), transparent);
}
.cd-obs .front::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 20px;
  background: radial-gradient(ellipse 90% 55% at 50% 18%, rgba(212,168,52,0.08) 0%, transparent 60%);
  pointer-events: none;
}

.cd-obs .series-label {
  font-family: 'Cinzel', serif;
  font-size: 9px;
  letter-spacing: 4.5px;
  color: rgba(212,168,52,0.72);
  text-transform: uppercase;
  z-index: 1;
}

/* Gem */
.cd-obs .gem-stage {
  width: 88px;
  height: 100px;
  margin: 16px auto 12px;
  position: relative;
  z-index: 1;
  animation: cd-obs-gem-breathe 3.5s ease-in-out infinite;
}
@keyframes cd-obs-gem-breathe {
  0%,100% { filter: drop-shadow(0 0 10px var(--glow)) drop-shadow(0 0 25px var(--glow)); transform: scale(1); }
  50%     { filter: drop-shadow(0 0 18px var(--glow)) drop-shadow(0 0 42px var(--glow)); transform: scale(1.04); }
}
.cd-obs .gem-body {
  width: 88px;
  height: 100px;
  background: linear-gradient(162deg, var(--g-light) 0%, var(--g-mid) 38%, var(--g-dark) 100%);
  clip-path: polygon(50% 0%, 88% 32%, 100% 56%, 50% 100%, 0% 56%, 12% 32%);
  position: relative;
}
.cd-obs .gem-body::before {
  content: '';
  position: absolute;
  inset: 0;
  clip-path: polygon(50% 0%, 88% 32%, 100% 56%, 50% 100%, 0% 56%, 12% 32%);
  background: linear-gradient(42deg, transparent 28%, rgba(255,255,255,0.14) 46%, rgba(255,255,255,0.03) 56%, transparent 68%);
  animation: cd-obs-shimmer-a 4.2s ease-in-out infinite;
}
.cd-obs .gem-body::after {
  content: '';
  position: absolute;
  inset: 0;
  clip-path: polygon(50% 0%, 88% 32%, 100% 56%, 50% 100%, 0% 56%, 12% 32%);
  background: linear-gradient(210deg, transparent 30%, rgba(255,255,255,0.08) 48%, transparent 62%);
  animation: cd-obs-shimmer-b 5.8s ease-in-out infinite;
}
@keyframes cd-obs-shimmer-a { 0%,100%{opacity:1} 50%{opacity:0.4} }
@keyframes cd-obs-shimmer-b { 0%,100%{opacity:0.3} 50%{opacity:1} }

.cd-obs .gem-table {
  position: absolute;
  top: 14%;
  left: 50%;
  transform: translateX(-50%);
  width: 44px;
  height: 14px;
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
  background: linear-gradient(to bottom, rgba(255,255,255,0.35), rgba(255,255,255,0.08));
}
.cd-obs .gem-crown-left,
.cd-obs .gem-crown-right {
  position: absolute;
  top: 0;
  width: 0; height: 0;
}
.cd-obs .gem-crown-left {
  left: 12%;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 22px solid rgba(255,255,255,0.09);
}
.cd-obs .gem-crown-right {
  right: 12%;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 22px solid rgba(255,255,255,0.09);
}

.cd-obs .gem-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  font-weight: 300;
  color: #ede4f8;
  text-align: center;
  line-height: 1.3;
  letter-spacing: 0.4px;
  z-index: 1;
}
.cd-obs .gem-divider {
  width: 38px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212,168,52,0.75), transparent);
  margin: 12px 0 10px;
  z-index: 1;
}
.cd-obs .gem-price {
  font-family: 'Cinzel', serif;
  font-size: 12px;
  letter-spacing: 2.5px;
  color: rgba(232,208,135,0.88);
  z-index: 1;
}
.cd-obs .gem-dots {
  display: flex;
  gap: 5px;
  margin-top: 8px;
  z-index: 1;
}
.cd-obs .gem-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(212,168,52,0.5);
}
.cd-obs .gem-dot.active { background: rgba(212,168,52,0.95); box-shadow: 0 0 6px rgba(212,168,52,0.8); }

/* Back */
.cd-obs .back {
  transform: rotateY(180deg);
  background: linear-gradient(152deg, #100c1e 0%, #0c0818 52%, #140a20 100%);
  border: 1px solid rgba(212,168,52,0.18);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 28px 24px;
  gap: 0;
}
.cd-obs .back::before {
  content: '';
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(212,168,52,0.09);
  border-radius: 12px;
}
.cd-obs .back-ornament {
  font-size: 8px;
  color: rgba(212,168,52,0.4);
  position: absolute;
  top: 20px;
  left: 24px;
}
.cd-obs .back-brand {
  font-family: 'Cinzel', serif;
  font-size: 9px;
  letter-spacing: 7px;
  color: rgba(212,168,52,0.62);
  margin-bottom: 20px;
}
.cd-obs .back-rule {
  width: 28px;
  height: 1px;
  background: rgba(212,168,52,0.35);
  margin-bottom: 20px;
}
.cd-obs .back-description {
  font-family: 'Cormorant Garamond', serif;
  font-size: 13.5px;
  font-weight: 300;
  font-style: italic;
  color: rgba(210,198,228,0.7);
  text-align: center;
  line-height: 1.82;
  margin-bottom: 22px;
}
.cd-obs .back-cta {
  padding: 9px 26px;
  border: 1px solid rgba(212,168,52,0.38);
  background: rgba(212,168,52,0.04);
  color: rgba(212,168,52,0.88);
  font-family: 'Cinzel', serif;
  font-size: 9px;
  letter-spacing: 4px;
  cursor: pointer;
  border-radius: 2px;
  transition: background 0.35s, border-color 0.35s;
  margin-bottom: 16px;
}
.cd-obs .back-cta:hover { background: rgba(212,168,52,0.10); border-color: rgba(212,168,52,0.6); }
.cd-obs .back-sub {
  font-family: 'Cormorant Garamond', serif;
  font-size: 11px;
  color: rgba(180,170,200,0.4);
  letter-spacing: 1.5px;
  font-style: italic;
}

/* Particles — injected by JS, position:absolute inside wrapper */
.cd-obs .cd-obs-particle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  animation: cd-obs-p-rise var(--pd) linear infinite var(--dl);
}
@keyframes cd-obs-p-rise {
  0%   { transform: translateY(20px) scale(0); opacity: 0; }
  8%   { opacity: var(--op); transform: translateY(0) scale(1); }
  85%  { opacity: calc(var(--op) * 0.4); }
  100% { transform: translateY(-90px) scale(0.4); opacity: 0; }
}

@media (max-width: 720px) {
  .cd-obs { height: 640px; }
  .cd-obs .scene { flex-direction: column; gap: 18px; }
  .cd-obs .obs-card { width: 168px; height: 248px; }
}

@media (prefers-reduced-motion: reduce) {
  .cd-obs .obs-card,
  .cd-obs .gem-stage,
  .cd-obs .gem-body::before,
  .cd-obs .gem-body::after,
  .cd-obs .cd-obs-particle { animation: none !important; }
  .cd-obs .scene { transform: none !important; }
}
```

**JS:**
```js
(() => {
  const root = document.querySelector('.cd-obs');
  if (!root) return;
  const scene = root.querySelector('[data-cd-obs-scene]');
  if (!scene) return;

  // Particles — appended to wrapper, not document.body
  const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  if (!prefersReduced) {
    for (let i = 0; i < 36; i++) {
      const p = document.createElement('div');
      p.className = 'cd-obs-particle';
      const sz = Math.random() * 2.2 + 0.4;
      p.style.cssText = `
        width: ${sz}px; height: ${sz}px;
        left: ${Math.random() * 100}%;
        top: ${Math.random() * 100}%;
        background: rgba(212,168,52,${Math.random() * 0.5 + 0.1});
        --pd: ${Math.random() * 12 + 8}s;
        --dl: ${-Math.random() * 20}s;
        --op: ${Math.random() * 0.55 + 0.1};
      `;
      root.appendChild(p);
    }
  }

  // Mouse parallax scoped to the wrapper
  let tRx = 0, tRy = 0, cRx = 0, cRy = 0, rafId = null;

  root.addEventListener('mousemove', e => {
    const rect = root.getBoundingClientRect();
    tRx = ((e.clientY - rect.top) / rect.height - 0.5) * 18;
    tRy = ((e.clientX - rect.left) / rect.width - 0.5) * 24;
    if (!rafId && !prefersReduced) rafId = requestAnimationFrame(animate);
  });
  root.addEventListener('mouseleave', () => {
    tRx = 0; tRy = 0;
  });

  function animate() {
    cRx += (tRx - cRx) * 0.06;
    cRy += (tRy - cRy) * 0.06;
    scene.style.transform = `rotateX(${cRx}deg) rotateY(${cRy}deg)`;
    if (Math.abs(tRx - cRx) > 0.05 || Math.abs(tRy - cRy) > 0.05) {
      rafId = requestAnimationFrame(animate);
    } else {
      rafId = null;
    }
  }
})();
```

### 08. Neon Lattice

**Type:** CSS + JS
**Description:** A 5×5 matrix of genuine CSS 3D cubes, each with six correctly positioned faces using translateZ and rotateY, spinning at randomized axes and speeds. Rows pulse in distinct neon bands — cyan, magenta, lime, amber, rose — with glowing top caps that throw colored drop-shadows down through the lattice. A scrolling grid background and slow scanline reinforce the cyberpunk readout feel, and full mouse-tilt parallax rotates the entire matrix in 3D space. Pure transforms, no WebGL. Best for tech dashboards, cyberpunk loading screens, interactive brand heros, sci-fi product launches.

**HTML:**
```html
<section class="cd-nln" aria-label="Neon Lattice 3D cube matrix demo">
  <div class="card">
    <div class="cd-nln-grid" aria-hidden="true"></div>
    <div class="cd-nln-vignette" aria-hidden="true"></div>
    <div class="cd-nln-scanline" aria-hidden="true"></div>

    <div class="matrix" data-cd-nln-matrix aria-hidden="true"></div>
  </div>
</section>
```

**CSS:**
```css
/* ─── 02 Neon Lattice — 5×5 spinning cube matrix ──────────── */
.cd-nln {
  --cd-nln-bg: #010208;

  position: relative;
  width: 100%;
  height: 560px;
  background: var(--cd-nln-bg);
  overflow: hidden;
  perspective: 1200px;
  box-sizing: border-box;
}

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

.cd-nln .card {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cd-nln .cd-nln-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0,220,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,220,255,0.035) 1px, transparent 1px);
  background-size: 42px 42px;
  animation: cd-nln-grid-shift 30s linear infinite;
  pointer-events: none;
}
@keyframes cd-nln-grid-shift {
  from { background-position: 0 0; }
  to   { background-position: 42px 42px; }
}

.cd-nln .cd-nln-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 75% 75% at 50% 50%, transparent 35%, rgba(1,2,8,0.94) 100%);
  pointer-events: none;
}

.cd-nln .cd-nln-scanline {
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: rgba(0, 220, 255, 0.06);
  animation: cd-nln-scan 6s linear infinite;
  pointer-events: none;
}
@keyframes cd-nln-scan {
  from { top: -2px; }
  to   { top: 100%; }
}

/* Matrix */
.cd-nln .matrix {
  display: grid;
  grid-template-columns: repeat(5, 72px);
  grid-template-rows: repeat(5, 72px);
  gap: 22px;
  transform-style: preserve-3d;
  transform: rotateX(22deg) rotateY(-18deg);
  transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  position: relative;
  z-index: 1;
}

.cd-nln .cube-wrap {
  width: 72px;
  height: 72px;
  perspective: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: cd-nln-glow-pulse var(--gp, 3s) ease-in-out infinite var(--gpd, 0s);
}
@keyframes cd-nln-glow-pulse {
  0%,100% { opacity: 0.85; }
  50%     { opacity: 1; }
}

.cd-nln .cube {
  width: 52px;
  height: 52px;
  position: relative;
  transform-style: preserve-3d;
  animation: cd-nln-spin var(--sd) linear infinite var(--dl);
}

.cd-nln .f {
  position: absolute;
  width: 52px;
  height: 52px;
  border: 1px solid rgba(255,255,255,0.04);
  backface-visibility: visible;
}
.cd-nln .f-front  { transform: translateZ(26px); }
.cd-nln .f-back   { transform: translateZ(-26px) rotateY(180deg); }
.cd-nln .f-left   { transform: translateX(-26px) rotateY(-90deg); }
.cd-nln .f-right  { transform: translateX(26px) rotateY(90deg); }
.cd-nln .f-top    { transform: translateY(-26px) rotateX(90deg); }
.cd-nln .f-bottom { transform: translateY(26px) rotateX(-90deg); }

/* Row 1 — Cyan */
.cd-nln .cube-wrap:nth-child(-n+5) .f-front  { background: rgba(0,18,38,0.95); }
.cd-nln .cube-wrap:nth-child(-n+5) .f-back   { background: rgba(0,12,28,0.95); }
.cd-nln .cube-wrap:nth-child(-n+5) .f-left   { background: rgba(0,10,24,0.92); }
.cd-nln .cube-wrap:nth-child(-n+5) .f-right  { background: rgba(0,14,30,0.92); }
.cd-nln .cube-wrap:nth-child(-n+5) .f-bottom { background: rgba(0,8,20,0.95); }
.cd-nln .cube-wrap:nth-child(-n+5) .f-top    { background: #00e8ff; box-shadow: 0 0 18px #00e8ff, 0 0 40px rgba(0,232,255,0.5); }
.cd-nln .cube-wrap:nth-child(-n+5) { filter: drop-shadow(0 0 8px rgba(0,232,255,0.35)); }

/* Row 2 — Magenta */
.cd-nln .cube-wrap:nth-child(n+6):nth-child(-n+10) .f-front  { background: rgba(28,0,38,0.95); }
.cd-nln .cube-wrap:nth-child(n+6):nth-child(-n+10) .f-back   { background: rgba(20,0,28,0.95); }
.cd-nln .cube-wrap:nth-child(n+6):nth-child(-n+10) .f-left   { background: rgba(16,0,24,0.92); }
.cd-nln .cube-wrap:nth-child(n+6):nth-child(-n+10) .f-right  { background: rgba(22,0,32,0.92); }
.cd-nln .cube-wrap:nth-child(n+6):nth-child(-n+10) .f-bottom { background: rgba(12,0,18,0.95); }
.cd-nln .cube-wrap:nth-child(n+6):nth-child(-n+10) .f-top    { background: #ff00ff; box-shadow: 0 0 18px #ff00ff, 0 0 40px rgba(255,0,255,0.5); }
.cd-nln .cube-wrap:nth-child(n+6):nth-child(-n+10) { filter: drop-shadow(0 0 8px rgba(255,0,255,0.35)); }

/* Row 3 — Lime */
.cd-nln .cube-wrap:nth-child(n+11):nth-child(-n+15) .f-front  { background: rgba(0,22,8,0.95); }
.cd-nln .cube-wrap:nth-child(n+11):nth-child(-n+15) .f-back   { background: rgba(0,15,5,0.95); }
.cd-nln .cube-wrap:nth-child(n+11):nth-child(-n+15) .f-left   { background: rgba(0,12,4,0.92); }
.cd-nln .cube-wrap:nth-child(n+11):nth-child(-n+15) .f-right  { background: rgba(0,18,6,0.92); }
.cd-nln .cube-wrap:nth-child(n+11):nth-child(-n+15) .f-bottom { background: rgba(0,10,3,0.95); }
.cd-nln .cube-wrap:nth-child(n+11):nth-child(-n+15) .f-top    { background: #00ff66; box-shadow: 0 0 18px #00ff66, 0 0 40px rgba(0,255,102,0.5); }
.cd-nln .cube-wrap:nth-child(n+11):nth-child(-n+15) { filter: drop-shadow(0 0 8px rgba(0,255,102,0.35)); }

/* Row 4 — Amber */
.cd-nln .cube-wrap:nth-child(n+16):nth-child(-n+20) .f-front  { background: rgba(30,14,0,0.95); }
.cd-nln .cube-wrap:nth-child(n+16):nth-child(-n+20) .f-back   { background: rgba(22,10,0,0.95); }
.cd-nln .cube-wrap:nth-child(n+16):nth-child(-n+20) .f-left   { background: rgba(18,8,0,0.92); }
.cd-nln .cube-wrap:nth-child(n+16):nth-child(-n+20) .f-right  { background: rgba(24,12,0,0.92); }
.cd-nln .cube-wrap:nth-child(n+16):nth-child(-n+20) .f-bottom { background: rgba(14,6,0,0.95); }
.cd-nln .cube-wrap:nth-child(n+16):nth-child(-n+20) .f-top    { background: #ffcc00; box-shadow: 0 0 18px #ffcc00, 0 0 40px rgba(255,204,0,0.5); }
.cd-nln .cube-wrap:nth-child(n+16):nth-child(-n+20) { filter: drop-shadow(0 0 8px rgba(255,204,0,0.35)); }

/* Row 5 — Rose */
.cd-nln .cube-wrap:nth-child(n+21) .f-front  { background: rgba(32,0,12,0.95); }
.cd-nln .cube-wrap:nth-child(n+21) .f-back   { background: rgba(22,0,8,0.95); }
.cd-nln .cube-wrap:nth-child(n+21) .f-left   { background: rgba(18,0,6,0.92); }
.cd-nln .cube-wrap:nth-child(n+21) .f-right  { background: rgba(26,0,10,0.92); }
.cd-nln .cube-wrap:nth-child(n+21) .f-bottom { background: rgba(12,0,4,0.95); }
.cd-nln .cube-wrap:nth-child(n+21) .f-top    { background: #ff3080; box-shadow: 0 0 18px #ff3080, 0 0 40px rgba(255,48,128,0.5); }
.cd-nln .cube-wrap:nth-child(n+21) { filter: drop-shadow(0 0 8px rgba(255,48,128,0.35)); }

@keyframes cd-nln-spin {
  from { transform: rotateX(var(--rx-start,0deg)) rotateY(var(--ry-start,0deg)) rotateZ(0deg); }
  to   { transform: rotateX(var(--rx-end,360deg)) rotateY(var(--ry-end,360deg)) rotateZ(var(--rz-end,0deg)); }
}

@media (max-width: 720px) {
  .cd-nln .matrix {
    grid-template-columns: repeat(5, 52px);
    grid-template-rows: repeat(5, 52px);
    gap: 16px;
  }
  .cd-nln .cube-wrap { width: 52px; height: 52px; }
  .cd-nln .cube, .cd-nln .f { width: 40px; height: 40px; }
  .cd-nln .f-front  { transform: translateZ(20px); }
  .cd-nln .f-back   { transform: translateZ(-20px) rotateY(180deg); }
  .cd-nln .f-left   { transform: translateX(-20px) rotateY(-90deg); }
  .cd-nln .f-right  { transform: translateX(20px) rotateY(90deg); }
  .cd-nln .f-top    { transform: translateY(-20px) rotateX(90deg); }
  .cd-nln .f-bottom { transform: translateY(20px) rotateX(-90deg); }
}

@media (prefers-reduced-motion: reduce) {
  .cd-nln .cd-nln-grid,
  .cd-nln .cd-nln-scanline,
  .cd-nln .cube-wrap,
  .cd-nln .cube { animation: none !important; }
}
```

**JS:**
```js
(() => {
  const root = document.querySelector('.cd-nln');
  if (!root) return;
  const matrix = root.querySelector('[data-cd-nln-matrix]');
  if (!matrix) return;

  // Build cubes
  const axes = [
    [360, 360, 0], [360, 0, 0], [0, 360, 0],
    [0, 0, 360], [360, 360, 360], [-360, 360, 0], [360, -360, 0],
  ];
  for (let i = 0; i < 25; i++) {
    const ax = axes[Math.floor(Math.random() * axes.length)];
    const sd = (Math.random() * 8 + 3).toFixed(1) + 's';
    const dl = (-Math.random() * 12).toFixed(2) + 's';
    const gp = (Math.random() * 3 + 2).toFixed(1) + 's';
    const gpd = (-Math.random() * 5).toFixed(2) + 's';
    const rxStart = Math.random() * 360;
    const ryStart = Math.random() * 360;

    const wrap = document.createElement('div');
    wrap.className = 'cube-wrap';
    wrap.style.cssText = `--gp:${gp}; --gpd:${gpd};`;

    const cube = document.createElement('div');
    cube.className = 'cube';
    cube.style.cssText = `
      --sd:${sd}; --dl:${dl};
      --rx-start:${rxStart}deg; --ry-start:${ryStart}deg;
      --rx-end:${rxStart + ax[0]}deg; --ry-end:${ryStart + ax[1]}deg; --rz-end:${ax[2]}deg;
    `;

    cube.innerHTML = '<div class="f f-front"></div><div class="f f-back"></div><div class="f f-left"></div><div class="f f-right"></div><div class="f f-top"></div><div class="f f-bottom"></div>';

    wrap.appendChild(cube);
    matrix.appendChild(wrap);
  }

  // Mouse parallax scoped to wrapper
  const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  if (prefersReduced) return;

  let tx = 22, ty = -18, cx = 22, cy = -18, rafId = null;

  root.addEventListener('mousemove', e => {
    const rect = root.getBoundingClientRect();
    tx = 22 + ((e.clientY - rect.top) / rect.height - 0.5) * 25;
    ty = -18 + ((e.clientX - rect.left) / rect.width - 0.5) * 30;
    if (!rafId) rafId = requestAnimationFrame(animate);
  });
  root.addEventListener('mouseleave', () => { tx = 22; ty = -18; });

  function animate() {
    cx += (tx - cx) * 0.055;
    cy += (ty - cy) * 0.055;
    matrix.style.transform = `rotateX(${cx}deg) rotateY(${cy}deg)`;
    if (Math.abs(tx - cx) > 0.05 || Math.abs(ty - cy) > 0.05) {
      rafId = requestAnimationFrame(animate);
    } else {
      rafId = null;
    }
  }
})();
```

### 09. Chromatic Helix

**Type:** CSS + JS
**Description:** A full 3D DNA-style double helix of 60 glowing CSS orbs (30 per strand), mathematically positioned along sinusoidal spiral paths using translate3d. Strand 1 bleeds through warm sunset tones (red → amber → lime); strand 2 through cool space tones (cyan → violet → rose). Connecting rungs bridge the two strands at every other level. A starfield canvas twinkles behind a soft nebula gradient, the helix auto-rotates at a steady cadence, and click-drag scrubs the rotation forward or backward. Best for scientific/biotech visualization, decorative data art, cinematic preloaders, immersive product reveal sections.

**HTML:**
```html
<section class="cd-chx" aria-label="Chromatic Helix 3D DNA helix demo">
  <div class="card">
    <div class="cd-chx-nebula" aria-hidden="true"></div>
    <canvas class="cd-chx-stars" data-cd-chx-stars aria-hidden="true"></canvas>

    <div class="scene" data-cd-chx-scene>
      <div class="axis" aria-hidden="true"></div>
    </div>

    <div class="data-readout" aria-hidden="true">
      <div class="data-item"><span class="data-val">60</span>NODES</div>
      <div class="data-item"><span class="data-val">2</span>STRANDS</div>
      <div class="data-item"><span class="data-val">4</span>TURNS</div>
    </div>
  </div>
</section>
```

**CSS:**
```css
/* ─── 03 Chromatic Helix — 3D DNA double helix ─────────────── */
.cd-chx {
  --cd-chx-bg: #010209;

  position: relative;
  width: 100%;
  height: 620px;
  background: var(--cd-chx-bg);
  overflow: hidden;
  perspective: 900px;
  box-sizing: border-box;
}

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

.cd-chx .card {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cd-chx .cd-chx-nebula {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 40% at 25% 30%, rgba(60, 10, 120, 0.16) 0%, transparent 70%),
    radial-gradient(ellipse 50% 35% at 75% 70%, rgba(10, 60, 120, 0.12) 0%, transparent 70%),
    radial-gradient(ellipse 40% 30% at 50% 50%, rgba(90, 15, 60, 0.08) 0%, transparent 70%);
}

.cd-chx .cd-chx-stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Scene */
.cd-chx .scene {
  position: relative;
  width: 360px;
  height: 520px;
  transform-style: preserve-3d;
  animation: cd-chx-scene-rotate 18s linear infinite;
  cursor: grab;
}
.cd-chx .scene.dragging { cursor: grabbing; }

@keyframes cd-chx-scene-rotate {
  from { transform: rotateY(0deg) rotateX(8deg); }
  to   { transform: rotateY(360deg) rotateX(8deg); }
}

.cd-chx .orb {
  position: absolute;
  border-radius: 50%;
  transform-style: preserve-3d;
  will-change: transform;
}

.cd-chx .rung {
  position: absolute;
  height: 1px;
  transform-origin: left center;
  pointer-events: none;
}

.cd-chx .axis {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(to bottom,
    transparent 0%,
    rgba(180, 100, 255, 0.15) 15%,
    rgba(180, 100, 255, 0.25) 50%,
    rgba(180, 100, 255, 0.15) 85%,
    transparent 100%
  );
  transform: translateX(-50%) translateZ(0px);
  pointer-events: none;
}

/* Data readout */
.cd-chx .data-readout {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 32px;
  pointer-events: none;
  z-index: 10;
}
.cd-chx .data-item {
  text-align: center;
  font-family: 'Courier New', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 2px;
  color: rgba(180, 140, 255, 0.45);
}
.cd-chx .data-val {
  display: block;
  font-size: 16px;
  font-weight: bold;
  color: rgba(200, 160, 255, 0.7);
  margin-bottom: 2px;
}

@media (max-width: 720px) {
  .cd-chx { height: 560px; }
  .cd-chx .scene { width: 280px; height: 460px; }
}

@media (prefers-reduced-motion: reduce) {
  .cd-chx .scene { animation: none !important; }
}
```

**JS:**
```js
(() => {
  const root = document.querySelector('.cd-chx');
  if (!root) return;
  const scene = root.querySelector('[data-cd-chx-scene]');
  const canvas = root.querySelector('[data-cd-chx-stars]');
  if (!scene || !canvas) return;

  const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

  // Stars — sized to the wrapper, not the viewport
  function resizeCanvas() {
    const rect = root.getBoundingClientRect();
    canvas.width = rect.width;
    canvas.height = rect.height;
  }
  resizeCanvas();
  const resizeObs = new ResizeObserver(resizeCanvas);
  resizeObs.observe(root);

  const ctx = canvas.getContext('2d');
  const stars = Array.from({ length: 160 }, () => ({
    x: Math.random() * canvas.width,
    y: Math.random() * canvas.height,
    r: Math.random() * 1.2 + 0.2,
    a: Math.random() * 0.7 + 0.1,
    twinkle: Math.random() * Math.PI * 2,
    speed: Math.random() * 0.02 + 0.005,
  }));

  function drawStars(t) {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    stars.forEach(s => {
      const alpha = s.a * (0.6 + 0.4 * Math.sin(t * s.speed + s.twinkle));
      ctx.beginPath();
      ctx.arc(s.x, s.y, s.r, 0, Math.PI * 2);
      ctx.fillStyle = `rgba(220, 210, 255, ${alpha})`;
      ctx.fill();
    });
    if (!prefersReduced) requestAnimationFrame(drawStars);
  }
  drawStars(0);

  // Helix
  const N = 30;
  const TURNS = 4;
  const RADIUS = 110;
  const HEIGHT = 480;
  const ORB_SIZE = 16;

  const palette1 = [
    [255, 100, 60], [255, 150, 40], [255, 200, 30], [220, 240, 50], [140, 240, 100],
  ];
  const palette2 = [
    [60, 220, 255], [80, 160, 255], [120, 90, 255], [200, 70, 255], [255, 80, 200],
  ];

  function lerpColor(p, t) {
    const seg = (p.length - 1) * t;
    const i = Math.min(Math.floor(seg), p.length - 2);
    const f = seg - i;
    return p[i].map((v, k) => Math.round(v + (p[i + 1][k] - v) * f));
  }

  function makeOrb(x, y, z, color, size, glowIntensity) {
    const [r, g, b] = color;
    const orb = document.createElement('div');
    orb.className = 'orb';
    const s = size || ORB_SIZE;
    orb.style.cssText = `
      width: ${s}px;
      height: ${s}px;
      left: calc(50% + ${x}px - ${s / 2}px);
      top: calc(50% + ${y}px - ${s / 2}px);
      transform: translateZ(${z}px);
      background: radial-gradient(circle at 35% 35%,
        rgba(${r},${g},${b}, 0.95) 0%,
        rgba(${r},${g},${b}, 0.75) 35%,
        rgba(${Math.max(0, r - 60)},${Math.max(0, g - 60)},${Math.max(0, b - 60)}, 0.5) 70%,
        transparent 100%
      );
      box-shadow:
        0 0 ${glowIntensity * 0.6}px rgba(${r},${g},${b},0.9),
        0 0 ${glowIntensity * 1.2}px rgba(${r},${g},${b},0.55),
        0 0 ${glowIntensity * 2}px rgba(${r},${g},${b},0.25),
        inset 0 0 ${s * 0.4}px rgba(255,255,255,0.25);
    `;
    return orb;
  }

  function makeRung(x1, y1, z1, x2, y2, z2, color1, color2) {
    const [r1, g1, b1] = color1;
    const [r2, g2, b2] = color2;
    const dx = x2 - x1;
    const dz = z2 - z1;
    const length = Math.sqrt(dx * dx + dz * dz);
    const angleY = Math.atan2(dx, dz) * (180 / Math.PI);
    const rung = document.createElement('div');
    rung.className = 'rung';
    rung.style.cssText = `
      width: ${length}px;
      left: calc(50% + ${x1}px);
      top: calc(50% + ${y1}px);
      transform: translateZ(${z1}px) rotateY(${angleY}deg);
      transform-origin: 0 0;
      background: linear-gradient(90deg,
        rgba(${r1},${g1},${b1},0.55),
        rgba(${Math.round((r1 + r2) / 2)},${Math.round((g1 + g2) / 2)},${Math.round((b1 + b2) / 2)},0.25),
        rgba(${r2},${g2},${b2},0.55)
      );
    `;
    return rung;
  }

  const yOffset = -HEIGHT / 2;
  for (let i = 0; i < N; i++) {
    const t = i / (N - 1);
    const angle = t * TURNS * Math.PI * 2;
    const y = yOffset + t * HEIGHT;

    const x1 = Math.cos(angle) * RADIUS;
    const z1 = Math.sin(angle) * RADIUS;
    const c1 = lerpColor(palette1, t);

    const x2 = Math.cos(angle + Math.PI) * RADIUS;
    const z2 = Math.sin(angle + Math.PI) * RADIUS;
    const c2 = lerpColor(palette2, t);

    const sz1 = ORB_SIZE + Math.sin(t * Math.PI * 3) * 3;
    const sz2 = ORB_SIZE + Math.cos(t * Math.PI * 3) * 3;

    scene.appendChild(makeOrb(x1, y, z1, c1, sz1, 22));
    scene.appendChild(makeOrb(x2, y, z2, c2, sz2, 22));

    if (i % 2 === 0) {
      scene.appendChild(makeRung(x1, y, z1, x2, y, z2, c1, c2));
    }
  }

  // Drag-to-scrub rotation — scoped to wrapper
  if (prefersReduced) return;

  let userRY = 0, dragging = false, lastX = 0, autoAngle = 0;

  scene.addEventListener('mousedown', e => {
    dragging = true;
    lastX = e.clientX;
    scene.classList.add('dragging');
    e.preventDefault();
  });
  document.addEventListener('mouseup', () => {
    dragging = false;
    scene.classList.remove('dragging');
  });
  document.addEventListener('mousemove', e => {
    if (!dragging) return;
    userRY += (e.clientX - lastX) * 0.4;
    lastX = e.clientX;
  });

  function rotateTick() {
    autoAngle += 0.18;
    scene.style.transform = `rotateY(${autoAngle + userRY}deg) rotateX(8deg)`;
    scene.style.animation = 'none';
    requestAnimationFrame(rotateTick);
  }
  rotateTick();
})();
```

---
## 26 CSS Accordions — Vertical & Horizontal

URL: https://codefronts.com/navigation/css-accordions/
Description: 26 free CSS accordions — 17 vertical and 9 horizontal layouts with copy-paste HTML and CSS.
Demo count: 26

### 01. Underline Reveal

**Type:** Pure CSS
**Description:** Vertical accordion with a left-anchored underline that grows across the open trigger.

**HTML:**
```html
<details class="acc-uline" name="acc-uline" open>
  <summary>What is CodeFronts?</summary>
  <p>
    A library of hand-crafted CSS components, generators and tools for developers who care about
    craft.
  </p>
</details>
<details class="acc-uline" name="acc-uline">
  <summary>Is everything free?</summary>
  <p>Yes — MIT licensed for personal and commercial projects, no attribution required.</p>
</details>
<details class="acc-uline" name="acc-uline">
  <summary>Does it use any frameworks?</summary>
  <p>No frameworks, no dependencies. Vanilla HTML, CSS and a tiny bit of JS where needed.</p>
</details>
```

**CSS:**
```css
.acc-uline { border-bottom: 1px solid rgba(156,123,214,0.18); }
.acc-uline summary {
  position: relative; cursor: pointer; list-style: none;
  padding: 14px 0; font: 600 13px/1.4 system-ui, sans-serif;
  color: rgba(240,238,255,0.62); transition: color .25s;
}
.acc-uline summary::-webkit-details-marker { display: none; }
.acc-uline summary::after {
  content: ''; position: absolute; left: 0; bottom: -1px;
  height: 2px; width: 0;
  background: linear-gradient(90deg, #9c7bd6, #d49a5c);
  transition: width .4s cubic-bezier(.2,.9,.3,1);
}
.acc-uline[open] summary { color: #f0eeff; }
.acc-uline[open] summary::after { width: 100%; }
.acc-uline p {
  margin: 0; padding: 10px 0 16px;
  font: 12px/1.6 system-ui, sans-serif; color: rgba(240,238,255,0.55);
}
```

### 02. Numbered Steps

**Type:** Pure CSS
**Description:** Each row is a numbered step with a circular badge that fills amethyst when expanded.

**HTML:**
```html
<details class="acc-step" name="acc-step" open>
  <summary><span class="acc-step__n">1</span> Install the package</summary>
  <p>Add the library to your project with one command — no build step required.</p>
</details>
<details class="acc-step" name="acc-step">
  <summary><span class="acc-step__n">2</span> Import a component</summary>
  <p>Pull in only the components you need. Tree-shakable and zero runtime overhead.</p>
</details>
<details class="acc-step" name="acc-step">
  <summary><span class="acc-step__n">3</span> Customize with tokens</summary>
  <p>Override CSS custom properties to match your brand colors and spacing scale.</p>
</details>
```

**CSS:**
```css
.acc-step { margin-bottom: 8px; }
.acc-step summary {
  display: flex; align-items: center; gap: 12px;
  cursor: pointer; list-style: none;
  padding: 12px 14px; border-radius: 10px;
  background: rgba(156,123,214,0.06);
  font: 600 13px/1.3 system-ui, sans-serif; color: rgba(240,238,255,0.75);
  transition: background .2s;
}
.acc-step summary::-webkit-details-marker { display: none; }
.acc-step__n {
  display: grid; place-items: center;
  width: 22px; height: 22px; border-radius: 50%;
  border: 1.5px solid rgba(156,123,214,0.5);
  font: 700 11px monospace; color: rgba(240,238,255,0.7);
  transition: all .25s;
}
.acc-step[open] > summary { background: rgba(156,123,214,0.16); color: #f0eeff; }
.acc-step[open] .acc-step__n { background: #9c7bd6; color: #fff; border-color: #9c7bd6; }
.acc-step p {
  margin: 8px 0 0; padding: 0 14px 12px 48px;
  font: 12px/1.6 system-ui, sans-serif; color: rgba(240,238,255,0.55);
}
```

### 03. Plus / Minus Morph

**Type:** Pure CSS
**Description:** A pure-CSS plus icon that morphs into a minus when the row opens — both bars are pseudo-elements.

**HTML:**
```html
<details class="acc-pm" name="acc-pm">
  <summary>Project setup<span class="acc-pm__ico" aria-hidden="true"></span></summary>
  <p>Drop the snippet into any HTML page — works with any framework or none at all.</p>
</details>
<details class="acc-pm" name="acc-pm" open>
  <summary>Browser support<span class="acc-pm__ico" aria-hidden="true"></span></summary>
  <p>Modern evergreen browsers. Native &lt;details&gt; has shipped everywhere since 2020.</p>
</details>
<details class="acc-pm" name="acc-pm">
  <summary>Theming<span class="acc-pm__ico" aria-hidden="true"></span></summary>
  <p>Override --acc-pm-accent on the parent to recolor the entire group instantly.</p>
</details>
```

**CSS:**
```css
.acc-pm { --acc-pm-accent: #d49a5c;
  border: 1px solid rgba(212,154,92,0.18); border-radius: 10px;
  margin-bottom: 6px; overflow: hidden;
}
.acc-pm summary {
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer; list-style: none; padding: 13px 16px;
  font: 600 13px/1.3 system-ui, sans-serif; color: rgba(240,238,255,0.78);
}
.acc-pm summary::-webkit-details-marker { display: none; }
.acc-pm__ico {
  position: relative; width: 14px; height: 14px; flex-shrink: 0;
}
.acc-pm__ico::before, .acc-pm__ico::after {
  content: ''; position: absolute; inset: 0; margin: auto;
  background: var(--acc-pm-accent); border-radius: 1px;
  transition: transform .35s cubic-bezier(.5,1.5,.5,1);
}
.acc-pm__ico::before { width: 100%; height: 2px; }
.acc-pm__ico::after  { width: 2px;  height: 100%; }
.acc-pm[open] .acc-pm__ico::after  { transform: rotate(90deg); }
.acc-pm[open] .acc-pm__ico::before { transform: rotate(180deg); }
.acc-pm[open] { background: rgba(212,154,92,0.05); }
.acc-pm p {
  margin: 0; padding: 0 16px 14px;
  font: 12px/1.6 system-ui, sans-serif; color: rgba(240,238,255,0.55);
}
```

### 04. Chevron Rotate

**Type:** Pure CSS
**Description:** A pure-CSS chevron arrow rotates 180° on open — built from a single bordered square.

**HTML:**
```html
<details class="acc-chv" name="acc-chv">
  <summary>How long does setup take?<span class="acc-chv__ico" aria-hidden="true"></span></summary>
  <p>Under five minutes. Copy the markup, paste the styles, you're done.</p>
</details>
<details class="acc-chv" name="acc-chv" open>
  <summary>
    Can I use this commercially?<span class="acc-chv__ico" aria-hidden="true"></span>
  </summary>
  <p>Yes — MIT licensed. Use it in client work, products, anywhere.</p>
</details>
<details class="acc-chv" name="acc-chv">
  <summary>Is there a Figma version?<span class="acc-chv__ico" aria-hidden="true"></span></summary>
  <p>Not yet. Designs live in code as the source of truth.</p>
</details>
```

**CSS:**
```css
.acc-chv {
  border-bottom: 1px solid rgba(143,179,163,0.18); padding: 4px 0;
}
.acc-chv summary {
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer; list-style: none; padding: 14px 4px;
  font: 600 13px/1.3 system-ui, sans-serif; color: rgba(240,238,255,0.7);
  transition: color .2s;
}
.acc-chv summary::-webkit-details-marker { display: none; }
.acc-chv summary:hover { color: #f0eeff; }
.acc-chv__ico {
  width: 9px; height: 9px;
  border-right: 2px solid #8fb3a3;
  border-bottom: 2px solid #8fb3a3;
  transform: rotate(45deg) translate(-2px,-2px);
  transition: transform .35s cubic-bezier(.4,1.4,.5,1);
  flex-shrink: 0;
}
.acc-chv[open] > summary { color: #f0eeff; }
.acc-chv[open] .acc-chv__ico {
  transform: rotate(225deg) translate(-2px,-2px);
}
.acc-chv p {
  margin: 0 0 12px; padding: 0 4px;
  font: 12px/1.6 system-ui, sans-serif; color: rgba(240,238,255,0.55);
}
```

### 05. Brutalist Stamp

**Type:** Pure CSS
**Description:** Heavy-bordered, rectangular accordion with a hard offset shadow that flips on open.

**HTML:**
```html
<details class="acc-brut" name="acc-brut" open>
  <summary>RAW PRINCIPLES</summary>
  <p>No gradients. No shadows blurred soft. Just hard rectangles, two colors, and intent.</p>
</details>
<details class="acc-brut" name="acc-brut">
  <summary>NO COMPROMISE</summary>
  <p>Function leads form. Form documents function. Decoration earns its keep or it leaves.</p>
</details>
<details class="acc-brut" name="acc-brut">
  <summary>BUILT TO LAST</summary>
  <p>Heavy structure ages well. Trends fade. A clear typographic system stays useful.</p>
</details>
```

**CSS:**
```css
.acc-brut {
  background: #f0eeff; color: #15151d;
  border: 2px solid #15151d;
  box-shadow: 4px 4px 0 #9c7bd6;
  margin-bottom: 12px;
  transition: box-shadow .15s, transform .15s;
}
.acc-brut summary {
  cursor: pointer; list-style: none; padding: 13px 16px;
  font: 800 12px/1 system-ui, sans-serif; letter-spacing: 0.12em;
  border-bottom: 2px solid transparent;
}
.acc-brut summary::-webkit-details-marker { display: none; }
.acc-brut[open] {
  box-shadow: 2px 2px 0 #9c7bd6;
  transform: translate(2px,2px);
}
.acc-brut[open] summary { border-bottom-color: #15151d; }
.acc-brut p {
  margin: 0; padding: 14px 16px;
  font: 12px/1.6 system-ui, sans-serif;
}
```

### 06. Glass Frosted

**Type:** Pure CSS
**Description:** Frosted-glass card accordion with backdrop-blur and a luminous rim that brightens on open.

**HTML:**
```html
<details class="acc-glass" name="acc-glass" open>
  <summary>What's inside?<span class="acc-glass__caret"></span></summary>
  <p>A frosted surface with a subtle border that catches light when the row expands.</p>
</details>
<details class="acc-glass" name="acc-glass">
  <summary>Does blur cost performance?<span class="acc-glass__caret"></span></summary>
  <p>backdrop-filter is GPU-accelerated. Use it on small islands rather than wide swaths.</p>
</details>
<details class="acc-glass" name="acc-glass">
  <summary>Browser fallback?<span class="acc-glass__caret"></span></summary>
  <p>The semi-transparent background still reads gracefully without the blur effect.</p>
</details>
```

**CSS:**
```css
.acc-glass {
  background: linear-gradient(135deg, rgba(156,123,214,0.07), rgba(143,179,163,0.05));
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid rgba(240,238,255,0.08);
  border-radius: 14px; margin-bottom: 8px;
  transition: border-color .3s, background .3s;
}
.acc-glass summary {
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer; list-style: none; padding: 14px 18px;
  font: 600 13px/1.3 system-ui, sans-serif; color: rgba(240,238,255,0.82);
}
.acc-glass summary::-webkit-details-marker { display: none; }
.acc-glass__caret {
  width: 6px; height: 6px;
  border-right: 1.5px solid rgba(240,238,255,0.5);
  border-bottom: 1.5px solid rgba(240,238,255,0.5);
  transform: rotate(45deg); transition: transform .3s;
}
.acc-glass[open] {
  border-color: rgba(156,123,214,0.45);
  background: linear-gradient(135deg, rgba(156,123,214,0.14), rgba(143,179,163,0.08));
}
.acc-glass[open] .acc-glass__caret { transform: rotate(225deg); }
.acc-glass p {
  margin: 0; padding: 0 18px 16px;
  font: 12px/1.6 system-ui, sans-serif; color: rgba(240,238,255,0.6);
}
```

### 07. Minimal Rail

**Type:** Pure CSS
**Description:** A thin colored rail on the left highlights the active row — no other decoration.

**HTML:**
```html
<details class="acc-rail" name="acc-rail" open>
  <summary>Typography</summary>
  <p>One sans family, three weights, two sizes. That's the whole system.</p>
</details>
<details class="acc-rail" name="acc-rail">
  <summary>Spacing</summary>
  <p>Built on an 8-point base with optional 4-point quarter-step for fine control.</p>
</details>
<details class="acc-rail" name="acc-rail">
  <summary>Color</summary>
  <p>Three brand tokens, four neutral steps. Override via CSS custom properties.</p>
</details>
```

**CSS:**
```css
.acc-rail {
  position: relative; padding: 0 0 0 16px; margin-bottom: 4px;
}
.acc-rail::before {
  content: ''; position: absolute; left: 0; top: 6px; bottom: 6px;
  width: 2px; background: rgba(240,238,255,0.06); border-radius: 2px;
  transition: background .25s;
}
.acc-rail summary {
  cursor: pointer; list-style: none; padding: 11px 0;
  font: 600 13px/1.3 system-ui, sans-serif; color: rgba(240,238,255,0.6);
  transition: color .2s;
}
.acc-rail summary::-webkit-details-marker { display: none; }
.acc-rail[open]::before { background: linear-gradient(180deg, #9c7bd6, #d49a5c); }
.acc-rail[open] > summary { color: #f0eeff; }
.acc-rail p {
  margin: 0 0 12px; padding: 0;
  font: 12px/1.6 system-ui, sans-serif; color: rgba(240,238,255,0.5);
}
```

### 08. Card Lift

**Type:** Pure CSS
**Description:** Floating cards that lift with a soft shadow when expanded — accent color shifts subtly.

**HTML:**
```html
<details class="acc-lift" name="acc-lift" open>
  <summary>Mountain View</summary>
  <p>Wake to clear sightlines and warm light. The view is the room.</p>
</details>
<details class="acc-lift" name="acc-lift">
  <summary>Garden Suite</summary>
  <p>A private terrace facing south, framed by old growth and stone.</p>
</details>
<details class="acc-lift" name="acc-lift">
  <summary>Loft Studio</summary>
  <p>Open plan with full-height windows and a quiet corner for work.</p>
</details>
```

**CSS:**
```css
.acc-lift {
  background: #1a1a24; border: 1px solid rgba(240,238,255,0.05);
  border-radius: 12px; margin-bottom: 8px;
  transition: transform .3s cubic-bezier(.3,1.4,.5,1), box-shadow .3s, border-color .3s;
}
.acc-lift summary {
  cursor: pointer; list-style: none; padding: 14px 16px;
  font: 600 13px/1.3 system-ui, sans-serif; color: rgba(240,238,255,0.75);
}
.acc-lift summary::-webkit-details-marker { display: none; }
.acc-lift[open] {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px -10px rgba(156,123,214,0.4);
  border-color: rgba(156,123,214,0.3);
}
.acc-lift[open] > summary { color: #f0eeff; }
.acc-lift p {
  margin: 0; padding: 0 16px 14px;
  font: 12px/1.6 system-ui, sans-serif; color: rgba(240,238,255,0.55);
}
```

### 09. Strip Tabs

**Type:** Pure CSS
**Description:** Horizontal column accordion — each strip widens when activated, others compress to a label.

**HTML:**
```html
<div class="acc-strip">
  <input type="radio" name="strip" id="strip-1" checked />
  <input type="radio" name="strip" id="strip-2" />
  <input type="radio" name="strip" id="strip-3" />
  <input type="radio" name="strip" id="strip-4" />
  <label for="strip-1" class="acc-strip__col" data-c="0">
    <span class="acc-strip__title">DESIGN</span>
    <span class="acc-strip__body"
      >Compose from atomic tokens. Stay consistent across surfaces and scale.</span
    >
  </label>
  <label for="strip-2" class="acc-strip__col" data-c="1">
    <span class="acc-strip__title">BUILD</span>
    <span class="acc-strip__body">Hand-coded HTML and CSS, no framework lock-in. Ship faster.</span>
  </label>
  <label for="strip-3" class="acc-strip__col" data-c="2">
    <span class="acc-strip__title">SHIP</span>
    <span class="acc-strip__body">Static output, edge-cached, instant on every connection.</span>
  </label>
  <label for="strip-4" class="acc-strip__col" data-c="3">
    <span class="acc-strip__title">REPEAT</span>
    <span class="acc-strip__body">Iterate without rewriting. Components compose cleanly.</span>
  </label>
</div>
```

**CSS:**
```css
.acc-strip {
  display: flex; gap: 4px; height: 220px; width: 100%;
  border-radius: 12px; overflow: hidden;
}
.acc-strip > input { display: none; }
.acc-strip__col {
  flex: 1 1 0; cursor: pointer; padding: 16px 14px;
  display: flex; flex-direction: column; justify-content: flex-end;
  position: relative; overflow: hidden;
  background: #1a1a24; color: rgba(240,238,255,0.7);
  transition: flex .55s cubic-bezier(.3,1,.3,1), background .4s;
}
.acc-strip__col[data-c="0"] { background: linear-gradient(160deg,#3a2a55,#1a1a24); }
.acc-strip__col[data-c="1"] { background: linear-gradient(160deg,#553a2a,#1a1a24); }
.acc-strip__col[data-c="2"] { background: linear-gradient(160deg,#2a553a,#1a1a24); }
.acc-strip__col[data-c="3"] { background: linear-gradient(160deg,#553a55,#1a1a24); }
.acc-strip__title {
  font: 800 11px/1 system-ui; letter-spacing: 0.18em;
  writing-mode: vertical-rl; transform: rotate(180deg);
  align-self: flex-start; transition: all .35s;
}
.acc-strip__body {
  font: 12px/1.55 system-ui; color: rgba(240,238,255,0.78);
  opacity: 0; max-height: 0; transition: opacity .3s .15s, max-height .35s;
}
#strip-1:checked ~ [for="strip-1"],
#strip-2:checked ~ [for="strip-2"],
#strip-3:checked ~ [for="strip-3"],
#strip-4:checked ~ [for="strip-4"] {
  flex: 5 1 0; color: #f0eeff;
}
#strip-1:checked ~ [for="strip-1"] .acc-strip__title,
#strip-2:checked ~ [for="strip-2"] .acc-strip__title,
#strip-3:checked ~ [for="strip-3"] .acc-strip__title,
#strip-4:checked ~ [for="strip-4"] .acc-strip__title {
  writing-mode: horizontal-tb; transform: none; font-size: 14px;
  align-self: stretch;
}
#strip-1:checked ~ [for="strip-1"] .acc-strip__body,
#strip-2:checked ~ [for="strip-2"] .acc-strip__body,
#strip-3:checked ~ [for="strip-3"] .acc-strip__body,
#strip-4:checked ~ [for="strip-4"] .acc-strip__body {
  opacity: 1; max-height: 100px; margin-top: 8px;
}
```

### 10. Image Reveal

**Type:** Pure CSS
**Description:** Hover or focus to widen a column; the image inside zooms to fit while siblings collapse.

**HTML:**
```html
<div class="acc-img">
  <div class="acc-img__col" tabindex="0" style="--bg: #3a2a55">
    <span class="acc-img__lbl">Aurora</span>
  </div>
  <div class="acc-img__col" tabindex="0" style="--bg: #553a2a">
    <span class="acc-img__lbl">Copper</span>
  </div>
  <div class="acc-img__col" tabindex="0" style="--bg: #2a553a">
    <span class="acc-img__lbl">Sage</span>
  </div>
  <div class="acc-img__col" tabindex="0" style="--bg: #2a3a55">
    <span class="acc-img__lbl">Slate</span>
  </div>
  <div class="acc-img__col" tabindex="0" style="--bg: #552a3a">
    <span class="acc-img__lbl">Berry</span>
  </div>
</div>
```

**CSS:**
```css
.acc-img {
  display: flex; gap: 3px; height: 220px;
  border-radius: 12px; overflow: hidden;
}
.acc-img__col {
  flex: 1; cursor: pointer; outline: none;
  background: radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--bg), white 25%), var(--bg));
  display: flex; align-items: flex-end; padding: 14px;
  transition: flex .5s cubic-bezier(.3,1,.3,1), filter .3s;
  filter: saturate(0.7) brightness(0.85);
}
.acc-img__col:hover, .acc-img__col:focus {
  flex: 4; filter: saturate(1.2) brightness(1);
}
.acc-img__lbl {
  font: 700 12px/1 system-ui; letter-spacing: 0.14em;
  text-transform: uppercase; color: #f0eeff;
  text-shadow: 0 1px 8px rgba(0,0,0,0.4);
}
```

### 11. Color Block

**Type:** Pure CSS
**Description:** Solid color blocks switch via radio inputs; the active block expands and reveals body copy.

**HTML:**
```html
<div class="acc-cblk">
  <input type="radio" name="cblk" id="cblk-1" checked />
  <input type="radio" name="cblk" id="cblk-2" />
  <input type="radio" name="cblk" id="cblk-3" />
  <label for="cblk-1" class="acc-cblk__b" style="--bg: #9c7bd6">
    <span class="acc-cblk__t">Amethyst</span>
    <span class="acc-cblk__d">Royal violet anchor of the system. Use for primary actions.</span>
  </label>
  <label for="cblk-2" class="acc-cblk__b" style="--bg: #d49a5c">
    <span class="acc-cblk__t">Copper</span>
    <span class="acc-cblk__d">Warm metallic accent. Use sparingly for highlights and badges.</span>
  </label>
  <label for="cblk-3" class="acc-cblk__b" style="--bg: #8fb3a3">
    <span class="acc-cblk__t">Sage</span>
    <span class="acc-cblk__d">Cool restorative neutral. Use for success and secondary chrome.</span>
  </label>
</div>
```

**CSS:**
```css
.acc-cblk { display: flex; height: 220px; border-radius: 12px; overflow: hidden; }
.acc-cblk > input { display: none; }
.acc-cblk__b {
  flex: 1; cursor: pointer; padding: 16px;
  display: flex; flex-direction: column; justify-content: space-between;
  background: var(--bg); color: #15151d;
  transition: flex .5s cubic-bezier(.3,1,.3,1);
}
.acc-cblk__t {
  font: 800 13px/1 system-ui; letter-spacing: 0.1em;
  text-transform: uppercase;
}
.acc-cblk__d {
  font: 12px/1.55 system-ui; opacity: 0;
  transform: translateY(8px); transition: all .3s .12s;
}
#cblk-1:checked ~ [for="cblk-1"],
#cblk-2:checked ~ [for="cblk-2"],
#cblk-3:checked ~ [for="cblk-3"] { flex: 4; }
#cblk-1:checked ~ [for="cblk-1"] .acc-cblk__d,
#cblk-2:checked ~ [for="cblk-2"] .acc-cblk__d,
#cblk-3:checked ~ [for="cblk-3"] .acc-cblk__d {
  opacity: 1; transform: none;
}
```

### 12. Numbered Spine

**Type:** Pure CSS
**Description:** Vertical numbered labels rotate to horizontal when their column expands.

**HTML:**
```html
<div class="acc-spine">
  <input type="radio" name="spine" id="sp-1" checked />
  <input type="radio" name="spine" id="sp-2" />
  <input type="radio" name="spine" id="sp-3" />
  <label for="sp-1" class="acc-spine__c">
    <span class="acc-spine__n">01</span>
    <span class="acc-spine__t">Discover</span>
    <span class="acc-spine__b">Map the problem space. Talk to users. Sketch hypotheses.</span>
  </label>
  <label for="sp-2" class="acc-spine__c">
    <span class="acc-spine__n">02</span>
    <span class="acc-spine__t">Define</span>
    <span class="acc-spine__b">Pick one bet. Frame it crisply. Write what success looks like.</span>
  </label>
  <label for="sp-3" class="acc-spine__c">
    <span class="acc-spine__n">03</span>
    <span class="acc-spine__t">Deliver</span>
    <span class="acc-spine__b">Ship a thin slice. Measure. Decide what's next.</span>
  </label>
</div>
```

**CSS:**
```css
.acc-spine {
  display: flex; gap: 2px; height: 220px;
  border-radius: 12px; overflow: hidden; background: rgba(240,238,255,0.04);
}
.acc-spine > input { display: none; }
.acc-spine__c {
  flex: 1; cursor: pointer; padding: 14px;
  background: #1a1a24; position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 10px;
  transition: flex .5s cubic-bezier(.3,1,.3,1), background .3s;
}
.acc-spine__n {
  font: 800 18px monospace; color: rgba(212,154,92,0.8);
}
.acc-spine__t {
  font: 700 12px/1 system-ui; letter-spacing: 0.12em;
  text-transform: uppercase; color: rgba(240,238,255,0.55);
  writing-mode: vertical-rl; transform: rotate(180deg);
  transition: all .35s;
}
.acc-spine__b {
  font: 12px/1.55 system-ui; color: rgba(240,238,255,0.65);
  opacity: 0; max-height: 0; transition: opacity .3s .15s, max-height .35s;
}
#sp-1:checked ~ [for="sp-1"],
#sp-2:checked ~ [for="sp-2"],
#sp-3:checked ~ [for="sp-3"] {
  flex: 4; background: linear-gradient(180deg,#1a1a24,#2a2438);
}
#sp-1:checked ~ [for="sp-1"] .acc-spine__t,
#sp-2:checked ~ [for="sp-2"] .acc-spine__t,
#sp-3:checked ~ [for="sp-3"] .acc-spine__t {
  writing-mode: horizontal-tb; transform: none; color: #f0eeff; font-size: 14px;
}
#sp-1:checked ~ [for="sp-1"] .acc-spine__b,
#sp-2:checked ~ [for="sp-2"] .acc-spine__b,
#sp-3:checked ~ [for="sp-3"] .acc-spine__b {
  opacity: 1; max-height: 120px;
}
```

### 13. Curtain Slide

**Type:** Pure CSS
**Description:** Active panel slides in from the right while the previous one collapses left — like a stage curtain.

**HTML:**
```html
<div class="acc-curt">
  <input type="radio" name="curt" id="curt-1" checked />
  <input type="radio" name="curt" id="curt-2" />
  <input type="radio" name="curt" id="curt-3" />
  <div class="acc-curt__tabs">
    <label for="curt-1">ONE</label>
    <label for="curt-2">TWO</label>
    <label for="curt-3">THREE</label>
  </div>
  <div class="acc-curt__stage">
    <div class="acc-curt__p" data-i="0">
      <h4>First Act</h4>
      <p>The curtain rises slowly. Light spills across the boards.</p>
    </div>
    <div class="acc-curt__p" data-i="1">
      <h4>Second Act</h4>
      <p>Tension builds. The rhythm tightens. We lean forward.</p>
    </div>
    <div class="acc-curt__p" data-i="2">
      <h4>Third Act</h4>
      <p>Resolution arrives. The audience exhales. Lights dim.</p>
    </div>
  </div>
</div>
```

**CSS:**
```css
.acc-curt {
  display: flex; flex-direction: column; height: 220px;
  border-radius: 12px; overflow: hidden;
  background: #1a1a24; border: 1px solid rgba(240,238,255,0.06);
}
.acc-curt > input { display: none; }
.acc-curt__tabs {
  display: flex; background: #15151d;
  border-bottom: 1px solid rgba(240,238,255,0.06);
}
.acc-curt__tabs label {
  flex: 1; padding: 11px; cursor: pointer;
  font: 700 11px/1 system-ui; letter-spacing: 0.14em; text-align: center;
  color: rgba(240,238,255,0.5); transition: color .2s, background .2s;
}
.acc-curt__tabs label:hover { color: #f0eeff; }
.acc-curt__stage { position: relative; flex: 1; overflow: hidden; }
.acc-curt__p {
  position: absolute; inset: 0; padding: 18px;
  transform: translateX(100%); opacity: 0;
  transition: transform .5s cubic-bezier(.3,1,.3,1), opacity .35s;
}
.acc-curt__p h4 { margin: 0 0 8px; font: 700 14px/1.2 system-ui; color: #d49a5c; }
.acc-curt__p p { margin: 0; font: 12px/1.55 system-ui; color: rgba(240,238,255,0.7); }
#curt-1:checked ~ .acc-curt__tabs label[for="curt-1"],
#curt-2:checked ~ .acc-curt__tabs label[for="curt-2"],
#curt-3:checked ~ .acc-curt__tabs label[for="curt-3"] {
  color: #f0eeff; background: rgba(156,123,214,0.18);
}
#curt-1:checked ~ .acc-curt__stage [data-i="0"],
#curt-2:checked ~ .acc-curt__stage [data-i="1"],
#curt-3:checked ~ .acc-curt__stage [data-i="2"] {
  transform: translateX(0); opacity: 1;
}
```

### 14. Vinyl Spine

**Type:** Pure CSS
**Description:** Records on a shelf — click a spine to slide it out and reveal its label.

**HTML:**
```html
<div class="acc-vyl">
  <input type="radio" name="vyl" id="vyl-1" />
  <input type="radio" name="vyl" id="vyl-2" checked />
  <input type="radio" name="vyl" id="vyl-3" />
  <input type="radio" name="vyl" id="vyl-4" />
  <label for="vyl-1" class="acc-vyl__r" style="--c: #9c7bd6"><span>SIDE A · Echoes</span></label>
  <label for="vyl-2" class="acc-vyl__r" style="--c: #d49a5c"><span>SIDE B · Static</span></label>
  <label for="vyl-3" class="acc-vyl__r" style="--c: #8fb3a3"><span>SIDE C · Drift</span></label>
  <label for="vyl-4" class="acc-vyl__r" style="--c: #c8a2c8"><span>SIDE D · Hum</span></label>
</div>
```

**CSS:**
```css
.acc-vyl {
  display: flex; gap: 5px; padding: 16px;
  height: 220px; align-items: stretch;
  background: linear-gradient(180deg,#15151d,#1a1a24);
  border-radius: 12px;
}
.acc-vyl > input { display: none; }
.acc-vyl__r {
  flex: 0 0 22px; cursor: pointer; position: relative;
  background: linear-gradient(90deg, color-mix(in srgb, var(--c), black 35%), var(--c) 50%, color-mix(in srgb, var(--c), black 35%));
  border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.3);
  transition: flex .45s cubic-bezier(.3,1,.3,1);
  display: flex; align-items: center; justify-content: center;
}
.acc-vyl__r span {
  font: 700 10px/1 system-ui; letter-spacing: 0.14em;
  color: rgba(0,0,0,0.7); white-space: nowrap;
  writing-mode: vertical-rl; transform: rotate(180deg);
}
#vyl-1:checked ~ [for="vyl-1"],
#vyl-2:checked ~ [for="vyl-2"],
#vyl-3:checked ~ [for="vyl-3"],
#vyl-4:checked ~ [for="vyl-4"] { flex: 1 1 0; }
#vyl-1:checked ~ [for="vyl-1"] span,
#vyl-2:checked ~ [for="vyl-2"] span,
#vyl-3:checked ~ [for="vyl-3"] span,
#vyl-4:checked ~ [for="vyl-4"] span {
  writing-mode: horizontal-tb; transform: none; font-size: 13px;
  color: rgba(0,0,0,0.85);
}
```

### 15. Cinema Reel

**Type:** Pure CSS
**Description:** Film-strip style horizontal accordion — sprocket holes top and bottom, frame brightens on focus.

**HTML:**
```html
<div class="acc-reel">
  <div class="acc-reel__strip">
    <input type="radio" name="reel" id="reel-1" checked />
    <input type="radio" name="reel" id="reel-2" />
    <input type="radio" name="reel" id="reel-3" />
    <label for="reel-1" class="acc-reel__f"><span>SCENE 01 · Daybreak</span></label>
    <label for="reel-2" class="acc-reel__f"><span>SCENE 02 · Pursuit</span></label>
    <label for="reel-3" class="acc-reel__f"><span>SCENE 03 · Resolve</span></label>
  </div>
</div>
```

**CSS:**
```css
.acc-reel {
  background: #15151d; padding: 12px 0; border-radius: 8px;
  height: 220px; display: flex; align-items: center;
}
.acc-reel__strip {
  display: flex; gap: 4px; width: 100%; padding: 18px 12px;
  background:
    linear-gradient(#0a0a10,#0a0a10) center/100% calc(100% - 24px) no-repeat,
    repeating-linear-gradient(90deg, transparent 0 8px, rgba(240,238,255,0.12) 8px 14px) top/100% 12px no-repeat,
    repeating-linear-gradient(90deg, transparent 0 8px, rgba(240,238,255,0.12) 8px 14px) bottom/100% 12px no-repeat;
}
.acc-reel__strip > input { display: none; }
.acc-reel__f {
  flex: 1; cursor: pointer; min-height: 130px;
  background: linear-gradient(135deg,#3a2a55,#2a1a45);
  border-radius: 4px; display: flex; align-items: center; justify-content: center;
  font: 700 11px/1 system-ui; letter-spacing: 0.1em; color: rgba(240,238,255,0.4);
  filter: brightness(0.65) contrast(0.85);
  transition: flex .5s cubic-bezier(.3,1,.3,1), filter .3s, color .3s;
}
.acc-reel__f:nth-of-type(2) { background: linear-gradient(135deg,#553a2a,#451a1a); }
.acc-reel__f:nth-of-type(3) { background: linear-gradient(135deg,#2a553a,#1a4530); }
#reel-1:checked ~ [for="reel-1"],
#reel-2:checked ~ [for="reel-2"],
#reel-3:checked ~ [for="reel-3"] {
  flex: 4; filter: brightness(1.1) contrast(1.05);
  color: #f0eeff; font-size: 13px;
}
```

### 16. Aurora Strip

**Type:** Pure CSS
**Description:** Each panel hides a drifting aurora gradient — pop into view by widening the active strip.

**HTML:**
```html
<div class="acc-aur">
  <input type="radio" name="aur" id="aur-1" checked />
  <input type="radio" name="aur" id="aur-2" />
  <input type="radio" name="aur" id="aur-3" />
  <label for="aur-1" class="acc-aur__c">
    <span class="acc-aur__l">North</span>
    <span class="acc-aur__d">Cold violet ribbon, 22:00 local</span>
  </label>
  <label for="aur-2" class="acc-aur__c">
    <span class="acc-aur__l">East</span>
    <span class="acc-aur__d">Warm copper veil, 23:30 local</span>
  </label>
  <label for="aur-3" class="acc-aur__c">
    <span class="acc-aur__l">West</span>
    <span class="acc-aur__d">Soft sage glow, 01:00 local</span>
  </label>
</div>
```

**CSS:**
```css
.acc-aur {
  display: flex; gap: 4px; height: 220px;
  border-radius: 12px; overflow: hidden;
}
.acc-aur > input { display: none; }
.acc-aur__c {
  flex: 1; cursor: pointer; padding: 16px; position: relative;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(156,123,214,0.5), transparent 60%),
    radial-gradient(ellipse at 70% 80%, rgba(212,154,92,0.4), transparent 60%),
    #15151d;
  background-size: 220% 220%, 240% 240%, 100% 100%;
  background-position: 0% 0%, 100% 100%, 0 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  filter: brightness(0.55) saturate(0.8);
  transition: flex .5s cubic-bezier(.3,1,.3,1), filter .35s, background-position 6s linear;
}
.acc-aur__c:nth-of-type(2) {
  background:
    radial-gradient(ellipse at 50% 40%, rgba(212,154,92,0.55), transparent 60%),
    radial-gradient(ellipse at 80% 70%, rgba(143,179,163,0.4), transparent 60%),
    #15151d;
}
.acc-aur__c:nth-of-type(3) {
  background:
    radial-gradient(ellipse at 20% 80%, rgba(143,179,163,0.55), transparent 60%),
    radial-gradient(ellipse at 70% 30%, rgba(156,123,214,0.4), transparent 60%),
    #15151d;
}
.acc-aur__l { font: 800 12px/1 system-ui; letter-spacing: 0.16em; color: rgba(240,238,255,0.85); }
.acc-aur__d { font: 11px/1.55 system-ui; color: rgba(240,238,255,0.55); margin-top: 6px;
  opacity: 0; transition: opacity .3s .15s; }
#aur-1:checked ~ [for="aur-1"],
#aur-2:checked ~ [for="aur-2"],
#aur-3:checked ~ [for="aur-3"] {
  flex: 4; filter: brightness(1.05) saturate(1.1);
  background-position: 100% 100%, 0% 0%, 0 0;
}
#aur-1:checked ~ [for="aur-1"] .acc-aur__d,
#aur-2:checked ~ [for="aur-2"] .acc-aur__d,
#aur-3:checked ~ [for="aur-3"] .acc-aur__d { opacity: 1; }
```

### 17. Diagonal Slant

**Type:** Pure CSS
**Description:** Vertical accordion where each row slants — open row straightens to a clean rectangle.

**HTML:**
```html
<details class="acc-slant" name="acc-slant" open>
  <summary>Architecture</summary>
  <p>Static-first, edge-cached, no SSR runtime. Fast on every connection.</p>
</details>
<details class="acc-slant" name="acc-slant">
  <summary>Data layer</summary>
  <p>Content lives in flat files. Authoring is git-tracked and reviewable.</p>
</details>
<details class="acc-slant" name="acc-slant">
  <summary>Deployment</summary>
  <p>Build once, push to CDN. No servers to manage, no scaling concerns.</p>
</details>
```

**CSS:**
```css
.acc-slant {
  background: rgba(156,123,214,0.08);
  border: 1px solid rgba(156,123,214,0.2);
  margin-bottom: 6px;
  clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
  transition: clip-path .35s cubic-bezier(.3,1.4,.5,1), background .25s;
}
.acc-slant summary {
  cursor: pointer; list-style: none; padding: 13px 22px;
  font: 700 12px/1 system-ui; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(240,238,255,0.7);
}
.acc-slant summary::-webkit-details-marker { display: none; }
.acc-slant[open] {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  background: rgba(156,123,214,0.18);
}
.acc-slant[open] > summary { color: #f0eeff; }
.acc-slant p {
  margin: 0; padding: 0 22px 14px;
  font: 12px/1.6 system-ui; color: rgba(240,238,255,0.6);
}
```

### 18. Stepped Stair

**Type:** Pure CSS
**Description:** Each row indents progressively, creating a staircase — open row pulls back to flush left.

**HTML:**
```html
<details class="acc-stair" name="acc-stair" style="--i: 0" open>
  <summary>Step one</summary>
  <p>Begin where you stand. The first move matters more than the plan.</p>
</details>
<details class="acc-stair" name="acc-stair" style="--i: 1">
  <summary>Step two</summary>
  <p>Ship the rough version. Real feedback beats imagined feedback.</p>
</details>
<details class="acc-stair" name="acc-stair" style="--i: 2">
  <summary>Step three</summary>
  <p>Refine. Cut what didn't earn its place. Keep the load light.</p>
</details>
<details class="acc-stair" name="acc-stair" style="--i: 3">
  <summary>Step four</summary>
  <p>Repeat the loop. Compounding shows up after the tenth turn, not the first.</p>
</details>
```

**CSS:**
```css
.acc-stair {
  margin-bottom: 4px;
  margin-left: calc(var(--i,0) * 16px);
  background: rgba(143,179,163,0.07);
  border-left: 3px solid #8fb3a3;
  border-radius: 0 8px 8px 0;
  transition: margin-left .35s cubic-bezier(.3,1.3,.5,1), background .25s;
}
.acc-stair summary {
  cursor: pointer; list-style: none; padding: 11px 14px;
  font: 600 13px/1.3 system-ui; color: rgba(240,238,255,0.7);
}
.acc-stair summary::-webkit-details-marker { display: none; }
.acc-stair[open] {
  margin-left: 0; background: rgba(143,179,163,0.15);
}
.acc-stair[open] > summary { color: #f0eeff; }
.acc-stair p {
  margin: 0; padding: 0 14px 12px;
  font: 12px/1.55 system-ui; color: rgba(240,238,255,0.6);
}
```

### 19. Circular Arc

**Type:** Pure CSS
**Description:** A four-segment ring menu — labels follow each arc via SVG textPath. Selected arc lights up with its theme color, the hub shows the active step number, and the body reveals a matching description.

**HTML:**
```html
<div class="acc-arc">
  <input type="radio" name="arc" id="arc-1" checked />
  <input type="radio" name="arc" id="arc-2" />
  <input type="radio" name="arc" id="arc-3" />
  <input type="radio" name="arc" id="arc-4" />
  <div class="acc-arc__wheel">
    <svg viewBox="0 0 140 140" class="acc-arc__svg" aria-hidden="true">
      <!-- Annular wedges aligned to cardinals: each spans ±45° around N/E/S/W.
           Outer r=66, inner r=42, center (70,70). -->
      <path
        class="acc-arc__seg"
        data-i="0"
        d="M 23.33 23.33 A 66 66 0 0 1 116.67 23.33 L 99.7 40.3  A 42 42 0 0 0 40.3 40.3   Z"
      />
      <path
        class="acc-arc__seg"
        data-i="1"
        d="M 116.67 23.33 A 66 66 0 0 1 116.67 116.67 L 99.7 99.7  A 42 42 0 0 0 99.7 40.3  Z"
      />
      <path
        class="acc-arc__seg"
        data-i="2"
        d="M 116.67 116.67 A 66 66 0 0 1 23.33 116.67 L 40.3 99.7  A 42 42 0 0 0 99.7 99.7  Z"
      />
      <path
        class="acc-arc__seg"
        data-i="3"
        d="M 23.33 116.67 A 66 66 0 0 1 23.33 23.33 L 40.3 40.3   A 42 42 0 0 0 40.3 99.7  Z"
      />
      <!-- Wedge centroid labels at radius 54 from center -->
      <text class="acc-arc__lbl" data-i="0" x="70" y="22" text-anchor="middle">DISCOVER</text>
      <text
        class="acc-arc__lbl"
        data-i="1"
        x="121"
        y="73"
        text-anchor="middle"
        transform="rotate(90 121 70)"
      >
        DEFINE
      </text>
      <text class="acc-arc__lbl" data-i="2" x="70" y="123" text-anchor="middle">DELIVER</text>
      <text
        class="acc-arc__lbl"
        data-i="3"
        x="19"
        y="73"
        text-anchor="middle"
        transform="rotate(-90 19 70)"
      >
        REFINE
      </text>
    </svg>
    <!-- Click targets: 4 wedge polygons matching the 4 SVG arcs (top, right, bottom, left) -->
    <label for="arc-1" class="acc-arc__hit acc-arc__hit--n" aria-label="Discover"></label>
    <label for="arc-2" class="acc-arc__hit acc-arc__hit--e" aria-label="Define"></label>
    <label for="arc-3" class="acc-arc__hit acc-arc__hit--s" aria-label="Deliver"></label>
    <label for="arc-4" class="acc-arc__hit acc-arc__hit--w" aria-label="Refine"></label>
    <div class="acc-arc__hub">
      <span data-i="0">01</span>
      <span data-i="1">02</span>
      <span data-i="2">03</span>
      <span data-i="3">04</span>
    </div>
  </div>
  <div class="acc-arc__body">
    <article data-i="0">
      <h4>Discover</h4>
      <p>Map the problem space. Talk to users. Sketch hypotheses before committing to a build.</p>
    </article>
    <article data-i="1">
      <h4>Define</h4>
      <p>Pick one bet. Frame it crisply. Write down what success actually looks like.</p>
    </article>
    <article data-i="2">
      <h4>Deliver</h4>
      <p>Ship a thin slice end-to-end. Measure real usage. Decide what comes next from data.</p>
    </article>
    <article data-i="3">
      <h4>Refine</h4>
      <p>
        Iterate on real signal, not imagined feedback. Compound the wins, drop what didn't earn its
        place.
      </p>
    </article>
  </div>
</div>
```

**CSS:**
```css
.acc-arc {
  display: grid; grid-template-columns: 150px 1fr; gap: 18px;
  height: 220px; align-items: center; padding: 6px 4px;
}
.acc-arc > input { position: absolute; opacity: 0; pointer-events: none; }
.acc-arc__wheel {
  position: relative; width: 150px; height: 150px; flex-shrink: 0;
}
.acc-arc__svg { width: 100%; height: 100%; display: block; }
.acc-arc__seg {
  fill: rgba(240,238,255,0.05);
  stroke: rgba(240,238,255,0.1); stroke-width: 1;
  transition: fill .3s, stroke .3s, stroke-width .3s;
}
.acc-arc__seg[data-i="0"] { fill: rgba(156,123,214,0.2); }
.acc-arc__seg[data-i="1"] { fill: rgba(212,154,92,0.2); }
.acc-arc__seg[data-i="2"] { fill: rgba(143,179,163,0.2); }
.acc-arc__seg[data-i="3"] { fill: rgba(200,162,200,0.2); }
.acc-arc__lbl {
  font: 700 9px/1 system-ui, sans-serif;
  letter-spacing: 0.18em; fill: rgba(240,238,255,0.6);
  transition: fill .25s;
}
/* Click hit targets — 4 explicit triangular wedges from center to outer edge.
   Each polygon: center (50%,50%), outer corner A, outer corner B */
.acc-arc__hit { position: absolute; inset: 0; cursor: pointer; }
.acc-arc__hit--n { clip-path: polygon(50% 50%, 100% 0,   0    0); }
.acc-arc__hit--e { clip-path: polygon(50% 50%, 100% 100%, 100% 0); }
.acc-arc__hit--s { clip-path: polygon(50% 50%, 0    100%, 100% 100%); }
.acc-arc__hit--w { clip-path: polygon(50% 50%, 0    0,    0    100%); }
.acc-arc__hub {
  position: absolute; left: 50%; top: 50%;
  width: 60px; height: 60px; border-radius: 50%;
  background: #1a1a24;
  box-shadow: 0 0 0 1px rgba(240,238,255,0.1), 0 6px 16px rgba(0,0,0,0.4);
  transform: translate(-50%, -50%);
  display: grid; place-items: center;
  pointer-events: none;
}
.acc-arc__hub span {
  grid-area: 1/1; font: 800 18px ui-monospace, monospace;
  color: #f0eeff; opacity: 0;
  transition: opacity .25s, color .25s;
}
.acc-arc__body { position: relative; height: 150px; }
.acc-arc__body article {
  position: absolute; inset: 0; margin: 0;
  padding: 0 0 0 14px;
  border-left: 2px solid rgba(240,238,255,0.08);
  display: flex; flex-direction: column; justify-content: center; gap: 6px;
  opacity: 0; transform: translateX(6px);
  transition: opacity .3s, transform .3s, border-color .3s;
}
.acc-arc__body h4 {
  margin: 0; font: 700 14px/1.2 system-ui, sans-serif;
  letter-spacing: 0.02em; color: #f0eeff;
}
.acc-arc__body p {
  margin: 0; font: 12px/1.6 system-ui, sans-serif;
  color: rgba(240,238,255,0.7);
}
/* Active states — explicit per-arc */
#arc-1:checked ~ .acc-arc__wheel .acc-arc__seg[data-i="0"] { fill: #9c7bd6; stroke: rgba(255,255,255,0.4); stroke-width: 1.5; }
#arc-2:checked ~ .acc-arc__wheel .acc-arc__seg[data-i="1"] { fill: #d49a5c; stroke: rgba(255,255,255,0.4); stroke-width: 1.5; }
#arc-3:checked ~ .acc-arc__wheel .acc-arc__seg[data-i="2"] { fill: #8fb3a3; stroke: rgba(255,255,255,0.4); stroke-width: 1.5; }
#arc-4:checked ~ .acc-arc__wheel .acc-arc__seg[data-i="3"] { fill: #c8a2c8; stroke: rgba(255,255,255,0.4); stroke-width: 1.5; }
#arc-1:checked ~ .acc-arc__wheel .acc-arc__lbl[data-i="0"],
#arc-2:checked ~ .acc-arc__wheel .acc-arc__lbl[data-i="1"],
#arc-3:checked ~ .acc-arc__wheel .acc-arc__lbl[data-i="2"],
#arc-4:checked ~ .acc-arc__wheel .acc-arc__lbl[data-i="3"] { fill: #15151d; }
#arc-1:checked ~ .acc-arc__wheel .acc-arc__hub span[data-i="0"] { opacity: 1; color: #b896e8; }
#arc-2:checked ~ .acc-arc__wheel .acc-arc__hub span[data-i="1"] { opacity: 1; color: #d49a5c; }
#arc-3:checked ~ .acc-arc__wheel .acc-arc__hub span[data-i="2"] { opacity: 1; color: #8fb3a3; }
#arc-4:checked ~ .acc-arc__wheel .acc-arc__hub span[data-i="3"] { opacity: 1; color: #c8a2c8; }
#arc-1:checked ~ .acc-arc__body article[data-i="0"],
#arc-2:checked ~ .acc-arc__body article[data-i="1"],
#arc-3:checked ~ .acc-arc__body article[data-i="2"],
#arc-4:checked ~ .acc-arc__body article[data-i="3"] {
  opacity: 1; transform: translateX(0);
}
#arc-1:checked ~ .acc-arc__body article[data-i="0"] { border-left-color: #9c7bd6; }
#arc-2:checked ~ .acc-arc__body article[data-i="1"] { border-left-color: #d49a5c; }
#arc-3:checked ~ .acc-arc__body article[data-i="2"] { border-left-color: #8fb3a3; }
#arc-4:checked ~ .acc-arc__body article[data-i="3"] { border-left-color: #c8a2c8; }
```

### 20. Marquee Header

**Type:** Pure CSS
**Description:** Closed rows scroll their title as a slow marquee; opening pauses the marquee and reveals body.

**HTML:**
```html
<details class="acc-marq" name="acc-marq">
  <summary>
    <span class="acc-marq__t"
      >A long-running show that scrolls until you click · A long-running show that scrolls until you
      click ·&nbsp;</span
    >
  </summary>
  <p>Stop the marquee. The title settles. The body opens. Calm restored.</p>
</details>
<details class="acc-marq" name="acc-marq" open>
  <summary>
    <span class="acc-marq__t"
      >Now open · The motion holds still · Now open · The motion holds still ·&nbsp;</span
    >
  </summary>
  <p>The opened panel doesn't animate its title. Use marquee for "more here than fits."</p>
</details>
<details class="acc-marq" name="acc-marq">
  <summary>
    <span class="acc-marq__t"
      >Tap to open · Hover anywhere to slow down · Tap to open · Hover anywhere ·&nbsp;</span
    >
  </summary>
  <p>Marquee speed pairs nicely with hover-to-pause for accessibility on long titles.</p>
</details>
```

**CSS:**
```css
.acc-marq {
  margin-bottom: 6px; background: rgba(212,154,92,0.06);
  border: 1px solid rgba(212,154,92,0.16); border-radius: 8px;
  overflow: hidden;
}
.acc-marq summary {
  cursor: pointer; list-style: none;
  padding: 12px 0; overflow: hidden; position: relative;
}
.acc-marq summary::-webkit-details-marker { display: none; }
.acc-marq__t {
  display: inline-block; white-space: nowrap;
  font: 600 13px/1 system-ui; color: rgba(240,238,255,0.78);
  padding-left: 100%;
  animation: acc-marq-roll 14s linear infinite;
}
.acc-marq:hover .acc-marq__t { animation-play-state: paused; }
.acc-marq[open] .acc-marq__t {
  animation: none; padding-left: 16px; color: #f0eeff;
}
@keyframes acc-marq-roll {
  to { transform: translateX(-100%); }
}
.acc-marq p {
  margin: 0; padding: 0 16px 14px;
  font: 12px/1.55 system-ui; color: rgba(240,238,255,0.6);
}
@media (prefers-reduced-motion: reduce) {
  .acc-marq__t { animation: none; padding-left: 16px; }
}
```

### 21. Code Comment

**Type:** Pure CSS
**Description:** Accordion styled as a multi-line code comment — "//" prefix on closed rows, full block on open.

**HTML:**
```html
<details class="acc-cc" name="acc-cc">
  <summary>const installCommand = "npm i";</summary>
  <p>Installs the package and resolves all peer dependencies. Adds an entry to package.json.</p>
</details>
<details class="acc-cc" name="acc-cc" open>
  <summary>const importStatement = "import x from 'lib';";</summary>
  <p>ES module import. Tree-shakable so unused exports won't bloat the bundle.</p>
</details>
<details class="acc-cc" name="acc-cc">
  <summary>const renderHook = "useEffect";</summary>
  <p>Side-effects after paint. Cleanup runs on unmount or before the next effect fires.</p>
</details>
```

**CSS:**
```css
.acc-cc {
  font-family: ui-monospace, "JetBrains Mono", monospace;
  background: #0e0e16; border-left: 3px solid #8fb3a3;
  margin-bottom: 4px; padding: 4px 0;
}
.acc-cc summary {
  cursor: pointer; list-style: none;
  padding: 8px 14px; font-size: 12.5px;
  color: rgba(143,179,163,0.85); position: relative;
}
.acc-cc summary::-webkit-details-marker { display: none; }
.acc-cc summary::before {
  content: '// '; color: rgba(143,179,163,0.45);
}
.acc-cc[open] summary { color: #f0eeff; background: rgba(143,179,163,0.06); }
.acc-cc[open] summary::before { content: '/* '; color: #d49a5c; }
.acc-cc[open] summary::after { content: ' */'; color: #d49a5c; }
.acc-cc p {
  margin: 0; padding: 8px 14px 12px 28px;
  font: 11.5px/1.7 ui-monospace, monospace;
  color: rgba(240,238,255,0.6);
}
.acc-cc p::before {
  content: '→ '; color: #d49a5c;
}
```

### 22. Paper Folded

**Type:** Pure CSS
**Description:** Each row looks like a folded paper card; opening unfolds it with a 3D rotateX flip.

**HTML:**
```html
<details class="acc-fold" name="acc-fold" open>
  <summary>Origami</summary>
  <p>The art of folding paper into expressive form. Single sheet, no cuts, no glue.</p>
</details>
<details class="acc-fold" name="acc-fold">
  <summary>Letterpress</summary>
  <p>Type pressed into thick cotton stock leaves a tactile bite that catches light.</p>
</details>
<details class="acc-fold" name="acc-fold">
  <summary>Saddle Stitch</summary>
  <p>Two staples through the fold of a folio. Quick, cheap, beautiful for short runs.</p>
</details>
```

**CSS:**
```css
.acc-fold {
  background: linear-gradient(180deg, #f0eeff, #e6e2f5);
  color: #15151d; margin-bottom: 8px;
  border: 1px solid rgba(21,21,29,0.12);
  perspective: 800px; transform-style: preserve-3d;
}
.acc-fold summary {
  cursor: pointer; list-style: none; padding: 13px 16px;
  font: 700 13px/1 system-ui; position: relative;
  border-bottom: 1px solid transparent;
  transform-origin: bottom; transition: border-color .25s;
}
.acc-fold summary::-webkit-details-marker { display: none; }
.acc-fold summary::after {
  content: '▾'; position: absolute; right: 16px; top: 50%;
  transform: translateY(-50%); color: #9c7bd6;
  transition: transform .35s;
}
.acc-fold p {
  margin: 0; padding: 14px 16px;
  font: 12px/1.6 system-ui;
  background: linear-gradient(180deg, #faf8ff, #ece8f5);
  transform-origin: top; transform: rotateX(-90deg);
  transition: transform .45s cubic-bezier(.3,1,.3,1);
  box-shadow: inset 0 1px 0 rgba(21,21,29,0.08);
}
.acc-fold[open] summary { border-bottom-color: rgba(21,21,29,0.12); }
.acc-fold[open] summary::after { transform: translateY(-50%) rotate(180deg); }
.acc-fold[open] p { transform: rotateX(0); }
```

### 23. Equalizer

**Type:** Pure CSS
**Description:** Audio-EQ inspired — vertical bars rise to indicate the open row. Pure CSS, no JS.

**HTML:**
```html
<details class="acc-eq" name="acc-eq">
  <summary>
    <span class="acc-eq__bars" aria-hidden="true"><i></i><i></i><i></i><i></i></span>Bass
  </summary>
  <p>Low-end response. Felt more than heard. Anchors the mix.</p>
</details>
<details class="acc-eq" name="acc-eq" open>
  <summary>
    <span class="acc-eq__bars" aria-hidden="true"><i></i><i></i><i></i><i></i></span>Mids
  </summary>
  <p>The conversation register. Where vocals and lead instruments live.</p>
</details>
<details class="acc-eq" name="acc-eq">
  <summary>
    <span class="acc-eq__bars" aria-hidden="true"><i></i><i></i><i></i><i></i></span>Treble
  </summary>
  <p>Air and detail. Cymbals, breath, the sparkle of acoustic plucks.</p>
</details>
```

**CSS:**
```css
.acc-eq {
  background: #15151d; border: 1px solid rgba(240,238,255,0.06);
  border-radius: 8px; margin-bottom: 6px;
}
.acc-eq summary {
  display: flex; align-items: center; gap: 12px;
  cursor: pointer; list-style: none; padding: 12px 16px;
  font: 600 13px/1 system-ui; color: rgba(240,238,255,0.72);
}
.acc-eq summary::-webkit-details-marker { display: none; }
.acc-eq__bars {
  display: inline-flex; align-items: flex-end; gap: 2px;
  height: 14px; width: 22px;
}
.acc-eq__bars i {
  display: block; width: 3px; background: rgba(212,154,92,0.4);
  border-radius: 1px; height: 30%; transition: height .3s;
}
.acc-eq[open] > summary { color: #f0eeff; }
.acc-eq[open] .acc-eq__bars i {
  background: #d49a5c;
  animation: acc-eq-pulse 1.1s ease-in-out infinite alternate;
}
.acc-eq[open] .acc-eq__bars i:nth-child(1) { animation-delay: .0s; }
.acc-eq[open] .acc-eq__bars i:nth-child(2) { animation-delay: .15s; }
.acc-eq[open] .acc-eq__bars i:nth-child(3) { animation-delay: .3s; }
.acc-eq[open] .acc-eq__bars i:nth-child(4) { animation-delay: .45s; }
@keyframes acc-eq-pulse {
  from { height: 25%; } to { height: 100%; }
}
.acc-eq p {
  margin: 0; padding: 0 16px 14px 50px;
  font: 12px/1.6 system-ui; color: rgba(240,238,255,0.55);
}
@media (prefers-reduced-motion: reduce) {
  .acc-eq[open] .acc-eq__bars i { animation: none; height: 70%; }
}
```

### 24. Stacked Cards

**Type:** Pure CSS
**Description:** Closed rows stack with a slight scale-down and translucent overlap; opened row pops to top.

**HTML:**
```html
<details class="acc-stk" name="acc-stk" style="--i: 0" open>
  <summary>Top of pile</summary>
  <p>The first card sits flush. Behind it the others fan back in scale.</p>
</details>
<details class="acc-stk" name="acc-stk" style="--i: 1">
  <summary>Second card</summary>
  <p>Slightly smaller and pulled up. Click to bring it to the front of the stack.</p>
</details>
<details class="acc-stk" name="acc-stk" style="--i: 2">
  <summary>Third card</summary>
  <p>The deepest in the deck. Smaller still, but always reachable.</p>
</details>
```

**CSS:**
```css
.acc-stk {
  margin-top: -10px; margin-bottom: 0;
  background: linear-gradient(135deg, #2a2438, #1a1a24);
  border: 1px solid rgba(156,123,214,0.25);
  border-radius: 12px;
  transform: scale(calc(1 - var(--i) * 0.04)) translateY(calc(var(--i) * -2px));
  transform-origin: center top;
  transition: transform .3s, margin .3s, opacity .3s;
  opacity: calc(1 - var(--i) * 0.18);
}
.acc-stk:first-of-type { margin-top: 0; }
.acc-stk summary {
  cursor: pointer; list-style: none; padding: 13px 16px;
  font: 700 13px/1 system-ui; color: #f0eeff;
}
.acc-stk summary::-webkit-details-marker { display: none; }
.acc-stk[open] {
  transform: scale(1) translateY(0);
  opacity: 1; margin-top: 8px; margin-bottom: 8px;
  border-color: rgba(212,154,92,0.5);
  box-shadow: 0 12px 30px -10px rgba(156,123,214,0.5);
}
.acc-stk:first-of-type[open] { margin-top: 0; }
.acc-stk p {
  margin: 0; padding: 0 16px 14px;
  font: 12px/1.55 system-ui; color: rgba(240,238,255,0.65);
}
```

### 25. Holographic Slot

**Type:** Pure CSS
**Description:** Open row shows a holographic gradient sweep — like a foil sticker catching light.

**HTML:**
```html
<details class="acc-holo" name="acc-holo" open>
  <summary>Foil A · Aurora</summary>
  <p>Cool ribbon of violet to cyan, sweeping at 20 degrees. Catches light at any angle.</p>
</details>
<details class="acc-holo" name="acc-holo">
  <summary>Foil B · Copper</summary>
  <p>Warm metallic with a soft inner glow. Reads premium without going gold.</p>
</details>
<details class="acc-holo" name="acc-holo">
  <summary>Foil C · Mint</summary>
  <p>Cooler than gold, less corporate than silver. Quiet and confident.</p>
</details>
```

**CSS:**
```css
.acc-holo {
  background: #15151d; border: 1px solid rgba(240,238,255,0.06);
  border-radius: 10px; margin-bottom: 6px; overflow: hidden;
  position: relative;
}
.acc-holo summary {
  cursor: pointer; list-style: none; padding: 13px 16px;
  font: 700 13px/1 system-ui; color: rgba(240,238,255,0.7);
  position: relative; z-index: 2;
}
.acc-holo summary::-webkit-details-marker { display: none; }
.acc-holo::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg,
    transparent 30%, rgba(156,123,214,0.4) 45%,
    rgba(212,154,92,0.4) 55%, rgba(143,179,163,0.4) 65%,
    transparent 80%);
  background-size: 250% 100%; background-position: 100% 0;
  opacity: 0; transition: opacity .35s, background-position 1.6s ease-out;
}
.acc-holo[open] { border-color: rgba(212,154,92,0.4); }
.acc-holo[open]::before { opacity: 1; background-position: 0% 0; }
.acc-holo[open] > summary { color: #f0eeff; }
.acc-holo p {
  margin: 0; padding: 0 16px 14px; position: relative; z-index: 2;
  font: 12px/1.55 system-ui; color: rgba(240,238,255,0.65);
}
```

### 26. Aurora Drift

**Type:** Pure CSS
**Description:** Closed rows show a faint hue at the edge; open rows bloom into a slow-drifting aurora.

**HTML:**
```html
<details class="acc-drift" name="acc-drift" open>
  <summary>Northern Lights</summary>
  <p>Charged particles meet the upper atmosphere. The sky turns to ribbon.</p>
</details>
<details class="acc-drift" name="acc-drift">
  <summary>Solar Wind</summary>
  <p>A constant stream from the sun. Some nights it sings louder than others.</p>
</details>
<details class="acc-drift" name="acc-drift">
  <summary>Geomagnetic Storm</summary>
  <p>When the wind hits hard, the auroral oval expands south. Rare gift for lower latitudes.</p>
</details>
```

**CSS:**
```css
.acc-drift {
  position: relative; margin-bottom: 6px;
  background: #15151d; border-radius: 12px;
  border: 1px solid rgba(240,238,255,0.06);
  overflow: hidden;
}
.acc-drift::before {
  content: ''; position: absolute; inset: -50%;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(156,123,214,0.5), transparent 55%),
    radial-gradient(ellipse at 80% 70%, rgba(143,179,163,0.4), transparent 55%),
    radial-gradient(ellipse at 50% 50%, rgba(212,154,92,0.35), transparent 60%);
  filter: blur(20px); opacity: 0;
  animation: acc-drift-roll 18s linear infinite;
  transition: opacity .4s;
  pointer-events: none;
}
.acc-drift summary {
  cursor: pointer; list-style: none; padding: 13px 16px;
  font: 700 13px/1 system-ui; color: rgba(240,238,255,0.7);
  position: relative; z-index: 2;
}
.acc-drift summary::-webkit-details-marker { display: none; }
.acc-drift[open]::before { opacity: 0.7; }
.acc-drift[open] > summary { color: #f0eeff; }
.acc-drift p {
  margin: 0; padding: 0 16px 14px; position: relative; z-index: 2;
  font: 12px/1.55 system-ui; color: rgba(240,238,255,0.7);
}
@keyframes acc-drift-roll {
  0%   { transform: translate(0,0) rotate(0); }
  100% { transform: translate(8%,-6%) rotate(15deg); }
}
@media (prefers-reduced-motion: reduce) {
  .acc-drift::before { animation: none; }
}
```

---
## 15 CSS Background Animations

URL: https://codefronts.com/motion/css-background-animations/
Description: 15 hand-coded CSS background animations with live demos — infinite shifting gradient, floating particle bubbles, parallax starry night, clickable cyberpunk ripple, sliding geometric grid, SVG wave overlays, glassmorphism orbs, aurora borealis ribbons, matrix digital rain, mesh gradient blobs, falling snow, morphing blob, retro synthwave 3D grid, infinite scrolling diagonal marquee, comic-book halftone dots. 100% Pure CSS, no JavaScript, no canvas, no particles.js. prefers-reduced-motion respected, scoped class names, MIT-licensed.
Demo count: 15

### 01. Animated Gradient Backgrounds (Infinite Shifting)

**Type:** Pure CSS
**Description:** A six-color gradient drifting endlessly across the viewport, layered with blended radial blobs and a fine grain overlay for depth. Pure CSS, zero extra markup — ideal for hero sections and landing pages.

**HTML:**
```html
<div class="bga-01">
  <div class="bga-01__scene"></div>
</div>
```

**CSS:**
```css
.bga-01, .bga-01 *, .bga-01 *::before, .bga-01 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.bga-01 {
  min-height: 460px;
  display: grid;
  place-items: stretch;
}

.bga-01__scene {
  width: 100%;
  min-height: 460px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(
    130deg,
    #ff6b6b,
    #feca57,
    #48dbfb,
    #5f27cd,
    #ff9ff3,
    #00d2d3
  );
  background-size: 400% 400%;
  animation: bga-01-drift 16s ease-in-out infinite;
}

/* Second mesh layer using radial blobs for depth */
.bga-01__scene::before {
  content: "";
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(40% 50% at 20% 30%, rgba(255,255,255,0.45), transparent 60%),
    radial-gradient(45% 45% at 80% 25%, rgba(95,39,205,0.55), transparent 55%),
    radial-gradient(50% 55% at 65% 80%, rgba(0,210,211,0.5), transparent 60%),
    radial-gradient(40% 40% at 25% 75%, rgba(254,202,87,0.5), transparent 55%);
  filter: blur(10px);
  mix-blend-mode: overlay;
  animation: bga-01-meshmove 20s ease-in-out infinite alternate;
}

/* Fine grain overlay */
.bga-01__scene::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: 0.06;
  pointer-events: none;
  mix-blend-mode: overlay;
}

@keyframes bga-01-drift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes bga-01-meshmove {
  0%   { transform: translate3d(-3%, -2%, 0) rotate(0deg) scale(1.05); }
  100% { transform: translate3d(3%, 2%, 0) rotate(8deg) scale(1.15); }
}

@media (prefers-reduced-motion: reduce) {
  .bga-01__scene,
  .bga-01__scene::before,
  .bga-01__scene::after {
    animation: none !important;
  }
}
```

### 02. Floating Particle or Bubble Effects

**Type:** Pure CSS
**Description:** Fifteen luminous bubbles rising and drifting on randomized durations and delays for an organic, lava-lamp feel over a deep navy radial backdrop. A lightweight vanilla-CSS alternative to particles.js for login screens and SaaS pages.

**HTML:**
```html
<div class="bga-02">
  <div class="bga-02__scene">
    <div class="bga-02__bubbles">
      <span class="bga-02__bubble"></span><span class="bga-02__bubble"></span><span class="bga-02__bubble"></span>
      <span class="bga-02__bubble"></span><span class="bga-02__bubble"></span><span class="bga-02__bubble"></span>
      <span class="bga-02__bubble"></span><span class="bga-02__bubble"></span><span class="bga-02__bubble"></span>
      <span class="bga-02__bubble"></span><span class="bga-02__bubble"></span><span class="bga-02__bubble"></span>
      <span class="bga-02__bubble"></span><span class="bga-02__bubble"></span><span class="bga-02__bubble"></span>
    </div>
  </div>
</div>
```

**CSS:**
```css
.bga-02, .bga-02 *, .bga-02 *::before, .bga-02 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.bga-02 {
  min-height: 460px;
  display: grid;
  place-items: stretch;
}

.bga-02__scene {
  width: 100%;
  min-height: 460px;
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at 50% 120%, #1b2a4a 0%, #0a0f1f 60%, #05060d 100%);
}

.bga-02__bubbles { position: absolute; inset: 0; }

.bga-02__bubble {
  position: absolute;
  bottom: -160px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%,
    rgba(255,255,255,0.9),
    rgba(120,200,255,0.35) 40%,
    rgba(80,140,255,0.05) 70%);
  box-shadow: 0 0 24px rgba(120,200,255,0.35),
              inset 0 0 12px rgba(255,255,255,0.4);
  opacity: 0;
  animation: bga-02-rise linear infinite;
}

@keyframes bga-02-rise {
  0%   { transform: translateY(0) translateX(0) scale(0.6); opacity: 0; }
  10%  { opacity: 0.9; }
  50%  { transform: translateY(-55vh) translateX(30px) scale(1); }
  90%  { opacity: 0.7; }
  100% { transform: translateY(-115vh) translateX(-20px) scale(1.2); opacity: 0; }
}

/* Individually tuned bubbles for an organic feel */
.bga-02__bubble:nth-child(1)  { left: 5%;  width: 28px; height: 28px; animation-duration: 14s; animation-delay: 0s; }
.bga-02__bubble:nth-child(2)  { left: 14%; width: 56px; height: 56px; animation-duration: 20s; animation-delay: 2s; }
.bga-02__bubble:nth-child(3)  { left: 22%; width: 18px; height: 18px; animation-duration: 11s; animation-delay: 4s; }
.bga-02__bubble:nth-child(4)  { left: 31%; width: 72px; height: 72px; animation-duration: 24s; animation-delay: 1s; }
.bga-02__bubble:nth-child(5)  { left: 40%; width: 34px; height: 34px; animation-duration: 16s; animation-delay: 6s; }
.bga-02__bubble:nth-child(6)  { left: 48%; width: 22px; height: 22px; animation-duration: 13s; animation-delay: 3s; }
.bga-02__bubble:nth-child(7)  { left: 56%; width: 60px; height: 60px; animation-duration: 22s; animation-delay: 5s; }
.bga-02__bubble:nth-child(8)  { left: 64%; width: 16px; height: 16px; animation-duration: 10s; animation-delay: 7s; }
.bga-02__bubble:nth-child(9)  { left: 72%; width: 44px; height: 44px; animation-duration: 18s; animation-delay: 0.5s; }
.bga-02__bubble:nth-child(10) { left: 80%; width: 80px; height: 80px; animation-duration: 26s; animation-delay: 8s; }
.bga-02__bubble:nth-child(11) { left: 88%; width: 26px; height: 26px; animation-duration: 15s; animation-delay: 4.5s; }
.bga-02__bubble:nth-child(12) { left: 94%; width: 50px; height: 50px; animation-duration: 21s; animation-delay: 2.5s; }
.bga-02__bubble:nth-child(13) { left: 10%; width: 40px; height: 40px; animation-duration: 19s; animation-delay: 9s; }
.bga-02__bubble:nth-child(14) { left: 36%; width: 14px; height: 14px; animation-duration: 9s;  animation-delay: 6.5s; }
.bga-02__bubble:nth-child(15) { left: 68%; width: 30px; height: 30px; animation-duration: 17s; animation-delay: 3.5s; }

@media (prefers-reduced-motion: reduce) {
  .bga-02__bubble {
    animation: none !important;
  }
}
```

### 03. Starry Night / Parallax Space Background

**Type:** Pure CSS
**Description:** Three star layers built from stacked box-shadow dots scrolling at different speeds for true parallax, plus a drifting nebula glow, twinkling stars, and a recurring shooting star. Perfect for dark themes and tech/crypto headers.

**HTML:**
```html
<div class="bga-03">
  <div class="bga-03__scene">
    <div class="bga-03__nebula"></div>
    <div class="bga-03__stars"></div>
    <div class="bga-03__stars2"></div>
    <div class="bga-03__stars3"></div>
    <div class="bga-03__shoot"></div>
  </div>
</div>
```

**CSS:**
```css
.bga-03, .bga-03 *, .bga-03 *::before, .bga-03 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.bga-03 {
  min-height: 460px;
  display: grid;
  place-items: stretch;
}

.bga-03__scene {
  width: 100%;
  min-height: 460px;
  position: relative;
  overflow: hidden;
  background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 80%);
}

/* Three star layers built from box-shadow on tiny pseudo dots */
.bga-03__stars, .bga-03__stars2, .bga-03__stars3 {
  position: absolute;
  top: 0; left: 0;
  width: 1px; height: 1px;
  background: transparent;
  border-radius: 50%;
}

.bga-03__stars  { box-shadow:
  120px 340px #fff, 700px 120px #fff, 300px 560px #fff, 980px 410px #fff,
  540px 80px #fff, 1300px 300px #fff, 220px 760px #fff, 860px 640px #fff,
  1500px 540px #fff, 60px 200px #fff, 1100px 700px #fff, 400px 250px #fff,
  760px 480px #fff, 1700px 180px #fff, 1000px 60px #fff;
  animation: bga-03-twinkle 4s ease-in-out infinite alternate, bga-03-scrollUp 90s linear infinite;
}
.bga-03__stars2 { box-shadow:
  200px 500px #cfe8ff, 640px 300px #cfe8ff, 1200px 150px #cfe8ff, 480px 700px #cfe8ff,
  900px 520px #cfe8ff, 1450px 380px #cfe8ff, 100px 640px #cfe8ff, 1600px 700px #cfe8ff,
  340px 120px #cfe8ff, 1050px 440px #cfe8ff;
  width: 2px; height: 2px;
  animation: bga-03-twinkle 6s ease-in-out infinite alternate, bga-03-scrollUp 130s linear infinite;
}
.bga-03__stars3 { box-shadow:
  420px 360px #fff7d6, 880px 200px #fff7d6, 1350px 600px #fff7d6, 160px 80px #fff7d6,
  1550px 280px #fff7d6, 720px 700px #fff7d6, 60px 460px #fff7d6;
  width: 3px; height: 3px;
  animation: bga-03-twinkle 5s ease-in-out infinite alternate, bga-03-scrollUp 180s linear infinite;
}

/* A drifting nebula glow for richness */
.bga-03__nebula {
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(35% 40% at 25% 30%, rgba(98,71,170,0.35), transparent 60%),
    radial-gradient(40% 45% at 75% 65%, rgba(36,120,160,0.30), transparent 60%),
    radial-gradient(30% 30% at 60% 20%, rgba(170,60,120,0.22), transparent 60%);
  filter: blur(20px);
  animation: bga-03-nebulaShift 40s ease-in-out infinite alternate;
}

/* A lone shooting star */
.bga-03__shoot {
  position: absolute;
  top: 12%; left: 70%;
  width: 120px; height: 2px;
  background: linear-gradient(90deg, #fff, transparent);
  transform: rotate(-35deg);
  opacity: 0;
  animation: bga-03-shoot 7s ease-in infinite;
}

@keyframes bga-03-twinkle { 0% { opacity: 0.3; } 100% { opacity: 1; } }
@keyframes bga-03-scrollUp { from { transform: translateY(0); } to { transform: translateY(-800px); } }
@keyframes bga-03-nebulaShift {
  0%   { transform: translate(-2%, -1%) scale(1.05); }
  100% { transform: translate(2%, 2%) scale(1.15); }
}
@keyframes bga-03-shoot {
  0%, 85% { opacity: 0; transform: translate(0,0) rotate(-35deg); }
  88%     { opacity: 1; }
  100%    { opacity: 0; transform: translate(-420px, 300px) rotate(-35deg); }
}

@media (prefers-reduced-motion: reduce) {
  .bga-03__stars,
  .bga-03__stars2,
  .bga-03__stars3,
  .bga-03__nebula,
  .bga-03__shoot {
    animation: none !important;
  }
}
```

### 04. Interactive or Click-to-Expand Ripple/Static Effects

**Type:** Pure CSS
**Description:** A cyberpunk surface with animated TV static, scanlines, and a hue-shifting tint — click anywhere to fire an expanding neon ripple, driven entirely by a CSS :checked toggle (no JS). Great for retro/VHS UI trends.

**HTML:**
```html
<div class="bga-04">
  <div class="bga-04__scene">
    <input type="radio" id="bga-04-r1" name="bga-04-ripple" class="bga-04__trigger">
    <div class="bga-04__hint">click anywhere</div>
    <div class="bga-04__surface">
      <label for="bga-04-r1"></label>
      <span class="bga-04__ripple"></span>
    </div>
  </div>
</div>
```

**CSS:**
```css
.bga-04, .bga-04 *, .bga-04 *::before, .bga-04 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.bga-04 {
  min-height: 460px;
  display: grid;
  place-items: stretch;
}

.bga-04__scene {
  width: 100%;
  min-height: 460px;
  position: relative;
  overflow: hidden;
  background: #0d0f14;
  cursor: crosshair;
}

/* Animated TV static / grain overlay */
.bga-04__scene::before {
  content: "";
  position: absolute;
  inset: -50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.12;
  animation: bga-04-static 0.6s steps(4) infinite;
  pointer-events: none;
}

/* Scanlines + cyberpunk tint */
.bga-04__scene::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,0.25) 0 1px, transparent 1px 3px),
    radial-gradient(circle at 50% 50%, rgba(0,255,200,0.06), transparent 70%),
    radial-gradient(circle at 50% 50%, rgba(255,0,128,0.05), transparent 80%);
  pointer-events: none;
  animation: bga-04-hueShift 12s linear infinite;
}

/* Toggle (radio) drives the ripple via :checked, no JS */
.bga-04__trigger { position: absolute; opacity: 0; pointer-events: none; }

.bga-04__surface {
  position: absolute;
  inset: 0;
  z-index: 2;
}
.bga-04__surface label {
  display: block;
  width: 100%;
  height: 100%;
  cursor: crosshair;
}

.bga-04__ripple {
  position: absolute;
  top: 50%; left: 50%;
  width: 40px; height: 40px;
  margin: -20px 0 0 -20px;
  border: 2px solid rgba(0,255,200,0.8);
  border-radius: 50%;
  transform: scale(0);
  opacity: 0;
}

#bga-04-r1:checked ~ .bga-04__surface .bga-04__ripple { animation: bga-04-ripple 1.6s ease-out; }

@keyframes bga-04-ripple {
  0%   { transform: scale(0); opacity: 0.9; border-color: rgba(0,255,200,0.9); }
  50%  { opacity: 0.5; border-color: rgba(255,0,128,0.7); }
  100% { transform: scale(28); opacity: 0; border-color: rgba(120,80,255,0); }
}

@keyframes bga-04-static {
  0%   { transform: translate(0,0); }
  25%  { transform: translate(-4%, 3%); }
  50%  { transform: translate(3%, -2%); }
  75%  { transform: translate(-2%, -3%); }
  100% { transform: translate(2%, 2%); }
}
@keyframes bga-04-hueShift { from { filter: hue-rotate(0deg); } to { filter: hue-rotate(360deg); } }

.bga-04__hint {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  color: rgba(0,255,200,0.55);
  font: 600 14px/1.4 ui-monospace, monospace;
  letter-spacing: 3px;
  text-transform: uppercase;
  z-index: 1;
  pointer-events: none;
  text-shadow: 0 0 8px rgba(0,255,200,0.5);
}

@media (prefers-reduced-motion: reduce) {
  .bga-04__scene::before,
  .bga-04__scene::after,
  .bga-04__ripple {
    animation: none !important;
  }
}
```

### 05. Moving Geometric & Angled Patterns

**Type:** Pure CSS
**Description:** Three stacked layers — sliding diagonal stripes, a scrolling grid, and animated chevrons — combining into a structured, infinitely scrolling tech texture with a vignette glow. A high-utility backdrop for pricing tables and card headers.

**HTML:**
```html
<div class="bga-05">
  <div class="bga-05__scene">
    <div class="bga-05__grid"></div>
    <div class="bga-05__chevrons"></div>
    <div class="bga-05__glow"></div>
  </div>
</div>
```

**CSS:**
```css
.bga-05, .bga-05 *, .bga-05 *::before, .bga-05 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.bga-05 {
  min-height: 460px;
  display: grid;
  place-items: stretch;
}

.bga-05__scene {
  width: 100%;
  min-height: 460px;
  position: relative;
  overflow: hidden;
  background: #11131c;
}

/* Layer 1: moving diagonal stripes */
.bga-05__scene::before {
  content: "";
  position: absolute;
  inset: -50%;
  background: repeating-linear-gradient(
    45deg,
    rgba(255,90,120,0.12) 0 20px,
    transparent 20px 40px
  );
  animation: bga-05-slideDiag 6s linear infinite;
}

/* Layer 2: scrolling grid */
.bga-05__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(80,200,255,0.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(80,200,255,0.18) 1px, transparent 1px);
  background-size: 48px 48px;
  animation: bga-05-scrollGrid 8s linear infinite;
}

/* Layer 3: animated chevrons */
.bga-05__chevrons {
  position: absolute;
  inset: -40px;
  background-image:
    linear-gradient(135deg, rgba(255,200,60,0.16) 25%, transparent 25%),
    linear-gradient(225deg, rgba(255,200,60,0.16) 25%, transparent 25%);
  background-size: 60px 60px;
  background-position: 0 0;
  animation: bga-05-chevronMove 5s linear infinite;
  mix-blend-mode: screen;
}

/* Center glow to add depth */
.bga-05__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, transparent 30%, rgba(17,19,28,0.9) 100%);
  pointer-events: none;
}

@keyframes bga-05-slideDiag {
  from { transform: translate(0,0); }
  to   { transform: translate(56px, 56px); }
}
@keyframes bga-05-scrollGrid {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 48px 48px, 48px 48px; }
}
@keyframes bga-05-chevronMove {
  from { background-position: 0 0; }
  to   { background-position: 0 60px; }
}

@media (prefers-reduced-motion: reduce) {
  .bga-05__scene::before,
  .bga-05__grid,
  .bga-05__chevrons {
    animation: none !important;
  }
}
```

### 06. Video-Mimicking / Subtle Wave Overlays

**Type:** Pure CSS
**Description:** Three SVG wave paths sliding at staggered speeds to mimic flowing water beneath a soft pulsing sun, over a warm sunset gradient. A lightweight replacement for background video at the bottom of hero sections.

**HTML:**
```html
<div class="bga-06">
  <div class="bga-06__scene">
    <div class="bga-06__sun"></div>
    <div class="bga-06__waves">
      <div class="bga-06__wave bga-06__wave1">
        <svg viewBox="0 0 1440 320" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
          <path fill="#6c5ce7" d="M0,160 C240,80 480,240 720,160 C960,80 1200,240 1440,160 L1440,320 L0,320 Z"/>
        </svg>
      </div>
      <div class="bga-06__wave bga-06__wave2">
        <svg viewBox="0 0 1440 320" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
          <path fill="#a29bfe" d="M0,200 C360,120 720,280 1080,200 C1260,160 1380,220 1440,200 L1440,320 L0,320 Z"/>
        </svg>
      </div>
      <div class="bga-06__wave bga-06__wave3">
        <svg viewBox="0 0 1440 320" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
          <path fill="#5f3dc4" d="M0,240 C300,180 600,300 900,240 C1140,190 1320,270 1440,240 L1440,320 L0,320 Z"/>
        </svg>
      </div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.bga-06, .bga-06 *, .bga-06 *::before, .bga-06 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.bga-06 {
  min-height: 460px;
  display: grid;
  place-items: stretch;
}

.bga-06__scene {
  width: 100%;
  min-height: 460px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #fceabb 0%, #ffd6a5 30%, #ff9a8b 60%, #a18cd1 100%);
}

/* Soft sun glow */
.bga-06__sun {
  position: absolute;
  top: 14%; left: 50%;
  width: 220px; height: 220px;
  margin-left: -110px;
  background: radial-gradient(circle, rgba(255,255,255,0.95), rgba(255,220,150,0.5) 45%, transparent 70%);
  border-radius: 50%;
  filter: blur(2px);
  animation: bga-06-pulse 8s ease-in-out infinite;
}

.bga-06__waves {
  position: absolute;
  bottom: 0; left: 0;
  width: 100%;
  height: 55%;
}

.bga-06__wave {
  position: absolute;
  bottom: 0; left: 0;
  width: 200%;
  height: 100%;
}

.bga-06__wave svg { display: block; width: 100%; height: 100%; }

.bga-06__wave1 { animation: bga-06-waveX 14s linear infinite; opacity: 0.55; }
.bga-06__wave2 { animation: bga-06-waveX 10s linear infinite reverse; opacity: 0.4; }
.bga-06__wave3 { animation: bga-06-waveX 18s linear infinite; opacity: 0.7; }

@keyframes bga-06-waveX {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes bga-06-pulse {
  0%, 100% { transform: scale(1); opacity: 0.9; }
  50%      { transform: scale(1.08); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .bga-06__sun,
  .bga-06__wave1,
  .bga-06__wave2,
  .bga-06__wave3 {
    animation: none !important;
  }
}
```

### 07. Glassmorphism Floating Orbs Background

**Type:** Pure CSS
**Description:** Colorful gradient orbs drift in slow orbits behind a frosted glass card with a reflective sheen sweep. Searched as "CSS glassmorphism background" — hugely popular for SaaS, fintech, and Apple-inspired UI.

**HTML:**
```html
<div class="bga-07">
  <div class="bga-07__scene">
    <div class="bga-07__orb bga-07__orb1"></div>
    <div class="bga-07__orb bga-07__orb2"></div>
    <div class="bga-07__orb bga-07__orb3"></div>
    <div class="bga-07__glass"></div>
  </div>
</div>
```

**CSS:**
```css
.bga-07, .bga-07 *, .bga-07 *::before, .bga-07 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.bga-07 {
  min-height: 460px;
  display: grid;
  place-items: stretch;
}

.bga-07__scene {
  width: 100%;
  min-height: 460px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
}

/* Colored orbs drifting in slow orbits behind the glass */
.bga-07__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(8px);
  opacity: 0.85;
}
.bga-07__orb1 { width: 320px; height: 320px; top: 10%; left: 8%;
  background: radial-gradient(circle at 30% 30%, #ff6ec4, #7873f5);
  animation: bga-07-orbit1 18s ease-in-out infinite; }
.bga-07__orb2 { width: 260px; height: 260px; bottom: 12%; right: 10%;
  background: radial-gradient(circle at 30% 30%, #43e97b, #38f9d7);
  animation: bga-07-orbit2 22s ease-in-out infinite; }
.bga-07__orb3 { width: 200px; height: 200px; top: 45%; left: 55%;
  background: radial-gradient(circle at 30% 30%, #fa709a, #fee140);
  animation: bga-07-orbit3 16s ease-in-out infinite; }

/* Frosted glass card on top */
.bga-07__glass {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 60%;
  max-width: 520px;
  height: 320px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 28px;
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  box-shadow: 0 20px 60px rgba(0,0,0,0.35),
              inset 0 1px 0 rgba(255,255,255,0.35);
  animation: bga-07-float 9s ease-in-out infinite;
}
/* Reflective highlight sweep */
.bga-07__glass::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 28px;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.18) 50%, transparent 70%);
  background-size: 250% 100%;
  animation: bga-07-sheen 6s linear infinite;
}

@keyframes bga-07-orbit1 { 50% { transform: translate(80px, 60px) scale(1.1); } }
@keyframes bga-07-orbit2 { 50% { transform: translate(-90px, -50px) scale(1.15); } }
@keyframes bga-07-orbit3 { 50% { transform: translate(-60px, 70px) scale(0.9); } }
@keyframes bga-07-float { 0%,100% { transform: translate(-50%, -50%); } 50% { transform: translate(-50%, -58%); } }
@keyframes bga-07-sheen { from { background-position: 200% 0; } to { background-position: -50% 0; } }

@media (prefers-reduced-motion: reduce) {
  .bga-07__orb1,
  .bga-07__orb2,
  .bga-07__orb3,
  .bga-07__glass,
  .bga-07__glass::after {
    animation: none !important;
  }
}
```

### 08. Aurora Borealis Background Animation

**Type:** Pure CSS
**Description:** Layered screen-blended ribbons skew and stretch like northern lights over a twinkling star field on a deep night-sky gradient. Searched as "CSS aurora background" — a top pick for premium dark hero sections.

**HTML:**
```html
<div class="bga-08">
  <div class="bga-08__scene">
    <div class="bga-08__stars"></div>
    <div class="bga-08__aurora bga-08__a1"></div>
    <div class="bga-08__aurora bga-08__a2"></div>
    <div class="bga-08__aurora bga-08__a3"></div>
  </div>
</div>
```

**CSS:**
```css
.bga-08, .bga-08 *, .bga-08 *::before, .bga-08 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.bga-08 {
  min-height: 460px;
  display: grid;
  place-items: stretch;
}

.bga-08__scene {
  width: 100%;
  min-height: 460px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #020111 0%, #06183b 55%, #0a2a4a 100%);
}

/* Stacked aurora ribbons made of conic/linear gradients */
.bga-08__aurora {
  position: absolute;
  top: -20%; left: -20%;
  width: 140%; height: 100%;
  filter: blur(40px);
  mix-blend-mode: screen;
}
.bga-08__a1 {
  background: linear-gradient(120deg, transparent, #00ff9d 40%, #00b3ff 60%, transparent);
  opacity: 0.5;
  animation: bga-08-wave1 12s ease-in-out infinite alternate;
}
.bga-08__a2 {
  background: linear-gradient(100deg, transparent, #b14aff 45%, #ff6ec4 65%, transparent);
  opacity: 0.4;
  animation: bga-08-wave2 16s ease-in-out infinite alternate;
}
.bga-08__a3 {
  background: linear-gradient(140deg, transparent, #2ed8ff 35%, #6cff9e 55%, transparent);
  opacity: 0.35;
  animation: bga-08-wave3 20s ease-in-out infinite alternate;
}

/* Star field below the aurora */
.bga-08__stars {
  position: absolute;
  top: 0; left: 0; width: 1px; height: 1px;
  box-shadow:
    140px 120px #fff, 480px 60px #fff, 900px 180px #fff, 1300px 90px #fff,
    260px 220px #fff, 720px 260px #fff, 1100px 240px #fff, 60px 300px #fff,
    1500px 200px #fff, 600px 140px #fff;
  animation: bga-08-twinkle 5s ease-in-out infinite alternate;
}

@keyframes bga-08-wave1 {
  0%   { transform: translateX(-10%) skewX(-8deg) scaleY(1); }
  100% { transform: translateX(10%) skewX(8deg) scaleY(1.2); }
}
@keyframes bga-08-wave2 {
  0%   { transform: translateX(8%) skewX(6deg) scaleY(1.1); }
  100% { transform: translateX(-12%) skewX(-10deg) scaleY(0.9); }
}
@keyframes bga-08-wave3 {
  0%   { transform: translateX(-5%) skewX(-4deg) scaleY(0.95); }
  100% { transform: translateX(14%) skewX(12deg) scaleY(1.25); }
}
@keyframes bga-08-twinkle { 0% { opacity: 0.4; } 100% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .bga-08__a1,
  .bga-08__a2,
  .bga-08__a3,
  .bga-08__stars {
    animation: none !important;
  }
}
```

### 09. Matrix Digital Rain Background

**Type:** Pure CSS
**Description:** Sixteen columns of katakana glyphs fall at staggered speeds with a glowing leading character and a fading trail mask. Searched as "CSS matrix rain effect" — a perennial favorite for hacker/cyberpunk and dev-portfolio themes.

**HTML:**
```html
<div class="bga-09">
  <div class="bga-09__scene">
    <div class="bga-09__column"><span>ﾊ</span>ﾐﾋｰｳｼﾅﾓﾆｻﾜｷｾﾈ01ﾁﾂ</div>
    <div class="bga-09__column"><span>ｱ</span>ｶﾀﾚﾆｿﾈﾎｵﾗ10ﾘﾜｾﾁｸｺ</div>
    <div class="bga-09__column"><span>ﾈ</span>ｾﾁｸ01ﾜｷﾅﾓﾆｻﾚﾋｰｳ</div>
    <div class="bga-09__column"><span>ﾗ</span>10ﾘﾜｾﾁｸﾀﾚﾆｿﾈﾎｵｶ</div>
    <div class="bga-09__column"><span>ｼ</span>ﾅﾓﾆｻﾜｷﾈﾁﾂ01ﾊﾐﾋｰ</div>
    <div class="bga-09__column"><span>ﾀ</span>ﾚﾆｿﾈﾎｵﾗ10ﾘｱｶﾜｾﾁ</div>
    <div class="bga-09__column"><span>ﾐ</span>ﾋｰｳｼﾅ01ﾆｻﾜｷｾﾈﾁﾂ</div>
    <div class="bga-09__column"><span>ｿ</span>ﾈﾎｵﾗ10ﾘﾜﾀﾚﾆｾﾁｸｺ</div>
    <div class="bga-09__column"><span>ﾜ</span>ｷｾﾈﾁ01ﾂﾊﾐﾋｰｳｼﾅﾓ</div>
    <div class="bga-09__column"><span>ﾎ</span>ｵﾗ10ﾘﾜｾﾀﾚﾆｿﾈﾁｸｺ</div>
    <div class="bga-09__column"><span>ﾆ</span>ｻﾜｷｾﾈﾁﾂ01ﾊﾐﾋｰｳｼ</div>
    <div class="bga-09__column"><span>ﾘ</span>ﾜｾﾁｸﾀ10ﾚﾆｿﾈﾎｵﾗｶ</div>
    <div class="bga-09__column"><span>ﾅ</span>ﾓﾆｻﾜｷ01ｾﾈﾁﾂﾊﾐﾋｰ</div>
    <div class="bga-09__column"><span>ﾚ</span>ﾆｿﾈﾎ10ｵﾗﾘﾜｾﾁｸﾀｺ</div>
    <div class="bga-09__column"><span>ﾋ</span>ｰｳｼﾅﾓ01ﾆｻﾜｷｾﾈﾁﾂ</div>
    <div class="bga-09__column"><span>ｵ</span>ﾗﾘﾜｾﾁ10ｸﾀﾚﾆｿﾈﾎｶ</div>
  </div>
</div>
```

**CSS:**
```css
.bga-09, .bga-09 *, .bga-09 *::before, .bga-09 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.bga-09 {
  min-height: 460px;
  display: grid;
  place-items: stretch;
}

.bga-09__scene {
  width: 100%;
  min-height: 460px;
  position: relative;
  overflow: hidden;
  background: #000;
  font-family: "Courier New", monospace;
}

.bga-09__column {
  position: absolute;
  top: 0;
  width: 22px;
  color: #00ff66;
  font-size: 18px;
  line-height: 22px;
  text-align: center;
  white-space: pre;
  text-shadow: 0 0 6px #00ff66;
  writing-mode: vertical-rl;
  text-orientation: upright;
  animation: bga-09-fall linear infinite;
  /* gradient mask so the trail fades upward */
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 25%, #000 75%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 25%, #000 75%, transparent);
}

/* Each column gets its own position, speed, and delay */
.bga-09__column:nth-child(1)  { left: 2%;  animation-duration: 6s;  animation-delay: 0s;   opacity: 0.9; }
.bga-09__column:nth-child(2)  { left: 8%;  animation-duration: 9s;  animation-delay: 1.5s; opacity: 0.7; }
.bga-09__column:nth-child(3)  { left: 14%; animation-duration: 5s;  animation-delay: 0.5s; }
.bga-09__column:nth-child(4)  { left: 20%; animation-duration: 11s; animation-delay: 2s;   opacity: 0.8; }
.bga-09__column:nth-child(5)  { left: 26%; animation-duration: 7s;  animation-delay: 3s; }
.bga-09__column:nth-child(6)  { left: 32%; animation-duration: 8s;  animation-delay: 0.2s; opacity: 0.6; }
.bga-09__column:nth-child(7)  { left: 38%; animation-duration: 6.5s;animation-delay: 1s; }
.bga-09__column:nth-child(8)  { left: 44%; animation-duration: 10s; animation-delay: 2.5s; opacity: 0.85; }
.bga-09__column:nth-child(9)  { left: 50%; animation-duration: 5.5s;animation-delay: 0.8s; }
.bga-09__column:nth-child(10) { left: 56%; animation-duration: 9.5s;animation-delay: 3.5s; opacity: 0.7; }
.bga-09__column:nth-child(11) { left: 62%; animation-duration: 7.5s;animation-delay: 1.2s; }
.bga-09__column:nth-child(12) { left: 68%; animation-duration: 6s;  animation-delay: 2.8s; opacity: 0.9; }
.bga-09__column:nth-child(13) { left: 74%; animation-duration: 11s; animation-delay: 0.4s; }
.bga-09__column:nth-child(14) { left: 80%; animation-duration: 8.5s;animation-delay: 1.8s; opacity: 0.65; }
.bga-09__column:nth-child(15) { left: 86%; animation-duration: 5s;  animation-delay: 3.2s; }
.bga-09__column:nth-child(16) { left: 92%; animation-duration: 9s;  animation-delay: 0.6s; opacity: 0.8; }

/* brighten the leading glyph */
.bga-09__column span { color: #ccffcc; text-shadow: 0 0 12px #aaffaa; }

@keyframes bga-09-fall {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(100vh); }
}

@media (prefers-reduced-motion: reduce) {
  .bga-09__column {
    animation: none !important;
  }
}
```

### 10. Animated Mesh Gradient Blob Background

**Type:** Pure CSS
**Description:** Four large multiply-blended color blobs roam and scale to create a soft, ever-shifting mesh gradient with subtle grain. Searched as "CSS mesh gradient animation" — the trendy modern look for light landing pages.

**HTML:**
```html
<div class="bga-10">
  <div class="bga-10__scene">
    <div class="bga-10__blob bga-10__b1"></div>
    <div class="bga-10__blob bga-10__b2"></div>
    <div class="bga-10__blob bga-10__b3"></div>
    <div class="bga-10__blob bga-10__b4"></div>
  </div>
</div>
```

**CSS:**
```css
.bga-10, .bga-10 *, .bga-10 *::before, .bga-10 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.bga-10 {
  min-height: 460px;
  display: grid;
  place-items: stretch;
}

.bga-10__scene {
  width: 100%;
  min-height: 460px;
  position: relative;
  overflow: hidden;
  background: #f4f1ff;
}

/* Several large blurred color blobs that morph and roam,
   creating a soft animated mesh-gradient look */
.bga-10__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.85;
  mix-blend-mode: multiply;
}
.bga-10__b1 { width: 460px; height: 460px; background: #ff8fab; top: -8%; left: -5%;
      animation: bga-10-roam1 20s ease-in-out infinite; }
.bga-10__b2 { width: 420px; height: 420px; background: #8fd3ff; top: 30%; right: -8%;
      animation: bga-10-roam2 24s ease-in-out infinite; }
.bga-10__b3 { width: 380px; height: 380px; background: #c4f5b0; bottom: -10%; left: 25%;
      animation: bga-10-roam3 18s ease-in-out infinite; }
.bga-10__b4 { width: 340px; height: 340px; background: #ffe28a; top: 20%; left: 35%;
      animation: bga-10-roam4 26s ease-in-out infinite; }

/* subtle grain to make the gradient feel premium */
.bga-10__scene::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.04;
  pointer-events: none;
}

@keyframes bga-10-roam1 {
  0%,100% { transform: translate(0,0) scale(1); }
  33%     { transform: translate(120px, 80px) scale(1.2); }
  66%     { transform: translate(60px, 160px) scale(0.9); }
}
@keyframes bga-10-roam2 {
  0%,100% { transform: translate(0,0) scale(1); }
  50%     { transform: translate(-140px, 60px) scale(1.15); }
}
@keyframes bga-10-roam3 {
  0%,100% { transform: translate(0,0) scale(1); }
  40%     { transform: translate(-80px, -120px) scale(1.25); }
  70%     { transform: translate(100px, -40px) scale(0.95); }
}
@keyframes bga-10-roam4 {
  0%,100% { transform: translate(0,0) scale(1.1); }
  50%     { transform: translate(90px, -90px) scale(0.85); }
}

@media (prefers-reduced-motion: reduce) {
  .bga-10__b1,
  .bga-10__b2,
  .bga-10__b3,
  .bga-10__b4 {
    animation: none !important;
  }
}
```

### 11. Falling Snow Background Animation

**Type:** Pure CSS
**Description:** Three parallax snow layers (built from box-shadow) fall and sway at different depths over a cool blue gradient. Searched as "CSS snow effect" — a seasonal evergreen for holiday banners and winter sites.

**HTML:**
```html
<div class="bga-11">
  <div class="bga-11__scene">
    <div class="bga-11__snow"></div>
    <div class="bga-11__snow2"></div>
    <div class="bga-11__snow3"></div>
  </div>
</div>
```

**CSS:**
```css
.bga-11, .bga-11 *, .bga-11 *::before, .bga-11 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.bga-11 {
  min-height: 460px;
  display: grid;
  place-items: stretch;
}

.bga-11__scene {
  width: 100%;
  min-height: 460px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #1b2a4a 0%, #2c3e6b 50%, #3a4f8a 100%);
}

/* Three snow layers via box-shadow for parallax depth */
.bga-11__snow, .bga-11__snow2, .bga-11__snow3 {
  position: absolute;
  top: -10px; left: 0;
  width: 6px; height: 6px;
  background: #fff;
  border-radius: 50%;
  filter: drop-shadow(0 0 4px rgba(255,255,255,0.6));
}

.bga-11__snow {
  box-shadow:
    60px 0 #fff, 240px 0 #fff, 460px 0 #fff, 700px 0 #fff, 980px 0 #fff,
    1180px 0 #fff, 1420px 0 #fff, 1600px 0 #fff, 380px 0 #fff, 860px 0 #fff;
  animation: bga-11-fall1 8s linear infinite, bga-11-sway 3s ease-in-out infinite alternate;
}
.bga-11__snow2 {
  width: 4px; height: 4px; opacity: 0.8;
  box-shadow:
    140px 0 #fff, 320px 0 #fff, 560px 0 #fff, 820px 0 #fff, 1080px 0 #fff,
    1300px 0 #fff, 1520px 0 #fff, 200px 0 #fff, 640px 0 #fff, 1000px 0 #fff;
  animation: bga-11-fall2 12s linear infinite, bga-11-sway 4s ease-in-out infinite alternate-reverse;
}
.bga-11__snow3 {
  width: 9px; height: 9px; opacity: 0.55; filter: blur(1px);
  box-shadow:
    100px 0 #fff, 420px 0 #fff, 760px 0 #fff, 1120px 0 #fff, 1480px 0 #fff,
    300px 0 #fff, 900px 0 #fff;
  animation: bga-11-fall3 16s linear infinite, bga-11-sway 5s ease-in-out infinite alternate;
}

@keyframes bga-11-fall1 { to { transform: translateY(105vh); } }
@keyframes bga-11-fall2 { to { transform: translateY(105vh); } }
@keyframes bga-11-fall3 { to { transform: translateY(105vh); } }
@keyframes bga-11-sway {
  from { margin-left: -15px; }
  to   { margin-left: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .bga-11__snow,
  .bga-11__snow2,
  .bga-11__snow3 {
    animation: none !important;
  }
}
```

### 12. Animated Blob Morphing Background

**Type:** Pure CSS
**Description:** A vibrant gradient blob continuously morphs its border-radius, spins, and shifts hue, with a second blend-mode blob behind it. Searched as "CSS morphing blob animation" — a striking centerpiece for creative and agency landing pages.

**HTML:**
```html
<div class="bga-12">
  <div class="bga-12__scene">
    <div class="bga-12__blob"></div>
    <div class="bga-12__blob2"></div>
  </div>
</div>
```

**CSS:**
```css
.bga-12, .bga-12 *, .bga-12 *::before, .bga-12 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.bga-12 {
  min-height: 460px;
  display: grid;
  place-items: stretch;
}

.bga-12__scene {
  width: 100%;
  min-height: 460px;
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at 50% 50%, #1a1033, #0a0618);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Big morphing blob driven by animated border-radius */
.bga-12__blob {
  width: 420px;
  height: 420px;
  background: linear-gradient(135deg, #ff3cac, #784ba0, #2b86c5);
  background-size: 200% 200%;
  box-shadow: 0 0 80px rgba(255,60,172,0.5),
              0 0 160px rgba(43,134,197,0.4);
  animation: bga-12-morph 8s ease-in-out infinite,
             bga-12-spin 20s linear infinite,
             bga-12-hue 10s linear infinite;
}

/* A second, offset blob for layered depth */
.bga-12__blob2 {
  position: absolute;
  width: 280px;
  height: 280px;
  background: linear-gradient(135deg, #43e97b, #38f9d7);
  opacity: 0.55;
  filter: blur(6px);
  animation: bga-12-morph2 10s ease-in-out infinite,
             bga-12-spin 16s linear infinite reverse;
  mix-blend-mode: screen;
}

@keyframes bga-12-morph {
  0%,100% { border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%; }
  33%     { border-radius: 70% 30% 46% 54% / 30% 60% 40% 70%; }
  66%     { border-radius: 34% 66% 60% 40% / 65% 35% 65% 35%; }
}
@keyframes bga-12-morph2 {
  0%,100% { border-radius: 60% 40% 30% 70% / 50% 60% 40% 50%; }
  50%     { border-radius: 30% 70% 70% 30% / 60% 40% 60% 40%; }
}
@keyframes bga-12-spin { to { transform: rotate(360deg); } }
@keyframes bga-12-hue { to { filter: hue-rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .bga-12__blob,
  .bga-12__blob2 {
    animation: none !important;
  }
}
```

### 13. Retro Cyberpunk Grid / Synthwave Horizon

**Type:** Pure CSS
**Description:** A neon 3D grid floor recedes toward the horizon using perspective + rotateX, scrolling infinitely beneath a scanline-cut sunset sun. Built with advanced CSS 3D transforms — the classic 80s look for gaming pages, dev portfolios, and web3 projects.

**HTML:**
```html
<div class="bga-13">
  <div class="bga-13__scene">
    <div class="bga-13__sun"></div>
    <div class="bga-13__grid"></div>
  </div>
</div>
```

**CSS:**
```css
.bga-13, .bga-13 *, .bga-13 *::before, .bga-13 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.bga-13 {
  min-height: 460px;
  display: grid;
  place-items: stretch;
}

.bga-13__scene {
  width: 100%;
  min-height: 460px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #0d0221 0%, #2a0a4a 45%, #51087e 60%, #ff2e88 100%);
  perspective: 380px;
}

/* Sun on the horizon */
.bga-13__sun {
  position: absolute;
  top: 38%; left: 50%;
  width: 300px; height: 300px;
  margin-left: -150px;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffe94e 0%, #ff7ac6 55%, #ff2e88 100%);
  box-shadow: 0 0 80px rgba(255,46,136,0.7);
  z-index: 1;
}
/* Scanline gaps cut into the sun */
.bga-13__sun::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: repeating-linear-gradient(
    0deg,
    transparent 0 10px,
    rgba(13,2,33,0.9) 10px 14px
  );
  -webkit-mask: linear-gradient(180deg, transparent 45%, #000 45%);
  mask: linear-gradient(180deg, transparent 45%, #000 45%);
}

/* The receding 3D grid floor */
.bga-13__grid {
  position: absolute;
  bottom: 0; left: -50%;
  width: 200%;
  height: 70%;
  transform: rotateX(78deg);
  transform-origin: bottom center;
  background-image:
    linear-gradient(rgba(0,255,255,0.6) 2px, transparent 2px),
    linear-gradient(90deg, rgba(255,46,200,0.6) 2px, transparent 2px);
  background-size: 60px 60px;
  animation: bga-13-scroll 1.2s linear infinite;
}
/* Glow fade toward the horizon */
.bga-13__grid::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #0d0221 0%, transparent 40%);
}

@keyframes bga-13-scroll {
  from { background-position: 0 0; }
  to   { background-position: 0 60px; }
}

@media (prefers-reduced-motion: reduce) {
  .bga-13__grid {
    animation: none !important;
  }
}
```

### 14. Infinite Scrolling Diagonal Text / Marquee Background

**Type:** Pure CSS
**Description:** Huge outline-style headlines tilted at an angle, with alternating rows scrolling in opposite directions in a seamless pure-CSS translateX loop. No JavaScript — ideal for digital agencies, streetwear e-commerce, and creative portfolios.

**HTML:**
```html
<div class="bga-14">
  <div class="bga-14__scene">
    <div class="bga-14__stage">
      <div class="bga-14__row bga-14__left">
        <span>Creative • Design • Code •&nbsp;</span>
        <span>Creative • Design • Code •&nbsp;</span>
      </div>
      <div class="bga-14__row bga-14__right">
        <span>Build • Ship • Repeat •&nbsp;</span>
        <span>Build • Ship • Repeat •&nbsp;</span>
      </div>
      <div class="bga-14__row bga-14__left">
        <span>Pure CSS • No JS •&nbsp;</span>
        <span>Pure CSS • No JS •&nbsp;</span>
      </div>
      <div class="bga-14__row bga-14__right">
        <span>Studio • Agency • Web •&nbsp;</span>
        <span>Studio • Agency • Web •&nbsp;</span>
      </div>
      <div class="bga-14__row bga-14__left">
        <span>Creative • Design • Code •&nbsp;</span>
        <span>Creative • Design • Code •&nbsp;</span>
      </div>
      <div class="bga-14__row bga-14__right">
        <span>Build • Ship • Repeat •&nbsp;</span>
        <span>Build • Ship • Repeat •&nbsp;</span>
      </div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.bga-14, .bga-14 *, .bga-14 *::before, .bga-14 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.bga-14 {
  min-height: 460px;
  display: grid;
  place-items: stretch;
}

.bga-14__scene {
  width: 100%;
  min-height: 460px;
  position: relative;
  overflow: hidden;
  background: #0e0e10;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Rotated stage holding several marquee rows */
.bga-14__stage {
  position: absolute;
  width: 160%;
  height: 160%;
  transform: rotate(-25deg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
}

.bga-14__row {
  display: flex;
  white-space: nowrap;
  will-change: transform;
}

.bga-14__row span {
  font-family: "Arial Black", Impact, sans-serif;
  font-size: 84px;
  font-weight: 900;
  letter-spacing: 4px;
  text-transform: uppercase;
  padding-right: 40px;
  /* Outline text */
  color: transparent;
  -webkit-text-stroke: 2px rgba(255,255,255,0.18);
}

/* Alternate rows: filled accent + opposite scroll direction */
.bga-14__row:nth-child(even) span {
  color: rgba(255,60,140,0.22);
  -webkit-text-stroke: 0;
}

.bga-14__left  { animation: bga-14-scrollLeft 24s linear infinite; }
.bga-14__right { animation: bga-14-scrollRight 24s linear infinite; }

@keyframes bga-14-scrollLeft  { from { transform: translateX(0); }    to { transform: translateX(-50%); } }
@keyframes bga-14-scrollRight { from { transform: translateX(-50%); } to { transform: translateX(0); } }

@media (prefers-reduced-motion: reduce) {
  .bga-14__left,
  .bga-14__right {
    animation: none !important;
  }
}
```

### 15. Animated Comic Book Dot / Halftone Wave

**Type:** Pure CSS
**Description:** Two offset radial-gradient dot layers breathe and drift in a pop-art duotone, with a radial mask pulsing a spotlight wave through the pattern. A tactile retro-print feel for playful, neo-brutalist, and brand-heavy layouts.

**HTML:**
```html
<div class="bga-15">
  <div class="bga-15__scene">
    <div class="bga-15__dots"></div>
    <div class="bga-15__dots2"></div>
    <div class="bga-15__wavemask"></div>
  </div>
</div>
```

**CSS:**
```css
.bga-15, .bga-15 *, .bga-15 *::before, .bga-15 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.bga-15 {
  min-height: 460px;
  display: grid;
  place-items: stretch;
}

.bga-15__scene {
  width: 100%;
  min-height: 460px;
  position: relative;
  overflow: hidden;
  background: #ffd23f;
}

/* Base halftone dot layer that breathes via background-size scaling */
.bga-15__dots {
  position: absolute;
  inset: -10%;
  background-image: radial-gradient(circle, #1a1a2e 30%, transparent 31%);
  background-size: 32px 32px;
  animation: bga-15-breathe 5s ease-in-out infinite, bga-15-drift 14s linear infinite;
}

/* Second offset color layer for a pop-art duotone wave */
.bga-15__dots2 {
  position: absolute;
  inset: -10%;
  background-image: radial-gradient(circle, #ff2e63 26%, transparent 27%);
  background-size: 32px 32px;
  background-position: 16px 16px;
  mix-blend-mode: multiply;
  opacity: 0.85;
  animation: bga-15-breathe2 6.5s ease-in-out infinite, bga-15-drift2 18s linear infinite;
}

/* Radial mask creates a "wave"/spotlight that the dots pulse within */
.bga-15__wavemask {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, transparent 0%, rgba(255,210,63,0.0) 40%, #ffd23f 80%);
  animation: bga-15-pulseMask 5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes bga-15-breathe {
  0%,100% { background-size: 28px 28px; }
  50%     { background-size: 40px 40px; }
}
@keyframes bga-15-breathe2 {
  0%,100% { background-size: 40px 40px; }
  50%     { background-size: 28px 28px; }
}
@keyframes bga-15-drift  { to { background-position: 64px 64px; } }
@keyframes bga-15-drift2 { to { background-position: -48px 80px; } }
@keyframes bga-15-pulseMask {
  0%,100% { transform: scale(1); opacity: 0.9; }
  50%     { transform: scale(1.15); opacity: 0.6; }
}

@media (prefers-reduced-motion: reduce) {
  .bga-15__dots,
  .bga-15__dots2,
  .bga-15__wavemask {
    animation: none !important;
  }
}
```

---
## 30 CSS Badges

URL: https://codefronts.com/snippets/css-badges/
Description: 30 hand-coded CSS badges spanning collectibles, status indicators, certifications, notifications, membership tiers, and live-data displays. Upload progress, typing indicator, scrabble tile, keycap shortcut, transit indicator, origami medal, hreflang, E-E-A-T, crawl status, schema, search intent, core web vitals, ECG, build pipeline, countdown, live price, file extension, dice, signal bars, reading time, aurora, vaporwave, risograph, wax seal, conference lanyard, botanical tier, cyberpunk glitch, art deco, brutalist status, holographic.
Demo count: 30

### 01. Upload Progress

**Type:** CSS + JS
**Description:** A static 73% could be a live transfer or stalled. The shimmer moving through the bar means bytes are flowing; when it becomes a slow pulse, the transfer has stalled; when it stops, it's done. Three states, one animation property.

**HTML:**
```html
<div class="upload-stage">
  <div class="upload-badge" id="upload-badge" style="--upload-ext-color:#6b3aa0">
    <div class="upload-top">
      <div class="upload-ext">ZIP</div>
      <div class="upload-file-info">
        <div class="upload-filename">design-assets-v4.zip</div>
        <div class="upload-filesize">340 MB · 1,284 files</div>
      </div>
      <svg class="upload-status-icon" viewBox="0 0 28 28" aria-hidden="true">
        <circle class="upload-check-circle" cx="14" cy="14" r="13" fill="none" stroke="#e8e4da" stroke-width="2"/>
        <path class="upload-check-path" d="M 7 14 L 11.5 18.5 L 21 9" fill="none" stroke="#aaa" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>
      </svg>
    </div>
    <div class="upload-bar-wrap">
      <div class="upload-bar-fill" id="upload-fill" style="--upload-color:#6b3aa0"></div>
    </div>
    <div class="upload-bottom">
      <div class="upload-pct" id="upload-pct">0%</div>
      <div class="upload-speed-eta" id="upload-meta">Waiting…</div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.upload-stage {
  background: #f2f4f7;
  padding: 48px 40px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  justify-content: center;
  align-items: flex-start;
  min-height: 280px;
}
.upload-badge {
  width: 100%;
  max-width: 420px;
  background: #fff;
  border: 1px solid #dde3ec;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.upload-top {
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.upload-ext {
  width: 40px;
  height: 40px;
  border-radius: 5px;
  background: var(--upload-ext-color, #555);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: ui-monospace, "JetBrains Mono", monospace;
  font-size: 9px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.08em;
  flex-shrink: 0;
}
.upload-file-info {
  flex: 1;
  min-width: 0;
}
.upload-filename {
  font-family: ui-monospace, "JetBrains Mono", monospace;
  font-size: 13px;
  font-weight: 600;
  color: #1a1612;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1;
  margin-bottom: 3px;
}
.upload-filesize {
  font-family: system-ui, "Bricolage Grotesque", sans-serif;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #888;
}
.upload-status-icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}
.upload-check-circle { transition: stroke 0.4s; }
.upload-check-path {
  stroke-dasharray: 20;
  stroke-dashoffset: 20;
  transition: stroke-dashoffset 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, stroke 0.3s;
}
.upload-badge.is-complete .upload-check-circle { stroke: #0cce6b; }
.upload-badge.is-complete .upload-check-path   { stroke: #0cce6b; stroke-dashoffset: 0; }
.upload-bar-wrap {
  height: 4px;
  background: #f0eee8;
  position: relative;
}
.upload-bar-fill {
  height: 100%;
  background: var(--upload-color, #4285f4);
  width: 0%;
  transition: width 0.5s linear, background 0.5s ease;
  position: relative;
  overflow: hidden;
}
.upload-bar-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.4) 50%, transparent 100%);
  animation: upload-shimmer 1.2s ease-in-out infinite;
}
@keyframes upload-shimmer {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}
.upload-badge.is-complete .upload-bar-fill::after { animation: none; }
.upload-badge.is-stalled  .upload-bar-fill::after { animation: upload-stall 1.5s ease-in-out infinite; }
@keyframes upload-stall {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.2; }
}
@media (prefers-reduced-motion: reduce) {
  .upload-bar-fill::after { animation: none; }
}
.upload-bottom {
  padding: 8px 16px 12px;
  display: flex;
  justify-content: space-between;
}
.upload-pct {
  font-family: ui-monospace, "JetBrains Mono", monospace;
  font-size: 12px;
  font-weight: 700;
  color: #1a1612;
}
.upload-speed-eta {
  font-family: system-ui, "Bricolage Grotesque", sans-serif;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #888;
  text-align: right;
}
```

**JS:**
```js
// Simulate an upload — progresses, stalls briefly at ~42% to show the
// stall state, resumes, completes. Then idle. Click to restart not
// included; in real use the lifecycle is driven by actual XHR events.
(function () {
  var badge  = document.getElementById('upload-badge');
  var fill   = document.getElementById('upload-fill');
  var pctEl  = document.getElementById('upload-pct');
  var metaEl = document.getElementById('upload-meta');
  var pct = 0;
  var stalled = false;

  function update() {
    fill.style.width = pct + '%';
    pctEl.textContent = Math.floor(pct) + '%';
    if (pct >= 100) {
      badge.classList.remove('is-stalled');
      badge.classList.add('is-complete');
      fill.style.background = '#0cce6b';
      pctEl.textContent = '100%';
      metaEl.textContent = 'Complete';
      return;
    }
    if (stalled) {
      badge.classList.add('is-stalled');
      metaEl.textContent = 'Connection interrupted…';
    } else {
      badge.classList.remove('is-stalled');
      var speed = (2.4 + Math.random() * 0.8).toFixed(1);
      var remaining = ((340 - 340 * pct / 100) / parseFloat(speed)).toFixed(0);
      metaEl.textContent = speed + ' MB/s · ' + remaining + 's left';
    }
  }

  var ticker = setInterval(function () {
    if (pct >= 100) { clearInterval(ticker); return; }
    if (pct >= 42 && pct < 48 && !stalled) {
      stalled = true;
      update();
      return;
    }
    if (stalled && pct < 48) {
      setTimeout(function () { stalled = false; }, 3000);
      return;
    }
    pct = Math.min(100, pct + 1.8 + Math.random() * 0.6);
    update();
  }, 400);

  update();
})();
```

### 02. Typing Indicator

**Type:** Pure CSS
**Description:** The three bouncing dots are the convention. Without the animation the badge could mean "typed recently" or "about to type." The motion defines the tense: present continuous, active right now.

**HTML:**
```html
<div class="typing-stage">
  <div class="typing-wrap">
    <div class="typing-join">
      <div class="typing-join-dot"></div>
      Ana Sousa joined the conversation
    </div>

    <div class="typing-msg">Let me check the latest build and get back to you.</div>

    <div class="typing-msg typing-sent">Sure — does the badge spec look right to you?</div>

    <div class="typing-bubble">
      <div class="typing-inner">
        <svg class="typing-avatar" viewBox="0 0 20 20" aria-hidden="true">
          <circle cx="10" cy="10" r="10" fill="#3d7ebf"/>
          <text x="10" y="14.5" text-anchor="middle" font-size="10" fill="white" font-family="sans-serif" font-weight="bold">A</text>
        </svg>
        <span class="typing-name">Ana</span>
        <div class="typing-dots">
          <div class="typing-dot"></div>
          <div class="typing-dot"></div>
          <div class="typing-dot"></div>
        </div>
      </div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.typing-stage {
  background: #ebe4d8;
  padding: 40px 36px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  justify-content: center;
  align-items: center;
  min-height: 360px;
}
.typing-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 360px;
}
.typing-msg {
  align-self: flex-end;
  background: #fff;
  border-radius: 18px 18px 4px 18px;
  padding: 10px 16px;
  font-family: system-ui, "Bricolage Grotesque", sans-serif;
  font-size: 14px;
  color: #2a2018;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
  max-width: 80%;
}
.typing-sent {
  background: #1a1612;
  color: #f0ece0;
  border-radius: 18px 18px 18px 4px;
  align-self: flex-start;
}
.typing-bubble { align-self: flex-start; }
.typing-inner {
  background: #fff;
  border-radius: 18px 18px 18px 4px;
  padding: 12px 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.typing-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  flex-shrink: 0;
}
.typing-name {
  font-family: system-ui, "Bricolage Grotesque", sans-serif;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: #888;
  text-transform: uppercase;
}
.typing-dots {
  display: flex;
  gap: 3px;
  align-items: center;
}
.typing-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #aaa;
}
.typing-dot:nth-child(1) { animation: typing-bounce 1.4s ease-in-out infinite 0ms; }
.typing-dot:nth-child(2) { animation: typing-bounce 1.4s ease-in-out infinite 160ms; }
.typing-dot:nth-child(3) { animation: typing-bounce 1.4s ease-in-out infinite 320ms; }
@keyframes typing-bounce {
  0%, 60%, 100% { transform: translateY(0); }
  30% { transform: translateY(-5px); }
}
@media (prefers-reduced-motion: reduce) {
  .typing-dot { animation: none; }
}
.typing-join {
  align-self: center;
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 20px;
  padding: 6px 14px;
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: system-ui, "Bricolage Grotesque", sans-serif;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: #666;
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}
.typing-join-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #0cce6b;
}
```

### 03. Scrabble Tile

**Type:** Pure CSS
**Description:** One letter, one number. The whole game fits in a square. Hover lifts each tile independently — the kind of small detail that makes a word feel played rather than typed.

**HTML:**
```html
<div class="tile-stage">
  <div class="tile-wrap">
    <div class="tile-row">
      <div class="tile-cube"><span class="tile-letter">S</span><span class="tile-points">1</span></div>
      <div class="tile-cube"><span class="tile-letter">I</span><span class="tile-points">1</span></div>
      <div class="tile-cube"><span class="tile-letter">M</span><span class="tile-points">3</span></div>
      <div class="tile-cube"><span class="tile-letter">P</span><span class="tile-points">3</span></div>
      <div class="tile-cube"><span class="tile-letter">L</span><span class="tile-points">1</span></div>
      <div class="tile-cube"><span class="tile-letter">E</span><span class="tile-points">1</span></div>
    </div>
    <div class="tile-word-label">10 points · 6 letters · adjective</div>
  </div>
</div>
```

**CSS:**
```css
.tile-stage {
  background: linear-gradient(145deg, #e8dfc8 0%, #d8d0b4 100%);
  padding: 60px 48px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  justify-content: center;
  align-items: center;
  min-height: 320px;
}
.tile-wrap {
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: center;
}
.tile-row {
  display: flex;
  gap: 6px;
  align-items: flex-end;
}
.tile-cube {
  width: 58px;
  height: 58px;
  background: linear-gradient(145deg, #f4e8c2 0%, #e8d8a0 100%);
  border: 1px solid #c8a840;
  border-radius: 4px;
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.5),
    2px 3px 0 #b09030,
    3px 4px 4px rgba(80,60,0,0.2);
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.25s;
  user-select: none;
}
.tile-cube:hover {
  transform: translateY(-6px) rotate(-2deg);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.5),
    2px 3px 0 #b09030,
    6px 12px 16px rgba(80,60,0,0.22);
}
@media (prefers-reduced-motion: reduce) {
  .tile-cube { transition: none; }
}
.tile-letter {
  font-family: "Cinzel", Georgia, serif;
  font-size: 30px;
  font-weight: 700;
  color: #2a1e08;
  line-height: 1;
}
.tile-points {
  position: absolute;
  bottom: 4px;
  right: 5px;
  font-family: ui-monospace, "JetBrains Mono", monospace;
  font-size: 10px;
  font-weight: 700;
  color: #4a3818;
  line-height: 1;
}
.tile-word-label {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: #7a6230;
  text-align: center;
  margin-top: 4px;
}
```

### 04. Keycap Shortcut

**Type:** CSS + JS
**Description:** A key is a physical object. Three stacked box-shadows form the edge — bottom face, outer drop, top highlight. Click any key and feel it go down. Cmd-K and friends, the way they were meant to look.

**HTML:**
```html
<div class="key-stage">
  <div class="key-combo-row">
    <div class="key-combo">
      <div class="key-cap key-wide">⌘</div>
      <div class="key-sep">+</div>
      <div class="key-cap">K</div>
    </div>
    <div class="key-combo-label">Command Palette</div>
  </div>

  <div class="key-combo-row">
    <div class="key-combo">
      <div class="key-cap key-wide">⌘</div>
      <div class="key-sep">+</div>
      <div class="key-cap key-wide">⇧</div>
      <div class="key-sep">+</div>
      <div class="key-cap">P</div>
    </div>
    <div class="key-combo-label">Quick Actions</div>
  </div>

  <div class="key-combo-row">
    <div class="key-combo">
      <div class="key-cap key-wide">⌥</div>
      <div class="key-sep">+</div>
      <div class="key-cap key-xl">⌫</div>
    </div>
    <div class="key-combo-label">Delete Word</div>
  </div>
</div>
```

**CSS:**
```css
.key-stage {
  background: #edecea;
  padding: 60px 48px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  justify-content: center;
  align-items: center;
  min-height: 380px;
}
.key-combo {
  display: flex;
  align-items: center;
  gap: 6px;
}
.key-sep {
  font-family: system-ui, "Bricolage Grotesque", sans-serif;
  font-size: 14px;
  color: #888;
  padding: 0 2px;
}
.key-cap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 12px;
  background: linear-gradient(180deg, #f8f8f6 0%, #e8e8e3 100%);
  border: 1px solid #bbb;
  border-radius: 6px;
  font-family: ui-monospace, "JetBrains Mono", monospace;
  font-size: 14px;
  font-weight: 500;
  color: #1a1a1a;
  letter-spacing: 0;
  cursor: pointer;
  user-select: none;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.9) inset,
    0 -1px 0 rgba(0,0,0,0.08) inset,
    0 3px 0 #999,
    0 4px 4px rgba(0,0,0,0.18);
  transition: transform 0.06s, box-shadow 0.06s;
  position: relative;
}
.key-cap::before {
  content: '';
  position: absolute;
  inset: 2px 2px 6px;
  border-radius: 4px;
  border-top: 1px solid rgba(255,255,255,0.6);
  pointer-events: none;
}
.key-cap:active,
.key-cap.is-pressed {
  transform: translateY(2px);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.9) inset,
    0 -1px 0 rgba(0,0,0,0.08) inset,
    0 1px 0 #999,
    0 2px 2px rgba(0,0,0,0.18);
}
.key-wide { min-width: 72px; font-size: 13px; }
.key-xl   { min-width: 96px; font-size: 13px; }
.key-combo-label {
  font-family: system-ui, "Bricolage Grotesque", sans-serif;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #888;
  text-align: center;
  margin-top: 6px;
}
.key-combo-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
```

**JS:**
```js
// Click any key to depress it briefly. Matches the CSS :active state
// but lets the visual hold for 200ms so the press registers visually
// even on a quick tap.
document.querySelectorAll('.key-cap').forEach(function (k) {
  k.addEventListener('click', function () {
    k.classList.add('is-pressed');
    setTimeout(function () { k.classList.remove('is-pressed'); }, 200);
  });
});
```

### 05. Transit Line Indicator

**Type:** CSS + JS
**Description:** Wayfinding distilled. Bullet, name, live arrival, and a strip showing where you are on the line. Built to be read from across a platform — and the next-arrival time keeps counting down.

**HTML:**
```html
<div class="tr-stage">
  <div class="tr-platform">
    <div class="tr-row">
      <div class="tr-bullet">M7</div>
      <div>
        <div class="tr-line">Northbrook Express</div>
        <div class="tr-via">via Riverside · skip-stop after 18:00</div>
      </div>
      <div class="tr-live">
        <span class="tr-live-dot"></span>
        <span class="tr-live-text">Next in <strong id="tr-live-time">4 min</strong></span>
      </div>
    </div>

    <div class="tr-route">
      <div class="tr-route-line"></div>
      <div class="tr-route-stops">
        <div class="tr-stop tr-stop-active"><span class="tr-stop-label">Central</span></div>
        <div class="tr-stop"><span class="tr-stop-label">Park</span></div>
        <div class="tr-stop"><span class="tr-stop-label">9th Ave</span></div>
        <div class="tr-stop tr-stop-transfer"><span class="tr-stop-label">Riverside</span></div>
        <div class="tr-stop"><span class="tr-stop-label">Northbrook</span></div>
      </div>
    </div>

    <div class="tr-footer">
      <span>EASTBOUND · PLATFORM 3</span>
      <span>SVC OK</span>
    </div>
  </div>
</div>
```

**CSS:**
```css
.tr-stage {
  background: #d9d3c4;
  padding: 50px 36px;
  background-image:
    linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.06) 100%),
    linear-gradient(0deg, rgba(0,0,0,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.05) 1px, transparent 1px);
  background-size: 100% 100%, 60px 30px, 60px 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 360px;
}
.tr-platform {
  background: linear-gradient(180deg, #15171a 0%, #0c0e10 100%);
  padding: 28px 26px 26px;
  max-width: 460px;
  width: 100%;
  box-shadow:
    0 30px 60px -22px rgba(0,0,0,0.7),
    0 6px 16px -2px rgba(0,0,0,0.4);
  color: #fff;
  position: relative;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.tr-platform::before {
  content: 'M  T  A · LIVE';
  position: absolute;
  top: -12px;
  left: 0;
  background: #1a1a1a;
  padding: 4px 12px;
  font-family: ui-monospace, "JetBrains Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.3em;
  color: #c8102e;
}
.tr-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 18px;
  align-items: center;
  padding-bottom: 22px;
  border-bottom: 1px dashed rgba(255,255,255,0.18);
}
.tr-bullet {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: linear-gradient(180deg, #d4233d 0%, #b80e25 100%);
  color: #fff;
  font-family: "Bebas Neue", system-ui, sans-serif;
  font-size: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.03em;
  box-shadow:
    inset 0 -4px 6px rgba(0,0,0,0.35),
    inset 0 4px 5px rgba(255,255,255,0.25),
    0 6px 14px rgba(200,16,46,0.5);
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.tr-line {
  font-family: "Bebas Neue", system-ui, sans-serif;
  font-size: 26px;
  letter-spacing: 0.03em;
  line-height: 1;
  margin-bottom: 5px;
}
.tr-via {
  font-family: ui-monospace, "JetBrains Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.55);
  text-transform: uppercase;
}
.tr-live {
  display: flex;
  align-items: center;
  gap: 7px;
  background: rgba(255,255,255,0.04);
  padding: 7px 12px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 2px;
}
.tr-live-dot {
  width: 7px;
  height: 7px;
  background: #4ade80;
  border-radius: 50%;
  box-shadow: 0 0 7px #4ade80;
  animation: tr-pulse 1.6s infinite;
}
@keyframes tr-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) {
  .tr-live-dot { animation: none; }
}
.tr-live-text {
  font-family: ui-monospace, "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.75);
  text-transform: uppercase;
}
.tr-live-text strong { color: #fff; font-weight: 700; font-size: 11px; }
.tr-route {
  margin-top: 22px;
  position: relative;
  padding: 0 4px;
}
.tr-route-line {
  position: absolute;
  top: 7px;
  left: 4px;
  right: 4px;
  height: 4px;
  background: #c8102e;
  border-radius: 2px;
}
.tr-route-stops {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  position: relative;
  z-index: 1;
}
.tr-stop {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}
.tr-stop::before {
  content: '';
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #1a1a1a;
  border: 3px solid #c8102e;
  margin-bottom: 8px;
  transition: transform 0.2s;
}
.tr-stop:hover::before { transform: scale(1.2); }
.tr-stop-active::before {
  background: #fff;
  border-color: #fff;
  box-shadow: 0 0 0 2px #c8102e;
}
.tr-stop-transfer::before {
  background: #fff;
  box-shadow: 0 0 0 2px #c8102e;
}
.tr-stop-label {
  font-family: ui-monospace, "JetBrains Mono", monospace;
  font-size: 8.5px;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.55);
  text-transform: uppercase;
  text-align: center;
  line-height: 1.25;
  white-space: nowrap;
}
.tr-stop-active .tr-stop-label { color: #fff; }
.tr-footer {
  margin-top: 22px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex;
  justify-content: space-between;
  font-family: ui-monospace, "JetBrains Mono", monospace;
  font-size: 8px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
}
```

**JS:**
```js
// Next arrival countdown — decrements every 4s, resets to 5 min when
// it bottoms out so the demo never goes stale.
(function () {
  var nextIn = 4;
  var liveTimeEl = document.getElementById('tr-live-time');
  if (!liveTimeEl) return;
  setInterval(function () {
    nextIn = nextIn > 1 ? nextIn - 1 : 5;
    liveTimeEl.textContent = nextIn + ' min';
  }, 4000);
})();
```

### 06. Origami Craft Endorsement

**Type:** Pure CSS
**Description:** Paper folded along six creases, lit from the upper-left. A ribbon hangs beneath. Hover lifts the page to catch the fold angles — the lit facets brighten, the shadowed ones recede.

**HTML:**
```html
<div class="ori-stage">
  <div class="ori-badge">
    <svg class="ori-medal" viewBox="0 0 220 300" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
      <ellipse cx="110" cy="288" rx="68" ry="6" fill="#5a4220" opacity="0.22"/>
      <g>
        <polygon points="80,190 80,260 110,250 110,200" fill="#3d5a6c"/>
        <polygon points="80,260 95,280 110,250" fill="#284252"/>
        <polygon points="110,200 110,250 140,260 140,190" fill="#2a4252"/>
        <polygon points="140,260 125,280 110,250" fill="#1a3242"/>
      </g>
      <polygon class="ori-fold ori-fold-light"  points="110,30 200,82 110,118" fill="#fbe6b0"/>
      <polygon class="ori-fold"                 points="200,82 192,196 110,118" fill="#e8c878"/>
      <polygon class="ori-fold ori-fold-shadow" points="192,196 110,222 110,118" fill="#c8a050"/>
      <polygon class="ori-fold ori-fold-shadow" points="110,222 28,196 110,118" fill="#b8923e"/>
      <polygon class="ori-fold"                 points="28,196 20,82 110,118" fill="#dab866"/>
      <polygon class="ori-fold ori-fold-light"  points="20,82 110,30 110,118" fill="#f4d894"/>
      <line x1="110" y1="30" x2="110" y2="222" stroke="#7a5824" stroke-width="0.4" opacity="0.3"/>
      <line x1="20" y1="82" x2="200" y2="82" stroke="#7a5824" stroke-width="0.4" opacity="0.25"/>
      <line x1="28" y1="196" x2="192" y2="196" stroke="#7a5824" stroke-width="0.4" opacity="0.25"/>
      <polygon points="110,30 200,82 192,196 110,222 28,196 20,82" fill="none" stroke="#fae0a0" stroke-width="0.6" opacity="0.5"/>
      <circle cx="110" cy="118" r="22" fill="#6a4a20" opacity="0.9"/>
      <circle cx="110" cy="118" r="20" fill="none" stroke="#fae0a0" stroke-width="0.6" opacity="0.6"/>
      <text x="110" y="127" text-anchor="middle" font-family="Marcellus, Georgia, serif" font-size="22" fill="#fae0a0" font-weight="400">M</text>
    </svg>
  </div>
  <div class="ori-label">
    <div class="ori-tier">— Master Class —</div>
    <div class="ori-skill">Letterpress &amp; Bindery</div>
    <div class="ori-cert">N° 0247 · Awarded May 2026</div>
  </div>
</div>
```

**CSS:**
```css
.ori-stage {
  background: linear-gradient(170deg, #eee8d4 0%, #d8d0b8 100%);
  padding: 60px 40px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: center;
  justify-content: center;
  perspective: 1200px;
  min-height: 460px;
}
.ori-badge {
  position: relative;
  cursor: pointer;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.ori-badge:hover {
  transform: rotateY(14deg) rotateX(-6deg);
}
@media (prefers-reduced-motion: reduce) {
  .ori-badge { transition: none; }
}
.ori-medal {
  width: 220px;
  height: 300px;
  display: block;
  filter: drop-shadow(8px 18px 14px rgba(80,60,20,0.25));
}
.ori-medal .ori-fold { transition: filter 0.4s; }
.ori-badge:hover .ori-medal .ori-fold-light  { filter: brightness(1.12); }
.ori-badge:hover .ori-medal .ori-fold-shadow { filter: brightness(0.92); }
.ori-label {
  text-align: center;
}
.ori-tier {
  font-family: system-ui, "Bricolage Grotesque", sans-serif;
  font-size: 9px;
  letter-spacing: 0.42em;
  color: #6a4a20;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.ori-skill {
  font-family: "Marcellus", Georgia, serif;
  font-size: 26px;
  color: #3a2814;
  line-height: 1;
  margin-bottom: 8px;
  letter-spacing: 0.01em;
}
.ori-cert {
  font-family: system-ui, "Bricolage Grotesque", sans-serif;
  font-size: 9px;
  letter-spacing: 0.22em;
  color: #8a6630;
  text-transform: uppercase;
}
```

### 07. Hreflang Coverage

**Type:** Pure CSS
**Description:** International SEO's most misunderstood tag. Shows the target locale, alternate version count, and — crucially — flags missing reciprocal links. Hreflang must be bidirectional or the entire cluster invalidates.

**HTML:**
```html
<div class="hl-stage">
  <div class="hl-card">
    <div class="hl-primary">
      <div class="hl-flag">
        <span style="background:#002868; flex:0.4"></span>
        <span style="background:#bf0a30; flex:0.3"></span>
        <span style="background:#fff; flex:0.3"></span>
      </div>
      <div>
        <div class="hl-code">en-US</div>
        <div class="hl-name">English · United States</div>
      </div>
      <div class="hl-alts-count">→ 14 alternates</div>
    </div>
    <div class="hl-body">
      <div class="hl-section-label">Declared Alternates</div>
      <div class="hl-chips">
        <div class="hl-chip hl-xdefault">x-default</div>
        <div class="hl-chip">en-GB</div>
        <div class="hl-chip">en-AU</div>
        <div class="hl-chip">fr-FR</div>
        <div class="hl-chip">de-DE</div>
        <div class="hl-chip">es-ES</div>
        <div class="hl-chip">es-MX</div>
        <div class="hl-chip">ja-JP</div>
        <div class="hl-chip">pt-BR</div>
        <div class="hl-chip hl-missing">zh-CN ✕</div>
        <div class="hl-chip hl-missing">ko-KR ✕</div>
        <div class="hl-chip">nl-NL</div>
        <div class="hl-chip">it-IT</div>
        <div class="hl-chip">pl-PL</div>
      </div>
      <div class="hl-warning">zh-CN and ko-KR are missing reciprocal hreflang links back to this URL</div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.hl-stage {
  background: #f4f1eb;
  padding: 50px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 420px;
}
.hl-card {
  background: #fff;
  border: 1px solid #e2ddd4;
  border-radius: 6px;
  overflow: hidden;
  width: 100%;
  max-width: 480px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.hl-primary {
  display: flex;
  align-items: center;
  padding: 20px 20px 18px;
  border-bottom: 1px solid #e2ddd4;
  gap: 14px;
}
.hl-flag {
  width: 8px;
  align-self: stretch;
  flex-shrink: 0;
  border-radius: 2px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.hl-flag span { flex: 1; }
.hl-code {
  font-family: ui-monospace, "JetBrains Mono", monospace;
  font-size: 22px;
  font-weight: 700;
  color: #1a1612;
  letter-spacing: 0.02em;
}
.hl-name {
  font-family: system-ui, "Bricolage Grotesque", sans-serif;
  font-size: 12px;
  color: #4a4239;
  line-height: 1.4;
  letter-spacing: 0.04em;
}
.hl-alts-count {
  font-family: ui-monospace, "JetBrains Mono", monospace;
  font-size: 10px;
  color: #888;
  margin-left: auto;
  text-align: right;
  white-space: nowrap;
}
.hl-body { padding: 16px 20px 18px; }
.hl-section-label {
  font-family: system-ui, "Bricolage Grotesque", sans-serif;
  font-size: 9px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #aaa;
  margin-bottom: 10px;
}
.hl-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 16px;
}
.hl-chip {
  padding: 4px 10px;
  border-radius: 3px;
  font-family: ui-monospace, "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  background: #f4f1eb;
  border: 1px solid #e2ddd4;
  color: #1a1612;
  transition: background 0.2s;
  cursor: default;
}
.hl-chip:hover { background: #e8e4d8; }
.hl-xdefault {
  background: #e8f0fe;
  border-color: #c5d8fd;
  color: #4285f4;
}
.hl-missing {
  background: #fde8e8;
  border-color: #f8c0c0;
  color: #ff4e42;
}
.hl-warning {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #fff8e8;
  border-radius: 4px;
  border-left: 3px solid #ffa400;
  font-family: system-ui, "Bricolage Grotesque", sans-serif;
  font-size: 11px;
  color: #8a5a00;
  letter-spacing: 0.02em;
}
.hl-warning::before {
  content: '⚠';
  flex-shrink: 0;
}
```

### 08. E-E-A-T Scorecard

**Type:** Pure CSS
**Description:** Google's quality evaluator framework — Experience, Expertise, Authoritativeness, Trustworthiness. Composite score and a grade, with four animated bars showing per-dimension strength.

**HTML:**
```html
<div class="eeat-stage">
  <div class="eeat-card">
    <div class="eeat-top">
      <div class="eeat-composite">
        <div class="eeat-big-score">85</div>
        <div class="eeat-score-label">Composite · /100</div>
      </div>
      <div class="eeat-grade-block">
        <div class="eeat-grade">A</div>
        <div class="eeat-grade-label">Strong signal</div>
      </div>
    </div>
    <div class="eeat-bars">
      <div class="eeat-row">
        <div class="eeat-abbr" style="color:#3d7ebf">E</div>
        <div class="eeat-name">Experience</div>
        <div class="eeat-track"><div class="eeat-fill" style="background:#3d7ebf; --eeat-w: 82%"></div></div>
        <div class="eeat-val">82</div>
      </div>
      <div class="eeat-row">
        <div class="eeat-abbr" style="color:#1d8f4a">E</div>
        <div class="eeat-name">Expertise</div>
        <div class="eeat-track"><div class="eeat-fill" style="background:#1d8f4a; --eeat-w: 91%"></div></div>
        <div class="eeat-val">91</div>
      </div>
      <div class="eeat-row">
        <div class="eeat-abbr" style="color:#b8762d">A</div>
        <div class="eeat-name">Authoritativeness</div>
        <div class="eeat-track"><div class="eeat-fill" style="background:#b8762d; --eeat-w: 79%"></div></div>
        <div class="eeat-val">79</div>
      </div>
      <div class="eeat-row">
        <div class="eeat-abbr" style="color:#5b3aa0">T</div>
        <div class="eeat-name">Trustworthiness</div>
        <div class="eeat-track"><div class="eeat-fill" style="background:#5b3aa0; --eeat-w: 88%"></div></div>
        <div class="eeat-val">88</div>
      </div>
    </div>
    <div class="eeat-footer">
      <span>Evaluated May 2026</span>
      <span>Google Quality Rater Guidelines</span>
    </div>
  </div>
</div>
```

**CSS:**
```css
.eeat-stage {
  background: #fff;
  padding: 50px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 420px;
}
.eeat-card {
  background: #fff;
  border: 1.5px solid #e8e4da;
  border-radius: 6px;
  padding: 28px 28px 22px;
  width: 100%;
  max-width: 480px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}
.eeat-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid #f0ece0;
}
.eeat-composite {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.eeat-big-score {
  font-family: Georgia, "Fraunces", serif;
  font-size: 72px;
  line-height: 0.85;
  font-weight: 300;
  font-style: italic;
  color: #1a1612;
  letter-spacing: -0.04em;
}
.eeat-score-label {
  font-family: system-ui, "Bricolage Grotesque", sans-serif;
  font-size: 9px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #aaa;
}
.eeat-grade-block { text-align: right; }
.eeat-grade {
  font-family: Georgia, "Fraunces", serif;
  font-size: 48px;
  font-weight: 700;
  color: #1d8f4a;
  line-height: 1;
}
.eeat-grade-label {
  font-family: system-ui, "Bricolage Grotesque", sans-serif;
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #888;
  margin-top: 2px;
}
.eeat-bars {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.eeat-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.eeat-abbr {
  width: 12px;
  font-family: Georgia, "Fraunces", serif;
  font-weight: 700;
  font-size: 15px;
  flex-shrink: 0;
}
.eeat-name {
  font-family: system-ui, "Bricolage Grotesque", sans-serif;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #4a4239;
  width: 120px;
  flex-shrink: 0;
}
.eeat-track {
  flex: 1;
  height: 6px;
  background: #f0ece0;
  border-radius: 3px;
  overflow: hidden;
}
.eeat-fill {
  height: 100%;
  border-radius: 3px;
  width: 0;
  animation: eeat-grow 1s cubic-bezier(0.4, 0, 0.2, 1) 0.4s forwards;
}
@keyframes eeat-grow { to { width: var(--eeat-w, 0); } }
@media (prefers-reduced-motion: reduce) {
  .eeat-fill { animation: none; width: var(--eeat-w, 0); }
}
.eeat-val {
  font-family: ui-monospace, "JetBrains Mono", monospace;
  font-size: 12px;
  font-weight: 700;
  color: #1a1612;
  width: 28px;
  text-align: right;
  flex-shrink: 0;
}
.eeat-footer {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid #f0ece0;
  display: flex;
  justify-content: space-between;
  font-family: system-ui, "Bricolage Grotesque", sans-serif;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #aaa;
}
```

### 09. Crawl & Index Status

**Type:** Pure CSS
**Description:** Googlebot visits and decides: indexed or not. But there are four states before "indexed," and most pages fail before the first one. This badge shows exactly where in the crawl pipeline a URL sits.

**HTML:**
```html
<div class="crawl-stage">
  <div class="crawl-card">
    <div class="crawl-status-row">
      <div class="crawl-dot crawl-dot-indexed"></div>
      <div class="crawl-status-text">INDEXED</div>
      <div class="crawl-timestamp">Last crawled: 3h ago</div>
    </div>
    <div class="crawl-url">/blog/technical-seo-guide-2026/</div>
    <div class="crawl-meta-row">
      <span class="crawl-meta-tag">Googlebot 2.1</span>
      <span class="crawl-sep">·</span>
      <span class="crawl-meta-tag">JS Rendered</span>
      <span class="crawl-sep">·</span>
      <span class="crawl-meta-tag">200 OK</span>
      <span class="crawl-sep">·</span>
      <span class="crawl-meta-tag">canonical: self</span>
    </div>
    <div class="crawl-pipeline">
      <div class="crawl-step crawl-step-done">Discovered</div>
      <div class="crawl-arrow">»</div>
      <div class="crawl-step crawl-step-done">Crawled</div>
      <div class="crawl-arrow">»</div>
      <div class="crawl-step crawl-step-done">Rendered</div>
      <div class="crawl-arrow">»</div>
      <div class="crawl-step crawl-step-active">Indexed</div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.crawl-stage {
  background: #0a0e18;
  padding: 50px 36px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 360px;
}
.crawl-card {
  background: #111620;
  border: 1px solid #1e2638;
  border-radius: 6px;
  padding: 24px 24px 20px;
  width: 100%;
  max-width: 480px;
  font-family: ui-monospace, "JetBrains Mono", monospace;
}
.crawl-status-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.crawl-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}
.crawl-dot-indexed {
  background: #0cce6b;
  box-shadow: 0 0 8px #0cce6b;
  animation: crawl-pulse 2s infinite;
}
@keyframes crawl-pulse {
  0%, 100% { box-shadow: 0 0 6px #0cce6b; }
  50% { box-shadow: 0 0 14px #0cce6b; }
}
@media (prefers-reduced-motion: reduce) {
  .crawl-dot-indexed { animation: none; }
}
.crawl-status-text {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #0cce6b;
}
.crawl-timestamp {
  margin-left: auto;
  font-size: 10px;
  color: #8b949e;
  letter-spacing: 0.06em;
}
.crawl-url {
  font-size: 12px;
  color: #4a90d9;
  letter-spacing: 0;
  margin-bottom: 12px;
  padding: 8px 12px;
  background: rgba(66, 133, 244, 0.06);
  border-left: 2px solid rgba(66, 133, 244, 0.3);
  border-radius: 0 3px 3px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.crawl-meta-row {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 10px;
  color: #8b949e;
  letter-spacing: 0.06em;
  margin-bottom: 20px;
}
.crawl-sep { color: #30363d; }
.crawl-meta-tag {
  padding: 2px 7px;
  border-radius: 3px;
  background: rgba(139, 148, 158, 0.1);
  border: 1px solid #30363d;
  font-size: 9px;
  letter-spacing: 0.1em;
}
.crawl-pipeline {
  display: flex;
  align-items: center;
  gap: 4px;
  padding-top: 16px;
  border-top: 1px solid #1e2638;
}
.crawl-step {
  flex: 1;
  text-align: center;
  font-size: 8.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 4px;
  border-radius: 3px;
  border: 1px solid #1e2638;
  color: #8b949e;
}
.crawl-step-done {
  color: #0cce6b;
  border-color: rgba(12,206,107,0.3);
  background: rgba(12,206,107,0.06);
}
.crawl-step-active {
  color: #fff;
  border-color: rgba(12,206,107,0.6);
  background: rgba(12,206,107,0.15);
  font-weight: 700;
}
.crawl-arrow {
  font-size: 10px;
  color: #30363d;
  flex-shrink: 0;
}
```

### 10. Schema Markup Type

**Type:** Pure CSS
**Description:** Structured data is a contract between a page and Google's parser. The badge names the @type and lists which SERP features it unlocks — the difference between a plain blue link and a result with stars, FAQs, and how-to steps.

**HTML:**
```html
<div class="schema-stage">
  <div class="schema-card">
    <div class="schema-header">
      <div class="schema-at">@type</div>
      <div class="schema-type-name">Article</div>
      <div class="schema-valid-tag">✓ Valid JSON-LD</div>
    </div>
    <div class="schema-body">
      <div class="schema-section-label">Unlocks SERP Features</div>
      <div class="schema-chips">
        <div class="schema-chip schema-chip-rich">⬡ Rich Result</div>
        <div class="schema-chip schema-chip-snippet">★ Featured Snippet</div>
        <div class="schema-chip schema-chip-author">⌖ Author Markup</div>
        <div class="schema-chip schema-chip-date">⌚ DatePublished</div>
      </div>
      <div class="schema-section-label">Implementation Preview</div>
      <div class="schema-code-peek">
        <span class="schema-s-gray">&lt;script type="application/ld+json"&gt;</span><br>
        &nbsp;&nbsp;<span class="schema-s-gray">{</span> <span class="schema-s-key">"@context"</span><span class="schema-s-gray">:</span> <span class="schema-s-string">"https://schema.org"</span><span class="schema-s-gray">,</span><br>
        &nbsp;&nbsp;&nbsp;&nbsp;<span class="schema-s-key">"@type"</span><span class="schema-s-gray">:</span> <span class="schema-s-string">"Article"</span><span class="schema-s-gray">,</span><br>
        &nbsp;&nbsp;&nbsp;&nbsp;<span class="schema-s-prop">"headline"</span><span class="schema-s-gray">:</span> <span class="schema-s-string">"…"</span><span class="schema-s-gray">,</span><br>
        &nbsp;&nbsp;&nbsp;&nbsp;<span class="schema-s-prop">"author"</span><span class="schema-s-gray">:</span> <span class="schema-s-gray">{ … }</span> <span class="schema-s-gray">}</span><br>
        <span class="schema-s-gray">&lt;/script&gt;</span>
      </div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.schema-stage {
  background: #f6f8fa;
  padding: 50px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 420px;
}
.schema-card {
  background: #fff;
  border: 1px solid #e0e6ed;
  border-radius: 6px;
  width: 100%;
  max-width: 480px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.schema-header {
  background: #f6f8fa;
  border-bottom: 1px solid #e0e6ed;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.schema-at {
  font-family: ui-monospace, "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  color: #888;
  text-transform: uppercase;
}
.schema-type-name {
  font-family: ui-monospace, "JetBrains Mono", monospace;
  font-size: 18px;
  font-weight: 700;
  color: #1a1612;
  letter-spacing: -0.01em;
}
.schema-valid-tag {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: system-ui, "Bricolage Grotesque", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #1d8f4a;
  padding: 4px 10px;
  border: 1.5px solid rgba(29, 143, 74, 0.4);
  border-radius: 3px;
}
.schema-body { padding: 18px 20px; }
.schema-section-label {
  font-family: system-ui, "Bricolage Grotesque", sans-serif;
  font-size: 9px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #aaa;
  margin-bottom: 10px;
}
.schema-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 20px;
}
.schema-chip {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 3px;
  font-family: system-ui, "Bricolage Grotesque", sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  border: 1px solid;
}
.schema-chip-rich    { color: #4285f4; background: #e8f0fe; border-color: #c5d8fd; }
.schema-chip-snippet { color: #1d8f4a; background: #e6f4ea; border-color: #b7e0c2; }
.schema-chip-author  { color: #7c4dff; background: #f3e8ff; border-color: #d9b8ff; }
.schema-chip-date    { color: #b8762d; background: #fef3e2; border-color: #fdd9a0; }
.schema-code-peek {
  background: #f6f8fa;
  border: 1px solid #e0e6ed;
  border-radius: 4px;
  padding: 10px 14px;
  font-family: ui-monospace, "JetBrains Mono", monospace;
  font-size: 11.5px;
  line-height: 1.7;
  overflow: hidden;
}
.schema-s-key    { color: #032f62; }
.schema-s-string { color: #0d6416; }
.schema-s-gray   { color: #888; }
.schema-s-prop   { color: #5a3d99; }
```

### 11. Search Intent Spectrum

**Type:** Pure CSS
**Description:** Plots a keyword on the Informational / Navigational / Commercial / Transactional spectrum. Intent mismatch is one of the top reasons pages don't rank — this badge surfaces the right page type before a word is written.

**HTML:**
```html
<div class="intent-stage">
  <div class="intent-card">
    <div class="intent-query-label">Keyword</div>
    <div class="intent-query-text">"best seo tools 2026"</div>

    <div class="intent-spectrum-wrap">
      <div class="intent-spectrum">
        <div class="intent-zone intent-i">I</div>
        <div class="intent-zone intent-n">N</div>
        <div class="intent-zone intent-c">C</div>
        <div class="intent-zone intent-t">T</div>
      </div>
      <div class="intent-marker"></div>
    </div>
    <div class="intent-zone-labels">
      <span>Informational</span>
      <span>Navigational</span>
      <span>Commercial</span>
      <span>Transactional</span>
    </div>

    <div class="intent-result-row">
      <div class="intent-type-pill">Commercial</div>
      <div class="intent-page-rec">
        <strong>Comparison / Listicle</strong>
        Best-of, tools roundup, pricing page
      </div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.intent-stage {
  background: #f0f4fb;
  padding: 50px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 360px;
}
.intent-card {
  background: #fff;
  border: 1px solid #dde3ef;
  border-radius: 6px;
  padding: 28px 28px 24px;
  width: 100%;
  max-width: 480px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.intent-query-label {
  font-family: system-ui, "Bricolage Grotesque", sans-serif;
  font-size: 9px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: #888;
  margin-bottom: 6px;
}
.intent-query-text {
  font-family: ui-monospace, "JetBrains Mono", monospace;
  font-size: 16px;
  color: #1a1612;
  margin-bottom: 22px;
  padding: 8px 12px;
  background: #f6f8fc;
  border-radius: 4px;
  border-left: 3px solid #4285f4;
}
.intent-spectrum-wrap {
  position: relative;
  margin-bottom: 8px;
}
.intent-spectrum {
  display: flex;
  height: 44px;
  border-radius: 4px;
  overflow: visible;
  position: relative;
}
.intent-zone {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: ui-monospace, "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,0.85);
  letter-spacing: 0.06em;
}
.intent-zone:first-child { border-radius: 4px 0 0 4px; }
.intent-zone:last-child  { border-radius: 0 4px 4px 0; }
.intent-i { background: #4285f4; }
.intent-n { background: #0f9d58; }
.intent-c { background: #f4b400; color: rgba(0,0,0,0.6); }
.intent-t { background: #db4437; }
.intent-marker {
  position: absolute;
  top: -6px;
  bottom: -6px;
  width: 4px;
  background: #1a1612;
  border-radius: 2px;
  transform: translateX(-50%);
  box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px #1a1612;
  animation: intent-slide 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.4s forwards;
  left: 0%;
}
@keyframes intent-slide { to { left: 68%; } }
@media (prefers-reduced-motion: reduce) {
  .intent-marker { animation: none; left: 68%; }
}
.intent-zone-labels {
  display: flex;
  margin-top: 6px;
  margin-bottom: 20px;
}
.intent-zone-labels span {
  flex: 1;
  text-align: center;
  font-family: system-ui, "Bricolage Grotesque", sans-serif;
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #aaa;
}
.intent-result-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 18px;
  border-top: 1px solid #eee;
}
.intent-type-pill {
  padding: 6px 14px;
  border-radius: 20px;
  background: rgba(244, 180, 0, 0.15);
  border: 1px solid rgba(244, 180, 0, 0.4);
  font-family: system-ui, "Bricolage Grotesque", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #c48a00;
}
.intent-page-rec {
  font-family: system-ui, "Bricolage Grotesque", sans-serif;
  font-size: 11px;
  color: #888;
  text-align: right;
  line-height: 1.5;
  letter-spacing: 0.04em;
}
.intent-page-rec strong {
  color: #1a1612;
  display: block;
}
```

### 12. Core Web Vitals

**Type:** Pure CSS
**Description:** LCP, INP, CLS — the three real-world page-experience signals Google ranks on. Three SVG arcs draw to their verdict on load. Green / amber / red thresholds match Google's field-data classification.

**HTML:**
```html
<div class="cwv-stage">
  <div class="cwv-card">
    <div class="cwv-header">
      <div class="cwv-title">Core Web Vitals · Field Data</div>
      <div class="cwv-pass-count">2 / 3 Pass</div>
    </div>
    <div class="cwv-gauges">
      <div class="cwv-gauge">
        <svg viewBox="0 0 90 90" aria-hidden="true">
          <circle class="cwv-gauge-track" cx="45" cy="45" r="36"/>
          <circle class="cwv-gauge-arc" cx="45" cy="45" r="36" stroke="#ffa400" data-len="140" transform="rotate(-90 45 45)"/>
          <text x="45" y="43" text-anchor="middle" class="cwv-gauge-val">2.9s</text>
          <text x="45" y="57" text-anchor="middle" class="cwv-gauge-unit">LCP</text>
        </svg>
        <div class="cwv-metric-name">LCP</div>
        <div class="cwv-metric-verdict cwv-verdict-needs">Needs Work</div>
      </div>
      <div class="cwv-gauge">
        <svg viewBox="0 0 90 90" aria-hidden="true">
          <circle class="cwv-gauge-track" cx="45" cy="45" r="36"/>
          <circle class="cwv-gauge-arc" cx="45" cy="45" r="36" stroke="#0cce6b" data-len="205" transform="rotate(-90 45 45)"/>
          <text x="45" y="43" text-anchor="middle" class="cwv-gauge-val">89ms</text>
          <text x="45" y="57" text-anchor="middle" class="cwv-gauge-unit">INP</text>
        </svg>
        <div class="cwv-metric-name">INP</div>
        <div class="cwv-metric-verdict cwv-verdict-good">Good</div>
      </div>
      <div class="cwv-gauge">
        <svg viewBox="0 0 90 90" aria-hidden="true">
          <circle class="cwv-gauge-track" cx="45" cy="45" r="36"/>
          <circle class="cwv-gauge-arc" cx="45" cy="45" r="36" stroke="#0cce6b" data-len="193" transform="rotate(-90 45 45)"/>
          <text x="45" y="43" text-anchor="middle" class="cwv-gauge-val">0.08</text>
          <text x="45" y="57" text-anchor="middle" class="cwv-gauge-unit">CLS</text>
        </svg>
        <div class="cwv-metric-name">CLS</div>
        <div class="cwv-metric-verdict cwv-verdict-good">Good</div>
      </div>
    </div>
    <div class="cwv-footer">
      <div class="cwv-origin">example.com/blog/seo-guide/</div>
      <div class="cwv-date">28-day field data</div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.cwv-stage {
  background: #0d1117;
  padding: 50px 40px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  align-items: center;
  justify-content: center;
  min-height: 420px;
}
.cwv-card {
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 8px;
  padding: 28px 32px 24px;
  width: 100%;
  max-width: 480px;
}
.cwv-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}
.cwv-title {
  font-family: system-ui, "Bricolage Grotesque", sans-serif;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #8b949e;
}
.cwv-pass-count {
  font-family: ui-monospace, "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: #0cce6b;
  padding: 3px 10px;
  border: 1px solid rgba(12, 206, 107, 0.3);
  border-radius: 20px;
}
.cwv-gauges {
  display: flex;
  gap: 24px;
  justify-content: center;
  align-items: flex-end;
  padding-bottom: 20px;
  border-bottom: 1px solid #21262d;
}
.cwv-gauge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.cwv-gauge svg {
  width: 96px;
  height: 96px;
  overflow: visible;
}
.cwv-gauge-track {
  fill: none;
  stroke: #21262d;
  stroke-width: 7;
  stroke-linecap: round;
}
.cwv-gauge-arc {
  fill: none;
  stroke-width: 7;
  stroke-linecap: round;
  stroke-dasharray: 226;
  stroke-dashoffset: 226;
  animation: cwv-draw 1.1s cubic-bezier(0.4, 0, 0.2, 1) 0.3s forwards;
}
@keyframes cwv-draw {
  to { stroke-dashoffset: var(--cwv-target, 86); }
}
@media (prefers-reduced-motion: reduce) {
  .cwv-gauge-arc { animation: none; stroke-dashoffset: 86; }
}
.cwv-gauge-val {
  font-family: ui-monospace, "JetBrains Mono", monospace;
  fill: #e6edf3;
  font-size: 14px;
  font-weight: 700;
}
.cwv-gauge-unit {
  font-family: system-ui, "Bricolage Grotesque", sans-serif;
  fill: #8b949e;
  font-size: 10px;
}
.cwv-metric-name {
  font-family: ui-monospace, "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: #8b949e;
  text-transform: uppercase;
}
.cwv-metric-verdict {
  font-family: system-ui, "Bricolage Grotesque", sans-serif;
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-top: -2px;
}
.cwv-verdict-good  { color: #0cce6b; }
.cwv-verdict-needs { color: #ffa400; }
.cwv-verdict-poor  { color: #ff4e42; }
.cwv-footer {
  margin-top: 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.cwv-origin {
  font-family: ui-monospace, "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.06em;
  color: #4a90d9;
}
.cwv-date {
  font-family: system-ui, "Bricolage Grotesque", sans-serif;
  font-size: 10px;
  letter-spacing: 0.1em;
  color: #8b949e;
  text-transform: uppercase;
}
```

### 13. ECG Heartbeat

**Type:** CSS + JS
**Description:** Live BPM with a continuously scrolling waveform. Scroll speed equals beats per minute literally — change the duration and you change the rate. The badge and the data are the same thing.

**HTML:**
```html
<div class="ecg-stage">
  <div class="ecg-card">
    <div class="ecg-header">
      <div class="ecg-system">SRV-PROD-01 · Heartbeat</div>
      <div class="ecg-status">Normal</div>
    </div>

    <div class="ecg-viewport">
      <svg class="ecg-svg" width="880" height="68" viewBox="0 0 880 68" style="animation-duration: 0.833s" aria-hidden="true">
        <polyline
          fill="none"
          stroke="#00e5a0"
          stroke-width="2"
          stroke-linejoin="round"
          stroke-linecap="round"
          opacity="0.9"
          points="
            0,48 58,48
            64,42 70,38 76,42 82,48
            132,48 136,53 139,10 143,60 147,48
            170,48 185,40 200,36 215,40 230,48
            300,48
            358,48
            364,42 370,38 376,42 382,48
            432,48 436,53 439,10 443,60 447,48
            470,48 485,40 500,36 515,40 530,48
            600,48
            658,48
            664,42 670,38 676,42 682,48
            732,48 736,53 739,10 743,60 747,48
            770,48 785,40 800,36 815,40 830,48
            880,48
          "/>
        <line x1="0" y1="48" x2="880" y2="48" stroke="#00e5a0" stroke-width="0.3" opacity="0.2"/>
      </svg>
    </div>

    <div class="ecg-metrics">
      <div class="ecg-bpm">
        <div class="ecg-bpm-val" id="ecg-bpm">72</div>
        <div class="ecg-bpm-unit">BPM</div>
      </div>
      <div class="ecg-secondary">
        <div class="ecg-sec-val">P–R 160ms</div>
        <div class="ecg-sec-label">Interval</div>
      </div>
      <div class="ecg-secondary">
        <div class="ecg-sec-val">QRS 88ms</div>
        <div class="ecg-sec-label">Duration</div>
      </div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.ecg-stage {
  background: #050c12;
  padding: 48px 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  justify-content: center;
  align-items: center;
  min-height: 360px;
}
.ecg-card {
  background: #0a1520;
  border: 1px solid #0f2030;
  border-radius: 8px;
  padding: 20px 24px;
  width: 100%;
  max-width: 440px;
}
.ecg-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}
.ecg-system {
  font-family: ui-monospace, "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #00e5a0;
  opacity: 0.7;
}
.ecg-status {
  font-family: system-ui, "Bricolage Grotesque", sans-serif;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #00e5a0;
  padding: 3px 10px;
  border: 1px solid rgba(0,229,160,0.3);
  border-radius: 20px;
  animation: ecg-glow 3s ease-in-out infinite;
}
@keyframes ecg-glow {
  0%, 100% { box-shadow: 0 0 0 rgba(0,229,160,0.3); }
  50% { box-shadow: 0 0 8px rgba(0,229,160,0.3); }
}
.ecg-viewport {
  width: 100%;
  height: 68px;
  overflow: hidden;
  position: relative;
  margin-bottom: 14px;
}
.ecg-svg {
  display: block;
  animation: ecg-scroll 0.833s linear infinite;
}
@keyframes ecg-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .ecg-svg, .ecg-status { animation: none; }
}
.ecg-metrics {
  display: flex;
  align-items: flex-end;
  gap: 24px;
  padding-top: 12px;
  border-top: 1px solid #0f2030;
}
.ecg-bpm {
  display: flex;
  align-items: baseline;
  gap: 5px;
}
.ecg-bpm-val {
  font-family: ui-monospace, "JetBrains Mono", monospace;
  font-size: 42px;
  font-weight: 700;
  color: #00e5a0;
  line-height: 0.9;
  letter-spacing: -0.02em;
}
.ecg-bpm-unit {
  font-family: system-ui, "Bricolage Grotesque", sans-serif;
  font-size: 12px;
  letter-spacing: 0.12em;
  color: rgba(0,229,160,0.6);
  text-transform: uppercase;
}
.ecg-secondary {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-left: auto;
  text-align: right;
}
.ecg-sec-val {
  font-family: ui-monospace, "JetBrains Mono", monospace;
  font-size: 14px;
  color: rgba(0,229,160,0.8);
  letter-spacing: 0.04em;
}
.ecg-sec-label {
  font-family: system-ui, "Bricolage Grotesque", sans-serif;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(0,229,160,0.4);
}
```

**JS:**
```js
// BPM drifts slightly around 72 so the badge feels alive. Animation
// duration is tied to BPM literally — 60 / bpm seconds per cycle.
(function () {
  var bpmEl = document.getElementById('ecg-bpm');
  var ecgSvg = document.querySelector('.ecg-svg');
  var bpm = 72;
  setInterval(function () {
    bpm += (Math.random() - 0.5) * 2;
    bpm = Math.max(68, Math.min(78, bpm));
    var rounded = Math.round(bpm);
    bpmEl.textContent = rounded;
    ecgSvg.style.animationDuration = (60 / bpm).toFixed(3) + 's';
  }, 4000);
})();
```

### 14. Build Pipeline

**Type:** CSS + JS
**Description:** CI/CD stage tracker with a spinning arc on the active step. Sequential steps light up — you know roughly how long remains by which step is spinning. Restarts automatically.

**HTML:**
```html
<div class="build-stage">
  <div class="build-card">
    <div class="build-header">
      <div class="build-title" id="build-title">⏳ Running</div>
      <div class="build-branch">feat/badge-v5 · a3f9c2e</div>
    </div>
    <div class="build-steps" id="build-steps"></div>
    <div class="build-footer">
      <span id="build-elapsed">Elapsed: 0s</span>
      <button class="build-restart" id="build-restart" type="button">↺ Restart demo</button>
    </div>
  </div>
</div>
```

**CSS:**
```css
.build-stage {
  background: #0d1117;
  padding: 40px 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 460px;
}
.build-card {
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 8px;
  width: 100%;
  max-width: 420px;
  overflow: hidden;
  font-family: ui-monospace, "JetBrains Mono", monospace;
}
.build-header {
  padding: 14px 18px;
  border-bottom: 1px solid #21262d;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.build-title {
  font-size: 12px;
  letter-spacing: 0.06em;
  color: #e6edf3;
}
.build-branch {
  font-size: 10px;
  color: #8b949e;
  letter-spacing: 0.06em;
}
.build-steps { padding: 8px 0; }
.build-step {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  transition: background 0.3s;
}
.build-step.is-active { background: rgba(255,255,255,0.03); }
.build-step-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.build-spinner-arc {
  transform-origin: 10px 10px;
  animation: build-spin 0.8s linear infinite;
}
@keyframes build-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .build-spinner-arc { animation: none; }
}
.build-step-info { flex: 1; }
.build-step-name {
  font-size: 12px;
  color: #e6edf3;
  letter-spacing: 0.02em;
  line-height: 1;
  margin-bottom: 3px;
}
.build-step-name.is-dim { color: #484f58; }
.build-step-meta {
  font-family: system-ui, "Bricolage Grotesque", sans-serif;
  font-size: 10px;
  letter-spacing: 0.1em;
  color: #8b949e;
  text-transform: uppercase;
}
.build-step-dur {
  font-size: 11px;
  color: #8b949e;
  letter-spacing: 0.06em;
  flex-shrink: 0;
}
.build-footer {
  padding: 12px 18px;
  border-top: 1px solid #21262d;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: #8b949e;
  display: flex;
  justify-content: space-between;
}
.build-restart {
  cursor: pointer;
  color: #4a90d9;
  text-decoration: underline;
  background: none;
  border: none;
  font-family: inherit;
  font-size: inherit;
  letter-spacing: inherit;
}
```

**JS:**
```js
// Build pipeline — 6 sequential CI stages, each takes a few seconds.
// Active step shows a spinning arc; completed steps show a checkmark.
// Restarts automatically 3s after completion.
(function () {
  var STEPS = [
    { label: 'Checkout',      meta: 'actions/checkout@v4',      dur: 2  },
    { label: 'npm install',   meta: 'node 20 · 1,284 packages', dur: 14 },
    { label: 'ESLint',        meta: '0 errors · 3 warnings',    dur: 5  },
    { label: 'Jest',          meta: '142 tests · 3 suites',     dur: 24 },
    { label: 'Vite build',    meta: '1.4 MB bundle',            dur: 18 },
    { label: 'fly.io deploy', meta: 'prod · us-east region',    dur: 9  }
  ];
  var active = 0;
  var elapsed = 0;
  var elapsedTimer;
  var stepsEl   = document.getElementById('build-steps');
  var titleEl   = document.getElementById('build-title');
  var elapsedEl = document.getElementById('build-elapsed');
  var restartBtn = document.getElementById('build-restart');

  function iconDone() {
    return '<svg class="build-step-icon" viewBox="0 0 20 20">'
         + '<circle cx="10" cy="10" r="9" fill="rgba(63,185,80,0.12)" stroke="rgba(63,185,80,0.4)" stroke-width="1.5"/>'
         + '<path d="M 5.5 10.5 L 8.5 13.5 L 14.5 7" fill="none" stroke="#3fb950" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>'
         + '</svg>';
  }
  function iconRunning() {
    return '<svg class="build-step-icon" viewBox="0 0 20 20">'
         + '<circle cx="10" cy="10" r="8" fill="none" stroke="#30363d" stroke-width="2"/>'
         + '<circle cx="10" cy="10" r="8" fill="none" stroke="#e3b341" stroke-width="2" stroke-dasharray="18 32" stroke-linecap="round" class="build-spinner-arc"/>'
         + '</svg>';
  }
  function iconWaiting() {
    return '<svg class="build-step-icon" viewBox="0 0 20 20">'
         + '<circle cx="10" cy="10" r="9" fill="none" stroke="#30363d" stroke-width="1.5"/>'
         + '</svg>';
  }

  function render() {
    stepsEl.innerHTML = STEPS.map(function (s, i) {
      var done    = i < active;
      var running = i === active;
      var waiting = i > active;
      var icon    = done ? iconDone() : running ? iconRunning() : iconWaiting();
      var nameClass = waiting ? 'build-step-name is-dim' : 'build-step-name';
      var dur = done ? s.dur + 's' : running ? elapsed + 's' : '';
      var durColor = done ? '#3fb950' : running ? '#e3b341' : '#30363d';
      return '<div class="build-step ' + (running ? 'is-active' : '') + '">'
           + icon
           + '<div class="build-step-info">'
           + '<div class="' + nameClass + '">' + s.label + '</div>'
           + '<div class="build-step-meta" style="color:' + (waiting ? '#30363d' : '') + '">'
           + (waiting ? '—' : s.meta) + '</div>'
           + '</div>'
           + '<div class="build-step-dur" style="color:' + durColor + '">' + dur + '</div>'
           + '</div>';
    }).join('');
    elapsedEl.textContent = 'Elapsed: ' + STEPS.slice(0, active).reduce(function (a, s) { return a + s.dur; }, 0) + 's';
    if (active >= STEPS.length) {
      titleEl.textContent = '✓ Passed';
      titleEl.style.color = '#3fb950';
    } else {
      titleEl.textContent = '⏳ Running';
      titleEl.style.color = '#e3b341';
    }
  }

  function start() {
    active = 0;
    elapsed = 0;
    clearInterval(elapsedTimer);
    render();
    elapsedTimer = setInterval(function () { elapsed++; render(); }, 1000);
    var advance = setInterval(function () {
      elapsed = 0;
      active++;
      render();
      if (active >= STEPS.length) {
        clearInterval(advance);
        clearInterval(elapsedTimer);
        setTimeout(start, 3000);
      }
    }, 2500);
  }

  restartBtn.addEventListener('click', start);
  start();
})();
```

### 15. Countdown Ring

**Type:** CSS + JS
**Description:** Ring depletes continuously in real time. Color shifts green → amber → red as the deadline approaches. The depletion rate is the data. A static badge cannot know what time it is.

**HTML:**
```html
<div class="cd-stage">
  <div class="cd-wrap">
    <div class="cd-event">Sprint Review</div>
    <div class="cd-ring-wrap">
      <svg viewBox="0 0 180 180" aria-hidden="true">
        <circle class="cd-ring-track" cx="90" cy="90" r="81"/>
        <circle class="cd-ring-fill" id="cd-ring" cx="90" cy="90" r="81" stroke="#0cce6b"/>
      </svg>
      <div class="cd-inner">
        <div class="cd-time" id="cd-time">02:34:00</div>
        <div class="cd-label">remaining</div>
      </div>
    </div>
    <div class="cd-deadline" id="cd-deadline">Deadline · Today, 17:00</div>
  </div>
</div>
```

**CSS:**
```css
.cd-stage {
  background: #fafaf7;
  padding: 60px 48px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
  justify-content: center;
  min-height: 400px;
}
.cd-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.cd-ring-wrap {
  position: relative;
  width: 180px;
  height: 180px;
}
.cd-ring-wrap svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.cd-ring-track {
  fill: none;
  stroke: #e8e4da;
  stroke-width: 9;
}
.cd-ring-fill {
  fill: none;
  stroke-width: 9;
  stroke-linecap: round;
  stroke-dasharray: 508;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1s linear, stroke 0.8s ease;
}
.cd-inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
.cd-time {
  font-family: ui-monospace, "JetBrains Mono", monospace;
  font-size: 26px;
  font-weight: 700;
  color: #1a1612;
  letter-spacing: -0.02em;
  line-height: 1;
}
.cd-label {
  font-family: system-ui, "Bricolage Grotesque", sans-serif;
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #4a4239;
}
.cd-deadline {
  font-family: system-ui, "Bricolage Grotesque", sans-serif;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #aaa;
  text-align: center;
}
.cd-event {
  font-family: Georgia, "Fraunces", serif;
  font-size: 20px;
  font-style: italic;
  color: #1a1612;
  text-align: center;
}
```

**JS:**
```js
// Countdown ring — 4h total sprint, ~2h34m initially remaining.
// Ring depletes continuously, color shifts at 50% and 20% thresholds.
(function () {
  var TOTAL_MS = 4 * 3600 * 1000;
  var deadline = new Date(Date.now() + 2 * 3600 * 1000 + 34 * 60 * 1000);
  var ring   = document.getElementById('cd-ring');
  var timeEl = document.getElementById('cd-time');
  var deadEl = document.getElementById('cd-deadline');
  var CIRCUM = 2 * Math.PI * 81;

  function pad2(n) { return String(n).padStart(2, '0'); }
  function tick() {
    var remaining = Math.max(0, deadline - Date.now());
    var frac = remaining / TOTAL_MS;
    ring.style.strokeDashoffset = CIRCUM * (1 - frac);
    ring.style.stroke = frac > 0.5 ? '#0cce6b' : frac > 0.2 ? '#ffa400' : '#ff4e42';
    var h = Math.floor(remaining / 3600000);
    var m = Math.floor((remaining % 3600000) / 60000);
    var s = Math.floor((remaining % 60000) / 1000);
    timeEl.textContent = pad2(h) + ':' + pad2(m) + ':' + pad2(s);
    deadEl.textContent = 'Deadline · Today, ' + deadline.getHours() + ':' + pad2(deadline.getMinutes());
  }
  tick();
  setInterval(tick, 1000);
})();
```

### 16. Live Price Ticker

**Type:** CSS + JS
**Description:** A static price is history; an animated price is now. Green or red flash on each update tells direction without comparison. Sparkline shows the recent walk. The animation IS the signal.

**HTML:**
```html
<div class="price-stage">
  <div class="price-card" id="price-card">
    <div class="price-top">
      <div class="price-symbol">BTC · USD</div>
      <div class="price-live-dot">Live · 3s</div>
    </div>
    <div class="price-value" id="price-value">$67,420.58</div>
    <div class="price-change">
      <span class="price-delta price-up" id="price-delta">+$234.12</span>
      <span class="price-delta price-up" id="price-pct">(+0.35%)</span>
      <span class="price-arrow" id="price-arrow">▲</span>
    </div>
    <svg class="price-sparkline" viewBox="0 0 200 36" preserveAspectRatio="none" aria-hidden="true">
      <defs>
        <linearGradient id="price-spark-grad" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stop-color="#0cce6b" stop-opacity="0.3"/>
          <stop offset="100%" stop-color="#0cce6b" stop-opacity="0"/>
        </linearGradient>
      </defs>
      <path id="price-spark-area" fill="url(#price-spark-grad)" opacity="0.6"/>
      <polyline id="price-spark-line" class="price-sparkline-path" stroke="#0cce6b"/>
    </svg>
    <div class="price-footer">
      <span id="price-updated">Updated just now</span>
      <span>24h Vol $42.8B</span>
    </div>
  </div>
</div>
```

**CSS:**
```css
.price-stage {
  background: #0d1117;
  padding: 48px 36px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 360px;
}
.price-card {
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 8px;
  padding: 22px 24px;
  width: 100%;
  max-width: 380px;
  position: relative;
  overflow: hidden;
  font-family: ui-monospace, "JetBrains Mono", monospace;
}
.price-card.is-flash-up   { animation: price-flash-up   0.65s ease-out; }
.price-card.is-flash-down { animation: price-flash-down 0.65s ease-out; }
@keyframes price-flash-up   { 0% { background: rgba(12,206,107,0.2); } 100% { background: #161b22; } }
@keyframes price-flash-down { 0% { background: rgba(255,78,66,0.2);  } 100% { background: #161b22; } }
@media (prefers-reduced-motion: reduce) {
  .price-card.is-flash-up, .price-card.is-flash-down { animation: none; }
}
.price-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
}
.price-symbol {
  font-size: 11px;
  letter-spacing: 0.18em;
  color: #8b949e;
  text-transform: uppercase;
}
.price-live-dot {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: system-ui, "Bricolage Grotesque", sans-serif;
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #8b949e;
}
.price-live-dot::before {
  content: '';
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #0cce6b;
  box-shadow: 0 0 6px #0cce6b;
  animation: price-pulse 2s infinite;
}
@keyframes price-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
.price-value {
  font-size: 36px;
  font-weight: 700;
  color: #e6edf3;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
  line-height: 1;
}
.price-change {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
.price-delta {
  font-size: 13px;
  font-weight: 600;
}
.price-up   { color: #0cce6b; }
.price-down { color: #ff4e42; }
.price-arrow { font-size: 12px; }
.price-sparkline { width: 100%; height: 36px; }
.price-sparkline-path {
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.price-footer {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #21262d;
  font-size: 9px;
  letter-spacing: 0.1em;
  color: #8b949e;
  text-transform: uppercase;
}
```

**JS:**
```js
// Live price ticker — random-walks BTC around $67k. Every 3s the
// price moves, the delta + sparkline update, and the background
// flashes green or red depending on direction.
(function () {
  var price = 67420.58;
  var openPrice = 67186.46;
  var history = [];
  for (var k = 0; k < 24; k++) {
    history.push(67186 + Math.sin(k * 0.7) * 180 + k * 9.8 + Math.random() * 60);
  }
  history.push(price);

  var card    = document.getElementById('price-card');
  var valEl   = document.getElementById('price-value');
  var deltaEl = document.getElementById('price-delta');
  var pctEl   = document.getElementById('price-pct');
  var arrowEl = document.getElementById('price-arrow');
  var lineEl  = document.getElementById('price-spark-line');
  var areaEl  = document.getElementById('price-spark-area');
  var updEl   = document.getElementById('price-updated');

  function fmt(n) {
    return n.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
  }

  function redrawSpark() {
    var W = 200, H = 36, pad = 2;
    var min = Math.min.apply(null, history);
    var max = Math.max.apply(null, history);
    var range = max - min || 1;
    var pts = history.map(function (v, i) {
      var x = (i / (history.length - 1)) * (W - 2 * pad) + pad;
      var y = H - pad - ((v - min) / range) * (H - 2 * pad);
      return x.toFixed(1) + ',' + y.toFixed(1);
    }).join(' ');
    lineEl.setAttribute('points', pts);
    var areaD = 'M ' + pad + ' ' + H + ' L ' + history.map(function (v, i) {
      var x = (i / (history.length - 1)) * (W - 2 * pad) + pad;
      var y = H - pad - ((v - min) / range) * (H - 2 * pad);
      return x.toFixed(1) + ' ' + y.toFixed(1);
    }).join(' L ') + ' L ' + (W - pad) + ' ' + H + ' Z';
    areaEl.setAttribute('d', areaD);
  }

  function updatePrice() {
    var prev = price;
    price += (Math.random() - 0.47) * 110;
    price = Math.max(64000, Math.min(72000, price));
    history.push(price);
    if (history.length > 24) history.shift();

    var isUp = price >= prev;
    var totalChange = price - openPrice;
    var totalPct = (totalChange / openPrice) * 100;

    valEl.textContent   = '$' + fmt(price);
    deltaEl.textContent = (totalChange >= 0 ? '+$' : '-$') + fmt(Math.abs(totalChange));
    pctEl.textContent   = '(' + (totalPct >= 0 ? '+' : '') + totalPct.toFixed(2) + '%)';
    arrowEl.textContent = isUp ? '▲' : '▼';
    arrowEl.style.color = isUp ? '#0cce6b' : '#ff4e42';

    var cls = isUp ? 'price-up' : 'price-down';
    deltaEl.className = 'price-delta ' + cls;
    pctEl.className   = 'price-delta ' + cls;
    document.querySelectorAll('#price-spark-grad stop').forEach(function (s) {
      s.setAttribute('stop-color', isUp ? '#0cce6b' : '#ff4e42');
    });
    lineEl.setAttribute('stroke', isUp ? '#0cce6b' : '#ff4e42');

    card.classList.remove('is-flash-up', 'is-flash-down');
    void card.offsetWidth;
    card.classList.add(isUp ? 'is-flash-up' : 'is-flash-down');

    updEl.textContent = 'Updated just now';
    redrawSpark();
  }

  redrawSpark();
  setInterval(updatePrice, 3000);
})();
```

### 17. File Extension Badge

**Type:** Pure CSS
**Description:** Two adjacent flex blocks — colored extension + white filename. Color is the identifier; nothing else is needed. Hover lifts the whole card off the surface the way you pick up a real file.

**HTML:**
```html
<div class="fx-stage">
  <div class="fx-badge" style="--fx-color:#e84040">
    <div class="fx-ext">PDF</div>
    <div class="fx-info">
      <div class="fx-name">annual-report-2025.pdf</div>
      <div class="fx-meta">2.4 MB · Updated Mar 14</div>
    </div>
  </div>
  <div class="fx-badge" style="--fx-color:#1e8f4a">
    <div class="fx-ext">SVG</div>
    <div class="fx-info">
      <div class="fx-name">logo-lockup-final.svg</div>
      <div class="fx-meta">18 KB · Vector · Scalable</div>
    </div>
  </div>
  <div class="fx-badge" style="--fx-color:#1d6abf">
    <div class="fx-ext">MP3</div>
    <div class="fx-info">
      <div class="fx-name">episode-42-interview.mp3</div>
      <div class="fx-meta">48 MB · 52 min 18 sec</div>
    </div>
  </div>
  <div class="fx-badge" style="--fx-color:#6b3aa0">
    <div class="fx-ext">ZIP</div>
    <div class="fx-info">
      <div class="fx-name">source-assets-v3.zip</div>
      <div class="fx-meta">340 MB · 1,284 files</div>
    </div>
  </div>
  <div class="fx-badge" style="--fx-color:#c87820">
    <div class="fx-ext">CSV</div>
    <div class="fx-info">
      <div class="fx-name">q1-export-raw.csv</div>
      <div class="fx-meta">6.1 MB · 88,412 rows</div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.fx-stage {
  background: #f0f2f5;
  padding: 50px 40px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
  min-height: 380px;
}
.fx-badge {
  display: inline-flex;
  align-items: stretch;
  overflow: hidden;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  cursor: default;
  transition: transform 0.2s, box-shadow 0.2s;
  text-decoration: none;
}
.fx-badge:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.14);
}
@media (prefers-reduced-motion: reduce) {
  .fx-badge { transition: none; }
}
.fx-ext {
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 56px;
  background: var(--fx-color, #555);
  font-family: ui-monospace, "JetBrains Mono", monospace;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  flex-shrink: 0;
}
.fx-info {
  padding: 10px 16px;
  background: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}
.fx-name {
  font-family: ui-monospace, "JetBrains Mono", monospace;
  font-size: 13px;
  font-weight: 500;
  color: #1a1612;
  letter-spacing: -0.01em;
  line-height: 1;
}
.fx-meta {
  font-family: system-ui, "Bricolage Grotesque", sans-serif;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: #888;
  text-transform: uppercase;
  line-height: 1;
}
```

### 18. Dice Face

**Type:** CSS + JS
**Description:** A fair die with six possible states. Click to roll — the pip positions are correct, the animation is physical, the number updates. One honest square doing exactly one honest job.

**HTML:**
```html
<div class="die-stage">
  <div class="die-wrap">
    <div class="die-cube" id="die-cube">
      <div class="die-pip" data-pos="tl"></div>
      <div class="die-pip" data-pos="tc"></div>
      <div class="die-pip" data-pos="tr"></div>
      <div class="die-pip" data-pos="ml"></div>
      <div class="die-pip" data-pos="mc"></div>
      <div class="die-pip" data-pos="mr"></div>
      <div class="die-pip" data-pos="bl"></div>
      <div class="die-pip" data-pos="bc"></div>
      <div class="die-pip" data-pos="br"></div>
    </div>
  </div>
  <div class="die-face-num" id="die-face-num">—</div>
  <div class="die-caption">click the die to roll</div>
</div>
```

**CSS:**
```css
.die-stage {
  background: #fff;
  padding: 60px 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  min-height: 360px;
}
.die-wrap { perspective: 600px; }
.die-cube {
  width: 110px;
  height: 110px;
  background: #fff;
  border: 2.5px solid #1a1612;
  border-radius: 18px;
  display: grid;
  grid-template-areas:
    "tl tc tr"
    "ml mc mr"
    "bl bc br";
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  padding: 14px;
  cursor: pointer;
  box-shadow:
    4px 4px 0 #1a1612,
    5px 5px 8px rgba(0,0,0,0.12);
  transition: transform 0.15s, box-shadow 0.15s;
  position: relative;
  overflow: hidden;
}
.die-cube:active {
  transform: translate(3px, 3px);
  box-shadow: 1px 1px 0 #1a1612, 2px 2px 4px rgba(0,0,0,0.1);
}
.die-cube.is-rolling {
  animation: die-roll 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}
@keyframes die-roll {
  0%   { transform: rotate(0deg) scale(1); }
  20%  { transform: rotate(-8deg) scale(0.95); }
  50%  { transform: rotate(12deg) scale(0.92); }
  75%  { transform: rotate(-5deg) scale(0.97); }
  100% { transform: rotate(0deg) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .die-cube.is-rolling { animation: none; }
}
.die-pip {
  display: flex;
  align-items: center;
  justify-content: center;
}
.die-pip::after {
  content: '';
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: transparent;
  transition: background 0.2s;
}
.die-pip.is-on::after { background: #1a1612; }
.die-pip[data-pos="tl"] { grid-area: tl; }
.die-pip[data-pos="tc"] { grid-area: tc; }
.die-pip[data-pos="tr"] { grid-area: tr; }
.die-pip[data-pos="ml"] { grid-area: ml; }
.die-pip[data-pos="mc"] { grid-area: mc; }
.die-pip[data-pos="mr"] { grid-area: mr; }
.die-pip[data-pos="bl"] { grid-area: bl; }
.die-pip[data-pos="bc"] { grid-area: bc; }
.die-pip[data-pos="br"] { grid-area: br; }
.die-caption {
  font-family: system-ui, "Bricolage Grotesque", sans-serif;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #aaa;
  text-align: center;
}
.die-face-num {
  font-family: Georgia, "Fraunces", serif;
  font-size: 48px;
  font-style: italic;
  font-weight: 300;
  color: #1a1612;
  line-height: 1;
  text-align: center;
}
```

**JS:**
```js
// Click the die to roll. Pip positions per face are encoded as
// arrays of grid-area names; the .is-on class lights up matching pips.
var dieFaces = {
  1: ['mc'],
  2: ['tr', 'bl'],
  3: ['tr', 'mc', 'bl'],
  4: ['tl', 'tr', 'bl', 'br'],
  5: ['tl', 'tr', 'mc', 'bl', 'br'],
  6: ['tl', 'tr', 'ml', 'mr', 'bl', 'br']
};
var dieCube    = document.getElementById('die-cube');
var dieFaceNum = document.getElementById('die-face-num');
var dieRolling = false;

function dieSetFace(n) {
  var pips = dieFaces[n];
  dieCube.querySelectorAll('.die-pip').forEach(function (p) {
    p.classList.toggle('is-on', pips.indexOf(p.dataset.pos) !== -1);
  });
  dieFaceNum.textContent = n;
}

if (dieCube) {
  dieCube.addEventListener('click', function () {
    if (dieRolling) return;
    dieRolling = true;
    dieCube.classList.add('is-rolling');
    setTimeout(function () {
      var n = Math.floor(Math.random() * 6) + 1;
      dieSetFace(n);
      dieCube.classList.remove('is-rolling');
      dieRolling = false;
    }, 280);
  });
}
```

### 19. Signal Bars

**Type:** Pure CSS
**Description:** Four rectangles of increasing height — possibly the most iconic data visualization ever designed. Confidence, signal, relevance — whatever the product needs. Hover fills all bars to maximum.

**HTML:**
```html
<div class="sig-stage">
  <div class="sig-badge">
    <div class="sig-bars-group">
      <div class="sig-bar sig-active"></div>
      <div class="sig-bar sig-active"></div>
      <div class="sig-bar sig-active"></div>
      <div class="sig-bar sig-active"></div>
    </div>
    <div class="sig-info">
      <div class="sig-strength">Excellent</div>
      <div class="sig-label">Confidence · 4 / 4</div>
    </div>
  </div>

  <div class="sig-mini-set">
    <div class="sig-row-mini">
      <div class="sig-bars-mini">
        <div class="sig-bar sig-active"></div>
        <div class="sig-bar sig-active"></div>
        <div class="sig-bar sig-active"></div>
        <div class="sig-bar sig-inactive"></div>
      </div>
      <div class="sig-name-mini">Good · 3/4</div>
    </div>
    <div class="sig-row-mini">
      <div class="sig-bars-mini">
        <div class="sig-bar sig-active"></div>
        <div class="sig-bar sig-active"></div>
        <div class="sig-bar sig-inactive"></div>
        <div class="sig-bar sig-inactive"></div>
      </div>
      <div class="sig-name-mini">Fair · 2/4</div>
    </div>
    <div class="sig-row-mini">
      <div class="sig-bars-mini">
        <div class="sig-bar sig-active"></div>
        <div class="sig-bar sig-inactive"></div>
        <div class="sig-bar sig-inactive"></div>
        <div class="sig-bar sig-inactive"></div>
      </div>
      <div class="sig-name-mini">Weak · 1/4</div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.sig-stage {
  background: #f5f4f2;
  padding: 60px 48px;
  display: flex;
  flex-direction: column;
  gap: 36px;
  align-items: flex-start;
  min-height: 360px;
}
.sig-badge {
  display: inline-flex;
  align-items: flex-end;
  gap: 4px;
  padding: 16px 20px 14px;
  background: white;
  border: 1px solid #e0ddd8;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  cursor: pointer;
  position: relative;
}
.sig-badge:hover .sig-bar { background: #1a1612 !important; }
.sig-bars-group {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  margin-right: 14px;
}
.sig-bar {
  width: 8px;
  border-radius: 1px;
  transition: background 0.2s, height 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.sig-bars-group .sig-bar:nth-child(1) { height: 10px; }
.sig-bars-group .sig-bar:nth-child(2) { height: 18px; }
.sig-bars-group .sig-bar:nth-child(3) { height: 26px; }
.sig-bars-group .sig-bar:nth-child(4) { height: 34px; }
.sig-active   { background: #1a1612; }
.sig-inactive { background: #dddbd6; }
.sig-info {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 2px;
}
.sig-strength {
  font-family: Georgia, "Fraunces", serif;
  font-size: 20px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.01em;
  color: #1a1612;
}
.sig-label {
  font-family: system-ui, "Bricolage Grotesque", sans-serif;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #4a4239;
}
.sig-mini-set {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 4px;
}
.sig-row-mini {
  display: flex;
  align-items: center;
  gap: 12px;
}
.sig-bars-mini {
  display: flex;
  align-items: flex-end;
  gap: 2px;
}
.sig-bars-mini .sig-bar { width: 5px; }
.sig-bars-mini .sig-bar:nth-child(1) { height: 6px; }
.sig-bars-mini .sig-bar:nth-child(2) { height: 10px; }
.sig-bars-mini .sig-bar:nth-child(3) { height: 14px; }
.sig-bars-mini .sig-bar:nth-child(4) { height: 18px; }
.sig-name-mini {
  font-family: system-ui, "Bricolage Grotesque", sans-serif;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: #4a4239;
  text-transform: uppercase;
}
@media (prefers-reduced-motion: reduce) {
  .sig-bar { transition: none; }
}
```

### 20. Reading Time Indicator

**Type:** Pure CSS
**Description:** Three states — not started, in progress, done. A 2px bar at the bottom fills to 100% on hover so the user can see what completion looks like. Clean type, no decoration.

**HTML:**
```html
<div class="read-stage">
  <div class="read-stack">
    <div class="read-badge" style="--read-progress: 0%">
      <span class="read-icon">⌛</span>
      <div class="read-main">
        <div class="read-duration">2 min</div>
        <div class="read-label">reading time</div>
      </div>
      <div class="read-divider"></div>
      <div class="read-status read-status-unread"><span class="read-dot"></span>Not started</div>
    </div>

    <div class="read-badge" style="--read-progress: 55%">
      <span class="read-icon">⌛</span>
      <div class="read-main">
        <div class="read-duration">7 min</div>
        <div class="read-label">reading time</div>
      </div>
      <div class="read-divider"></div>
      <div class="read-status read-status-progress"><span class="read-dot"></span>In progress</div>
    </div>

    <div class="read-badge" style="--read-progress: 100%">
      <span class="read-icon">⌛</span>
      <div class="read-main">
        <div class="read-duration">14 min</div>
        <div class="read-label">reading time</div>
      </div>
      <div class="read-divider"></div>
      <div class="read-status read-status-done"><span class="read-dot"></span>Finished</div>
    </div>

    <div class="read-hint">↑ hover any badge to complete it</div>
  </div>
</div>
```

**CSS:**
```css
.read-stage {
  background: #fafaf7;
  padding: 60px 48px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 360px;
}
.read-stack {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
}
.read-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px 10px 12px;
  border: 1.5px solid #1a1612;
  font-family: system-ui, "Bricolage Grotesque", sans-serif;
  position: relative;
  overflow: hidden;
  cursor: default;
}
.read-badge::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  background: #1a1612;
  width: var(--read-progress, 0%);
  transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.read-badge:hover::after { width: 100% !important; }
@media (prefers-reduced-motion: reduce) {
  .read-badge::after { transition: none; }
}
.read-icon {
  font-size: 16px;
  line-height: 1;
  flex-shrink: 0;
}
.read-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.read-duration {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #1a1612;
  line-height: 1;
}
.read-label {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #4a4239;
  line-height: 1;
}
.read-divider {
  width: 1px;
  height: 28px;
  background: #cfc6b1;
  flex-shrink: 0;
}
.read-status {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1.2;
}
.read-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  vertical-align: middle;
  margin-right: 4px;
  margin-bottom: 1px;
}
.read-status-done { color: #1d8f4a; }
.read-status-progress { color: #b8442d; }
.read-status-unread { color: #aaa; }
.read-hint {
  font-family: system-ui, "Bricolage Grotesque", sans-serif;
  font-size: 9px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #bbb;
  text-align: center;
  margin-top: 8px;
}
```

### 21. Aurora Status

**Type:** Pure CSS
**Description:** Status pill that breathes. Four pools of color drift behind a frosted lens; their hues rotate continuously through the spectrum. For loading, streaming, thinking — when text alone is not enough.

**HTML:**
```html
<div class="aur-stage">
  <div class="aur-stars"></div>
  <div class="aur-badge">
    <div class="aur-bg"></div>
    <span class="aur-spinner">
      <svg viewBox="0 0 24 24" aria-hidden="true">
        <circle cx="12" cy="12" r="9" fill="none" stroke="rgba(255,255,255,0.2)" stroke-width="2"/>
        <circle cx="12" cy="12" r="9" fill="none" stroke="white" stroke-width="2" stroke-dasharray="14 42" stroke-linecap="round"/>
      </svg>
    </span>
    <div class="aur-text">
      <div class="aur-label">Synthesizing</div>
      <div class="aur-detail">Drafting response · 73%</div>
    </div>
  </div>
  <div class="aur-caption">animation runs continuously — no hover required</div>
</div>
```

**CSS:**
```css
.aur-stage {
  background: radial-gradient(ellipse at center, #0a1438 0%, #04081e 80%);
  padding: 80px 40px;
  min-height: 540px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  position: relative;
}
.aur-stars {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 20% 30%, white, transparent),
    radial-gradient(1px 1px at 60% 70%, white, transparent),
    radial-gradient(1px 1px at 80% 10%, white, transparent),
    radial-gradient(1px 1px at 90% 60%, white, transparent),
    radial-gradient(1px 1px at 10% 90%, white, transparent),
    radial-gradient(1px 1px at 50% 20%, white, transparent),
    radial-gradient(1px 1px at 30% 65%, white, transparent),
    radial-gradient(1.5px 1.5px at 75% 40%, white, transparent),
    radial-gradient(1px 1px at 40% 85%, white, transparent),
    radial-gradient(1.5px 1.5px at 15% 50%, white, transparent),
    radial-gradient(1.5px 1.5px at 85% 80%, white, transparent);
  opacity: 0.65;
  pointer-events: none;
}
.aur-stars::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 25% 70%, rgba(120, 200, 255, 0.08), transparent 60%),
    radial-gradient(circle at 75% 30%, rgba(180, 120, 255, 0.08), transparent 60%);
}
.aur-badge {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 18px 32px;
  border-radius: 999px;
  background: rgba(8, 12, 32, 0.55);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  box-shadow:
    0 20px 60px -10px rgba(0,0,0,0.65),
    inset 0 1px 0 rgba(255,255,255,0.12);
  z-index: 1;
}
.aur-bg {
  position: absolute;
  inset: -60%;
  z-index: -1;
  background:
    radial-gradient(circle at 20% 50%, #00ffaa 0%, transparent 38%),
    radial-gradient(circle at 70% 30%, #b04dff 0%, transparent 50%),
    radial-gradient(circle at 50% 80%, #00aaff 0%, transparent 45%),
    radial-gradient(circle at 90% 70%, #ff44aa 0%, transparent 40%);
  filter: blur(38px);
  animation: aur-drift 11s ease-in-out infinite, aur-hue 16s linear infinite;
}
@keyframes aur-drift {
  0%, 100% { transform: translate(0, 0) scale(1) rotate(0deg); }
  25% { transform: translate(7%, -5%) scale(1.08) rotate(18deg); }
  50% { transform: translate(-4%, 8%) scale(0.96) rotate(-12deg); }
  75% { transform: translate(5%, 5%) scale(1.04) rotate(8deg); }
}
@keyframes aur-hue { to { filter: blur(38px) hue-rotate(360deg); } }
@keyframes aur-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .aur-bg, .aur-spinner { animation: none; }
}
.aur-spinner {
  width: 28px;
  height: 28px;
  animation: aur-spin 1.6s linear infinite;
  position: relative;
  z-index: 1;
}
.aur-spinner svg { width: 100%; height: 100%; display: block; }
.aur-text {
  text-align: left;
  position: relative;
  z-index: 1;
}
.aur-label {
  font-family: "Italiana", Georgia, serif;
  font-size: 22px;
  letter-spacing: 0.04em;
  color: #fff;
  line-height: 1;
  margin-bottom: 3px;
}
.aur-detail {
  font-family: system-ui, "Bricolage Grotesque", sans-serif;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.72);
}
.aur-caption {
  font-family: system-ui, "Bricolage Grotesque", sans-serif;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.32);
  position: relative;
  z-index: 1;
}
```

### 22. Vaporwave Chrome

**Type:** Pure CSS
**Description:** Release channel as marquee. Chrome lettering over a synthwave horizon, ticker tape reminding you exactly what kind of trouble you are in. The sun is striped. The grid recedes. The warning never stops scrolling.

**HTML:**
```html
<div class="vapor-stage">
  <div class="vapor-sun"></div>
  <div class="vapor-grid"></div>
  <div class="vapor-card">
    <div class="vapor-corner vapor-tl"></div>
    <div class="vapor-corner vapor-tr"></div>
    <div class="vapor-corner vapor-bl"></div>
    <div class="vapor-corner vapor-br"></div>

    <div class="vapor-eyebrow">▼ RELEASE CHANNEL ▼</div>
    <div class="vapor-chrome">BETA</div>
    <div class="vapor-divider"></div>
    <div class="vapor-version">v 4.18.2 // BUILD 26·05·13</div>

    <div class="vapor-marquee">
      <div class="vapor-marquee-track">
        <span>UNSTABLE</span><span>·</span>
        <span>FOR INTERNAL USE</span><span>·</span>
        <span>EXPECT TURBULENCE</span><span>·</span>
        <span>NOT FOR PRODUCTION</span><span>·</span>
        <span>UNSTABLE</span><span>·</span>
        <span>FOR INTERNAL USE</span><span>·</span>
        <span>EXPECT TURBULENCE</span><span>·</span>
        <span>NOT FOR PRODUCTION</span><span>·</span>
      </div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.vapor-stage {
  background: linear-gradient(180deg, #0c0628 0%, #2a0e58 45%, #c83a8c 100%);
  padding: 0;
  min-height: 540px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.vapor-sun {
  position: absolute;
  width: 340px;
  height: 340px;
  bottom: 30%;
  left: 50%;
  transform: translateX(-50%);
  background: radial-gradient(circle, #ffeb3b 0%, #ff6ec7 45%, transparent 75%);
  border-radius: 50%;
  filter: blur(1px);
  z-index: 0;
}
.vapor-sun::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: repeating-linear-gradient(0deg,
    transparent 0px, transparent 16px,
    #0c0628 16px, #0c0628 20px);
  -webkit-mask: linear-gradient(180deg, transparent 0%, transparent 52%, #000 62%);
  mask: linear-gradient(180deg, transparent 0%, transparent 52%, #000 62%);
}
.vapor-grid {
  position: absolute;
  bottom: 0;
  left: -50%;
  right: -50%;
  height: 55%;
  background:
    linear-gradient(180deg, transparent 0%, #0c0628 90%),
    repeating-linear-gradient(90deg, #ff37b3 0px, #ff37b3 1px, transparent 1px, transparent 60px),
    repeating-linear-gradient(0deg,  #ff37b3 0px, #ff37b3 1px, transparent 1px, transparent 30px);
  transform: perspective(420px) rotateX(58deg);
  transform-origin: bottom;
  z-index: 0;
}
.vapor-card {
  position: relative;
  z-index: 1;
  background: rgba(20, 8, 50, 0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 100, 200, 0.5);
  padding: 38px 44px 0;
  text-align: center;
  width: min(380px, calc(100% - 80px));
  margin: 60px auto;
}
.vapor-corner {
  position: absolute;
  width: 16px;
  height: 16px;
}
.vapor-tl { top: -1px; left: -1px; border-top: 2px solid #4dffff; border-left: 2px solid #4dffff; }
.vapor-tr { top: -1px; right: -1px; border-top: 2px solid #ff37b3; border-right: 2px solid #ff37b3; }
.vapor-bl { bottom: -1px; left: -1px; border-bottom: 2px solid #ff37b3; border-left: 2px solid #ff37b3; }
.vapor-br { bottom: -1px; right: -1px; border-bottom: 2px solid #4dffff; border-right: 2px solid #4dffff; }
.vapor-eyebrow {
  font-family: "Press Start 2P", ui-monospace, monospace;
  font-size: 8px;
  color: #ff77ee;
  letter-spacing: 0.18em;
  margin-bottom: 16px;
}
.vapor-chrome {
  font-family: "Major Mono Display", ui-monospace, monospace;
  font-size: 96px;
  line-height: 0.9;
  letter-spacing: 0.04em;
  background: linear-gradient(180deg,
    #ffffff 0%, #ffffff 18%, #ff8ce6 36%,
    #6cd1ff 50%, #ffffff 60%, #ff8ce6 78%, #4488cc 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter:
    drop-shadow(0 0 22px rgba(255, 100, 200, 0.7))
    drop-shadow(0 3px 4px rgba(0,0,0,0.5));
}
.vapor-divider {
  width: 70%;
  margin: 12px auto 14px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #ff77ee 30%, #4dffff 70%, transparent);
}
.vapor-version {
  font-family: "Major Mono Display", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: #6cd1ff;
  margin-bottom: 18px;
}
.vapor-marquee {
  overflow: hidden;
  border-top: 1px solid rgba(255,100,200,0.3);
  border-bottom: 1px solid rgba(255,100,200,0.3);
  padding: 8px 0;
  margin: 0 -44px;
}
.vapor-marquee-track {
  display: flex;
  gap: 14px;
  animation: vapor-scroll 14s linear infinite;
  white-space: nowrap;
  font-family: "Press Start 2P", ui-monospace, monospace;
  font-size: 7px;
  color: #ff8ce6;
  letter-spacing: 0.12em;
  width: max-content;
}
.vapor-marquee-track span { display: inline-block; }
@keyframes vapor-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .vapor-marquee-track { animation: none; }
}
```

### 23. Risograph Edition Label

**Type:** Pure CSS
**Description:** Two-color riso print laid down by drum and squeegee. Pink and cyan with the deliberate misregistration that gives the process its hand. Hover widens the offset.

**HTML:**
```html
<div class="riso-stage">
  <div class="riso-card">
    <div class="riso-corner riso-cy riso-tl"></div>
    <div class="riso-corner riso-mg riso-tl"></div>
    <div class="riso-corner riso-cy riso-tr"></div>
    <div class="riso-corner riso-mg riso-tr"></div>
    <div class="riso-corner riso-cy riso-bl"></div>
    <div class="riso-corner riso-mg riso-bl"></div>
    <div class="riso-corner riso-cy riso-br"></div>
    <div class="riso-corner riso-mg riso-br"></div>

    <div class="riso-blob"></div>
    <div class="riso-blob riso-cyan"></div>

    <div class="riso-content">
      <div class="riso-eyebrow">
        <span class="riso-pink">— SPECIAL EDITION —</span>
        <span class="riso-cyan-text">— SPECIAL EDITION —</span>
      </div>
      <div class="riso-title">
        <span class="riso-pink">LIMITED</span>
        <span class="riso-cyan-text">LIMITED</span>
      </div>
      <div class="riso-title">
        <span class="riso-pink">RUN '26</span>
        <span class="riso-cyan-text">RUN '26</span>
      </div>

      <div class="riso-divider"></div>

      <div class="riso-number">042 / 250</div>
      <div class="riso-detail">Two-color riso on Lessebo natural · 297 × 420 mm · signed by the artist</div>

      <div class="riso-stamp">PROOF</div>

      <div class="riso-meta-bottom">
        <span>STUDIO PRESS</span>
        <span>NORTH CAROLINA</span>
      </div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.riso-stage {
  background: #d6cdb4;
  padding: 50px 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 500px;
  position: relative;
}
.riso-card {
  background: #efe8d2;
  width: 100%;
  max-width: 340px;
  aspect-ratio: 3 / 4.1;
  padding: 30px 28px 24px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 18px 36px -14px rgba(40,30,10,0.4);
  font-family: "Space Mono", ui-monospace, monospace;
}
.riso-corner {
  position: absolute;
  width: 10px;
  height: 10px;
  mix-blend-mode: multiply;
  z-index: 2;
}
.riso-cy { background: #00b4d8; }
.riso-mg { background: #ff4d8d; transform: translate(2px, 2px); }
.riso-tl { top: 10px; left: 10px; }
.riso-tr { top: 10px; right: 10px; }
.riso-bl { bottom: 10px; left: 10px; }
.riso-br { bottom: 10px; right: 10px; }
.riso-blob {
  position: absolute;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: #ff4d8d;
  mix-blend-mode: multiply;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.7;
  z-index: 1;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.riso-blob.riso-cyan {
  background: #00b4d8;
  width: 200px;
  height: 200px;
  top: 60%;
  left: 38%;
  opacity: 0.55;
}
.riso-card:hover .riso-blob { transform: translate(-46%, -52%); }
.riso-card:hover .riso-blob.riso-cyan { transform: translate(-44%, -48%); }
.riso-content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.riso-eyebrow {
  font-size: 10px;
  letter-spacing: 0.32em;
  text-align: center;
  margin-bottom: 10px;
  position: relative;
  line-height: 1;
  height: 12px;
}
.riso-eyebrow .riso-pink,
.riso-eyebrow .riso-cyan-text {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  mix-blend-mode: multiply;
}
.riso-eyebrow .riso-pink { color: #ff4d8d; }
.riso-eyebrow .riso-cyan-text {
  color: #00b4d8;
  transform: translate(2px, -1px);
  transition: transform 0.4s;
}
.riso-card:hover .riso-eyebrow .riso-cyan-text { transform: translate(5px, -2px); }
.riso-title {
  font-family: "Archivo Black", system-ui, sans-serif;
  font-size: 46px;
  line-height: 0.92;
  letter-spacing: -0.025em;
  text-align: center;
  position: relative;
  margin-bottom: 4px;
  height: 42px;
}
.riso-title .riso-pink,
.riso-title .riso-cyan-text {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  mix-blend-mode: multiply;
}
.riso-title .riso-pink { color: #ff4d8d; }
.riso-title .riso-cyan-text {
  color: #00b4d8;
  transform: translate(3px, -1px);
  transition: transform 0.4s;
}
.riso-card:hover .riso-title .riso-cyan-text { transform: translate(7px, -3px); }
@media (prefers-reduced-motion: reduce) {
  .riso-blob, .riso-eyebrow .riso-cyan-text, .riso-title .riso-cyan-text { transition: none; }
}
.riso-divider {
  width: 100%;
  border-top: 1.5px dashed #ff4d8d;
  margin: 28px 0 16px;
  mix-blend-mode: multiply;
  position: relative;
  z-index: 2;
}
.riso-number {
  font-size: 22px;
  font-weight: 700;
  text-align: center;
  color: #1a1a1a;
  margin-bottom: 10px;
  z-index: 2;
  position: relative;
}
.riso-detail {
  font-size: 9px;
  line-height: 1.55;
  letter-spacing: 0.04em;
  text-align: center;
  color: #444;
  max-width: 220px;
  margin: 0 auto;
  z-index: 2;
  position: relative;
}
.riso-stamp {
  position: absolute;
  bottom: 50px;
  right: 18px;
  font-family: "Archivo Black", system-ui, sans-serif;
  font-size: 18px;
  letter-spacing: 0.06em;
  transform: rotate(-10deg);
  z-index: 3;
  line-height: 1;
  border: 2px solid #ff4d8d;
  padding: 6px 10px;
  color: #ff4d8d;
  mix-blend-mode: multiply;
}
.riso-meta-bottom {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid rgba(0,0,0,0.15);
  display: flex;
  justify-content: space-between;
  font-size: 8px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #555;
  position: relative;
  z-index: 2;
}
```

### 24. Wax Seal Authentication

**Type:** CSS + JS
**Description:** Embossed oxblood wax disc over a written page, anchored by a gold-leaf monogram. Click the seal to press — the disc compresses, holds, releases. Drips peek out from the base.

**HTML:**
```html
<div class="wax-stage">
  <div class="wax-paper">
    <div class="wax-watermark">CERTIFIED</div>
    <div class="wax-eyebrow">— Certificate of Authenticity —</div>
    <div class="wax-line-top">By my hand and seal, on this day —</div>
    <div class="wax-signature">A. Whitmore</div>

    <div class="wax-seal" id="wax-seal-1">
      <div class="wax-drip wax-drip-1"></div>
      <div class="wax-drip wax-drip-2"></div>
      <div class="wax-disc">
        <div class="wax-monogram">
          <svg viewBox="0 0 100 100" fill="none" aria-hidden="true">
            <circle cx="50" cy="50" r="34" stroke="#3a0d11" stroke-width="0.6" opacity="0.5"/>
            <circle cx="50" cy="50" r="28" stroke="#3a0d11" stroke-width="0.4" opacity="0.4"/>
            <path d="M 28 70 L 28 30 L 50 60 L 72 30 L 72 70" stroke="#3a0d11" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round"/>
            <circle cx="50" cy="14" r="1.6" fill="#3a0d11"/>
            <circle cx="50" cy="86" r="1.6" fill="#3a0d11"/>
            <circle cx="14" cy="50" r="1.6" fill="#3a0d11"/>
            <circle cx="86" cy="50" r="1.6" fill="#3a0d11"/>
          </svg>
        </div>
        <div class="wax-highlight"></div>
      </div>
    </div>

    <div class="wax-line-bottom">Document N° A-2026-0481</div>
  </div>
</div>
```

**CSS:**
```css
.wax-stage {
  background: linear-gradient(180deg, #ece2c8 0%, #ddd0b0 100%);
  padding: 48px 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 600px;
}
.wax-paper {
  background: #f6ecd2;
  width: 100%;
  max-width: 360px;
  padding: 44px 36px 36px;
  box-shadow:
    0 28px 50px -18px rgba(80,60,30,0.35),
    0 10px 18px -4px rgba(80,60,30,0.18),
    inset 0 0 0 1px rgba(120,90,50,0.12);
  position: relative;
  text-align: center;
  transform: rotate(-1.2deg);
}
.wax-watermark {
  position: absolute;
  top: 38%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-12deg);
  font-family: "Cinzel", Georgia, serif;
  font-size: 52px;
  font-weight: 700;
  color: rgba(120, 80, 40, 0.06);
  letter-spacing: 0.25em;
  pointer-events: none;
}
.wax-eyebrow {
  font-family: "Cinzel", Georgia, serif;
  font-size: 9px;
  letter-spacing: 0.4em;
  color: #8a6630;
  margin-bottom: 6px;
  position: relative;
}
.wax-line-top {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 13px;
  color: #5a4222;
  letter-spacing: 0.04em;
  margin-bottom: 2px;
  position: relative;
}
.wax-signature {
  font-family: "Tangerine", "Cormorant Garamond", cursive;
  font-size: 44px;
  color: #3a2814;
  line-height: 1;
  margin: 2px 0 22px;
  position: relative;
}
.wax-seal {
  width: 178px;
  height: 178px;
  margin: 0 auto 22px;
  position: relative;
  cursor: pointer;
}
.wax-disc {
  width: 100%;
  height: 100%;
  position: relative;
  border-radius: 50% 47% 53% 49% / 49% 52% 48% 51%;
  background: radial-gradient(circle at 32% 28%,
    #a83040 0%,
    #802028 22%,
    #4e121a 60%,
    #2a0a10 100%);
  box-shadow:
    inset 6px 8px 14px rgba(0,0,0,0.45),
    inset -3px -5px 10px rgba(255,180,180,0.12),
    inset 2px 2px 4px rgba(255,200,200,0.25),
    8px 12px 22px rgba(40,8,12,0.45),
    3px 5px 10px rgba(94,26,31,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.wax-seal.is-pressed .wax-disc {
  animation: wax-press 0.55s ease-out;
}
@keyframes wax-press {
  0%   { transform: scale(1); }
  25%  { transform: scale(0.94); }
  60%  { transform: scale(1.015); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .wax-seal.is-pressed .wax-disc { animation: none; }
}
.wax-disc::before {
  content: '';
  position: absolute;
  inset: 7px;
  border-radius: inherit;
  border: 1px solid rgba(255,180,180,0.12);
  pointer-events: none;
}
.wax-monogram {
  width: 64%;
  height: 64%;
  position: relative;
  z-index: 2;
  filter:
    drop-shadow(0 -1px 0.5px rgba(255,180,180,0.5))
    drop-shadow(0 1.5px 1px rgba(0,0,0,0.65));
}
.wax-monogram svg { width: 100%; height: 100%; display: block; }
.wax-highlight {
  position: absolute;
  top: 14%;
  left: 20%;
  width: 36%;
  height: 24%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255,200,200,0.5), transparent 70%);
  filter: blur(8px);
  pointer-events: none;
  z-index: 3;
}
.wax-drip {
  position: absolute;
  background: radial-gradient(circle at 30% 30%, #802028 0%, #4e121a 60%, #2a0a10 100%);
  box-shadow:
    inset 2px 3px 5px rgba(0,0,0,0.4),
    2px 4px 7px rgba(40,8,12,0.5);
  z-index: 1;
}
.wax-drip-1 {
  width: 20px;
  height: 26px;
  bottom: -6px;
  right: 26px;
  border-radius: 42% 58% 50% 50% / 60% 60% 40% 40%;
}
.wax-drip-2 {
  width: 12px;
  height: 14px;
  bottom: -10px;
  right: 14px;
  border-radius: 50%;
}
.wax-line-bottom {
  font-family: "Cinzel", Georgia, serif;
  font-size: 9px;
  letter-spacing: 0.32em;
  color: #6a4a22;
  text-transform: uppercase;
  position: relative;
  margin-top: 8px;
}
```

**JS:**
```js
// Click the wax seal to play the press animation. Toggling the class
// via re-flow ensures the keyframe restarts on every click instead of
// only firing once.
var seal = document.getElementById('wax-seal-1');
if (seal) {
  seal.addEventListener('click', function () {
    seal.classList.remove('is-pressed');
    void seal.offsetWidth;
    seal.classList.add('is-pressed');
  });
}
```

### 25. Conference Lanyard

**Type:** CSS + JS
**Description:** Physical badge with ambient sway, hanging from its own clip. Click flips it — front holds the role band and name, back holds the QR. Each card swings at a slightly different frequency.

**HTML:**
```html
<div class="conf-card" style="--conf-role-color: #b8442d">
  <div class="conf-lanyard">
    <svg viewBox="0 0 24 80" aria-hidden="true"><path d="M0 0 L8 80 M24 0 L16 80" stroke="#b8442d" stroke-width="6" fill="none"/></svg>
  </div>
  <div class="conf-clip"></div>
  <div class="conf-badge">
    <div class="conf-face conf-front">
      <span class="conf-role-band">Speaker</span>
      <div class="conf-name-block">
        <div class="conf-name">Amara <em>Okonkwo</em></div>
        <div class="conf-title-line">Principal · Form &amp; Function</div>
      </div>
      <div class="conf-footer-front">
        <span>#A-2026</span>
        <span>14:30 / Hall A</span>
      </div>
    </div>
    <div class="conf-face conf-back">
      <div class="conf-qr"></div>
      <div class="conf-back-name">Amara Okonkwo</div>
      <div class="conf-back-hint">Tap to view profile</div>
    </div>
  </div>
  <div class="conf-caption">Click to flip</div>
</div>
```

**CSS:**
```css
.conf-card {
  background: linear-gradient(170deg, #2a2724 0%, #1a1815 100%);
  padding: 100px 32px 60px;
  perspective: 1200px;
  text-align: center;
  position: relative;
  min-height: 500px;
}
.conf-lanyard {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 80px;
  z-index: 2;
  pointer-events: none;
}
.conf-lanyard svg {
  width: 100%;
  height: 100%;
  display: block;
}
.conf-clip {
  position: absolute;
  top: 94px;
  left: 50%;
  transform: translateX(-50%);
  width: 32px;
  height: 16px;
  background: linear-gradient(180deg, #d4d4d4 0%, #888 50%, #666 100%);
  border-radius: 2px;
  z-index: 3;
  box-shadow: 0 2px 4px rgba(0,0,0,0.4);
}
.conf-clip::before {
  content: '';
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 6px;
  border: 1.5px solid #333;
  border-radius: 50%;
}
.conf-badge {
  position: relative;
  width: 220px;
  margin: 110px auto 18px;
  aspect-ratio: 3 / 4.4;
  background: #f5f1e8;
  border-radius: 6px;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: top center;
  box-shadow:
    0 20px 30px -10px rgba(0,0,0,0.5),
    0 4px 8px rgba(0,0,0,0.3);
  cursor: pointer;
  animation: conf-sway 6s ease-in-out infinite;
}
@keyframes conf-sway {
  0%, 100% { transform: rotateZ(-1deg) rotateY(0deg); }
  50% { transform: rotateZ(1deg) rotateY(0deg); }
}
@media (prefers-reduced-motion: reduce) {
  .conf-badge { animation: none; }
}
.conf-card.is-flipped .conf-badge {
  transform: rotateY(180deg);
  animation: none;
}
.conf-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: 6px;
  overflow: hidden;
  padding: 22px 18px;
  display: flex;
  flex-direction: column;
}
.conf-front {
  background: linear-gradient(180deg, #f8f5ed 0%, #ede8da 100%);
}
.conf-back {
  background: var(--conf-role-color, #1a1815);
  color: #f5f1e8;
  transform: rotateY(180deg);
  align-items: center;
  justify-content: center;
}
.conf-role-band {
  display: inline-block;
  padding: 4px 10px;
  font-family: system-ui, sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  background: var(--conf-role-color, #1a1815);
  color: #f5f1e8;
  align-self: flex-start;
}
.conf-name-block { margin-top: auto; }
.conf-name {
  font-family: Georgia, "Fraunces", serif;
  font-size: 26px;
  line-height: 1;
  font-weight: 400;
  color: #1a1815;
  margin-bottom: 4px;
  letter-spacing: -0.02em;
}
.conf-name em {
  font-style: italic;
  font-weight: 300;
}
.conf-title-line {
  font-family: system-ui, sans-serif;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: #4a4239;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.conf-footer-front {
  border-top: 1px dashed #999;
  padding-top: 10px;
  display: flex;
  justify-content: space-between;
  font-family: system-ui, sans-serif;
  font-size: 8px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #4a4239;
}
.conf-qr {
  width: 80px;
  height: 80px;
  background-image:
    linear-gradient(0deg, var(--conf-role-color) 50%, transparent 50%),
    linear-gradient(90deg, var(--conf-role-color) 50%, transparent 50%);
  background-size: 8px 8px;
  background-color: #f5f1e8;
  border: 8px solid #f5f1e8;
  margin-bottom: 16px;
  box-shadow: 0 0 0 1px var(--conf-role-color);
}
.conf-back-name {
  font-family: Georgia, "Fraunces", serif;
  font-style: italic;
  font-size: 18px;
  margin-bottom: 4px;
}
.conf-back-hint {
  font-family: system-ui, sans-serif;
  font-size: 8px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  opacity: 0.6;
}
.conf-caption {
  margin-top: 8px;
  font-family: system-ui, sans-serif;
  color: rgba(255,255,255,0.4);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
```

**JS:**
```js
// Click the badge to flip front ↔ back. Stops the ambient sway while
// flipped so the back-side QR doesn't wobble away from the user's eye.
document.querySelectorAll('.conf-card').forEach(function (card) {
  var badge = card.querySelector('.conf-badge');
  if (!badge) return;
  badge.addEventListener('click', function () {
    card.classList.toggle('is-flipped');
  });
});
```

### 26. Botanical Membership Tier

**Type:** Pure CSS
**Description:** Membership tier grown as SVG flora — petals, leaves, and a budding center on warm paper. Hover sways the leaves outward and blooms the center. Italiana + Cormorant Garamond carry the names.

**HTML:**
```html
<div class="bot-card">
  <div class="bot-art">
    <svg viewBox="0 0 130 130" aria-hidden="true">
      <path d="M65 115 L65 70" stroke="#5a6a44" stroke-width="2.5" fill="none" class="bot-stem"/>
      <ellipse class="bot-leaf bot-leaf-1" cx="45" cy="90" rx="6" ry="15" fill="#7a8d5f" transform="rotate(-50 45 90)"/>
      <ellipse class="bot-leaf bot-leaf-2" cx="85" cy="90" rx="6" ry="15" fill="#7a8d5f" transform="rotate(50 85 90)"/>
      <g class="bot-petal">
        <ellipse cx="65" cy="40" rx="9" ry="14" fill="#d4a3c2"/>
        <ellipse cx="80" cy="55" rx="9" ry="14" fill="#d4a3c2" transform="rotate(72 80 55)"/>
        <ellipse cx="74" cy="74" rx="9" ry="14" fill="#d4a3c2" transform="rotate(144 74 74)"/>
        <ellipse cx="56" cy="74" rx="9" ry="14" fill="#d4a3c2" transform="rotate(216 56 74)"/>
        <ellipse cx="50" cy="55" rx="9" ry="14" fill="#d4a3c2" transform="rotate(288 50 55)"/>
        <circle cx="65" cy="55" r="6" fill="#e8c878"/>
      </g>
    </svg>
  </div>
  <div class="bot-tier-tag">Tier III</div>
  <div class="bot-tier-name">Bloom</div>
  <div class="bot-tier-desc">All collections, advance previews, and private viewings.</div>
</div>
```

**CSS:**
```css
.bot-card {
  text-align: center;
  padding: 36px 24px 30px;
  background: linear-gradient(180deg, #f0ede1 0%, #e6e2d1 100%);
  border: 1px solid rgba(66,82,54,0.2);
  border-radius: 4px;
  position: relative;
  cursor: pointer;
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.5s;
  min-height: 320px;
  max-width: 240px;
  margin: 24px auto;
}
.bot-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 40px -16px rgba(66, 82, 54, 0.25);
}
.bot-art {
  width: 130px;
  height: 130px;
  margin: 0 auto 20px;
}
.bot-art svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.bot-art .bot-leaf,
.bot-art .bot-petal,
.bot-art .bot-stem {
  transition: transform 1.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-origin: 50% 100%;
}
.bot-card:hover .bot-art .bot-leaf-1 { transform: rotate(-6deg) translateY(-2px); }
.bot-card:hover .bot-art .bot-leaf-2 { transform: rotate(6deg) translateY(-2px); }
.bot-card:hover .bot-art .bot-petal {
  transform-origin: 65px 55px;
  transform: scale(1.1);
}
@media (prefers-reduced-motion: reduce) {
  .bot-art .bot-leaf, .bot-art .bot-petal { transition: none; }
}
.bot-tier-tag {
  font-family: "Italiana", Georgia, serif;
  color: #6b7a52;
  font-size: 10px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.bot-tier-name {
  font-family: "Cormorant Garamond", Georgia, serif;
  color: #2d3a22;
  font-size: 26px;
  font-style: italic;
  font-weight: 400;
  line-height: 1;
  margin-bottom: 12px;
}
.bot-tier-desc {
  font-family: "Cormorant Garamond", Georgia, serif;
  color: #6b7a52;
  font-size: 13px;
  line-height: 1.5;
  padding-top: 12px;
  border-top: 1px solid rgba(66,82,54,0.2);
}
```

### 27. Cyberpunk Glitch Notification

**Type:** CSS + JS
**Description:** Notification counter with perpetual chromatic aberration. Hover triggers a full RGB-split glitch storm; click scrambles the digits hex-style before settling. Scanline drifts top-to-bottom continuously.

**HTML:**
```html
<div class="cyber-wrap">
  <div class="cyber-header">
    <span>NET://INCOMING [ACTIVE]</span>
    <span>UPLINK <span class="cyber-blink">▮</span></span>
  </div>
  <div class="cyber-card cyber-urgent">
    <div class="cyber-scanline"></div>
    <div class="cyber-label">[alerts.crit]</div>
    <div class="cyber-count">03</div>
    <div class="cyber-meta"><span>system</span><span class="cyber-tag">PRIORITY</span></div>
  </div>
  <div class="cyber-card">
    <div class="cyber-scanline"></div>
    <div class="cyber-label">[unread.msg]</div>
    <div class="cyber-count">247</div>
    <div class="cyber-meta"><span>direct</span><span class="cyber-tag">+12 NEW</span></div>
  </div>
</div>
```

**CSS:**
```css
.cyber-wrap {
  background: #0a0e0a;
  padding: 36px 32px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.cyber-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg,
    transparent 0px, transparent 3px,
    rgba(0,255,140,0.025) 3px, rgba(0,255,140,0.025) 4px);
  pointer-events: none;
}
.cyber-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,0,140,0.1), transparent 50%),
    radial-gradient(circle at 70% 80%, rgba(0,255,200,0.1), transparent 50%);
  pointer-events: none;
}
.cyber-header {
  font-family: "VT323", ui-monospace, monospace;
  color: #00ff8c;
  font-size: 18px;
  display: flex;
  justify-content: space-between;
  letter-spacing: 0.05em;
  position: relative;
  z-index: 1;
}
.cyber-blink { animation: cyber-blink 1s steps(2) infinite; }
@keyframes cyber-blink { 50% { opacity: 0; } }
.cyber-card {
  background: rgba(10, 20, 14, 0.6);
  border: 1px solid #00ff8c;
  padding: 24px 22px;
  position: relative;
  transition: all 0.3s;
  cursor: pointer;
  z-index: 1;
}
.cyber-card::before {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  width: 12px;
  height: 12px;
  border-top: 2px solid #ff0099;
  border-left: 2px solid #ff0099;
}
.cyber-card::after {
  content: '';
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 12px;
  height: 12px;
  border-bottom: 2px solid #ff0099;
  border-right: 2px solid #ff0099;
}
.cyber-label {
  font-family: "Major Mono Display", ui-monospace, monospace;
  color: #00ff8c;
  font-size: 10px;
  letter-spacing: 0.25em;
  margin-bottom: 8px;
  text-transform: lowercase;
}
.cyber-count {
  font-family: "VT323", ui-monospace, monospace;
  color: #fff;
  font-size: 64px;
  line-height: 1;
  text-shadow:
    2px 0 #ff0099,
    -2px 0 #00d4ff,
    0 0 20px rgba(255,255,255,0.3);
  margin-bottom: 14px;
  transition: text-shadow 0.2s;
}
.cyber-card:hover .cyber-count {
  animation: cyber-glitch 0.4s infinite;
}
@keyframes cyber-glitch {
  0%   { text-shadow: 3px 0 #ff0099, -3px 0 #00d4ff, 0 0 20px rgba(255,255,255,0.5); transform: translateX(0); }
  25%  { text-shadow: -3px 0 #ff0099, 3px 0 #00d4ff; transform: translateX(-1px); }
  50%  { text-shadow: 3px 0 #ff0099, -3px 0 #00d4ff; transform: translateX(1px); }
  75%  { text-shadow: 0 3px #ff0099, 0 -3px #00d4ff; transform: translateX(0); }
  100% { text-shadow: 3px 0 #ff0099, -3px 0 #00d4ff; }
}
.cyber-meta {
  font-family: "VT323", ui-monospace, monospace;
  color: rgba(0,255,140,0.6);
  font-size: 14px;
  letter-spacing: 0.05em;
  border-top: 1px dashed rgba(0,255,140,0.3);
  padding-top: 10px;
  display: flex;
  justify-content: space-between;
}
.cyber-tag { color: #ff0099; }
.cyber-urgent {
  border-color: #ff0099;
  animation: cyber-urgent 2s ease-in-out infinite;
}
.cyber-urgent::before, .cyber-urgent::after {
  border-color: #00ff8c;
}
@keyframes cyber-urgent {
  0%, 100% { box-shadow: 0 0 0 rgba(255,0,153,0.4); }
  50% { box-shadow: 0 0 20px rgba(255,0,153,0.4); }
}
.cyber-scanline {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #00ff8c, transparent);
  opacity: 0.6;
  animation: cyber-scan 3s linear infinite;
}
@keyframes cyber-scan {
  0% { top: 0; }
  100% { top: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .cyber-blink, .cyber-scanline, .cyber-urgent { animation: none; }
  .cyber-card:hover .cyber-count { animation: none; }
}
```

**JS:**
```js
// Click any counter card to scramble the digits hex-style before
// settling back to the real value. Mirrors the glitch aesthetic
// applied via CSS on hover.
document.querySelectorAll('.cyber-card').forEach(function (card) {
  card.addEventListener('click', function () {
    var countEl = card.querySelector('.cyber-count');
    var original = countEl.textContent;
    var chars = '0123456789ABCDEF';
    var i = 0;
    var scramble = setInterval(function () {
      countEl.textContent = Array.from(original).map(function (c) {
        return /[\dA-Za-z]/.test(c)
          ? chars[Math.floor(Math.random() * chars.length)]
          : c;
      }).join('');
      if (++i > 8) {
        clearInterval(scramble);
        countEl.textContent = original;
      }
    }, 50);
  });
});
```

### 28. Art Deco Medallion

**Type:** Pure CSS
**Description:** Conic-gradient brass ring rotating against a slow ray pattern. Crest in Cinzel display type. Sweep of shine on hover, gentle lift on the whole medallion.

**HTML:**
```html
<div class="deco-wrap">
  <div class="deco-medallion">
    <div class="deco-ring-outer"></div>
    <div class="deco-rays"></div>
    <div class="deco-ring-inner">
      <div class="deco-crest">
        <svg viewBox="0 0 50 50" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
          <path d="M25 5 L29 18 L43 18 L32 26 L36 40 L25 32 L14 40 L18 26 L7 18 L21 18 Z" fill="currentColor" fill-opacity="0.15"/>
          <path d="M25 5 L29 18 L43 18 L32 26 L36 40 L25 32 L14 40 L18 26 L7 18 L21 18 Z"/>
        </svg>
        <div class="deco-label">First Star</div>
      </div>
    </div>
    <div class="deco-shine"></div>
  </div>
  <div class="deco-name">Centurion</div>
  <div class="deco-annotation">For one hundred contributions of merit</div>
</div>
```

**CSS:**
```css
.deco-wrap {
  background: radial-gradient(ellipse at center, #2a1d12 0%, #14100a 100%);
  padding: 60px 40px;
  text-align: center;
  min-height: 360px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.deco-medallion {
  width: 200px;
  height: 200px;
  margin: 0 auto 28px;
  position: relative;
  cursor: pointer;
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.deco-medallion:hover { transform: translateY(-8px) scale(1.04); }
.deco-ring-outer {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    conic-gradient(from 0deg,
      #d4af5a 0deg, #f5d782 8deg, #d4af5a 16deg,
      #8b6f2a 24deg, #d4af5a 32deg, #f5d782 40deg, #d4af5a 48deg,
      #8b6f2a 56deg, #d4af5a 64deg, #f5d782 72deg, #d4af5a 80deg,
      #8b6f2a 88deg, #d4af5a 96deg, #f5d782 104deg, #d4af5a 112deg,
      #8b6f2a 120deg, #d4af5a 128deg, #f5d782 136deg, #d4af5a 144deg,
      #8b6f2a 152deg, #d4af5a 160deg, #f5d782 168deg, #d4af5a 176deg,
      #8b6f2a 184deg, #d4af5a 192deg, #f5d782 200deg, #d4af5a 208deg,
      #8b6f2a 216deg, #d4af5a 224deg, #f5d782 232deg, #d4af5a 240deg,
      #8b6f2a 248deg, #d4af5a 256deg, #f5d782 264deg, #d4af5a 272deg,
      #8b6f2a 280deg, #d4af5a 288deg, #f5d782 296deg, #d4af5a 304deg,
      #8b6f2a 312deg, #d4af5a 320deg, #f5d782 328deg, #d4af5a 336deg,
      #8b6f2a 344deg, #d4af5a 360deg);
  animation: deco-rotate 24s linear infinite;
  box-shadow: 0 0 30px rgba(212,175,90,0.3), inset 0 0 20px rgba(0,0,0,0.4);
}
@keyframes deco-rotate { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .deco-ring-outer, .deco-rays { animation: none; }
}
.deco-ring-inner {
  position: absolute;
  inset: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #3a2614 0%, #1c1408 100%);
  border: 2px solid #8b6f2a;
  box-shadow: inset 0 4px 12px rgba(0,0,0,0.6), inset 0 -2px 6px rgba(212,175,90,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}
.deco-rays {
  position: absolute;
  inset: 14px;
  border-radius: 50%;
  background:
    conic-gradient(from 0deg,
      transparent 0deg, rgba(212,175,90,0.15) 5deg, transparent 10deg,
      transparent 30deg, rgba(212,175,90,0.15) 35deg, transparent 40deg,
      transparent 60deg, rgba(212,175,90,0.15) 65deg, transparent 70deg,
      transparent 90deg, rgba(212,175,90,0.15) 95deg, transparent 100deg,
      transparent 120deg, rgba(212,175,90,0.15) 125deg, transparent 130deg,
      transparent 150deg, rgba(212,175,90,0.15) 155deg, transparent 160deg,
      transparent 180deg, rgba(212,175,90,0.15) 185deg, transparent 190deg,
      transparent 210deg, rgba(212,175,90,0.15) 215deg, transparent 220deg,
      transparent 240deg, rgba(212,175,90,0.15) 245deg, transparent 250deg,
      transparent 270deg, rgba(212,175,90,0.15) 275deg, transparent 280deg,
      transparent 300deg, rgba(212,175,90,0.15) 305deg, transparent 310deg,
      transparent 330deg, rgba(212,175,90,0.15) 335deg, transparent 340deg,
      transparent 360deg);
  animation: deco-rotate 60s linear infinite reverse;
  pointer-events: none;
}
.deco-crest {
  position: relative;
  z-index: 2;
  text-align: center;
  color: #d4af5a;
}
.deco-crest svg {
  width: 50px;
  height: 50px;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
}
.deco-label {
  font-family: "Cinzel", Georgia, serif;
  font-size: 9px;
  letter-spacing: 0.32em;
  margin-top: 6px;
  text-transform: uppercase;
  color: #e8c878;
}
.deco-shine {
  position: absolute;
  top: 14px;
  left: 14px;
  width: calc(100% - 28px);
  height: calc(100% - 28px);
  border-radius: 50%;
  background: linear-gradient(135deg, transparent 30%, rgba(255,255,255,0.4) 50%, transparent 70%);
  opacity: 0;
  transition: opacity 0.6s, transform 0.8s;
  transform: translateX(-100%);
  pointer-events: none;
}
.deco-medallion:hover .deco-shine {
  opacity: 1;
  transform: translateX(100%);
}
.deco-name {
  font-family: "Cinzel", Georgia, serif;
  color: #d4af5a;
  font-size: 14px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.deco-annotation {
  font-family: "Cormorant Garamond", Georgia, serif;
  color: rgba(212,175,90,0.65);
  font-size: 14px;
  font-style: italic;
  letter-spacing: 0.02em;
}
```

### 29. Brutalist Status Matrix

**Type:** Pure CSS
**Description:** Monospaced status grid — operational, degraded, outage, maintenance, deploying, queued. Inverts on hover. Live pulse on healthy systems, blink on outages, scanline on deploys.

**HTML:**
```html
<div class="brut-grid">
  <div class="brut-row">
    <span class="brut-badge brut-operational"><span class="brut-dot"></span>Operational</span>
    <div class="brut-service">api.gateway.production</div>
    <div class="brut-meta">us-east-1 · 99.984% / 30d</div>
    <div class="brut-time">↑ 47d 12h 04m · last incident: 2026-03-29</div>
  </div>
  <div class="brut-row">
    <span class="brut-badge brut-degraded"><span class="brut-dot"></span>Degraded</span>
    <div class="brut-service">search.indexer.eu</div>
    <div class="brut-meta">eu-west-2 · 96.412% / 24h</div>
    <div class="brut-time">P95 latency 840ms · ETA recovery 18m</div>
  </div>
  <div class="brut-row">
    <span class="brut-badge brut-outage"><span class="brut-dot"></span>Outage</span>
    <div class="brut-service">media.transcoder.bg</div>
    <div class="brut-meta">ap-south-1 · 00.000% / 12m</div>
    <div class="brut-time">incident #4119 · on-call: m.tanaka</div>
  </div>
  <div class="brut-row">
    <span class="brut-badge brut-deploy"><span class="brut-dot"></span>Deploying</span>
    <div class="brut-service">auth.service.canary</div>
    <div class="brut-meta">v4.18.2 · 38% traffic</div>
    <div class="brut-time">commit a1f9c2e · rollback ready</div>
  </div>
</div>
```

**CSS:**
```css
.brut-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  border: 2px solid #000;
  background: #f4f4f0;
  font-family: ui-monospace, "JetBrains Mono", monospace;
}
.brut-row {
  border-right: 2px solid #000;
  border-bottom: 2px solid #000;
  padding: 24px 20px;
  background: #fff;
  cursor: pointer;
  transition: background 0.2s;
}
.brut-row:hover { background: #000; color: #fff; }
.brut-row:hover .brut-time { color: #fff; }
.brut-row:hover .brut-meta { color: rgba(255,255,255,0.6); }
.brut-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 2px solid currentColor;
  margin-bottom: 16px;
}
.brut-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}
.brut-operational { color: #1d8f4a; background: #ddf5e3; }
.brut-operational .brut-dot { animation: brut-pulse 1.6s infinite; }
.brut-degraded { color: #b8761c; background: #fdf2d8; }
.brut-outage { color: #c0241c; background: #fde0dd; }
.brut-outage .brut-dot { animation: brut-blink 0.5s infinite; }
.brut-deploy { color: #1c4a9e; background: #dde6f7; position: relative; overflow: hidden; }
.brut-deploy::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(28,74,158,0.3), transparent);
  animation: brut-scan 1.5s linear infinite;
}
@keyframes brut-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}
@keyframes brut-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
@keyframes brut-scan {
  0% { left: -100%; }
  100% { left: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .brut-operational .brut-dot,
  .brut-outage .brut-dot,
  .brut-deploy::before { animation: none; }
}
.brut-service {
  font-family: Georgia, "Fraunces", serif;
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 4px;
  letter-spacing: -0.01em;
}
.brut-meta {
  font-size: 10px;
  letter-spacing: 0.08em;
  color: #888;
  text-transform: uppercase;
  transition: color 0.2s;
}
.brut-time {
  font-size: 10px;
  letter-spacing: 0.08em;
  color: #000;
  transition: color 0.2s;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed currentColor;
  opacity: 0.7;
}
```

### 30. Holographic Collectible

**Type:** Pure CSS
**Description:** Pentagonal collectible badge with a cursor-tracked conic-gradient foil and a tier glyph. The Mythic tier carries its own ambient pulse — visible across the room.

**HTML:**
```html
<div class="holo-card">
  <div class="holo-badge holo-mythic">
    <div class="holo-face holo-base"></div>
    <div class="holo-face holo-foil"></div>
    <div class="holo-face holo-sheen"></div>
    <div class="holo-face holo-edge"></div>
    <div class="holo-glyph">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
        <path d="M12 1l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z"/>
      </svg>
      <div class="holo-rarity">RARITY</div>
      <div class="holo-tier">MYTHIC</div>
    </div>
    <div class="holo-serial">#00007 / 00050</div>
  </div>
  <div class="holo-name">The Ascendant</div>
  <div class="holo-pop">POP 44</div>
</div>
```

**CSS:**
```css
.holo-card {
  background: radial-gradient(ellipse at 50% 50%, #0e0a1a 0%, #050208 100%);
  padding: 56px 40px;
  font-family: 'Geist Mono', ui-monospace, monospace;
  text-align: center;
  min-height: 360px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.holo-badge {
  width: 200px;
  height: 230px;
  margin: 0 auto 24px;
  position: relative;
  cursor: pointer;
  --mx: 50%;
  --my: 50%;
}
.holo-face {
  position: absolute;
  inset: 0;
  clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
}
.holo-base {
  background: linear-gradient(135deg, #1a1230 0%, #0a0815 100%);
  box-shadow: inset 0 0 20px rgba(255,255,255,0.05);
}
.holo-foil {
  background:
    conic-gradient(from var(--angle, 0deg) at var(--mx) var(--my),
      #ff0080, #ff8c00, #ffd700, #00ff88, #00bfff, #8a2be2, #ff0080);
  mix-blend-mode: screen;
  opacity: 0.75;
  transition: opacity 0.4s;
  filter: saturate(1.3) blur(0.4px);
}
.holo-sheen {
  background: radial-gradient(circle 80px at var(--mx) var(--my),
    rgba(255,255,255,0.6), transparent 70%);
  mix-blend-mode: overlay;
  opacity: 0;
  transition: opacity 0.4s;
}
.holo-edge {
  background: linear-gradient(135deg,
    rgba(255,215,140,0.6) 0%,
    rgba(180,140,255,0.4) 50%,
    rgba(120,200,255,0.6) 100%);
  clip-path: polygon(
    50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%,
    5% 27%, 7% 26%, 7% 74%, 50% 97%, 93% 74%, 93% 26%, 50% 3%
  );
}
.holo-badge:hover .holo-foil { opacity: 1; }
.holo-badge:hover .holo-sheen { opacity: 1; }
.holo-glyph {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  z-index: 2;
  text-shadow: 0 0 12px rgba(255,255,255,0.3);
  pointer-events: none;
}
.holo-glyph svg { width: 56px; height: 56px; margin-bottom: 8px; }
.holo-rarity {
  font-size: 10px;
  letter-spacing: 0.3em;
  opacity: 0.85;
  margin-bottom: 2px;
}
.holo-tier {
  font-size: 16px;
  letter-spacing: 0.18em;
  font-weight: 600;
}
.holo-serial {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 8px;
  letter-spacing: 0.2em;
  color: rgba(255,255,255,0.6);
  z-index: 2;
}
.holo-name {
  font-family: Georgia, serif;
  color: #f5f0e0;
  font-size: 20px;
  font-style: italic;
  margin-bottom: 4px;
}
.holo-pop {
  font-size: 10px;
  letter-spacing: 0.2em;
  color: rgba(255,255,255,0.4);
  text-transform: uppercase;
}
.holo-mythic .holo-base {
  animation: holo-mythic-pulse 3s ease-in-out infinite;
}
@keyframes holo-mythic-pulse {
  0%, 100% {
    box-shadow: inset 0 0 20px rgba(255,100,255,0.2),
                0 0 30px rgba(255,100,255,0.2);
  }
  50% {
    box-shadow: inset 0 0 40px rgba(255,100,255,0.5),
                0 0 60px rgba(255,100,255,0.4);
  }
}
@media (prefers-reduced-motion: reduce) {
  .holo-mythic .holo-base { animation: none; }
}
```

**JS:**
```js
// Cursor-tracked foil. Updates two CSS custom properties on the
// .holo-badge so the conic gradient and the sheen highlight follow
// the pointer. mouseleave resets so the badge isn't stuck mid-tilt.
document.querySelectorAll('.holo-badge').forEach(function (badge) {
  badge.addEventListener('mousemove', function (e) {
    var r = badge.getBoundingClientRect();
    var x = ((e.clientX - r.left) / r.width) * 100;
    var y = ((e.clientY - r.top) / r.height) * 100;
    badge.style.setProperty('--mx', x + '%');
    badge.style.setProperty('--my', y + '%');
    badge.style.setProperty('--angle', (x * 3.6) + 'deg');
  });
  badge.addEventListener('mouseleave', function () {
    badge.style.setProperty('--mx', '50%');
    badge.style.setProperty('--my', '50%');
  });
});
```

---
## 14 CSS Banners & Alerts

URL: https://codefronts.com/snippets/css-banners-alerts/
Description: Hand-coded CSS banner and alert patterns covering every notification surface a real product needs — dismissible alerts, sticky announcements, semantic status alerts, cookie consent, form validation, toasts, live-update banners, and promotional hero banners. Pure CSS plus scoped JS — no framework, semantic HTML, accessibility-first, copy-paste ready.
Demo count: 14

### 01. Dismissible CSS Alert with Close Button

**Type:** CSS + JS
**Description:** Four dismissible CSS alerts in a dark editorial magazine aesthetic — ink-on-paper texture, Playfair Display headlines, and four variant alerts (Critical / Dispatch / Verified / Memo) each with a unique colour story. Close buttons are bordered right-edge columns; dismissed alerts collapse via a smooth scaleY animation and can be restored from a footnote bar that lists what was removed. Playfair Display + DM Mono. Best for editorial magazines, content sites, admin notification trays, dashboard message centres.

**HTML:**
```html
<section class="ba-dis" aria-label="Dismissible CSS alert demo">
  <span class="section-label">— Alerts &amp; Dispatches —</span>

  <div class="alert alert--critical" data-ba-dis-alert="a1">
    <div class="alert-inner">
      <div class="alert-accent" aria-hidden="true"></div>
      <div class="alert-body">
        <span class="alert-tag">Critical · System</span>
        <div class="alert-divider" aria-hidden="true"></div>
        <p class="alert-headline">Authentication service is temporarily unavailable.</p>
        <p class="alert-text">Our engineers have identified the issue and are working to restore access. Estimated resolution in 12–18 minutes. Existing sessions remain active.</p>
      </div>
      <button class="alert-close" type="button" data-ba-dis-dismiss="a1" aria-label="Dismiss">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="square" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
      </button>
    </div>
  </div>

  <div class="alert alert--dispatch" data-ba-dis-alert="a2">
    <div class="alert-inner">
      <div class="alert-accent" aria-hidden="true"></div>
      <div class="alert-body">
        <span class="alert-tag">Dispatch · Notice</span>
        <div class="alert-divider" aria-hidden="true"></div>
        <p class="alert-headline">Scheduled maintenance window this Friday.</p>
        <p class="alert-text">The platform will undergo routine updates between 02:00–04:00 UTC. Some features may be temporarily inaccessible. No data loss is expected.</p>
      </div>
      <button class="alert-close" type="button" data-ba-dis-dismiss="a2" aria-label="Dismiss">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="square" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
      </button>
    </div>
  </div>

  <div class="alert alert--verified" data-ba-dis-alert="a3">
    <div class="alert-inner">
      <div class="alert-accent" aria-hidden="true"></div>
      <div class="alert-body">
        <span class="alert-tag">Verified · Confirmation</span>
        <div class="alert-divider" aria-hidden="true"></div>
        <p class="alert-headline">Your identity has been successfully verified.</p>
        <p class="alert-text">Two-factor authentication is now active on your account. You can manage your security preferences from the account dashboard.</p>
      </div>
      <button class="alert-close" type="button" data-ba-dis-dismiss="a3" aria-label="Dismiss">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="square" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
      </button>
    </div>
  </div>

  <div class="alert alert--memo" data-ba-dis-alert="a4">
    <div class="alert-inner">
      <div class="alert-accent" aria-hidden="true"></div>
      <div class="alert-body">
        <span class="alert-tag">Memo · General</span>
        <div class="alert-divider" aria-hidden="true"></div>
        <p class="alert-headline">New privacy policy takes effect July 1st.</p>
        <p class="alert-text">We've updated our terms of service to reflect recent regulatory changes. Please review the updated document before the effective date to remain compliant.</p>
      </div>
      <button class="alert-close" type="button" data-ba-dis-dismiss="a4" aria-label="Dismiss">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="square" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
      </button>
    </div>
  </div>

  <div class="restore-hint" data-ba-dis-restore aria-live="polite"></div>
</section>
```

**CSS:**
```css
/* ─── 01 Dismissible CSS Alert — editorial magazine aesthetic ──── */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;0,900;1,700&family=DM+Mono:wght@300;400;500&display=swap');

.ba-dis {
  --ba-dis-ink: #0d0d0d;
  --ba-dis-paper: #f5f0e8;
  --ba-dis-cream: #ede7d5;
  --ba-dis-accent-red: #c0392b;
  --ba-dis-accent-gold: #b8860b;
  --ba-dis-accent-teal: #1a7a6e;
  --ba-dis-accent-slate: #4a5568;
  --ba-dis-rule: #2d2d2d;

  position: relative;
  width: 100%;
  min-height: 540px;
  background: var(--ba-dis-paper);
  background-image: repeating-linear-gradient(0deg, transparent, transparent 28px, rgba(0,0,0,0.04) 28px, rgba(0,0,0,0.04) 29px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 48px 24px;
  font-family: 'DM Mono', monospace;
  box-sizing: border-box;
}
.ba-dis *, .ba-dis *::before, .ba-dis *::after { box-sizing: border-box; margin: 0; padding: 0; }

.ba-dis .alert { width: 100%; max-width: 680px; border-top: 3px solid var(--ba-dis-rule); border-bottom: 1px solid var(--ba-dis-rule); padding: 0; position: relative; overflow: hidden; transition: all 0.45s cubic-bezier(0.4, 0, 0.2, 1); transform-origin: top center; }
.ba-dis .alert.dismissed { opacity: 0; transform: scaleY(0); max-height: 0 !important; padding: 0; border-width: 0; margin: 0; pointer-events: none; }
.ba-dis .alert-inner { display: flex; align-items: stretch; gap: 0; }
.ba-dis .alert-accent { width: 6px; flex-shrink: 0; }
.ba-dis .alert-body { flex: 1; padding: 18px 20px; }
.ba-dis .alert-tag { font-family: 'DM Mono', monospace; font-size: 9px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; display: block; margin-bottom: 6px; opacity: 0.6; }
.ba-dis .alert-headline { font-family: 'Playfair Display', serif; font-size: 17px; font-weight: 700; line-height: 1.3; color: var(--ba-dis-ink); margin-bottom: 4px; }
.ba-dis .alert-text { font-size: 12px; line-height: 1.7; color: #444; font-weight: 300; }
.ba-dis .alert-close { flex-shrink: 0; width: 52px; display: flex; align-items: center; justify-content: center; cursor: pointer; border: none; background: transparent; border-left: 1px solid rgba(0,0,0,0.1); transition: background 0.2s ease; font-family: 'DM Mono', monospace; color: var(--ba-dis-ink); opacity: 0.45; padding: 0; }
.ba-dis .alert-close:hover { opacity: 1; background: rgba(0,0,0,0.05); }
.ba-dis .alert-close svg { width: 16px; height: 16px; }

.ba-dis .alert--critical { background: var(--ba-dis-ink); border-color: var(--ba-dis-accent-red); }
.ba-dis .alert--critical .alert-accent { background: var(--ba-dis-accent-red); }
.ba-dis .alert--critical .alert-tag { color: var(--ba-dis-accent-red); opacity: 0.8; }
.ba-dis .alert--critical .alert-headline { color: var(--ba-dis-paper); }
.ba-dis .alert--critical .alert-text { color: rgba(245,240,232,0.65); }
.ba-dis .alert--critical .alert-close { color: var(--ba-dis-paper); border-left-color: rgba(255,255,255,0.1); }

.ba-dis .alert--dispatch { background: var(--ba-dis-cream); border-color: var(--ba-dis-accent-gold); }
.ba-dis .alert--dispatch .alert-accent { background: var(--ba-dis-accent-gold); }
.ba-dis .alert--dispatch .alert-tag { color: var(--ba-dis-accent-gold); }

.ba-dis .alert--verified { background: #f0faf8; border-color: var(--ba-dis-accent-teal); }
.ba-dis .alert--verified .alert-accent { background: var(--ba-dis-accent-teal); }
.ba-dis .alert--verified .alert-tag { color: var(--ba-dis-accent-teal); }

.ba-dis .alert--memo { background: var(--ba-dis-paper); border-color: var(--ba-dis-accent-slate); }
.ba-dis .alert--memo .alert-accent { background: var(--ba-dis-accent-slate); }
.ba-dis .alert--memo .alert-tag { color: var(--ba-dis-accent-slate); }

.ba-dis .alert-divider { width: 24px; height: 1px; background: currentColor; opacity: 0.25; margin: 8px 0; }

.ba-dis .restore-hint { font-size: 10px; font-family: 'DM Mono', monospace; color: #999; letter-spacing: 0.12em; text-align: center; min-height: 20px; }
.ba-dis .restore-btn { background: none; border: none; cursor: pointer; color: var(--ba-dis-accent-teal); font-family: 'DM Mono', monospace; font-size: 10px; text-decoration: underline; letter-spacing: 0.12em; padding: 0; }

.ba-dis .section-label { font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: 0.3em; text-transform: uppercase; color: #aaa; align-self: flex-start; }

@media (prefers-reduced-motion: reduce) { .ba-dis .alert { transition: opacity 0.2s ease; } }
```

**JS:**
```js
(() => {
  // Scoped dismiss/restore wiring. Multiple instances of this demo can
  // coexist on one page — each tracks its own dismissed set bound to
  // the wrapper element. No global ids, no document-level listeners.
  const root = document.querySelector('.ba-dis');
  if (!root) return;
  const restore = root.querySelector('[data-ba-dis-restore]');
  const labels = { a1: 'Critical', a2: 'Dispatch', a3: 'Verified', a4: 'Memo' };
  const dismissed = {};

  function paintRestore() {
    const keys = Object.keys(dismissed);
    if (keys.length === 0) { restore.innerHTML = ''; return; }
    restore.innerHTML = 'Dismissed: ' + keys.map(k =>
      '<button class="restore-btn" type="button" data-ba-dis-restore-btn="' + k + '">' + labels[k] + '</button>'
    ).join(' · ');
  }

  root.addEventListener('click', (e) => {
    const dismissBtn = e.target.closest('[data-ba-dis-dismiss]');
    if (dismissBtn) {
      const id = dismissBtn.dataset.baDisDismiss;
      const el = root.querySelector('[data-ba-dis-alert="' + id + '"]');
      if (el) { el.classList.add('dismissed'); dismissed[id] = true; paintRestore(); }
      return;
    }
    const restoreBtn = e.target.closest('[data-ba-dis-restore-btn]');
    if (restoreBtn) {
      const id = restoreBtn.dataset.baDisRestoreBtn;
      const el = root.querySelector('[data-ba-dis-alert="' + id + '"]');
      if (el) { el.classList.remove('dismissed'); delete dismissed[id]; paintRestore(); }
    }
  });
})();
```

### 02. Sticky Top Announcement Banner CSS

**Type:** CSS + JS
**Description:** Three stackable sticky top announcement banners in a retro-futuristic terminal / neon aesthetic — deep space background, cyan / magenta / amber neon variants with layered glow effects, scanline texture overlay, and blinking live-indicator dots. Each banner has a glitching badge, a CTA button, and a close button that collapses the banner gracefully one by one as users dismiss them. Includes a scrollable page scaffold to demonstrate the sticky behaviour. Space Mono + Bebas Neue. Best for SaaS dashboards, product announcements, status pages, cyberpunk-themed UIs.

**HTML:**
```html
<section class="ba-stk" aria-label="Sticky top announcement banner demo">
  <div class="banner-stack">
    <div class="banner banner--system" data-ba-stk-banner="b-system">
      <div class="banner-inner">
        <div class="banner-left">
          <span class="blink" aria-hidden="true"></span>
          <span class="banner-badge">SYS</span>
          <span class="banner-msg"><strong>DEGRADED:</strong> API latency elevated — P95 response times +340ms · Engineers paged · Tracking INC-8821</span>
        </div>
        <div class="banner-right">
          <a href="#" class="banner-cta">Status page ↗</a>
          <button class="banner-close" type="button" data-ba-stk-close="b-system" aria-label="Dismiss"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button>
        </div>
      </div>
    </div>

    <div class="banner banner--promo" data-ba-stk-banner="b-promo">
      <div class="banner-inner">
        <div class="banner-left">
          <span class="blink" aria-hidden="true"></span>
          <span class="banner-badge">PROMO</span>
          <span class="banner-msg"><strong>40% OFF</strong> Pro tier — expires 23:59 UTC tonight · Code <strong>LAUNCH40</strong></span>
        </div>
        <div class="banner-right">
          <a href="#" class="banner-cta">Claim offer ↗</a>
          <button class="banner-close" type="button" data-ba-stk-close="b-promo" aria-label="Dismiss"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button>
        </div>
      </div>
    </div>

    <div class="banner banner--warning" data-ba-stk-banner="b-warning">
      <div class="banner-inner">
        <div class="banner-left">
          <span class="blink" aria-hidden="true"></span>
          <span class="banner-badge">WARN</span>
          <span class="banner-msg"><strong>Browser outdated —</strong> some features require Chrome 120+ or Firefox 121+ to function correctly</span>
        </div>
        <div class="banner-right">
          <a href="#" class="banner-cta">Update now ↗</a>
          <button class="banner-close" type="button" data-ba-stk-close="b-warning" aria-label="Dismiss"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button>
        </div>
      </div>
    </div>
  </div>

  <nav class="page-nav" aria-label="Demo navigation">
    <span class="nav-logo">NEXUS</span>
    <ul class="nav-links">
      <li><a href="#">Dashboard</a></li><li><a href="#">Analytics</a></li><li><a href="#">Deploy</a></li><li><a href="#">Docs</a></li>
    </ul>
  </nav>

  <div class="page-content">
    <h2>Sticky Top<br>Announcement<br>Banner CSS</h2>
    <p>Scroll the surrounding page to see the banners remain pinned. Dismiss each one to watch the stack collapse gracefully.</p>
    <div class="card-grid" aria-hidden="true">
      <div class="card"><span>Panel 01</span></div><div class="card"><span>Panel 02</span></div><div class="card"><span>Panel 03</span></div>
      <div class="card"><span>Panel 04</span></div><div class="card"><span>Panel 05</span></div><div class="card"><span>Panel 06</span></div>
    </div>
  </div>
</section>
```

**CSS:**
```css
/* ─── 02 Sticky Top Announcement Banner — neon terminal ──────── */
@import url('https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400&family=Bebas+Neue&display=swap');

.ba-stk {
  --ba-stk-bg: #060810;
  --ba-stk-surface: #0c1020;
  --ba-stk-cyan: #00f5d4;
  --ba-stk-magenta: #f500a0;
  --ba-stk-amber: #ffb800;
  --ba-stk-text: #e0e8ff;
  --ba-stk-muted: rgba(224,232,255,0.45);

  position: relative;
  width: 100%;
  height: 560px;
  background: var(--ba-stk-bg);
  background-image: radial-gradient(ellipse 80% 40% at 50% -10%, rgba(0,245,212,0.08) 0%, transparent 60%), linear-gradient(180deg, #060810 0%, #080d18 100%);
  font-family: 'Space Mono', monospace;
  color: var(--ba-stk-text);
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
}
.ba-stk *, .ba-stk *::before, .ba-stk *::after { box-sizing: border-box; margin: 0; padding: 0; }

.ba-stk .banner-stack { position: sticky; top: 0; z-index: 10; display: flex; flex-direction: column; }
.ba-stk .banner { width: 100%; overflow: hidden; transition: max-height 0.5s cubic-bezier(0.4,0,0.2,1), opacity 0.35s ease; max-height: 80px; }
.ba-stk .banner.hidden { max-height: 0; opacity: 0; pointer-events: none; }
.ba-stk .banner-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 20px; height: 48px; border-bottom: 1px solid; position: relative; overflow: hidden; }
.ba-stk .banner-inner::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(255,255,255,0.015) 3px, rgba(255,255,255,0.015) 4px); pointer-events: none; }
.ba-stk .banner-left { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; overflow: hidden; }
.ba-stk .banner-badge { font-family: 'Bebas Neue', sans-serif; font-size: 11px; letter-spacing: 0.15em; padding: 3px 8px; border: 1px solid currentColor; flex-shrink: 0; line-height: 1.4; }
.ba-stk .banner-msg { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.ba-stk .banner-msg strong { font-weight: 700; margin-right: 6px; }
.ba-stk .banner-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.ba-stk .banner-cta { font-family: 'Space Mono', monospace; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; padding: 4px 10px; border: 1px solid currentColor; background: transparent; cursor: pointer; text-decoration: none; transition: all 0.2s ease; }
.ba-stk .banner-close { background: transparent; border: none; cursor: pointer; padding: 4px; display: flex; opacity: 0.5; transition: opacity 0.2s; color: currentColor; }
.ba-stk .banner-close:hover { opacity: 1; }
.ba-stk .banner-close svg { width: 14px; height: 14px; }
.ba-stk .blink { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; margin-right: 8px; animation: ba-stk-blink 1.2s step-end infinite; flex-shrink: 0; }
@keyframes ba-stk-blink { 0%,100%{opacity:1} 50%{opacity:0} }

.ba-stk .banner--system { background: rgba(0,245,212,0.06); border-bottom-color: rgba(0,245,212,0.3); }
.ba-stk .banner--system .banner-inner { border-bottom-color: rgba(0,245,212,0.3); }
.ba-stk .banner--system .banner-badge, .ba-stk .banner--system .banner-msg, .ba-stk .banner--system .blink, .ba-stk .banner--system .banner-close, .ba-stk .banner--system .banner-cta { color: var(--ba-stk-cyan); }
.ba-stk .banner--system .banner-cta { border-color: rgba(0,245,212,0.6); }
.ba-stk .banner--system .banner-cta:hover { background: rgba(0,245,212,0.12); }

.ba-stk .banner--promo { background: rgba(245,0,160,0.06); border-bottom-color: rgba(245,0,160,0.3); }
.ba-stk .banner--promo .banner-inner { border-bottom-color: rgba(245,0,160,0.3); }
.ba-stk .banner--promo .banner-badge, .ba-stk .banner--promo .banner-msg, .ba-stk .banner--promo .blink, .ba-stk .banner--promo .banner-close, .ba-stk .banner--promo .banner-cta { color: var(--ba-stk-magenta); }
.ba-stk .banner--promo .banner-cta { border-color: rgba(245,0,160,0.6); }
.ba-stk .banner--promo .banner-cta:hover { background: rgba(245,0,160,0.1); }

.ba-stk .banner--warning { background: rgba(255,184,0,0.05); border-bottom-color: rgba(255,184,0,0.3); }
.ba-stk .banner--warning .banner-inner { border-bottom-color: rgba(255,184,0,0.3); }
.ba-stk .banner--warning .banner-badge, .ba-stk .banner--warning .banner-msg, .ba-stk .banner--warning .blink, .ba-stk .banner--warning .banner-close, .ba-stk .banner--warning .banner-cta { color: var(--ba-stk-amber); }
.ba-stk .banner--warning .banner-cta { border-color: rgba(255,184,0,0.6); }
.ba-stk .banner--warning .banner-cta:hover { background: rgba(255,184,0,0.1); }

.ba-stk .page-nav { background: rgba(12,16,32,0.95); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255,255,255,0.06); height: 56px; display: flex; align-items: center; padding: 0 24px; gap: 24px; }
.ba-stk .nav-logo { font-family: 'Bebas Neue', sans-serif; font-size: 20px; letter-spacing: 0.12em; color: var(--ba-stk-cyan); text-shadow: 0 0 12px rgba(0,245,212,0.6); }
.ba-stk .nav-links { display: flex; gap: 20px; list-style: none; }
.ba-stk .nav-links a { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ba-stk-muted); text-decoration: none; transition: color 0.2s; }
.ba-stk .nav-links a:hover { color: var(--ba-stk-text); }

.ba-stk .page-content { padding: 64px 24px; max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 32px; }
.ba-stk .page-content h2 { font-family: 'Bebas Neue', sans-serif; font-size: 52px; letter-spacing: 0.05em; line-height: 1; color: var(--ba-stk-text); }
.ba-stk .page-content p { font-size: 13px; line-height: 1.9; color: var(--ba-stk-muted); max-width: 520px; }
.ba-stk .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.ba-stk .card { background: var(--ba-stk-surface); border: 1px solid rgba(255,255,255,0.06); padding: 20px; height: 100px; display: flex; align-items: flex-end; }
.ba-stk .card span { font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.25); }

@media (prefers-reduced-motion: reduce) { .ba-stk .blink { animation: none; } .ba-stk .banner { transition: opacity 0.2s; } }
```

**JS:**
```js
(() => {
  const root = document.querySelector('.ba-stk');
  if (!root) return;
  root.addEventListener('click', (e) => {
    const btn = e.target.closest('[data-ba-stk-close]');
    if (!btn) return;
    const id = btn.dataset.baStkClose;
    const el = root.querySelector('[data-ba-stk-banner="' + id + '"]');
    if (el) el.classList.add('hidden');
  });
})();
```

### 03. Semantic Bootstrap-style Alerts CSS

**Type:** Pure CSS
**Description:** Five semantic Bootstrap-style CSS alerts (Success, Danger, Warning, Info, Notice) in an organic botanical / art nouveau aesthetic — warm parchment backgrounds, Cormorant Garamond serif headlines, and earthy pigment palettes (sage, ember, amber, slate, neutral). Each alert has a left flora panel with a circular outlined icon, an ornamental status divider, a body description, and two understated outlined action buttons (Primary + Ghost). Cards stagger in with a 70ms-step entrance animation. Cormorant Garamond + Instrument Sans. Best for content sites, settings pages, status confirmations, editorial admin UIs.

**HTML:**
```html
<section class="ba-bts" aria-label="Semantic Bootstrap-style alerts demo">
  <p class="ornament">— Status Indicators —</p>

  <div class="alert alert--success" role="alert">
    <div class="alert-inner">
      <div class="alert-flora">
        <div class="alert-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="20 6 9 17 4 12"/></svg></div>
      </div>
      <div class="alert-content">
        <div class="alert-status">Success</div>
        <div class="alert-title">Payment processed successfully.</div>
        <div class="alert-body-text">Your subscription has been activated. A receipt has been sent to your registered email address. Changes take effect immediately.</div>
        <div class="alert-actions">
          <button class="btn-primary" type="button">View Receipt</button>
          <button class="btn-ghost" type="button">Dismiss</button>
        </div>
      </div>
    </div>
  </div>

  <div class="alert alert--danger" role="alert">
    <div class="alert-inner">
      <div class="alert-flora">
        <div class="alert-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg></div>
      </div>
      <div class="alert-content">
        <div class="alert-status">Error</div>
        <div class="alert-title">Unable to save your changes.</div>
        <div class="alert-body-text">A conflict was detected with an existing record. Please refresh the page and try again. If this persists, contact our support team with error code <strong>ERR_409</strong>.</div>
        <div class="alert-actions">
          <button class="btn-primary" type="button">Try Again</button>
          <button class="btn-ghost" type="button">Contact Support</button>
        </div>
      </div>
    </div>
  </div>

  <div class="alert alert--warning" role="alert">
    <div class="alert-inner">
      <div class="alert-flora">
        <div class="alert-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg></div>
      </div>
      <div class="alert-content">
        <div class="alert-status">Warning</div>
        <div class="alert-title">Your storage is at 87% capacity.</div>
        <div class="alert-body-text">You are approaching your plan limit. Automatic uploads may pause if usage exceeds 95%. Consider upgrading your plan or removing unused files to avoid disruption.</div>
        <div class="alert-actions">
          <button class="btn-primary" type="button">Upgrade Plan</button>
          <button class="btn-ghost" type="button">Manage Storage</button>
        </div>
      </div>
    </div>
  </div>

  <div class="alert alert--info" role="alert">
    <div class="alert-inner">
      <div class="alert-flora">
        <div class="alert-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg></div>
      </div>
      <div class="alert-content">
        <div class="alert-status">Information</div>
        <div class="alert-title">A new version is available — v4.2.0.</div>
        <div class="alert-body-text">This release includes performance improvements, 3 new API endpoints, and resolved a known issue with date parsing in multi-timezone environments.</div>
        <div class="alert-actions">
          <button class="btn-primary" type="button">View Changelog</button>
          <button class="btn-ghost" type="button">Update Later</button>
        </div>
      </div>
    </div>
  </div>

  <div class="alert alert--neutral" role="alert">
    <div class="alert-inner">
      <div class="alert-flora">
        <div class="alert-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="2"/><line x1="8" y1="12" x2="16" y2="12"/></svg></div>
      </div>
      <div class="alert-content">
        <div class="alert-status">Notice</div>
        <div class="alert-title">This environment is read-only.</div>
        <div class="alert-body-text">You are currently viewing a staging snapshot. Any edits made here will not be persisted. Switch to the production environment to save changes.</div>
        <div class="alert-actions">
          <button class="btn-primary" type="button">Switch to Production</button>
          <button class="btn-ghost" type="button">Learn More</button>
        </div>
      </div>
    </div>
  </div>
</section>
```

**CSS:**
```css
/* ─── 03 Semantic Bootstrap-style Alerts — botanical ─────────── */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;1,400;1,600&family=Instrument+Sans:wght@400;500;600&display=swap');

.ba-bts {
  --ba-bts-sage-bg: #f0f4ef; --ba-bts-sage-border: #7aad6d; --ba-bts-sage-text: #2d5a27; --ba-bts-sage-icon: #4e9040; --ba-bts-sage-fill: #e6f0e4;
  --ba-bts-ember-bg: #fdf3ef; --ba-bts-ember-border: #d4704a; --ba-bts-ember-text: #7a2a10; --ba-bts-ember-icon: #c05530; --ba-bts-ember-fill: #fce8e1;
  --ba-bts-amber-bg: #fdf8ec; --ba-bts-amber-border: #c8982a; --ba-bts-amber-text: #6b4a00; --ba-bts-amber-icon: #b88020; --ba-bts-amber-fill: #faf0d0;
  --ba-bts-slate-bg: #eff3f8; --ba-bts-slate-border: #5b88c0; --ba-bts-slate-text: #1a3a60; --ba-bts-slate-icon: #3d6fa0; --ba-bts-slate-fill: #e2eaf5;
  --ba-bts-neutral-bg: #f7f5f2; --ba-bts-neutral-border: #9b9288; --ba-bts-neutral-text: #3d3830; --ba-bts-neutral-icon: #7a7068; --ba-bts-neutral-fill: #eeebe7;
  --ba-bts-page-bg: #faf8f4;

  position: relative;
  width: 100%;
  min-height: 720px;
  background: var(--ba-bts-page-bg);
  background-image: radial-gradient(circle at 15% 50%, rgba(122,173,109,0.07) 0%, transparent 50%), radial-gradient(circle at 85% 20%, rgba(91,136,192,0.07) 0%, transparent 40%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 24px;
  gap: 14px;
  font-family: 'Instrument Sans', sans-serif;
  box-sizing: border-box;
}
.ba-bts *, .ba-bts *::before, .ba-bts *::after { box-sizing: border-box; margin: 0; padding: 0; }

.ba-bts .alert { width: 100%; max-width: 640px; border-radius: 3px; position: relative; overflow: hidden; transition: transform 0.2s ease, box-shadow 0.2s ease; animation: ba-bts-rise 0.5s ease both; }
.ba-bts .alert:nth-child(1) { animation-delay: 0.05s; } .ba-bts .alert:nth-child(2) { animation-delay: 0.12s; } .ba-bts .alert:nth-child(3) { animation-delay: 0.19s; } .ba-bts .alert:nth-child(4) { animation-delay: 0.26s; } .ba-bts .alert:nth-child(5) { animation-delay: 0.33s; }
.ba-bts .alert:hover { transform: translateY(-1px); box-shadow: 0 6px 28px rgba(0,0,0,0.07); }
@keyframes ba-bts-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.ba-bts .alert-inner { display: flex; gap: 0; position: relative; }
.ba-bts .alert-flora { width: 56px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; position: relative; padding: 20px 0; }
.ba-bts .alert-flora::after { content: ''; position: absolute; right: 0; top: 16px; bottom: 16px; width: 1px; background: currentColor; opacity: 0.2; }
.ba-bts .alert-icon { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255,255,255,0.6); border: 1.5px solid currentColor; flex-shrink: 0; }
.ba-bts .alert-icon svg { width: 16px; height: 16px; }
.ba-bts .alert-content { flex: 1; padding: 18px 20px 18px 16px; }
.ba-bts .alert-status { font-size: 9px; font-weight: 600; letter-spacing: 0.25em; text-transform: uppercase; margin-bottom: 5px; opacity: 0.7; display: flex; align-items: center; gap: 8px; }
.ba-bts .alert-status::after { content: ''; flex: 1; height: 1px; background: currentColor; opacity: 0.2; max-width: 40px; }
.ba-bts .alert-title { font-family: 'Cormorant Garamond', serif; font-size: 20px; font-weight: 600; line-height: 1.25; margin-bottom: 5px; }
.ba-bts .alert-body-text { font-size: 13px; line-height: 1.7; opacity: 0.75; max-width: 480px; }
.ba-bts .alert-actions { display: flex; gap: 10px; margin-top: 12px; align-items: center; }
.ba-bts .btn-primary { font-family: inherit; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; padding: 6px 14px; border: 1.5px solid currentColor; background: transparent; cursor: pointer; border-radius: 2px; transition: all 0.2s; }
.ba-bts .btn-ghost { font-family: inherit; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; padding: 0; border: none; background: transparent; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; opacity: 0.55; transition: opacity 0.2s; }
.ba-bts .btn-ghost:hover { opacity: 1; }

.ba-bts .alert--success { background: var(--ba-bts-sage-bg); border: 1.5px solid var(--ba-bts-sage-border); border-left: 4px solid var(--ba-bts-sage-border); color: var(--ba-bts-sage-text); }
.ba-bts .alert--success .alert-flora { background: var(--ba-bts-sage-fill); color: var(--ba-bts-sage-icon); }
.ba-bts .alert--success .alert-icon { color: var(--ba-bts-sage-icon); border-color: var(--ba-bts-sage-icon); }
.ba-bts .alert--success .btn-primary { color: var(--ba-bts-sage-text); border-color: var(--ba-bts-sage-border); }
.ba-bts .alert--success .btn-primary:hover { background: var(--ba-bts-sage-border); color: white; }
.ba-bts .alert--success .btn-ghost { color: var(--ba-bts-sage-text); }

.ba-bts .alert--danger { background: var(--ba-bts-ember-bg); border: 1.5px solid var(--ba-bts-ember-border); border-left: 4px solid var(--ba-bts-ember-border); color: var(--ba-bts-ember-text); }
.ba-bts .alert--danger .alert-flora { background: var(--ba-bts-ember-fill); color: var(--ba-bts-ember-icon); }
.ba-bts .alert--danger .alert-icon { color: var(--ba-bts-ember-icon); border-color: var(--ba-bts-ember-icon); }
.ba-bts .alert--danger .btn-primary { color: var(--ba-bts-ember-text); border-color: var(--ba-bts-ember-border); }
.ba-bts .alert--danger .btn-primary:hover { background: var(--ba-bts-ember-border); color: white; }
.ba-bts .alert--danger .btn-ghost { color: var(--ba-bts-ember-text); }

.ba-bts .alert--warning { background: var(--ba-bts-amber-bg); border: 1.5px solid var(--ba-bts-amber-border); border-left: 4px solid var(--ba-bts-amber-border); color: var(--ba-bts-amber-text); }
.ba-bts .alert--warning .alert-flora { background: var(--ba-bts-amber-fill); color: var(--ba-bts-amber-icon); }
.ba-bts .alert--warning .alert-icon { color: var(--ba-bts-amber-icon); border-color: var(--ba-bts-amber-icon); }
.ba-bts .alert--warning .btn-primary { color: var(--ba-bts-amber-text); border-color: var(--ba-bts-amber-border); }
.ba-bts .alert--warning .btn-primary:hover { background: var(--ba-bts-amber-border); color: white; }
.ba-bts .alert--warning .btn-ghost { color: var(--ba-bts-amber-text); }

.ba-bts .alert--info { background: var(--ba-bts-slate-bg); border: 1.5px solid var(--ba-bts-slate-border); border-left: 4px solid var(--ba-bts-slate-border); color: var(--ba-bts-slate-text); }
.ba-bts .alert--info .alert-flora { background: var(--ba-bts-slate-fill); color: var(--ba-bts-slate-icon); }
.ba-bts .alert--info .alert-icon { color: var(--ba-bts-slate-icon); border-color: var(--ba-bts-slate-icon); }
.ba-bts .alert--info .btn-primary { color: var(--ba-bts-slate-text); border-color: var(--ba-bts-slate-border); }
.ba-bts .alert--info .btn-primary:hover { background: var(--ba-bts-slate-border); color: white; }
.ba-bts .alert--info .btn-ghost { color: var(--ba-bts-slate-text); }

.ba-bts .alert--neutral { background: var(--ba-bts-neutral-bg); border: 1.5px solid var(--ba-bts-neutral-border); border-left: 4px solid var(--ba-bts-neutral-border); color: var(--ba-bts-neutral-text); }
.ba-bts .alert--neutral .alert-flora { background: var(--ba-bts-neutral-fill); color: var(--ba-bts-neutral-icon); }
.ba-bts .alert--neutral .alert-icon { color: var(--ba-bts-neutral-icon); border-color: var(--ba-bts-neutral-icon); }
.ba-bts .alert--neutral .btn-primary { color: var(--ba-bts-neutral-text); border-color: var(--ba-bts-neutral-border); }
.ba-bts .alert--neutral .btn-primary:hover { background: var(--ba-bts-neutral-border); color: white; }
.ba-bts .alert--neutral .btn-ghost { color: var(--ba-bts-neutral-text); }

.ba-bts .ornament { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 12px; color: #bbb; text-align: center; letter-spacing: 0.1em; }

@media (prefers-reduced-motion: reduce) { .ba-bts .alert { animation: none; } }
```

### 04. CSS Cookie Consent Banner Bottom

**Type:** CSS + JS
**Description:** A bottom CSS cookie consent banner in a luxury Art Deco aesthetic — obsidian background, gold gradient top rule, diagonal corner motifs, and a smooth slide-up entrance animation. Features four preference checkbox tabs (Essential / Analytics / Marketing / Personalisation) plus an Accept All + Decline Non-Essential button pair. GDPR / CCPA / ePrivacy compliant copy. Libre Baskerville + Jost. Best for GDPR compliance, premium brand sites, luxury e-commerce, regulatory cookie disclosure.

**HTML:**
```html
<section class="ba-cok" aria-label="Cookie consent banner demo">
  <span class="bg-text" aria-hidden="true">Privacy</span>
  <div class="page-center">
    <span class="ornament">⬥ ◇ ⬥</span>
    <p>The consent banner appears from the bottom of the demo on load. Use Accept All or Decline Non-Essential to dismiss.</p>
  </div>

  <div class="consent-banner" data-ba-cok-banner role="dialog" aria-label="Cookie consent">
    <div class="consent-frame">
      <div class="consent-inner">
        <div class="consent-left">
          <div class="consent-eyebrow">
            <span class="consent-eyebrow-line" aria-hidden="true"></span>
            <span class="consent-eyebrow-text">Privacy &amp; Cookies</span>
            <span class="consent-eyebrow-line" aria-hidden="true"></span>
          </div>
          <div class="consent-title">We value your privacy.</div>
          <div class="consent-body">
            We use cookies to personalise content, measure audience, and improve your experience. By accepting, you consent to our use of cookies as described in our <a href="#">Cookie Policy</a> and <a href="#">Privacy Notice</a>. You may withdraw consent at any time.
          </div>
          <div class="consent-tabs">
            <label class="consent-tab required"><input type="checkbox" checked disabled> Essential</label>
            <label class="consent-tab"><input type="checkbox" data-ba-cok-pref="analytics"> Analytics</label>
            <label class="consent-tab"><input type="checkbox" data-ba-cok-pref="marketing"> Marketing</label>
            <label class="consent-tab"><input type="checkbox" data-ba-cok-pref="personal"> Personalisation</label>
          </div>
        </div>
        <div class="consent-right">
          <button class="btn-accept" type="button" data-ba-cok-accept>Accept All</button>
          <button class="btn-decline" type="button" data-ba-cok-decline>Decline Non-Essential</button>
        </div>
      </div>
      <div class="consent-divider" aria-hidden="true"></div>
      <div class="consent-footer">
        <span class="consent-footer-text">GDPR · CCPA · ePrivacy Directive compliant</span>
        <span class="consent-deco">Preference Centre</span>
      </div>
    </div>
  </div>
</section>
```

**CSS:**
```css
/* ─── 04 Cookie Consent Banner — luxury Art Deco ─────────────── */
@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Jost:wght@300;400;500;600&display=swap');

.ba-cok {
  --ba-cok-obsidian: #0a0a0a;
  --ba-cok-onyx: #141414;
  --ba-cok-gold: #c9a84c;
  --ba-cok-gold-lite: #e2c880;
  --ba-cok-gold-dim: #8a6e30;
  --ba-cok-ivory: #f5f0e8;
  --ba-cok-ivory-dim: rgba(245,240,232,0.55);
  --ba-cok-rule: rgba(201,168,76,0.25);

  position: relative;
  width: 100%;
  min-height: 720px;
  background: var(--ba-cok-obsidian);
  background-image: radial-gradient(ellipse 60% 35% at 50% 0%, rgba(201,168,76,0.06) 0%, transparent 60%), repeating-linear-gradient(45deg, transparent 0px, transparent 24px, rgba(255,255,255,0.008) 24px, rgba(255,255,255,0.008) 25px);
  font-family: 'Jost', sans-serif;
  color: var(--ba-cok-ivory);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-sizing: border-box;
}
.ba-cok *, .ba-cok *::before, .ba-cok *::after { box-sizing: border-box; margin: 0; padding: 0; }

.ba-cok .bg-text { position: absolute; font-family: 'Libre Baskerville', serif; font-size: clamp(80px, 14vw, 160px); font-style: italic; color: rgba(201,168,76,0.04); letter-spacing: -0.02em; white-space: nowrap; user-select: none; pointer-events: none; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.ba-cok .page-center { text-align: center; z-index: 1; padding: 40px 20px 200px; }
.ba-cok .page-center p { font-family: 'Libre Baskerville', serif; font-size: clamp(13px, 2vw, 15px); font-style: italic; color: var(--ba-cok-ivory-dim); line-height: 1.8; max-width: 380px; margin: 0 auto; }
.ba-cok .ornament { display: block; text-align: center; color: var(--ba-cok-gold); font-size: 24px; letter-spacing: 0.3em; margin-bottom: 20px; opacity: 0.7; }

.ba-cok .consent-banner { position: absolute; bottom: 0; left: 0; right: 0; z-index: 10; transform: translateY(100%); animation: ba-cok-slideUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) 1.2s forwards; }
@keyframes ba-cok-slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.ba-cok .consent-banner.dismissed { animation: ba-cok-slideDown 0.5s cubic-bezier(0.4, 0, 1, 1) forwards; pointer-events: none; }
@keyframes ba-cok-slideDown { from { transform: translateY(0); } to { transform: translateY(110%); } }
.ba-cok .consent-frame { background: var(--ba-cok-onyx); border-top: 1px solid var(--ba-cok-rule); position: relative; overflow: hidden; }
.ba-cok .consent-frame::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent 0%, var(--ba-cok-gold-dim) 20%, var(--ba-cok-gold) 50%, var(--ba-cok-gold-dim) 80%, transparent 100%); }
.ba-cok .consent-inner { max-width: 1100px; margin: 0 auto; padding: 28px 32px; display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center; }
.ba-cok .consent-left { display: flex; flex-direction: column; gap: 10px; }
.ba-cok .consent-eyebrow { display: flex; align-items: center; gap: 10px; }
.ba-cok .consent-eyebrow-line { width: 28px; height: 1px; background: var(--ba-cok-gold); opacity: 0.5; }
.ba-cok .consent-eyebrow-text { font-size: 9px; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ba-cok-gold); opacity: 0.8; }
.ba-cok .consent-title { font-family: 'Libre Baskerville', serif; font-size: 19px; font-weight: 700; color: var(--ba-cok-ivory); line-height: 1.25; }
.ba-cok .consent-body { font-size: 12.5px; line-height: 1.75; color: var(--ba-cok-ivory-dim); max-width: 560px; }
.ba-cok .consent-body a { color: var(--ba-cok-gold-lite); text-decoration: none; border-bottom: 1px solid rgba(201,168,76,0.35); transition: border-color 0.2s; }
.ba-cok .consent-tabs { display: flex; gap: 0; margin-top: 6px; border: 1px solid var(--ba-cok-rule); width: fit-content; border-radius: 2px; overflow: hidden; flex-wrap: wrap; }
.ba-cok .consent-tab { display: flex; align-items: center; gap: 6px; padding: 5px 12px; font-size: 10px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ba-cok-ivory-dim); cursor: pointer; background: transparent; border-right: 1px solid var(--ba-cok-rule); transition: all 0.2s; }
.ba-cok .consent-tab:last-child { border-right: none; }
.ba-cok .consent-tab input[type="checkbox"] { width: 11px; height: 11px; accent-color: var(--ba-cok-gold); cursor: pointer; }
.ba-cok .consent-tab:hover { background: rgba(201,168,76,0.06); color: var(--ba-cok-ivory); }
.ba-cok .consent-tab.required { color: rgba(201,168,76,0.6); pointer-events: none; }
.ba-cok .consent-right { display: flex; flex-direction: column; gap: 10px; align-items: stretch; min-width: 180px; }
.ba-cok .btn-accept { font-family: 'Jost', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; padding: 13px 24px; background: var(--ba-cok-gold); color: var(--ba-cok-obsidian); border: none; cursor: pointer; transition: all 0.25s ease; }
.ba-cok .btn-accept:hover { background: var(--ba-cok-gold-lite); transform: translateY(-1px); box-shadow: 0 4px 20px rgba(201,168,76,0.35); }
.ba-cok .btn-decline { font-family: 'Jost', sans-serif; font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; padding: 10px 24px; background: transparent; color: var(--ba-cok-ivory-dim); border: 1px solid rgba(245,240,232,0.15); cursor: pointer; transition: all 0.25s ease; }
.ba-cok .btn-decline:hover { border-color: rgba(245,240,232,0.35); color: var(--ba-cok-ivory); background: rgba(245,240,232,0.04); }
.ba-cok .consent-divider { height: 1px; background: var(--ba-cok-rule); margin: 0 32px; }
.ba-cok .consent-footer { padding: 10px 32px; max-width: 1100px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; }
.ba-cok .consent-footer-text { font-size: 10px; color: rgba(245,240,232,0.3); letter-spacing: 0.06em; }
.ba-cok .consent-deco { color: rgba(201,168,76,0.3); font-size: 10px; letter-spacing: 0.15em; }

@media (max-width: 640px) {
  .ba-cok .consent-inner { grid-template-columns: 1fr; gap: 20px; padding: 24px 20px; }
  .ba-cok .consent-right { flex-direction: row; min-width: unset; }
  .ba-cok .btn-accept, .ba-cok .btn-decline { flex: 1; }
}
@media (prefers-reduced-motion: reduce) { .ba-cok .consent-banner { animation: none; transform: translateY(0); } }
```

**JS:**
```js
(() => {
  const root = document.querySelector('.ba-cok');
  if (!root) return;
  const banner = root.querySelector('[data-ba-cok-banner]');
  if (!banner) return;
  const dismiss = () => banner.classList.add('dismissed');
  root.addEventListener('click', (e) => {
    if (e.target.closest('[data-ba-cok-accept]')) { dismiss(); return; }
    if (e.target.closest('[data-ba-cok-decline]')) {
      root.querySelectorAll('[data-ba-cok-pref]').forEach((c) => { c.checked = false; });
      dismiss();
    }
  });
})();
```

### 05. Inline Form Validation Alert CSS

**Type:** Pure CSS
**Description:** Inline form validation alerts in a brutalist / raw industrial aesthetic — grid paper texture, IBM Plex Mono throughout, black heavy borders with offset box shadow. Features a top-of-form error summary (3 errors prevented submission) plus four distinct field states: success (green / OK_200), error (red / ERR_409 — email already registered), warning (amber / WARN_PWD — weak password + 4-segment strength bar), and hint (blue / INFO — username requirements). Each validation message carries a monospace status code badge in the top-right corner. IBM Plex Mono + Syne. Best for registration forms, signup flows, account validation, dev-tool input dialogs.

**HTML:**
```html
<section class="ba-frm" aria-label="Inline form validation demo">
  <div class="form-shell" role="form" aria-label="Registration form">
    <div class="form-header">
      <span class="form-header-title">Create Account</span>
      <span class="form-header-meta">FORM · V2.4</span>
    </div>

    <div class="form-error-summary" role="alert" aria-live="polite">
      <div class="form-error-summary__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg></div>
      <div>
        <div class="form-error-summary__title">3 errors prevented submission</div>
        <ul class="form-error-summary__list">
          <li>Email address is already registered</li>
          <li>Password does not meet complexity requirements</li>
          <li>Terms of service must be accepted</li>
        </ul>
      </div>
    </div>

    <div class="form-body">
      <div class="field field--success">
        <div class="field-label">Full name <span class="required-mark">*</span><span class="field-index">01</span></div>
        <input class="field-input" type="text" value="Margot Vaillancourt" readonly>
        <div class="validation-msg validation-msg--success" data-code="OK_200">
          <div class="validation-msg__icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="20 6 9 17 4 12"/></svg></div>
          <div class="validation-msg__content"><span class="validation-msg__title">Looks good</span><span class="validation-msg__detail">Name is valid and matches our formatting requirements.</span></div>
        </div>
      </div>

      <div class="field field--error">
        <div class="field-label">Email address <span class="required-mark">*</span><span class="field-index">02</span></div>
        <input class="field-input" type="email" value="margot@vaillancourt.io" readonly>
        <div class="validation-msg validation-msg--error" data-code="ERR_409">
          <div class="validation-msg__icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg></div>
          <div class="validation-msg__content"><span class="validation-msg__title">Email already registered</span><span class="validation-msg__detail">An account with this address exists. Try signing in instead, or use a different email.</span></div>
        </div>
      </div>

      <div class="field field--warning">
        <div class="field-label">Password <span class="required-mark">*</span><span class="field-index">03</span></div>
        <input class="field-input" type="password" value="hunter2024" readonly>
        <div class="strength-bar" aria-hidden="true">
          <span class="filled-warning"></span><span class="filled-warning"></span><span></span><span></span>
        </div>
        <div class="validation-msg validation-msg--warning" data-code="WARN_PWD">
          <div class="validation-msg__icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg></div>
          <div class="validation-msg__content"><span class="validation-msg__title">Weak password — strength: fair</span><span class="validation-msg__detail">Add uppercase letters, symbols, or increase length to 12+ characters for a stronger password.</span></div>
        </div>
      </div>

      <div class="field">
        <div class="field-label">Username <span class="field-index">04</span></div>
        <input class="field-input" type="text" placeholder="Choose a unique handle…" readonly>
        <div class="validation-msg validation-msg--hint" data-code="INFO">
          <div class="validation-msg__icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg></div>
          <div class="validation-msg__content"><span class="validation-msg__title">Username requirements</span><span class="validation-msg__detail">3–20 characters. Letters, numbers, underscores only. Must not start with a number.</span></div>
        </div>
      </div>
    </div>

    <div class="form-footer">
      <p class="form-note">* Required fields.<br>Secure · Encrypted · No spam.</p>
      <button class="submit-btn" type="button">Submit →</button>
    </div>
  </div>
</section>
```

**CSS:**
```css
/* ─── 05 Inline Form Validation Alert — brutalist industrial ──── */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,700;1,400&family=Syne:wght@700;800&display=swap');

.ba-frm {
  --ba-frm-bg: #f2f0ec; --ba-frm-surface: #ffffff; --ba-frm-ink: #111111; --ba-frm-muted: #888;
  --ba-frm-err-bg: #fff5f5; --ba-frm-err-line: #e02020; --ba-frm-err-text: #c00;
  --ba-frm-ok-bg: #f5fff8; --ba-frm-ok-line: #18a050; --ba-frm-ok-text: #0d7038;
  --ba-frm-warn-bg: #fffbf0; --ba-frm-warn-line: #e09000; --ba-frm-warn-text: #986000;
  --ba-frm-hint-bg: #f5f8ff; --ba-frm-hint-line: #3060d0; --ba-frm-hint-text: #204090;

  position: relative;
  width: 100%;
  min-height: 760px;
  background: var(--ba-frm-bg);
  background-image: repeating-linear-gradient(90deg, rgba(0,0,0,0.04) 0px, transparent 1px, transparent 40px), repeating-linear-gradient(0deg, rgba(0,0,0,0.04) 0px, transparent 1px, transparent 40px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 16px;
  font-family: 'IBM Plex Mono', monospace;
  box-sizing: border-box;
}
.ba-frm *, .ba-frm *::before, .ba-frm *::after { box-sizing: border-box; margin: 0; padding: 0; }

.ba-frm .form-shell { background: var(--ba-frm-surface); border: 2px solid var(--ba-frm-ink); width: 100%; max-width: 520px; box-shadow: 6px 6px 0 var(--ba-frm-ink); position: relative; }
.ba-frm .form-header { background: var(--ba-frm-ink); color: #fff; padding: 14px 20px; display: flex; align-items: center; justify-content: space-between; }
.ba-frm .form-header-title { font-family: 'Syne', sans-serif; font-size: 14px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.ba-frm .form-header-meta { font-size: 10px; opacity: 0.45; letter-spacing: 0.12em; }
.ba-frm .form-body { padding: 24px 24px 28px; }
.ba-frm .field { display: flex; flex-direction: column; border-bottom: 1px solid rgba(0,0,0,0.1); padding: 18px 0; }
.ba-frm .field:first-child { padding-top: 0; } .ba-frm .field:last-child { border-bottom: none; }
.ba-frm .field-label { font-size: 9px; font-weight: 700; letter-spacing: 0.25em; text-transform: uppercase; color: var(--ba-frm-muted); margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.ba-frm .field-label .required-mark { color: var(--ba-frm-err-line); font-size: 11px; line-height: 1; }
.ba-frm .field-label .field-index { font-size: 9px; opacity: 0.3; margin-left: auto; font-weight: 400; }
.ba-frm .field-input { width: 100%; font-family: 'IBM Plex Mono', monospace; font-size: 14px; font-weight: 400; color: var(--ba-frm-ink); background: transparent; border: none; border-bottom: 2px solid var(--ba-frm-ink); padding: 6px 0 8px; outline: none; transition: border-color 0.2s; }
.ba-frm .field-input::placeholder { color: rgba(0,0,0,0.22); font-style: italic; }
.ba-frm .field--error .field-input { border-color: var(--ba-frm-err-line); }
.ba-frm .field--success .field-input { border-color: var(--ba-frm-ok-line); }
.ba-frm .field--warning .field-input { border-color: var(--ba-frm-warn-line); }

.ba-frm .validation-msg { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; margin-top: 10px; border-left: 3px solid; font-size: 11.5px; line-height: 1.55; position: relative; overflow: hidden; animation: ba-frm-popIn 0.22s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
@keyframes ba-frm-popIn { from { opacity: 0; transform: translateY(-4px) scaleY(0.9); } to { opacity: 1; transform: translateY(0) scaleY(1); } }
.ba-frm .validation-msg::before { content: attr(data-code); position: absolute; top: 8px; right: 10px; font-size: 9px; font-weight: 700; letter-spacing: 0.15em; opacity: 0.35; }
.ba-frm .validation-msg__icon { flex-shrink: 0; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.ba-frm .validation-msg__icon svg { width: 15px; height: 15px; }
.ba-frm .validation-msg__title { font-weight: 700; margin-bottom: 2px; display: block; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; }
.ba-frm .validation-msg__detail { font-size: 11px; font-weight: 400; opacity: 0.8; font-style: italic; }

.ba-frm .validation-msg--error { background: var(--ba-frm-err-bg); border-color: var(--ba-frm-err-line); color: var(--ba-frm-err-text); }
.ba-frm .validation-msg--success { background: var(--ba-frm-ok-bg); border-color: var(--ba-frm-ok-line); color: var(--ba-frm-ok-text); }
.ba-frm .validation-msg--warning { background: var(--ba-frm-warn-bg); border-color: var(--ba-frm-warn-line); color: var(--ba-frm-warn-text); }
.ba-frm .validation-msg--hint { background: var(--ba-frm-hint-bg); border-color: var(--ba-frm-hint-line); color: var(--ba-frm-hint-text); }

.ba-frm .strength-bar { height: 3px; background: rgba(0,0,0,0.08); margin-top: 8px; display: flex; gap: 2px; overflow: hidden; }
.ba-frm .strength-bar span { flex: 1; background: #ddd; transition: background 0.3s; }
.ba-frm .strength-bar span.filled-warning { background: var(--ba-frm-warn-line); }

.ba-frm .form-footer { background: rgba(0,0,0,0.03); border-top: 1px solid rgba(0,0,0,0.08); padding: 16px 24px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ba-frm .form-error-summary { background: #fff0f0; border: 2px solid var(--ba-frm-err-line); padding: 14px 16px; margin: 0 24px; display: flex; align-items: flex-start; gap: 12px; animation: ba-frm-popIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) 0.05s both; }
.ba-frm .form-error-summary__icon { color: var(--ba-frm-err-line); }
.ba-frm .form-error-summary__icon svg { width: 18px; height: 18px; }
.ba-frm .form-error-summary__title { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ba-frm-err-text); margin-bottom: 6px; }
.ba-frm .form-error-summary__list { list-style: none; display: flex; flex-direction: column; gap: 3px; }
.ba-frm .form-error-summary__list li { font-size: 11px; color: var(--ba-frm-err-text); display: flex; align-items: center; gap: 6px; opacity: 0.8; }
.ba-frm .form-error-summary__list li::before { content: '›'; font-size: 14px; line-height: 1; }
.ba-frm .submit-btn { font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding: 12px 24px; background: var(--ba-frm-ink); color: #fff; border: 2px solid var(--ba-frm-ink); cursor: pointer; transition: all 0.15s; flex-shrink: 0; }
.ba-frm .submit-btn:hover { background: transparent; color: var(--ba-frm-ink); }
.ba-frm .form-note { font-size: 10px; color: var(--ba-frm-muted); letter-spacing: 0.06em; line-height: 1.5; }

@media (prefers-reduced-motion: reduce) { .ba-frm .validation-msg, .ba-frm .form-error-summary { animation: none; } }
```

### 06. CSS Alert Banner with Icon Alignment

**Type:** CSS + JS
**Description:** Six dismissible CSS alert banners with proper icon alignment across mixed message lengths — vibrant maximalist pastel-gradient page, 16px rounded cards, chunky 42px icon badges with CSS pulse rings, and six colour variants (Success, Error, Warning, Info, Tip, Update). Demonstrates short single-line messages and long multi-line messages, proving that <code>align-items: flex-start</code> keeps the icon sharp at the top of wrapping text. Each card has action buttons + a dismiss × that exits with a smooth slide-and-collapse animation. Nunito + Fira Code. Best for product apps, customer dashboards, friendly admin panels, toast precursor cards.

**HTML:**
```html
<section class="ba-icn" aria-label="Icon-aligned alert banner demo">
  <span class="section-label">// alert-banner--icon-aligned</span>

  <div class="alert alert--success" role="alert" data-ba-icn-alert>
    <div class="alert-icon-wrap" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 11-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg></div>
    <div class="alert-content"><div class="alert-header"><span class="alert-title">Changes saved!</span><span class="alert-badge">success</span></div><span class="alert-desc">Your profile has been updated successfully.</span></div>
    <button class="alert-dismiss" type="button" aria-label="Dismiss"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button>
  </div>

  <div class="alert alert--error" role="alert" data-ba-icn-alert>
    <div class="alert-icon-wrap" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg></div>
    <div class="alert-content"><div class="alert-header"><span class="alert-title">Upload failed</span><span class="alert-badge">error</span></div><span class="alert-desc">The file exceeds the 10 MB limit. Please compress or choose a smaller file and try again.</span><div class="alert-actions"><button class="alert-link" type="button">Retry</button><button class="alert-link" type="button">Help</button></div></div>
    <button class="alert-dismiss" type="button" aria-label="Dismiss"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button>
  </div>

  <div class="alert alert--warning" role="alert" data-ba-icn-alert>
    <div class="alert-icon-wrap" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg></div>
    <div class="alert-content"><div class="alert-header"><span class="alert-title">Approaching rate limit</span><span class="alert-badge">warning</span></div><span class="alert-desc long">You have used 4,820 of your 5,000 monthly API requests. Once the limit is reached, all API calls will return a 429 error until the next billing cycle on July 1st. Consider upgrading your plan to avoid service interruption.</span><div class="alert-actions"><button class="alert-link" type="button">Upgrade Plan</button><button class="alert-link" type="button">View Usage</button></div></div>
    <button class="alert-dismiss" type="button" aria-label="Dismiss"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button>
  </div>

  <div class="alert alert--info" role="alert" data-ba-icn-alert>
    <div class="alert-icon-wrap" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg></div>
    <div class="alert-content"><div class="alert-header"><span class="alert-title">Scheduled downtime</span><span class="alert-badge">info</span></div><span class="alert-desc">Maintenance is scheduled for Friday 02:00–04:00 UTC. The dashboard will be read-only during this window.</span><div class="alert-actions"><button class="alert-link" type="button">View Schedule</button></div></div>
    <button class="alert-dismiss" type="button" aria-label="Dismiss"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button>
  </div>

  <div class="alert alert--tip" role="alert" data-ba-icn-alert>
    <div class="alert-icon-wrap" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg></div>
    <div class="alert-content"><div class="alert-header"><span class="alert-title">Pro tip</span><span class="alert-badge">tip</span></div><span class="alert-desc">Press <kbd>⌘ K</kbd> to open the command palette from anywhere.</span></div>
    <button class="alert-dismiss" type="button" aria-label="Dismiss"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button>
  </div>

  <div class="alert alert--update" role="alert" data-ba-icn-alert>
    <div class="alert-icon-wrap" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 4 23 10 17 10"/><path d="M20.49 15a9 9 0 11-2.12-9.36L23 10"/></svg></div>
    <div class="alert-content"><div class="alert-header"><span class="alert-title">Update available — v5.1.0</span><span class="alert-badge">update</span></div><span class="alert-desc long">A new version is ready with bug fixes for the export pipeline, improved dark mode contrast ratios, and a new drag-to-reorder feature in the sidebar. This update is non-breaking and backward compatible.</span><div class="alert-actions"><button class="alert-link" type="button">Update Now</button><button class="alert-link" type="button">Release Notes</button><button class="alert-link" type="button">Later</button></div></div>
    <button class="alert-dismiss" type="button" aria-label="Dismiss"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button>
  </div>
</section>
```

**CSS:**
```css
/* ─── 06 Icon-Aligned Alert Banner — pastel maximalist ────────── */
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,600;0,700;0,800;0,900;1,700&family=Fira+Code:wght@400;500&display=swap');

.ba-icn {
  --ba-icn-page-bg: #f8f5ff;
  --ba-icn-success-bg: #ecfdf4; --ba-icn-success-border: #22c55e; --ba-icn-success-icon-bg: #dcfce7; --ba-icn-success-icon: #16a34a; --ba-icn-success-text: #14532d; --ba-icn-success-title: #15803d;
  --ba-icn-error-bg: #fef2f2; --ba-icn-error-border: #f87171; --ba-icn-error-icon-bg: #fee2e2; --ba-icn-error-icon: #dc2626; --ba-icn-error-text: #7f1d1d; --ba-icn-error-title: #b91c1c;
  --ba-icn-warning-bg: #fffbeb; --ba-icn-warning-border: #fbbf24; --ba-icn-warning-icon-bg: #fef3c7; --ba-icn-warning-icon: #d97706; --ba-icn-warning-text: #78350f; --ba-icn-warning-title: #b45309;
  --ba-icn-info-bg: #eff6ff; --ba-icn-info-border: #60a5fa; --ba-icn-info-icon-bg: #dbeafe; --ba-icn-info-icon: #2563eb; --ba-icn-info-text: #1e3a8a; --ba-icn-info-title: #1d4ed8;
  --ba-icn-tip-bg: #fdf4ff; --ba-icn-tip-border: #c084fc; --ba-icn-tip-icon-bg: #fae8ff; --ba-icn-tip-icon: #9333ea; --ba-icn-tip-text: #4a1d96; --ba-icn-tip-title: #7e22ce;
  --ba-icn-update-bg: #fff7ed; --ba-icn-update-border: #fb923c; --ba-icn-update-icon-bg: #ffedd5; --ba-icn-update-icon: #ea580c; --ba-icn-update-text: #7c2d12; --ba-icn-update-title: #c2410c;

  position: relative;
  width: 100%;
  min-height: 1000px;
  background: var(--ba-icn-page-bg);
  background-image: radial-gradient(circle at 20% 20%, rgba(168,85,247,0.08) 0%, transparent 45%), radial-gradient(circle at 80% 80%, rgba(34,197,94,0.08) 0%, transparent 40%), radial-gradient(circle at 60% 10%, rgba(59,130,246,0.07) 0%, transparent 35%);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 48px 20px; gap: 14px;
  font-family: 'Nunito', sans-serif;
  box-sizing: border-box;
}
.ba-icn *, .ba-icn *::before, .ba-icn *::after { box-sizing: border-box; margin: 0; padding: 0; }

.ba-icn .section-label { font-family: 'Fira Code', monospace; font-size: 10px; letter-spacing: 0.25em; text-transform: uppercase; color: #bbb; }
.ba-icn .alert { width: 100%; max-width: 620px; border-radius: 16px; border: 2px solid; padding: 16px 18px; display: flex; align-items: flex-start; gap: 14px; position: relative; overflow: hidden; transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease; animation: ba-icn-alertIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.ba-icn .alert:hover { transform: translateY(-3px) scale(1.005); }
.ba-icn .alert:nth-child(2) { animation-delay: 0.07s; } .ba-icn .alert:nth-child(3) { animation-delay: 0.14s; } .ba-icn .alert:nth-child(4) { animation-delay: 0.21s; } .ba-icn .alert:nth-child(5) { animation-delay: 0.28s; } .ba-icn .alert:nth-child(6) { animation-delay: 0.35s; } .ba-icn .alert:nth-child(7) { animation-delay: 0.42s; }
@keyframes ba-icn-alertIn { from { opacity: 0; transform: translateX(-16px) scale(0.97); } to { opacity: 1; transform: translateX(0) scale(1); } }
.ba-icn .alert::before { content: ''; position: absolute; top: -30px; right: -30px; width: 100px; height: 100px; border-radius: 50%; background: currentColor; opacity: 0.05; pointer-events: none; }

.ba-icn .alert-icon-wrap { flex-shrink: 0; width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; position: relative; }
.ba-icn .alert-icon-wrap svg { width: 22px; height: 22px; }
.ba-icn .alert-icon-wrap::after { content: ''; position: absolute; inset: -3px; border-radius: 14px; border: 2px solid currentColor; opacity: 0; animation: ba-icn-pulse 2.5s ease-in-out infinite; }
@keyframes ba-icn-pulse { 0%, 100% { opacity: 0; transform: scale(1); } 50% { opacity: 0.3; transform: scale(1.08); } }

.ba-icn .alert-content { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ba-icn .alert-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ba-icn .alert-title { font-size: 15px; font-weight: 800; line-height: 1.25; }
.ba-icn .alert-badge { font-family: 'Fira Code', monospace; font-size: 9px; font-weight: 500; letter-spacing: 0.1em; padding: 2px 7px; border-radius: 4px; flex-shrink: 0; text-transform: uppercase; border: 1.5px solid currentColor; opacity: 0.7; }
.ba-icn .alert-desc { font-size: 13px; font-weight: 600; line-height: 1.6; opacity: 0.75; }
.ba-icn .alert-desc kbd { font-family: 'Fira Code', monospace; font-size: 11px; background: rgba(0,0,0,0.08); padding: 1px 5px; border-radius: 4px; }
.ba-icn .alert-actions { display: flex; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.ba-icn .alert-link { font-size: 12px; font-weight: 800; letter-spacing: 0.04em; text-decoration: none; padding: 5px 12px; border-radius: 8px; border: 2px solid currentColor; transition: all 0.18s; cursor: pointer; background: transparent; font-family: 'Nunito', sans-serif; }
.ba-icn .alert-link:hover { background: currentColor; color: white !important; }
.ba-icn .alert-dismiss { flex-shrink: 0; width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; border: none; background: transparent; cursor: pointer; opacity: 0.4; transition: opacity 0.2s, background 0.2s; margin-top: 6px; }
.ba-icn .alert-dismiss:hover { opacity: 0.8; background: rgba(0,0,0,0.06); }
.ba-icn .alert-dismiss svg { width: 14px; height: 14px; }

.ba-icn .alert--success { background: var(--ba-icn-success-bg); border-color: var(--ba-icn-success-border); color: var(--ba-icn-success-text); box-shadow: 0 4px 20px rgba(34,197,94,0.15); }
.ba-icn .alert--success .alert-icon-wrap { background: var(--ba-icn-success-icon-bg); color: var(--ba-icn-success-icon); }
.ba-icn .alert--success .alert-title { color: var(--ba-icn-success-title); }
.ba-icn .alert--success .alert-badge { color: var(--ba-icn-success-icon); border-color: var(--ba-icn-success-border); }

.ba-icn .alert--error { background: var(--ba-icn-error-bg); border-color: var(--ba-icn-error-border); color: var(--ba-icn-error-text); box-shadow: 0 4px 20px rgba(248,113,113,0.15); }
.ba-icn .alert--error .alert-icon-wrap { background: var(--ba-icn-error-icon-bg); color: var(--ba-icn-error-icon); }
.ba-icn .alert--error .alert-title { color: var(--ba-icn-error-title); }
.ba-icn .alert--error .alert-badge { color: var(--ba-icn-error-icon); border-color: var(--ba-icn-error-border); }

.ba-icn .alert--warning { background: var(--ba-icn-warning-bg); border-color: var(--ba-icn-warning-border); color: var(--ba-icn-warning-text); box-shadow: 0 4px 20px rgba(251,191,36,0.15); }
.ba-icn .alert--warning .alert-icon-wrap { background: var(--ba-icn-warning-icon-bg); color: var(--ba-icn-warning-icon); }
.ba-icn .alert--warning .alert-title { color: var(--ba-icn-warning-title); }
.ba-icn .alert--warning .alert-badge { color: var(--ba-icn-warning-icon); border-color: var(--ba-icn-warning-border); }

.ba-icn .alert--info { background: var(--ba-icn-info-bg); border-color: var(--ba-icn-info-border); color: var(--ba-icn-info-text); box-shadow: 0 4px 20px rgba(96,165,250,0.15); }
.ba-icn .alert--info .alert-icon-wrap { background: var(--ba-icn-info-icon-bg); color: var(--ba-icn-info-icon); }
.ba-icn .alert--info .alert-title { color: var(--ba-icn-info-title); }
.ba-icn .alert--info .alert-badge { color: var(--ba-icn-info-icon); border-color: var(--ba-icn-info-border); }

.ba-icn .alert--tip { background: var(--ba-icn-tip-bg); border-color: var(--ba-icn-tip-border); color: var(--ba-icn-tip-text); box-shadow: 0 4px 20px rgba(192,132,252,0.15); }
.ba-icn .alert--tip .alert-icon-wrap { background: var(--ba-icn-tip-icon-bg); color: var(--ba-icn-tip-icon); }
.ba-icn .alert--tip .alert-title { color: var(--ba-icn-tip-title); }
.ba-icn .alert--tip .alert-badge { color: var(--ba-icn-tip-icon); border-color: var(--ba-icn-tip-border); }

.ba-icn .alert--update { background: var(--ba-icn-update-bg); border-color: var(--ba-icn-update-border); color: var(--ba-icn-update-text); box-shadow: 0 4px 20px rgba(251,146,60,0.15); }
.ba-icn .alert--update .alert-icon-wrap { background: var(--ba-icn-update-icon-bg); color: var(--ba-icn-update-icon); }
.ba-icn .alert--update .alert-title { color: var(--ba-icn-update-title); }
.ba-icn .alert--update .alert-badge { color: var(--ba-icn-update-icon); border-color: var(--ba-icn-update-border); }

@media (prefers-reduced-motion: reduce) { .ba-icn .alert, .ba-icn .alert-icon-wrap::after { animation: none !important; } }
```

**JS:**
```js
(() => {
  const root = document.querySelector('.ba-icn');
  if (!root) return;
  root.addEventListener('click', (e) => {
    const btn = e.target.closest('.alert-dismiss');
    if (!btn) return;
    const alert = btn.closest('[data-ba-icn-alert]');
    if (!alert) return;
    alert.style.transition = 'all 0.35s cubic-bezier(0.4,0,0.2,1)';
    alert.style.opacity = '0';
    alert.style.transform = 'translateX(20px) scale(0.97)';
    alert.style.maxHeight = alert.offsetHeight + 'px';
    setTimeout(() => {
      alert.style.maxHeight = '0';
      alert.style.padding = '0';
      alert.style.margin = '0';
      alert.style.borderWidth = '0';
      alert.style.overflow = 'hidden';
    }, 150);
  });
})();
```

### 07. CSS Toast Notification Alert Top Right

**Type:** CSS + JS
**Description:** A top-right CSS toast notification system in a soft glassmorphism / frosted UI aesthetic — purple-blue ambient orbs, translucent frosted cards, spring-physics slide-in from right, and a progress bar that shrinks via <code>scaleX</code> as the auto-dismiss timer runs. Includes 6 trigger types: Success, Error, Warning, Info, Default, and a Promise (async) variant that morphs mid-flight into a success state after resolution. Plus Jakarta Sans + JetBrains Mono. Best for SaaS dashboards, web-app feedback, async operations confirmation, modern notification systems.

**HTML:**
```html
<section class="ba-tst" aria-label="Toast notification demo">
  <div class="panel">
    <div class="panel-title">Trigger a toast</div>
    <div class="btn-grid">
      <button class="trigger-btn trigger-btn--success" type="button" data-ba-tst-trigger="success"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="20 6 9 17 4 12"/></svg> Success</button>
      <button class="trigger-btn trigger-btn--error" type="button" data-ba-tst-trigger="error"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg> Error</button>
      <button class="trigger-btn trigger-btn--warning" type="button" data-ba-tst-trigger="warning"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/></svg> Warning</button>
      <button class="trigger-btn trigger-btn--info" type="button" data-ba-tst-trigger="info"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg> Info</button>
      <button class="trigger-btn trigger-btn--neutral" type="button" data-ba-tst-trigger="neutral"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="2"/></svg> Default</button>
      <button class="trigger-btn trigger-btn--promise" type="button" data-ba-tst-trigger="promise"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="23 4 23 10 17 10"/><path d="M20.49 15a9 9 0 11-2.12-9.36L23 10"/></svg> Promise (async)</button>
    </div>
  </div>

  <div class="toast-container" data-ba-tst-container aria-live="polite" aria-atomic="false"></div>
</section>
```

**CSS:**
```css
/* ─── 07 Toast Notification — glassmorphism top-right ─────────── */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

.ba-tst {
  --ba-tst-bg-from: #e0d7ff;
  --ba-tst-bg-to: #c8e6ff;
  --ba-tst-glass: rgba(255,255,255,0.55);
  --ba-tst-glass-border: rgba(255,255,255,0.75);
  --ba-tst-shadow: rgba(100,80,180,0.18);
  --ba-tst-ink: #1a1630;
  --ba-tst-muted: rgba(26,22,48,0.5);
  --ba-tst-c-success: #22c55e;
  --ba-tst-c-error: #ef4444;
  --ba-tst-c-warning: #f59e0b;
  --ba-tst-c-info: #6366f1;
  --ba-tst-c-neutral: #64748b;

  position: relative;
  width: 100%;
  min-height: 540px;
  background: linear-gradient(135deg, var(--ba-tst-bg-from) 0%, var(--ba-tst-bg-to) 60%, #d4f0ff 100%);
  font-family: 'Plus Jakarta Sans', sans-serif;
  display: flex; align-items: center; justify-content: center;
  padding: 60px 20px 40px;
  overflow: hidden;
  box-sizing: border-box;
}
.ba-tst *, .ba-tst *::before, .ba-tst *::after { box-sizing: border-box; margin: 0; padding: 0; }

.ba-tst::before, .ba-tst::after { content: ''; position: absolute; border-radius: 50%; pointer-events: none; filter: blur(80px); z-index: 0; }
.ba-tst::before { width: 520px; height: 520px; background: rgba(139,92,246,0.22); top: -100px; left: -120px; }
.ba-tst::after { width: 400px; height: 400px; background: rgba(59,130,246,0.18); bottom: -80px; right: -80px; }

.ba-tst .panel { background: var(--ba-tst-glass); backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4); border: 1.5px solid var(--ba-tst-glass-border); border-radius: 20px; padding: 28px 32px; width: 100%; max-width: 420px; box-shadow: 0 8px 40px var(--ba-tst-shadow), inset 0 1px 0 rgba(255,255,255,0.8); z-index: 1; position: relative; }
.ba-tst .panel-title { font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ba-tst-muted); margin-bottom: 16px; }
.ba-tst .btn-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ba-tst .trigger-btn { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 12.5px; font-weight: 600; padding: 11px 14px; border-radius: 12px; border: 1.5px solid transparent; cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; gap: 8px; color: white; }
.ba-tst .trigger-btn svg { width: 15px; height: 15px; flex-shrink: 0; }
.ba-tst .trigger-btn--success { background: var(--ba-tst-c-success); }
.ba-tst .trigger-btn--error { background: var(--ba-tst-c-error); }
.ba-tst .trigger-btn--warning { background: var(--ba-tst-c-warning); }
.ba-tst .trigger-btn--info { background: var(--ba-tst-c-info); }
.ba-tst .trigger-btn--neutral { background: var(--ba-tst-c-neutral); }
.ba-tst .trigger-btn--promise { background: linear-gradient(135deg, #6366f1, #8b5cf6); grid-column: span 2; justify-content: center; }
.ba-tst .trigger-btn:hover { opacity: 0.88; transform: translateY(-1px); box-shadow: 0 4px 16px rgba(0,0,0,0.15); }

.ba-tst .toast-container { position: absolute; top: 20px; right: 20px; z-index: 100; display: flex; flex-direction: column; gap: 10px; align-items: flex-end; pointer-events: none; }
.ba-tst .toast { pointer-events: all; width: 340px; max-width: calc(100% - 40px); background: rgba(255,255,255,0.72); backdrop-filter: blur(24px) saturate(1.8); -webkit-backdrop-filter: blur(24px) saturate(1.8); border: 1.5px solid rgba(255,255,255,0.85); border-radius: 16px; box-shadow: 0 4px 24px rgba(100,80,180,0.14), 0 1px 4px rgba(0,0,0,0.06); padding: 14px 14px 14px 16px; display: flex; align-items: flex-start; gap: 12px; position: relative; overflow: hidden; animation: ba-tst-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
@keyframes ba-tst-in { from { opacity: 0; transform: translateX(60px) scale(0.92); } to { opacity: 1; transform: translateX(0) scale(1); } }
.ba-tst .toast.exiting { animation: ba-tst-out 0.32s cubic-bezier(0.4, 0, 1, 1) forwards; }
@keyframes ba-tst-out { 0% { opacity: 1; transform: translateX(0); max-height: 200px; margin-bottom: 0; } 60% { opacity: 0; transform: translateX(50px); } 100% { opacity: 0; max-height: 0; margin-bottom: -10px; padding: 0; } }
.ba-tst .toast::after { content: ''; position: absolute; bottom: 0; left: 0; height: 2.5px; background: var(--toast-color, #6366f1); width: 100%; animation: ba-tst-progress var(--toast-duration, 4000ms) linear forwards; transform-origin: left; }
@keyframes ba-tst-progress { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.ba-tst .toast::before { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; border-radius: 16px 0 0 16px; background: var(--toast-color, #6366f1); }
.ba-tst .toast-icon { flex-shrink: 0; width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--toast-color, #6366f1) 12%, white); }
.ba-tst .toast-icon svg { width: 17px; height: 17px; color: var(--toast-color, #6366f1); }
.ba-tst .toast-body { flex: 1; min-width: 0; }
.ba-tst .toast-title { font-size: 13.5px; font-weight: 700; color: var(--ba-tst-ink); line-height: 1.25; margin-bottom: 2px; }
.ba-tst .toast-msg { font-size: 12px; color: var(--ba-tst-muted); line-height: 1.5; }
.ba-tst .toast-time { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; color: rgba(26,22,48,0.3); margin-top: 5px; display: block; }
.ba-tst .toast-close { flex-shrink: 0; width: 24px; height: 24px; border: none; background: rgba(0,0,0,0.05); border-radius: 7px; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--ba-tst-muted); transition: background 0.2s; margin-top: 1px; }
.ba-tst .toast-close svg { width: 12px; height: 12px; }
.ba-tst .toast-loader { display: flex; gap: 4px; margin-top: 6px; }
.ba-tst .toast-loader span { width: 5px; height: 5px; border-radius: 50%; background: var(--toast-color, #6366f1); opacity: 0.3; animation: ba-tst-dot 1.2s ease-in-out infinite; }
.ba-tst .toast-loader span:nth-child(2) { animation-delay: 0.2s; }
.ba-tst .toast-loader span:nth-child(3) { animation-delay: 0.4s; }
@keyframes ba-tst-dot { 0%,80%,100% { opacity: 0.3; transform: scale(1); } 40% { opacity: 1; transform: scale(1.4); } }

@media (prefers-reduced-motion: reduce) { .ba-tst .toast, .ba-tst .toast::after, .ba-tst .toast-loader span { animation: none !important; } }
```

**JS:**
```js
(() => {
  const root = document.querySelector('.ba-tst');
  if (!root) return;
  const container = root.querySelector('[data-ba-tst-container]');
  if (!container) return;

  const CONFIGS = {
    success: { color: '#22c55e', title: 'Upload complete', msg: 'report_q2.pdf was saved to your drive.', icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>', duration: 4000 },
    error:   { color: '#ef4444', title: 'Payment failed', msg: 'Card ending in 4242 was declined.', icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>', duration: 6000 },
    warning: { color: '#f59e0b', title: 'Storage at 90%', msg: 'Free up space to avoid paused uploads.', icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/></svg>', duration: 5000 },
    info:    { color: '#6366f1', title: 'New version available', msg: 'v5.2.0 is ready — see what is new.', icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>', duration: 5000 },
    neutral: { color: '#64748b', title: 'Changes auto-saved', msg: 'Last save 2 seconds ago.', icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><rect x="3" y="3" width="18" height="18" rx="2"/></svg>', duration: 3000 },
    promise: { color: '#8b5cf6', title: 'Syncing workspace…', msg: 'This resolves automatically in 3 seconds.', icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 4 23 10 17 10"/><path d="M20.49 15a9 9 0 11-2.12-9.36L23 10"/></svg>', duration: 3000, isPromise: true },
  };

  function now() {
    return new Date().toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', second: '2-digit' });
  }

  function dismiss(el) {
    if (!el) return;
    if (el._baTstTimer) clearTimeout(el._baTstTimer);
    el.classList.add('exiting');
    el.addEventListener('animationend', () => el.remove(), { once: true });
  }

  function show(type) {
    const cfg = CONFIGS[type];
    if (!cfg) return;
    const el = document.createElement('div');
    el.className = 'toast';
    el.style.setProperty('--toast-color', cfg.color);
    el.style.setProperty('--toast-duration', cfg.duration + 'ms');
    el.innerHTML =
      '<div class="toast-icon">' + cfg.icon + '</div>' +
      '<div class="toast-body">' +
        '<div class="toast-title">' + cfg.title + '</div>' +
        '<div class="toast-msg">' + cfg.msg + '</div>' +
        (cfg.isPromise ? '<div class="toast-loader"><span></span><span></span><span></span></div>' : '') +
        '<span class="toast-time">' + now() + '</span>' +
      '</div>' +
      '<button class="toast-close" type="button" aria-label="Dismiss"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button>';
    container.prepend(el);
    el.querySelector('.toast-close').addEventListener('click', () => dismiss(el));
    el._baTstTimer = setTimeout(() => {
      if (cfg.isPromise) {
        el.querySelector('.toast-title').textContent = 'Sync complete!';
        el.querySelector('.toast-msg').textContent = 'All files are up to date.';
        const loader = el.querySelector('.toast-loader'); if (loader) loader.remove();
        el.style.setProperty('--toast-color', '#22c55e');
        el.querySelector('.toast-icon').innerHTML = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>';
        setTimeout(() => dismiss(el), 3000);
      } else {
        dismiss(el);
      }
    }, cfg.duration);
  }

  root.addEventListener('click', (e) => {
    const btn = e.target.closest('[data-ba-tst-trigger]');
    if (btn) show(btn.dataset.baTstTrigger);
  });
})();
```

### 08. CSS Pulsing Banner for Live Updates

**Type:** Pure CSS
**Description:** Four live-update CSS banners in a dark broadcast / newsroom aesthetic — a Breaking News ticker with seamless duplicate-string loop, a System Status bar with pulsing box-shadow ring orbs (operational green, 99.98% uptime, P50 latency), a Degraded service banner with sweeping diagonal glow scan + subtle shake animation, and a Live Coverage bar with viewer count + clip-path chevron badge. Every banner uses pure CSS animations — no JS required for the live feel. Barlow Condensed + Barlow. Best for status pages, live broadcasts, real-time dashboards, news sites.

**HTML:**
```html
<section class="ba-pul" aria-label="Pulsing live updates banner demo">
  <span class="section-mark">— Live status banners —</span>

  <div class="banner banner--breaking">
    <div class="breaking-pill">
      <span class="live-dot" aria-hidden="true"></span>
      <span class="breaking-label">Breaking</span>
    </div>
    <div class="breaking-ticker">
      <div class="ticker-track">
        <span>API response times elevated across US-East-1 · Engineers investigating</span>
        <span class="ticker-sep">◆</span>
        <span>New deployment pipeline rolled out to 30% of production fleet</span>
        <span class="ticker-sep">◆</span>
        <span>Incident INC-9341 opened · ETA unknown · Follow status page for updates</span>
        <span class="ticker-sep">◆</span>
        <span>API response times elevated across US-East-1 · Engineers investigating</span>
        <span class="ticker-sep">◆</span>
        <span>New deployment pipeline rolled out to 30% of production fleet</span>
        <span class="ticker-sep">◆</span>
        <span>Incident INC-9341 opened · ETA unknown · Follow status page for updates</span>
        <span class="ticker-sep">◆</span>
      </div>
    </div>
  </div>

  <div class="banner banner--status">
    <div class="status-left">
      <div class="status-orb-wrap" aria-hidden="true">
        <div class="status-orb status-orb--green"></div>
        <div class="status-orb-ring"></div>
      </div>
      <div class="status-text">
        <div class="status-name status-name-green">All Systems Operational</div>
        <div class="status-desc">100% uptime in the last 30 days · Last checked 12 seconds ago</div>
      </div>
    </div>
    <div class="status-right">
      <div class="status-stat"><div class="status-stat-val status-val-green">99.98%</div><div class="status-stat-label">Uptime</div></div>
      <div class="status-divider" aria-hidden="true"></div>
      <div class="status-stat"><div class="status-stat-val">43ms</div><div class="status-stat-label">P50 Latency</div></div>
      <div class="status-divider" aria-hidden="true"></div>
      <div class="status-stat"><div class="status-stat-val">0</div><div class="status-stat-label">Open Incidents</div></div>
    </div>
  </div>

  <div class="banner banner--degraded">
    <div class="degraded-icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg></div>
    <div class="degraded-content">
      <div class="degraded-title">Webhook Delivery Delayed<span class="degraded-badge">Degraded</span></div>
      <div class="degraded-desc">Webhook retries are experiencing delays of 8–14 minutes. Deliveries are queued and will complete once backlog clears.</div>
    </div>
    <div class="degraded-time">Since 14:32 UTC</div>
  </div>

  <div class="banner banner--live">
    <div class="live-badge">
      <div class="live-badge-dot" aria-hidden="true"></div>
      <div class="live-badge-text">Live</div>
    </div>
    <div class="live-content">
      <div>
        <div class="live-headline">Q2 Earnings Call — CEO addressing analyst questions now</div>
        <div class="live-meta">Stream started 34 minutes ago · Replay available after event</div>
      </div>
      <div class="live-viewers">
        <div class="live-viewers-num">4,821</div>
        <div class="live-viewers-label">Watching</div>
      </div>
    </div>
  </div>
</section>
```

**CSS:**
```css
/* ─── 08 Pulsing Banner for Live Updates — broadcast ─────────── */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,400;0,600;0,700;0,800;1,700&family=Barlow:wght@300;400;500&display=swap');

.ba-pul {
  --ba-pul-bg: #080a0e;
  --ba-pul-surface: #0f1218;
  --ba-pul-border: rgba(255,255,255,0.06);
  --ba-pul-text: #e8ecf4;
  --ba-pul-muted: rgba(232,236,244,0.45);
  --ba-pul-red: #ff3b30;
  --ba-pul-green: #30d158;
  --ba-pul-amber: #ffd60a;
  --ba-pul-blue: #0a84ff;

  position: relative;
  width: 100%;
  min-height: 540px;
  background: var(--ba-pul-bg);
  background-image: radial-gradient(ellipse 70% 30% at 50% 0%, rgba(255,59,48,0.04) 0%, transparent 60%);
  font-family: 'Barlow', sans-serif;
  color: var(--ba-pul-text);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px;
  padding: 48px 16px;
  box-sizing: border-box;
}
.ba-pul *, .ba-pul *::before, .ba-pul *::after { box-sizing: border-box; margin: 0; padding: 0; }

.ba-pul .section-mark { font-family: 'Barlow Condensed', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(255,255,255,0.15); align-self: flex-start; max-width: 760px; width: 100%; }
.ba-pul .banner { width: 100%; max-width: 760px; position: relative; overflow: hidden; }

.ba-pul .banner--breaking { background: var(--ba-pul-surface); border: 1px solid rgba(255,59,48,0.2); border-left: 3px solid var(--ba-pul-red); display: flex; align-items: stretch; height: 52px; }
.ba-pul .breaking-pill { background: var(--ba-pul-red); display: flex; align-items: center; gap: 8px; padding: 0 28px 0 18px; flex-shrink: 0; clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%); }
.ba-pul .live-dot { width: 8px; height: 8px; border-radius: 50%; background: white; flex-shrink: 0; animation: ba-pul-livePulse 1.8s ease-in-out infinite; }
@keyframes ba-pul-livePulse { 0%,100% { opacity: 1; box-shadow: 0 0 0 0 rgba(255,255,255,0.5); } 50% { opacity: 0.6; box-shadow: 0 0 0 6px rgba(255,255,255,0); } }
.ba-pul .breaking-label { font-family: 'Barlow Condensed', sans-serif; font-size: 13px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: white; white-space: nowrap; }
.ba-pul .breaking-ticker { flex: 1; overflow: hidden; display: flex; align-items: center; padding: 0 16px; position: relative; }
.ba-pul .breaking-ticker::before, .ba-pul .breaking-ticker::after { content: ''; position: absolute; top: 0; bottom: 0; width: 32px; z-index: 2; pointer-events: none; }
.ba-pul .breaking-ticker::before { left: 0; background: linear-gradient(90deg, var(--ba-pul-surface), transparent); }
.ba-pul .breaking-ticker::after { right: 0; background: linear-gradient(-90deg, var(--ba-pul-surface), transparent); }
.ba-pul .ticker-track { display: flex; gap: 64px; white-space: nowrap; animation: ba-pul-scroll 22s linear infinite; font-family: 'Barlow Condensed', sans-serif; font-size: 15px; font-weight: 600; color: var(--ba-pul-text); letter-spacing: 0.04em; }
@keyframes ba-pul-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.ba-pul .ticker-sep { color: var(--ba-pul-red); opacity: 0.7; }

.ba-pul .banner--status { background: var(--ba-pul-surface); border: 1px solid var(--ba-pul-border); padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.ba-pul .status-left { display: flex; align-items: center; gap: 14px; }
.ba-pul .status-orb-wrap { position: relative; width: 20px; height: 20px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.ba-pul .status-orb { width: 10px; height: 10px; border-radius: 50%; position: relative; z-index: 1; }
.ba-pul .status-orb--green { background: var(--ba-pul-green); }
.ba-pul .status-orb-ring { position: absolute; inset: 0; border-radius: 50%; background: var(--ba-pul-green); animation: ba-pul-ring 2s ease-out infinite; }
@keyframes ba-pul-ring { 0% { opacity: 0.6; transform: scale(1); } 100% { opacity: 0; transform: scale(2.8); } }
.ba-pul .status-name { font-family: 'Barlow Condensed', sans-serif; font-size: 14px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.ba-pul .status-name-green { color: var(--ba-pul-green); }
.ba-pul .status-desc { font-size: 12px; color: var(--ba-pul-muted); margin-top: 1px; }
.ba-pul .status-right { display: flex; align-items: center; gap: 20px; flex-shrink: 0; }
.ba-pul .status-stat { text-align: right; }
.ba-pul .status-stat-val { font-family: 'Barlow Condensed', sans-serif; font-size: 18px; font-weight: 700; line-height: 1; animation: ba-pul-blink 3s ease-in-out infinite; color: var(--ba-pul-text); }
.ba-pul .status-val-green { color: var(--ba-pul-green); }
@keyframes ba-pul-blink { 0%,100% { opacity: 1; } 50% { opacity: 0.6; } }
.ba-pul .status-stat-label { font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ba-pul-muted); margin-top: 2px; }
.ba-pul .status-divider { width: 1px; height: 32px; background: var(--ba-pul-border); }

.ba-pul .banner--degraded { background: rgba(255, 214, 10, 0.05); border: 1px solid rgba(255, 214, 10, 0.2); padding: 12px 20px; display: flex; align-items: center; gap: 14px; }
.ba-pul .banner--degraded::before { content: ''; position: absolute; top: 0; bottom: 0; width: 60px; background: linear-gradient(90deg, transparent, rgba(255,214,10,0.15), transparent); animation: ba-pul-sweep 3s ease-in-out infinite; }
@keyframes ba-pul-sweep { from { left: -60px; } to { left: 110%; } }
.ba-pul .degraded-icon { flex-shrink: 0; width: 36px; height: 36px; border-radius: 8px; background: rgba(255,214,10,0.1); border: 1px solid rgba(255,214,10,0.3); display: flex; align-items: center; justify-content: center; animation: ba-pul-shake 4s ease-in-out infinite; }
@keyframes ba-pul-shake { 0%,90%,100% { transform: rotate(0); } 92% { transform: rotate(-3deg); } 94% { transform: rotate(3deg); } 96% { transform: rotate(-2deg); } 98% { transform: rotate(1deg); } }
.ba-pul .degraded-icon svg { width: 18px; height: 18px; color: var(--ba-pul-amber); }
.ba-pul .degraded-content { flex: 1; position: relative; z-index: 1; }
.ba-pul .degraded-title { font-family: 'Barlow Condensed', sans-serif; font-size: 14px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ba-pul-amber); display: flex; align-items: center; gap: 8px; }
.ba-pul .degraded-badge { font-family: 'Barlow Condensed', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.18em; padding: 2px 6px; border: 1px solid rgba(255,214,10,0.4); color: var(--ba-pul-amber); border-radius: 3px; animation: ba-pul-badgePulse 1.5s ease-in-out infinite; }
@keyframes ba-pul-badgePulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
.ba-pul .degraded-desc { font-size: 12px; color: var(--ba-pul-muted); margin-top: 2px; line-height: 1.5; }
.ba-pul .degraded-time { font-family: 'Barlow Condensed', sans-serif; font-size: 11px; color: rgba(255,214,10,0.5); white-space: nowrap; flex-shrink: 0; letter-spacing: 0.08em; }

.ba-pul .banner--live { background: var(--ba-pul-surface); border: 1px solid rgba(10,132,255,0.2); padding: 0; display: flex; align-items: stretch; }
.ba-pul .live-badge { background: var(--ba-pul-blue); padding: 0 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; flex-shrink: 0; position: relative; }
.ba-pul .live-badge::after { content: ''; position: absolute; top: 0; bottom: 0; right: -12px; width: 24px; background: var(--ba-pul-blue); clip-path: polygon(0 0, 0 100%, 100% 50%); }
.ba-pul .live-badge-dot { width: 7px; height: 7px; border-radius: 50%; background: white; animation: ba-pul-livePulse 1.5s ease-in-out infinite; }
.ba-pul .live-badge-text { font-family: 'Barlow Condensed', sans-serif; font-size: 11px; font-weight: 800; letter-spacing: 0.2em; color: white; text-transform: uppercase; }
.ba-pul .live-content { flex: 1; padding: 12px 20px 12px 28px; display: flex; align-items: center; gap: 16px; }
.ba-pul .live-headline { font-family: 'Barlow Condensed', sans-serif; font-size: 16px; font-weight: 700; color: var(--ba-pul-text); line-height: 1.3; letter-spacing: 0.02em; }
.ba-pul .live-meta { font-size: 11px; color: var(--ba-pul-muted); margin-top: 2px; font-style: italic; }
.ba-pul .live-viewers { text-align: right; flex-shrink: 0; }
.ba-pul .live-viewers-num { font-family: 'Barlow Condensed', sans-serif; font-size: 22px; font-weight: 800; color: var(--ba-pul-blue); line-height: 1; animation: ba-pul-blink 2s ease-in-out infinite; }
.ba-pul .live-viewers-label { font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ba-pul-muted); margin-top: 2px; }

@media (prefers-reduced-motion: reduce) { .ba-pul *, .ba-pul *::before, .ba-pul *::after { animation: none !important; } }
```

### 09. Minimalist Border Left CSS Alert

**Type:** Pure CSS
**Description:** Minimalist border-left CSS alerts in a Swiss typography / documentation aesthetic — Fraunces serif headlines + Geist Mono labels, warm parchment surface, and a single CSS variable <code>--c</code> drives every colour state. Two densities ship side-by-side: a full-message card (Success / Error / Warning / Info / Note variants with type label, decorative rule, body text, and an arrowed link) and a compact one-liner card (ok / fail / warn / info / note / new with mini type badge + divider + short inline message). Fraunces + Geist Mono. Best for documentation sites, technical wikis, developer changelogs, API status pages.

**HTML:**
```html
<section class="ba-bdl" aria-label="Border-left minimalist alert demo">
  <div class="section-label">// Standard alerts</div>

  <div class="card">
    <div class="alert" data-c="success"><div class="alert-row"><span class="alert-type">success</span><span class="alert-rule" aria-hidden="true"></span><span class="alert-dot" aria-hidden="true"></span></div><div class="alert-title">Deployment complete.</div><div class="alert-body">Version 3.8.1 is now live across all regions. Zero downtime recorded during the rollout window.</div><a href="#" class="alert-link">View deployment log</a></div>
    <div class="alert" data-c="error"><div class="alert-row"><span class="alert-type">error</span><span class="alert-rule" aria-hidden="true"></span><span class="alert-dot" aria-hidden="true"></span></div><div class="alert-title">Database connection refused.</div><div class="alert-body">Unable to reach <code>pg-primary.cluster.internal:5432</code>. Check that your DB is accepting connections and firewall rules permit access from this host.</div><a href="#" class="alert-link">View troubleshooting guide</a></div>
    <div class="alert" data-c="warning"><div class="alert-row"><span class="alert-type">warning</span><span class="alert-rule" aria-hidden="true"></span><span class="alert-dot" aria-hidden="true"></span></div><div class="alert-title">Deprecated method in use.</div><div class="alert-body">Your codebase calls <code>client.legacyAuth()</code> which will be removed in v4.0. Migrate to <code>client.auth.verify()</code> before the next major release.</div><a href="#" class="alert-link">Migration guide</a></div>
    <div class="alert" data-c="info"><div class="alert-row"><span class="alert-type">info</span><span class="alert-rule" aria-hidden="true"></span><span class="alert-dot" aria-hidden="true"></span></div><div class="alert-title">Read-only mode is active.</div><div class="alert-body">You are browsing a shared workspace snapshot. Changes you make will not be saved. Switch to your personal workspace to enable editing.</div><a href="#" class="alert-link">Switch workspace</a></div>
    <div class="alert" data-c="purple"><div class="alert-row"><span class="alert-type">note</span><span class="alert-rule" aria-hidden="true"></span><span class="alert-dot" aria-hidden="true"></span></div><div class="alert-title">Experimental feature enabled.</div><div class="alert-body">You have opted into the <code>ai-suggest</code> beta. Behaviour may change without notice between releases.</div></div>
  </div>

  <div class="section-gap" aria-hidden="true"></div>
  <div class="section-label">// Compact inline alerts</div>

  <div class="card">
    <div class="alert alert--compact" data-c="success"><span class="compact-type">ok</span><span class="compact-divider" aria-hidden="true"></span><span class="compact-text"><strong>2,048 records</strong> imported without errors.</span></div>
    <div class="alert alert--compact" data-c="error"><span class="compact-type">fail</span><span class="compact-divider" aria-hidden="true"></span><span class="compact-text"><strong>Invalid token.</strong> Session has expired — please sign in again.</span></div>
    <div class="alert alert--compact" data-c="warning"><span class="compact-type">warn</span><span class="compact-divider" aria-hidden="true"></span><span class="compact-text">You have <strong>3 unreviewed</strong> pull requests older than 14 days.</span></div>
    <div class="alert alert--compact" data-c="info"><span class="compact-type">info</span><span class="compact-divider" aria-hidden="true"></span><span class="compact-text">Webhooks are replayed in <strong>FIFO order</strong> with exponential back-off.</span></div>
    <div class="alert alert--compact" data-c="neutral"><span class="compact-type">note</span><span class="compact-divider" aria-hidden="true"></span><span class="compact-text">This endpoint is <strong>rate-limited</strong> to 120 requests per minute per API key.</span></div>
    <div class="alert alert--compact" data-c="pink"><span class="compact-type">new</span><span class="compact-divider" aria-hidden="true"></span><span class="compact-text">Streaming responses now supported via <code>Accept: text/event-stream</code>.</span></div>
  </div>
</section>
```

**CSS:**
```css
/* ─── 09 Minimalist Border-Left Alert — Swiss documentation ──── */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,600;1,9..144,300&family=Geist+Mono:wght@300;400;500&display=swap');

.ba-bdl {
  --ba-bdl-bg: #fafaf9;
  --ba-bdl-surface: #ffffff;
  --ba-bdl-ink: #111110;
  --ba-bdl-muted: #6f6e6b;
  --ba-bdl-faint: #e8e8e6;
  --ba-bdl-c-success: #16a34a;
  --ba-bdl-c-error: #dc2626;
  --ba-bdl-c-warning: #ca8a04;
  --ba-bdl-c-info: #2563eb;
  --ba-bdl-c-neutral: #71717a;
  --ba-bdl-c-purple: #7c3aed;
  --ba-bdl-c-pink: #db2777;
  --ba-bdl-border-width: 3px;
  --ba-bdl-radius: 2px;

  position: relative;
  width: 100%;
  min-height: 820px;
  background: var(--ba-bdl-bg);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 60px 24px;
  gap: 2px;
  font-family: 'Fraunces', serif;
  box-sizing: border-box;
}
.ba-bdl *, .ba-bdl *::before, .ba-bdl *::after { box-sizing: border-box; margin: 0; padding: 0; }

.ba-bdl .section-label { font-family: 'Geist Mono', monospace; font-size: 9px; letter-spacing: 0.3em; text-transform: uppercase; color: #ccc; align-self: flex-start; max-width: 600px; width: 100%; }
.ba-bdl .section-gap { height: 24px; width: 100%; max-width: 600px; }
.ba-bdl .card { width: 100%; max-width: 600px; border: 1px solid var(--ba-bdl-faint); border-radius: var(--ba-bdl-radius); overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,0.04); animation: ba-bdl-up 0.5s ease both; }
@keyframes ba-bdl-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.ba-bdl .alert { width: 100%; background: var(--ba-bdl-surface); padding: 16px 20px; position: relative; transition: background 0.18s; border-left: var(--ba-bdl-border-width) solid var(--ba-bdl-c-info); }
.ba-bdl .alert[data-c="success"] { border-left-color: var(--ba-bdl-c-success); --c: var(--ba-bdl-c-success); }
.ba-bdl .alert[data-c="error"]   { border-left-color: var(--ba-bdl-c-error);   --c: var(--ba-bdl-c-error); }
.ba-bdl .alert[data-c="warning"] { border-left-color: var(--ba-bdl-c-warning); --c: var(--ba-bdl-c-warning); }
.ba-bdl .alert[data-c="info"]    { border-left-color: var(--ba-bdl-c-info);    --c: var(--ba-bdl-c-info); }
.ba-bdl .alert[data-c="neutral"] { border-left-color: var(--ba-bdl-c-neutral); --c: var(--ba-bdl-c-neutral); }
.ba-bdl .alert[data-c="purple"]  { border-left-color: var(--ba-bdl-c-purple);  --c: var(--ba-bdl-c-purple); }
.ba-bdl .alert[data-c="pink"]    { border-left-color: var(--ba-bdl-c-pink);    --c: var(--ba-bdl-c-pink); }
.ba-bdl .alert + .alert { border-top: 1px solid var(--ba-bdl-faint); }
.ba-bdl .alert:hover { background: #fafafa; }

.ba-bdl .alert-row { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.ba-bdl .alert-type { font-family: 'Geist Mono', monospace; font-size: 10px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c); flex-shrink: 0; }
.ba-bdl .alert-rule { flex: 1; height: 1px; background: var(--c); opacity: 0.15; align-self: center; }
.ba-bdl .alert-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--c); opacity: 0.5; align-self: center; flex-shrink: 0; }
.ba-bdl .alert-title { font-size: 17px; font-weight: 600; color: var(--ba-bdl-ink); line-height: 1.3; margin-bottom: 4px; letter-spacing: -0.01em; }
.ba-bdl .alert-body { font-size: 14px; font-weight: 300; color: var(--ba-bdl-muted); line-height: 1.75; font-style: italic; }
.ba-bdl .alert-body code { font-family: 'Geist Mono', monospace; font-size: 12px; font-style: normal; font-weight: 400; background: var(--ba-bdl-faint); padding: 1px 5px; border-radius: 3px; color: var(--ba-bdl-ink); }
.ba-bdl .alert-link { font-family: 'Geist Mono', monospace; font-size: 11px; font-weight: 500; color: var(--c); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.15s; margin-top: 10px; display: inline-block; letter-spacing: 0.04em; }
.ba-bdl .alert-link:hover { border-color: var(--c); }
.ba-bdl .alert-link::after { content: ' →'; }

.ba-bdl .alert--compact { padding: 11px 18px; display: flex; align-items: center; gap: 14px; }
.ba-bdl .alert--compact .compact-type { font-family: 'Geist Mono', monospace; font-size: 9.5px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c); flex-shrink: 0; white-space: nowrap; }
.ba-bdl .alert--compact .compact-text { font-size: 13.5px; font-weight: 300; color: var(--ba-bdl-muted); font-style: italic; line-height: 1.45; flex: 1; }
.ba-bdl .alert--compact .compact-text strong { font-style: normal; font-weight: 600; color: var(--ba-bdl-ink); }
.ba-bdl .alert--compact .compact-text code { font-family: 'Geist Mono', monospace; font-style: normal; font-size: 11px; background: var(--ba-bdl-faint); padding: 1px 4px; border-radius: 3px; }
.ba-bdl .compact-divider { width: 1px; height: 16px; background: var(--ba-bdl-faint); flex-shrink: 0; }

@media (prefers-reduced-motion: reduce) { .ba-bdl .card { animation: none; } }
```

### 10. CSS Banner with Diagonal Slash Background

**Type:** CSS + JS
**Description:** Four diagonal-slash CSS banners in a bold geometric streetwear aesthetic — four distinct slash techniques side-by-side: a <code>transform: skewX(-12deg)</code> badge with red 40% OFF promo, a <code>clip-path: polygon()</code> angled purple fill on a New Feature card, a <code>repeating-linear-gradient</code> hazard-stripe system warning in amber, and a crisp <code>linear-gradient(108deg)</code> dark/yellow split with a live countdown timer (hours / minutes / seconds). Anton display + Rajdhani body. Best for promo banners, sale announcements, dev-tool warnings, attention-grabbing CTAs.

**HTML:**
```html
<section class="ba-dgs" aria-label="Diagonal slash banner demo">
  <span class="section-mark">// Diagonal slash banners</span>

  <div class="banner--promo">
    <div class="slash-badge">
      <div><div class="badge-text">40% OFF</div><div class="badge-sub">Today Only</div></div>
    </div>
    <div class="promo-content">
      <div class="promo-title">Summer Sale — <span>ends midnight</span></div>
      <button class="promo-cta" type="button">Shop Now</button>
    </div>
  </div>

  <div class="banner--new">
    <div class="new-fill" aria-hidden="true"></div>
    <div class="new-left">
      <span class="new-label">New Feature</span>
      <span class="new-divider" aria-hidden="true"></span>
      <div class="new-headline">AI Autocomplete</div>
    </div>
    <div class="new-right">
      <span class="new-desc">Smart code suggestions powered by your team's codebase. Available on all plans from today.</span>
      <button class="new-btn" type="button">Try It →</button>
    </div>
  </div>

  <div class="banner--system">
    <div class="system-icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg></div>
    <div class="system-body">
      <div class="system-title">Scheduled Maintenance Window</div>
      <div class="system-desc">All services will be unavailable Fri 02:00–05:00 UTC. Please save your work before this window begins.</div>
    </div>
    <div class="system-timestamp">FRI · 02:00 UTC</div>
  </div>

  <div class="banner--countdown">
    <div class="countdown-left">
      <span class="countdown-tag">Offer Ends In</span>
      <span class="countdown-title">Limited Launch Pricing</span>
    </div>
    <div class="countdown-right">
      <div class="cd-unit"><div class="cd-num" data-ba-dgs-h>08</div><div class="cd-label">Hrs</div></div>
      <div class="cd-colon">:</div>
      <div class="cd-unit"><div class="cd-num" data-ba-dgs-m>34</div><div class="cd-label">Min</div></div>
      <div class="cd-colon">:</div>
      <div class="cd-unit"><div class="cd-num" data-ba-dgs-s>17</div><div class="cd-label">Sec</div></div>
    </div>
  </div>
</section>
```

**CSS:**
```css
/* ─── 10 Diagonal Slash Banner — bold geometric streetwear ─────── */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Rajdhani:wght@500;600;700&display=swap');

.ba-dgs {
  --ba-dgs-bg: #111;

  position: relative;
  width: 100%;
  min-height: 640px;
  background: var(--ba-dgs-bg);
  background-image: repeating-linear-gradient(-55deg, transparent 0px, transparent 18px, rgba(255,255,255,0.018) 18px, rgba(255,255,255,0.018) 19px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 20px;
  padding: 48px 16px;
  font-family: 'Rajdhani', sans-serif;
  box-sizing: border-box;
}
.ba-dgs *, .ba-dgs *::before, .ba-dgs *::after { box-sizing: border-box; margin: 0; padding: 0; }

.ba-dgs .section-mark { font-family: 'Rajdhani', sans-serif; font-size: 9px; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(255,255,255,0.12); align-self: flex-start; max-width: 700px; width: 100%; }

.ba-dgs .banner--promo { width: 100%; max-width: 700px; background: #f5f5f5; display: flex; align-items: stretch; overflow: hidden; height: 80px; position: relative; animation: ba-dgs-slideIn 0.45s ease 0.04s both; }
.ba-dgs .slash-badge { position: relative; flex-shrink: 0; display: flex; align-items: center; justify-content: center; z-index: 1; padding: 0 40px 0 24px; }
.ba-dgs .slash-badge::before { content: ''; position: absolute; inset: 0; background: #e11d48; transform: skewX(-12deg) scaleX(1.05); transform-origin: right; z-index: -1; }
.ba-dgs .badge-text { font-family: 'Anton', sans-serif; font-size: 28px; color: white; letter-spacing: 0.04em; white-space: nowrap; line-height: 1; }
.ba-dgs .badge-sub { font-size: 11px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.7); display: block; margin-top: 2px; text-align: center; }
.ba-dgs .promo-content { flex: 1; display: flex; align-items: center; padding: 0 24px; gap: 24px; }
.ba-dgs .promo-title { font-family: 'Anton', sans-serif; font-size: 24px; color: #111; letter-spacing: 0.02em; line-height: 1; flex: 1; }
.ba-dgs .promo-title span { color: #e11d48; }
.ba-dgs .promo-cta { font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; padding: 10px 20px; background: #111; color: white; border: none; cursor: pointer; clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); transition: background 0.2s; white-space: nowrap; }
.ba-dgs .promo-cta:hover { background: #e11d48; }

.ba-dgs .banner--new { width: 100%; max-width: 700px; background: #0d0d0d; position: relative; overflow: hidden; padding: 0; height: 90px; display: flex; align-items: stretch; animation: ba-dgs-slideIn 0.45s ease 0.12s both; }
.ba-dgs .new-fill { position: absolute; top: 0; left: 0; bottom: 0; width: 48%; background: linear-gradient(135deg, #7c3aed 0%, #4f46e5 100%); clip-path: polygon(0 0, 100% 0, 80% 100%, 0 100%); z-index: 0; }
.ba-dgs .new-left { position: relative; z-index: 1; display: flex; align-items: center; gap: 14px; padding: 0 0 0 24px; width: 44%; }
.ba-dgs .new-label { font-family: 'Anton', sans-serif; font-size: 13px; letter-spacing: 0.22em; color: rgba(255,255,255,0.85); white-space: nowrap; }
.ba-dgs .new-divider { width: 2px; height: 40px; background: rgba(255,255,255,0.25); flex-shrink: 0; }
.ba-dgs .new-headline { font-family: 'Anton', sans-serif; font-size: 22px; color: white; letter-spacing: 0.04em; line-height: 1; flex: 1; }
.ba-dgs .new-right { flex: 1; display: flex; align-items: center; padding: 0 24px; position: relative; z-index: 1; }
.ba-dgs .new-desc { font-size: 13px; font-weight: 500; color: rgba(255,255,255,0.5); line-height: 1.55; max-width: 280px; }
.ba-dgs .new-btn { margin-left: auto; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding: 9px 18px; background: transparent; color: white; border: 1.5px solid rgba(255,255,255,0.25); cursor: pointer; transition: all 0.2s; white-space: nowrap; clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%); }
.ba-dgs .new-btn:hover { border-color: rgba(255,255,255,0.7); background: rgba(255,255,255,0.06); }

.ba-dgs .banner--system { width: 100%; max-width: 700px; position: relative; overflow: hidden; background: #1a0a00; padding: 18px 24px; display: flex; align-items: center; gap: 20px; animation: ba-dgs-slideIn 0.45s ease 0.20s both; }
.ba-dgs .banner--system::before { content: ''; position: absolute; inset: 0; background-image: repeating-linear-gradient(-52deg, rgba(234,88,12,0.12) 0px, rgba(234,88,12,0.12) 12px, transparent 12px, transparent 28px); pointer-events: none; }
.ba-dgs .system-icon { flex-shrink: 0; width: 44px; height: 44px; background: #ea580c; clip-path: polygon(50% 0%, 100% 100%, 0 100%); display: flex; align-items: flex-end; justify-content: center; padding-bottom: 4px; position: relative; z-index: 1; }
.ba-dgs .system-icon svg { width: 16px; height: 16px; color: white; }
.ba-dgs .system-body { flex: 1; position: relative; z-index: 1; }
.ba-dgs .system-title { font-family: 'Anton', sans-serif; font-size: 18px; color: #fb923c; letter-spacing: 0.06em; line-height: 1; margin-bottom: 4px; }
.ba-dgs .system-desc { font-size: 13px; font-weight: 500; color: rgba(251,146,60,0.6); line-height: 1.5; }
.ba-dgs .system-timestamp { font-family: 'Courier New', monospace; font-size: 10px; color: rgba(234,88,12,0.5); letter-spacing: 0.1em; white-space: nowrap; flex-shrink: 0; position: relative; z-index: 1; }

.ba-dgs .banner--countdown { width: 100%; max-width: 700px; background: linear-gradient(108deg, #0f172a 0%, #0f172a 52%, #facc15 52%, #fef08a 100%); height: 76px; display: flex; align-items: center; overflow: hidden; position: relative; animation: ba-dgs-slideIn 0.45s ease 0.28s both; }
.ba-dgs .countdown-left { flex: 1; padding: 0 0 0 28px; display: flex; align-items: center; gap: 14px; }
.ba-dgs .countdown-tag { font-family: 'Anton', sans-serif; font-size: 11px; letter-spacing: 0.25em; color: rgba(255,255,255,0.4); text-transform: uppercase; }
.ba-dgs .countdown-title { font-family: 'Anton', sans-serif; font-size: 22px; color: white; letter-spacing: 0.04em; line-height: 1; }
.ba-dgs .countdown-right { width: 48%; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 28px; }
.ba-dgs .cd-unit { text-align: center; }
.ba-dgs .cd-num { font-family: 'Anton', sans-serif; font-size: 32px; color: #0f172a; line-height: 1; letter-spacing: -0.01em; }
.ba-dgs .cd-label { font-size: 8px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(15,23,42,0.5); margin-top: 1px; }
.ba-dgs .cd-colon { font-family: 'Anton', sans-serif; font-size: 28px; color: rgba(15,23,42,0.35); line-height: 1; margin-top: -6px; }

@keyframes ba-dgs-slideIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .ba-dgs > div { animation: none; } }
```

**JS:**
```js
(() => {
  const root = document.querySelector('.ba-dgs');
  if (!root) return;
  const h = root.querySelector('[data-ba-dgs-h]');
  const m = root.querySelector('[data-ba-dgs-m]');
  const s = root.querySelector('[data-ba-dgs-s]');
  if (!h || !m || !s) return;
  const end = Date.now() + 8 * 3600000 + 34 * 60000 + 17000;
  const pad = (n) => String(n).padStart(2, '0');
  function tick() {
    const diff = Math.max(0, end - Date.now());
    h.textContent = pad(Math.floor(diff / 3600000));
    m.textContent = pad(Math.floor((diff % 3600000) / 60000));
    s.textContent = pad(Math.floor((diff % 60000) / 1000));
  }
  tick();
  const id = setInterval(tick, 1000);
  root._baDgsTimer = id;
})();
```

### 11. Responsive Full Width Hero Banner CSS

**Type:** Pure CSS
**Description:** Three responsive full-width CSS hero banners stacked in completely different colour worlds — a dark cinematic mesh-gradient hero (Build faster / Ship bold) with grain texture overlay + glow eyebrow dot, a warm amber summer-collection hero, and a monochrome paper-grid hero for an open-source utility — all using <code>clamp()</code> for fluid typography throughout so no media queries are needed for type scaling. Each hero stacks gracefully to mobile. Unbounded + Outfit. Best for marketing landing pages, product launches, agency homepages, brand hero sections.

**HTML:**
```html
<section class="ba-hro" aria-label="Responsive full-width hero banner demo">
  <div class="hero hero--dark">
    <div class="hero-bg" aria-hidden="true"></div>
    <div class="hero-content">
      <div class="hero-eyebrow"><span class="hero-eyebrow-dot" aria-hidden="true"></span>New — Launching today</div>
      <h1 class="hero-title">Build<br><span class="thin">faster.</span><br>Ship <span class="accent">bold.</span></h1>
      <p class="hero-desc">The platform that scales from prototype to production without the complexity. One workflow, infinite possibilities.</p>
      <div class="hero-actions">
        <a href="#" class="btn-hero-primary">Get started free</a>
        <a href="#" class="btn-hero-ghost"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polygon points="5 3 19 12 5 21 5 3"/></svg> Watch demo</a>
      </div>
    </div>
  </div>

  <div class="hero hero--warm">
    <div class="hero-bg" aria-hidden="true"></div>
    <div class="hero-content">
      <div class="hero-eyebrow"><span class="hero-eyebrow-dot" aria-hidden="true"></span>Summer collection</div>
      <h1 class="hero-title">Made<br>for the<br><span class="accent">season.</span></h1>
      <p class="hero-desc">Thoughtfully designed pieces crafted from sustainable materials. Limited run — once they're gone, they're gone.</p>
      <div class="hero-actions">
        <a href="#" class="btn-hero-primary">Shop collection</a>
        <a href="#" class="btn-hero-ghost">Explore lookbook <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg></a>
      </div>
    </div>
  </div>

  <div class="hero hero--mono">
    <div class="hero-bg" aria-hidden="true"></div>
    <div class="hero-content">
      <div class="hero-eyebrow"><span class="hero-eyebrow-dot" aria-hidden="true"></span>Open source</div>
      <h1 class="hero-title">Simple.<br><span class="accent">Precise.</span><br>Fast.</h1>
      <p class="hero-desc">A zero-dependency CSS utility library with a 4 KB footprint. No build step. No configuration. Just drop it in and go.</p>
      <div class="hero-actions">
        <a href="#" class="btn-hero-primary">View on GitHub</a>
        <a href="#" class="btn-hero-ghost">Read the docs →</a>
      </div>
    </div>
  </div>
</section>
```

**CSS:**
```css
/* ─── 11 Responsive Full Width Hero Banner — cinematic ────────── */
@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@300;400;700;900&family=Outfit:wght@300;400;500&display=swap');

.ba-hro {
  position: relative;
  width: 100%;
  min-height: 1200px;
  font-family: 'Outfit', sans-serif;
  background: #050505;
  color: #fff;
  display: flex; flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
}
.ba-hro *, .ba-hro *::before, .ba-hro *::after { box-sizing: border-box; margin: 0; padding: 0; }

.ba-hro .hero { position: relative; width: 100%; min-height: 540px; display: flex; align-items: center; overflow: hidden; animation: ba-hro-fade 0.8s ease both; }
.ba-hro .hero--warm { animation-delay: 0.15s; } .ba-hro .hero--mono { animation-delay: 0.3s; }
@keyframes ba-hro-fade { from { opacity: 0; } to { opacity: 1; } }

.ba-hro .hero-bg { position: absolute; inset: 0; z-index: 0; }
.ba-hro .hero--dark .hero-bg { background: radial-gradient(ellipse 80% 60% at 70% 40%, rgba(99,102,241,0.35) 0%, transparent 60%), radial-gradient(ellipse 50% 50% at 20% 70%, rgba(236,72,153,0.2) 0%, transparent 55%), radial-gradient(ellipse 60% 40% at 80% 80%, rgba(6,182,212,0.15) 0%, transparent 50%), linear-gradient(160deg, #050510 0%, #0a0a1a 50%, #050505 100%); }
.ba-hro .hero--dark .hero-bg::after { content: ''; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E"); pointer-events: none; mix-blend-mode: screen; }
.ba-hro .hero--dark .hero-bg::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px); background-size: 80px 80px; mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black, transparent); }

.ba-hro .hero-content { position: relative; z-index: 1; width: 100%; max-width: 1200px; margin: 0 auto; padding: clamp(60px, 10vw, 120px) clamp(24px, 6vw, 80px); }
.ba-hro .hero-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: clamp(10px, 1.2vw, 12px); font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin-bottom: clamp(20px, 3vw, 32px); }
.ba-hro .hero-eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: #6366f1; animation: ba-hro-glow 2s ease-in-out infinite; }
@keyframes ba-hro-glow { 0%,100% { box-shadow: 0 0 0 0 rgba(99,102,241,0.5); } 50% { box-shadow: 0 0 0 6px rgba(99,102,241,0); } }
.ba-hro .hero-title { font-family: 'Unbounded', sans-serif; font-size: clamp(36px, 7vw, 96px); font-weight: 900; line-height: 1.0; letter-spacing: -0.02em; margin-bottom: clamp(20px, 3vw, 28px); max-width: 11ch; }
.ba-hro .hero-title .accent { color: #6366f1; }
.ba-hro .hero-title .thin { font-weight: 300; }
.ba-hro .hero-desc { font-size: clamp(14px, 1.8vw, 18px); font-weight: 300; color: rgba(255,255,255,0.55); line-height: 1.75; max-width: 480px; margin-bottom: clamp(32px, 5vw, 48px); }
.ba-hro .hero-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.ba-hro .btn-hero-primary { font-size: clamp(12px, 1.3vw, 14px); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; padding: clamp(12px, 1.8vw, 16px) clamp(24px, 3.5vw, 36px); background: white; color: #050510; border: none; border-radius: 4px; cursor: pointer; transition: all 0.22s ease; text-decoration: none; display: inline-block; }
.ba-hro .btn-hero-primary:hover { background: #6366f1; color: white; transform: translateY(-2px); box-shadow: 0 8px 32px rgba(99,102,241,0.4); }
.ba-hro .btn-hero-ghost { font-size: clamp(12px, 1.3vw, 14px); font-weight: 400; letter-spacing: 0.06em; color: rgba(255,255,255,0.6); background: transparent; text-decoration: none; transition: color 0.2s; display: flex; align-items: center; gap: 6px; }
.ba-hro .btn-hero-ghost svg { width: 16px; height: 16px; }
.ba-hro .btn-hero-ghost:hover { color: white; }

.ba-hro .hero--warm { color: #111; }
.ba-hro .hero--warm .hero-bg { background: radial-gradient(ellipse 60% 50% at 90% 20%, rgba(251,191,36,0.4) 0%, transparent 55%), radial-gradient(ellipse 50% 60% at 10% 90%, rgba(249,115,22,0.25) 0%, transparent 50%), linear-gradient(160deg, #fffbf0 0%, #fef3c7 50%, #fff8ed 100%); }
.ba-hro .hero--warm .hero-eyebrow { color: rgba(17,17,17,0.4); }
.ba-hro .hero--warm .hero-eyebrow-dot { background: #f59e0b; animation: none; box-shadow: none; }
.ba-hro .hero--warm .hero-title { color: #111; }
.ba-hro .hero--warm .hero-title .accent { color: #ea580c; }
.ba-hro .hero--warm .hero-desc { color: rgba(17,17,17,0.5); }
.ba-hro .hero--warm .btn-hero-primary { background: #111; color: white; }
.ba-hro .hero--warm .btn-hero-primary:hover { background: #ea580c; box-shadow: 0 8px 32px rgba(234,88,12,0.3); }
.ba-hro .hero--warm .btn-hero-ghost { color: rgba(17,17,17,0.5); }
.ba-hro .hero--warm .btn-hero-ghost:hover { color: #111; }

.ba-hro .hero--mono { background: #fff; color: #111; }
.ba-hro .hero--mono .hero-bg { background: #fff; background-image: repeating-linear-gradient(0deg, transparent, transparent 47px, rgba(0,0,0,0.04) 47px, rgba(0,0,0,0.04) 48px); }
.ba-hro .hero--mono .hero-eyebrow { color: rgba(17,17,17,0.35); }
.ba-hro .hero--mono .hero-eyebrow-dot { background: #111; animation: none; box-shadow: none; }
.ba-hro .hero--mono .hero-title { color: #111; }
.ba-hro .hero--mono .hero-title .accent { -webkit-text-stroke: 1px #111; color: transparent; }
.ba-hro .hero--mono .hero-desc { color: rgba(17,17,17,0.45); }
.ba-hro .hero--mono .btn-hero-primary { background: #111; color: white; border-radius: 2px; }
.ba-hro .hero--mono .btn-hero-primary:hover { background: #333; box-shadow: none; }
.ba-hro .hero--mono .btn-hero-ghost { color: rgba(17,17,17,0.45); }

@media (prefers-reduced-motion: reduce) { .ba-hro .hero, .ba-hro .hero-eyebrow-dot { animation: none !important; } }
```

### 12. CSS Gradient Animated Border Alert

**Type:** CSS + JS
**Description:** Three CSS gradient-animated border alerts in a web3 / iridescent holographic aesthetic — three techniques side-by-side: a <code>@property --angle</code> conic-gradient spinning border with blurred glow bloom (Premium plan upgrade), a <code>background-position</code> shifting linear gradient for maximum browser support (AI-Powered suggestions card), and an SVG <code>stroke-dashoffset</code> animation driven by ResizeObserver (v6.0 New Release card). Each card has a badge + title + body + dual-action footer. Space Grotesk + Space Mono. Best for web3 sites, AI / ML products, premium upgrade prompts, web3 dashboards.

**HTML:**
```html
<section class="ba-grd" aria-label="Gradient animated border alert demo">
  <span class="label">// method 1 — @property conic-gradient spin</span>
  <div class="gcard-wrap">
    <div class="gcard">
      <div class="card-eyebrow"><span class="card-badge">✦ Premium</span><span class="card-live" aria-hidden="true"></span></div>
      <div class="card-title">Your plan has been upgraded.</div>
      <div class="card-body">Welcome to Pro. Unlimited API requests, priority support, and access to experimental features are now active on your account.</div>
      <div class="card-actions">
        <button class="btn-primary" type="button">Explore features</button>
        <button class="btn-ghost" type="button">View invoice →</button>
      </div>
    </div>
  </div>

  <span class="label">// method 2 — background-position shift</span>
  <div class="gcard-wrap gcard-wrap--linear">
    <div class="gcard">
      <div class="card-eyebrow"><span class="card-badge card-badge--blue">⬡ AI-Powered</span></div>
      <div class="card-title">Smart suggestions are now active.</div>
      <div class="card-body">The AI model has analysed 2,400 patterns in your codebase and is ready to suggest completions, catch bugs, and explain complex logic inline.</div>
      <div class="card-actions">
        <button class="btn-primary" type="button">Open editor</button>
        <button class="btn-ghost" type="button">How it works</button>
      </div>
    </div>
  </div>

  <span class="label">// method 3 — SVG stroke-dashoffset</span>
  <div class="gcard-wrap gcard-wrap--dash" data-ba-grd-dash>
    <svg class="dash-svg" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
      <defs>
        <linearGradient id="ba-grd-dashGrad" x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" stop-color="#7c3aed"/><stop offset="33%" stop-color="#0ea5e9"/><stop offset="66%" stop-color="#10b981"/><stop offset="100%" stop-color="#f59e0b"/>
        </linearGradient>
      </defs>
    </svg>
    <div class="gcard">
      <div class="card-eyebrow"><span class="card-badge card-badge--green">◈ New Release</span></div>
      <div class="card-title">v6.0 is available — major update.</div>
      <div class="card-body">This release brings a redesigned query builder, a 40% reduction in bundle size, and full TypeScript 5.4 support. Review the migration guide before upgrading.</div>
      <div class="card-actions">
        <button class="btn-primary" type="button">Upgrade now</button>
        <button class="btn-ghost" type="button">Migration guide →</button>
      </div>
    </div>
  </div>
</section>
```

**CSS:**
```css
/* ─── 12 Gradient Animated Border Alert — holographic ─────────── */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

@property --ba-grd-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.ba-grd {
  --ba-grd-bg: #06060e;
  --ba-grd-card: #0d0d1a;
  --ba-grd-text: #e8e8ff;
  --ba-grd-muted: rgba(232,232,255,0.45);
  --ba-grd-g1: #7c3aed; --ba-grd-g2: #db2777; --ba-grd-g3: #0ea5e9; --ba-grd-g4: #10b981; --ba-grd-g5: #f59e0b;
  --ba-grd-border-size: 2px;
  --ba-grd-radius: 14px;

  position: relative;
  width: 100%;
  min-height: 920px;
  background: var(--ba-grd-bg);
  background-image: radial-gradient(ellipse 60% 40% at 50% 0%, rgba(124,58,237,0.12) 0%, transparent 60%);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 24px;
  padding: 60px 20px;
  font-family: 'Space Grotesk', sans-serif;
  color: var(--ba-grd-text);
  box-sizing: border-box;
}
.ba-grd *, .ba-grd *::before, .ba-grd *::after { box-sizing: border-box; margin: 0; padding: 0; }

.ba-grd .label { font-family: 'Space Mono', monospace; font-size: 9px; letter-spacing: 0.25em; text-transform: uppercase; color: rgba(255,255,255,0.14); align-self: flex-start; max-width: 580px; width: 100%; }

.ba-grd .gcard-wrap { position: relative; border-radius: var(--ba-grd-radius); padding: var(--ba-grd-border-size); background: conic-gradient(from var(--ba-grd-angle, 0deg), var(--ba-grd-g1), var(--ba-grd-g2), var(--ba-grd-g3), var(--ba-grd-g4), var(--ba-grd-g5), var(--ba-grd-g1)); animation: ba-grd-spin 3s linear infinite; max-width: 580px; width: 100%; }
@keyframes ba-grd-spin { to { --ba-grd-angle: 360deg; } }
.ba-grd .gcard-wrap::before { content: ''; position: absolute; inset: -4px; border-radius: calc(var(--ba-grd-radius) + 4px); background: inherit; filter: blur(16px); opacity: 0.45; z-index: -1; }

.ba-grd .gcard { background: var(--ba-grd-card); border-radius: calc(var(--ba-grd-radius) - var(--ba-grd-border-size)); padding: 24px 26px; position: relative; overflow: hidden; }
.ba-grd .gcard::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,0.04) 0%, transparent 40%, rgba(255,255,255,0.02) 100%); pointer-events: none; border-radius: inherit; }

.ba-grd .gcard-wrap--linear { background-size: 300% 300%; background-image: linear-gradient(130deg, var(--ba-grd-g3), var(--ba-grd-g1), var(--ba-grd-g2), var(--ba-grd-g3), var(--ba-grd-g4), var(--ba-grd-g1)); animation: ba-grd-shift 4s linear infinite; }
@keyframes ba-grd-shift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }

.ba-grd .gcard-wrap--dash { background: none; animation: none; padding: 0; position: relative; }
.ba-grd .gcard-wrap--dash::before { display: none; }
.ba-grd .gcard-wrap--dash .gcard { border-radius: var(--ba-grd-radius); position: relative; z-index: 1; border: 2px solid transparent; background-clip: padding-box; background: var(--ba-grd-card); }
.ba-grd .dash-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; border-radius: var(--ba-grd-radius); overflow: visible; }
.ba-grd .dash-rect { fill: none; stroke: url(#ba-grd-dashGrad); stroke-width: 2; stroke-dasharray: 12 6; animation: ba-grd-dashMove 1.5s linear infinite; }
@keyframes ba-grd-dashMove { to { stroke-dashoffset: -36; } }

.ba-grd .card-eyebrow { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.ba-grd .card-badge { font-family: 'Space Mono', monospace; font-size: 9px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; padding: 3px 8px; border-radius: 4px; background: rgba(124,58,237,0.15); border: 1px solid rgba(124,58,237,0.3); color: #a78bfa; }
.ba-grd .card-badge--blue { background: rgba(14,165,233,0.12); border-color: rgba(14,165,233,0.3); color: #38bdf8; }
.ba-grd .card-badge--green { background: rgba(16,185,129,0.12); border-color: rgba(16,185,129,0.3); color: #34d399; }
.ba-grd .card-live { width: 7px; height: 7px; border-radius: 50%; background: #10b981; animation: ba-grd-liveDot 1.5s ease-in-out infinite; flex-shrink: 0; margin-left: auto; }
@keyframes ba-grd-liveDot { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
.ba-grd .card-title { font-size: 18px; font-weight: 700; color: var(--ba-grd-text); line-height: 1.3; margin-bottom: 8px; letter-spacing: -0.01em; }
.ba-grd .card-body { font-size: 13.5px; font-weight: 400; color: var(--ba-grd-muted); line-height: 1.7; margin-bottom: 18px; }
.ba-grd .card-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ba-grd .btn-primary { font-family: 'Space Grotesk', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; padding: 9px 18px; background: linear-gradient(135deg, var(--ba-grd-g1), var(--ba-grd-g2)); color: white; border: none; border-radius: 8px; cursor: pointer; transition: all 0.2s; }
.ba-grd .btn-primary:hover { opacity: 0.88; transform: translateY(-1px); box-shadow: 0 4px 20px rgba(124,58,237,0.4); }
.ba-grd .btn-ghost { font-family: 'Space Mono', monospace; font-size: 11px; color: var(--ba-grd-muted); background: transparent; border: none; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; transition: color 0.18s; }
.ba-grd .btn-ghost:hover { color: var(--ba-grd-text); }

@media (prefers-reduced-motion: reduce) { .ba-grd .gcard-wrap, .ba-grd .card-live, .ba-grd .dash-rect { animation: none !important; } }
```

**JS:**
```js
(() => {
  const root = document.querySelector('.ba-grd');
  if (!root) return;
  const wrap = root.querySelector('[data-ba-grd-dash]');
  if (!wrap) return;
  const svg = wrap.querySelector('svg.dash-svg');
  if (!svg || !('ResizeObserver' in window)) return;
  const ro = new ResizeObserver((entries) => {
    for (const e of entries) {
      const { width, height } = e.contentRect;
      if (!width || !height) continue;
      const r = 14, s = 2;
      svg.setAttribute('viewBox', '0 0 ' + width + ' ' + height);
      svg.setAttribute('width', width);
      svg.setAttribute('height', height);
      const existing = svg.querySelector('rect.dash-rect');
      if (existing) existing.remove();
      const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
      rect.setAttribute('x', s / 2);
      rect.setAttribute('y', s / 2);
      rect.setAttribute('width', width - s);
      rect.setAttribute('height', height - s);
      rect.setAttribute('rx', r);
      rect.setAttribute('ry', r);
      rect.setAttribute('class', 'dash-rect');
      svg.appendChild(rect);
    }
  });
  ro.observe(wrap);
})();
```

### 13. Material Design Floating Alert Card

**Type:** Pure CSS
**Description:** Material Design floating alert cards in an authentic Material You aesthetic — tactile physical depth via dual-layer shadows (ambient + directional), tinted icon containers using <code>color-mix()</code>, pill-shaped buttons with transparent <code>::after</code> ripple overlay, coloured top strip for semantic indication, and a full semantic set (Error / Success / Warning / Info / Primary). Plus a dark Snackbar variant with an Undo action. DM Sans + Roboto Mono. Best for Material You apps, Android-inspired web UIs, Material 3 design systems, mobile-first web apps.

**HTML:**
```html
<section class="ba-mat" aria-label="Material Design floating alert demo">
  <div class="label">// Material You alert cards</div>

  <div class="md-alert md-alert--error">
    <div class="md-alert-strip" aria-hidden="true"></div>
    <div class="md-alert-body">
      <div class="md-icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/></svg></div>
      <div class="md-text"><div class="md-supporting">Error · Authentication</div><div class="md-headline">Sign-in failed</div><div class="md-body-text">Your session has expired or the credentials provided are incorrect. Please sign in again to continue.</div></div>
    </div>
    <div class="md-divider" aria-hidden="true"></div>
    <div class="md-actions"><button class="md-btn md-btn--text" type="button">Dismiss</button><button class="md-btn md-btn--filled" type="button">Sign in</button></div>
  </div>

  <div class="md-alert md-alert--success">
    <div class="md-alert-strip" aria-hidden="true"></div>
    <div class="md-alert-body">
      <div class="md-icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg></div>
      <div class="md-text"><div class="md-supporting">Confirmed · Payment</div><div class="md-headline">Order placed successfully</div><div class="md-body-text">Order #ORD-88214 has been confirmed. Your package will be dispatched within 1 business day.</div></div>
    </div>
    <div class="md-divider" aria-hidden="true"></div>
    <div class="md-actions"><button class="md-btn md-btn--text" type="button">Dismiss</button><button class="md-btn md-btn--filled" type="button">Track order</button></div>
  </div>

  <div class="md-alert md-alert--warning">
    <div class="md-alert-strip" aria-hidden="true"></div>
    <div class="md-alert-body">
      <div class="md-icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/></svg></div>
      <div class="md-text"><div class="md-supporting">Warning · Storage</div><div class="md-headline">Storage limit almost reached</div><div class="md-body-text">You've used 4.7 GB of your 5 GB quota. Manage files or upgrade your plan to avoid disruption.</div></div>
    </div>
    <div class="md-divider" aria-hidden="true"></div>
    <div class="md-actions"><button class="md-btn md-btn--text" type="button">Manage files</button><button class="md-btn md-btn--filled" type="button">Upgrade</button></div>
  </div>

  <div class="md-alert md-alert--info">
    <div class="md-alert-strip" aria-hidden="true"></div>
    <div class="md-alert-body">
      <div class="md-icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/></svg></div>
      <div class="md-text"><div class="md-supporting">Info · Maintenance</div><div class="md-headline">Scheduled downtime this weekend</div><div class="md-body-text">We'll be performing infrastructure upgrades Saturday 23:00–01:00 UTC.</div></div>
    </div>
    <div class="md-divider" aria-hidden="true"></div>
    <div class="md-actions"><button class="md-btn md-btn--text" type="button">Remind me</button><button class="md-btn md-btn--filled" type="button">View details</button></div>
  </div>

  <div class="md-alert md-alert--primary">
    <div class="md-alert-strip" aria-hidden="true"></div>
    <div class="md-alert-body">
      <div class="md-icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 1l2.7 7.6H22l-6.2 4.6 2.4 7.4L12 16.2 5.8 20.6l2.4-7.4L2 8.6h7.3z"/></svg></div>
      <div class="md-text"><div class="md-supporting">New · Feature update</div><div class="md-headline">AI writing assistant is live</div><div class="md-body-text">Smart autocomplete is now available in the editor. Start typing to see contextual suggestions powered by your writing style.</div></div>
    </div>
    <div class="md-divider" aria-hidden="true"></div>
    <div class="md-actions"><button class="md-btn md-btn--text" type="button">Later</button><button class="md-btn md-btn--filled" type="button">Try now</button></div>
  </div>

  <div class="label label-spaced">// Snackbar variant</div>
  <div class="md-snack" role="status">
    <span class="md-snack-text">Message sent · Archived to your sent folder.</span>
    <button class="md-snack-action" type="button">Undo</button>
  </div>
</section>
```

**CSS:**
```css
/* ─── 13 Material Design Floating Alert Card — Material You ─── */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;700&family=Roboto+Mono:wght@400;500&display=swap');

.ba-mat {
  --ba-mat-background: #fef7ff;
  --ba-mat-surface: #fff;
  --ba-mat-surface-variant: #e7e0ec;
  --ba-mat-on-surface: #1c1b1f;
  --ba-mat-on-surface-variant: #49454f;
  --ba-mat-outline: #79747e;
  --ba-mat-outline-variant: #cac4d0;
  --ba-mat-primary: #6750a4;
  --ba-mat-primary-container: #eaddff;
  --ba-mat-error: #b3261e;
  --ba-mat-error-container: #f9dedc;
  --ba-mat-c-success: #386a20; --ba-mat-c-success-bg: #c5ecca;
  --ba-mat-c-warning: #6e4a00; --ba-mat-c-warning-bg: #ffddb5;
  --ba-mat-c-info: #0061a4; --ba-mat-c-info-bg: #d1e4ff;
  --ba-mat-elev-1: 0 1px 2px rgba(0,0,0,0.3), 0 1px 3px 1px rgba(0,0,0,0.15);
  --ba-mat-elev-2: 0 1px 2px rgba(0,0,0,0.3), 0 2px 6px 2px rgba(0,0,0,0.15);
  --ba-mat-elev-3: 0 4px 8px 3px rgba(0,0,0,0.15), 0 1px 3px rgba(0,0,0,0.3);
  --ba-mat-elev-4: 0 6px 10px 4px rgba(0,0,0,0.15), 0 2px 3px rgba(0,0,0,0.3);
  --ba-mat-radius-sm: 12px;
  --ba-mat-radius-md: 16px;
  --ba-mat-radius-full: 1000px;

  position: relative;
  width: 100%;
  min-height: 1000px;
  background: var(--ba-mat-background);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px;
  padding: 60px 20px;
  font-family: 'Roboto', 'DM Sans', sans-serif;
  color: var(--ba-mat-on-surface);
  box-sizing: border-box;
}
.ba-mat *, .ba-mat *::before, .ba-mat *::after { box-sizing: border-box; margin: 0; padding: 0; }

.ba-mat .label { font-family: 'Roboto Mono', monospace; font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ba-mat-outline); opacity: 0.5; align-self: flex-start; max-width: 560px; width: 100%; }
.ba-mat .label-spaced { margin-top: 8px; }

.ba-mat .md-alert { width: 100%; max-width: 560px; background: var(--ba-mat-surface); border-radius: var(--ba-mat-radius-md); box-shadow: var(--ba-mat-elev-3); overflow: hidden; transition: box-shadow 0.25s, transform 0.25s; animation: ba-mat-in 0.35s cubic-bezier(0.05, 0.7, 0.1, 1.0) both; }
.ba-mat .md-alert:hover { box-shadow: var(--ba-mat-elev-4); transform: translateY(-2px); }
.ba-mat .md-alert:nth-child(2) { animation-delay: 0.0s; } .ba-mat .md-alert:nth-child(3) { animation-delay: 0.06s; } .ba-mat .md-alert:nth-child(4) { animation-delay: 0.12s; } .ba-mat .md-alert:nth-child(5) { animation-delay: 0.18s; } .ba-mat .md-alert:nth-child(6) { animation-delay: 0.24s; }
@keyframes ba-mat-in { from { opacity: 0; transform: scale(0.94) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } }
.ba-mat .md-alert-strip { height: 4px; width: 100%; }
.ba-mat .md-alert-body { padding: 16px 16px 12px; display: flex; gap: 16px; align-items: flex-start; }
.ba-mat .md-icon { flex-shrink: 0; width: 40px; height: 40px; border-radius: var(--ba-mat-radius-sm); display: flex; align-items: center; justify-content: center; }
.ba-mat .md-icon svg { width: 24px; height: 24px; }
.ba-mat .md-text { flex: 1; min-width: 0; }
.ba-mat .md-supporting { font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ba-mat-on-surface-variant); margin-bottom: 4px; }
.ba-mat .md-headline { font-family: 'DM Sans', sans-serif; font-size: 16px; font-weight: 500; color: var(--ba-mat-on-surface); line-height: 1.3; letter-spacing: 0.01em; margin-bottom: 6px; }
.ba-mat .md-body-text { font-size: 13.5px; color: var(--ba-mat-on-surface-variant); line-height: 1.6; }
.ba-mat .md-divider { height: 1px; background: var(--ba-mat-outline-variant); margin: 0 16px; }
.ba-mat .md-actions { display: flex; align-items: center; justify-content: flex-end; gap: 4px; padding: 8px; }
.ba-mat .md-btn { font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 500; letter-spacing: 0.06em; padding: 8px 16px; border: none; border-radius: var(--ba-mat-radius-full); cursor: pointer; position: relative; overflow: hidden; transition: all 0.2s; background: transparent; }
.ba-mat .md-btn::after { content: ''; position: absolute; inset: 0; background: currentColor; opacity: 0; transition: opacity 0.2s; border-radius: inherit; }
.ba-mat .md-btn:hover::after { opacity: 0.08; }
.ba-mat .md-btn:active::after { opacity: 0.16; }
.ba-mat .md-btn--text { color: var(--ba-mat-on-surface-variant); }
.ba-mat .md-btn--filled { padding: 8px 24px; color: white; box-shadow: var(--ba-mat-elev-1); }
.ba-mat .md-btn--filled:hover { box-shadow: var(--ba-mat-elev-2); }

.ba-mat .md-alert--error .md-alert-strip { background: var(--ba-mat-error); }
.ba-mat .md-alert--error .md-icon { background: var(--ba-mat-error-container); color: var(--ba-mat-error); }
.ba-mat .md-alert--error .md-btn--filled { background: var(--ba-mat-error); }
.ba-mat .md-alert--error .md-btn--text { color: var(--ba-mat-error); }

.ba-mat .md-alert--success .md-alert-strip { background: var(--ba-mat-c-success); }
.ba-mat .md-alert--success .md-icon { background: var(--ba-mat-c-success-bg); color: var(--ba-mat-c-success); }
.ba-mat .md-alert--success .md-btn--filled { background: var(--ba-mat-c-success); }
.ba-mat .md-alert--success .md-btn--text { color: var(--ba-mat-c-success); }

.ba-mat .md-alert--warning .md-alert-strip { background: var(--ba-mat-c-warning); }
.ba-mat .md-alert--warning .md-icon { background: var(--ba-mat-c-warning-bg); color: var(--ba-mat-c-warning); }
.ba-mat .md-alert--warning .md-btn--filled { background: var(--ba-mat-c-warning); }
.ba-mat .md-alert--warning .md-btn--text { color: var(--ba-mat-c-warning); }

.ba-mat .md-alert--info .md-alert-strip { background: var(--ba-mat-c-info); }
.ba-mat .md-alert--info .md-icon { background: var(--ba-mat-c-info-bg); color: var(--ba-mat-c-info); }
.ba-mat .md-alert--info .md-btn--filled { background: var(--ba-mat-c-info); }
.ba-mat .md-alert--info .md-btn--text { color: var(--ba-mat-c-info); }

.ba-mat .md-alert--primary .md-alert-strip { background: var(--ba-mat-primary); }
.ba-mat .md-alert--primary .md-icon { background: var(--ba-mat-primary-container); color: var(--ba-mat-primary); }
.ba-mat .md-alert--primary .md-btn--filled { background: var(--ba-mat-primary); }
.ba-mat .md-alert--primary .md-btn--text { color: var(--ba-mat-primary); }

.ba-mat .md-snack { width: 100%; max-width: 560px; background: #313033; border-radius: var(--ba-mat-radius-sm); box-shadow: var(--ba-mat-elev-3); padding: 12px 8px 12px 16px; display: flex; align-items: center; gap: 16px; animation: ba-mat-in 0.35s cubic-bezier(0.05, 0.7, 0.1, 1.0) 0.3s both; }
.ba-mat .md-snack-text { flex: 1; font-size: 14px; font-weight: 400; color: #e6e1e5; line-height: 1.4; }
.ba-mat .md-snack-action { font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 500; color: #d0bcff; letter-spacing: 0.06em; background: transparent; border: none; border-radius: var(--ba-mat-radius-full); padding: 8px 12px; cursor: pointer; white-space: nowrap; }

@media (prefers-reduced-motion: reduce) { .ba-mat .md-alert, .ba-mat .md-snack { animation: none; } }
```

### 14. CSS Text Wrap Banner with Long Strings

**Type:** Pure CSS
**Description:** A CSS text-wrap banner demo in a developer terminal / GitHub-dark aesthetic — rendered as a real terminal window (traffic-light dots, title bar) with syntax-highlighted error log lines, side-by-side comparison of broken (truncated, <code>white-space: nowrap</code>) vs fixed (<code>overflow-wrap: break-word</code> applied) vs scrollable alternatives. The actual CSS rules are displayed in a syntax-highlighted code block inside the demo itself — copy-paste ready. Tests against real-world strings: long URLs, stack-trace paths, env values, JWT tokens. JetBrains Mono + Sora. Best for developer documentation, status pages, error log UIs, terminal-style displays.

**HTML:**
```html
<section class="ba-twp" aria-label="Text wrap banner demo">
  <div class="terminal">
    <div class="terminal-bar" aria-hidden="true">
      <span class="term-dot term-dot--close"></span>
      <span class="term-dot term-dot--min"></span>
      <span class="term-dot term-dot--full"></span>
      <span class="term-title">system-log — error.log — 128×38</span>
    </div>

    <div class="alerts">
      <div class="term-section">✓ correct — overflow-wrap applied</div>

      <div class="alert-row">
        <span class="line-num" aria-hidden="true">1</span>
        <span class="alert-prefix dot-err" aria-hidden="true">✖</span>
        <div class="alert-message"><div class="alert-text"><strong class="err">ERR_CERT_AUTHORITY_INVALID</strong> Failed to fetch resource at:<br><span class="path">https://cdn.staging.acme-corp-internal.vercel.app/assets/fonts/GregorianDisplay-ExtraBold-VF-v4.2.1-webfont.woff2?v=1729472910&amp;region=us-east&amp;fallback=true&amp;cache=immutable&amp;host=edge</span></div></div>
      </div>

      <div class="alert-row">
        <span class="line-num" aria-hidden="true">2</span>
        <span class="alert-prefix dot-err" aria-hidden="true">✖</span>
        <div class="alert-message"><div class="alert-text"><strong class="err">TypeError:</strong> Cannot read properties of undefined (reading 'map') at <span class="path">/home/runner/work/monorepo/packages/ui/src/components/DataGrid/VirtualizedRows/RowRenderer.tsx:148:22</span></div></div>
      </div>

      <div class="alert-row">
        <span class="line-num" aria-hidden="true">3</span>
        <span class="alert-prefix dot-warn" aria-hidden="true">⚠</span>
        <div class="alert-message"><div class="alert-text"><strong class="warn">ENV_PARSE_ERROR</strong> Malformed value in <span class="path">.env.production</span>:<br><span class="key">DATABASE_URL</span>=<span class="val">postgres://admin:s3cr3tP@ssw0rd!2024@db-primary-replica-cluster.us-east-1.rds.amazonaws.com:5432/production_db_v3?sslmode=require&amp;connect_timeout=10</span></div></div>
      </div>

      <div class="alert-row">
        <span class="line-num" aria-hidden="true">4</span>
        <span class="alert-prefix dot-info" aria-hidden="true">ℹ</span>
        <div class="alert-message"><div class="alert-text"><strong>JWT_DECODE_FAILURE</strong> Token received from <span class="path">Authorization: Bearer</span> header could not be verified:<br><span class="val">eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6InByaW1hcnkta2V5LTIwMjQtMDYifQ.eyJzdWIiOiJ1c3ItOTkxMjM0NTY3ODkwYWJjZGVmZ2hpamtsbW5vcHFyc3R1dnd4eXoiLCJpYXQiOjE3MjA0ODAwMDB9.INVALID</span></div></div>
      </div>

      <div class="term-section">✕ comparison — no overflow-wrap (truncated)</div>

      <div class="alert-row">
        <span class="line-num" aria-hidden="true">5</span>
        <span class="alert-prefix dot-err" aria-hidden="true">✖</span>
        <div class="alert-message alert-message--broken"><div class="alert-text"><strong class="err">ERR_CERT:</strong> https://cdn.staging.acme-corp-internal.vercel.app/assets/fonts/GregorianDisplay-ExtraBold-VF-v4.2.1-webfont.woff2?v=1729472910</div></div>
      </div>

      <div class="term-section">~ scrollable — white-space: nowrap + overflow-x: auto</div>

      <div class="alert-row">
        <span class="line-num" aria-hidden="true">6</span>
        <span class="alert-prefix dot-info" aria-hidden="true">ℹ</span>
        <div class="alert-message alert-message--broken-scroll"><div class="alert-text"><span class="key">TRACE</span> <span class="path">GET /api/v3/internal/users/usr-9912345/preferences/notifications/email/digest?locale=en-US&amp;timezone=America%2FNew_York&amp;format=json&amp;include_archived=true</span> <span class="val">→ 200</span> <span class="warn">in 1423ms</span></div></div>
      </div>

      <div class="term-section">// the fix — CSS rules</div>

      <div class="code-block">
        <span class="cline"><span class="c-selector">.banner-message</span> {</span>
        <span class="cline">  <span class="c-property">min-width</span>: <span class="c-value">0</span>; <span class="c-comment">/* allow flex child to shrink */</span></span>
        <span class="cline">  <span class="c-property">overflow-wrap</span>: <span class="c-value">break-word</span>; <span class="c-comment">/* break long tokens */</span></span>
        <span class="cline">  <span class="c-property">word-break</span>: <span class="c-value">break-word</span>; <span class="c-comment">/* legacy alias */</span></span>
        <span class="cline">  <span class="c-property">white-space</span>: <span class="c-value">pre-wrap</span>; <span class="c-comment">/* preserve \n, wrap normally */</span></span>
        <span class="cline">  <span class="c-property">hyphens</span>: <span class="c-value">auto</span>; <span class="c-comment">/* optional: soft hyphens */</span></span>
        <span class="cline">}</span>
      </div>
    </div>
  </div>
</section>
```

**CSS:**
```css
/* ─── 14 Text Wrap Banner with Long Strings — terminal ───────── */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,300;0,400;0,500;0,700;1,400&family=Sora:wght@400;600;700&display=swap');

.ba-twp {
  --ba-twp-bg: #0f1117;
  --ba-twp-surface: #161b22;
  --ba-twp-surface-2: #1c2128;
  --ba-twp-border: rgba(255,255,255,0.08);
  --ba-twp-text: #e6edf3;
  --ba-twp-muted: rgba(230,237,243,0.5);
  --ba-twp-green: #3fb950;
  --ba-twp-red: #f85149;
  --ba-twp-amber: #d29922;
  --ba-twp-blue: #58a6ff;
  --ba-twp-purple: #d2a8ff;

  position: relative;
  width: 100%;
  min-height: 720px;
  background: var(--ba-twp-bg);
  background-image: radial-gradient(ellipse 50% 30% at 50% 0%, rgba(88,166,255,0.06) 0%, transparent 60%);
  font-family: 'JetBrains Mono', monospace;
  color: var(--ba-twp-text);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 48px 16px;
  box-sizing: border-box;
}
.ba-twp *, .ba-twp *::before, .ba-twp *::after { box-sizing: border-box; margin: 0; padding: 0; }

.ba-twp .terminal { width: 100%; max-width: 760px; background: var(--ba-twp-surface); border: 1px solid var(--ba-twp-border); border-radius: 10px; overflow: hidden; box-shadow: 0 16px 48px rgba(0,0,0,0.5); animation: ba-twp-up 0.5s ease both; }
@keyframes ba-twp-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

.ba-twp .terminal-bar { background: var(--ba-twp-surface-2); border-bottom: 1px solid var(--ba-twp-border); padding: 10px 16px; display: flex; align-items: center; gap: 8px; }
.ba-twp .term-dot { width: 12px; height: 12px; border-radius: 50%; }
.ba-twp .term-dot--close { background: #ff5f57; } .ba-twp .term-dot--min { background: #ffbd2e; } .ba-twp .term-dot--full { background: #28c840; }
.ba-twp .term-title { flex: 1; text-align: center; font-size: 11px; font-weight: 500; color: rgba(255,255,255,0.35); letter-spacing: 0.06em; margin-right: 36px; }

.ba-twp .alerts { padding: 0; display: flex; flex-direction: column; }
.ba-twp .term-section { background: var(--ba-twp-bg); border-bottom: 1px solid var(--ba-twp-border); padding: 8px 20px; font-size: 9px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.2); display: flex; align-items: center; gap: 10px; }
.ba-twp .term-section::after { content: ''; flex: 1; height: 1px; background: var(--ba-twp-border); }

.ba-twp .alert-row { border-bottom: 1px solid var(--ba-twp-border); padding: 14px 20px; position: relative; display: flex; align-items: flex-start; gap: 12px; transition: background 0.15s; }
.ba-twp .alert-row:last-child { border-bottom: none; }
.ba-twp .alert-row:hover { background: rgba(255,255,255,0.02); }
.ba-twp .alert-message { flex: 1; min-width: 0; overflow-wrap: break-word; word-break: break-word; -webkit-hyphens: auto; hyphens: auto; }
.ba-twp .alert-message--broken { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ba-twp .alert-message--broken-scroll { overflow-x: auto; white-space: nowrap; padding-bottom: 4px; }
.ba-twp .alert-prefix { flex-shrink: 0; font-size: 11.5px; font-weight: 700; white-space: nowrap; padding-top: 1px; }
.ba-twp .alert-text { font-size: 12.5px; font-weight: 400; line-height: 1.7; color: var(--ba-twp-muted); }
.ba-twp .alert-text strong { font-weight: 700; color: var(--ba-twp-text); }
.ba-twp .path { color: var(--ba-twp-blue); font-weight: 500; }
.ba-twp .val { color: var(--ba-twp-green); }
.ba-twp .err { color: var(--ba-twp-red); }
.ba-twp .warn { color: var(--ba-twp-amber); }
.ba-twp .key { color: var(--ba-twp-purple); }
.ba-twp .line-num { flex-shrink: 0; font-size: 10px; color: rgba(255,255,255,0.18); user-select: none; padding-top: 2px; min-width: 20px; text-align: right; }
.ba-twp .dot-err { color: var(--ba-twp-red); } .ba-twp .dot-ok { color: var(--ba-twp-green); } .ba-twp .dot-warn { color: var(--ba-twp-amber); } .ba-twp .dot-info { color: var(--ba-twp-blue); }

.ba-twp .code-block { background: var(--ba-twp-bg); border: 1px solid var(--ba-twp-border); border-radius: 6px; padding: 14px 18px; margin: 12px 20px; font-size: 12px; line-height: 1.8; color: var(--ba-twp-muted); counter-reset: cline; }
.ba-twp .cline { display: block; counter-increment: cline; padding-left: 32px; position: relative; }
.ba-twp .cline::before { content: counter(cline); position: absolute; left: 0; width: 24px; text-align: right; color: rgba(255,255,255,0.15); font-size: 11px; user-select: none; }
.ba-twp .c-selector { color: #79c0ff; }
.ba-twp .c-property { color: #d2a8ff; }
.ba-twp .c-value { color: #a5d6ff; }
.ba-twp .c-comment { color: rgba(255,255,255,0.25); font-style: italic; }

@media (prefers-reduced-motion: reduce) { .ba-twp .terminal { animation: none; } }
```

---
## 19 CSS Blockquote Designs

URL: https://codefronts.com/snippets/css-blockquotes/
Description: 19 hand-coded CSS blockquote designs — pull quotes, testimonials, speech bubbles, tweet style, newspaper drop-caps, code comments and more. Semantic HTML, copy-paste ready.
Demo count: 19

### 01. Classic Mark

**Type:** Pure CSS
**Description:** A large violet open-quote glyph rendered as a CSS pseudo-element above an italic body, with a thin left rule. The benchmark every blockquote is measured against.

**HTML:**
```html
<figure class="cbq-classic">
  <blockquote>
    <p>Design is not just what it looks like and feels like. Design is how it works.</p>
  </blockquote>
  <figcaption>— Steve Jobs</figcaption>
</figure>
```

**CSS:**
```css
.cbq-classic {
  position: relative;
  max-width: 360px;
  padding: 28px 28px 18px;
  background: #1a1a26;
  border-left: 3px solid #7c6cff;
  border-radius: 6px;
  font-family: Georgia, serif;
  color: #e9e7ff;
}

.cbq-classic::before {
  content: "\201C";
  position: absolute;
  top: -10px;
  left: 14px;
  font-family: Georgia, serif;
  font-size: 64px;
  line-height: 1;
  color: #7c6cff;
}

.cbq-classic blockquote {
  margin: 0;
}

.cbq-classic p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  font-style: italic;
}

.cbq-classic figcaption {
  margin-top: 10px;
  font-size: 12px;
  color: #b8b6d4;
  font-style: normal;
}
```

### 02. Brutalist Stamp

**Type:** Pure CSS
**Description:** Hard-edged offset-shadow card with mono font and a hot-pink accent — zero radius, zero apology. Brutalist design system fixture.

**HTML:**
```html
<figure class="cbq-brut">
  <blockquote>
    <p>SHIP IT. THE DOCS CAN COME LATER.</p>
  </blockquote>
  <figcaption>— anonymous senior dev</figcaption>
</figure>
```

**CSS:**
```css
.cbq-brut {
  max-width: 320px;
  padding: 22px 22px 16px;
  background: #fff7ed;
  border: 2px solid #0a0a0a;
  box-shadow: 7px 7px 0 #ff3d6e;
  font-family: "Courier New", monospace;
  color: #0a0a0a;
}

.cbq-brut blockquote {
  margin: 0;
}

.cbq-brut p {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.45;
}

.cbq-brut figcaption {
  margin-top: 12px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #ff3d6e;
}
```

### 03. Glass Card

**Type:** Pure CSS
**Description:** Frosted-glass shell on a soft gradient backdrop — translucent surface, subtle inner highlight, backdrop-filter blur. Perfect over hero images.

**HTML:**
```html
<div class="cbq-glass-bg">
  <figure class="cbq-glass">
    <blockquote>
      <p>The best UI is the one you don't notice.</p>
    </blockquote>
    <figcaption>— Lena Park, Product Designer</figcaption>
  </figure>
</div>
```

**CSS:**
```css
.cbq-glass-bg {
  padding: 28px;
  border-radius: 14px;
  background: linear-gradient(135deg, #7c6cff 0%, #ff6c8a 50%, #2eb88a 100%);
}

.cbq-glass {
  max-width: 320px;
  padding: 22px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
  color: #fff;
  font-family: system-ui, sans-serif;
}

.cbq-glass blockquote {
  margin: 0;
}

.cbq-glass p {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
}

.cbq-glass figcaption {
  margin-top: 12px;
  font-size: 11px;
  opacity: 0.85;
}
```

### 04. Neon Border

**Type:** Pure CSS
**Description:** Synthwave cyan glowing outline that pulses gently — built for dark dashboards, gaming UIs, and developer tools.

**HTML:**
```html
<figure class="cbq-neon">
  <blockquote>
    <p>Optimize for joy. The metrics will follow.</p>
  </blockquote>
  <figcaption>— k. tanaka, eng lead</figcaption>
</figure>
```

**CSS:**
```css
.cbq-neon {
  max-width: 320px;
  padding: 22px;
  background: #0a0a18;
  border: 1.5px solid #00e5ff;
  border-radius: 10px;
  box-shadow:
    0 0 0 1px rgba(0, 229, 255, 0.2),
    0 0 18px rgba(0, 229, 255, 0.35);
  color: #d8f7ff;
  font-family: ui-monospace, monospace;
  animation: cbq-neon-pulse 3.2s ease-in-out infinite;
}

.cbq-neon blockquote {
  margin: 0;
}

.cbq-neon p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
}

.cbq-neon figcaption {
  margin-top: 12px;
  font-size: 11px;
  color: #00e5ff;
  letter-spacing: 0.06em;
}

@keyframes cbq-neon-pulse {
  0%,
  100% {
    box-shadow:
      0 0 0 1px rgba(0, 229, 255, 0.2),
      0 0 18px rgba(0, 229, 255, 0.35);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(0, 229, 255, 0.32),
      0 0 26px rgba(0, 229, 255, 0.55);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cbq-neon {
    animation: none !important;
  }
}
```

### 05. Pull Quote

**Type:** Pure CSS
**Description:** Magazine-style tabloid pull quote — large display font, tight leading, no rule. The kind editorial sites use to break up long-form articles.

**HTML:**
```html
<figure class="cbq-pull">
  <blockquote>
    <p>"Every line of code you don't write is a line of code that can't break."</p>
  </blockquote>
  <figcaption>From <cite>The Pragmatic Programmer</cite></figcaption>
</figure>
```

**CSS:**
```css
.cbq-pull {
  max-width: 360px;
  padding: 18px 4px;
  font-family: Georgia, "Times New Roman", serif;
  color: #f5f5f5;
}

.cbq-pull blockquote {
  margin: 0;
}

.cbq-pull p {
  margin: 0;
  font-size: 26px;
  line-height: 1.18;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #f5f5f5;
}

.cbq-pull figcaption {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 11px;
  color: #b8b6d4;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-family: system-ui, sans-serif;
}

.cbq-pull cite {
  color: #c7c4ff;
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
}
```

### 06. Speech Bubble

**Type:** Pure CSS
**Description:** Chat-style rounded bubble with a tail pointing to the avatar. Common pattern for testimonial walls, support pages, and case studies.

**HTML:**
```html
<figure class="cbq-speech">
  <div class="cbq-speech-bubble">
    <blockquote>
      <p>Codefronts cut my prototype time in half. Just snippets that work.</p>
    </blockquote>
  </div>
  <figcaption class="cbq-speech-meta">
    <span class="cbq-speech-avatar" aria-hidden="true">A</span>
    <span><strong>Aisha M.</strong> · frontend dev</span>
  </figcaption>
</figure>
```

**CSS:**
```css
.cbq-speech {
  max-width: 320px;
  font-family: system-ui, sans-serif;
}

.cbq-speech-bubble {
  position: relative;
  padding: 16px 18px;
  background: #1f1f2e;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 16px 16px 16px 4px;
  color: #f0eeff;
}

.cbq-speech-bubble::before {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 18px;
  width: 12px;
  height: 12px;
  background: #1f1f2e;
  border-right: 1px solid rgba(255, 255, 255, 0.07);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  transform: rotate(45deg);
}

.cbq-speech-bubble blockquote {
  margin: 0;
}

.cbq-speech-bubble p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
}

.cbq-speech-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding-left: 8px;
  font-size: 12px;
  color: #b8b6d4;
}

.cbq-speech-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7c6cff, #ff6c8a);
  font-weight: 700;
  font-size: 12px;
  color: #fff;
}

.cbq-speech-meta strong {
  color: #f0eeff;
  font-weight: 600;
}
```

### 07. Vertical Rail

**Type:** Pure CSS
**Description:** Thin gradient rail on the left edge that brightens on :hover — editorial restraint. Perfect for long-form articles with multiple call-out quotes.

**HTML:**
```html
<figure class="cbq-rail">
  <blockquote>
    <p>Constraints don't kill creativity — they sharpen it.</p>
  </blockquote>
  <figcaption>— Maya Chen</figcaption>
</figure>
```

**CSS:**
```css
.cbq-rail {
  max-width: 340px;
  padding: 14px 18px;
  position: relative;
  font-family: Georgia, serif;
  color: #e0deff;
  transition: padding-left 0.25s ease;
}

.cbq-rail::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, #7c6cff, #2eb88a);
  border-radius: 3px;
  opacity: 0.5;
  transition:
    opacity 0.25s ease,
    width 0.25s ease;
}

.cbq-rail:hover::before {
  opacity: 1;
  width: 5px;
}

.cbq-rail blockquote {
  margin: 0;
}

.cbq-rail p {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  font-style: italic;
}

.cbq-rail figcaption {
  margin-top: 10px;
  font-size: 12px;
  color: #b8b6d4;
  font-style: normal;
}
```

### 08. Testimonial Card

**Type:** Pure CSS
**Description:** Testimonial card with avatar, name, role, 5-star row and a soft shadow. Production-grade pattern for landing pages and case-study walls.

**HTML:**
```html
<figure class="cbq-stamp">
  <div class="cbq-stamp-stars" aria-label="Rated 5 out of 5">
    <span>★</span><span>★</span><span>★</span><span>★</span><span>★</span>
  </div>
  <blockquote>
    <p>"The component library I wished existed for years. Just works."</p>
  </blockquote>
  <figcaption>
    <span class="cbq-stamp-avatar" aria-hidden="true">JR</span>
    <span class="cbq-stamp-id">
      <strong>Jordan Rivera</strong>
      <em>Senior Engineer · Stripe</em>
    </span>
  </figcaption>
</figure>
```

**CSS:**
```css
.cbq-stamp {
  max-width: 320px;
  padding: 22px;
  background: #18181f;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(124, 108, 255, 0.08);
  font-family: system-ui, sans-serif;
  color: #f0eeff;
}

.cbq-stamp-stars {
  display: flex;
  gap: 2px;
  margin-bottom: 12px;
  color: #f5a84a;
  font-size: 14px;
}

.cbq-stamp blockquote {
  margin: 0 0 16px;
}

.cbq-stamp p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
}

.cbq-stamp figcaption {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.cbq-stamp-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7c6cff, #a78bfa);
  font-weight: 700;
  font-size: 13px;
  color: #fff;
  flex-shrink: 0;
}

.cbq-stamp-id {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cbq-stamp-id strong {
  font-size: 13px;
  font-weight: 600;
  color: #f0eeff;
}

.cbq-stamp-id em {
  font-size: 11px;
  color: #b8b6d4;
  font-style: normal;
}
```

### 09. Highlighted Run

**Type:** Pure CSS
**Description:** Body text with a CSS mark-style highlight behind one punchy phrase — the editorial trick for drawing the eye to the key claim in a long quote.

**HTML:**
```html
<figure class="cbq-highlight">
  <blockquote>
    <p>
      Most teams optimize for <mark>shipping faster</mark> when they should be optimizing for
      <mark>shipping smaller</mark>.
    </p>
  </blockquote>
  <figcaption>— Sara López, Engineering Manager</figcaption>
</figure>
```

**CSS:**
```css
.cbq-highlight {
  max-width: 360px;
  padding: 16px 4px;
  font-family: Georgia, serif;
  color: #e9e7ff;
}

.cbq-highlight blockquote {
  margin: 0;
}

.cbq-highlight p {
  margin: 0;
  font-size: 18px;
  line-height: 1.5;
  font-weight: 500;
}

.cbq-highlight mark {
  background: linear-gradient(180deg, transparent 55%, rgba(124, 108, 255, 0.55) 55%);
  color: inherit;
  padding: 0 2px;
  border-radius: 2px;
}

.cbq-highlight figcaption {
  margin-top: 12px;
  font-size: 12px;
  color: #b8b6d4;
  font-family: system-ui, sans-serif;
}
```

### 10. Marker Underline

**Type:** Pure CSS
**Description:** Hand-drawn-look uneven SVG underline applied beneath the punchy phrase — the personal-blog flourish that makes a quote feel handwritten.

**HTML:**
```html
<figure class="cbq-marker">
  <blockquote>
    <p>
      Make the change <span class="cbq-marker-line">easy first</span>, then make the easy change.
    </p>
  </blockquote>
  <figcaption>— Kent Beck</figcaption>
</figure>
```

**CSS:**
```css
.cbq-marker {
  max-width: 340px;
  padding: 14px 4px;
  font-family: Georgia, serif;
  color: #f0eeff;
}

.cbq-marker blockquote {
  margin: 0;
}

.cbq-marker p {
  margin: 0;
  font-size: 18px;
  line-height: 1.55;
}

.cbq-marker-line {
  position: relative;
  white-space: nowrap;
  color: #fff;
  font-weight: 600;
}

.cbq-marker-line::after {
  content: "";
  position: absolute;
  left: -2px;
  right: -2px;
  bottom: -4px;
  height: 8px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 8' preserveAspectRatio='none'><path d='M2 5 Q 30 1 60 4 T 118 5' stroke='%23ffd479' stroke-width='3' fill='none' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.cbq-marker figcaption {
  margin-top: 12px;
  font-size: 12px;
  color: #b8b6d4;
  font-family: system-ui, sans-serif;
}
```

### 11. Drop Shadow Float

**Type:** Pure CSS
**Description:** Lifted card with a coloured shadow that intensifies on :hover — a subtle elevation cue that says this quote matters. Premium feel.

**HTML:**
```html
<figure class="cbq-float">
  <blockquote>
    <p>"You can have the best engine in the world, but without a chassis it's just noise."</p>
  </blockquote>
  <figcaption>— Eli Tan, CTO</figcaption>
</figure>
```

**CSS:**
```css
.cbq-float {
  max-width: 320px;
  padding: 24px;
  background: #18181f;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: 0 8px 24px rgba(124, 108, 255, 0.18);
  transform: translateY(0);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
  font-family: system-ui, sans-serif;
  color: #f0eeff;
}

.cbq-float:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 36px rgba(124, 108, 255, 0.32);
}

.cbq-float blockquote {
  margin: 0;
}

.cbq-float p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  font-style: italic;
}

.cbq-float figcaption {
  margin-top: 14px;
  font-size: 12px;
  color: #a78bfa;
}
```

### 12. Aurora Drift

**Type:** Pure CSS
**Description:** Slow-drifting aurora gradient blob behind a glass quote surface — the premium-product accent variant. Honours prefers-reduced-motion.

**HTML:**
```html
<figure class="cbq-aurora">
  <span class="cbq-aurora-blob" aria-hidden="true"></span>
  <div class="cbq-aurora-card">
    <blockquote><p>"Beauty in software is honesty rendered visible."</p></blockquote>
    <figcaption>— Lin Wei</figcaption>
  </div>
</figure>
```

**CSS:**
```css
.cbq-aurora {
  position: relative;
  max-width: 340px;
  padding: 28px;
  border-radius: 18px;
  background: #0d0d16;
  overflow: hidden;
  isolation: isolate;
  font-family: system-ui, sans-serif;
}

.cbq-aurora-blob {
  position: absolute;
  inset: -40%;
  background:
    radial-gradient(40% 40% at 30% 30%, rgba(124, 108, 255, 0.55), transparent 70%),
    radial-gradient(40% 40% at 70% 60%, rgba(255, 108, 138, 0.45), transparent 70%),
    radial-gradient(35% 35% at 50% 80%, rgba(46, 184, 138, 0.4), transparent 70%);
  filter: blur(8px);
  animation: cbq-aurora-drift 14s linear infinite;
  z-index: 0;
}

.cbq-aurora-card {
  position: relative;
  z-index: 1;
  padding: 18px;
  border-radius: 14px;
  background: rgba(13, 13, 22, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #f0eeff;
}

.cbq-aurora blockquote {
  margin: 0;
}

.cbq-aurora p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  font-weight: 500;
}

.cbq-aurora figcaption {
  margin-top: 12px;
  font-size: 11px;
  color: rgba(240, 238, 255, 0.7);
}

@media (prefers-reduced-motion: reduce) {
  .cbq-aurora-blob {
    animation: none !important;
  }
}
@keyframes cbq-aurora-drift {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  50% {
    transform: translate(4%, -4%) rotate(180deg);
  }
  100% {
    transform: translate(0, 0) rotate(360deg);
  }
}
```

### 13. Tweet Style

**Type:** Pure CSS
**Description:** Twitter/X-styled callout — bird/X icon, name, handle, timestamp, and like/retweet glyphs. Native to dev audiences and a great social-proof pattern.

**HTML:**
```html
<figure class="cbq-tweet">
  <header class="cbq-tweet-head">
    <span class="cbq-tweet-avatar" aria-hidden="true">DM</span>
    <span class="cbq-tweet-id">
      <strong>Dana M.</strong>
      <em>@danamcode · 2h</em>
    </span>
    <svg class="cbq-tweet-x" viewBox="0 0 24 24" aria-hidden="true">
      <path
        d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.744l7.73-8.835L2.25 2.25h6.962l4.265 5.638L18.244 2.25z"
        fill="currentColor"
      />
    </svg>
  </header>
  <blockquote>
    <p>
      I would rather read codefronts than write CSS from scratch in 2026, and that's a hill I'm
      willing to die on.
    </p>
  </blockquote>
  <footer class="cbq-tweet-foot">
    <span aria-label="42 replies">💬 42</span>
    <span aria-label="231 reposts">🔁 231</span>
    <span aria-label="1.2k likes">♡ 1.2k</span>
  </footer>
</figure>
```

**CSS:**
```css
.cbq-tweet {
  max-width: 340px;
  padding: 14px 16px;
  background: #15151d;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  font-family: system-ui, sans-serif;
  color: #e7e9ea;
}

.cbq-tweet-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.cbq-tweet-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #7c6cff, #2eb88a);
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

.cbq-tweet-id {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.cbq-tweet-id strong {
  font-size: 13.5px;
  font-weight: 700;
  color: #fff;
}

.cbq-tweet-id em {
  font-size: 12px;
  color: #71767b;
  font-style: normal;
}

.cbq-tweet-x {
  width: 18px;
  height: 18px;
  color: #fff;
  flex-shrink: 0;
}

.cbq-tweet blockquote {
  margin: 0 0 10px;
}

.cbq-tweet p {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
}

.cbq-tweet-foot {
  display: flex;
  gap: 18px;
  font-size: 12px;
  color: #71767b;
}
```

### 14. Newspaper

**Type:** Pure CSS
**Description:** Serif typeface, justified text, drop-cap on the first letter — old-school broadsheet feel. Pairs with editorial themes and longform pages.

**HTML:**
```html
<figure class="cbq-news">
  <blockquote>
    <p>
      Software is a love letter to the future, written in the dialect of the present. Each
      abstraction we choose narrows what tomorrow can say.
    </p>
  </blockquote>
  <figcaption>— The Architect's Notebook, Vol. 3</figcaption>
</figure>
```

**CSS:**
```css
.cbq-news {
  max-width: 360px;
  padding: 18px 6px;
  font-family: Georgia, "Times New Roman", serif;
  color: #f5f5f5;
}

.cbq-news blockquote {
  margin: 0;
}

.cbq-news p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  text-align: justify;
  hyphens: auto;
}

.cbq-news p::first-letter {
  float: left;
  font-size: 48px;
  line-height: 0.95;
  padding: 4px 8px 0 0;
  font-weight: 700;
  color: #ffd479;
}

.cbq-news figcaption {
  margin-top: 14px;
  font-size: 11px;
  color: #b8b6d4;
  font-style: italic;
  text-align: right;
}
```

### 15. Code Comment

**Type:** Pure CSS
**Description:** Quote styled as a code-comment block — mono font, dim grey "filename:line" header, // prefix on each line. Perfect for dev portfolios and engineering blogs.

**HTML:**
```html
<figure class="cbq-code">
  <header class="cbq-code-head">
    <span class="cbq-code-dot" aria-hidden="true"></span>
    <span class="cbq-code-dot" style="background: #f5a84a"></span>
    <span class="cbq-code-dot" style="background: #2eb88a"></span>
    <span class="cbq-code-file">manifesto.js · ln 12</span>
  </header>
  <blockquote>
    <p>// Don't write code that's so clever<br />// that you can't debug it at 3am</p>
  </blockquote>
  <figcaption>— Brian Kernighan</figcaption>
</figure>
```

**CSS:**
```css
.cbq-code {
  max-width: 360px;
  background: #0d1117;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  overflow: hidden;
  font-family: ui-monospace, "SF Mono", monospace;
  color: #e6edf3;
}

.cbq-code-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: #161b22;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.cbq-code-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ff5f57;
}

.cbq-code-file {
  margin-left: 8px;
  font-size: 11px;
  color: #8b949e;
}

.cbq-code blockquote {
  margin: 0;
  padding: 16px 18px;
}

.cbq-code p {
  margin: 0;
  font-size: 13px;
  line-height: 1.65;
  color: #7c6cff;
  font-style: italic;
}

.cbq-code figcaption {
  padding: 6px 18px 12px;
  font-size: 11px;
  color: #8b949e;
}
```

### 16. Markdown Quote

**Type:** Pure CSS
**Description:** GitHub-style markdown blockquote — left rule, dim text, > prefix character — with a small MD pill in the corner. Native to the README aesthetic.

**HTML:**
```html
<figure class="cbq-md">
  <span class="cbq-md-pill">MD</span>
  <blockquote>
    <p><span class="cbq-md-gt">&gt;</span> The best abstractions are the ones you don't notice.</p>
    <p><span class="cbq-md-gt">&gt;</span> The worst are the ones you can't avoid.</p>
  </blockquote>
  <figcaption>— from <code>NOTES.md</code></figcaption>
</figure>
```

**CSS:**
```css
.cbq-md {
  position: relative;
  max-width: 340px;
  padding: 18px 18px 14px 22px;
  background: #0d1117;
  border-left: 4px solid #30363d;
  border-radius: 0 6px 6px 0;
  font-family: ui-monospace, monospace;
  color: #c9d1d9;
}

.cbq-md-pill {
  position: absolute;
  top: 8px;
  right: 10px;
  padding: 1px 6px;
  border-radius: 3px;
  background: rgba(124, 108, 255, 0.18);
  color: #a78bfa;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.cbq-md blockquote {
  margin: 0;
}

.cbq-md p {
  margin: 0 0 6px;
  font-size: 13.5px;
  line-height: 1.55;
}

.cbq-md p:last-of-type {
  margin-bottom: 0;
}

.cbq-md-gt {
  color: #6e7681;
  margin-right: 6px;
  user-select: none;
}

.cbq-md figcaption {
  margin-top: 12px;
  font-size: 11px;
  color: #6e7681;
}

.cbq-md code {
  background: rgba(110, 118, 129, 0.4);
  padding: 1px 5px;
  border-radius: 3px;
  color: #c9d1d9;
  font-size: 11px;
}
```

### 17. Testimonial Carousel

**Type:** Light JS
**Description:** Three testimonials with dot pagination and arrow keys — auto-advances every 6s, pauses on hover/focus, uses aria-live=polite for screen-reader announcement.

**HTML:**
```html
<figure class="cbq-car" aria-roledescription="carousel" aria-label="Testimonials">
  <div class="cbq-car-track" aria-live="polite">
    <article class="cbq-car-slide is-active">
      <blockquote><p>"It saves me hours every week."</p></blockquote>
      <figcaption>— Aria S., Designer</figcaption>
    </article>
    <article class="cbq-car-slide" hidden>
      <blockquote><p>"Finally, snippets that don't fight my stack."</p></blockquote>
      <figcaption>— Marcus T., DevOps</figcaption>
    </article>
    <article class="cbq-car-slide" hidden>
      <blockquote><p>"My team's dashboard ships twice as fast."</p></blockquote>
      <figcaption>— Priya R., Eng Lead</figcaption>
    </article>
  </div>
  <nav class="cbq-car-dots" aria-label="Slide navigation">
    <button
      type="button"
      class="cbq-car-dot is-active"
      aria-label="Go to slide 1"
      aria-current="true"
    ></button>
    <button type="button" class="cbq-car-dot" aria-label="Go to slide 2"></button>
    <button type="button" class="cbq-car-dot" aria-label="Go to slide 3"></button>
  </nav>
</figure>
```

**CSS:**
```css
.cbq-car {
  max-width: 340px;
  padding: 24px 22px 18px;
  background: #18181f;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 16px;
  font-family: system-ui, sans-serif;
  color: #f0eeff;
}

.cbq-car-track {
  min-height: 90px;
  position: relative;
}

.cbq-car-slide blockquote {
  margin: 0 0 10px;
}

.cbq-car-slide p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.5;
  font-style: italic;
}

.cbq-car-slide figcaption {
  font-size: 12px;
  color: #a78bfa;
}

.cbq-car-slide[hidden] {
  display: none;
}

.cbq-car-dots {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-top: 14px;
}

.cbq-car-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition:
    background 0.2s ease,
    transform 0.2s ease;
}

.cbq-car-dot:hover {
  background: rgba(255, 255, 255, 0.32);
}

.cbq-car-dot.is-active {
  background: #7c6cff;
  transform: scale(1.25);
}

.cbq-car-dot:focus-visible {
  outline: 2px solid #a78bfa;
  outline-offset: 2px;
}
```

**JS:**
```js
(function () {
  document.querySelectorAll(".cbq-car").forEach(function (root) {
    var slides = root.querySelectorAll(".cbq-car-slide");
    var dots = root.querySelectorAll(".cbq-car-dot");
    var idx = 0,
      timer = null;
    function show(i) {
      idx = (i + slides.length) % slides.length;
      slides.forEach(function (s, n) {
        if (n === idx) {
          s.removeAttribute("hidden");
          s.classList.add("is-active");
        } else {
          s.setAttribute("hidden", "");
          s.classList.remove("is-active");
        }
      });
      dots.forEach(function (d, n) {
        var on = n === idx;
        d.classList.toggle("is-active", on);
        if (on) d.setAttribute("aria-current", "true");
        else d.removeAttribute("aria-current");
      });
    }
    function start() {
      stop();
      timer = setInterval(function () {
        show(idx + 1);
      }, 6000);
    }
    function stop() {
      if (timer) {
        clearInterval(timer);
        timer = null;
      }
    }
    dots.forEach(function (d, n) {
      d.addEventListener("click", function () {
        show(n);
        start();
      });
    });
    root.addEventListener("mouseenter", stop);
    root.addEventListener("mouseleave", start);
    root.addEventListener("focusin", stop);
    root.addEventListener("focusout", start);
    root.addEventListener("keydown", function (e) {
      if (e.key === "ArrowRight") {
        e.preventDefault();
        show(idx + 1);
        start();
      }
      if (e.key === "ArrowLeft") {
        e.preventDefault();
        show(idx - 1);
        start();
      }
    });
    if (!window.matchMedia("(prefers-reduced-motion: reduce)").matches) start();
  });
})();
```

### 18. Click to Expand

**Type:** Light JS
**Description:** Long quote truncated with -webkit-line-clamp; a Read more button reveals the rest. aria-expanded reflects state for screen readers — the canonical truncate pattern.

**HTML:**
```html
<figure class="cbq-expand">
  <blockquote>
    <p class="cbq-expand-text">
      "Software engineering is not really about computers. It's about people: the people you build
      for, the people you build with, and the future-you who has to maintain whatever you ship
      today. Every line of code is a little contract with all of them."
    </p>
  </blockquote>
  <button type="button" class="cbq-expand-btn" aria-expanded="false">Read more</button>
  <figcaption>— Jen Rodriguez, Staff Engineer</figcaption>
</figure>
```

**CSS:**
```css
.cbq-expand {
  max-width: 340px;
  padding: 22px;
  background: #18181f;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  font-family: system-ui, sans-serif;
  color: #f0eeff;
}

.cbq-expand blockquote {
  margin: 0;
}

.cbq-expand-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: -webkit-line-clamp 0.3s ease;
}

.cbq-expand-text.is-open {
  -webkit-line-clamp: 99;
}

.cbq-expand-btn {
  margin-top: 10px;
  padding: 4px 10px;
  background: transparent;
  color: #a78bfa;
  border: 1px solid rgba(167, 139, 250, 0.4);
  border-radius: 6px;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  transition:
    background 0.15s,
    border-color 0.15s;
}

.cbq-expand-btn:hover {
  background: rgba(167, 139, 250, 0.1);
  border-color: #a78bfa;
}

.cbq-expand-btn:focus-visible {
  outline: 2px solid #a78bfa;
  outline-offset: 2px;
}

.cbq-expand figcaption {
  margin-top: 14px;
  font-size: 12px;
  color: #b8b6d4;
}
```

**JS:**
```js
(function () {
  document.querySelectorAll(".cbq-expand").forEach(function (root) {
    var btn = root.querySelector(".cbq-expand-btn");
    var text = root.querySelector(".cbq-expand-text");
    if (!btn || !text) return;
    btn.addEventListener("click", function () {
      var open = text.classList.toggle("is-open");
      btn.setAttribute("aria-expanded", String(open));
      btn.textContent = open ? "Read less" : "Read more";
    });
  });
})();
```

### 19. Copy Quote

**Type:** Light JS
**Description:** Quote with a small Copy button that copies the text to the clipboard and flashes a Copied! confirmation — perfect for sharable design and engineering quote walls.

**HTML:**
```html
<figure class="cbq-copy">
  <button type="button" class="cbq-copy-btn" aria-label="Copy quote to clipboard">
    <svg viewBox="0 0 24 24" aria-hidden="true" width="14" height="14">
      <rect
        x="9"
        y="9"
        width="11"
        height="11"
        rx="2"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
      />
      <path
        d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
      />
    </svg>
    <span class="cbq-copy-label">Copy</span>
  </button>
  <blockquote class="cbq-copy-quote">
    <p>"Premature optimization is the root of all evil."</p>
  </blockquote>
  <figcaption>— Donald Knuth</figcaption>
</figure>
```

**CSS:**
```css
.cbq-copy {
  position: relative;
  max-width: 340px;
  padding: 22px;
  background: #18181f;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  font-family: system-ui, sans-serif;
  color: #f0eeff;
}

.cbq-copy-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.04);
  color: #a78bfa;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  font: inherit;
  font-size: 11px;
  cursor: pointer;
  transition:
    background 0.15s,
    border-color 0.15s,
    color 0.15s;
}

.cbq-copy-btn:hover {
  background: rgba(167, 139, 250, 0.12);
  border-color: rgba(167, 139, 250, 0.45);
}

.cbq-copy-btn:focus-visible {
  outline: 2px solid #a78bfa;
  outline-offset: 2px;
}

.cbq-copy-btn.is-copied {
  color: #2ecc8a;
  border-color: rgba(46, 204, 138, 0.45);
  background: rgba(46, 204, 138, 0.08);
}

.cbq-copy-quote {
  margin: 0;
  padding-right: 56px;
}

.cbq-copy-quote p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  font-style: italic;
}

.cbq-copy figcaption {
  margin-top: 14px;
  font-size: 12px;
  color: #b8b6d4;
}
```

**JS:**
```js
(function () {
  document.querySelectorAll(".cbq-copy").forEach(function (root) {
    var btn = root.querySelector(".cbq-copy-btn");
    var label = root.querySelector(".cbq-copy-label");
    var quote = root.querySelector(".cbq-copy-quote");
    if (!btn || !label || !quote) return;
    btn.addEventListener("click", function () {
      var text = quote.textContent.trim();
      navigator.clipboard.writeText(text).then(function () {
        btn.classList.add("is-copied");
        label.textContent = "Copied!";
        setTimeout(function () {
          btn.classList.remove("is-copied");
          label.textContent = "Copy";
        }, 1600);
      });
    });
  });
})();
```

---
## 22 CSS Breadcrumbs

URL: https://codefronts.com/navigation/css-breadcrumbs/
Description: 22 original CSS breadcrumb designs — underline grow, pill, diagonal slash, neon trail, brutalist, frosted glass, vertical stacked, progress track, holographic shimmer and more.
Demo count: 22

### 01. Underline Grow

**Type:** Pure CSS
**Description:** A gradient underline grows from left to right on hover. Current page uses a solid accent line.

**HTML:**
```html
<nav class="bc-01" aria-label="Breadcrumb">
  <ol class="bc-01__list">
    <li class="bc-01__item"><a class="bc-01__link" href="javascript:void(0)">Home</a></li>
    <li class="bc-01__item"><a class="bc-01__link" href="javascript:void(0)">Collections</a></li>
    <li class="bc-01__item">
      <a class="bc-01__link bc-01__link--cur" aria-current="page" href="javascript:void(0)"
        >CSS Tabs</a
      >
    </li>
  </ol>
</nav>
```

**CSS:**
```css
.bc-01__list {
  display: flex;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
}

.bc-01__item {
  display: flex;
  align-items: center;
}

.bc-01__item + .bc-01__item::before {
  content: "/";
  padding: 0 12px;
  color: rgba(255, 255, 255, 0.2);
  font-size: 14px;
}

.bc-01__link {
  position: relative;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.45);
  text-decoration: none;
  padding-bottom: 2px;
  transition: color 0.25s;
}

.bc-01__link::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 1px;
  background: linear-gradient(90deg, #8b7fff, #ff6b9d);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s cubic-bezier(0.23, 1, 0.32, 1);
}

.bc-01__link:hover {
  color: rgba(255, 255, 255, 0.85);
}

.bc-01__link:hover::after {
  transform: scaleX(1);
}

.bc-01__link--cur {
  color: #fff;
  pointer-events: none;
}

.bc-01__link--cur::after {
  background: #8b7fff;
  transform: scaleX(1);
}
```

### 02. Pill Breadcrumbs

**Type:** Pure CSS
**Description:** Each crumb is a rounded pill. Hover blooms a background. Current page shows solid accent fill.

**HTML:**
```html
<nav class="bc-02" aria-label="Breadcrumb">
  <ol class="bc-02__list">
    <li class="bc-02__item"><a class="bc-02__link" href="javascript:void(0)">Home</a></li>
    <li class="bc-02__sep" aria-hidden="true">›</li>
    <li class="bc-02__item"><a class="bc-02__link" href="javascript:void(0)">Design</a></li>
    <li class="bc-02__sep" aria-hidden="true">›</li>
    <li class="bc-02__item">
      <a class="bc-02__link bc-02__link--cur" aria-current="page" href="javascript:void(0)"
        >Components</a
      >
    </li>
  </ol>
</nav>
```

**CSS:**
```css
.bc-02__list {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.bc-02__sep {
  color: rgba(255, 255, 255, 0.2);
  font-size: 16px;
  user-select: none;
  padding: 0 2px;
}

.bc-02__link {
  padding: 5px 14px;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.45);
  text-decoration: none;
  display: block;
  transition:
    background 0.25s,
    color 0.25s;
}

.bc-02__link:hover {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.85);
}

.bc-02__link--cur {
  background: rgba(139, 127, 255, 0.18);
  color: #8b7fff;
  pointer-events: none;
}
```

### 03. Diagonal Slash

**Type:** Pure CSS
**Description:** Parallelogram-shaped crumbs using clip-path. Active fills with gradient; hover lifts slightly.

**HTML:**
```html
<nav class="bc-03" aria-label="Breadcrumb">
  <ol class="bc-03__list">
    <li class="bc-03__item"><a class="bc-03__link" href="javascript:void(0)">Home</a></li>
    <li class="bc-03__item"><a class="bc-03__link" href="javascript:void(0)">Products</a></li>
    <li class="bc-03__item">
      <a class="bc-03__link bc-03__link--cur" aria-current="page" href="javascript:void(0)"
        >Detail</a
      >
    </li>
  </ol>
</nav>
```

**CSS:**
```css
.bc-03__list {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 2px;
}

.bc-03__link {
  display: block;
  padding: 8px 22px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  background: rgba(255, 255, 255, 0.05);
  clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
  transition:
    background 0.25s,
    color 0.25s,
    transform 0.25s;
}

.bc-03__link:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.85);
  transform: translateY(-2px);
}

.bc-03__link--cur {
  background: linear-gradient(135deg, #8b7fff, #ff6b9d);
  color: #fff;
  pointer-events: none;
}
```

### 04. Neon Trail

**Type:** Pure CSS
**Description:** Neon glow builds along each separator arrow. Current page pulses with a multi-layer glow.

**HTML:**
```html
<nav class="bc-04" aria-label="Breadcrumb">
  <ol class="bc-04__list">
    <li class="bc-04__item"><a class="bc-04__link" href="javascript:void(0)">Home</a></li>
    <li class="bc-04__item"><a class="bc-04__link" href="javascript:void(0)">Library</a></li>
    <li class="bc-04__item">
      <a class="bc-04__link bc-04__link--cur" aria-current="page" href="javascript:void(0)"
        >Effects</a
      >
    </li>
  </ol>
</nav>
```

**CSS:**
```css
.bc-04__list {
  display: flex;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
}

.bc-04__item + .bc-04__item::before {
  content: "→";
  padding: 0 10px;
  color: rgba(61, 232, 245, 0.25);
  font-size: 13px;
  transition:
    color 0.3s,
    text-shadow 0.3s;
}

.bc-04__item:hover + .bc-04__item::before,
.bc-04__item + .bc-04__item:hover::before {
  color: #3de8f5;
  text-shadow: 0 0 8px #3de8f5;
}

.bc-04__link {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.38);
  text-decoration: none;
  transition:
    color 0.25s,
    text-shadow 0.25s;
}

.bc-04__link:hover {
  color: #3de8f5;
  text-shadow: 0 0 10px rgba(61, 232, 245, 0.5);
}

.bc-04__link--cur {
  color: #3de8f5;
  pointer-events: none;
  text-shadow:
    0 0 8px #3de8f5,
    0 0 20px rgba(61, 232, 245, 0.4);
}
```

### 05. Brutalist Hard Shadow

**Type:** Pure CSS
**Description:** Hard offset box-shadows. Hover shifts the shadow. Current page inverts to a filled block.

**HTML:**
```html
<nav class="bc-05" aria-label="Breadcrumb">
  <ol class="bc-05__list">
    <li class="bc-05__item"><a class="bc-05__link" href="javascript:void(0)">Home</a></li>
    <li class="bc-05__sep" aria-hidden="true">╱</li>
    <li class="bc-05__item"><a class="bc-05__link" href="javascript:void(0)">Shop</a></li>
    <li class="bc-05__sep" aria-hidden="true">╱</li>
    <li class="bc-05__item">
      <a class="bc-05__link bc-05__link--cur" aria-current="page" href="javascript:void(0)">Item</a>
    </li>
  </ol>
</nav>
```

**CSS:**
```css
.bc-05__list {
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.bc-05__sep {
  color: rgba(255, 255, 255, 0.2);
  font-size: 12px;
  user-select: none;
}

.bc-05__link {
  display: block;
  padding: 6px 16px;
  border: 2px solid rgba(255, 255, 255, 0.6);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  box-shadow: 2px 2px 0 rgba(255, 255, 255, 0.4);
  transition:
    transform 0.1s,
    box-shadow 0.1s,
    background 0.1s,
    color 0.1s;
}

.bc-05__link:hover {
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 rgba(255, 255, 255, 0.5);
  color: #fff;
}

.bc-05__link--cur {
  background: #eeeaf8;
  color: #07070c;
  border-color: #eeeaf8;
  box-shadow: 2px 2px 0 rgba(139, 127, 255, 0.5);
  pointer-events: none;
}
```

### 06. Frosted Glass

**Type:** Pure CSS
**Description:** Glass pill breadcrumbs with backdrop-filter over a gradient background.

**HTML:**
```html
<nav class="bc-06" aria-label="Breadcrumb">
  <ol class="bc-06__list">
    <li class="bc-06__item"><a class="bc-06__link" href="javascript:void(0)">Home</a></li>
    <li class="bc-06__item"><a class="bc-06__link" href="javascript:void(0)">Docs</a></li>
    <li class="bc-06__item">
      <a class="bc-06__link bc-06__link--cur" aria-current="page" href="javascript:void(0)"
        >Guide</a
      >
    </li>
  </ol>
</nav>
```

**CSS:**
```css
.bc-06 {
  background:
    radial-gradient(60% 120% at 20% 50%, rgba(139, 127, 255, 0.5), transparent),
    radial-gradient(50% 100% at 80% 50%, rgba(255, 107, 157, 0.4), transparent), #09090f;
  padding: 12px 16px;
  border-radius: 14px;
}

.bc-06__list {
  display: flex;
  align-items: center;
  gap: 0;
  list-style: none;
  padding: 0;
  margin: 0;
}

.bc-06__item + .bc-06__item::before {
  content: "/";
  padding: 0 10px;
  color: rgba(255, 255, 255, 0.25);
  font-size: 13px;
}

.bc-06__link {
  padding: 5px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  border: 1px solid transparent;
  transition:
    backdrop-filter 0.3s,
    background 0.3s,
    border-color 0.3s,
    color 0.3s;
}

.bc-06__link:hover {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px);
  border-color: rgba(255, 255, 255, 0.15);
  color: #fff;
}

.bc-06__link--cur {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(16px);
  border-color: rgba(255, 255, 255, 0.25);
  color: #fff;
  pointer-events: none;
}
```

### 07. Vertical Stacked

**Type:** Pure CSS
**Description:** Vertical timeline-style breadcrumb with connecting dots and a glowing active indicator.

**HTML:**
```html
<nav class="bc-07" aria-label="Breadcrumb">
  <ol class="bc-07__list">
    <li class="bc-07__item">
      <span class="bc-07__dot" aria-hidden="true"></span
      ><a class="bc-07__link" href="javascript:void(0)">Home</a>
    </li>
    <li class="bc-07__item">
      <span class="bc-07__dot" aria-hidden="true"></span
      ><a class="bc-07__link" href="javascript:void(0)">Projects</a>
    </li>
    <li class="bc-07__item bc-07__item--cur">
      <span class="bc-07__dot bc-07__dot--cur" aria-hidden="true"></span
      ><a class="bc-07__link bc-07__link--cur" aria-current="page" href="javascript:void(0)"
        >Dashboard</a
      >
    </li>
  </ol>
</nav>
```

**CSS:**
```css
.bc-07__list {
  list-style: none;
  padding: 0;
  margin: 0 0 0 10px;
  display: flex;
  flex-direction: column;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.bc-07__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  position: relative;
}

.bc-07__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.2);
  background: transparent;
  position: absolute;
  left: -5px;
  transition:
    border-color 0.3s,
    background 0.3s,
    box-shadow 0.3s;
}

.bc-07__item:hover .bc-07__dot {
  border-color: rgba(255, 255, 255, 0.6);
}

.bc-07__dot--cur {
  border-color: #8b7fff;
  background: #8b7fff;
  box-shadow: 0 0 10px rgba(139, 127, 255, 0.6);
}

.bc-07__link {
  padding-left: 18px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.38);
  text-decoration: none;
  transition: color 0.25s;
}

.bc-07__link:hover {
  color: rgba(255, 255, 255, 0.75);
}

.bc-07__link--cur {
  color: #fff;
  pointer-events: none;
}
```

### 08. Editorial Numbered

**Type:** Pure CSS
**Description:** Magazine-style numbered breadcrumbs. Active number swells; separator is a hairline rule.

**HTML:**
```html
<nav class="bc-08" aria-label="Breadcrumb">
  <ol class="bc-08__list">
    <li class="bc-08__item">
      <span class="bc-08__num" aria-hidden="true">01</span
      ><a class="bc-08__link" href="javascript:void(0)">Home</a>
    </li>
    <li class="bc-08__item">
      <span class="bc-08__num" aria-hidden="true">02</span
      ><a class="bc-08__link" href="javascript:void(0)">Articles</a>
    </li>
    <li class="bc-08__item bc-08__item--cur">
      <span class="bc-08__num bc-08__num--cur" aria-hidden="true">03</span
      ><a class="bc-08__link bc-08__link--cur" aria-current="page" href="javascript:void(0)"
        >Read</a
      >
    </li>
  </ol>
</nav>
```

**CSS:**
```css
.bc-08__list {
  display: flex;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 0;
}

.bc-08__item {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.bc-08__item + .bc-08__item {
  padding-left: 20px;
  margin-left: 20px;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.bc-08__num {
  font-family: monospace;
  font-size: 10px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.18);
  letter-spacing: 0.06em;
  transition:
    color 0.3s,
    font-size 0.35s cubic-bezier(0.23, 1, 0.32, 1);
}

.bc-08__num--cur {
  color: #8b7fff;
  font-size: 14px;
}

.bc-08__link {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.38);
  text-decoration: none;
  transition: color 0.25s;
}

.bc-08__link:hover {
  color: rgba(255, 255, 255, 0.75);
}

.bc-08__link--cur {
  color: #fff;
  pointer-events: none;
}
```

### 09. Retro Terminal Path

**Type:** Pure CSS
**Description:** Unix path-style breadcrumbs with a blinking cursor — looks like navigating a filesystem.

**HTML:**
```html
<nav class="bc-09" aria-label="Breadcrumb">
  <ol class="bc-09__list">
    <li class="bc-09__item">
      <span class="bc-09__prompt" aria-hidden="true">~</span
      ><a class="bc-09__link" href="javascript:void(0)">home</a>
    </li>
    <li class="bc-09__item">
      <span class="bc-09__sep" aria-hidden="true">/</span
      ><a class="bc-09__link" href="javascript:void(0)">projects</a>
    </li>
    <li class="bc-09__item">
      <span class="bc-09__sep" aria-hidden="true">/</span
      ><a class="bc-09__link bc-09__link--cur" aria-current="page" href="javascript:void(0)"
        >css-tabs</a
      >
    </li>
    <span class="bc-09__cursor" aria-hidden="true">_</span>
  </ol>
</nav>
```

**CSS:**
```css
.bc-09 {
  background: #050a00;
  border-radius: 8px;
  padding: 10px 16px;
  border: 1px solid rgba(30, 217, 138, 0.2);
  font-family: monospace;
  display: inline-block;
}

.bc-09__list {
  display: flex;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 0;
}

.bc-09__item {
  display: flex;
  align-items: center;
}

.bc-09__prompt {
  color: rgba(30, 217, 138, 0.5);
  margin-right: 4px;
}

.bc-09__sep {
  color: rgba(30, 217, 138, 0.3);
  padding: 0 2px;
}

.bc-09__link {
  font-size: 13px;
  color: rgba(30, 217, 138, 0.55);
  text-decoration: none;
  transition: color 0.2s;
}

.bc-09__link:hover {
  color: #1ed98a;
}

.bc-09__link--cur {
  color: #1ed98a;
  pointer-events: none;
}

.bc-09__cursor {
  color: #1ed98a;
  animation: bc09blink 0.7s step-end infinite;
  margin-left: 2px;
}

@keyframes bc09blink {
  50% {
    opacity: 0;
  }
}
```

### 10. Gradient Text

**Type:** Pure CSS
**Description:** Each crumb shifts from muted grey to a full gradient on hover. Current page always shows the gradient.

**HTML:**
```html
<nav class="bc-10" aria-label="Breadcrumb">
  <ol class="bc-10__list">
    <li class="bc-10__item"><a class="bc-10__link" href="javascript:void(0)">Home</a></li>
    <li class="bc-10__item"><a class="bc-10__link" href="javascript:void(0)">Blog</a></li>
    <li class="bc-10__item">
      <a class="bc-10__link bc-10__link--cur" aria-current="page" href="javascript:void(0)"
        >Article</a
      >
    </li>
  </ol>
</nav>
```

**CSS:**
```css
.bc-10__list {
  display: flex;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
}

.bc-10__item + .bc-10__item::before {
  content: "·";
  padding: 0 12px;
  color: rgba(255, 255, 255, 0.2);
  font-size: 16px;
}

.bc-10__link {
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  background: linear-gradient(90deg, #8b7fff, #ff6b9d, #3de8f5);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: grayscale(1) opacity(0.4);
  transition: filter 0.35s;
}

.bc-10__link:hover {
  filter: grayscale(0) opacity(1);
}

.bc-10__link--cur {
  filter: grayscale(0) opacity(1);
  pointer-events: none;
}
```

### 11. Chip with Icon

**Type:** Pure CSS
**Description:** Rounded chip breadcrumbs each with an icon. Active chip fills with accent gradient.

**HTML:**
```html
<nav class="bc-11" aria-label="Breadcrumb">
  <ol class="bc-11__list">
    <li class="bc-11__item">
      <a class="bc-11__link" href="javascript:void(0)"
        ><span class="bc-11__icon" aria-hidden="true">⌂</span
        ><span class="bc-11__text">Home</span></a
      >
    </li>
    <li class="bc-11__item">
      <a class="bc-11__link" href="javascript:void(0)"
        ><span class="bc-11__icon" aria-hidden="true">◫</span
        ><span class="bc-11__text">Components</span></a
      >
    </li>
    <li class="bc-11__item">
      <a class="bc-11__link bc-11__link--cur" aria-current="page" href="javascript:void(0)"
        ><span class="bc-11__icon" aria-hidden="true">⬡</span
        ><span class="bc-11__text">Breadcrumbs</span></a
      >
    </li>
  </ol>
</nav>
```

**CSS:**
```css
.bc-11__list {
  display: flex;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 6px;
  flex-wrap: wrap;
}

.bc-11__item {
  display: flex;
  align-items: center;
}

.bc-11__item + .bc-11__item::before {
  content: "›";
  color: rgba(255, 255, 255, 0.2);
  font-size: 16px;
  margin-right: 6px;
}

.bc-11__link {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  text-decoration: none;
  transition:
    background 0.25s,
    border-color 0.25s,
    transform 0.25s;
}

.bc-11__link:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-1px);
}

.bc-11__icon {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.35);
}

.bc-11__text {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.45);
}

.bc-11__link--cur {
  background: linear-gradient(135deg, #8b7fff, #ff6b9d);
  border-color: transparent;
  pointer-events: none;
}

.bc-11__link--cur .bc-11__icon,
.bc-11__link--cur .bc-11__text {
  color: #fff;
}
```

### 12. Subway Line

**Type:** Pure CSS
**Description:** Crumbs as metro stops on a horizontal line. The current page is the lit "you are here" stop with a soft pulsing glow.

**HTML:**
```html
<nav class="bc-12" aria-label="Breadcrumb">
  <ol class="bc-12__list">
    <li class="bc-12__item">
      <a class="bc-12__link" href="javascript:void(0)">
        <span class="bc-12__dot" aria-hidden="true"></span>
        <span class="bc-12__label">Home</span>
      </a>
    </li>
    <li class="bc-12__item">
      <a class="bc-12__link" href="javascript:void(0)">
        <span class="bc-12__dot" aria-hidden="true"></span>
        <span class="bc-12__label">Components</span>
      </a>
    </li>
    <li class="bc-12__item">
      <a class="bc-12__link bc-12__link--cur" aria-current="page" href="javascript:void(0)">
        <span class="bc-12__dot" aria-hidden="true"></span>
        <span class="bc-12__label">Buttons</span>
      </a>
    </li>
  </ol>
</nav>
```

**CSS:**
```css
.bc-12__list {
  display: flex;
  align-items: center;
  list-style: none;
  padding: 14px 18px 8px;
  margin: 0;
  position: relative;
}

.bc-12__list::before {
  content: "";
  position: absolute;
  top: 24px;
  left: 24px;
  right: 24px;
  height: 2px;
  background: linear-gradient(
    90deg,
    rgba(139, 127, 255, 0.65) 0%,
    rgba(139, 127, 255, 0.65) var(--bc12-cur, 100%),
    rgba(255, 255, 255, 0.12) var(--bc12-cur, 100%),
    rgba(255, 255, 255, 0.12) 100%
  );
  border-radius: 2px;
}

.bc-12__item {
  flex: 1;
  display: flex;
  justify-content: center;
}

.bc-12__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  position: relative;
  padding: 0 6px;
  transition: transform 0.2s;
}

.bc-12__link:hover {
  transform: translateY(-2px);
}

.bc-12__dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #0e0e16;
  border: 2px solid rgba(139, 127, 255, 0.65);
  position: relative;
  z-index: 1;
  transition:
    background 0.2s,
    border-color 0.2s,
    box-shadow 0.2s;
}

.bc-12__link:hover .bc-12__dot {
  border-color: #a78bfa;
  background: rgba(139, 127, 255, 0.15);
}

.bc-12__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  transition: color 0.2s;
  white-space: nowrap;
}

.bc-12__link:hover .bc-12__label {
  color: rgba(255, 255, 255, 0.85);
}

.bc-12__link--cur {
  pointer-events: none;
}

.bc-12__link--cur .bc-12__dot {
  background: #a78bfa;
  border-color: #a78bfa;
  box-shadow:
    0 0 0 4px rgba(167, 139, 250, 0.18),
    0 0 14px rgba(167, 139, 250, 0.6);
  animation: bc12pulse 2s ease-in-out infinite;
}

.bc-12__link--cur .bc-12__label {
  color: #fff;
  font-weight: 700;
}

@keyframes bc12pulse {
  0%,
  100% {
    box-shadow:
      0 0 0 4px rgba(167, 139, 250, 0.18),
      0 0 14px rgba(167, 139, 250, 0.6);
  }
  50% {
    box-shadow:
      0 0 0 6px rgba(167, 139, 250, 0.08),
      0 0 22px rgba(167, 139, 250, 0.85);
  }
}

@media (prefers-reduced-motion: reduce) {
  .bc-12__link--cur .bc-12__dot {
    animation: none;
  }
  .bc-12__link:hover {
    transform: none;
  }
}
```

### 13. Floating Island

**Type:** Pure CSS
**Description:** Each crumb is a floating card that springs upward on hover with a shadow bloom.

**HTML:**
```html
<nav class="bc-13" aria-label="Breadcrumb">
  <ol class="bc-13__list">
    <li class="bc-13__item"><a class="bc-13__link" href="javascript:void(0)">Home</a></li>
    <li class="bc-13__item"><a class="bc-13__link" href="javascript:void(0)">Collections</a></li>
    <li class="bc-13__item">
      <a class="bc-13__link bc-13__link--cur" aria-current="page" href="javascript:void(0)"
        >Breadcrumbs</a
      >
    </li>
  </ol>
</nav>
```

**CSS:**
```css
.bc-13__list {
  display: flex;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 8px;
  flex-wrap: wrap;
}

.bc-13__item {
  display: flex;
  align-items: center;
}

.bc-13__item + .bc-13__item::before {
  content: "→";
  color: rgba(255, 255, 255, 0.15);
  font-size: 12px;
}

.bc-13__link {
  display: block;
  padding: 7px 16px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  transition:
    background 0.3s,
    border-color 0.3s,
    color 0.3s,
    transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.3s;
}

.bc-13__link:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.18);
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}

.bc-13__link--cur {
  background: rgba(139, 127, 255, 0.15);
  border-color: rgba(139, 127, 255, 0.35);
  color: #8b7fff;
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(139, 127, 255, 0.2);
  pointer-events: none;
}
```

### 14. Scale Peek

**Type:** Pure CSS
**Description:** On hover the whole list dims and scales down — only the hovered crumb scales up to full.

**HTML:**
```html
<nav class="bc-14" aria-label="Breadcrumb">
  <ol class="bc-14__list">
    <li class="bc-14__item"><a class="bc-14__link" href="javascript:void(0)">Home</a></li>
    <li class="bc-14__item"><a class="bc-14__link" href="javascript:void(0)">Blog</a></li>
    <li class="bc-14__item">
      <a class="bc-14__link bc-14__link--cur" aria-current="page" href="javascript:void(0)">Post</a>
    </li>
  </ol>
</nav>
```

**CSS:**
```css
.bc-14__list {
  display: flex;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
  flex-wrap: wrap;
}

.bc-14__item + .bc-14__item::before {
  content: "›";
  padding: 0 8px;
  color: rgba(255, 255, 255, 0.2);
  font-size: 16px;
}

.bc-14__link {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.45);
  text-decoration: none;
  transition:
    color 0.25s,
    opacity 0.25s,
    transform 0.25s;
}

.bc-14__list:hover .bc-14__link {
  opacity: 0.35;
  transform: scale(0.96);
}

.bc-14__list:hover .bc-14__link:hover {
  opacity: 1;
  transform: scale(1.05);
  color: #fff;
}

.bc-14__link--cur {
  color: #8b7fff;
  pointer-events: none;
}
```

### 15. Holographic Shimmer

**Type:** Pure CSS
**Description:** Current page gets a looping rainbow holographic background. Past crumbs are plain text.

**HTML:**
```html
<nav class="bc-15" aria-label="Breadcrumb">
  <ol class="bc-15__list">
    <li class="bc-15__item"><a class="bc-15__link" href="javascript:void(0)">Home</a></li>
    <li class="bc-15__item"><a class="bc-15__link" href="javascript:void(0)">Motion</a></li>
    <li class="bc-15__item">
      <a class="bc-15__link bc-15__link--cur" aria-current="page" href="javascript:void(0)"
        ><span class="bc-15__shine" aria-hidden="true"></span
        ><span class="bc-15__text">Effects</span></a
      >
    </li>
  </ol>
</nav>
```

**CSS:**
```css
.bc-15__list {
  display: flex;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
}

.bc-15__item {
  display: flex;
  align-items: center;
}

.bc-15__item + .bc-15__item::before {
  content: "/";
  padding: 0 12px;
  color: rgba(255, 255, 255, 0.2);
}

.bc-15__link {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  transition: color 0.25s;
}

.bc-15__link:hover {
  color: rgba(255, 255, 255, 0.8);
}

.bc-15__link--cur {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 6px;
  pointer-events: none;
}

.bc-15__shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, #8b7fff, #ff6b9d, #3de8f5, #1ed98a, #f5a84a, #8b7fff);
  background-size: 300% 100%;
  animation: bc15holo 3s linear infinite;
}

@keyframes bc15holo {
  from {
    background-position: 0% 50%;
  }
  to {
    background-position: 300% 50%;
  }
}

.bc-15__text {
  position: relative;
  z-index: 1;
  color: #fff;
  font-weight: 700;
}
```

### 16. Arrow Chain

**Type:** Pure CSS
**Description:** CSS arrow-chevron breadcrumbs using border triangles — no SVG or images needed.

**HTML:**
```html
<nav class="bc-16" aria-label="Breadcrumb">
  <ol class="bc-16__list">
    <li class="bc-16__item"><a class="bc-16__link" href="javascript:void(0)">Home</a></li>
    <li class="bc-16__item"><a class="bc-16__link" href="javascript:void(0)">Shop</a></li>
    <li class="bc-16__item">
      <a class="bc-16__link bc-16__link--cur" aria-current="page" href="javascript:void(0)"
        >Product</a
      >
    </li>
  </ol>
</nav>
```

**CSS:**
```css
.bc-16__list {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
}

.bc-16__item {
  display: flex;
}

.bc-16__link {
  display: flex;
  align-items: center;
  padding: 8px 12px 8px 24px;
  position: relative;
  font-size: 13px;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.45);
  text-decoration: none;
  margin-left: -10px;
  transition:
    background 0.25s,
    color 0.25s;
}

.bc-16__item:first-child .bc-16__link {
  padding-left: 16px;
  border-radius: 8px 0 0 8px;
  margin-left: 0;
}

.bc-16__link::after {
  content: "";
  position: absolute;
  right: -10px;
  top: 0;
  width: 0;
  height: 100%;
  border-top: 19px solid transparent;
  border-bottom: 19px solid transparent;
  border-left: 10px solid rgba(255, 255, 255, 0.06);
  z-index: 1;
  transition: border-left-color 0.25s;
}

.bc-16__link:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  z-index: 2;
}

.bc-16__link:hover::after {
  border-left-color: rgba(255, 255, 255, 0.12);
}

.bc-16__link--cur {
  background: #8b7fff;
  color: #fff;
  pointer-events: none;
  z-index: 2;
  border-radius: 0 8px 8px 0;
}

.bc-16__link--cur::after {
  display: none;
}
```

### 17. Dotted Separator

**Type:** Pure CSS
**Description:** Ellipsis dots between crumbs that expand on hover for a subtle kinetic effect.

**HTML:**
```html
<nav class="bc-17" aria-label="Breadcrumb">
  <ol class="bc-17__list">
    <li class="bc-17__item"><a class="bc-17__link" href="javascript:void(0)">Home</a></li>
    <li class="bc-17__item"><a class="bc-17__link" href="javascript:void(0)">Design</a></li>
    <li class="bc-17__item">
      <a class="bc-17__link bc-17__link--cur" aria-current="page" href="javascript:void(0)"
        >Tokens</a
      >
    </li>
  </ol>
</nav>
```

**CSS:**
```css
.bc-17__list {
  display: flex;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
  flex-wrap: wrap;
}

.bc-17__item + .bc-17__item::before {
  content: "···";
  padding: 0 10px;
  color: rgba(255, 255, 255, 0.18);
  font-size: 14px;
  letter-spacing: 2px;
  transition:
    color 0.25s,
    letter-spacing 0.3s;
}

.bc-17__item:hover + .bc-17__item::before {
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: 4px;
}

.bc-17__link {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  transition: color 0.25s;
}

.bc-17__link:hover {
  color: rgba(255, 255, 255, 0.85);
}

.bc-17__link--cur {
  color: #fff;
  pointer-events: none;
}
```

### 18. Bordered Box

**Type:** Pure CSS
**Description:** All crumbs share one bordered container with dividers. Active gets an inset top+bottom accent stroke.

**HTML:**
```html
<nav class="bc-18" aria-label="Breadcrumb">
  <ol class="bc-18__list">
    <li class="bc-18__item"><a class="bc-18__link" href="javascript:void(0)">Home</a></li>
    <li class="bc-18__item"><a class="bc-18__link" href="javascript:void(0)">Docs</a></li>
    <li class="bc-18__item">
      <a class="bc-18__link bc-18__link--cur" aria-current="page" href="javascript:void(0)">API</a>
    </li>
  </ol>
</nav>
```

**CSS:**
```css
.bc-18__list {
  display: flex;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  overflow: hidden;
}

.bc-18__item + .bc-18__item {
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.bc-18__link {
  display: block;
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  transition:
    background 0.25s,
    color 0.25s;
}

.bc-18__link:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

.bc-18__link--cur {
  background: rgba(139, 127, 255, 0.12);
  color: #8b7fff;
  pointer-events: none;
  box-shadow:
    inset 0 2px 0 #8b7fff,
    inset 0 -2px 0 #8b7fff;
}
```

### 19. Progress Track

**Type:** Pure CSS
**Description:** Stepper-style breadcrumb with numbered nodes connected by a track line — great for multi-step flows.

**HTML:**
```html
<nav class="bc-19" aria-label="Breadcrumb">
  <ol class="bc-19__list">
    <li class="bc-19__item bc-19__item--done">
      <div class="bc-19__node">✓</div>
      <a class="bc-19__link" href="javascript:void(0)">Cart</a>
    </li>
    <li class="bc-19__item bc-19__item--done">
      <div class="bc-19__node bc-19__node--cur">2</div>
      <a class="bc-19__link bc-19__link--cur" aria-current="page" href="javascript:void(0)"
        >Shipping</a
      >
    </li>
    <li class="bc-19__item">
      <div class="bc-19__node bc-19__node--next">3</div>
      <span class="bc-19__label">Payment</span>
    </li>
  </ol>
</nav>
```

**CSS:**
```css
.bc-19__list {
  display: flex;
  align-items: flex-start;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 0;
}

.bc-19__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 1;
  position: relative;
}

.bc-19__item::before {
  content: "";
  position: absolute;
  top: 14px;
  left: calc(50% + 14px);
  right: calc(-50% + 14px);
  height: 2px;
  background: rgba(255, 255, 255, 0.1);
}

.bc-19__item:last-child::before {
  display: none;
}

.bc-19__item--done::before {
  background: #8b7fff;
}

.bc-19__node {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.08);
  border: 2px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.35);
  transition: all 0.3s;
}

.bc-19__item--done .bc-19__node {
  background: #8b7fff;
  border-color: #8b7fff;
  color: #fff;
}

.bc-19__node--cur {
  background: transparent;
  border-color: #8b7fff;
  color: #8b7fff;
  box-shadow: 0 0 0 4px rgba(139, 127, 255, 0.2);
}

.bc-19__node--next {
  opacity: 0.4;
}

.bc-19__link {
  font-size: 11px;
  font-weight: 600;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.55);
  text-align: center;
  transition: color 0.25s;
}

.bc-19__link--cur {
  color: #8b7fff;
  pointer-events: none;
}

.bc-19__label {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.2);
}
```

### 20. Glassmorphism Bar

**Type:** Pure CSS
**Description:** All crumbs live inside a single frosted glass pill container with blur and saturation.

**HTML:**
```html
<nav class="bc-20" aria-label="Breadcrumb">
  <ol class="bc-20__list">
    <li class="bc-20__item"><a class="bc-20__link" href="javascript:void(0)">Home</a></li>
    <li class="bc-20__item"><a class="bc-20__link" href="javascript:void(0)">Motion</a></li>
    <li class="bc-20__item">
      <a class="bc-20__link bc-20__link--cur" aria-current="page" href="javascript:void(0)"
        >Animation</a
      >
    </li>
  </ol>
</nav>
```

**CSS:**
```css
.bc-20 {
  display: inline-block;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 50px;
  padding: 4px;
}

.bc-20__list {
  display: flex;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
}

.bc-20__item + .bc-20__item {
  border-left: 1px solid rgba(255, 255, 255, 0.12);
}

.bc-20__link {
  display: block;
  padding: 6px 16px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  border-radius: 50px;
  transition:
    background 0.3s,
    color 0.3s;
}

.bc-20__link:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.bc-20__link--cur {
  background: rgba(139, 127, 255, 0.25);
  color: #fff;
  pointer-events: none;
}
```

### 21. Wave Underline

**Type:** Pure CSS
**Description:** An animated SVG wave appears under each link on hover — the current page keeps the wave active.

**HTML:**
```html
<nav class="bc-21" aria-label="Breadcrumb">
  <ol class="bc-21__list">
    <li class="bc-21__item"><a class="bc-21__link" href="javascript:void(0)">Home</a></li>
    <li class="bc-21__item"><a class="bc-21__link" href="javascript:void(0)">Library</a></li>
    <li class="bc-21__item">
      <a class="bc-21__link bc-21__link--cur" aria-current="page" href="javascript:void(0)"
        >Collections</a
      >
    </li>
  </ol>
</nav>
```

**CSS:**
```css
.bc-21__list {
  display: flex;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
}

.bc-21__item + .bc-21__item::before {
  content: "›";
  padding: 0 10px;
  color: rgba(255, 255, 255, 0.2);
  font-size: 18px;
}

.bc-21__link {
  position: relative;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.45);
  text-decoration: none;
  padding-bottom: 6px;
  transition: color 0.25s;
}

.bc-21__link::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 4'%3E%3Cpath d='M0 2 Q5 0 10 2 Q15 4 20 2' fill='none' stroke='%238b7fff' stroke-width='1.5'/%3E%3C/svg%3E");
  background-size: 20px 4px;
  background-repeat: repeat-x;
  opacity: 0;
  transform: translateY(4px);
  transition:
    opacity 0.3s,
    transform 0.3s;
  animation: bc21wave 1.2s linear infinite paused;
}

.bc-21__link:hover::after,
.bc-21__link--cur::after {
  opacity: 1;
  transform: translateY(0);
  animation-play-state: running;
}

@keyframes bc21wave {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 20px 0;
  }
}

.bc-21__link:hover {
  color: rgba(255, 255, 255, 0.85);
}

.bc-21__link--cur {
  color: #8b7fff;
  pointer-events: none;
}
```

### 22. Copy Path

**Type:** CSS+JS
**Description:** Standard breadcrumb with a copy button that copies the current URL path and shows a toast.

**HTML:**
```html
<nav class="bc-22" aria-label="Breadcrumb">
  <div class="bc-22__wrap">
    <ol class="bc-22__list">
      <li class="bc-22__item"><a class="bc-22__link" href="javascript:void(0)">Home</a></li>
      <li class="bc-22__item"><a class="bc-22__link" href="javascript:void(0)">Navigation</a></li>
      <li class="bc-22__item">
        <a class="bc-22__link bc-22__link--cur" aria-current="page" href="javascript:void(0)"
          >Breadcrumbs</a
        >
      </li>
    </ol>
    <button class="bc-22__copy" id="bc22-btn" aria-label="Copy path">
      <span class="bc-22__copy-icon" aria-hidden="true">⎘</span>
    </button>
  </div>
  <span class="bc-22__toast" id="bc22-toast">Copied!</span>
</nav>
```

**CSS:**
```css
.bc-22 {
  position: relative;
}

.bc-22__wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.bc-22__list {
  display: flex;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
}

.bc-22__item + .bc-22__item::before {
  content: "/";
  padding: 0 10px;
  color: rgba(255, 255, 255, 0.2);
}

.bc-22__link {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  transition: color 0.25s;
}

.bc-22__link:hover {
  color: rgba(255, 255, 255, 0.8);
}

.bc-22__link--cur {
  color: #fff;
  pointer-events: none;
}

.bc-22__copy {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
  cursor: pointer;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background 0.2s,
    color 0.2s,
    border-color 0.2s;
}

.bc-22__copy:hover {
  background: rgba(139, 127, 255, 0.2);
  border-color: rgba(139, 127, 255, 0.4);
  color: #8b7fff;
}

.bc-22__copy-icon {
  line-height: 1;
  display: block;
}

.bc-22__toast {
  position: absolute;
  top: -34px;
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: #8b7fff;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 6px;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.2s,
    transform 0.2s;
  white-space: nowrap;
}

.bc-22__toast--show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
```

**JS:**
```js
document.querySelectorAll(".bc-22__copy").forEach(function (btn) {
  btn.addEventListener("click", function () {
    var toast = btn.closest(".bc-22").querySelector(".bc-22__toast");
    navigator.clipboard.writeText(window.location.href).then(function () {
      toast.classList.add("bc-22__toast--show");
      setTimeout(function () {
        toast.classList.remove("bc-22__toast--show");
      }, 2000);
    });
  });
});
```

---
## 8 CSS Brutalist Designs

URL: https://codefronts.com/design-styles/css-brutalist/
Description: 8 hand-coded CSS brutalist designs spanning raw e-commerce product cards, a bureaucratic inspection form, a dark constructivist ops dashboard, a collision-typography portfolio grid, an indie SaaS hero + pricing split, a draggable Windows 95 desktop, a three-column long-read editorial, and a stark streetwear catalog. Heavy borders, oversized type, no rounded corners.
Demo count: 8

### 01. Product Cards

**Type:** Pure CSS
**Description:** Raw e-commerce product cards built for a furniture/object brand. Heavy black borders, Bebas Neue headlines at aggressive sizes, a construction-tape stripe motif, a cement-grey material palette, and a red-on-black "New Drop" tag system. Cards use industrial geometry (crosshairs, diamonds, rotated stamps) as stand-ins for product imagery. The bottom row breaks the grid with a full-bleed red feature banner and a compact dark quick-add panel — the contrast between the three card treatments (black, yellow, cement) is intentional. Bebas Neue + Space Mono + DM Serif Display. Best for furniture brands, industrial-design retailers, statement product pages.

**HTML:**
```html
<section class="br-prd" aria-label="Brutalist product cards demo">
  <div class="card">
    <div class="grid">

      <!-- CARD 1 -->
      <article class="card-1 br-card">
        <div class="img-zone" aria-hidden="true">
          <div class="cross"></div>
          <div class="tag">NEW DROP</div>
        </div>
        <div class="body">
          <div class="cat">// Object Series</div>
          <div class="name">VOID<br />CHAIR<br />MK.II</div>
          <div class="meta">
            <div class="price">$840</div>
            <button class="btn" type="button">ACQUIRE →</button>
          </div>
        </div>
      </article>

      <!-- CARD 2 -->
      <article class="card-2 br-card">
        <div class="stripe-top" aria-hidden="true"></div>
        <div class="num" aria-hidden="true">02</div>
        <div class="body">
          <div class="cat">// Raw Material</div>
          <div class="name">The<br />Slab<br />Table</div>
          <div class="desc">Cast in a single pour of recycled concrete aggregate. No finish. No apology.</div>
        </div>
        <div class="img-zone-2" aria-hidden="true">
          <div class="dot"></div>
          <span>SLAB</span>
        </div>
        <div class="body">
          <div class="bottom">
            <div class="price">
              $1,290
              <small>FREE FREIGHT</small>
            </div>
            <button class="btn" type="button">ADD →</button>
          </div>
        </div>
      </article>

      <!-- CARD 3 -->
      <article class="card-3 br-card">
        <div class="img-zone" aria-hidden="true">
          <div class="diamond"></div>
          <div class="stamp">IN<br />STOCK</div>
        </div>
        <div class="body">
          <div class="ref">REF // 0039-B</div>
          <div class="name">IRON<br />SHELF<br />UNIT</div>
          <div class="specs">
            <div class="spec">
              <div class="spec-label">Material</div>
              <div class="spec-val">Raw Iron</div>
            </div>
            <div class="spec">
              <div class="spec-label">Weight</div>
              <div class="spec-val">34 kg</div>
            </div>
            <div class="spec">
              <div class="spec-label">Width</div>
              <div class="spec-val">120 cm</div>
            </div>
            <div class="spec">
              <div class="spec-label">Shelves</div>
              <div class="spec-val">5 fixed</div>
            </div>
          </div>
          <div class="bottom">
            <div class="price">$620</div>
            <button class="btn" type="button">BUY →</button>
          </div>
        </div>
      </article>
    </div>

    <!-- ROW 2 -->
    <div class="row2">
      <article class="card-4 br-card">
        <div class="left">
          <div class="label">// Featured Collection</div>
          <div class="big-name">BRUT<br />FORCE<br />SS25</div>
        </div>
        <div class="divider" aria-hidden="true"></div>
        <div class="right">
          <div class="desc-text">Objects made without apology. Raw edges, cast imperfections, and load-bearing joints exposed. Furniture as statement — not decoration.</div>
          <div class="badge">SHOP 24 PIECES →</div>
        </div>
      </article>

      <article class="card-5 br-card">
        <div class="top-tag">// Quick Add</div>
        <div class="items">
          <div class="item">
            <span class="item-name">Bolt Stool</span>
            <span class="item-price">$280</span>
          </div>
          <div class="item">
            <span class="item-name">Grid Mirror</span>
            <span class="item-price">$460</span>
          </div>
          <div class="item">
            <span class="item-name">Tank Lamp</span>
            <span class="item-price">$195</span>
          </div>
          <div class="item">
            <span class="item-name">Beam Bench</span>
            <span class="item-price">$740</span>
          </div>
          <div class="item">
            <span class="item-name">Forge Vase</span>
            <span class="item-price">$89</span>
          </div>
        </div>
        <button class="view-all" type="button">VIEW ALL ITEMS</button>
      </article>
    </div>
  </div>
</section>
```

**CSS:**
```css
/* ─── 01 Brutalist Product Cards — raw e-commerce grid ──────────── */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Space+Mono:ital,wght@0,400;0,700;1,400&family=DM+Serif+Display:ital@0;1&display=swap');

.br-prd {
  --br-prd-black: #0a0a0a;
  --br-prd-white: #f5f0e8;
  --br-prd-red: #e8001d;
  --br-prd-yellow: #f7e02b;
  --br-prd-cement: #c8c0b4;
  --br-prd-border: 3px solid #0a0a0a;
  --br-prd-border-thick: 6px solid #0a0a0a;

  position: relative;
  width: 100%;
  min-height: 980px;
  background: var(--br-prd-white);
  font-family: 'Space Mono', ui-monospace, monospace;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 32px 16px;
  overflow: hidden;
  box-sizing: border-box;
}

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

/* Noise texture — moved off body::before; scoped to wrapper */
.br-prd::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 999;
}

.br-prd .card {
  position: relative;
  width: 100%;
  max-width: 960px;
  z-index: 1;
}

.br-prd .grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
  width: 100%;
}

/* CARD BASE */
.br-prd .br-card {
  border: var(--br-prd-border-thick);
  border-color: var(--br-prd-black);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.08s;
}
.br-prd .br-card:hover { transform: translate(-3px, -3px); }
.br-prd .br-card:hover::after {
  content: '';
  position: absolute;
  inset: 0;
  border: var(--br-prd-border-thick);
  border-color: var(--br-prd-red);
  pointer-events: none;
  z-index: 10;
}

/* CARD 1 — BRUTALIST STATEMENT */
.br-prd .card-1 {
  background: var(--br-prd-black);
  aspect-ratio: 3 / 4;
}
.br-prd .card-1 .img-zone {
  width: 100%;
  height: 55%;
  background: #1c1c1c;
  border-bottom: var(--br-prd-border-thick);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.br-prd .card-1 .img-zone::before {
  content: 'OBJ';
  font-family: 'Bebas Neue', sans-serif;
  font-size: 80px;
  color: #333;
  letter-spacing: 12px;
  position: absolute;
}
.br-prd .card-1 .img-zone .cross {
  width: 120px;
  height: 120px;
  position: relative;
  z-index: 2;
}
.br-prd .card-1 .img-zone .cross::before,
.br-prd .card-1 .img-zone .cross::after {
  content: '';
  position: absolute;
  background: var(--br-prd-red);
}
.br-prd .card-1 .img-zone .cross::before { width: 4px; height: 100%; left: 50%; transform: translateX(-50%); }
.br-prd .card-1 .img-zone .cross::after { height: 4px; width: 100%; top: 50%; transform: translateY(-50%); }
.br-prd .card-1 .tag {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--br-prd-red);
  color: var(--br-prd-white);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 3px;
  padding: 4px 10px;
  text-transform: uppercase;
}
.br-prd .card-1 .body { padding: 18px 20px; }
.br-prd .card-1 .cat {
  color: #555;
  font-size: 10px;
  letter-spacing: 4px;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.br-prd .card-1 .name {
  font-family: 'Bebas Neue', sans-serif;
  color: var(--br-prd-white);
  font-size: 36px;
  line-height: 0.9;
  letter-spacing: 2px;
  margin-bottom: 12px;
}
.br-prd .card-1 .meta {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  border-top: 2px solid #333;
  padding-top: 14px;
  margin-top: 10px;
}
.br-prd .card-1 .price {
  color: var(--br-prd-yellow);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -1px;
}
.br-prd .card-1 .btn {
  background: var(--br-prd-yellow);
  color: var(--br-prd-black);
  border: none;
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 8px 14px;
  cursor: pointer;
}

/* CARD 2 — YELLOW STRIKE */
.br-prd .card-2 {
  background: var(--br-prd-yellow);
  border-left: none;
  aspect-ratio: 3 / 4;
}
.br-prd .card-2 .stripe-top {
  background: repeating-linear-gradient(
    -45deg,
    var(--br-prd-black),
    var(--br-prd-black) 10px,
    var(--br-prd-yellow) 10px,
    var(--br-prd-yellow) 20px
  );
  height: 16px;
  border-bottom: var(--br-prd-border-thick);
}
.br-prd .card-2 .num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 120px;
  color: rgba(0, 0, 0, 0.08);
  position: absolute;
  right: -10px;
  top: 20px;
  line-height: 1;
  pointer-events: none;
}
.br-prd .card-2 .body { padding: 20px; position: relative; }
.br-prd .card-2 .cat {
  font-size: 10px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: #444;
  margin-bottom: 10px;
}
.br-prd .card-2 .name {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 42px;
  line-height: 0.95;
  color: var(--br-prd-black);
  margin-bottom: 16px;
  font-style: italic;
}
.br-prd .card-2 .desc {
  font-size: 11px;
  line-height: 1.7;
  color: #333;
  border-left: 4px solid var(--br-prd-black);
  padding-left: 12px;
  margin-bottom: 20px;
}
.br-prd .card-2 .img-zone-2 {
  width: calc(100% + 40px);
  margin-left: -20px;
  height: 140px;
  background: var(--br-prd-black);
  border-top: var(--br-prd-border-thick);
  border-bottom: var(--br-prd-border-thick);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  margin-bottom: 20px;
}
.br-prd .card-2 .img-zone-2 span {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 56px;
  color: #222;
  letter-spacing: 8px;
}
.br-prd .card-2 .img-zone-2 .dot {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 4px solid var(--br-prd-yellow);
  position: absolute;
}
.br-prd .card-2 .bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.br-prd .card-2 .price {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 48px;
  color: var(--br-prd-black);
  line-height: 1;
}
.br-prd .card-2 .price small {
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 11px;
  display: block;
  letter-spacing: 2px;
  color: #555;
}
.br-prd .card-2 .btn {
  background: var(--br-prd-black);
  color: var(--br-prd-yellow);
  border: none;
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 12px 16px;
  cursor: pointer;
}

/* CARD 3 — CEMENT INDUSTRIAL */
.br-prd .card-3 {
  background: var(--br-prd-cement);
  border-left: none;
  aspect-ratio: 3 / 4;
}
.br-prd .card-3 .img-zone {
  width: 100%;
  height: 50%;
  background: #b0a898;
  border-bottom: var(--br-prd-border-thick);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.br-prd .card-3 .img-zone::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 28px,
    rgba(0, 0, 0, 0.04) 28px,
    rgba(0, 0, 0, 0.04) 30px
  );
}
.br-prd .card-3 .diamond {
  width: 100px;
  height: 100px;
  border: 6px solid var(--br-prd-black);
  transform: rotate(45deg);
  position: relative;
  z-index: 2;
}
.br-prd .card-3 .diamond::after {
  content: '';
  position: absolute;
  inset: 10px;
  border: 3px solid var(--br-prd-black);
}
.br-prd .card-3 .stamp {
  position: absolute;
  bottom: 12px;
  right: 12px;
  width: 60px;
  height: 60px;
  border: 4px solid var(--br-prd-red);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--br-prd-red);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  text-align: center;
  text-transform: uppercase;
  transform: rotate(-12deg);
  z-index: 3;
}
.br-prd .card-3 .body { padding: 20px; }
.br-prd .card-3 .ref {
  font-size: 9px;
  letter-spacing: 4px;
  color: #666;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.br-prd .card-3 .name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 40px;
  line-height: 0.9;
  color: var(--br-prd-black);
  margin-bottom: 14px;
  letter-spacing: 2px;
}
.br-prd .card-3 .specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: var(--br-prd-border);
  margin-bottom: 16px;
}
.br-prd .card-3 .spec {
  padding: 8px 10px;
  border-right: var(--br-prd-border);
  border-bottom: var(--br-prd-border);
}
.br-prd .card-3 .spec:nth-child(even) { border-right: none; }
.br-prd .card-3 .spec:nth-child(3),
.br-prd .card-3 .spec:nth-child(4) { border-bottom: none; }
.br-prd .card-3 .spec-label {
  font-size: 8px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #666;
  margin-bottom: 3px;
}
.br-prd .card-3 .spec-val {
  font-size: 13px;
  font-weight: 700;
  color: var(--br-prd-black);
}
.br-prd .card-3 .bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.br-prd .card-3 .price {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 44px;
  color: var(--br-prd-black);
  line-height: 1;
}
.br-prd .card-3 .btn {
  background: var(--br-prd-red);
  color: var(--br-prd-white);
  border: none;
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 10px 14px;
  cursor: pointer;
}

/* BOTTOM ROW */
.br-prd .row2 {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 0;
  border-top: var(--br-prd-border-thick);
}

/* CARD 4 — WIDE FEATURE */
.br-prd .card-4 {
  background: var(--br-prd-red);
  border: none;
  border-right: var(--br-prd-border-thick);
  padding: 32px;
  display: flex;
  align-items: center;
  gap: 40px;
  position: relative;
  overflow: hidden;
}
.br-prd .card-4::before {
  content: '★';
  font-family: 'Bebas Neue', sans-serif;
  font-size: 300px;
  color: rgba(255, 255, 255, 0.08);
  position: absolute;
  right: -30px;
  top: 50%;
  transform: translateY(-50%);
  line-height: 1;
}
.br-prd .card-4 .label {
  font-size: 9px;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 8px;
}
.br-prd .card-4 .big-name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 80px;
  color: var(--br-prd-white);
  line-height: 0.85;
  letter-spacing: 3px;
}
.br-prd .card-4 .divider {
  width: 3px;
  height: 100px;
  background: rgba(255, 255, 255, 0.3);
  flex-shrink: 0;
}
.br-prd .card-4 .right { flex: 1; }
.br-prd .card-4 .desc-text {
  font-size: 12px;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 20px;
}
.br-prd .card-4 .badge {
  display: inline-block;
  background: var(--br-prd-yellow);
  color: var(--br-prd-black);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  padding: 6px 16px;
  text-transform: uppercase;
}

/* CARD 5 — TALL ASIDE */
.br-prd .card-5 {
  background: var(--br-prd-black);
  border: none;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.br-prd .card-5 .top-tag {
  font-size: 9px;
  letter-spacing: 4px;
  color: #555;
  text-transform: uppercase;
  border-bottom: 1px solid #222;
  padding-bottom: 12px;
  margin-bottom: 16px;
}
.br-prd .card-5 .items { flex: 1; }
.br-prd .card-5 .item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #222;
  cursor: pointer;
}
.br-prd .card-5 .item:hover .item-name { color: var(--br-prd-yellow); }
.br-prd .card-5 .item-name {
  font-size: 11px;
  color: var(--br-prd-white);
  letter-spacing: 1px;
  transition: color 0.15s;
}
.br-prd .card-5 .item-price {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 20px;
  color: var(--br-prd-yellow);
}
.br-prd .card-5 .view-all {
  margin-top: 16px;
  background: transparent;
  border: 2px solid #333;
  color: #555;
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 3px;
  text-transform: uppercase;
  padding: 10px;
  cursor: pointer;
  width: 100%;
  transition: all 0.15s;
}
.br-prd .card-5 .view-all:hover { border-color: var(--br-prd-yellow); color: var(--br-prd-yellow); }

@media (max-width: 760px) {
  .br-prd .grid { grid-template-columns: 1fr; }
  .br-prd .row2 { grid-template-columns: 1fr; }
  .br-prd .card-2,
  .br-prd .card-3 { border-left: var(--br-prd-border-thick); border-top: none; }
  .br-prd .card-4 { border-right: none; border-bottom: var(--br-prd-border-thick); flex-direction: column; gap: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .br-prd .br-card,
  .br-prd .card-5 .item-name,
  .br-prd .card-5 .view-all { transition: none; }
}
```

### 02. Form Elements

**Type:** CSS + JS
**Description:** A bureaucratic form UI inspired by government documents and industrial inspection sheets. Ruled paper lines and a red margin run behind everything. Fields live inside a rigid cell-bordered grid with hand-stamp section numbers. Checkboxes use a ✗ mark instead of a checkmark. Radio options are full-width blocks that invert to dark when selected. The textarea header is a black bar with a character counter. A ranged budget slider and a final submit zone with fine-print legalese complete the system — every interaction has weight and friction by design. IBM Plex Mono + Barlow Condensed + Courier Prime. Best for inspection portals, compliance forms, government UIs, brutalist contact pages.

**HTML:**
```html
<section class="br-frm" aria-label="Brutalist form elements demo">
  <div class="card">

    <div class="corner-stamp" aria-hidden="true">
      <div class="form-id">FORM NO.</div>
      <div class="form-num">BF-04</div>
    </div>

    <div class="rejected-stamp" aria-hidden="true">PENDING</div>

    <div class="form-shell">

      <!-- SECTION 1 -->
      <div class="section-stamp">
        <div class="stamp-num">01</div>
        <div class="stamp-title">Identification</div>
      </div>

      <div class="fields-block">
        <div class="row">
          <div class="cell wide">
            <div class="cell-label">Full Legal Name <span class="req">*</span></div>
            <input class="cell-input" type="text" placeholder="surname, given name" />
          </div>
          <div class="cell narrow">
            <div class="cell-label">DOB</div>
            <input class="cell-input" type="text" placeholder="DD/MM/YY" />
          </div>
        </div>
        <div class="row">
          <div class="cell">
            <div class="cell-label">Organization</div>
            <input class="cell-input" type="text" placeholder="entity or unit" />
          </div>
          <div class="cell">
            <div class="cell-label">Reference Code</div>
            <input class="cell-input" type="text" placeholder="e.g. PRJ-0039" />
          </div>
        </div>
        <div class="row">
          <div class="cell wide">
            <div class="cell-label">Contact Address <span class="req">*</span></div>
            <input class="cell-input" type="text" placeholder="street, city, postal code" />
          </div>
          <div class="cell">
            <div class="cell-label">Territory</div>
            <div class="select-wrap-inner">
              <select aria-label="Territory">
                <option>— select —</option>
                <option>Zone A — North</option>
                <option>Zone B — South</option>
                <option>Zone C — East</option>
                <option>Zone D — West</option>
              </select>
            </div>
          </div>
        </div>
      </div>

      <!-- SECTION 2 -->
      <div class="section-stamp">
        <div class="stamp-num">02</div>
        <div class="stamp-title">Classification</div>
      </div>

      <div class="check-section">
        <div class="check-grid">
          <label class="check-item">
            <input type="checkbox" checked />
            <div class="check-box" aria-hidden="true"></div>
            <span class="check-label">Structural Review</span>
          </label>
          <label class="check-item">
            <input type="checkbox" />
            <div class="check-box" aria-hidden="true"></div>
            <span class="check-label">Material Audit</span>
          </label>
          <label class="check-item">
            <input type="checkbox" checked />
            <div class="check-box" aria-hidden="true"></div>
            <span class="check-label">Site Inspection</span>
          </label>
          <label class="check-item">
            <input type="checkbox" />
            <div class="check-box" aria-hidden="true"></div>
            <span class="check-label">Load Testing</span>
          </label>
          <label class="check-item">
            <input type="checkbox" />
            <div class="check-box" aria-hidden="true"></div>
            <span class="check-label">Environmental</span>
          </label>
          <label class="check-item">
            <input type="checkbox" checked />
            <div class="check-box" aria-hidden="true"></div>
            <span class="check-label">Compliance</span>
          </label>
        </div>
      </div>

      <!-- SECTION 3 -->
      <div class="section-stamp">
        <div class="stamp-num">03</div>
        <div class="stamp-title">Priority Level</div>
      </div>

      <div class="radio-section">
        <div class="radio-row">
          <label class="radio-opt">
            <input type="radio" name="br-frm-priority" />
            <div class="opt-inner">
              <span class="opt-code">LVL-1</span>
              <span class="opt-name">ROUTINE</span>
              <span class="opt-sub">28–30 working days</span>
            </div>
          </label>
          <label class="radio-opt">
            <input type="radio" name="br-frm-priority" checked />
            <div class="opt-inner">
              <span class="opt-code">LVL-2</span>
              <span class="opt-name">URGENT</span>
              <span class="opt-sub">5–10 working days</span>
            </div>
          </label>
          <label class="radio-opt">
            <input type="radio" name="br-frm-priority" />
            <div class="opt-inner">
              <span class="opt-code">LVL-3</span>
              <span class="opt-name">CRITICAL</span>
              <span class="opt-sub">Within 48 hours</span>
            </div>
          </label>
        </div>
      </div>

      <!-- SECTION 4 -->
      <div class="section-stamp">
        <div class="stamp-num">04</div>
        <div class="stamp-title">Remarks</div>
      </div>

      <div class="textarea-section">
        <div class="textarea-wrap">
          <div class="textarea-header">
            <span class="textarea-header-label">Supplementary Notes</span>
            <span class="textarea-header-count">0 / 400</span>
          </div>
          <textarea placeholder="Enter any relevant observations, deviations from standard, or additional context…" aria-label="Supplementary Notes"></textarea>
        </div>
      </div>

      <!-- BUDGET SLIDER -->
      <div class="slider-section">
        <div class="slider-wrap">
          <div class="slider-top">
            <span class="slider-label">Allocated Budget</span>
            <span class="slider-val" data-br-frm-slider-val>$35,000</span>
          </div>
          <input type="range" min="0" max="100" value="35" data-br-frm-slider aria-label="Allocated Budget" />
          <div class="slider-ticks">
            <span class="tick">$0</span>
            <span class="tick">$25K</span>
            <span class="tick">$50K</span>
            <span class="tick">$75K</span>
            <span class="tick">$100K</span>
          </div>
        </div>
      </div>

      <!-- SUBMIT -->
      <div class="submit-row">
        <div class="submit-note">
          By submitting this form you confirm all information is accurate. <strong>False declarations</strong> may result in rejection and further review under Section 14.3 of operational protocol.
        </div>
        <button class="btn-submit" type="button">SUBMIT</button>
        <button class="btn-clear" type="button">CLEAR</button>
      </div>

    </div>
  </div>
</section>
```

**CSS:**
```css
/* ─── 02 Brutalist Form Elements — bureaucratic inspection form ── */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,600;1,400&family=Barlow+Condensed:wght@400;700;900&family=Courier+Prime:ital,wght@0,400;0,700;1,400&display=swap');

.br-frm {
  --br-frm-paper: #ede8df;
  --br-frm-dark: #0f0f0f;
  --br-frm-red: #c8001a;
  --br-frm-ink: #1a1a2e;
  --br-frm-rule: #b5a99a;
  --br-frm-yellow: #f0c000;

  position: relative;
  width: 100%;
  min-height: 1180px;
  background: var(--br-frm-paper);
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  padding: 0;
  overflow: hidden;
  box-sizing: border-box;
}

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

/* Ruled paper lines — was body::before; scoped to wrapper. */
.br-frm::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 31px,
    var(--br-frm-rule) 31px,
    var(--br-frm-rule) 32px
  );
  opacity: 0.4;
  pointer-events: none;
  z-index: 0;
}

/* Red margin line — was body::after; scoped to wrapper. */
.br-frm::after {
  content: '';
  position: absolute;
  top: 0;
  left: 64px;
  width: 2px;
  height: 100%;
  background: #e8888a;
  opacity: 0.6;
  pointer-events: none;
  z-index: 0;
}

.br-frm .card {
  position: relative;
  width: 100%;
  max-width: none;
  z-index: 1;
}

.br-frm .form-shell {
  position: relative;
  z-index: 1;
  padding: 40px 48px 40px 90px;
  max-width: 900px;
}

/* Corner stamps (form ID + rejected) — were position:fixed; now
   position:absolute inside the wrapper so they don't escape. */
.br-frm .corner-stamp {
  position: absolute;
  top: 20px;
  right: 28px;
  z-index: 10;
  text-align: right;
}
.br-frm .corner-stamp .form-id {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px;
  letter-spacing: 4px;
  color: #bbb;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.br-frm .corner-stamp .form-num {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 36px;
  font-weight: 900;
  color: var(--br-frm-dark);
  line-height: 1;
}
.br-frm .rejected-stamp {
  position: absolute;
  bottom: 40px;
  right: 60px;
  border: 6px solid var(--br-frm-red);
  color: var(--br-frm-red);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 42px;
  font-weight: 900;
  letter-spacing: 6px;
  padding: 6px 20px;
  transform: rotate(-18deg);
  opacity: 0.12;
  pointer-events: none;
  z-index: 2;
}

/* SECTION HEADER STAMP */
.br-frm .section-stamp {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 28px;
}
.br-frm .stamp-num {
  width: 48px;
  height: 48px;
  border: 4px solid var(--br-frm-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 22px;
  font-weight: 900;
  color: var(--br-frm-dark);
  flex-shrink: 0;
}
.br-frm .stamp-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 28px;
  font-weight: 900;
  color: var(--br-frm-dark);
  letter-spacing: 4px;
  text-transform: uppercase;
  border-bottom: 4px solid var(--br-frm-dark);
  flex: 1;
  padding-bottom: 6px;
}

/* Fields block */
.br-frm .fields-block {
  border: 2px solid var(--br-frm-dark);
  margin-bottom: 32px;
  background: var(--br-frm-paper);
}
.br-frm .fields-block .row {
  display: flex;
  border-bottom: 2px solid var(--br-frm-dark);
}
.br-frm .fields-block .row:last-child { border-bottom: none; }
.br-frm .fields-block .cell {
  flex: 1;
  position: relative;
  border-right: 2px solid var(--br-frm-dark);
}
.br-frm .fields-block .cell:last-child { border-right: none; }
.br-frm .fields-block .cell.wide { flex: 2; }
.br-frm .fields-block .cell.narrow { flex: 0.5; }

.br-frm .cell-label {
  font-size: 8px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--br-frm-dark);
  padding: 7px 12px 3px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}
.br-frm .cell-label .req {
  color: var(--br-frm-red);
  font-size: 14px;
  line-height: 0;
}

.br-frm .cell-input {
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  font-family: 'Courier Prime', ui-monospace, monospace;
  font-size: 15px;
  color: var(--br-frm-ink);
  padding: 4px 12px 10px;
  display: block;
}
.br-frm .cell-input::placeholder {
  color: #bbb;
  font-style: italic;
  font-size: 13px;
}
.br-frm .cell-input:focus {
  background: rgba(0, 51, 170, 0.04);
}

/* Inline select inside the Territory cell — strip its own border so
   it inherits the cell's grid border. */
.br-frm .fields-block .select-wrap-inner {
  position: relative;
  border: none;
  margin: 0;
}
.br-frm .fields-block .select-wrap-inner::after {
  content: '▼';
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  pointer-events: none;
  color: var(--br-frm-dark);
}
.br-frm select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  font-family: 'Courier Prime', ui-monospace, monospace;
  font-size: 14px;
  color: var(--br-frm-ink);
  padding: 14px 40px 14px 14px;
  cursor: pointer;
}

/* Checkboxes */
.br-frm .check-section { margin-bottom: 32px; }
.br-frm .check-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 2px solid var(--br-frm-dark);
  background: var(--br-frm-paper);
}
.br-frm .check-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-right: 2px solid var(--br-frm-dark);
  border-bottom: 2px solid var(--br-frm-dark);
  cursor: pointer;
  position: relative;
  transition: background 0.1s;
}
.br-frm .check-item:hover { background: rgba(0, 0, 0, 0.04); }
.br-frm .check-item:nth-child(3n) { border-right: none; }
.br-frm .check-item:nth-child(n+4) { border-bottom: none; }

.br-frm .check-box {
  width: 20px;
  height: 20px;
  border: 2px solid var(--br-frm-dark);
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.br-frm input[type="checkbox"] { display: none; }
.br-frm input[type="checkbox"]:checked + .check-box {
  background: var(--br-frm-dark);
}
.br-frm input[type="checkbox"]:checked + .check-box::after {
  content: '✗';
  color: var(--br-frm-paper);
  font-size: 14px;
  line-height: 1;
}
.br-frm .check-label {
  font-size: 12px;
  color: var(--br-frm-dark);
  letter-spacing: 0.5px;
}

/* Radio — priority */
.br-frm .radio-section { margin-bottom: 32px; }
.br-frm .radio-row {
  display: flex;
  border: 2px solid var(--br-frm-dark);
  background: var(--br-frm-paper);
}
.br-frm .radio-opt {
  flex: 1;
  position: relative;
  border-right: 2px solid var(--br-frm-dark);
  cursor: pointer;
  overflow: hidden;
}
.br-frm .radio-opt:last-child { border-right: none; }
.br-frm .radio-opt input { position: absolute; opacity: 0; }
.br-frm .radio-opt .opt-inner {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: background 0.1s;
}
.br-frm .radio-opt input:checked ~ .opt-inner { background: var(--br-frm-dark); }
.br-frm .radio-opt input:checked ~ .opt-inner .opt-code { color: var(--br-frm-yellow); }
.br-frm .radio-opt input:checked ~ .opt-inner .opt-name { color: var(--br-frm-paper); }
.br-frm .radio-opt input:checked ~ .opt-inner .opt-sub { color: #888; }
.br-frm .opt-code {
  font-size: 9px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: #888;
  font-weight: 600;
}
.br-frm .opt-name {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 22px;
  font-weight: 900;
  color: var(--br-frm-dark);
  letter-spacing: 1px;
}
.br-frm .opt-sub {
  font-size: 9px;
  color: #999;
  letter-spacing: 0.5px;
}

/* Textarea */
.br-frm .textarea-section { margin-bottom: 32px; }
.br-frm .textarea-wrap {
  border: 2px solid var(--br-frm-dark);
  position: relative;
  background: var(--br-frm-paper);
}
.br-frm .textarea-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  border-bottom: 2px solid var(--br-frm-dark);
  background: var(--br-frm-dark);
}
.br-frm .textarea-header-label {
  font-size: 9px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--br-frm-paper);
  font-weight: 600;
}
.br-frm .textarea-header-count {
  font-size: 9px;
  color: #888;
  letter-spacing: 2px;
}
.br-frm textarea {
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  font-family: 'Courier Prime', ui-monospace, monospace;
  font-size: 14px;
  color: var(--br-frm-ink);
  padding: 16px 14px;
  resize: none;
  min-height: 90px;
  line-height: 2;
}
.br-frm textarea::placeholder { color: #bbb; font-style: italic; }

/* Slider */
.br-frm .slider-section { margin-bottom: 32px; }
.br-frm .slider-wrap {
  border: 2px solid var(--br-frm-dark);
  padding: 16px 20px;
  background: var(--br-frm-paper);
}
.br-frm .slider-top {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
}
.br-frm .slider-label { font-size: 10px; letter-spacing: 3px; text-transform: uppercase; font-weight: 600; }
.br-frm .slider-val {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 26px;
  font-weight: 900;
  color: var(--br-frm-red);
  line-height: 1;
}
.br-frm input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  background: var(--br-frm-dark);
  outline: none;
  cursor: pointer;
  margin-bottom: 10px;
}
.br-frm input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  background: var(--br-frm-red);
  border: 3px solid var(--br-frm-dark);
  cursor: pointer;
}
.br-frm input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: var(--br-frm-red);
  border: 3px solid var(--br-frm-dark);
  cursor: pointer;
}
.br-frm .slider-ticks {
  display: flex;
  justify-content: space-between;
}
.br-frm .tick { font-size: 9px; color: #999; letter-spacing: 1px; }

/* Submit */
.br-frm .submit-row {
  display: flex;
  gap: 0;
  border: 2px solid var(--br-frm-dark);
  background: var(--br-frm-paper);
}
.br-frm .submit-note {
  flex: 1;
  padding: 14px 18px;
  border-right: 2px solid var(--br-frm-dark);
  font-size: 10px;
  color: #888;
  line-height: 1.8;
  font-style: italic;
}
.br-frm .submit-note strong { color: var(--br-frm-dark); font-style: normal; }
.br-frm .btn-submit {
  background: var(--br-frm-red);
  color: var(--br-frm-paper);
  border: none;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 4px;
  text-transform: uppercase;
  padding: 0 40px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: background 0.1s;
}
.br-frm .btn-submit:hover { background: #9a0012; }
.br-frm .btn-clear {
  background: transparent;
  color: var(--br-frm-dark);
  border: none;
  border-left: 2px solid var(--br-frm-dark);
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 0 20px;
  cursor: pointer;
}
.br-frm .btn-clear:hover { background: rgba(0, 0, 0, 0.05); }

@media (max-width: 760px) {
  .br-frm .form-shell { padding: 32px 24px 40px 40px; }
  .br-frm::after { left: 28px; }
  .br-frm .fields-block .row,
  .br-frm .submit-row { flex-direction: column; }
  .br-frm .fields-block .cell,
  .br-frm .submit-note,
  .br-frm .btn-submit,
  .br-frm .btn-clear { border-right: none; border-bottom: 2px solid var(--br-frm-dark); }
  .br-frm .check-grid { grid-template-columns: 1fr 1fr; }
  .br-frm .radio-row { flex-direction: column; }
  .br-frm .radio-opt { border-right: none; border-bottom: 2px solid var(--br-frm-dark); }
  .br-frm .radio-opt:last-child { border-bottom: none; }
  .br-frm .corner-stamp { top: 12px; right: 16px; }
  .br-frm .rejected-stamp { right: 20px; font-size: 32px; padding: 4px 14px; }
}
```

**JS:**
```js
(() => {
  // Scoped slider handler — finds the slider + value display inside
  // the .br-frm wrapper only, so multiple demos can render on the
  // same page without colliding on element IDs.
  const root = document.querySelector('.br-frm');
  if (!root) return;
  const slider = root.querySelector('[data-br-frm-slider]');
  const valEl = root.querySelector('[data-br-frm-slider-val]');
  if (!slider || !valEl) return;
  function paint() {
    const dollars = Math.round(slider.value * 1000);
    valEl.textContent = '$' + dollars.toLocaleString();
  }
  slider.addEventListener('input', paint);
  paint();
})();
```

### 03. Data Dashboard

**Type:** Pure CSS
**Description:** A dark-mode ops/infrastructure dashboard in Soviet constructivism meets broken-terminal aesthetic. Acid green #c8f000 as the primary signal color against near-black surfaces. Left column carries live system metrics, four resource progress meters, and a scrolling event log. Center panel has a bar chart with highlighted current period and a four-cell KPI strip with colored accent bars. Right panel has a donut ring chart for resource distribution. The bottom splits between an events severity table and active target progress cards — the whole thing reads like a real monitoring terminal. Archivo Black + Azeret Mono + Unbounded. Best for DevOps dashboards, status pages, monitoring tools, NOC interfaces.

**HTML:**
```html
<section class="br-dsh" aria-label="Brutalist data dashboard demo">
  <div class="card">
    <div class="dashboard">

      <!-- LEFT COLUMN -->
      <div class="left-col">
        <div class="system-block">
          <div class="sys-label">System Uptime</div>
          <div class="big-metric">99.7</div>
          <div class="big-metric-label">% availability — 30d</div>
          <div class="mini-stats">
            <div class="mini-stat">
              <div class="ms-val up">2.4ms</div>
              <div class="ms-label">Avg Latency</div>
            </div>
            <div class="mini-stat">
              <div class="ms-val">1.2k</div>
              <div class="ms-label">Req/sec</div>
            </div>
            <div class="mini-stat">
              <div class="ms-val down">14</div>
              <div class="ms-label">Errors</div>
            </div>
            <div class="mini-stat">
              <div class="ms-val">38</div>
              <div class="ms-label">Nodes</div>
            </div>
          </div>
        </div>

        <div class="meters-block">
          <div class="meter-item">
            <div class="meter-top">
              <span class="meter-name">CPU Load</span>
              <span class="meter-pct">72%</span>
            </div>
            <div class="meter-bar"><div class="meter-fill green" style="width:72%"></div></div>
          </div>
          <div class="meter-item">
            <div class="meter-top">
              <span class="meter-name">Memory</span>
              <span class="meter-pct">88%</span>
            </div>
            <div class="meter-bar"><div class="meter-fill orange" style="width:88%"></div></div>
          </div>
          <div class="meter-item">
            <div class="meter-top">
              <span class="meter-name">Storage</span>
              <span class="meter-pct">44%</span>
            </div>
            <div class="meter-bar"><div class="meter-fill blue" style="width:44%"></div></div>
          </div>
          <div class="meter-item">
            <div class="meter-top">
              <span class="meter-name">Network I/O</span>
              <span class="meter-pct">91%</span>
            </div>
            <div class="meter-bar"><div class="meter-fill red" style="width:91%"></div></div>
          </div>
        </div>

        <div class="log-block">
          <div class="log-header">// Event Log</div>
          <div class="log-entry">
            <span class="log-time">09:41</span>
            <span class="log-msg ok">✓ deploy: node-07 healthy</span>
          </div>
          <div class="log-entry">
            <span class="log-time">09:38</span>
            <span class="log-msg warn">▲ warn: queue depth 840</span>
          </div>
          <div class="log-entry">
            <span class="log-time">09:31</span>
            <span class="log-msg err">✕ err: timeout zone-c</span>
          </div>
          <div class="log-entry">
            <span class="log-time">09:28</span>
            <span class="log-msg ok">✓ scale: +2 replicas</span>
          </div>
          <div class="log-entry">
            <span class="log-time">09:14</span>
            <span class="log-msg">→ cert renewed: *.api</span>
          </div>
          <div class="log-entry">
            <span class="log-time">09:02</span>
            <span class="log-msg ok">✓ backup: completed</span>
          </div>
          <div class="log-entry">
            <span class="log-time">08:55</span>
            <span class="log-msg warn">▲ warn: mem spike node-03</span>
          </div>
        </div>
      </div>

      <!-- TOP CENTER -->
      <div class="top-center">
        <div class="chart-label">// Throughput — Last 12 Periods</div>
        <div class="bar-chart" aria-hidden="true">
          <div class="bar-col"><div class="bar-fill lo" style="height:30px"></div><span class="bar-label">W1</span></div>
          <div class="bar-col"><div class="bar-fill" style="height:55px"></div><span class="bar-label">W2</span></div>
          <div class="bar-col"><div class="bar-fill" style="height:48px"></div><span class="bar-label">W3</span></div>
          <div class="bar-col"><div class="bar-fill warn" style="height:72px"></div><span class="bar-label">W4</span></div>
          <div class="bar-col"><div class="bar-fill" style="height:60px"></div><span class="bar-label">W5</span></div>
          <div class="bar-col"><div class="bar-fill" style="height:85px"></div><span class="bar-label">W6</span></div>
          <div class="bar-col"><div class="bar-fill" style="height:70px"></div><span class="bar-label">W7</span></div>
          <div class="bar-col"><div class="bar-fill hi" style="height:110px"></div><span class="bar-label">W8</span></div>
          <div class="bar-col"><div class="bar-fill" style="height:92px"></div><span class="bar-label">W9</span></div>
          <div class="bar-col"><div class="bar-fill warn" style="height:78px"></div><span class="bar-label">W10</span></div>
          <div class="bar-col"><div class="bar-fill" style="height:100px"></div><span class="bar-label">W11</span></div>
          <div class="bar-col"><div class="bar-fill hi" style="height:115px"></div><span class="bar-label">NOW</span></div>
        </div>
        <div class="number-row">
          <div class="num-cell accent-green">
            <div class="nc-val">4.8M</div>
            <div class="nc-label">Requests</div>
            <div class="nc-delta pos">↑ 12.4%</div>
          </div>
          <div class="num-cell accent-orange">
            <div class="nc-val">$92K</div>
            <div class="nc-label">Revenue</div>
            <div class="nc-delta pos">↑ 8.1%</div>
          </div>
          <div class="num-cell accent-red">
            <div class="nc-val">0.03%</div>
            <div class="nc-label">Error Rate</div>
            <div class="nc-delta neg">↓ 0.01%</div>
          </div>
          <div class="num-cell accent-blue">
            <div class="nc-val">38.4K</div>
            <div class="nc-label">Active Users</div>
            <div class="nc-delta pos">↑ 22%</div>
          </div>
        </div>
      </div>

      <!-- TOP RIGHT -->
      <div class="top-right">
        <div class="chart-label">// Resource Distribution</div>
        <div class="radial-container">
          <svg class="radial-svg" width="110" height="110" viewBox="0 0 110 110" aria-hidden="true">
            <circle cx="55" cy="55" r="48" fill="none" stroke="#1e1e22" stroke-width="14"/>
            <circle cx="55" cy="55" r="48" fill="none" stroke="#ff5c00" stroke-width="14"
              stroke-dasharray="138 164" stroke-dashoffset="12" stroke-linecap="butt" transform="rotate(-90 55 55)"/>
            <circle cx="55" cy="55" r="48" fill="none" stroke="#c8f000" stroke-width="14"
              stroke-dasharray="88 214" stroke-dashoffset="-150" stroke-linecap="butt" transform="rotate(-90 55 55)"/>
            <circle cx="55" cy="55" r="48" fill="none" stroke="#1a4fff" stroke-width="14"
              stroke-dasharray="50 252" stroke-dashoffset="-238" stroke-linecap="butt" transform="rotate(-90 55 55)"/>
            <circle cx="55" cy="55" r="48" fill="none" stroke="#2a2c30" stroke-width="14"
              stroke-dasharray="26 276" stroke-dashoffset="-288" stroke-linecap="butt" transform="rotate(-90 55 55)"/>
          </svg>
          <div class="radial-info">
            <div class="radial-big"><span>74</span>%</div>
            <div class="radial-sublabel">Total Allocated</div>
          </div>
        </div>
        <div class="legend">
          <div class="legend-item">
            <div class="legend-left">
              <div class="legend-dot dot-compute" aria-hidden="true"></div>
              <span class="legend-name">Compute</span>
            </div>
            <span class="legend-pct pct-compute">46%</span>
          </div>
          <div class="legend-item">
            <div class="legend-left">
              <div class="legend-dot dot-storage" aria-hidden="true"></div>
              <span class="legend-name">Storage</span>
            </div>
            <span class="legend-pct pct-storage">29%</span>
          </div>
          <div class="legend-item">
            <div class="legend-left">
              <div class="legend-dot dot-network" aria-hidden="true"></div>
              <span class="legend-name">Network</span>
            </div>
            <span class="legend-pct pct-network">16%</span>
          </div>
          <div class="legend-item">
            <div class="legend-left">
              <div class="legend-dot dot-reserved" aria-hidden="true"></div>
              <span class="legend-name">Reserved</span>
            </div>
            <span class="legend-pct pct-reserved">9%</span>
          </div>
        </div>
      </div>

      <!-- BOTTOM CENTER — events table -->
      <div class="bottom-center">
        <div class="table-header">
          <span class="tbl-title">// Recent Events</span>
          <span class="tbl-badge">3 ACTIVE</span>
        </div>
        <table class="events-table">
          <thead>
            <tr>
              <th>Status</th>
              <th>Event</th>
              <th>Node</th>
              <th>Impact</th>
              <th>Time</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td><span class="status-dot red"></span>CRIT</td>
              <td>Mem overload</td>
              <td>node-03</td>
              <td class="imp-high">HIGH</td>
              <td class="imp-time">09:31</td>
            </tr>
            <tr>
              <td><span class="status-dot orange"></span>WARN</td>
              <td>Queue spike</td>
              <td>zone-b</td>
              <td class="imp-med">MED</td>
              <td class="imp-time">09:38</td>
            </tr>
            <tr>
              <td><span class="status-dot orange"></span>WARN</td>
              <td>I/O throttle</td>
              <td>disk-07</td>
              <td class="imp-med">MED</td>
              <td class="imp-time">09:52</td>
            </tr>
            <tr>
              <td><span class="status-dot green"></span>OK</td>
              <td>Auto-scale</td>
              <td>cluster-a</td>
              <td class="imp-low">LOW</td>
              <td class="imp-time">10:01</td>
            </tr>
            <tr>
              <td><span class="status-dot green"></span>OK</td>
              <td>Cert renewal</td>
              <td>*.api</td>
              <td class="imp-none">—</td>
              <td class="imp-time">09:14</td>
            </tr>
          </tbody>
        </table>
      </div>

      <!-- BOTTOM RIGHT — active targets -->
      <div class="bottom-right">
        <div class="table-header">
          <span class="tbl-title">// Active Targets</span>
        </div>
        <div class="targets">
          <div class="target active-border">
            <div class="target-top">
              <span class="target-name">Q3 Throughput Goal</span>
              <span class="target-id">TGT-001</span>
            </div>
            <div class="target-progress"><div class="target-fill" style="width:78%"></div></div>
            <div class="target-bottom">
              <span class="target-stat"><strong>78%</strong> complete</span>
              <span class="target-stat">ETA <strong>Aug 14</strong></span>
            </div>
          </div>
          <div class="target">
            <div class="target-top">
              <span class="target-name">Infra Migration</span>
              <span class="target-id">TGT-002</span>
            </div>
            <div class="target-progress"><div class="target-fill fill-orange" style="width:42%"></div></div>
            <div class="target-bottom">
              <span class="target-stat"><strong>42%</strong> complete</span>
              <span class="target-stat">ETA <strong>Sep 03</strong></span>
            </div>
          </div>
          <div class="target">
            <div class="target-top">
              <span class="target-name">Cost Reduction — 15%</span>
              <span class="target-id">TGT-003</span>
            </div>
            <div class="target-progress"><div class="target-fill" style="width:61%"></div></div>
            <div class="target-bottom">
              <span class="target-stat"><strong>61%</strong> complete</span>
              <span class="target-stat">ETA <strong>Jul 30</strong></span>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</section>
```

**CSS:**
```css
/* ─── 03 Brutalist Data Dashboard — dark constructivist NOC ─── */
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Azeret+Mono:wght@300;400;700&family=Unbounded:wght@400;700;900&display=swap');

.br-dsh {
  --br-dsh-bg: #111214;
  --br-dsh-surface: #18191d;
  --br-dsh-white: #e8e4dc;
  --br-dsh-cream: #c8c0b0;
  --br-dsh-acid: #c8f000;
  --br-dsh-orange: #ff5c00;
  --br-dsh-red: #e80030;
  --br-dsh-blue: #1a4fff;
  --br-dsh-border: 2px solid #2a2c30;

  position: relative;
  width: 100%;
  min-height: 880px;
  background: var(--br-dsh-bg);
  font-family: 'Azeret Mono', ui-monospace, monospace;
  color: var(--br-dsh-white);
  padding: 0;
  overflow: hidden;
  box-sizing: border-box;
}

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

/* Grid background — was body::before; scoped to wrapper */
.br-dsh::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
  z-index: 0;
}

.br-dsh .card {
  position: relative;
  z-index: 1;
  width: 100%;
}

.br-dsh .dashboard {
  display: grid;
  grid-template-columns: 280px 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 0;
}

/* LEFT COLUMN */
.br-dsh .left-col {
  grid-row: 1 / 3;
  border-right: 3px solid #2a2c30;
  display: flex;
  flex-direction: column;
}

.br-dsh .system-block {
  padding: 24px 20px;
  border-bottom: 3px solid #2a2c30;
}
.br-dsh .sys-label {
  font-size: 8px;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: #555;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.br-dsh .sys-label::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--br-dsh-acid);
  border-radius: 50%;
  animation: br-dsh-pulse 2s infinite;
}
@keyframes br-dsh-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.3; }
}

.br-dsh .big-metric {
  font-family: 'Unbounded', sans-serif;
  font-size: 56px;
  font-weight: 900;
  color: var(--br-dsh-acid);
  line-height: 1;
  letter-spacing: -2px;
  margin-bottom: 6px;
}
.br-dsh .big-metric-label {
  font-size: 10px;
  color: #555;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.br-dsh .mini-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: var(--br-dsh-border);
  margin-top: 20px;
}
.br-dsh .mini-stat {
  padding: 10px 12px;
  border-right: var(--br-dsh-border);
  border-bottom: var(--br-dsh-border);
}
.br-dsh .mini-stat:nth-child(2n) { border-right: none; }
.br-dsh .mini-stat:nth-last-child(-n+2) { border-bottom: none; }
.br-dsh .ms-val {
  font-family: 'Archivo Black', sans-serif;
  font-size: 20px;
  color: var(--br-dsh-white);
  margin-bottom: 2px;
}
.br-dsh .ms-val.up { color: var(--br-dsh-acid); }
.br-dsh .ms-val.down { color: var(--br-dsh-red); }
.br-dsh .ms-label { font-size: 8px; color: #555; letter-spacing: 2px; text-transform: uppercase; }

/* Progress meters */
.br-dsh .meters-block {
  padding: 20px;
  border-bottom: 3px solid #2a2c30;
}
.br-dsh .meter-item { margin-bottom: 16px; }
.br-dsh .meter-item:last-child { margin-bottom: 0; }
.br-dsh .meter-top {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
}
.br-dsh .meter-name { font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: var(--br-dsh-cream); }
.br-dsh .meter-pct {
  font-family: 'Archivo Black', sans-serif;
  font-size: 12px;
  color: var(--br-dsh-acid);
}
.br-dsh .meter-bar {
  height: 6px;
  background: #222;
  position: relative;
}
.br-dsh .meter-fill {
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
.br-dsh .meter-fill.green { background: var(--br-dsh-acid); }
.br-dsh .meter-fill.orange { background: var(--br-dsh-orange); }
.br-dsh .meter-fill.red { background: var(--br-dsh-red); }
.br-dsh .meter-fill.blue { background: var(--br-dsh-blue); }

/* Log feed */
.br-dsh .log-block {
  padding: 16px 20px;
  flex: 1;
  overflow: hidden;
}
.br-dsh .log-header {
  font-size: 8px;
  letter-spacing: 4px;
  color: #444;
  text-transform: uppercase;
  margin-bottom: 12px;
  border-bottom: 1px solid #222;
  padding-bottom: 8px;
}
.br-dsh .log-entry {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 10px;
  line-height: 1.4;
}
.br-dsh .log-time { color: #444; flex-shrink: 0; letter-spacing: 1px; }
.br-dsh .log-msg { color: #666; }
.br-dsh .log-msg.ok { color: #5a8a00; }
.br-dsh .log-msg.warn { color: #aa7700; }
.br-dsh .log-msg.err { color: #aa0020; }

/* TOP CENTER */
.br-dsh .top-center {
  border-bottom: 3px solid #2a2c30;
  border-right: 3px solid #2a2c30;
  padding: 28px;
  position: relative;
  overflow: hidden;
}
.br-dsh .top-center::before {
  content: 'PERF';
  font-family: 'Unbounded', sans-serif;
  font-size: 100px;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.025);
  position: absolute;
  bottom: -10px;
  right: -10px;
  line-height: 1;
  letter-spacing: -4px;
}
.br-dsh .chart-label {
  font-size: 8px;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: #555;
  margin-bottom: 20px;
}
.br-dsh .bar-chart {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 120px;
  margin-bottom: 8px;
}
.br-dsh .bar-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 1;
}
.br-dsh .bar-fill {
  width: 100%;
  background: var(--br-dsh-acid);
  opacity: 0.7;
  position: relative;
  transition: opacity 0.2s;
}
.br-dsh .bar-fill:hover { opacity: 1; }
.br-dsh .bar-fill.hi { opacity: 1; background: var(--br-dsh-acid); }
.br-dsh .bar-fill.lo { background: #333; opacity: 1; }
.br-dsh .bar-fill.warn { background: var(--br-dsh-orange); opacity: 0.8; }
.br-dsh .bar-label { font-size: 8px; color: #444; letter-spacing: 1px; }

/* Number row */
.br-dsh .number-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: var(--br-dsh-border);
  margin-top: 20px;
}
.br-dsh .num-cell {
  padding: 12px 16px;
  border-right: var(--br-dsh-border);
  position: relative;
}
.br-dsh .num-cell:last-child { border-right: none; }
.br-dsh .num-cell::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
}
.br-dsh .num-cell.accent-green::after { background: var(--br-dsh-acid); }
.br-dsh .num-cell.accent-orange::after { background: var(--br-dsh-orange); }
.br-dsh .num-cell.accent-red::after { background: var(--br-dsh-red); }
.br-dsh .num-cell.accent-blue::after { background: var(--br-dsh-blue); }
.br-dsh .nc-val {
  font-family: 'Archivo Black', sans-serif;
  font-size: 26px;
  color: var(--br-dsh-white);
  line-height: 1;
  margin-bottom: 4px;
}
.br-dsh .nc-label { font-size: 8px; color: #555; letter-spacing: 2px; text-transform: uppercase; }
.br-dsh .nc-delta {
  font-size: 9px;
  margin-top: 3px;
  letter-spacing: 1px;
}
.br-dsh .nc-delta.pos { color: var(--br-dsh-acid); }
.br-dsh .nc-delta.neg { color: var(--br-dsh-red); }

/* TOP RIGHT */
.br-dsh .top-right {
  border-bottom: 3px solid #2a2c30;
  padding: 28px;
  position: relative;
}
.br-dsh .radial-container {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-bottom: 20px;
}
.br-dsh .radial-svg { flex-shrink: 0; }
.br-dsh .radial-info { flex: 1; }
.br-dsh .radial-big {
  font-family: 'Unbounded', sans-serif;
  font-size: 44px;
  font-weight: 900;
  color: var(--br-dsh-white);
  line-height: 1;
  margin-bottom: 4px;
}
.br-dsh .radial-big span { color: var(--br-dsh-orange); }
.br-dsh .radial-sublabel { font-size: 9px; color: #555; letter-spacing: 3px; text-transform: uppercase; }

.br-dsh .legend {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.br-dsh .legend-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #222;
}
.br-dsh .legend-item:last-child { border-bottom: none; }
.br-dsh .legend-left { display: flex; align-items: center; gap: 10px; }
.br-dsh .legend-dot { width: 8px; height: 8px; flex-shrink: 0; }
.br-dsh .legend-dot.dot-compute  { background: var(--br-dsh-orange); }
.br-dsh .legend-dot.dot-storage  { background: var(--br-dsh-acid); }
.br-dsh .legend-dot.dot-network  { background: var(--br-dsh-blue); }
.br-dsh .legend-dot.dot-reserved { background: #2a2c30; }
.br-dsh .legend-name { font-size: 10px; color: var(--br-dsh-cream); letter-spacing: 1px; }
.br-dsh .legend-pct {
  font-family: 'Archivo Black', sans-serif;
  font-size: 14px;
}
.br-dsh .legend-pct.pct-compute  { color: var(--br-dsh-orange); }
.br-dsh .legend-pct.pct-storage  { color: var(--br-dsh-acid); }
.br-dsh .legend-pct.pct-network  { color: var(--br-dsh-blue); }
.br-dsh .legend-pct.pct-reserved { color: #555; }

/* BOTTOM PANELS */
.br-dsh .bottom-center {
  border-right: 3px solid #2a2c30;
  padding: 24px;
}
.br-dsh .bottom-right {
  padding: 24px;
}

.br-dsh .table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.br-dsh .tbl-title {
  font-size: 8px;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: #555;
}
.br-dsh .tbl-badge {
  background: var(--br-dsh-orange);
  color: var(--br-dsh-bg);
  font-size: 9px;
  font-weight: 700;
  padding: 3px 8px;
  letter-spacing: 2px;
}
.br-dsh .events-table { width: 100%; border-collapse: collapse; }
.br-dsh .events-table th {
  font-size: 7px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #444;
  text-align: left;
  padding: 0 10px 8px 0;
  border-bottom: 1px solid #222;
}
.br-dsh .events-table td {
  font-size: 10px;
  color: var(--br-dsh-cream);
  padding: 8px 10px 8px 0;
  border-bottom: 1px solid #1a1a1e;
  vertical-align: middle;
}
.br-dsh .events-table td.imp-high { color: var(--br-dsh-red); }
.br-dsh .events-table td.imp-med  { color: var(--br-dsh-orange); }
.br-dsh .events-table td.imp-low  { color: var(--br-dsh-acid); }
.br-dsh .events-table td.imp-none { color: #555; }
.br-dsh .events-table td.imp-time { color: #444; }

.br-dsh .status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 6px;
}
.br-dsh .status-dot.green { background: var(--br-dsh-acid); }
.br-dsh .status-dot.orange { background: var(--br-dsh-orange); }
.br-dsh .status-dot.red { background: var(--br-dsh-red); }

/* Active targets */
.br-dsh .targets { display: flex; flex-direction: column; gap: 12px; }
.br-dsh .target {
  border: 1px solid #2a2c30;
  padding: 14px;
  position: relative;
  overflow: hidden;
}
.br-dsh .target.active-border { border-color: var(--br-dsh-acid); }
.br-dsh .target-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.br-dsh .target-name { font-size: 11px; color: var(--br-dsh-white); letter-spacing: 1px; }
.br-dsh .target-id { font-size: 9px; color: #444; letter-spacing: 2px; }
.br-dsh .target-progress {
  height: 3px;
  background: #222;
  position: relative;
  margin-bottom: 8px;
}
.br-dsh .target-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background: var(--br-dsh-acid);
}
.br-dsh .target-fill.fill-orange { background: var(--br-dsh-orange); }
.br-dsh .target-bottom {
  display: flex;
  justify-content: space-between;
}
.br-dsh .target-stat { font-size: 9px; color: #555; letter-spacing: 1px; }
.br-dsh .target-stat strong { color: var(--br-dsh-cream); }

@media (max-width: 880px) {
  .br-dsh .dashboard {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .br-dsh .left-col {
    grid-row: auto;
    border-right: none;
    border-bottom: 3px solid #2a2c30;
  }
  .br-dsh .top-center,
  .br-dsh .bottom-center {
    border-right: none;
  }
  .br-dsh .number-row { grid-template-columns: 1fr 1fr; }
  .br-dsh .num-cell:nth-child(2n) { border-right: none; }
  .br-dsh .num-cell:nth-child(-n+2) { border-bottom: var(--br-dsh-border); }
}

@media (prefers-reduced-motion: reduce) {
  .br-dsh .sys-label::before { animation: none; }
  .br-dsh .bar-fill { transition: none; }
}
```

### 04. Selected Work Grid

**Type:** CSS + JS
**Description:** A 2×3 work grid for a graphic designer, built entirely around collision and contrast. Two giant Anton-font words — "SELECTED" and "WORK" — bleed off-canvas behind the grid at 22vw and 19vw, functioning as both typographic architecture and background texture. Each cell has its own background (black, cream, hot pink, electric blue, lime) and its own visual motif: a circle with a lime core, a diagonal line, a ghost ✕, a data bar stack, oversized ghost letterforms, a dot grid. A custom split cursor (dot + lagged ring, both in difference blend mode) swells to 60px with a "VIEW" label on hover. The ticker tape at the bottom scrolls availability info in acid green on black. Anton + Syne + Syne Mono. Best for designer portfolios, agency case-study indexes, art-school project grids.

**HTML:**
```html
<section class="br-swg" aria-label="Selected work portfolio grid demo">
  <div class="card">

    <div class="swg-cursor-dot" data-br-swg-dot aria-hidden="true"></div>
    <div class="swg-cursor-ring" data-br-swg-ring aria-hidden="true"></div>
    <div class="swg-cursor-label" data-br-swg-label aria-hidden="true">VIEW</div>

    <div class="hero-type" aria-hidden="true">
      <div class="hero-word hw-selected">SELECTED</div>
      <div class="hero-word hw-work">WORK</div>
      <div class="hero-word hw-year">2025</div>
    </div>

    <div class="stage">

      <div class="cell cell-1">
        <div class="cell-vis" aria-hidden="true"></div>
        <div class="cell-inner">
          <div class="cell-num">01 / 06</div>
          <div class="cell-title">BRAND<br />SYSTEM</div>
          <div class="cell-tag">Identity · 2024</div>
        </div>
      </div>

      <div class="cell cell-2">
        <div class="cell-vis" aria-hidden="true"></div>
        <div class="cell-inner">
          <div class="cell-num">02 / 06</div>
          <div class="cell-title">TYPE<br />MOTION</div>
          <div class="cell-tag">Animation · 2025</div>
        </div>
      </div>

      <div class="cell cell-3">
        <div class="cell-vis" aria-hidden="true">✕</div>
        <div class="cell-inner">
          <div class="cell-num">03 / 06</div>
          <div class="cell-title">WEB<br />CAMPAIGN</div>
          <div class="cell-tag">Digital · 2025</div>
        </div>
      </div>

      <div class="cell cell-4">
        <div class="cell-vis" aria-hidden="true">
          <div class="bar-set">
            <div class="bar-item b1"></div>
            <div class="bar-item b2"></div>
            <div class="bar-item b3"></div>
            <div class="bar-item b4"></div>
          </div>
        </div>
        <div class="cell-inner">
          <div class="cell-num">04 / 06</div>
          <div class="cell-title">DATA<br />VISUAL</div>
          <div class="cell-tag">Infographic · 2024</div>
        </div>
      </div>

      <div class="cell cell-5">
        <div class="cell-vis" aria-hidden="true">Aa</div>
        <div class="cell-inner">
          <div class="cell-num">05 / 06</div>
          <div class="cell-title">TYPEFACE<br />DESIGN</div>
          <div class="cell-tag">Typography · 2025</div>
        </div>
      </div>

      <div class="cell cell-6">
        <div class="cell-vis" aria-hidden="true"></div>
        <div class="cell-inner">
          <div class="cell-num">06 / 06</div>
          <div class="cell-title">SPATIAL<br />INSTALL</div>
          <div class="cell-tag">Exhibition · 2025</div>
        </div>
      </div>

    </div>

    <div class="ticker" aria-hidden="true">
      <div class="ticker-inner">
        <span class="ticker-item">Available for work</span><span class="ticker-sep">◆</span>
        <span class="ticker-item">Brand · Motion · Web · Type</span><span class="ticker-sep">◆</span>
        <span class="ticker-item">Based in Amsterdam</span><span class="ticker-sep">◆</span>
        <span class="ticker-item">hello@studio.work</span><span class="ticker-sep">◆</span>
        <span class="ticker-item">Available for work</span><span class="ticker-sep">◆</span>
        <span class="ticker-item">Brand · Motion · Web · Type</span><span class="ticker-sep">◆</span>
        <span class="ticker-item">Based in Amsterdam</span><span class="ticker-sep">◆</span>
        <span class="ticker-item">hello@studio.work</span><span class="ticker-sep">◆</span>
      </div>
    </div>

  </div>
</section>
```

**CSS:**
```css
/* ─── 04 Selected Work Grid — collision-typography portfolio ──── */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Syne:wght@400;700;800&family=Syne+Mono&display=swap');

.br-swg {
  --br-swg-bg: #f2ede6;
  --br-swg-black: #0d0d0d;
  --br-swg-white: #f2ede6;
  --br-swg-lime: #b6ff00;
  --br-swg-pink: #ff2d6b;
  --br-swg-blue: #0040ff;

  position: relative;
  width: 100%;
  height: 720px;
  background: var(--br-swg-bg);
  font-family: 'Syne', sans-serif;
  overflow: hidden;
  box-sizing: border-box;
}

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

.br-swg .card {
  position: absolute;
  inset: 0;
}

/* Custom cursor — scoped to wrapper, doesn't hijack global cursor */
.br-swg .swg-cursor-dot,
.br-swg .swg-cursor-ring,
.br-swg .swg-cursor-label {
  position: absolute;
  pointer-events: none;
  display: none;
}
.br-swg.cursor-active .swg-cursor-dot,
.br-swg.cursor-active .swg-cursor-ring,
.br-swg.cursor-active .swg-cursor-label { display: block; }

.br-swg.cursor-active * { cursor: none !important; }

.br-swg .swg-cursor-dot {
  width: 10px; height: 10px;
  background: var(--br-swg-black);
  border-radius: 50%;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: width 0.2s, height 0.2s, background 0.2s;
  mix-blend-mode: difference;
}
.br-swg .swg-cursor-ring {
  width: 44px; height: 44px;
  border: 2px solid var(--br-swg-black);
  border-radius: 50%;
  z-index: 9998;
  transform: translate(-50%, -50%);
  transition: width 0.25s, height 0.25s, border-color 0.2s;
  mix-blend-mode: difference;
}
.br-swg .swg-cursor-label {
  z-index: 9997;
  font-family: 'Syne Mono', monospace;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--br-swg-black);
  transform: translate(14px, -6px);
  opacity: 0;
  transition: opacity 0.15s;
  white-space: nowrap;
}
.br-swg.on-work .swg-cursor-dot { width: 60px; height: 60px; background: var(--br-swg-lime); }
.br-swg.on-work .swg-cursor-ring { width: 80px; height: 80px; border-color: var(--br-swg-lime); }
.br-swg.on-work .swg-cursor-label { opacity: 1; }

/* Hero type */
.br-swg .hero-type {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  overflow: hidden;
}
.br-swg .hero-word {
  font-family: 'Anton', sans-serif;
  position: absolute;
  line-height: 0.88;
  letter-spacing: -0.03em;
  white-space: nowrap;
  user-select: none;
}
.br-swg .hw-selected { color: var(--br-swg-black); font-size: 22vw; top: -0.05em; left: -0.02em; z-index: 1; }
.br-swg .hw-work { color: transparent; font-size: 19vw; bottom: -0.1em; right: -0.02em; z-index: 0;
  -webkit-text-stroke: 2px var(--br-swg-black); }
.br-swg .hw-year { color: var(--br-swg-lime); font-size: 6vw; bottom: 56px; left: 20px; z-index: 3;
  mix-blend-mode: multiply; }

/* Stage grid */
.br-swg .stage {
  position: absolute;
  inset: 0 0 36px 0;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

.br-swg .cell {
  position: relative;
  border: 3px solid var(--br-swg-black);
  border-left: none; border-top: none;
  overflow: hidden;
  z-index: 3;
}
.br-swg .cell:nth-child(3n) { border-right: none; }
.br-swg .cell:nth-child(n+4) { border-bottom: none; }

.br-swg .cell-inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px 22px;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.br-swg .cell-1 { background: var(--br-swg-black); border-left: 3px solid var(--br-swg-black); border-top: 3px solid var(--br-swg-black); }
.br-swg .cell-2 { background: var(--br-swg-bg); border-top: 3px solid var(--br-swg-black); }
.br-swg .cell-3 { background: var(--br-swg-pink); border-top: 3px solid var(--br-swg-black); border-right: none; }
.br-swg .cell-4 { background: var(--br-swg-blue); border-left: 3px solid var(--br-swg-black); border-bottom: none; }
.br-swg .cell-5 { background: var(--br-swg-bg); border-bottom: none; }
.br-swg .cell-6 { background: var(--br-swg-lime); border-right: none; border-bottom: none; }

.br-swg .cell:hover .cell-inner { transform: translateY(-8px); }
.br-swg .cell:hover { z-index: 10; }

.br-swg .cell-num {
  font-family: 'Syne Mono', monospace;
  font-size: 10px;
  letter-spacing: 3px;
  margin-bottom: 8px;
  opacity: 0.5;
}
.br-swg .cell-1 .cell-num { color: #555; }
.br-swg .cell-2 .cell-num, .br-swg .cell-5 .cell-num { color: #aaa; }
.br-swg .cell-3 .cell-num { color: rgba(255,255,255,0.5); }
.br-swg .cell-4 .cell-num { color: rgba(255,255,255,0.4); }
.br-swg .cell-6 .cell-num { color: rgba(0,0,0,0.4); }

.br-swg .cell-title {
  font-family: 'Anton', sans-serif;
  font-size: clamp(22px, 2.8vw, 36px);
  line-height: 0.95;
  letter-spacing: 0.01em;
}
.br-swg .cell-1 .cell-title { color: var(--br-swg-white); }
.br-swg .cell-2 .cell-title { color: var(--br-swg-black); }
.br-swg .cell-3 .cell-title { color: var(--br-swg-white); }
.br-swg .cell-4 .cell-title { color: var(--br-swg-lime); }
.br-swg .cell-5 .cell-title { color: var(--br-swg-black); }
.br-swg .cell-6 .cell-title { color: var(--br-swg-black); }

.br-swg .cell-tag {
  font-size: 9px;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-top: 8px;
  font-weight: 600;
}
.br-swg .cell-1 .cell-tag { color: var(--br-swg-lime); }
.br-swg .cell-2 .cell-tag { color: #888; }
.br-swg .cell-3 .cell-tag { color: rgba(255,255,255,0.7); }
.br-swg .cell-4 .cell-tag { color: rgba(255,255,255,0.6); }
.br-swg .cell-5 .cell-tag { color: #999; }
.br-swg .cell-6 .cell-tag { color: rgba(0,0,0,0.5); }

.br-swg .cell-vis { position: absolute; pointer-events: none; }

.br-swg .cell-1 .cell-vis {
  width: 120px; height: 120px;
  border-radius: 50%;
  border: 3px solid #2a2a2a;
  top: 20px; right: 20px;
}
.br-swg .cell-1 .cell-vis::after {
  content: '';
  width: 60px; height: 60px;
  border-radius: 50%;
  background: var(--br-swg-lime);
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}

.br-swg .cell-2 .cell-vis {
  width: 100%; height: 100%;
  top: 0; left: 0;
  background: linear-gradient(135deg, transparent 48%, #ddd 48%, #ddd 52%, transparent 52%);
}

.br-swg .cell-3 .cell-vis {
  top: 16px; right: 16px;
  font-family: 'Anton', sans-serif;
  font-size: 80px;
  color: rgba(255,255,255,0.15);
  line-height: 1;
}

.br-swg .cell-4 .cell-vis { top: 20px; left: 20px; right: 20px; }
.br-swg .bar-set { display: flex; flex-direction: column; gap: 6px; }
.br-swg .bar-item { height: 4px; background: rgba(255,255,255,0.15); position: relative; }
.br-swg .bar-item::before {
  content: '';
  position: absolute; left: 0; top: 0; height: 100%;
  background: var(--br-swg-lime);
}
.br-swg .b1::before { width: 80%; }
.br-swg .b2::before { width: 55%; }
.br-swg .b3::before { width: 92%; }
.br-swg .b4::before { width: 40%; }

.br-swg .cell-5 .cell-vis {
  top: 10px; left: 16px;
  font-family: 'Anton', sans-serif;
  font-size: 100px;
  color: rgba(0,0,0,0.05);
  line-height: 1;
  letter-spacing: -5px;
}

.br-swg .cell-6 .cell-vis {
  top: 0; left: 0; right: 0; bottom: 0;
  background-image: radial-gradient(circle, rgba(0,0,0,0.2) 1.5px, transparent 1.5px);
  background-size: 20px 20px;
}

.br-swg .cell::after {
  content: '→';
  position: absolute;
  top: 20px; right: 22px;
  font-family: 'Anton', sans-serif;
  font-size: 28px;
  opacity: 0;
  transition: opacity 0.2s, transform 0.2s;
  transform: translateX(-8px);
  pointer-events: none;
}
.br-swg .cell-1::after { color: var(--br-swg-lime); }
.br-swg .cell-2::after, .br-swg .cell-5::after { color: var(--br-swg-black); }
.br-swg .cell-3::after { color: white; }
.br-swg .cell-4::after { color: var(--br-swg-lime); }
.br-swg .cell-6::after { color: var(--br-swg-black); }
.br-swg .cell:hover::after { opacity: 1; transform: translateX(0); }

/* Ticker — absolute to wrapper, not viewport */
.br-swg .ticker {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: var(--br-swg-black);
  padding: 7px 0;
  overflow: hidden;
  z-index: 20;
  border-top: 3px solid var(--br-swg-black);
  pointer-events: none;
}
.br-swg .ticker-inner {
  display: flex;
  gap: 0;
  animation: br-swg-ticker 18s linear infinite;
  white-space: nowrap;
}
@keyframes br-swg-ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.br-swg .ticker-item {
  font-family: 'Syne Mono', monospace;
  font-size: 10px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--br-swg-lime);
  padding: 0 32px;
}
.br-swg .ticker-sep { color: #333; padding: 0; font-family: 'Syne Mono', monospace; font-size: 10px; }

@media (prefers-reduced-motion: reduce) {
  .br-swg .ticker-inner,
  .br-swg .cell-inner,
  .br-swg .cell::after { animation: none !important; transition: none !important; }
}
```

**JS:**
```js
(() => {
  const root = document.querySelector('.br-swg');
  if (!root) return;
  const dot = root.querySelector('[data-br-swg-dot]');
  const ring = root.querySelector('[data-br-swg-ring]');
  const label = root.querySelector('[data-br-swg-label]');
  if (!dot || !ring || !label) return;

  let mx = 0, my = 0, rx = 0, ry = 0, rafId = null;

  root.addEventListener('mouseenter', () => root.classList.add('cursor-active'));
  root.addEventListener('mouseleave', () => {
    root.classList.remove('cursor-active');
    root.classList.remove('on-work');
    if (rafId) { cancelAnimationFrame(rafId); rafId = null; }
  });

  root.addEventListener('mousemove', e => {
    const rect = root.getBoundingClientRect();
    mx = e.clientX - rect.left;
    my = e.clientY - rect.top;
    dot.style.left = mx + 'px';
    dot.style.top = my + 'px';
    label.style.left = mx + 'px';
    label.style.top = my + 'px';
    if (!rafId) rafId = requestAnimationFrame(lerpRing);
  });

  function lerpRing() {
    rx += (mx - rx) * 0.14;
    ry += (my - ry) * 0.14;
    ring.style.left = rx + 'px';
    ring.style.top = ry + 'px';
    if (Math.abs(mx - rx) > 0.5 || Math.abs(my - ry) > 0.5) {
      rafId = requestAnimationFrame(lerpRing);
    } else {
      rafId = null;
    }
  }

  root.querySelectorAll('.cell').forEach(cell => {
    cell.addEventListener('mouseenter', () => root.classList.add('on-work'));
    cell.addEventListener('mouseleave', () => root.classList.remove('on-work'));
  });
})();
```

### 05. Indie SaaS Pricing

**Type:** Pure CSS
**Description:** A no-BS hero + pricing split for an indie-hacker SaaS. Left side leads with a giant italic Instrument Serif headline punctuated by a yellow monospace .accent span — "seriously." — that signals "I built this myself and I’m not sorry." A live badge counts signups in real time, three KPI cells (users, latency, uptime) sit in a bordered grid with delta arrows, and the CTA pair is blunt: black primary button and a plain underline "see the code on GitHub." Right side is a raw pricing column: billing toggle with a -20% savings tag, three plan cards where the Pro tier inverts to full black with a yellow CTA. Footer reads the MRR, start date, and "BUILT IN PUBLIC" in 9px caps — the whole thing smells like Hacker News. Instrument Serif + JetBrains Mono. Best for indie SaaS landing pages, dev tools, build-in-public products.

**HTML:**
```html
<section class="br-isp" aria-label="Indie SaaS hero and pricing demo">
  <div class="card">
    <div class="page">

      <div class="hero">
        <div class="watermark" aria-hidden="true">ship</div>

        <div class="hero-body">
          <div class="live-badge">
            <div class="live-dot" aria-hidden="true"></div>
            Live — 847 signups this week
          </div>

          <h1 class="hero-h">
            Stop rebuilding<br />
            <em>auth</em> for every<br />
            side project.<span class="accent">seriously.</span>
          </h1>

          <p class="hero-sub">
            Drop-in auth for indie hackers. Works in 4 lines of code.<br />
            No Stripe webhooks. No AWS config hell. No SLA anxiety.<br />
            Just ship the damn thing.
          </p>

          <div class="metrics">
            <div class="metric">
              <div class="m-val">12<span class="unit">k</span></div>
              <div class="m-label">Users</div>
              <div class="m-delta up">↑ +340 this week</div>
            </div>
            <div class="metric">
              <div class="m-val">4<span class="unit">ms</span></div>
              <div class="m-label">P95 Latency</div>
              <div class="m-delta up">↑ faster</div>
            </div>
            <div class="metric">
              <div class="m-val">99<span class="unit">%</span></div>
              <div class="m-label">Uptime</div>
              <div class="m-delta up">30d avg</div>
            </div>
          </div>

          <div class="cta-row">
            <button class="btn-main" type="button">Start free → no card</button>
            <button class="btn-sec" type="button">see the code on GitHub</button>
          </div>

          <div class="trust">
            <span class="trust-item">No credit card</span>
            <span class="trust-item">Open source core</span>
            <span class="trust-item">Self-host option</span>
          </div>
        </div>

        <div class="hero-foot">
          BUILT IN PUBLIC · MRR $4,240 · STARTED JAN 2025
        </div>
      </div>

      <div class="pricing-col">

        <div class="billing-toggle">
          <span class="toggle-label">Billing</span>
          <div class="toggle-row">
            <div class="toggle-wrap" role="tablist">
              <button class="toggle-opt" type="button" role="tab">Monthly</button>
              <button class="toggle-opt active" type="button" role="tab" aria-selected="true">Annual</button>
            </div>
            <span class="save-tag">-20%</span>
          </div>
        </div>

        <div class="plans">

          <div class="plan">
            <div class="plan-top">
              <span class="plan-name">Hobby</span>
            </div>
            <div class="plan-price">
              <span class="p-currency">$</span>
              <span class="p-amount">0</span>
              <span class="p-period">/mo forever</span>
            </div>
            <ul class="plan-features">
              <li class="on">Up to 1,000 MAU</li>
              <li class="on">Email + OAuth</li>
              <li class="on">Community support</li>
              <li>Custom domains</li>
              <li>Webhooks</li>
            </ul>
            <button class="plan-btn" type="button">Get started →</button>
          </div>

          <div class="plan featured">
            <div class="plan-top">
              <span class="plan-name">Pro</span>
              <span class="popular-tag">Most picked</span>
            </div>
            <div class="plan-price">
              <span class="p-currency dim">$</span>
              <span class="p-amount">19</span>
              <span class="p-period dim">/mo</span>
            </div>
            <ul class="plan-features">
              <li>50k MAU included</li>
              <li>Custom domains</li>
              <li>Full webhook control</li>
              <li>Team seats (5)</li>
              <li>Priority email support</li>
            </ul>
            <button class="plan-btn" type="button">Start 14-day trial →</button>
          </div>

          <div class="plan">
            <div class="plan-top">
              <span class="plan-name">Team</span>
            </div>
            <div class="plan-price">
              <span class="p-currency">$</span>
              <span class="p-amount">79</span>
              <span class="p-period">/mo</span>
            </div>
            <ul class="plan-features">
              <li class="on">500k MAU</li>
              <li class="on">Unlimited seats</li>
              <li class="on">SOC 2 reports</li>
              <li class="on">SLA + Slack support</li>
              <li class="on">SSO / SAML</li>
            </ul>
            <button class="plan-btn" type="button">Contact us →</button>
          </div>

        </div>

      </div>

    </div>
  </div>
</section>
```

**CSS:**
```css
/* ─── 05 Indie SaaS Pricing — auth-as-a-service hero+pricing ──── */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,300;0,400;0,700;0,800;1,400&family=Instrument+Serif:ital@0;1&display=swap');

.br-isp {
  --br-isp-bg: #fafaf8;
  --br-isp-black: #111;
  --br-isp-muted: #888;
  --br-isp-rule: #ddd;
  --br-isp-green: #00b341;
  --br-isp-yellow: #ffd000;
  --br-isp-red: #e63000;
  --br-isp-blue: #1a5eff;

  position: relative;
  width: 100%;
  min-height: 760px;
  background: var(--br-isp-bg);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  color: var(--br-isp-black);
  overflow: hidden;
  box-sizing: border-box;
}

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

.br-isp .card { position: relative; width: 100%; min-height: 760px; }

.br-isp .page {
  display: grid;
  grid-template-columns: 1fr 380px;
  grid-template-rows: 1fr;
  min-height: 760px;
  border-top: 4px solid var(--br-isp-black);
}

/* Hero */
.br-isp .hero {
  padding: 44px 52px;
  border-right: 2px solid var(--br-isp-rule);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
  gap: 32px;
}

.br-isp .live-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #f0fff4;
  border: 1.5px solid var(--br-isp-green);
  color: var(--br-isp-green);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 700;
  padding: 5px 12px;
  margin-bottom: 28px;
  width: fit-content;
}
.br-isp .live-dot {
  width: 7px; height: 7px;
  background: var(--br-isp-green);
  border-radius: 50%;
  animation: br-isp-blink 1.4s ease-in-out infinite;
}
@keyframes br-isp-blink { 0%,100%{opacity:1} 50%{opacity:0.2} }

.br-isp .hero-h {
  font-family: 'Instrument Serif', serif;
  font-size: clamp(40px, 4.6vw, 64px);
  line-height: 1.06;
  color: var(--br-isp-black);
  letter-spacing: -0.02em;
  font-weight: 400;
}
.br-isp .hero-h em {
  font-style: italic;
  color: var(--br-isp-muted);
}
.br-isp .hero-h .accent {
  font-style: normal;
  background: var(--br-isp-yellow);
  padding: 0 6px;
  margin: 0 2px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72em;
  font-weight: 800;
  letter-spacing: -1px;
  vertical-align: 2px;
}

.br-isp .hero-sub {
  font-size: 12px;
  line-height: 1.9;
  color: var(--br-isp-muted);
  margin-top: 24px;
  max-width: 480px;
  border-left: 3px solid var(--br-isp-rule);
  padding-left: 16px;
}

.br-isp .metrics {
  display: flex;
  gap: 0;
  border: 1.5px solid var(--br-isp-rule);
  margin-top: 36px;
}
.br-isp .metric {
  flex: 1;
  padding: 16px 20px;
  border-right: 1.5px solid var(--br-isp-rule);
}
.br-isp .metric:last-child { border-right: none; }
.br-isp .m-val {
  font-size: 26px;
  font-weight: 800;
  color: var(--br-isp-black);
  line-height: 1;
  margin-bottom: 4px;
  letter-spacing: -1px;
}
.br-isp .m-val .unit { font-size: 14px; font-weight: 400; color: var(--br-isp-muted); }
.br-isp .m-label { font-size: 9px; color: var(--br-isp-muted); letter-spacing: 2px; text-transform: uppercase; }
.br-isp .m-delta { font-size: 9px; margin-top: 4px; }
.br-isp .m-delta.up { color: var(--br-isp-green); }
.br-isp .m-delta.dn { color: var(--br-isp-red); }

.br-isp .cta-row {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 32px;
  flex-wrap: wrap;
}
.br-isp .btn-main {
  background: var(--br-isp-black);
  color: var(--br-isp-bg);
  border: none;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 14px 28px;
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.1s, background 0.1s;
}
.br-isp .btn-main:hover {
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 var(--br-isp-black);
  background: var(--br-isp-blue);
}
.br-isp .btn-sec {
  background: transparent;
  color: var(--br-isp-muted);
  border: none;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  cursor: pointer;
  letter-spacing: 0.5px;
  text-decoration: underline;
  text-decoration-color: var(--br-isp-rule);
  text-underline-offset: 4px;
}
.br-isp .btn-sec:hover { color: var(--br-isp-black); text-decoration-color: var(--br-isp-black); }

.br-isp .trust {
  margin-top: 18px;
  font-size: 9px;
  color: var(--br-isp-muted);
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.br-isp .trust-item::before {
  content: '✓ ';
  color: var(--br-isp-green);
  font-weight: 700;
}

.br-isp .watermark {
  position: absolute;
  bottom: -20px;
  right: -20px;
  font-family: 'Instrument Serif', serif;
  font-size: 200px;
  color: rgba(0,0,0,0.025);
  line-height: 1;
  pointer-events: none;
  user-select: none;
  font-style: italic;
}

.br-isp .hero-foot {
  font-size: 9px;
  color: #ccc;
  letter-spacing: 2px;
}

/* Pricing column */
.br-isp .pricing-col {
  display: flex;
  flex-direction: column;
}

.br-isp .billing-toggle {
  padding: 16px 24px;
  border-bottom: 1.5px solid var(--br-isp-rule);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.br-isp .toggle-label { font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: var(--br-isp-muted); }
.br-isp .toggle-row { display: flex; align-items: center; gap: 8px; }
.br-isp .toggle-wrap {
  display: flex;
  border: 1.5px solid var(--br-isp-rule);
  overflow: hidden;
}
.br-isp .toggle-opt {
  padding: 5px 12px;
  font-size: 9px;
  letter-spacing: 1px;
  cursor: pointer;
  color: var(--br-isp-muted);
  transition: background 0.1s, color 0.1s;
  background: transparent;
  border: none;
  font-family: 'JetBrains Mono', monospace;
}
.br-isp .toggle-opt.active { background: var(--br-isp-black); color: var(--br-isp-bg); }
.br-isp .save-tag {
  font-size: 9px;
  background: var(--br-isp-yellow);
  color: var(--br-isp-black);
  padding: 2px 7px;
  font-weight: 700;
  letter-spacing: 1px;
}

.br-isp .plans { flex: 1; }

.br-isp .plan {
  padding: 22px 24px;
  border-bottom: 1.5px solid var(--br-isp-rule);
  position: relative;
  transition: background 0.15s;
}
.br-isp .plan:last-child { border-bottom: none; }
.br-isp .plan:hover { background: #f5f5f2; }
.br-isp .plan.featured { background: var(--br-isp-black); }
.br-isp .plan.featured:hover { background: #1a1a1a; }

.br-isp .plan-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 14px;
}
.br-isp .plan-name {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
}
.br-isp .featured .plan-name { color: var(--br-isp-yellow); }
.br-isp .popular-tag {
  font-size: 8px;
  background: var(--br-isp-blue);
  color: white;
  padding: 3px 8px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.br-isp .plan-price {
  margin-bottom: 14px;
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.br-isp .p-currency { font-size: 16px; font-weight: 700; color: var(--br-isp-muted); margin-top: 4px; }
.br-isp .p-currency.dim { color: #666; }
.br-isp .p-amount {
  font-size: 38px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -2px;
}
.br-isp .featured .p-amount { color: var(--br-isp-bg); }
.br-isp .p-period { font-size: 10px; color: var(--br-isp-muted); }
.br-isp .p-period.dim { color: #555; }

.br-isp .plan-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}
.br-isp .plan-features li {
  font-size: 10px;
  line-height: 1.4;
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.br-isp .plan-features li::before { content: '○'; flex-shrink: 0; }
.br-isp .plan .plan-features li { color: var(--br-isp-muted); }
.br-isp .plan .plan-features li::before { color: #ccc; }
.br-isp .featured .plan-features li { color: #aaa; }
.br-isp .featured .plan-features li::before { color: var(--br-isp-yellow); }
.br-isp .plan-features li.on { color: var(--br-isp-black); }
.br-isp .plan-features li.on::before { color: var(--br-isp-green); content: '●'; }

.br-isp .plan-btn {
  width: 100%;
  padding: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  border: 1.5px solid;
  transition: all 0.1s;
}
.br-isp .plan .plan-btn { background: transparent; border-color: var(--br-isp-rule); color: var(--br-isp-muted); }
.br-isp .plan .plan-btn:hover { border-color: var(--br-isp-black); color: var(--br-isp-black); }
.br-isp .featured .plan-btn { background: var(--br-isp-yellow); border-color: var(--br-isp-yellow); color: var(--br-isp-black); }
.br-isp .featured .plan-btn:hover { background: #ffc800; }

@media (max-width: 720px) {
  .br-isp .page { grid-template-columns: 1fr; }
  .br-isp .hero { border-right: none; border-bottom: 2px solid var(--br-isp-rule); padding: 32px 24px; }
  .br-isp .metrics { flex-wrap: wrap; }
  .br-isp .metric { flex: 1 1 33%; }
}

@media (prefers-reduced-motion: reduce) {
  .br-isp .live-dot { animation: none; }
  .br-isp .btn-main, .br-isp .plan, .br-isp .plan-btn { transition: none; }
}
```

### 06. Windows 95 Desktop

**Type:** CSS + JS
**Description:** A fully realized Windows 95 desktop with four draggable windows on a checker-tile teal background. The main window is a Netscape Navigator frame hosting Kira’s GeoCities homepage — complete with a scrolling green-on-black marquee, a real visitor counter in red VT323 digits, a fan poll with radio buttons, and a Win95-themed song table. A Properties panel sidebar shows a loading progress bar animated with classic blue block stripes. An alert dialog ("press OK or the page will EXPLODE") has the authentic three-button layout. A black Winamp 2.9 player renders with a fake frequency visualizer, scrolling track marquee, and working transport controls. All four windows are mouse-draggable. The taskbar clock updates live, and the teal desktop uses the authentic 4px checker tile. VT323 + Press Start 2P + MS Sans Serif fallbacks. Best for nostalgia sites, retro brand campaigns, 90s-revival product pages.

**HTML:**
```html
<section class="br-w95" aria-label="Windows 95 desktop demo">
  <div class="card">

    <!-- MAIN WINDOW -->
    <div class="window win-main" data-br-w95-win>
      <div class="window-titlebar" data-br-w95-drag>
        <div class="window-title">
          <span class="win-icon">🌐</span>
          KIRA's HOMEPAGE v2.1 — Netscape Navigator
        </div>
        <div class="window-controls">
          <button class="win-ctrl" type="button" aria-label="Minimize">_</button>
          <button class="win-ctrl" type="button" aria-label="Maximize">▢</button>
          <button class="win-ctrl close" type="button" aria-label="Close">✕</button>
        </div>
      </div>
      <div class="window-menu">
        <span class="menu-item"><u>F</u>ile</span>
        <span class="menu-item"><u>E</u>dit</span>
        <span class="menu-item"><u>V</u>iew</span>
        <span class="menu-item"><u>G</u>o</span>
        <span class="menu-item"><u>B</u>ookmarks</span>
        <span class="menu-item"><u>H</u>elp</span>
      </div>
      <div class="window-content">

        <div class="addr-row">
          <span class="addr-label">Address:</span>
          <div class="inset addr-bar">
            <span>http://www.geocities.com/Athens/Oracle/7749/</span>
          </div>
          <button class="btn95 go-btn" type="button">Go!</button>
        </div>

        <div class="construction">
          <span>⚠</span>
          <span class="construction-text">UNDER CONSTRUCTION</span>
          <span>← check back l8r! 👷</span>
        </div>
        <div class="marquee-wrap marquee-green">
          <span class="marquee-inner">
            ★ WELCOME TO MY COOL SITE ★ ◆ Best viewed in 800×600 ◆ Netscape 4.0 or higher ◆ No MSIE please!!! ◆
            ★ WELCOME TO MY COOL SITE ★ ◆ Best viewed in 800×600 ◆ Netscape 4.0 or higher ◆ No MSIE please!!! ◆
          </span>
        </div>
        <hr class="sep95" />

        <table class="layout-table">
          <tr>
            <td class="nav-cell">
              <div class="nav-head">📁 Navigation</div>
              <div class="nav-list">
                <div>🏠 <a href="#">Home</a></div>
                <div>📸 <a href="#">My Photos</a></div>
                <div>🎵 <a href="#">Music Faves</a></div>
                <div>💬 <a href="#">Guestbook</a> <span class="blink new-tag">NEW!</span></div>
                <div>🔗 <a href="#">Links</a></div>
                <div>📧 <a href="#">E-mail Me</a></div>
              </div>
              <hr class="sep95" />
              <div class="counter-block">
                <div class="counter-label">👁 Visitors:</div>
                <div class="counter-digits">
                  <span class="digit">0</span>
                  <span class="digit">0</span>
                  <span class="digit">4</span>
                  <span class="digit">2</span>
                  <span class="digit">1</span>
                  <span class="digit">6</span>
                  <span class="digit">7</span>
                </div>
                <div class="counter-sub">since Jan 1999</div>
              </div>
              <hr class="sep95" />
              <div class="links-mini">
                <div>★ LINKS ★</div>
                <div><a href="#">Hamster Dance</a></div>
                <div><a href="#">Cool ASCII Art</a></div>
                <div><a href="#">Free Midi Files</a></div>
              </div>
            </td>

            <td class="content-cell">
              <div class="inset about-box">
                <span class="pixel about-title">★ ABOUT ME ★</span>
                Hey!! My name is <b>Kira</b> and welcome 2 my totally awesome webpage!!
                I am 16 from <b>Portland Oregon</b> and i luv <b>The Smashing Pumpkins</b>,
                anime, HTML coding and my cat <b>Mittens</b> 🐱<br /><br />
                This page was made with <b>Notepad</b>!!
                <span class="warn-red">NO FRONTPAGE</span> here lol.
                If u steal my code ur a JERK!! 🤬<br />
                <a href="#">Sign my Guestbook</a> or i'll be <span class="sad-purple">sooo sad</span> 😢
              </div>

              <div class="poll-box">
                <div class="poll-title">💬 POLL: whats ur fav winamp skin?</div>
                <div class="poll-opts">
                  <label><input type="radio" name="br-w95-poll" /> Classic (boring lol)</label>
                  <label><input type="radio" name="br-w95-poll" checked /> Milkdrop visualizer 🌈</label>
                  <label><input type="radio" name="br-w95-poll" /> Big Bento (so cool)</label>
                  <label><input type="radio" name="br-w95-poll" /> i use WMP 😱</label>
                </div>
                <button class="btn95 vote-btn" type="button">VOTE!</button>
              </div>

              <div class="songs-head">🎵 My Top Songs RIGHT NOW:</div>
              <table class="win95">
                <tr><th>#</th><th>Song</th><th>Artist</th><th>Format</th></tr>
                <tr>
                  <td>1</td>
                  <td><a href="#">1979</a></td>
                  <td>Smashing Pumpkins</td>
                  <td>MP3 128kbps</td>
                </tr>
                <tr>
                  <td>2</td>
                  <td><a href="#">Karma Police</a></td>
                  <td>Radiohead</td>
                  <td>Real Audio</td>
                </tr>
                <tr>
                  <td>3</td>
                  <td><a href="#">MMM Bop</a></td>
                  <td>Hanson</td>
                  <td>.WAV 😳</td>
                </tr>
              </table>
            </td>
          </tr>
        </table>

        <hr class="sep95" />
        <div class="page-foot">
          ©1999 Kira's Homepage · Made with ♥ and Notepad ·
          <a href="#">Validate HTML</a> ·
          Best viewed: <b>800×600, 256 colors</b><br />
          This page was last updated: <b>March 14, 1999</b>
          <span class="blink warn-red"> ← NEW STUFF!!</span>
        </div>

      </div>
    </div>

    <!-- SIDEBAR -->
    <div class="window win-sidebar" data-br-w95-win>
      <div class="window-titlebar" data-br-w95-drag>
        <div class="window-title"><span class="win-icon">⚙</span>Properties</div>
        <div class="window-controls">
          <button class="win-ctrl" type="button" aria-label="Minimize">_</button>
          <button class="win-ctrl close" type="button" aria-label="Close">✕</button>
        </div>
      </div>
      <div class="window-content">
        <div class="props-head">Page Info</div>
        <div class="inset props-info">
          <div><b>Size:</b> 48 KB</div>
          <div><b>Images:</b> 23</div>
          <div><b>Links:</b> 17</div>
          <div><b>Charset:</b> ISO-8859-1</div>
          <div><b>MIDI:</b> playing 🎵</div>
        </div>
        <div class="props-loading-head">Page Loading:</div>
        <div class="progress-wrap"><div class="progress-fill"></div></div>
        <div class="props-status">Receiving data from geocities.com...</div>
        <hr class="sep95" />
        <div class="props-buttons">
          <button class="btn95" type="button">OK</button>
          <button class="btn95" type="button">Cancel</button>
        </div>
      </div>
    </div>

    <!-- ALERT -->
    <div class="window win-alert" data-br-w95-win>
      <div class="window-titlebar alert-titlebar" data-br-w95-drag>
        <div class="window-title"><span class="win-icon">⚠</span>JavaScript Alert</div>
        <div class="window-controls">
          <button class="win-ctrl close" type="button" aria-label="Close">✕</button>
        </div>
      </div>
      <div class="window-content">
        <div class="alert-body">
          <div class="alert-icon" aria-hidden="true">⚠️</div>
          <div class="alert-text">
            <b>This page requires cookies!!</b><br />
            Also please enable <b>Java Applets</b>.<br />
            Press OK or the page will <span class="warn-red">EXPLODE</span> 💣
          </div>
        </div>
        <div class="alert-buttons">
          <button class="btn95 alert-ok" type="button">OK</button>
          <button class="btn95" type="button">Cancel</button>
          <button class="btn95" type="button">Help?</button>
        </div>
      </div>
    </div>

    <!-- MEDIA PLAYER -->
    <div class="window win-media" data-br-w95-win>
      <div class="window-titlebar media-titlebar" data-br-w95-drag>
        <div class="window-title">
          <span class="winamp-pulse">♫</span>
          <span class="winamp-name">Winamp 2.9 - [1979.mp3]</span>
        </div>
        <div class="window-controls">
          <button class="win-ctrl" type="button" aria-label="Minimize">_</button>
          <button class="win-ctrl close winamp-close" type="button" aria-label="Close">✕</button>
        </div>
      </div>
      <div class="winamp-body">
        <div class="viz-row" aria-hidden="true">
          <div class="viz-bar v1"></div><div class="viz-bar v2"></div>
          <div class="viz-bar v3"></div><div class="viz-bar v4"></div>
          <div class="viz-bar v5"></div><div class="viz-bar v6"></div>
          <div class="viz-bar v7"></div><div class="viz-bar v8"></div>
          <div class="viz-bar v9"></div><div class="viz-bar v10"></div>
          <div class="viz-bar v11"></div><div class="viz-bar v12"></div>
          <div class="viz-bar v13"></div><div class="viz-bar v14"></div>
          <div class="viz-bar v15"></div><div class="viz-bar v16"></div>
        </div>
        <div class="track-row">
          <span class="track-inner">
            &nbsp;&nbsp;Smashing Pumpkins — 1979 — Mellon Collie · 4:25 · 128kbps · Stereo · MPEG Layer 3&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          </span>
        </div>
        <div class="timer-row">
          <span class="t-elapsed">2:14</span>
          <div class="t-flags">
            <span>EQ</span>
            <span>SHF</span>
            <span>REP</span>
          </div>
          <span class="t-remaining">-2:11</span>
        </div>
        <div class="seek-wrap"><div class="seek-fill"></div></div>
        <div class="ctrl-row">
          <button class="winamp-btn" type="button" aria-label="Previous">◄◄</button>
          <button class="winamp-btn" type="button" aria-label="Play">►</button>
          <button class="winamp-btn" type="button" aria-label="Pause">▌▌</button>
          <button class="winamp-btn" type="button" aria-label="Stop">■</button>
          <button class="winamp-btn" type="button" aria-label="Next">►►</button>
        </div>
      </div>
    </div>

    <!-- TASKBAR -->
    <div class="taskbar">
      <button class="btn95 start-btn" type="button">
        <span class="windows-logo">🪟</span>
        <b>Start</b>
      </button>
      <div class="taskbar-divider"></div>
      <div class="taskbar-btn">🌐 Kira's Homepage</div>
      <div class="taskbar-btn">📁 My Documents</div>
      <div class="taskbar-btn">♫ Winamp 2.9</div>
      <div class="clock" data-br-w95-clock>3:47 PM</div>
    </div>

  </div>
</section>
```

**CSS:**
```css
/* ─── 06 Windows 95 Desktop — GeoCities throwback ─────────── */
@import url('https://fonts.googleapis.com/css2?family=VT323&family=Press+Start+2P&display=swap');

.br-w95 {
  --br-w95-gray: #c0c0c0;
  --br-w95-dark: #808080;
  --br-w95-black: #000000;
  --br-w95-white: #ffffff;
  --br-w95-blue: #000080;
  --br-w95-title: #0000a0;
  --br-w95-teal: #008080;
  --br-w95-yellow: #ffff00;
  --br-w95-red: #ff0000;
  --br-w95-silver: #dfdfdf;
  --br-w95-link: #0000ee;
  --br-w95-link-vis: #551a8b;
  --br-w95-highlight: #000080;

  position: relative;
  width: 100%;
  height: 760px;
  background: var(--br-w95-teal);
  background-image:
    url("data:image/svg+xml,%3Csvg width='4' height='4' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='2' height='2' fill='%23007070'/%3E%3Crect x='2' y='2' width='2' height='2' fill='%23007070'/%3E%3C/svg%3E");
  background-size: 4px 4px;
  font-family: 'MS Sans Serif', 'Microsoft Sans Serif', Tahoma, Geneva, sans-serif;
  font-size: 11px;
  color: var(--br-w95-black);
  overflow: hidden;
  box-sizing: border-box;
}

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

.br-w95 .card { position: absolute; inset: 0; }

/* Win95 buttons */
.br-w95 .btn95 {
  background: var(--br-w95-gray);
  border: 2px solid;
  border-color: var(--br-w95-white) var(--br-w95-black) var(--br-w95-black) var(--br-w95-white);
  color: var(--br-w95-black);
  font-family: 'MS Sans Serif', Tahoma, sans-serif;
  font-size: 11px;
  padding: 3px 10px;
  cursor: pointer;
  white-space: nowrap;
  outline: none;
  min-width: 75px;
  text-align: center;
}
.br-w95 .btn95:active {
  border-color: var(--br-w95-black) var(--br-w95-white) var(--br-w95-white) var(--br-w95-black);
  padding: 4px 9px 2px 11px;
}
.br-w95 .btn95:focus { outline: 1px dotted var(--br-w95-black); outline-offset: -4px; }

/* Window chrome */
.br-w95 .window {
  background: var(--br-w95-gray);
  border: 2px solid;
  border-color: var(--br-w95-white) var(--br-w95-dark) var(--br-w95-dark) var(--br-w95-white);
  position: absolute;
  box-shadow: 2px 2px 0 var(--br-w95-black);
  min-width: 200px;
}
.br-w95 .window-titlebar {
  background: linear-gradient(90deg, var(--br-w95-title) 0%, #0a0aa0 80%, #5555bb 100%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 3px;
  gap: 2px;
  user-select: none;
  cursor: move;
}
.br-w95 .window-title {
  color: var(--br-w95-white);
  font-size: 11px;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
}
.br-w95 .win-icon { font-size: 14px; line-height: 1; }
.br-w95 .window-controls { display: flex; gap: 2px; }
.br-w95 .win-ctrl {
  width: 16px; height: 14px;
  background: var(--br-w95-gray);
  border: 1.5px solid;
  border-color: var(--br-w95-white) var(--br-w95-black) var(--br-w95-black) var(--br-w95-white);
  font-size: 9px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  padding: 0;
  font-family: 'MS Sans Serif', Tahoma, sans-serif;
  line-height: 1;
}
.br-w95 .win-ctrl:active { border-color: var(--br-w95-black) var(--br-w95-white) var(--br-w95-white) var(--br-w95-black); }
.br-w95 .win-ctrl.close { color: #cc0000; }

.br-w95 .window-content { padding: 8px; }
.br-w95 .window-menu {
  display: flex;
  border-bottom: 1px solid var(--br-w95-dark);
  margin: 0 -8px 8px;
  padding: 0 4px;
  gap: 0;
}
.br-w95 .menu-item {
  font-size: 11px;
  padding: 2px 6px;
  cursor: pointer;
  color: var(--br-w95-black);
  text-decoration: none;
}
.br-w95 .menu-item:hover { background: var(--br-w95-highlight); color: var(--br-w95-white); }

.br-w95 .inset {
  border: 2px solid;
  border-color: var(--br-w95-dark) var(--br-w95-white) var(--br-w95-white) var(--br-w95-dark);
  background: var(--br-w95-white);
  padding: 6px 8px;
  overflow: auto;
}

.br-w95 a { color: var(--br-w95-link); text-decoration: underline; cursor: pointer; }
.br-w95 a:visited { color: var(--br-w95-link-vis); }
.br-w95 a:hover { color: var(--br-w95-red); }

.br-w95 .sep95 {
  border: none;
  border-top: 1px solid var(--br-w95-dark);
  border-bottom: 1px solid var(--br-w95-white);
  margin: 6px 0;
}

.br-w95 .progress-wrap {
  height: 16px;
  background: var(--br-w95-white);
  border: 2px solid;
  border-color: var(--br-w95-dark) var(--br-w95-white) var(--br-w95-white) var(--br-w95-dark);
  overflow: hidden;
}
.br-w95 .progress-fill {
  height: 100%;
  background: repeating-linear-gradient(
    90deg,
    var(--br-w95-blue) 0px,
    var(--br-w95-blue) 12px,
    var(--br-w95-gray) 12px,
    var(--br-w95-gray) 13px
  );
  width: 0%;
  animation: br-w95-load 3s steps(20) infinite;
}
@keyframes br-w95-load { from { width: 0% } to { width: 100% } }

.br-w95 .inset::-webkit-scrollbar { width: 16px; }
.br-w95 .inset::-webkit-scrollbar-track { background: var(--br-w95-gray); border: 1px solid var(--br-w95-dark); }
.br-w95 .inset::-webkit-scrollbar-thumb {
  background: var(--br-w95-gray);
  border: 2px solid;
  border-color: var(--br-w95-white) var(--br-w95-black) var(--br-w95-black) var(--br-w95-white);
}

@keyframes br-w95-blink { 0%,49%{opacity:1} 50%,100%{opacity:0} }
.br-w95 .blink { animation: br-w95-blink 1s step-end infinite; }

.br-w95 .marquee-wrap { overflow: hidden; white-space: nowrap; }
.br-w95 .marquee-inner { display: inline-block; animation: br-w95-marquee 12s linear infinite; }
@keyframes br-w95-marquee { from { transform: translateX(100%); } to { transform: translateX(-100%); } }
.br-w95 .marquee-green {
  background: #000;
  color: #0f0;
  padding: 2px 6px;
  font-family: 'VT323', monospace;
  font-size: 18px;
  margin-top: 4px;
}

.br-w95 .pixel { font-family: 'Press Start 2P', monospace; }

.br-w95 .construction {
  display: flex;
  align-items: center;
  gap: 6px;
  background: repeating-linear-gradient(
    45deg,
    #000 0px, #000 8px,
    #ff0 8px, #ff0 16px
  );
  padding: 3px 8px;
  color: var(--br-w95-black);
  font-weight: 700;
  font-size: 10px;
}
.br-w95 .construction-text { background: var(--br-w95-yellow); padding: 1px 4px; }

.br-w95 .counter-digits {
  display: inline-flex;
  gap: 1px;
  background: #000;
  padding: 3px 6px;
  border: 1.5px inset var(--br-w95-dark);
}
.br-w95 .digit {
  font-family: 'VT323', monospace;
  font-size: 24px;
  color: var(--br-w95-red);
  line-height: 1;
  min-width: 14px;
  text-align: center;
}

.br-w95 table.win95 { border-collapse: collapse; width: 100%; font-size: 11px; }
.br-w95 table.win95 th {
  background: var(--br-w95-blue);
  color: var(--br-w95-white);
  padding: 3px 8px;
  text-align: left;
  font-weight: bold;
  font-size: 11px;
}
.br-w95 table.win95 td {
  padding: 2px 8px;
  border-bottom: 1px solid var(--br-w95-silver);
}
.br-w95 table.win95 tr:hover td { background: var(--br-w95-highlight); color: var(--br-w95-white); }
.br-w95 table.win95 tr:hover td a { color: var(--br-w95-white); }

.br-w95 input[type="radio"], .br-w95 input[type="checkbox"] {
  accent-color: var(--br-w95-blue);
  cursor: pointer;
}
.br-w95 label { cursor: pointer; }

/* Taskbar — absolute to wrapper, not viewport */
.br-w95 .taskbar {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 28px;
  background: var(--br-w95-gray);
  border-top: 2px solid var(--br-w95-white);
  display: flex;
  align-items: center;
  padding: 2px 4px;
  gap: 4px;
  z-index: 100;
}
.br-w95 .start-btn {
  height: 22px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 6px;
  font-weight: 700;
  font-size: 11px;
  min-width: auto;
}
.br-w95 .windows-logo { font-size: 14px; }
.br-w95 .taskbar-divider {
  width: 1px; height: 20px;
  background: var(--br-w95-dark);
  border-right: 1px solid var(--br-w95-white);
  margin: 0 2px;
}
.br-w95 .taskbar-btn {
  height: 22px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 8px;
  font-size: 11px;
  border: 2px solid;
  border-color: var(--br-w95-dark) var(--br-w95-white) var(--br-w95-white) var(--br-w95-dark);
  background: var(--br-w95-silver);
  cursor: pointer;
  white-space: nowrap;
  font-family: 'MS Sans Serif', Tahoma, sans-serif;
}
.br-w95 .clock {
  margin-left: auto;
  border: 2px solid;
  border-color: var(--br-w95-dark) var(--br-w95-white) var(--br-w95-white) var(--br-w95-dark);
  padding: 2px 8px;
  font-size: 11px;
  background: var(--br-w95-gray);
  white-space: nowrap;
}

/* Window positions */
.br-w95 .win-main { top: 12px; left: 16px; width: 520px; max-width: calc(100% - 32px); }
.br-w95 .win-sidebar { top: 12px; right: 24px; width: 220px; }
.br-w95 .win-alert { top: 200px; left: 50%; transform: translateX(-120px); width: 300px; }
.br-w95 .win-media { bottom: 44px; left: 16px; width: 340px; max-width: calc(100% - 32px); }

/* Main window inner */
.br-w95 .addr-row { display: flex; gap: 4px; align-items: center; margin-bottom: 8px; }
.br-w95 .addr-label { font-size: 11px; }
.br-w95 .addr-bar { flex: 1; padding: 2px 4px; }
.br-w95 .go-btn { min-width: 50px; }

.br-w95 .layout-table { width: 100%; border-collapse: collapse; }
.br-w95 .nav-cell { width: 160px; vertical-align: top; padding-right: 8px; }
.br-w95 .content-cell { vertical-align: top; }
.br-w95 .nav-head {
  background: var(--br-w95-blue);
  color: #fff;
  padding: 3px 6px;
  font-weight: bold;
  font-size: 11px;
  margin-bottom: 2px;
}
.br-w95 .nav-list { font-size: 11px; line-height: 2; }
.br-w95 .new-tag { color: red; font-weight: bold; }
.br-w95 .counter-block { font-size: 10px; text-align: center; }
.br-w95 .counter-label { margin-bottom: 4px; }
.br-w95 .counter-sub { margin-top: 4px; color: #666; }
.br-w95 .links-mini { font-size: 10px; text-align: center; line-height: 1.8; }

.br-w95 .about-box { margin-bottom: 8px; font-size: 12px; line-height: 1.9; max-height: 120px; overflow: auto; }
.br-w95 .about-title { font-size: 8px; display: block; margin-bottom: 6px; }
.br-w95 .warn-red { color: var(--br-w95-red); font-weight: bold; }
.br-w95 .sad-purple { color: purple; font-style: italic; }

.br-w95 .poll-box {
  background: #ffffcc;
  border: 1px solid #999;
  padding: 6px;
  font-size: 11px;
  margin-bottom: 8px;
}
.br-w95 .poll-title { font-weight: bold; margin-bottom: 4px; }
.br-w95 .poll-opts { display: flex; flex-direction: column; gap: 3px; }
.br-w95 .vote-btn { margin-top: 6px; font-size: 10px; }

.br-w95 .songs-head { font-weight: bold; font-size: 11px; margin-bottom: 3px; }

.br-w95 .page-foot { font-size: 10px; color: #666; text-align: center; line-height: 1.8; }

/* Sidebar */
.br-w95 .props-head { font-size: 11px; font-weight: bold; margin-bottom: 6px; }
.br-w95 .props-info { font-size: 10px; line-height: 2; margin-bottom: 8px; }
.br-w95 .props-loading-head { font-size: 11px; font-weight: bold; margin-bottom: 4px; }
.br-w95 .props-status { font-size: 10px; color: #666; margin-top: 3px; }
.br-w95 .props-buttons { display: flex; gap: 4px; justify-content: center; flex-wrap: wrap; }

/* Alert */
.br-w95 .alert-titlebar { background: linear-gradient(90deg, #800000, #a00000); }
.br-w95 .alert-body { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.br-w95 .alert-icon { font-size: 36px; line-height: 1; }
.br-w95 .alert-text { font-size: 11px; line-height: 1.8; }
.br-w95 .alert-buttons { display: flex; gap: 6px; justify-content: center; }
.br-w95 .alert-ok { font-weight: bold; }

/* Winamp */
.br-w95 .media-titlebar { background: linear-gradient(90deg, #000, #222); }
.br-w95 .winamp-pulse { color: #00ff00; font-family: 'VT323', monospace; font-size: 16px; }
.br-w95 .winamp-name { color: #fff; }
.br-w95 .winamp-close { background: #111; }
.br-w95 .winamp-body { background: #000; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.br-w95 .viz-row { height: 40px; background: #000; display: flex; align-items: flex-end; gap: 1px; padding: 0 4px; overflow: hidden; }
.br-w95 .viz-bar { flex: 1; background: #00cc00; opacity: 0.8; }
.br-w95 .v1 { height: 60%; } .br-w95 .v2 { height: 90%; }
.br-w95 .v3 { height: 100%; background: #00ff00; opacity: 1; }
.br-w95 .v4 { height: 75%; background: #aaff00; }
.br-w95 .v5 { height: 50%; } .br-w95 .v6 { height: 85%; }
.br-w95 .v7 { height: 95%; background: #00ff00; opacity: 1; }
.br-w95 .v8 { height: 60%; } .br-w95 .v9 { height: 40%; }
.br-w95 .v10 { height: 70%; background: #aaff00; }
.br-w95 .v11 { height: 100%; background: #00ff00; opacity: 1; }
.br-w95 .v12 { height: 55%; } .br-w95 .v13 { height: 80%; }
.br-w95 .v14 { height: 65%; background: #aaff00; }
.br-w95 .v15 { height: 45%; }
.br-w95 .v16 { height: 88%; background: #00ff00; opacity: 1; }

.br-w95 .track-row {
  background: #000;
  color: #00ff00;
  font-family: 'VT323', monospace;
  font-size: 18px;
  padding: 3px 6px;
  overflow: hidden;
  white-space: nowrap;
}
.br-w95 .track-inner { animation: br-w95-marquee 10s linear infinite; display: inline-block; }
.br-w95 .timer-row { display: flex; justify-content: space-between; padding: 0 4px; }
.br-w95 .t-elapsed { font-family: 'VT323', monospace; font-size: 22px; color: #00ff00; letter-spacing: 2px; }
.br-w95 .t-remaining { font-family: 'VT323', monospace; font-size: 22px; color: #006600; letter-spacing: 2px; }
.br-w95 .t-flags { display: flex; gap: 3px; }
.br-w95 .t-flags span {
  font-family: 'VT323', monospace;
  font-size: 14px;
  color: #008800;
  background: #001100;
  padding: 1px 4px;
}
.br-w95 .seek-wrap { height: 5px; background: #004400; margin: 0 4px; }
.br-w95 .seek-fill { height: 100%; width: 50%; background: #00cc00; }
.br-w95 .ctrl-row { display: flex; gap: 3px; justify-content: center; flex-wrap: wrap; }
.br-w95 .winamp-btn {
  background: #222;
  color: #0f0;
  border: 1px solid #004400;
  font-size: 12px;
  padding: 2px 8px;
  cursor: pointer;
  font-family: 'VT323', monospace;
}

@media (max-width: 720px) {
  .br-w95 .win-sidebar { right: 8px; width: 180px; }
  .br-w95 .win-alert { transform: translateX(-50%); }
  .br-w95 .win-media { width: 280px; }
}

@media (prefers-reduced-motion: reduce) {
  .br-w95 .progress-fill,
  .br-w95 .marquee-inner,
  .br-w95 .track-inner,
  .br-w95 .blink { animation: none !important; }
}
```

**JS:**
```js
(() => {
  const root = document.querySelector('.br-w95');
  if (!root) return;

  // Live clock
  const clock = root.querySelector('[data-br-w95-clock]');
  function updateClock() {
    if (!clock) return;
    const now = new Date();
    let h = now.getHours(), m = now.getMinutes();
    const ampm = h >= 12 ? 'PM' : 'AM';
    h = h % 12 || 12;
    clock.textContent = h + ':' + String(m).padStart(2, '0') + ' ' + ampm;
  }
  updateClock();
  const clockInterval = setInterval(updateClock, 30000);

  // Draggable windows (scoped to the wrapper)
  let topZ = 50;
  root.querySelectorAll('[data-br-w95-win]').forEach(win => {
    const bar = win.querySelector('[data-br-w95-drag]');
    if (!bar) return;
    let dx, dy, dragging = false;

    bar.addEventListener('mousedown', e => {
      // Ignore drag on the close/min/max buttons
      if (e.target.closest('.win-ctrl')) return;
      const rootRect = root.getBoundingClientRect();
      const winRect = win.getBoundingClientRect();
      dx = e.clientX - winRect.left;
      dy = e.clientY - winRect.top;
      win.style.left = (winRect.left - rootRect.left) + 'px';
      win.style.top = (winRect.top - rootRect.top) + 'px';
      win.style.right = 'auto';
      win.style.bottom = 'auto';
      win.style.transform = 'none';
      win.style.zIndex = ++topZ;
      dragging = true;
      e.preventDefault();
    });

    document.addEventListener('mousemove', e => {
      if (!dragging) return;
      const rootRect = root.getBoundingClientRect();
      let x = e.clientX - rootRect.left - dx;
      let y = e.clientY - rootRect.top - dy;
      x = Math.max(0, Math.min(rootRect.width - 40, x));
      y = Math.max(0, Math.min(rootRect.height - 30, y));
      win.style.left = x + 'px';
      win.style.top = y + 'px';
    });

    document.addEventListener('mouseup', () => { dragging = false; });
  });
})();
```

### 07. Long Read Editorial

**Type:** Pure CSS
**Description:** A full editorial layout built to make writing the only thing that matters. Three-column architecture: a fixed table of contents on the left (with the active article highlighted in yellow), a scrollable center article column, and a subscriber sidebar on the right — all separated by single-pixel ink rules, no decoration. The masthead is a rigid three-cell grid with the publication name center-framed between hairline borders. The article itself uses Libre Baskerville for body and display, a large drop cap, a yellow pull-quote block with a 6px left border, and an exposed byline strip with four data cells. The subscribe panel tracks 14,200 readers at 94% open rate with a focus-to-yellow input. Libre Baskerville + Schibsted Grotesk. Best for newsletter homepages, literary magazines, longform blogs, paid-subscription publications.

**HTML:**
```html
<section class="br-lre" aria-label="Long read editorial layout demo">
  <div class="card">

    <div class="masthead">
      <div class="masthead-left">Issue No. 47 · Jun 2025</div>
      <div class="masthead-center">THE LONG READ</div>
      <div class="masthead-right">Est. 2021 · Fortnightly</div>
    </div>

    <div class="nav-strip">
      <button class="nav-item active" type="button">Essays</button>
      <button class="nav-item" type="button">Dispatches</button>
      <button class="nav-item" type="button">Reviews</button>
      <button class="nav-item" type="button">Interviews</button>
      <button class="nav-item" type="button">Archive</button>
      <button class="nav-item" type="button">About</button>
    </div>

    <div class="content-grid">

      <aside class="toc" aria-label="In this issue">
        <div class="toc-head">In this issue</div>
        <ul class="toc-list">
          <li class="toc-item featured">
            <span class="toc-num">Essay — p.1</span>
            <div class="toc-title">The Attention Economy Is Eating Its Own Tail</div>
          </li>
          <li class="toc-item">
            <span class="toc-num">Dispatch — p.4</span>
            <div class="toc-title">Notes from Three Months Without a Smartphone</div>
          </li>
          <li class="toc-item">
            <span class="toc-num">Review — p.6</span>
            <div class="toc-title">Scarcity: The Untold History of Enough</div>
          </li>
        </ul>

        <div class="toc-section-label">Also inside</div>
        <ul class="toc-list">
          <li class="toc-item">
            <span class="toc-num">Interview</span>
            <div class="toc-title">Jia Tolentino on writing slow</div>
          </li>
          <li class="toc-item">
            <span class="toc-num">Column</span>
            <div class="toc-title">Why newsletters are the new pamphlets</div>
          </li>
          <li class="toc-item">
            <span class="toc-num">Links</span>
            <div class="toc-title">7 things worth reading this fortnight</div>
          </li>
        </ul>
      </aside>

      <article class="article-col">
        <div class="article-label">— Feature Essay · Issue 47</div>

        <h1 class="article-h1">The Attention Economy<br />Is <em>Eating</em> Its Own Tail</h1>

        <p class="article-deck">
          When every platform optimises for engagement above all else, the resulting content becomes a mirror — reflecting not what we think, but what we feel compelled to click. And we are running out of things to say.
        </p>

        <div class="byline">
          <div class="byline-cell"><strong>Marcus Osei</strong><span>Contributing Editor</span></div>
          <div class="byline-cell"><strong>June 3, 2025</strong><span>14 min read</span></div>
          <div class="byline-cell"><strong>2,840</strong><span>words</span></div>
          <div class="byline-cell"><strong>Issue 47</strong><span>p. 1 of 8</span></div>
        </div>

        <p class="body-p dropcap">
          There is a particular kind of essay that dominates the internet right now. It begins with a hook — a surprising statistic, a confessional sentence, a rhetorical question — and then proceeds to build, paragraph by paragraph, toward a conclusion that the reader suspected before they began. The form is optimised not for insight but for the sensation of insight. The click is the product. The reading is incidental.<sup>1</sup>
        </p>

        <p class="body-p">
          This is not an accident. The platforms that host most of our public writing have spent fifteen years tuning their recommendation algorithms toward a single metric: time-on-site. Attention, captured and held, is the commodity being traded. What we call "content" is, in economic terms, a vehicle for delivering human attention to advertisers — and content that fails to capture attention is content that does not exist.
        </p>

        <blockquote class="pull-quote">
          <p>"The algorithm does not reward being right. It rewards being interesting — and these two things are increasingly, catastrophically at odds."</p>
          <cite>— Marcus Osei, Issue 47</cite>
        </blockquote>

        <h2 class="article-h2">The Feedback Loop</h2>

        <p class="body-p">
          The problem is not simply that bad ideas spread. The problem is structural: when engagement is the metric, every writer faces a quiet, persistent pressure to make their work more engaging. Over time, this shapes not just tone but thought. You begin to notice which sentences make readers stop scrolling, and which do not. You begin to write more sentences that make readers stop scrolling. Before long, stopping the scroll becomes the thing the sentences are <em>for</em>.
        </p>

        <p class="body-p">
          The newsletter was supposed to fix this. Send your writing directly to readers who asked for it; no algorithm to appease, no feed to optimise for. And for a while, it did. But as newsletters multiplied, readers developed what one writer called "inbox fatigue" — the same exhaustion, the same half-reading, the same reach for the delete key. The medium changes; the attention problem does not.<sup>2</sup>
        </p>

        <h2 class="article-h2">What Remains</h2>

        <p class="body-p">
          The writers who have found something durable are, almost without exception, those who have made peace with being slow. They publish infrequently. They write long. They refuse to have opinions about things that happened in the last forty-eight hours. They treat their readers as people with enough time to think — which is, paradoxically, what makes their readers make time to think.
        </p>

        <div class="footnote">
          <sup>1</sup> This essay is not exempt from the critique it contains. The irony is intentional, and uncomfortable.<br />
          <sup>2</sup> "Platform Fatigue and the Illusion of Escape," <em>Columbia Journalism Review</em>, March 2024.
        </div>
      </article>

      <aside class="sidebar" aria-label="Subscribe and recent issues">

        <div class="sidebar-block">
          <div class="sb-label">Subscribe</div>
          <div class="sub-count">14,200 readers · free fortnightly</div>
          <div class="stat-row">
            <div class="stat-cell"><span class="stat-val">47</span><span class="stat-lab">Issues</span></div>
            <div class="stat-cell"><span class="stat-val">94%</span><span class="stat-lab">Open rate</span></div>
          </div>
          <form class="subscribe-form" onsubmit="return false;">
            <input class="sub-input" type="email" placeholder="your@email.com" aria-label="Email" />
            <button class="sub-btn" type="submit">Subscribe →</button>
          </form>
          <p class="sub-note">No ads. No sponsors. No tracking. Unsubscribe in one click.</p>
        </div>

        <div class="sidebar-block">
          <div class="sb-label">Recent Issues</div>
          <div class="recent-item">
            <span class="ri-issue">Issue 46 · Essay</span>
            <div class="ri-title">Against Productivity as Identity</div>
            <span class="ri-date">May 20, 2025</span>
          </div>
          <div class="recent-item">
            <span class="ri-issue">Issue 45 · Interview</span>
            <div class="ri-title">Hanya Yanagihara on structure and grief</div>
            <span class="ri-date">May 6, 2025</span>
          </div>
          <div class="recent-item">
            <span class="ri-issue">Issue 44 · Essay</span>
            <div class="ri-title">The Myth of the Second Brain</div>
            <span class="ri-date">Apr 22, 2025</span>
          </div>
          <div class="recent-item">
            <span class="ri-issue">Issue 43 · Review</span>
            <div class="ri-title">The Hours, re-read in 2025</div>
            <span class="ri-date">Apr 8, 2025</span>
          </div>
        </div>

        <div class="sidebar-block">
          <div class="sb-label">Topics</div>
          <div class="tag-cloud">
            <button class="tag active" type="button">Technology</button>
            <button class="tag" type="button">Culture</button>
            <button class="tag" type="button">Media</button>
            <button class="tag" type="button">Writing</button>
            <button class="tag" type="button">Books</button>
            <button class="tag" type="button">Politics</button>
            <button class="tag" type="button">Labour</button>
            <button class="tag" type="button">Cities</button>
            <button class="tag" type="button">Science</button>
          </div>
        </div>

        <div class="sidebar-block last">
          <div class="sb-label">Reading time</div>
          <div class="reading-time">
            <div>This issue: <strong>~34 minutes</strong></div>
            <div>Feature essay: <strong>14 min</strong></div>
            <div>All articles: <strong>8 pieces</strong></div>
          </div>
        </div>

      </aside>

    </div>

  </div>
</section>
```

**CSS:**
```css
/* ─── 07 Long Read Editorial — newsletter-style three-column ──── */
@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Schibsted+Grotesk:ital,wght@0,400;0,500;0,700;0,900;1,400&display=swap');

.br-lre {
  --br-lre-bg: #f7f4ee;
  --br-lre-ink: #0c0c0a;
  --br-lre-muted: #6b6860;
  --br-lre-yellow: #f0e614;
  --br-lre-red: #d41c00;
  --br-lre-rule: 1px solid #0c0c0a;

  position: relative;
  width: 100%;
  height: 820px;
  background: var(--br-lre-bg);
  color: var(--br-lre-ink);
  font-family: 'Schibsted Grotesk', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  overflow: hidden;
  box-sizing: border-box;
}

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

.br-lre .card {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Masthead */
.br-lre .masthead {
  border-bottom: 3px solid var(--br-lre-ink);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 32px;
  height: 52px;
  flex-shrink: 0;
}
.br-lre .masthead-left { font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: var(--br-lre-muted); }
.br-lre .masthead-center {
  font-family: 'Libre Baskerville', Georgia, serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.5px;
  border-left: var(--br-lre-rule);
  border-right: var(--br-lre-rule);
  padding: 0 28px;
  height: 100%;
  display: flex;
  align-items: center;
  white-space: nowrap;
}
.br-lre .masthead-right {
  text-align: right;
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--br-lre-muted);
}

/* Nav */
.br-lre .nav-strip {
  border-bottom: var(--br-lre-rule);
  display: flex;
  justify-content: center;
  gap: 0;
  height: 32px;
  flex-shrink: 0;
}
.br-lre .nav-item {
  font-family: 'Schibsted Grotesk', sans-serif;
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  padding: 0 20px;
  display: flex;
  align-items: center;
  border-left: var(--br-lre-rule);
  background: transparent;
  cursor: pointer;
  color: var(--br-lre-muted);
  transition: background 0.1s, color 0.1s;
  white-space: nowrap;
}
.br-lre .nav-item:last-child { border-right: var(--br-lre-rule); }
.br-lre .nav-item:hover { background: var(--br-lre-ink); color: var(--br-lre-bg); }
.br-lre .nav-item.active { background: var(--br-lre-yellow); color: var(--br-lre-ink); font-weight: 700; }

/* Main grid */
.br-lre .content-grid {
  display: grid;
  grid-template-columns: 200px 1fr 260px;
  flex: 1;
  min-height: 0;
}

/* TOC */
.br-lre .toc {
  border-right: var(--br-lre-rule);
  padding: 28px 20px;
  overflow: hidden;
}
.br-lre .toc-head {
  font-size: 9px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--br-lre-muted);
  border-bottom: var(--br-lre-rule);
  padding-bottom: 10px;
  margin-bottom: 16px;
}
.br-lre .toc-list { list-style: none; display: flex; flex-direction: column; }
.br-lre .toc-item {
  border-bottom: 1px solid #e0dcd5;
  padding: 9px 0;
  cursor: pointer;
}
.br-lre .toc-num {
  font-family: 'Libre Baskerville', serif;
  font-size: 9px;
  color: var(--br-lre-muted);
  display: block;
  margin-bottom: 3px;
  font-style: italic;
}
.br-lre .toc-title {
  font-size: 11px;
  line-height: 1.35;
  color: var(--br-lre-ink);
  font-weight: 500;
}
.br-lre .toc-item:hover .toc-title { text-decoration: underline; text-underline-offset: 3px; }
.br-lre .toc-item.featured .toc-title {
  font-weight: 700;
  background: var(--br-lre-yellow);
  padding: 1px 4px;
  margin: 0 -4px;
}
.br-lre .toc-section-label {
  font-size: 8px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #bbb;
  margin: 14px 0 6px;
}

/* Article */
.br-lre .article-col {
  border-right: var(--br-lre-rule);
  overflow-y: auto;
  padding: 36px 48px 36px 44px;
}
.br-lre .article-col::-webkit-scrollbar { width: 6px; }
.br-lre .article-col::-webkit-scrollbar-thumb { background: #ccc; }

.br-lre .article-label {
  font-size: 9px;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: var(--br-lre-red);
  font-weight: 700;
  margin-bottom: 14px;
}

.br-lre .article-h1 {
  font-family: 'Libre Baskerville', serif;
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--br-lre-ink);
  margin-bottom: 20px;
  font-weight: 700;
}
.br-lre .article-h1 em { font-style: italic; color: var(--br-lre-muted); }

.br-lre .article-deck {
  font-size: 14px;
  line-height: 1.65;
  color: var(--br-lre-muted);
  border-left: 4px solid var(--br-lre-ink);
  padding-left: 16px;
  margin-bottom: 24px;
  font-style: italic;
  font-family: 'Libre Baskerville', serif;
}

.br-lre .byline {
  display: flex;
  align-items: center;
  border-top: var(--br-lre-rule);
  border-bottom: var(--br-lre-rule);
  margin-bottom: 28px;
  font-size: 10px;
  flex-wrap: wrap;
}
.br-lre .byline-cell {
  padding: 8px 14px;
  border-right: var(--br-lre-rule);
  letter-spacing: 1px;
  flex: 1;
  min-width: 120px;
}
.br-lre .byline-cell:last-child { border-right: none; }
.br-lre .byline-cell strong { display: block; font-size: 11px; color: var(--br-lre-ink); margin-bottom: 1px; font-weight: 700; }
.br-lre .byline-cell span { color: var(--br-lre-muted); }

.br-lre .dropcap::first-letter {
  font-family: 'Libre Baskerville', serif;
  font-size: 5.4em;
  font-weight: 700;
  float: left;
  line-height: 0.78;
  padding-right: 10px;
  margin-top: 4px;
  color: var(--br-lre-ink);
}

.br-lre .body-p {
  font-size: 14px;
  line-height: 1.85;
  color: var(--br-lre-ink);
  margin-bottom: 18px;
  font-family: 'Libre Baskerville', serif;
}
.br-lre .body-p em { font-style: italic; }

.br-lre .pull-quote {
  margin: 28px -20px;
  padding: 20px 24px;
  background: var(--br-lre-yellow);
  border-left: 6px solid var(--br-lre-ink);
}
.br-lre .pull-quote p {
  font-family: 'Libre Baskerville', serif;
  font-size: 20px;
  line-height: 1.35;
  font-style: italic;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--br-lre-ink);
  margin-bottom: 8px;
}
.br-lre .pull-quote cite {
  font-size: 9px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--br-lre-muted);
  font-style: normal;
}

.br-lre .article-h2 {
  font-family: 'Schibsted Grotesk', sans-serif;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--br-lre-ink);
  margin: 28px 0 12px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.br-lre .article-h2::before {
  content: '';
  flex: 0 0 40px;
  height: 2px;
  background: var(--br-lre-ink);
  display: block;
}

.br-lre .footnote {
  font-size: 11px;
  font-family: 'Libre Baskerville', serif;
  font-style: italic;
  color: var(--br-lre-muted);
  border-top: 1px solid #ddd;
  padding-top: 10px;
  margin-top: 10px;
  line-height: 1.6;
}
.br-lre sup {
  font-size: 9px;
  color: var(--br-lre-red);
  font-style: normal;
  font-family: 'Schibsted Grotesk', sans-serif;
  vertical-align: super;
}

/* Sidebar */
.br-lre .sidebar {
  padding: 24px 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.br-lre .sidebar::-webkit-scrollbar { width: 4px; }
.br-lre .sidebar::-webkit-scrollbar-thumb { background: #ddd; }

.br-lre .sidebar-block {
  border-bottom: var(--br-lre-rule);
  padding: 18px 0;
}
.br-lre .sidebar-block:first-child { padding-top: 0; }
.br-lre .sidebar-block.last { border: none; }
.br-lre .sb-label {
  font-size: 8px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--br-lre-muted);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.br-lre .sb-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #ddd;
}

.br-lre .subscribe-form { display: flex; flex-direction: column; gap: 6px; }
.br-lre .sub-input {
  border: 1.5px solid var(--br-lre-ink);
  background: var(--br-lre-bg);
  font-family: 'Schibsted Grotesk', sans-serif;
  font-size: 11px;
  padding: 8px 10px;
  outline: none;
  color: var(--br-lre-ink);
  width: 100%;
}
.br-lre .sub-input::placeholder { color: #bbb; }
.br-lre .sub-input:focus { background: var(--br-lre-yellow); }
.br-lre .sub-btn {
  background: var(--br-lre-ink);
  color: var(--br-lre-bg);
  border: none;
  font-family: 'Schibsted Grotesk', sans-serif;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 3px;
  text-transform: uppercase;
  padding: 9px 14px;
  cursor: pointer;
  width: 100%;
  transition: background 0.1s;
}
.br-lre .sub-btn:hover { background: var(--br-lre-red); }
.br-lre .sub-note { font-size: 9px; color: var(--br-lre-muted); line-height: 1.5; margin-top: 8px; }
.br-lre .sub-count { font-size: 10px; color: var(--br-lre-ink); font-weight: 700; margin-bottom: 10px; }

.br-lre .stat-row {
  display: flex;
  border: var(--br-lre-rule);
  margin-bottom: 10px;
}
.br-lre .stat-cell {
  flex: 1;
  padding: 8px 10px;
  border-right: var(--br-lre-rule);
  text-align: center;
}
.br-lre .stat-cell:last-child { border-right: none; }
.br-lre .stat-val { font-weight: 900; font-size: 18px; display: block; }
.br-lre .stat-lab { font-size: 8px; letter-spacing: 1px; color: var(--br-lre-muted); text-transform: uppercase; }

.br-lre .recent-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 0;
  border-bottom: 1px solid #e8e4dd;
  cursor: pointer;
}
.br-lre .recent-item:last-child { border-bottom: none; }
.br-lre .ri-issue { font-size: 8px; letter-spacing: 2px; color: var(--br-lre-muted); text-transform: uppercase; }
.br-lre .ri-title { font-size: 11px; font-family: 'Libre Baskerville', serif; line-height: 1.35; }
.br-lre .ri-title:hover { text-decoration: underline; }
.br-lre .ri-date { font-size: 9px; color: var(--br-lre-muted); }

.br-lre .tag-cloud { display: flex; flex-wrap: wrap; gap: 4px; }
.br-lre .tag {
  font-family: 'Schibsted Grotesk', sans-serif;
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  border: 1px solid var(--br-lre-ink);
  background: transparent;
  padding: 3px 8px;
  cursor: pointer;
  color: var(--br-lre-ink);
  transition: all 0.1s;
}
.br-lre .tag:hover, .br-lre .tag.active { background: var(--br-lre-ink); color: var(--br-lre-bg); }

.br-lre .reading-time { font-size: 11px; color: var(--br-lre-muted); line-height: 2; }
.br-lre .reading-time strong { color: var(--br-lre-ink); }

@media (max-width: 900px) {
  .br-lre .content-grid { grid-template-columns: 1fr; }
  .br-lre .toc, .br-lre .sidebar { border-right: none; border-bottom: var(--br-lre-rule); }
  .br-lre .article-col { border-right: none; padding: 28px 24px; }
  .br-lre .masthead-center { font-size: 18px; padding: 0 16px; }
  .br-lre .pull-quote { margin: 22px 0; }
}
```

### 08. Streetwear Catalog

**Type:** Pure CSS
**Description:** A stark product catalog for a fictional high-concept fashion label — the kind that charges $1,240 for a coat and means it. Identity bar anchors with the brand name in tracked Syncopate caps, a season/collection label, and a righthand bag counter with a red notification dot. The filter bar is a raw horizontal strip of categories separated by hairlines; active state inverts to full black. The 4×2 product grid uses exposed 1px borders as the only structural language. Each card carries a CSS-sculpted garment silhouette (jacket lapels, trouser legs, hood bump, bag clasp) built entirely from geometric divs — no images. Hover reveals a size strip across the top and a quick-add bar sliding up from the bottom. Label tape uses three states: black for NEW, grey for LTD, red for SALE. The featured coat spans two columns with a giant ghost brand mark at 4% opacity. Familjen Grotesk + Syncopate. Best for fashion e-commerce, design-led product catalogs, lookbook-style stores.

**HTML:**
```html
<section class="br-stw" aria-label="Streetwear catalog demo">
  <div class="card">

    <div class="id-bar">
      <div class="id-brand">VCNM</div>
      <div class="id-season">SS25 — Void Collection</div>
      <div class="id-meta">
        <button class="id-meta-item" type="button">Search</button>
        <button class="id-meta-item" type="button">Account</button>
        <button class="id-meta-item" type="button">Stockists</button>
        <button class="id-meta-item cart" type="button">
          Bag
          <span class="cart-count">2</span>
        </button>
      </div>
    </div>

    <div class="filter-bar">
      <div class="filter-label">Filter:</div>
      <button class="filter-pill active" type="button">All</button>
      <button class="filter-pill" type="button">Outerwear</button>
      <button class="filter-pill" type="button">Tops</button>
      <button class="filter-pill" type="button">Bottoms</button>
      <button class="filter-pill" type="button">Footwear</button>
      <button class="filter-pill" type="button">Accessories</button>
      <button class="filter-pill" type="button">Archive</button>
      <div class="filter-right">
        <select class="sort-select" aria-label="Sort">
          <option>Newest</option>
          <option>Price: Low→High</option>
          <option>Price: High→Low</option>
        </select>
        <div class="count-tag">24 pieces</div>
      </div>
    </div>

    <div class="product-grid">

      <article class="product product-tall">
        <div class="product-img p-dark">
          <div class="img-shape">
            <div class="shape-jacket-body"></div>
            <div class="shape-lapel-l"></div>
            <div class="shape-lapel-r"></div>
          </div>
          <div class="product-label-tape new">New</div>
          <div class="size-peek">
            <span class="sz">XS</span><span class="sz">S</span><span class="sz">M</span><span class="sz out">L</span><span class="sz">XL</span>
          </div>
          <div class="drag-hint">VIEW →</div>
          <div class="quick-add">+ QUICK ADD</div>
        </div>
        <div class="product-info">
          <div class="p-cat">Outerwear</div>
          <div class="p-name">Deconstructed Field Jacket</div>
          <div class="p-bottom">
            <div><span class="p-price">$680</span></div>
            <span class="p-ref">REF.SS25-OW-04</span>
          </div>
        </div>
      </article>

      <article class="product">
        <div class="product-img p-cream">
          <div class="img-shape">
            <div class="shape-shirt"></div>
            <div class="shape-pocket"></div>
          </div>
          <div class="size-peek">
            <span class="sz">XS</span><span class="sz">S</span><span class="sz">M</span><span class="sz">L</span>
          </div>
          <div class="drag-hint">VIEW →</div>
          <div class="quick-add">+ QUICK ADD</div>
        </div>
        <div class="product-info">
          <div class="p-cat">Tops</div>
          <div class="p-name">Raw Edge Shirt</div>
          <div class="p-bottom">
            <div><span class="p-price">$210</span></div>
            <span class="p-ref">SS25-TP-11</span>
          </div>
        </div>
      </article>

      <article class="product featured">
        <div class="product-img p-deep">
          <div class="img-shape">
            <div class="shape-coat-body"></div>
            <div class="shape-coat-shoulders"></div>
          </div>
          <div class="ghost-brand">VCNM</div>
          <div class="product-label-tape ltd">Ltd. Ed.</div>
          <div class="size-peek on-dark">
            <span class="sz dark-sz">XS</span>
            <span class="sz dark-sz">S</span>
            <span class="sz dark-sz out">M</span>
            <span class="sz dark-sz">L</span>
          </div>
          <div class="quick-add invert">+ QUICK ADD</div>
        </div>
        <div class="product-info featured-info">
          <div class="p-cat">Outerwear · Limited Edition · 40 pieces</div>
          <div class="p-name">Overlock Maxi Coat — Void Black</div>
          <div><span class="p-price big">$1,240</span></div>
          <span class="p-ref ref-right">SS25-OW-01-LTD</span>
        </div>
      </article>

      <article class="product">
        <div class="product-img p-mid">
          <div class="img-shape">
            <div class="shape-trouser-l"></div>
            <div class="shape-trouser-r"></div>
            <div class="shape-trouser-waist"></div>
          </div>
          <div class="size-peek">
            <span class="sz">28</span><span class="sz">30</span><span class="sz out">32</span><span class="sz">34</span>
          </div>
          <div class="drag-hint">VIEW →</div>
          <div class="quick-add">+ QUICK ADD</div>
        </div>
        <div class="product-info">
          <div class="p-cat">Bottoms</div>
          <div class="p-name">Technical Cargo Pant</div>
          <div class="p-bottom">
            <div><span class="p-price sale">$295</span><span class="p-price-orig">$420</span></div>
            <span class="p-ref">SS25-BT-03</span>
          </div>
        </div>
      </article>

      <article class="product">
        <div class="product-img p-darker">
          <div class="img-shape">
            <div class="shape-hoodie"></div>
            <div class="shape-hood"></div>
            <div class="shape-pouch"></div>
          </div>
          <div class="product-label-tape new">New</div>
          <div class="size-peek on-dark">
            <span class="sz dark-sz">S</span>
            <span class="sz dark-sz">M</span>
            <span class="sz dark-sz">L</span>
            <span class="sz dark-sz">XL</span>
          </div>
          <div class="drag-hint">VIEW →</div>
          <div class="quick-add invert">+ QUICK ADD</div>
        </div>
        <div class="product-info">
          <div class="p-cat">Tops</div>
          <div class="p-name">Seam-Exposed Hoodie</div>
          <div class="p-bottom">
            <div><span class="p-price">$340</span></div>
            <span class="p-ref">SS25-TP-07</span>
          </div>
        </div>
      </article>

      <article class="product">
        <div class="product-img p-light">
          <div class="img-shape">
            <div class="shape-wide-l"></div>
            <div class="shape-wide-r"></div>
            <div class="shape-wide-waist"></div>
          </div>
          <div class="size-peek">
            <span class="sz">XS</span><span class="sz">S</span><span class="sz">M</span><span class="sz out">L</span>
          </div>
          <div class="drag-hint">VIEW →</div>
          <div class="quick-add">+ QUICK ADD</div>
        </div>
        <div class="product-info">
          <div class="p-cat">Bottoms</div>
          <div class="p-name">Wide-Leg Twill Trouser</div>
          <div class="p-bottom">
            <div><span class="p-price">$380</span></div>
            <span class="p-ref">SS25-BT-06</span>
          </div>
        </div>
      </article>

      <article class="product">
        <div class="product-img p-dark">
          <div class="img-shape">
            <div class="shape-bag-body"></div>
            <div class="shape-bag-handle"></div>
            <div class="shape-bag-clasp"></div>
          </div>
          <div class="product-label-tape sale">Sale</div>
          <div class="size-peek on-dark">
            <span class="sz dark-sz">OS</span>
          </div>
          <div class="drag-hint">VIEW →</div>
          <div class="quick-add invert">+ QUICK ADD</div>
        </div>
        <div class="product-info">
          <div class="p-cat">Accessories</div>
          <div class="p-name">Structured Tote — Void</div>
          <div class="p-bottom">
            <div><span class="p-price sale">$195</span><span class="p-price-orig">$280</span></div>
            <span class="p-ref">SS25-AC-02</span>
          </div>
        </div>
      </article>

    </div>

  </div>
</section>
```

**CSS:**
```css
/* ─── 08 Streetwear Catalog — VCNM SS25 Void Collection ──── */
@import url('https://fonts.googleapis.com/css2?family=Familjen+Grotesk:ital,wght@0,400;0,700;1,400&family=Syncopate:wght@400;700&display=swap');

.br-stw {
  --br-stw-bg: #f0ede8;
  --br-stw-ink: #0a0a0a;
  --br-stw-mid: #888;
  --br-stw-pale: #d8d4ce;
  --br-stw-red: #cc1100;
  --br-stw-rule: 1px solid #0a0a0a;

  position: relative;
  width: 100%;
  height: 820px;
  background: var(--br-stw-bg);
  color: var(--br-stw-ink);
  font-family: 'Familjen Grotesk', system-ui, sans-serif;
  overflow: hidden;
  box-sizing: border-box;
}

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

.br-stw .card {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Identity bar */
.br-stw .id-bar {
  border-bottom: 3px solid var(--br-stw-ink);
  display: flex;
  align-items: stretch;
  height: 44px;
  flex-shrink: 0;
}
.br-stw .id-brand {
  font-family: 'Syncopate', sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 6px;
  text-transform: uppercase;
  padding: 0 28px;
  display: flex;
  align-items: center;
  border-right: 3px solid var(--br-stw-ink);
  white-space: nowrap;
}
.br-stw .id-season {
  font-size: 9px;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: var(--br-stw-mid);
  padding: 0 20px;
  display: flex;
  align-items: center;
  border-right: var(--br-stw-rule);
}
.br-stw .id-meta { display: flex; align-items: center; gap: 0; margin-left: auto; }
.br-stw .id-meta-item {
  background: transparent;
  border: none;
  border-left: var(--br-stw-rule);
  padding: 0 18px;
  font-family: 'Familjen Grotesk', sans-serif;
  font-size: 9px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--br-stw-mid);
  height: 100%;
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
}
.br-stw .id-meta-item:hover { background: var(--br-stw-ink); color: var(--br-stw-bg); }
.br-stw .id-meta-item.cart { color: var(--br-stw-ink); font-weight: 700; }
.br-stw .cart-count {
  background: var(--br-stw-red);
  color: white;
  font-size: 8px;
  width: 16px; height: 16px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 6px;
  font-weight: 700;
}

/* Filter bar */
.br-stw .filter-bar {
  border-bottom: var(--br-stw-rule);
  display: flex;
  align-items: stretch;
  height: 36px;
  overflow-x: auto;
  flex-shrink: 0;
}
.br-stw .filter-bar::-webkit-scrollbar { display: none; }
.br-stw .filter-label {
  font-size: 8px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--br-stw-mid);
  padding: 0 16px;
  border-right: var(--br-stw-rule);
  display: flex;
  align-items: center;
  flex-shrink: 0;
  white-space: nowrap;
}
.br-stw .filter-pill {
  background: transparent;
  border: none;
  border-right: var(--br-stw-rule);
  font-family: 'Familjen Grotesk', sans-serif;
  font-size: 9px;
  letter-spacing: 3px;
  text-transform: uppercase;
  padding: 0 16px;
  display: flex;
  align-items: center;
  cursor: pointer;
  color: var(--br-stw-mid);
  transition: all 0.1s;
  white-space: nowrap;
  flex-shrink: 0;
}
.br-stw .filter-pill:hover { background: var(--br-stw-ink); color: var(--br-stw-bg); }
.br-stw .filter-pill.active { background: var(--br-stw-ink); color: var(--br-stw-bg); }
.br-stw .filter-right { margin-left: auto; display: flex; align-items: stretch; flex-shrink: 0; }
.br-stw .sort-select {
  background: transparent;
  border: none;
  border-left: var(--br-stw-rule);
  font-family: 'Familjen Grotesk', sans-serif;
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--br-stw-mid);
  padding: 0 16px;
  outline: none;
  cursor: pointer;
  -webkit-appearance: none;
}
.br-stw .count-tag {
  font-size: 8px;
  letter-spacing: 3px;
  color: var(--br-stw-mid);
  border-left: var(--br-stw-rule);
  padding: 0 16px;
  display: flex;
  align-items: center;
  white-space: nowrap;
}

/* Product grid */
.br-stw .product-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 1fr 1fr;
  overflow: hidden;
  min-height: 0;
}

.br-stw .product {
  border-right: var(--br-stw-rule);
  border-bottom: var(--br-stw-rule);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  cursor: pointer;
}
.br-stw .product:nth-child(4n) { border-right: none; }
.br-stw .product:nth-child(n+5) { border-bottom: none; }
.br-stw .product.product-tall { grid-row: 1 / 3; }
.br-stw .product.featured {
  grid-column: 3 / 5;
  grid-row: 1 / 2;
  border-right: none;
}

/* Image zone backgrounds */
.br-stw .product-img {
  flex: 1;
  position: relative;
  overflow: hidden;
  background: var(--br-stw-pale);
}
.br-stw .p-dark { background: #1a1a1a; }
.br-stw .p-cream { background: #e8e4de; }
.br-stw .p-deep { background: #0d0d0d; }
.br-stw .p-mid { background: #c8c4bc; }
.br-stw .p-darker { background: #111; }
.br-stw .p-light { background: #e0dbd4; }

.br-stw .img-shape {
  position: absolute;
  inset: 0;
}

/* Jacket silhouette */
.br-stw .shape-jacket-body {
  position: absolute;
  width: 50%;
  height: 75%;
  background: #333;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}
.br-stw .shape-lapel-l {
  position: absolute;
  width: 18%;
  height: 32%;
  background: #222;
  top: 14%;
  left: 24%;
  transform: skewX(-8deg);
}
.br-stw .shape-lapel-r {
  position: absolute;
  width: 18%;
  height: 32%;
  background: #222;
  top: 14%;
  right: 24%;
  transform: skewX(8deg);
}

/* Shirt */
.br-stw .shape-shirt {
  position: absolute;
  width: 55%;
  height: 68%;
  background: #aaa8a2;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}
.br-stw .shape-pocket {
  position: absolute;
  width: 12%;
  height: 10%;
  background: #b5b2ac;
  top: 24%;
  left: 36%;
  border: 1px solid #999;
}

/* Featured coat */
.br-stw .shape-coat-body {
  position: absolute;
  width: 36%;
  height: 78%;
  background: #1a1a1a;
  top: 9%;
  left: 50%;
  transform: translateX(-50%);
}
.br-stw .shape-coat-shoulders {
  position: absolute;
  width: 52%;
  height: 14%;
  background: #1a1a1a;
  top: 9%;
  left: 50%;
  transform: translateX(-50%);
}
.br-stw .ghost-brand {
  position: absolute;
  bottom: 20px;
  left: 20px;
  font-family: 'Syncopate', sans-serif;
  font-size: 56px;
  font-weight: 700;
  color: rgba(255,255,255,0.04);
  line-height: 1;
  letter-spacing: -2px;
  pointer-events: none;
}

/* Trousers */
.br-stw .shape-trouser-l {
  position: absolute;
  width: 20%;
  height: 60%;
  background: #9a9590;
  bottom: 8%;
  left: 30%;
}
.br-stw .shape-trouser-r {
  position: absolute;
  width: 20%;
  height: 60%;
  background: #9a9590;
  bottom: 8%;
  right: 30%;
}
.br-stw .shape-trouser-waist {
  position: absolute;
  width: 44%;
  height: 18%;
  background: #9a9590;
  top: 18%;
  left: 28%;
}

/* Hoodie */
.br-stw .shape-hoodie {
  position: absolute;
  width: 58%;
  height: 70%;
  background: #1a1a1a;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}
.br-stw .shape-hood {
  position: absolute;
  width: 34%;
  height: 16%;
  background: #1a1a1a;
  border-radius: 50% 50% 0 0;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
}
.br-stw .shape-pouch {
  position: absolute;
  width: 28%;
  height: 11%;
  background: #222;
  bottom: 26%;
  left: 50%;
  transform: translateX(-50%);
  border: 1px solid #333;
}

/* Wide-leg */
.br-stw .shape-wide-l {
  position: absolute;
  width: 22%;
  height: 56%;
  background: #c4c0ba;
  bottom: 8%;
  left: 23%;
  transform: skewX(4deg);
}
.br-stw .shape-wide-r {
  position: absolute;
  width: 22%;
  height: 56%;
  background: #c4c0ba;
  bottom: 8%;
  right: 23%;
  transform: skewX(-4deg);
}
.br-stw .shape-wide-waist {
  position: absolute;
  width: 46%;
  height: 20%;
  background: #c4c0ba;
  top: 17%;
  left: 27%;
}

/* Bag */
.br-stw .shape-bag-body {
  position: absolute;
  width: 50%;
  height: 42%;
  background: #2a2a2a;
  top: 26%;
  left: 25%;
}
.br-stw .shape-bag-handle {
  position: absolute;
  width: 4%;
  height: 18%;
  background: #333;
  top: 10%;
  left: 48%;
}
.br-stw .shape-bag-clasp {
  position: absolute;
  width: 12%;
  height: 5%;
  background: #555;
  top: 24%;
  left: 44%;
  border: 1px solid #666;
}

/* Label tape */
.br-stw .product-label-tape {
  position: absolute;
  top: 12px;
  left: 0;
  background: var(--br-stw-red);
  color: white;
  font-size: 8px;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-weight: 700;
  padding: 3px 10px;
  z-index: 2;
}
.br-stw .product-label-tape.new { background: var(--br-stw-ink); }
.br-stw .product-label-tape.ltd { background: #666; }
.br-stw .product-label-tape.sale { background: var(--br-stw-red); }

/* Quick add */
.br-stw .quick-add {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: var(--br-stw-ink);
  color: var(--br-stw-bg);
  font-size: 9px;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-weight: 700;
  padding: 10px;
  text-align: center;
  transform: translateY(100%);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
}
.br-stw .quick-add.invert { background: white; color: var(--br-stw-ink); }
.br-stw .product:hover .quick-add { transform: translateY(0); }

/* Size peek */
.br-stw .size-peek {
  position: absolute;
  top: 10px; right: 10px;
  display: flex;
  gap: 3px;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 2;
}
.br-stw .product:hover .size-peek { opacity: 1; }
.br-stw .sz {
  background: var(--br-stw-bg);
  font-size: 7px;
  letter-spacing: 1px;
  padding: 2px 5px;
  color: var(--br-stw-ink);
  border: 1px solid var(--br-stw-ink);
  font-weight: 700;
}
.br-stw .sz.out { background: transparent; color: var(--br-stw-mid); border-color: var(--br-stw-mid); text-decoration: line-through; }
.br-stw .sz.dark-sz {
  background: rgba(255,255,255,0.08);
  color: #fff;
  border-color: #333;
}
.br-stw .sz.dark-sz.out { background: transparent; color: #555; border-color: #333; }

/* Drag hint */
.br-stw .drag-hint {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Syncopate', sans-serif;
  font-size: 8px;
  letter-spacing: 4px;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
  text-align: center;
  color: rgba(255,255,255,0.7);
  mix-blend-mode: difference;
}
.br-stw .product:hover .drag-hint { opacity: 0.5; }

/* Info strip */
.br-stw .product-info {
  padding: 10px 12px 12px;
  border-top: var(--br-stw-rule);
  background: var(--br-stw-bg);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.br-stw .p-cat {
  font-size: 7px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--br-stw-mid);
}
.br-stw .p-name {
  font-family: 'Syncopate', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  line-height: 1.2;
}
.br-stw .p-bottom {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 2px;
}
.br-stw .p-price {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.5px;
}
.br-stw .p-price.big { font-size: 22px; }
.br-stw .p-price.sale { color: var(--br-stw-red); }
.br-stw .p-price-orig {
  font-size: 10px;
  color: var(--br-stw-mid);
  text-decoration: line-through;
  margin-left: 4px;
}
.br-stw .p-ref {
  font-size: 8px;
  color: var(--br-stw-mid);
  letter-spacing: 1px;
}
.br-stw .p-ref.ref-right { text-align: right; display: block; }

.br-stw .featured .p-name { font-size: 14px; }
.br-stw .featured-info { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 0 16px; }
.br-stw .featured-info .p-cat { grid-column: 1 / -1; }

@media (max-width: 900px) {
  .br-stw .product-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(4, minmax(220px, 1fr));
  }
  .br-stw .product:nth-child(4n) { border-right: var(--br-stw-rule); }
  .br-stw .product:nth-child(2n) { border-right: none; }
  .br-stw .product:nth-child(n+5) { border-bottom: var(--br-stw-rule); }
  .br-stw .product.product-tall { grid-row: auto; }
  .br-stw .product.featured { grid-column: 1 / 3; grid-row: auto; border-right: none; }
  .br-stw .id-meta-item:not(.cart) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .br-stw .quick-add, .br-stw .size-peek, .br-stw .drag-hint { transition: none; }
}
```

---
## 22 CSS Button Group Designs

URL: https://codefronts.com/components/css-button-groups/
Description: 22 dynamic CSS button groups with motion-driven interactions — plasma loops, holographic gradients, magnetic discs, wormhole tabs, particle aurora. Pure CSS or light JS, copy-paste ready.
Demo count: 22

### 01. Liquid Mercury

**Type:** Pure CSS
**Description:** Three options on a viscous mercury rail. The thumb morphs its border-radius asymmetrically as it slides — the kind of animation curve a human would never hand-author.

**HTML:**
```html
<fieldset class="cbgp-mercury" role="group" aria-label="Billing period">
  <legend class="cbgp-sr">Billing period</legend>
  <input type="radio" name="cbgp-mercury" id="cbgp-mercury-1" checked />
  <label for="cbgp-mercury-1">Monthly</label>
  <input type="radio" name="cbgp-mercury" id="cbgp-mercury-2" />
  <label for="cbgp-mercury-2">Yearly</label>
  <input type="radio" name="cbgp-mercury" id="cbgp-mercury-3" />
  <label for="cbgp-mercury-3">Forever</label>
  <span class="cbgp-mercury-thumb" aria-hidden="true"></span>
</fieldset>
```

**CSS:**
```css
.cbgp-sr {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.cbgp-mercury {
  display: inline-flex; position: relative; padding: 4px;
  background: radial-gradient(ellipse at 30% 30%, #1a1a2a 0%, #0a0a14 100%);
  border: 1px solid rgba(220,225,230,0.08);
  border-radius: 999px;
  box-shadow:
    inset 0 2px 6px rgba(0,0,0,0.5),
    0 1px 0 rgba(255,255,255,0.04);
}
.cbgp-mercury input { appearance: none; -webkit-appearance: none; position: absolute; opacity: 0; }
.cbgp-mercury label {
  flex: 1 1 0; min-width: 88px;
  position: relative; z-index: 1;
  padding: 9px 18px; text-align: center;
  font: 700 11px/1 ui-monospace, monospace;
  letter-spacing: 0.18em;
  color: rgba(220,225,230,0.5);
  cursor: pointer; transition: color 0.4s;
  border-radius: 999px;
}
.cbgp-mercury input:checked + label { color: #0a0a14; }
.cbgp-mercury-thumb {
  position: absolute; top: 4px; bottom: 4px; left: 4px;
  width: calc(33.333% - 2.667px);
  background:
    radial-gradient(ellipse at 30% 30%, #f5f5fa 0%, #cad3da 50%, #6a7480 100%);
  border-radius: 60% 40% 50% 50% / 50% 50% 40% 60%;
  z-index: 0;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.6),
    inset 0 -2px 4px rgba(0,0,0,0.25),
    0 2px 8px rgba(220,225,230,0.18);
  transition:
    transform 0.55s cubic-bezier(.68,-0.4,.32,1.4),
    border-radius 0.6s cubic-bezier(.65,0,.35,1);
}
#cbgp-mercury-2:checked ~ .cbgp-mercury-thumb {
  transform: translateX(100%);
  border-radius: 50% 60% 50% 50% / 60% 40% 60% 40%;
}
#cbgp-mercury-3:checked ~ .cbgp-mercury-thumb {
  transform: translateX(200%);
  border-radius: 40% 60% 60% 40% / 50% 50% 50% 50%;
}
```

### 02. Subgrid Beam

**Type:** Pure CSS
**Description:** Three actions on a single subgrid track with a luminous beam underline that physically moves between buttons on hover, drawn with a single shared pseudo-element.

**HTML:**
```html
<div class="cbgp-beam" role="group" aria-label="Document actions">
  <button type="button">Edit</button>
  <button type="button">Duplicate</button>
  <button type="button">Archive</button>
</div>
```

**CSS:**
```css
.cbgp-beam {
  display: inline-grid;
  grid-template-columns: repeat(3, minmax(96px, 1fr));
  position: relative;
  background: rgba(8,10,18,0.85);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 8px 22px rgba(0,0,0,0.45);
}
.cbgp-beam::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 33.333%; height: 2px;
  background: linear-gradient(90deg, transparent, #00ffe0 30%, #ff5af1 70%, transparent);
  filter: blur(0.4px);
  transition: transform 0.45s cubic-bezier(.65,0,.35,1);
  pointer-events: none;
}
.cbgp-beam button {
  padding: 11px 18px;
  border: 0; cursor: pointer;
  background: transparent;
  color: rgba(220,225,230,0.65);
  font: 600 12px/1 ui-sans-serif, system-ui;
  letter-spacing: 0.04em;
  transition: color 0.25s, background 0.25s;
}
.cbgp-beam button + button { border-left: 1px solid rgba(255,255,255,0.04); }
.cbgp-beam button:hover { color: #fff; background: rgba(0,255,224,0.04); }
.cbgp-beam:has(button:nth-child(2):hover)::before { transform: translateX(100%); }
.cbgp-beam:has(button:nth-child(3):hover)::before { transform: translateX(200%); }
.cbgp-beam button:focus-visible { outline: 2px solid #00ffe0; outline-offset: -2px; }
```

### 03. Acid Tags

**Type:** Pure CSS
**Description:** Multi-select chips with an acid-green glow halo that radiates outward when checked. Each chip carries a unique pulse phase so the row feels alive without being noisy.

**HTML:**
```html
<fieldset class="cbgp-acid" role="group" aria-label="Filters">
  <legend class="cbgp-sr">Filters</legend>
  <label><input type="checkbox" checked /><span style="--ph: 0">CSS</span></label>
  <label><input type="checkbox" /><span style="--ph: 1">React</span></label>
  <label><input type="checkbox" checked /><span style="--ph: 2">TypeScript</span></label>
  <label><input type="checkbox" /><span style="--ph: 3">Astro</span></label>
</fieldset>
```

**CSS:**
```css
.cbgp-acid {
  display: inline-flex; flex-wrap: wrap; gap: 8px;
  border: 0; padding: 0; margin: 0;
}
.cbgp-acid input { appearance: none; -webkit-appearance: none; position: absolute; opacity: 0; }
.cbgp-acid label { display: inline-block; cursor: pointer; }
.cbgp-acid span {
  display: inline-block;
  padding: 7px 14px;
  background: rgba(8,10,18,0.85);
  border: 1px solid rgba(168,255,184,0.2);
  border-radius: 999px;
  color: rgba(220,225,230,0.6);
  font: 600 11px/1 ui-monospace, monospace;
  letter-spacing: 0.06em;
  position: relative;
  transition: background 0.25s, border-color 0.25s, color 0.25s, box-shadow 0.4s;
}
.cbgp-acid label:hover span { color: rgba(220,225,230,0.9); border-color: rgba(168,255,184,0.4); }
.cbgp-acid input:checked + span {
  background: rgba(60,200,90,0.12);
  border-color: #3eff7f;
  color: #c8ffd6;
  box-shadow:
    0 0 0 3px rgba(62,255,127,0.08),
    0 0 18px rgba(62,255,127,0.35);
}
.cbgp-acid input:focus-visible + span { outline: 2px solid #3eff7f; outline-offset: 2px; }
```

### 04. Quantum Split

**Type:** Pure CSS
**Description:** Primary action with a sibling menu that opens via native details/summary. The split chevron rotates 180° and the menu materialises with a clip-path reveal — no JS.

**HTML:**
```html
<div class="cbgp-quantum" role="group" aria-label="Save options">
  <button type="button" class="cbgp-quantum-main">Deploy</button>
  <details class="cbgp-quantum-menu">
    <summary aria-label="More deploy options">
      <svg viewBox="0 0 12 12" aria-hidden="true"><path d="M3 5l3 3 3-3" /></svg>
    </summary>
    <div class="cbgp-quantum-list">
      <button type="button">Deploy preview</button>
      <button type="button">Deploy and tag</button>
      <button type="button">Deploy and notify</button>
    </div>
  </details>
</div>
```

**CSS:**
```css
.cbgp-quantum {
  display: inline-flex; position: relative;
  background: linear-gradient(135deg, #0a0a14 0%, #14141d 100%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  overflow: visible;
  box-shadow: 0 8px 22px rgba(0,0,0,0.4);
}
.cbgp-quantum-main {
  padding: 11px 22px;
  border: 0; cursor: pointer;
  background: linear-gradient(135deg, rgba(0,255,224,0.18) 0%, rgba(255,90,241,0.18) 100%);
  color: #fff;
  font: 700 12px/1 ui-monospace, monospace;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-radius: 10px 0 0 10px;
  border-right: 1px solid rgba(255,255,255,0.1);
  text-shadow: 0 0 8px rgba(0,255,224,0.3);
  transition: filter 0.2s;
}
.cbgp-quantum-main:hover { filter: brightness(1.18); }
.cbgp-quantum-menu summary {
  list-style: none; cursor: pointer;
  padding: 11px 14px;
  display: flex; align-items: center;
  border-radius: 0 10px 10px 0;
  transition: background 0.18s;
}
.cbgp-quantum-menu summary::-webkit-details-marker { display: none; }
.cbgp-quantum-menu summary svg { width: 12px; height: 12px; fill: none; stroke: #00ffe0; stroke-width: 2; transition: transform 0.3s cubic-bezier(.65,0,.35,1); }
.cbgp-quantum-menu summary:hover { background: rgba(0,255,224,0.06); }
.cbgp-quantum-menu[open] summary { background: rgba(0,255,224,0.1); }
.cbgp-quantum-menu[open] summary svg { transform: rotate(180deg); }
.cbgp-quantum-list {
  position: absolute; right: 0; top: calc(100% + 6px);
  min-width: 200px;
  background: linear-gradient(135deg, #0a0a14 0%, #14141d 100%);
  border: 1px solid rgba(0,255,224,0.25);
  border-radius: 8px;
  padding: 4px;
  z-index: 10;
  box-shadow: 0 12px 32px rgba(0,0,0,0.55), 0 0 24px rgba(0,255,224,0.08);
  clip-path: inset(0 0 0 0 round 8px);
  animation: cbgp-quantum-in 0.25s cubic-bezier(.65,0,.35,1);
}
@keyframes cbgp-quantum-in {
  from { clip-path: inset(0 0 100% 0 round 8px); opacity: 0; }
  to   { clip-path: inset(0 0 0 0 round 8px);    opacity: 1; }
}
.cbgp-quantum-list button {
  display: block; width: 100%;
  padding: 9px 14px;
  border: 0; cursor: pointer;
  background: transparent;
  color: rgba(220,225,230,0.85);
  font: 500 12px/1 ui-sans-serif, system-ui;
  text-align: left;
  border-radius: 5px;
  transition: background 0.15s, color 0.15s;
}
.cbgp-quantum-list button:hover { background: rgba(0,255,224,0.08); color: #fff; }
```

### 05. Cellular Toggle

**Type:** Pure CSS
**Description:** Format toggles where checking a cell fills it with a swirling conic gradient anchored to its center. Hover prefills the conic with a faint preview.

**HTML:**
```html
<fieldset class="cbgp-cell" role="group" aria-label="Text formatting">
  <legend class="cbgp-sr">Text formatting</legend>
  <label
    ><input type="checkbox" /><span aria-label="Bold"><strong>B</strong></span></label
  >
  <label
    ><input type="checkbox" checked /><span aria-label="Italic"><em>I</em></span></label
  >
  <label
    ><input type="checkbox" /><span aria-label="Underline"><u>U</u></span></label
  >
  <label
    ><input type="checkbox" /><span aria-label="Strikethrough"><s>S</s></span></label
  >
</fieldset>
```

**CSS:**
```css
@property --cbgp-cell-a { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.cbgp-cell {
  display: inline-flex; gap: 4px;
  border: 0; padding: 6px;
  background: rgba(8,10,18,0.85);
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.05);
}
.cbgp-cell input { appearance: none; -webkit-appearance: none; position: absolute; opacity: 0; }
.cbgp-cell label { display: block; cursor: pointer; }
.cbgp-cell span {
  --cbgp-cell-a: 0deg;
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  background:
    conic-gradient(from var(--cbgp-cell-a),
      transparent 0deg, transparent 200deg,
      rgba(255,90,241,0.28) 260deg,
      rgba(0,255,224,0.32) 320deg,
      transparent 360deg),
    rgba(20,22,30,0.85);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  font: 700 14px/1 'Times New Roman', serif;
  color: rgba(220,225,230,0.6);
  transition: --cbgp-cell-a 0.55s cubic-bezier(.65,0,.35,1), color 0.25s, border-color 0.25s;
}
.cbgp-cell label:hover span { color: rgba(220,225,230,0.9); --cbgp-cell-a: 180deg; }
.cbgp-cell input:checked + span {
  --cbgp-cell-a: 360deg;
  color: #fff;
  border-color: rgba(0,255,224,0.5);
  box-shadow: 0 0 16px rgba(0,255,224,0.2);
}
.cbgp-cell input:focus-visible + span { outline: 2px solid #00ffe0; outline-offset: -2px; }
```

### 06. Pixel Matrix

**Type:** Pure CSS
**Description:** Pagination styled as a tiny LED matrix display. Each page is a "pixel cluster"; the active page lights up like a real 7-segment with phosphor glow.

**HTML:**
```html
<nav class="cbgp-pixel" aria-label="Pagination">
  <button type="button" aria-label="First page" aria-disabled="true">«</button>
  <button type="button" aria-label="Previous page" aria-disabled="true">‹</button>
  <button type="button" aria-current="page">1</button>
  <button type="button">2</button>
  <button type="button">3</button>
  <button type="button">4</button>
  <button type="button">5</button>
  <button type="button" aria-label="Next page">›</button>
  <button type="button" aria-label="Last page">»</button>
</nav>
```

**CSS:**
```css
.cbgp-pixel {
  display: inline-flex; gap: 3px;
  padding: 6px;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(0,255,224,0.06), transparent 70%),
    #050810;
  border: 1px solid rgba(0,255,224,0.15);
  border-radius: 6px;
  box-shadow: inset 0 0 12px rgba(0,255,224,0.05), 0 4px 14px rgba(0,0,0,0.5);
}
.cbgp-pixel button {
  min-width: 32px; height: 32px;
  padding: 0 8px;
  border: 1px solid rgba(0,255,224,0.18);
  background:
    radial-gradient(circle at center, rgba(0,255,224,0.06) 0%, transparent 70%),
    #0a0d18;
  color: rgba(220,225,230,0.55);
  font: 800 12px/1 ui-monospace, monospace;
  cursor: pointer;
  border-radius: 3px;
  transition: all 0.18s;
}
.cbgp-pixel button:hover {
  border-color: rgba(0,255,224,0.5);
  color: #c8fffa;
  background:
    radial-gradient(circle at center, rgba(0,255,224,0.16) 0%, transparent 70%),
    #0a0d18;
}
.cbgp-pixel button[aria-current="page"] {
  background: radial-gradient(circle at center, #00ffe0 0%, #00b8a8 70%);
  border-color: #00ffe0;
  color: #001f1c;
  box-shadow: 0 0 14px rgba(0,255,224,0.6), inset 0 0 6px rgba(255,255,255,0.4);
  text-shadow: 0 0 4px rgba(0,255,224,0.6);
}
.cbgp-pixel button[aria-disabled="true"] {
  opacity: 0.3; cursor: not-allowed;
  background: transparent; border-color: rgba(0,255,224,0.08);
}
.cbgp-pixel button[aria-disabled="true"]:hover {
  border-color: rgba(0,255,224,0.08); color: rgba(220,225,230,0.55);
}
.cbgp-pixel button:focus-visible { outline: 2px solid #00ffe0; outline-offset: 2px; }
```

### 07. Gradient Flow

**Type:** Pure CSS
**Description:** Multi-step wizard where the "done" line is a flowing gradient (not a static fill) — the light visibly travels through the completed segments toward the current step.

**HTML:**
```html
<ol class="cbgp-flow" aria-label="Checkout progress">
  <li class="is-done">
    <span class="cbgp-flow-num">1</span><span class="cbgp-flow-label">Cart</span>
  </li>
  <li class="is-done">
    <span class="cbgp-flow-num">2</span><span class="cbgp-flow-label">Address</span>
  </li>
  <li class="is-current" aria-current="step">
    <span class="cbgp-flow-num">3</span><span class="cbgp-flow-label">Payment</span>
  </li>
  <li><span class="cbgp-flow-num">4</span><span class="cbgp-flow-label">Review</span></li>
</ol>
```

**CSS:**
```css
.cbgp-flow {
  display: inline-flex; gap: 0;
  list-style: none; padding: 0; margin: 0;
}
.cbgp-flow li {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 0;
  font: 700 11px/1 ui-monospace, monospace;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(220,225,230,0.4);
  position: relative;
}
.cbgp-flow li:not(:last-child) { padding-right: 56px; }
.cbgp-flow li:not(:last-child)::after {
  content: '';
  position: absolute; right: 8px; top: 50%;
  width: 36px; height: 2px;
  background: rgba(255,255,255,0.08);
  transform: translateY(-50%);
  border-radius: 1px;
}
.cbgp-flow li.is-done::after {
  background:
    linear-gradient(90deg, #00ffe0 0%, #ff5af1 100%) 0% 0% / 200% 100%;
  animation: cbgp-flow-shift 2.4s linear infinite;
  box-shadow: 0 0 8px rgba(0,255,224,0.5);
}
@keyframes cbgp-flow-shift { 0% { background-position: 200% 0%; } 100% { background-position: 0% 0%; } }
.cbgp-flow-num {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: #0a0d18;
  border: 1.5px solid rgba(255,255,255,0.1);
  font: 800 11px/1 ui-monospace, monospace;
  color: rgba(220,225,230,0.4);
  transition: all 0.3s;
}
.cbgp-flow li.is-done .cbgp-flow-num {
  background: linear-gradient(135deg, #00ffe0, #00b8a8);
  border-color: #00ffe0;
  color: #001f1c;
  box-shadow: 0 0 10px rgba(0,255,224,0.4);
}
.cbgp-flow li.is-current .cbgp-flow-num {
  background: linear-gradient(135deg, #ff5af1, #c43cb8);
  border-color: #ff5af1;
  color: #1a0518;
  box-shadow: 0 0 0 4px rgba(255,90,241,0.18), 0 0 16px rgba(255,90,241,0.4);
  color: #fff;
}
.cbgp-flow li.is-current { color: #ff5af1; }
.cbgp-flow li.is-done    { color: rgba(0,255,224,0.85); }
@media (prefers-reduced-motion: reduce) {
  .cbgp-flow li.is-done::after { animation: none; }
}
```

### 08. Holographic Dial

**Type:** Pure CSS
**Description:** Icon segmented control where the active icon is filled with a moving conic-gradient holographic sheen. Hover shifts the gradient phase before commit.

**HTML:**
```html
<fieldset class="cbgp-holo" role="group" aria-label="View mode">
  <legend class="cbgp-sr">View mode</legend>
  <input type="radio" name="cbgp-holo" id="cbgp-holo-1" checked />
  <label for="cbgp-holo-1" aria-label="Grid view"
    ><svg viewBox="0 0 24 24" aria-hidden="true">
      <rect x="3" y="3" width="7" height="7" />
      <rect x="14" y="3" width="7" height="7" />
      <rect x="3" y="14" width="7" height="7" />
      <rect x="14" y="14" width="7" height="7" /></svg
  ></label>
  <input type="radio" name="cbgp-holo" id="cbgp-holo-2" />
  <label for="cbgp-holo-2" aria-label="List view"
    ><svg viewBox="0 0 24 24" aria-hidden="true">
      <line x1="8" y1="6" x2="21" y2="6" />
      <line x1="8" y1="12" x2="21" y2="12" />
      <line x1="8" y1="18" x2="21" y2="18" />
      <circle cx="4" cy="6" r="1" />
      <circle cx="4" cy="12" r="1" />
      <circle cx="4" cy="18" r="1" /></svg
  ></label>
  <input type="radio" name="cbgp-holo" id="cbgp-holo-3" />
  <label for="cbgp-holo-3" aria-label="Card view"
    ><svg viewBox="0 0 24 24" aria-hidden="true">
      <rect x="3" y="4" width="18" height="6" rx="1" />
      <rect x="3" y="14" width="18" height="6" rx="1" /></svg
  ></label>
</fieldset>
```

**CSS:**
```css
@property --cbgp-holo-a { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.cbgp-holo {
  display: inline-flex; gap: 0;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(8,10,18,0.85);
  border-radius: 10px;
  overflow: hidden;
  padding: 3px;
}
.cbgp-holo input { appearance: none; -webkit-appearance: none; position: absolute; opacity: 0; }
.cbgp-holo label {
  --cbgp-holo-a: 0deg;
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 40px;
  cursor: pointer;
  border-radius: 8px;
  background:
    conic-gradient(from var(--cbgp-holo-a),
      transparent 0deg, transparent 240deg,
      rgba(0,255,224,0) 260deg, rgba(0,255,224,0.3) 290deg,
      rgba(255,90,241,0.3) 320deg, rgba(255,90,241,0) 350deg,
      transparent 360deg);
  transition: --cbgp-holo-a 0.7s cubic-bezier(.65,0,.35,1), background 0.3s;
}
.cbgp-holo svg {
  width: 16px; height: 16px;
  fill: none; stroke: rgba(220,225,230,0.5);
  stroke-width: 1.8; stroke-linecap: round;
  transition: stroke 0.25s;
}
.cbgp-holo label:hover { --cbgp-holo-a: 180deg; }
.cbgp-holo label:hover svg { stroke: rgba(220,225,230,0.85); }
.cbgp-holo input:checked + label {
  --cbgp-holo-a: 360deg;
  background:
    conic-gradient(from var(--cbgp-holo-a),
      rgba(0,255,224,0.32), rgba(255,90,241,0.32),
      rgba(255,200,80,0.28), rgba(0,255,224,0.32));
  box-shadow: 0 0 14px rgba(0,255,224,0.18);
}
.cbgp-holo input:checked + label svg { stroke: #fff; }
.cbgp-holo input:focus-visible + label { outline: 2px solid #00ffe0; outline-offset: -2px; }
```

### 09. Stack Tower

**Type:** Pure CSS
**Description:** Vertical action column where each row pushes 8px deeper on hover, and the whole stack rotates 1° in 3D. SVG icons recolor with a gradient stroke.

**HTML:**
```html
<div class="cbgp-tower" role="group" aria-label="Profile actions">
  <button type="button">
    <svg viewBox="0 0 24 24" aria-hidden="true">
      <circle cx="12" cy="8" r="4" />
      <path d="M4 21a8 8 0 0 1 16 0" /></svg
    >Profile
  </button>
  <button type="button">
    <svg viewBox="0 0 24 24" aria-hidden="true">
      <circle cx="12" cy="12" r="3" />
      <path
        d="M19.4 15a2 2 0 0 0 .4 2.2l.1.1a2.5 2.5 0 1 1-3.5 3.5l-.1-.1a2 2 0 0 0-2.2-.4 2 2 0 0 0-1.2 1.8V22a2.5 2.5 0 0 1-5 0v-.1a2 2 0 0 0-1.3-1.8 2 2 0 0 0-2.2.4l-.1.1a2.5 2.5 0 1 1-3.5-3.5l.1-.1a2 2 0 0 0 .4-2.2"
      /></svg
    >Settings
  </button>
  <button type="button">
    <svg viewBox="0 0 24 24" aria-hidden="true">
      <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9" /></svg
    >Sign out
  </button>
</div>
```

**CSS:**
```css
.cbgp-tower {
  display: inline-flex; flex-direction: column;
  background: rgba(8,10,18,0.92);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  overflow: hidden;
  min-width: 200px;
  perspective: 600px;
  transform-style: preserve-3d;
  transition: transform 0.4s cubic-bezier(.65,0,.35,1);
  box-shadow: 0 12px 32px rgba(0,0,0,0.5);
}
.cbgp-tower:hover { transform: rotateY(-3deg) rotateX(2deg); }
.cbgp-tower button {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 16px;
  border: 0; border-bottom: 1px solid rgba(255,255,255,0.04);
  background: transparent;
  color: rgba(220,225,230,0.85);
  font: 600 13px/1 ui-sans-serif, system-ui;
  cursor: pointer;
  text-align: left;
  transition: background 0.2s, transform 0.3s cubic-bezier(.65,0,.35,1);
}
.cbgp-tower button:last-child { border-bottom: 0; }
.cbgp-tower button:hover {
  background: linear-gradient(90deg, rgba(0,255,224,0.06), rgba(255,90,241,0.04));
  color: #fff;
  transform: translateZ(8px);
}
.cbgp-tower svg { width: 14px; height: 14px; flex-shrink: 0; fill: none; stroke: rgba(0,255,224,0.7); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: stroke 0.2s; }
.cbgp-tower button:hover svg { stroke: #00ffe0; }
.cbgp-tower button:focus-visible { outline: 2px solid #00ffe0; outline-offset: -2px; }
```

### 10. Orbital FAB

**Type:** Pure CSS
**Description:** A FAB that fans out three satellite buttons on click — but they arc into position along a curved path, not a straight line. The main button rotates and pulses an outer ring.

**HTML:**
```html
<div class="cbgp-orbit">
  <input type="checkbox" id="cbgp-orbit-t" class="cbgp-orbit-toggle" aria-hidden="true" />
  <label
    for="cbgp-orbit-t"
    class="cbgp-orbit-main"
    tabindex="0"
    role="button"
    aria-label="Open create menu"
  >
    <span class="cbgp-orbit-plus" aria-hidden="true">+</span>
    <span class="cbgp-orbit-ring" aria-hidden="true"></span>
  </label>
  <a class="cbgp-orbit-child cbgp-orbit-c1" href="javascript:void(0)" aria-label="New document">
    <svg viewBox="0 0 24 24" aria-hidden="true">
      <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
      <polyline points="14 2 14 8 20 8" />
    </svg>
  </a>
  <a class="cbgp-orbit-child cbgp-orbit-c2" href="javascript:void(0)" aria-label="New folder">
    <svg viewBox="0 0 24 24" aria-hidden="true">
      <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z" />
    </svg>
  </a>
  <a class="cbgp-orbit-child cbgp-orbit-c3" href="javascript:void(0)" aria-label="Upload file">
    <svg viewBox="0 0 24 24" aria-hidden="true">
      <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M17 8l-5-5-5 5M12 3v12" />
    </svg>
  </a>
</div>
```

**CSS:**
```css
.cbgp-orbit { position: relative; width: 60px; height: 60px; }
.cbgp-orbit-toggle {
  position: absolute;
  width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.cbgp-orbit-main, .cbgp-orbit-child {
  position: absolute;
  display: flex; align-items: center; justify-content: center;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
}
.cbgp-orbit-main {
  z-index: 2;
  bottom: 0; left: 0;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #00ffe0 0%, #006e62 100%);
  color: #001f1c;
  box-shadow:
    0 0 0 0 rgba(0,255,224,0.4),
    0 8px 22px rgba(0,255,224,0.35),
    inset 0 -3px 6px rgba(0,0,0,0.25);
  transition: transform 0.4s cubic-bezier(.34,1.56,.64,1), box-shadow 0.3s;
}
.cbgp-orbit-plus {
  font: 800 28px/1 ui-monospace, monospace;
  transition: transform 0.4s cubic-bezier(.34,1.56,.64,1);
}
.cbgp-orbit-ring {
  position: absolute; inset: -4px;
  border-radius: 50%;
  border: 2px solid #00ffe0;
  opacity: 0;
  transition: opacity 0.3s, transform 0.6s cubic-bezier(.65,0,.35,1);
}
.cbgp-orbit-toggle:focus-visible + .cbgp-orbit-main { outline: 2px solid #ff5af1; outline-offset: 4px; }
.cbgp-orbit-toggle:checked + .cbgp-orbit-main {
  box-shadow:
    0 0 0 4px rgba(0,255,224,0.18),
    0 8px 28px rgba(0,255,224,0.55),
    inset 0 -3px 6px rgba(0,0,0,0.25);
}
.cbgp-orbit-toggle:checked + .cbgp-orbit-main .cbgp-orbit-plus { transform: rotate(135deg); }
.cbgp-orbit-toggle:checked + .cbgp-orbit-main .cbgp-orbit-ring { opacity: 1; transform: scale(1.4); }
.cbgp-orbit-child {
  z-index: 1;
  bottom: 8px; left: 8px;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(8,10,18,0.92);
  border: 1.5px solid rgba(0,255,224,0.4);
  color: #00ffe0;
  font-size: 14px;
  opacity: 0;
  pointer-events: none;
  transform: scale(0.4);
  transition:
    transform 0.5s cubic-bezier(.34,1.56,.64,1),
    opacity 0.3s,
    background 0.2s;
}
.cbgp-orbit-child svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cbgp-orbit-toggle:checked ~ .cbgp-orbit-child {
  opacity: 1;
  pointer-events: auto;
}
/* Curved arc deployment: each child arrives at a different angle around the FAB */
.cbgp-orbit-toggle:checked ~ .cbgp-orbit-c1 { transform: translate(0, -68px) scale(1); }
.cbgp-orbit-toggle:checked ~ .cbgp-orbit-c2 { transform: translate(50px, -50px) scale(1); }
.cbgp-orbit-toggle:checked ~ .cbgp-orbit-c3 { transform: translate(68px, 0) scale(1); }
.cbgp-orbit-child:hover {
  background: rgba(0,255,224,0.18);
  border-color: #00ffe0;
  color: #c8fffa;
}
@media (prefers-reduced-motion: reduce) {
  .cbgp-orbit-main, .cbgp-orbit-child, .cbgp-orbit-plus, .cbgp-orbit-ring { transition: none; }
}
```

### 11. Glitch Grid

**Type:** Pure CSS
**Description:** Filter buttons where the active state ghosts a cyan/magenta RGB-split clone of itself, vibrating subtly on hover. Brutalist meets cyberpunk.

**HTML:**
```html
<div class="cbgp-glitch" role="group" aria-label="Filters">
  <button type="button" class="is-on">ALL</button>
  <button type="button">DRAFT</button>
  <button type="button">LIVE</button>
</div>
```

**CSS:**
```css
.cbgp-glitch {
  display: inline-flex;
  background: #050810;
  border: 2px solid #00ffe0;
  box-shadow: 4px 4px 0 #ff5af1;
  transition: transform 0.1s, box-shadow 0.1s;
}
.cbgp-glitch button {
  padding: 11px 20px;
  border: 0; border-right: 2px solid rgba(0,255,224,0.3);
  cursor: pointer;
  background: transparent;
  color: #00ffe0;
  font: 800 11px/1 ui-monospace, monospace;
  letter-spacing: 0.18em;
  position: relative;
  transition: color 0.15s, background 0.15s;
}
.cbgp-glitch button::before, .cbgp-glitch button::after {
  content: attr(data-text, '');
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
  opacity: 0;
}
.cbgp-glitch button:last-child { border-right: 0; }
.cbgp-glitch button:hover { background: rgba(0,255,224,0.08); }
.cbgp-glitch button.is-on {
  background: linear-gradient(90deg, rgba(0,255,224,0.18), rgba(255,90,241,0.18));
  color: #fff;
  text-shadow:
    -1.2px 0 #ff5af1,
    1.2px 0 #00ffe0;
}
.cbgp-glitch button:focus-visible { outline: 2px solid #ff5af1; outline-offset: -2px; }
.cbgp-glitch:focus-within { transform: translate(-1px,-1px); box-shadow: 5px 5px 0 #ff5af1; }
```

### 12. Plasma Pill

**Type:** Pure CSS
**Description:** A glassmorphic pill that always carries a slowly rotating conic plasma loop behind it via @property — the kind of motion that feels alive without being noisy.

**HTML:**
```html
<div class="cbgp-plasma-wrap">
  <div class="cbgp-plasma" role="group" aria-label="Quick actions">
    <button type="button">Like</button>
    <button type="button">Save</button>
    <button type="button">Share</button>
  </div>
</div>
```

**CSS:**
```css
@property --cbgp-plasma-a { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.cbgp-plasma-wrap {
  display: inline-block;
  padding: 24px 28px;
  background: radial-gradient(ellipse at 30% 30%, #1a0a2a 0%, #050810 100%);
  border-radius: 20px;
}
.cbgp-plasma {
  position: relative;
  display: inline-flex;
  padding: 5px;
  background: rgba(8,10,18,0.7);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  isolation: isolate;
  --cbgp-plasma-a: 0deg;
  animation: cbgp-plasma-spin 8s linear infinite;
}
@keyframes cbgp-plasma-spin { to { --cbgp-plasma-a: 360deg; } }
.cbgp-plasma::before {
  content: '';
  position: absolute; inset: -2px;
  border-radius: inherit;
  background: conic-gradient(
    from var(--cbgp-plasma-a),
    #00ffe0, #ff5af1, #ffd479, #00ffe0);
  filter: blur(10px);
  z-index: -1;
  opacity: 0.85;
}
.cbgp-plasma::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: rgba(8,10,18,0.85);
  z-index: -1;
}
.cbgp-plasma button {
  padding: 9px 22px;
  border: 0; cursor: pointer;
  background: transparent;
  color: rgba(220,225,230,0.85);
  font: 700 12px/1 ui-monospace, monospace;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 999px;
  transition: background 0.25s, color 0.25s;
}
.cbgp-plasma button + button { border-left: 1px solid rgba(255,255,255,0.06); }
.cbgp-plasma button:hover { background: rgba(255,255,255,0.06); color: #fff; }
.cbgp-plasma button:focus-visible { outline: 2px solid rgba(0,255,224,0.7); outline-offset: -2px; }
@media (prefers-reduced-motion: reduce) {
  .cbgp-plasma { animation: none; }
}
```

### 13. Pulse Reactor

**Type:** Pure CSS
**Description:** A radar-style action bar — clicking any button activates it AND emits a circular shockwave that ripples outward across the whole bar. Active button stays lit.

**HTML:**
```html
<div class="cbgp-pulse" role="toolbar" aria-label="Terminal actions">
  <input type="radio" name="cbgp-pulse" id="cbgp-pulse-1" />
  <label for="cbgp-pulse-1">RUN</label>
  <input type="radio" name="cbgp-pulse" id="cbgp-pulse-2" checked />
  <label for="cbgp-pulse-2">STOP</label>
  <input type="radio" name="cbgp-pulse" id="cbgp-pulse-3" />
  <label for="cbgp-pulse-3">CLEAR</label>
  <input type="radio" name="cbgp-pulse" id="cbgp-pulse-4" />
  <label for="cbgp-pulse-4">EXPORT</label>
</div>
```

**CSS:**
```css
.cbgp-pulse {
  display: inline-flex; gap: 4px;
  padding: 6px;
  background: radial-gradient(ellipse at 50% 0%, #0a1a3a 0%, #050810 60%);
  border: 1px solid rgba(0,255,224,0.18);
  border-radius: 6px;
  position: relative;
  overflow: hidden;
}
.cbgp-pulse input { appearance: none; -webkit-appearance: none; position: absolute; opacity: 0; }
.cbgp-pulse label {
  padding: 9px 16px;
  background: rgba(0,255,224,0.04);
  border: 1px solid rgba(0,255,224,0.18);
  color: rgba(0,255,224,0.7);
  font: 800 10px/1 ui-monospace, monospace;
  letter-spacing: 0.16em;
  cursor: pointer;
  border-radius: 3px;
  position: relative;
  transition: background 0.18s, color 0.18s, border-color 0.18s, box-shadow 0.25s;
}
.cbgp-pulse label::before {
  content: '';
  position: absolute; inset: 50% 50%;
  border-radius: 50%;
  border: 2px solid #00ffe0;
  opacity: 0;
  pointer-events: none;
}
.cbgp-pulse label:hover { background: rgba(0,255,224,0.08); color: #c8fffa; border-color: rgba(0,255,224,0.4); }
.cbgp-pulse input:checked + label {
  background: linear-gradient(180deg, #00ffe0, #00b8a8);
  color: #001f1c;
  border-color: #00ffe0;
  box-shadow: 0 0 18px rgba(0,255,224,0.55), inset 0 -2px 4px rgba(0,0,0,0.2);
  text-shadow: 0 1px 0 rgba(255,255,255,0.4);
}
.cbgp-pulse input:checked + label::before { animation: cbgp-pulse-out 0.7s cubic-bezier(.3,1,.5,1); }
@keyframes cbgp-pulse-out {
  0%   { inset: 50% 50%; opacity: 0.85; }
  100% { inset: -50% -50%; opacity: 0; }
}
.cbgp-pulse input:focus-visible + label { outline: 2px solid #ff5af1; outline-offset: 2px; }
```

### 14. Solar Flare

**Type:** Pure CSS
**Description:** Date-range presets where a warm solar glow follows your cursor across the bar. Active range gets a permanent flare; the moving glow is pure CSS via --mx custom prop.

**HTML:**
```html
<fieldset
  class="cbgp-flare"
  role="group"
  aria-label="Date range"
  onmousemove="event.currentTarget.style.setProperty('--mx', event.offsetX + 'px')"
>
  <legend class="cbgp-sr">Date range</legend>
  <input type="radio" name="cbgp-flare" id="cbgp-flare-1" />
  <label for="cbgp-flare-1">Today</label>
  <input type="radio" name="cbgp-flare" id="cbgp-flare-2" checked />
  <label for="cbgp-flare-2">7 days</label>
  <input type="radio" name="cbgp-flare" id="cbgp-flare-3" />
  <label for="cbgp-flare-3">30 days</label>
  <input type="radio" name="cbgp-flare" id="cbgp-flare-4" />
  <label for="cbgp-flare-4">Custom</label>
</fieldset>
```

**CSS:**
```css
.cbgp-flare {
  --mx: -200px;
  display: inline-flex; gap: 0;
  border: 0; padding: 0;
  background:
    radial-gradient(circle 80px at var(--mx) 50%,
      rgba(255,200,80,0.18), transparent 70%),
    rgba(8,10,18,0.92);
  border: 1px solid rgba(255,200,80,0.18);
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}
.cbgp-flare input { appearance: none; -webkit-appearance: none; position: absolute; opacity: 0; }
.cbgp-flare label {
  padding: 11px 18px;
  font: 700 11px/1 ui-monospace, monospace;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(220,225,230,0.5);
  cursor: pointer;
  position: relative;
  transition: color 0.25s;
  border-right: 1px solid rgba(255,255,255,0.04);
}
.cbgp-flare label:last-of-type { border-right: 0; }
.cbgp-flare label::after {
  content: '';
  position: absolute;
  left: 14px; right: 14px; bottom: 5px;
  height: 2px;
  background: linear-gradient(90deg, #ffc850, #ff5af1);
  border-radius: 2px;
  opacity: 0;
  transform: scaleX(0.4);
  transition: opacity 0.3s, transform 0.3s cubic-bezier(.65,0,.35,1);
  box-shadow: 0 0 8px rgba(255,200,80,0.6);
}
.cbgp-flare label:hover { color: #ffd479; }
.cbgp-flare input:checked + label { color: #fff; }
.cbgp-flare input:checked + label::after { opacity: 1; transform: scaleX(1); }
.cbgp-flare input:focus-visible + label { outline: 2px solid #ffc850; outline-offset: -2px; border-radius: 6px; }
```

### 15. Bio-Decision

**Type:** Pure CSS
**Description:** A two-button row where each button has a different "voice": reject shakes when hovered (negative pull), approve emits a particle burst on click via a single mask-image pseudo-element.

**HTML:**
```html
<div class="cbgp-bio" role="group" aria-label="Review decision">
  <button type="button" class="cbgp-bio-no">
    <svg viewBox="0 0 24 24" aria-hidden="true">
      <line x1="18" y1="6" x2="6" y2="18" />
      <line x1="6" y1="6" x2="18" y2="18" />
    </svg>
    Reject
  </button>
  <button type="button" class="cbgp-bio-yes">
    <svg viewBox="0 0 24 24" aria-hidden="true"><polyline points="20 6 9 17 4 12" /></svg>
    Approve
  </button>
</div>
```

**CSS:**
```css
.cbgp-bio { display: inline-flex; gap: 10px; }
.cbgp-bio button {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 20px;
  border-radius: 10px;
  cursor: pointer;
  font: 700 12px/1 ui-monospace, monospace;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  position: relative;
  transition: transform 0.18s, box-shadow 0.25s;
}
.cbgp-bio svg { width: 14px; height: 14px; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.cbgp-bio-no {
  background: rgba(255,90,90,0.08);
  border: 1px solid rgba(255,90,90,0.4);
  color: #ff7a7a;
}
.cbgp-bio-no svg { stroke: #ff7a7a; }
.cbgp-bio-no:hover {
  background: rgba(255,90,90,0.18);
  animation: cbgp-bio-shake 0.4s cubic-bezier(.36,.07,.19,.97) infinite;
}
@keyframes cbgp-bio-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-2px); }
  75% { transform: translateX(2px); }
}
.cbgp-bio-yes {
  background: linear-gradient(135deg, #00ffa8, #00b8e0);
  border: 1px solid transparent;
  color: #001f1c;
  text-shadow: 0 1px 0 rgba(255,255,255,0.4);
}
.cbgp-bio-yes svg { stroke: #001f1c; }
.cbgp-bio-yes:hover { box-shadow: 0 0 24px rgba(0,255,168,0.5); }
.cbgp-bio-yes::before {
  content: '';
  position: absolute; inset: -8px;
  border-radius: inherit;
  background: radial-gradient(circle, rgba(0,255,168,0.6) 0%, transparent 70%);
  opacity: 0;
  pointer-events: none;
}
.cbgp-bio-yes:active::before { animation: cbgp-bio-burst 0.6s ease-out; }
@keyframes cbgp-bio-burst {
  0%   { transform: scale(0.6); opacity: 0.85; }
  100% { transform: scale(1.6); opacity: 0; }
}
.cbgp-bio button:focus-visible { outline: 2px solid #00ffa8; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .cbgp-bio-no:hover { animation: none; }
}
```

### 16. Ferro Toolbar

**Type:** Pure CSS
**Description:** Icon toolbar where icons subtly tilt toward your cursor as you sweep across — pure CSS, driven by --mx via inline style on the parent. No JS required.

**HTML:**
```html
<div
  class="cbgp-ferro"
  role="toolbar"
  aria-label="Editor tools"
  onmousemove="
    event.currentTarget.style.setProperty(
      '--mx',
      ((event.offsetX / event.currentTarget.offsetWidth) * 2 - 1).toFixed(2),
    )
  "
>
  <button type="button" aria-label="Undo" title="Undo (⌘Z)">
    <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M3 7v6h6M3 13a9 9 0 1 0 3-6.7L3 9" /></svg>
  </button>
  <button type="button" aria-label="Redo" title="Redo (⌘⇧Z)">
    <svg viewBox="0 0 24 24" aria-hidden="true">
      <path d="M21 7v6h-6M21 13a9 9 0 1 1-3-6.7L21 9" />
    </svg>
  </button>
  <span class="cbgp-ferro-divider" aria-hidden="true"></span>
  <button type="button" aria-label="Cut" title="Cut (⌘X)">
    <svg viewBox="0 0 24 24" aria-hidden="true">
      <circle cx="6" cy="6" r="3" />
      <circle cx="6" cy="18" r="3" />
      <line x1="20" y1="4" x2="8.12" y2="15.88" />
      <line x1="14.47" y1="14.48" x2="20" y2="20" />
    </svg>
  </button>
  <button type="button" aria-label="Copy" title="Copy (⌘C)">
    <svg viewBox="0 0 24 24" aria-hidden="true">
      <rect x="9" y="9" width="13" height="13" rx="2" />
      <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
    </svg>
  </button>
  <button type="button" aria-label="Paste" title="Paste (⌘V)">
    <svg viewBox="0 0 24 24" aria-hidden="true">
      <path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2" />
      <rect x="8" y="2" width="8" height="4" rx="1" />
    </svg>
  </button>
</div>
```

**CSS:**
```css
.cbgp-ferro {
  --mx: 0;
  display: inline-flex; gap: 4px; align-items: center;
  padding: 6px;
  background: linear-gradient(135deg, #0a0a14 0%, #14141d 100%);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  perspective: 600px;
  box-shadow: 0 8px 22px rgba(0,0,0,0.4);
}
.cbgp-ferro button {
  width: 36px; height: 36px;
  border: 0; cursor: pointer;
  background: transparent;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.4s cubic-bezier(.65,0,.35,1), background 0.2s;
  transform: rotateY(calc(var(--mx) * 18deg));
}
.cbgp-ferro button:hover { background: rgba(0,255,224,0.08); }
.cbgp-ferro button:focus-visible { outline: 2px solid #00ffe0; outline-offset: -2px; }
.cbgp-ferro svg { width: 14px; height: 14px; fill: none; stroke: rgba(220,225,230,0.65); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: stroke 0.2s; }
.cbgp-ferro button:hover svg { stroke: #00ffe0; }
.cbgp-ferro-divider {
  width: 1px; height: 22px;
  background: linear-gradient(180deg, transparent, rgba(0,255,224,0.5), transparent);
  margin: 0 4px;
}
```

### 17. Magnetic Disc

**Type:** Pure CSS
**Description:** Three pricing tiers as a slowly rotating disc — each disc carries a tier; hover slows the rotation and lifts the front disc, click snaps it forward.

**HTML:**
```html
<div class="cbgp-disc" role="group" aria-label="Tier picker">
  <button type="button" class="cbgp-disc-1">Free</button>
  <button type="button" class="cbgp-disc-2">Pro</button>
  <button type="button" class="cbgp-disc-3">Suite</button>
</div>
```

**CSS:**
```css
@property --cbgp-disc-a { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.cbgp-disc {
  position: relative;
  width: 160px; height: 72px;
  perspective: 800px;
  transform-style: preserve-3d;
  --cbgp-disc-a: 0deg;
  animation: cbgp-disc-spin 12s linear infinite;
}
@keyframes cbgp-disc-spin { to { --cbgp-disc-a: 360deg; } }
.cbgp-disc:hover { animation-play-state: paused; }
.cbgp-disc button {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255,255,255,0.08);
  cursor: pointer;
  border-radius: 14px;
  font: 800 13px/1 ui-monospace, monospace;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
  transform-style: preserve-3d;
  transition: transform 0.4s cubic-bezier(.34,1.56,.64,1), box-shadow 0.3s;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 6px 18px rgba(0,0,0,0.35);
  backface-visibility: hidden;
}
.cbgp-disc-1 {
  background: linear-gradient(135deg, #00ffe0, #006e62);
  transform: rotateY(var(--cbgp-disc-a)) translateZ(36px);
}
.cbgp-disc-2 {
  background: linear-gradient(135deg, #ff5af1, #6e1a6a);
  transform: rotateY(calc(var(--cbgp-disc-a) + 120deg)) translateZ(36px);
}
.cbgp-disc-3 {
  background: linear-gradient(135deg, #ffd479, #b87333);
  transform: rotateY(calc(var(--cbgp-disc-a) + 240deg)) translateZ(36px);
  color: #1a0a14;
}
.cbgp-disc button:focus-visible { outline: 2px solid #00ffe0; outline-offset: 6px; }
@media (prefers-reduced-motion: reduce) {
  .cbgp-disc { animation: none; }
}
```

### 18. Plasma Combo

**Type:** Light JS
**Description:** A dropdown trigger with a neon plasma border that pulses subtly. The list reveals via a clip-path slide; selection plays a scanline flash on the chosen option.

**HTML:**
```html
<div class="cbgp-combo" role="group" aria-label="Sort options">
  <button
    type="button"
    class="cbgp-combo-trigger"
    aria-haspopup="listbox"
    aria-expanded="false"
    data-cbgp-combo
  >
    <span>Sort: Newest</span>
    <svg viewBox="0 0 12 12" aria-hidden="true"><path d="M3 5l3 3 3-3" /></svg>
  </button>
  <ul class="cbgp-combo-list" role="listbox" hidden>
    <li role="option" aria-selected="true">Newest</li>
    <li role="option">Oldest</li>
    <li role="option">A → Z</li>
    <li role="option">Z → A</li>
    <li role="option">Most popular</li>
  </ul>
</div>
```

**CSS:**
```css
.cbgp-combo {
  position: relative;
  display: inline-block;
}
.cbgp-combo-trigger {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 11px 16px;
  background: linear-gradient(135deg, #0a0a14 0%, #14141d 100%);
  border: 1px solid #00ffe0;
  border-radius: 10px;
  color: #c8fffa;
  font: 600 12px/1 ui-monospace, monospace;
  letter-spacing: 0.08em;
  cursor: pointer;
  position: relative;
  box-shadow: 0 0 12px rgba(0,255,224,0.15), inset 0 0 0 1px rgba(0,255,224,0.1);
  transition: box-shadow 0.25s, color 0.2s;
}
.cbgp-combo-trigger:hover {
  box-shadow: 0 0 22px rgba(0,255,224,0.35), inset 0 0 0 1px rgba(0,255,224,0.2);
  color: #fff;
}
.cbgp-combo-trigger:focus-visible { outline: 2px solid #ff5af1; outline-offset: 3px; }
.cbgp-combo-trigger svg { width: 11px; height: 11px; fill: none; stroke: #00ffe0; stroke-width: 2; transition: transform 0.3s cubic-bezier(.65,0,.35,1); }
.cbgp-combo-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
.cbgp-combo-list {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  margin: 0; padding: 4px;
  list-style: none;
  background: linear-gradient(135deg, #0a0a14 0%, #14141d 100%);
  border: 1px solid rgba(0,255,224,0.4);
  border-radius: 10px;
  z-index: 10;
  box-shadow: 0 12px 32px rgba(0,0,0,0.55), 0 0 24px rgba(0,255,224,0.1);
  animation: cbgp-combo-in 0.28s cubic-bezier(.65,0,.35,1);
}
@keyframes cbgp-combo-in {
  from { clip-path: inset(0 0 100% 0 round 10px); opacity: 0; }
  to   { clip-path: inset(0 0 0 0 round 10px);    opacity: 1; }
}
.cbgp-combo-list li {
  padding: 8px 14px;
  font: 600 12px/1 ui-monospace, monospace;
  color: rgba(200,255,250,0.7);
  cursor: pointer;
  border-radius: 6px;
  letter-spacing: 0.06em;
  transition: background 0.15s, color 0.15s;
}
.cbgp-combo-list li[aria-selected="true"] {
  color: #00ffe0;
  background: rgba(0,255,224,0.08);
}
.cbgp-combo-list li:hover { background: rgba(0,255,224,0.15); color: #fff; }
```

**JS:**
```js
/* Plasma combobox dropdown — toggle aria-expanded; click outside or Escape to close. */
document.querySelectorAll('[data-cbgp-combo]').forEach(function (trigger) {
  var list  = trigger.parentElement.querySelector('.cbgp-combo-list');
  var label = trigger.querySelector('span');
  if (!list) return;
  function open()  { list.hidden = false; trigger.setAttribute('aria-expanded', 'true'); }
  function close() { list.hidden = true;  trigger.setAttribute('aria-expanded', 'false'); }
  trigger.addEventListener('click', function (e) {
    e.stopPropagation();
    list.hidden ? open() : close();
  });
  trigger.addEventListener('keydown', function (e) {
    if (e.key === 'Escape') { close(); trigger.focus(); }
  });
  list.addEventListener('click', function (e) {
    var li = e.target.closest('li[role="option"]');
    if (!li) return;
    list.querySelectorAll('li').forEach(function (x) { x.removeAttribute('aria-selected'); });
    li.setAttribute('aria-selected', 'true');
    if (label) label.textContent = label.textContent.split(': ')[0] + ': ' + li.textContent;
    close();
  });
  document.addEventListener('click', close);
});
```

### 19. Kinetic Trio

**Type:** Light JS
**Description:** Three icon actions where the active button morphs into a confirmation pill, expands in width, and plays a gradient flow before snapping back. Layout shift handled with CSS grid auto-flow.

**HTML:**
```html
<div class="cbgp-kinetic" role="group" aria-label="Quick actions">
  <button type="button" data-cbgp-kinetic-flash="✓ Copied" aria-label="Copy link">
    <svg viewBox="0 0 24 24" aria-hidden="true">
      <rect x="9" y="9" width="13" height="13" rx="2" />
      <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
    </svg>
    <span>Copy</span>
  </button>
  <button type="button" data-cbgp-kinetic-flash="↗ Sharing" aria-label="Share">
    <svg viewBox="0 0 24 24" aria-hidden="true">
      <circle cx="18" cy="5" r="3" />
      <circle cx="6" cy="12" r="3" />
      <circle cx="18" cy="19" r="3" />
      <line x1="8.59" y1="13.51" x2="15.42" y2="17.49" />
      <line x1="15.41" y1="6.51" x2="8.59" y2="10.49" />
    </svg>
    <span>Share</span>
  </button>
  <button type="button" data-cbgp-kinetic-flash="↓ Downloading" aria-label="Download">
    <svg viewBox="0 0 24 24" aria-hidden="true">
      <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3" />
    </svg>
    <span>Download</span>
  </button>
</div>
```

**CSS:**
```css
.cbgp-kinetic {
  display: inline-flex; gap: 6px;
  padding: 5px;
  background: linear-gradient(135deg, #0a0a14 0%, #14141d 100%);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
}
.cbgp-kinetic button {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  color: rgba(220,225,230,0.85);
  font: 600 12px/1 ui-monospace, monospace;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(.34,1.56,.64,1);
  white-space: nowrap;
}
.cbgp-kinetic button:hover {
  background: rgba(0,255,224,0.06);
  border-color: rgba(0,255,224,0.4);
  color: #fff;
}
.cbgp-kinetic svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.4s cubic-bezier(.34,1.56,.64,1); }
.cbgp-kinetic button.is-flash {
  background:
    linear-gradient(90deg, #00ffe0, #ff5af1) 0% 0% / 200% 100%;
  border-color: transparent;
  color: #001f1c;
  animation: cbgp-kinetic-shift 1.4s linear;
  text-shadow: 0 1px 0 rgba(255,255,255,0.4);
}
.cbgp-kinetic button.is-flash svg { transform: scale(1.2); }
@keyframes cbgp-kinetic-shift {
  from { background-position: 200% 0%; }
  to   { background-position: 0% 0%; }
}
.cbgp-kinetic button:focus-visible { outline: 2px solid #00ffe0; outline-offset: 3px; }
```

**JS:**
```js
/* Kinetic action buttons — morphing flash on click. */
document.querySelectorAll('[data-cbgp-kinetic-flash]').forEach(function (btn) {
  var label = btn.querySelector('span');
  var msg   = btn.dataset.cbgpKineticFlash;
  var orig  = label ? label.textContent : '';
  btn.addEventListener('click', function () {
    if (btn.classList.contains('is-flash')) return;
    btn.classList.add('is-flash');
    if (label) label.textContent = msg;
    setTimeout(function () {
      btn.classList.remove('is-flash');
      if (label) label.textContent = orig;
    }, 1400);
  });
});
```

### 20. Synthwave Dial

**Type:** Light JS
**Description:** Quantity stepper as a synthwave-grid dial — chrome +/− buttons with a scanline window that morphs to magenta when the count hits max, cyan when it hits min.

**HTML:**
```html
<div class="cbgp-syn" role="group" aria-label="Quantity">
  <button type="button" data-cbgp-syn-step="-1" aria-label="Decrease quantity">−</button>
  <input type="number" min="1" max="10" value="1" aria-label="Quantity" data-cbgp-syn />
  <button type="button" data-cbgp-syn-step="1" aria-label="Increase quantity">+</button>
</div>
```

**CSS:**
```css
.cbgp-syn {
  display: inline-flex; align-items: stretch;
  background: linear-gradient(180deg, #0a0a14 0%, #050810 100%);
  border: 1px solid #ff5af1;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 0 14px rgba(255,90,241,0.25);
}
.cbgp-syn button {
  width: 42px; height: 42px;
  border: 0; cursor: pointer;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08), transparent),
    rgba(8,10,18,0.92);
  color: #ff5af1;
  font: 800 18px/1 ui-monospace, monospace;
  text-shadow: 0 0 6px rgba(255,90,241,0.6);
  transition: background 0.18s, color 0.18s;
}
.cbgp-syn button:hover {
  background: rgba(255,90,241,0.12);
  color: #ffaaf0;
}
.cbgp-syn button:focus-visible { outline: 2px solid #00ffe0; outline-offset: -2px; }
.cbgp-syn button:disabled { opacity: 0.3; cursor: not-allowed; }
.cbgp-syn button:disabled:hover { background: rgba(8,10,18,0.92); color: #ff5af1; }
.cbgp-syn input {
  width: 64px;
  border: 0; outline: none;
  background:
    repeating-linear-gradient(0deg,
      transparent 0 4px,
      rgba(0,255,224,0.06) 4px 5px),
    #0a0a14;
  color: #00ffe0;
  font: 800 16px/1 ui-monospace, monospace;
  text-align: center;
  text-shadow: 0 0 6px rgba(0,255,224,0.5);
  border-left: 1px solid rgba(255,90,241,0.3);
  border-right: 1px solid rgba(255,90,241,0.3);
  -moz-appearance: textfield;
}
.cbgp-syn input::-webkit-outer-spin-button,
.cbgp-syn input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cbgp-syn.is-min input { color: #00ffe0; box-shadow: inset 0 0 16px rgba(0,255,224,0.3); }
.cbgp-syn.is-max input { color: #ff5af1; box-shadow: inset 0 0 16px rgba(255,90,241,0.4); }
```

**JS:**
```js
/* Synthwave-stepper — clamp + classify min/max state for color shift. */
document.querySelectorAll('.cbgp-syn').forEach(function (group) {
  var input = group.querySelector('[data-cbgp-syn]');
  var minus = group.querySelector('[data-cbgp-syn-step="-1"]');
  var plus  = group.querySelector('[data-cbgp-syn-step="1"]');
  if (!input) return;
  function update() {
    var min = Number(input.min) || -Infinity;
    var max = Number(input.max) ||  Infinity;
    var val = Number(input.value) || 0;
    if (minus) minus.disabled = val <= min;
    if (plus)  plus.disabled  = val >= max;
    group.classList.toggle('is-min', val <= min);
    group.classList.toggle('is-max', val >= max);
  }
  group.querySelectorAll('[data-cbgp-syn-step]').forEach(function (btn) {
    btn.addEventListener('click', function () {
      var dir = parseInt(btn.dataset.cbgpSynStep, 10) || 0;
      var min = Number(input.min) || -Infinity;
      var max = Number(input.max) ||  Infinity;
      var val = (Number(input.value) || 0) + dir;
      input.value = String(Math.max(min, Math.min(max, val)));
      update();
    });
  });
  input.addEventListener('input', update);
  update();
});
```

### 21. Wormhole Tabs

**Type:** Pure CSS
**Description:** Tab nav where the active indicator stretches into a trailing wormhole as it moves between tabs — implemented via :has() and a single shared pseudo-element with smooth width interpolation.

**HTML:**
```html
<fieldset class="cbgp-worm" role="tablist" aria-label="Settings sections">
  <legend class="cbgp-sr">Settings sections</legend>
  <input type="radio" name="cbgp-worm" id="cbgp-worm-1" checked />
  <label for="cbgp-worm-1"><span>Profile</span></label>
  <input type="radio" name="cbgp-worm" id="cbgp-worm-2" />
  <label for="cbgp-worm-2"><span>Notifications</span></label>
  <input type="radio" name="cbgp-worm" id="cbgp-worm-3" />
  <label for="cbgp-worm-3"><span>Privacy</span></label>
  <input type="radio" name="cbgp-worm" id="cbgp-worm-4" />
  <label for="cbgp-worm-4"><span>Billing</span></label>
</fieldset>
```

**CSS:**
```css
.cbgp-worm {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  position: relative;
  border: 0; padding: 0 0 10px;
  width: 100%; max-width: 460px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.cbgp-worm input { appearance: none; -webkit-appearance: none; position: absolute; opacity: 0; }
.cbgp-worm label {
  padding: 12px 8px 14px;
  font: 700 11px/1 ui-monospace, monospace;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(220,225,230,0.5);
  cursor: pointer;
  position: relative;
  text-align: center;
  transition: color 0.25s;
}
.cbgp-worm label::after {
  content: '';
  position: absolute;
  left: 50%; bottom: -1px;
  width: 0; height: 3px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, #00ffe0 30%, #ff5af1 70%, transparent);
  border-radius: 2px;
  transition: width 0.5s cubic-bezier(.65,0,.35,1);
  box-shadow: 0 0 14px rgba(0,255,224,0.6);
}
.cbgp-worm label:hover { color: rgba(220,225,230,0.85); }
.cbgp-worm input:checked + label { color: #fff; }
.cbgp-worm input:checked + label::after { width: 100%; }
.cbgp-worm input:focus-visible + label { outline: 2px solid #00ffe0; outline-offset: -2px; border-radius: 4px; }
```

### 22. Aurora Dust

**Type:** Pure CSS
**Description:** Three premium tier buttons floating on a particle-aurora field — drifting blobs of cyan / magenta / gold via animated background-positions, layered noise, and a subtle hover-lift.

**HTML:**
```html
<div class="cbgp-dust" role="group" aria-label="Subscription tiers">
  <button type="button">Starter</button>
  <button type="button" class="is-on">Plus</button>
  <button type="button">Team</button>
</div>
```

**CSS:**
```css
.cbgp-dust {
  position: relative; display: inline-flex;
  padding: 6px;
  background: #050810;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  overflow: hidden;
  isolation: isolate;
}
.cbgp-dust::before {
  content: '';
  position: absolute; inset: -50%;
  background:
    radial-gradient(circle 70px at 20% 30%, rgba(0,255,224,0.55), transparent 60%),
    radial-gradient(circle 60px at 60% 70%, rgba(255,90,241,0.5),  transparent 60%),
    radial-gradient(circle 80px at 90% 40%, rgba(255,212,121,0.45), transparent 60%),
    radial-gradient(circle 50px at 30% 80%, rgba(0,184,232,0.5),    transparent 60%);
  filter: blur(20px);
  z-index: -1;
  animation: cbgp-dust-drift 12s ease-in-out infinite;
}
.cbgp-dust::after {
  content: '';
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(45deg,
      rgba(255,255,255,0.012) 0 1px,
      transparent 1px 3px),
    rgba(5,8,16,0.5);
  z-index: -1;
}
@keyframes cbgp-dust-drift {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  33%      { transform: translate(-6%, 4%) rotate(2deg); }
  66%      { transform: translate(4%, -3%) rotate(-2deg); }
}
.cbgp-dust button {
  padding: 11px 22px;
  border: 0; cursor: pointer;
  background: transparent;
  color: rgba(220,225,230,0.7);
  font: 700 12px/1 ui-monospace, monospace;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-radius: 10px;
  position: relative;
  transition: background 0.25s, color 0.25s, transform 0.3s;
}
.cbgp-dust button:hover {
  color: #fff;
  background: rgba(255,255,255,0.06);
  transform: translateY(-1px);
}
.cbgp-dust button.is-on {
  background: rgba(8,10,18,0.6);
  color: #fff;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}
.cbgp-dust button:focus-visible { outline: 2px solid #00ffe0; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .cbgp-dust::before { animation: none !important; }
}
```

---
## 27 CSS Button Hover Effects

URL: https://codefronts.com/motion/css-button-hover-effects/
Description: 27 hand-coded CSS button hover effects — 3D press, neon glow, gradient slide, border draw, liquid fill, ripple, glitch text, and kinetic flips. Every demo is pure CSS (no JavaScript, no framework), tuned for 60fps with transform and opacity, and respects prefers-reduced-motion out of the box.
Demo count: 27

### 01. Minimalist Border & Outline Drawing Hover Effects

**Type:** Pure CSS
**Description:** Four editorial ghost-button techniques on a paper-and-ink palette — an SVG perimeter stroke that draws itself via stroke-dasharray, corner brackets that expand into a full border, a vertical scaleY background wipe, and split borders sliding in from both edges. Restrained, quiet, considered. Best for corporate sites, agency portfolios, and minimalist editorial layouts.

**HTML:**
```html
<section class="bhe-mbo" aria-label="Minimalist border drawing hover effects demo">
  <div class="bhe-mbo__row">
    <div class="bhe-mbo__cell">
      <a class="bhe-mbo__btn bhe-mbo__draw" tabindex="0">
        <svg viewBox="0 0 200 56" preserveAspectRatio="none" aria-hidden="true"><rect x="1" y="1" width="198" height="54"/></svg>
        Discover
      </a>
      <span class="bhe-mbo__label">Perimeter Draw</span>
    </div>
    <div class="bhe-mbo__cell">
      <button class="bhe-mbo__btn bhe-mbo__corners" type="button">Read More</button>
      <span class="bhe-mbo__label">Corner Expand</span>
    </div>
    <div class="bhe-mbo__cell">
      <button class="bhe-mbo__btn bhe-mbo__wipe" type="button"><span>Get Access</span></button>
      <span class="bhe-mbo__label">Background Wipe</span>
    </div>
    <div class="bhe-mbo__cell">
      <button class="bhe-mbo__btn bhe-mbo__split" type="button"><span>Contact</span></button>
      <span class="bhe-mbo__label">Split Reveal</span>
    </div>
  </div>
</section>
```

**CSS:**
```css
.bhe-mbo {
  --bhe-mbo-bg: #f4f1ea;
  --bhe-mbo-ink: #1a1a1a;
  --bhe-mbo-muted: #6b6b6b;
  --bhe-mbo-line: #1a1a1a;
  --bhe-mbo-accent: #c4452e;

  display: flex; align-items: center; justify-content: center;
  background: var(--bhe-mbo-bg); color: var(--bhe-mbo-ink);
  font-family: 'Georgia', 'Times New Roman', serif;
  padding: 3rem 2rem; min-height: 320px;
  box-sizing: border-box;
}
.bhe-mbo *, .bhe-mbo *::before, .bhe-mbo *::after { box-sizing: border-box; }
.bhe-mbo__row { display: flex; flex-wrap: wrap; gap: 2.5rem; justify-content: center; }
.bhe-mbo__cell { display: flex; flex-direction: column; align-items: center; gap: 0.7rem; }
.bhe-mbo__label { font-size: 0.7rem; letter-spacing: 0.15em; color: var(--bhe-mbo-muted); text-transform: uppercase; }

.bhe-mbo__btn {
  position: relative;
  font-family: inherit;
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bhe-mbo-ink);
  background: transparent;
  border: none;
  padding: 1.1rem 2.6rem;
  cursor: pointer;
  overflow: hidden;
  display: inline-block;
}

/* 1: SVG perimeter draw */
.bhe-mbo__draw svg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  fill: none; stroke: var(--bhe-mbo-ink); stroke-width: 1.5;
}
.bhe-mbo__draw rect {
  stroke-dasharray: 50 350;
  stroke-dashoffset: 50;
  transition: stroke-dashoffset 0.8s cubic-bezier(0.7, 0, 0.2, 1), stroke-dasharray 0.8s cubic-bezier(0.7, 0, 0.2, 1);
}
.bhe-mbo__draw:hover rect { stroke-dasharray: 400 0; stroke-dashoffset: -100; }

/* 2: corners expand to full border */
.bhe-mbo__corners::before,
.bhe-mbo__corners::after {
  content: ''; position: absolute; width: 14px; height: 14px;
  transition: width 0.35s ease, height 0.35s ease;
}
.bhe-mbo__corners::before { top: 0; left: 0; border-top: 1.5px solid var(--bhe-mbo-accent); border-left: 1.5px solid var(--bhe-mbo-accent); }
.bhe-mbo__corners::after  { bottom: 0; right: 0; border-bottom: 1.5px solid var(--bhe-mbo-accent); border-right: 1.5px solid var(--bhe-mbo-accent); }
.bhe-mbo__corners:hover::before,
.bhe-mbo__corners:hover::after { width: 100%; height: 100%; }
.bhe-mbo__corners:hover { color: var(--bhe-mbo-accent); }

/* 3: background wipe up */
.bhe-mbo__wipe { border: 1px solid var(--bhe-mbo-line); z-index: 0; }
.bhe-mbo__wipe::before {
  content: ''; position: absolute; inset: 0; background: var(--bhe-mbo-ink);
  transform: scaleY(0); transform-origin: bottom; z-index: -1;
  transition: transform 0.4s cubic-bezier(0.7, 0, 0.2, 1);
}
.bhe-mbo__wipe span { transition: color 0.4s; }
.bhe-mbo__wipe:hover::before { transform: scaleY(1); }
.bhe-mbo__wipe:hover span { color: var(--bhe-mbo-bg); }

/* 4: split border slide */
.bhe-mbo__split span { position: relative; z-index: 2; transition: color 0.4s; }
.bhe-mbo__split::before,
.bhe-mbo__split::after {
  content: ''; position: absolute; top: 0; height: 100%; width: 0;
  background: var(--bhe-mbo-accent); transition: width 0.35s ease;
}
.bhe-mbo__split::before { left: 0; }
.bhe-mbo__split::after  { right: 0; }
.bhe-mbo__split:hover::before,
.bhe-mbo__split:hover::after { width: 50%; }
.bhe-mbo__split:hover span { color: var(--bhe-mbo-bg); }

@media (prefers-reduced-motion: reduce) {
  .bhe-mbo__draw rect, .bhe-mbo__corners::before, .bhe-mbo__corners::after,
  .bhe-mbo__wipe::before, .bhe-mbo__wipe span, .bhe-mbo__split::before, .bhe-mbo__split::after, .bhe-mbo__split span { transition: none; }
}
```

### 02. Modern 3D Skeuomorphic Button Press Effects

**Type:** Pure CSS
**Description:** Tangible buttons that lift on hover and sink on :active — a hard-plastic press with layered solid shadow, a soft neumorphic inset press, a 3D tilt slab, and a glossy depth pill. Physical, satisfying, and intentionally over-engineered. Best for Web3 dashboards, gaming landing pages, pricing tables, and any UI that should feel like it has weight.

**HTML:**
```html
<section class="bhe-3sk" aria-label="3D skeuomorphic button press effects demo">
  <div class="bhe-3sk__cell"><button class="bhe-3sk__btn bhe-3sk__plastic" type="button">Press Me</button><span class="bhe-3sk__label">Hard Plastic</span></div>
  <div class="bhe-3sk__cell"><button class="bhe-3sk__btn bhe-3sk__neu" type="button">Settings</button><span class="bhe-3sk__label">Soft Neumorphic</span></div>
  <div class="bhe-3sk__cell"><button class="bhe-3sk__btn bhe-3sk__slab" type="button">Confirm</button><span class="bhe-3sk__label">3D Tilt Slab</span></div>
  <div class="bhe-3sk__cell"><button class="bhe-3sk__btn bhe-3sk__pill" type="button">Upgrade</button><span class="bhe-3sk__label">Glossy Pill</span></div>
</section>
```

**CSS:**
```css
.bhe-3sk {
  --bhe-3sk-bg: #e8ebf0;
  --bhe-3sk-ink: #2a2d34;
  --bhe-3sk-muted: #7c818c;
  --bhe-3sk-primary: #5b6ef5;
  --bhe-3sk-primary-dark: #3a48b8;
  --bhe-3sk-green: #2bb673;
  --bhe-3sk-green-dark: #1c8a55;
  --bhe-3sk-surface: #f6f7fb;
  --bhe-3sk-shadow-light: #ffffff;
  --bhe-3sk-shadow-dark: #c4c9d4;

  background: var(--bhe-3sk-bg); color: var(--bhe-3sk-ink);
  font-family: 'Trebuchet MS', 'Segoe UI', sans-serif;
  display: flex; flex-wrap: wrap; gap: 3rem;
  align-items: center; justify-content: center;
  padding: 3rem 2rem; min-height: 320px;
  box-sizing: border-box;
}
.bhe-3sk *, .bhe-3sk *::before, .bhe-3sk *::after { box-sizing: border-box; }
.bhe-3sk__cell { display: flex; flex-direction: column; align-items: center; gap: 1.2rem; }
.bhe-3sk__label { font-size: 0.72rem; letter-spacing: 0.12em; color: var(--bhe-3sk-muted); text-transform: uppercase; }
.bhe-3sk__btn { font-family: inherit; font-weight: 700; font-size: 1rem; cursor: pointer; border: none; }

/* 1: hard plastic press */
.bhe-3sk__plastic {
  background: var(--bhe-3sk-primary); color: #fff;
  padding: 1rem 2.4rem; border-radius: 14px;
  box-shadow: 0 8px 0 var(--bhe-3sk-primary-dark), 0 14px 22px rgba(0,0,0,0.35);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.bhe-3sk__plastic:hover  { transform: translateY(-3px); box-shadow: 0 11px 0 var(--bhe-3sk-primary-dark), 0 20px 28px rgba(0,0,0,0.4); }
.bhe-3sk__plastic:active { transform: translateY(8px);  box-shadow: 0 0 0 var(--bhe-3sk-primary-dark),  0 4px 10px rgba(0,0,0,0.3); }

/* 2: neumorphic soft press */
.bhe-3sk__neu {
  background: var(--bhe-3sk-surface); color: var(--bhe-3sk-ink);
  padding: 1.1rem 2.6rem; border-radius: 16px;
  box-shadow: 6px 6px 14px var(--bhe-3sk-shadow-dark), -6px -6px 14px var(--bhe-3sk-shadow-light);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.bhe-3sk__neu:hover  { box-shadow: 8px 8px 18px var(--bhe-3sk-shadow-dark), -8px -8px 18px var(--bhe-3sk-shadow-light); transform: translateY(-2px); }
.bhe-3sk__neu:active { box-shadow: inset 5px 5px 12px var(--bhe-3sk-shadow-dark), inset -5px -5px 12px var(--bhe-3sk-shadow-light); transform: translateY(0); color: var(--bhe-3sk-primary); }

/* 3: 3D tilt slab */
.bhe-3sk__slab {
  background: var(--bhe-3sk-green); color: #fff;
  padding: 1rem 2.4rem; border-radius: 10px;
  box-shadow: -6px 6px 0 var(--bhe-3sk-green-dark);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.bhe-3sk__slab:hover  { transform: translate(3px,-3px);  box-shadow: -9px 9px 0 var(--bhe-3sk-green-dark); }
.bhe-3sk__slab:active { transform: translate(-6px,6px);  box-shadow: 0 0 0 var(--bhe-3sk-green-dark); }

/* 4: glossy pill */
.bhe-3sk__pill {
  position: relative;
  background: linear-gradient(180deg, #ff8a5b, #ef5a3c);
  color: #fff; padding: 1.05rem 2.8rem; border-radius: 40px;
  box-shadow: 0 6px 0 #b83a22, 0 12px 24px rgba(184,58,34,0.45), inset 0 2px 2px rgba(255,255,255,0.5);
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}
.bhe-3sk__pill:hover  { transform: translateY(-2px); box-shadow: 0 8px 0 #b83a22, 0 16px 30px rgba(184,58,34,0.5), inset 0 2px 2px rgba(255,255,255,0.5); }
.bhe-3sk__pill:active { transform: translateY(6px);  box-shadow: 0 0 0 #b83a22, 0 4px 12px rgba(184,58,34,0.4), inset 0 2px 2px rgba(255,255,255,0.5); }

@media (prefers-reduced-motion: reduce) {
  .bhe-3sk__plastic, .bhe-3sk__neu, .bhe-3sk__slab, .bhe-3sk__pill { transition: none; }
}
```

### 03. Neo-Brutalist & Cyberpunk Button Glow Effects

**Type:** Pure CSS
**Description:** Loud, attention-grabbing CTA effects on a high-contrast yellow surface — brutalist offset-shadow shift, cyberpunk cyan neon glow, a skewed glitch via filter: drop-shadow(), and an animated gradient border clip. Made for bold tech startups, Web3 launches, and creative agencies whose brand can carry the volume.

**HTML:**
```html
<section class="bhe-ncg" aria-label="Neo-brutalist cyberpunk button glow effects demo">
  <div class="bhe-ncg__cell"><button class="bhe-ncg__btn bhe-ncg__brutal"  type="button">Ship It</button><span class="bhe-ncg__label">Brutalist Shift</span></div>
  <div class="bhe-ncg__cell"><button class="bhe-ncg__btn bhe-ncg__neon"    type="button">Connect</button><span class="bhe-ncg__label">Cyberpunk Glow</span></div>
  <div class="bhe-ncg__cell"><button class="bhe-ncg__btn bhe-ncg__glitch"  type="button">Execute</button><span class="bhe-ncg__label">Glitch Shadow</span></div>
  <div class="bhe-ncg__cell"><button class="bhe-ncg__btn bhe-ncg__clip"    type="button">Launch</button><span class="bhe-ncg__label">Gradient Clip</span></div>
</section>
```

**CSS:**
```css
.bhe-ncg {
  --bhe-ncg-bg: #f5f54a;
  --bhe-ncg-ink: #000000;
  --bhe-ncg-surface: #ffffff;
  --bhe-ncg-muted: #333;
  --bhe-ncg-neon: #ff2e88;
  --bhe-ncg-cyan: #00fff0;

  background: var(--bhe-ncg-bg); color: var(--bhe-ncg-ink);
  font-family: 'Courier New', monospace;
  display: flex; flex-wrap: wrap; gap: 3rem;
  align-items: center; justify-content: center;
  padding: 3rem 2rem; min-height: 320px;
  box-sizing: border-box;
}
.bhe-ncg *, .bhe-ncg *::before, .bhe-ncg *::after { box-sizing: border-box; }
.bhe-ncg__cell { display: flex; flex-direction: column; align-items: center; gap: 1.2rem; }
.bhe-ncg__label { font-size: 0.7rem; letter-spacing: 0.1em; color: var(--bhe-ncg-muted); text-transform: uppercase; font-weight: 700; }
.bhe-ncg__btn { font-family: inherit; font-weight: 800; font-size: 1rem; cursor: pointer; text-transform: uppercase; letter-spacing: 0.05em; }

/* 1: brutalist offset shadow */
.bhe-ncg__brutal {
  background: var(--bhe-ncg-surface); color: var(--bhe-ncg-ink);
  border: 3px solid var(--bhe-ncg-ink); padding: 1rem 2.4rem;
  box-shadow: 6px 6px 0 var(--bhe-ncg-ink);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.bhe-ncg__brutal:hover  { transform: translate(-3px,-3px); box-shadow: 9px 9px 0 var(--bhe-ncg-neon); }
.bhe-ncg__brutal:active { transform: translate(6px,6px); box-shadow: 0 0 0 var(--bhe-ncg-ink); }

/* 2: neon glow */
.bhe-ncg__neon {
  background: transparent; color: var(--bhe-ncg-cyan);
  border: 2px solid var(--bhe-ncg-cyan); padding: 1rem 2.4rem;
  text-shadow: 0 0 4px var(--bhe-ncg-cyan);
  transition: 0.3s;
}
.bhe-ncg__neon:hover {
  background: var(--bhe-ncg-cyan); color: #001f1d;
  box-shadow: 0 0 8px var(--bhe-ncg-cyan), 0 0 24px var(--bhe-ncg-cyan), 0 0 48px var(--bhe-ncg-cyan);
  text-shadow: none;
}

/* 3: glitch drop-shadow */
.bhe-ncg__glitch {
  position: relative;
  background: var(--bhe-ncg-ink); color: var(--bhe-ncg-bg);
  border: none; padding: 1rem 2.4rem;
  transition: 0.15s;
}
.bhe-ncg__glitch:hover {
  filter: drop-shadow(3px 0 var(--bhe-ncg-neon)) drop-shadow(-3px 0 var(--bhe-ncg-cyan));
  transform: skewX(-3deg);
}

/* 4: gradient border clip — two-layer background trick so the gradient
   "border" sits inside the same stacking context as the button text.
   The outer layer is the moving gradient; the inner layer is the solid
   button fill, clipped to padding-box. background-clip + background-origin
   are paired so each layer maps to a different clipping region.
   Replaces an older z-index:-1 ::before that disappeared behind the
   .bhe-ncg wrapper's stacking context. */
.bhe-ncg__clip {
  position: relative;
  color: var(--bhe-ncg-ink);
  border: 3px solid transparent;
  padding: 1rem 2.4rem;
  background-image:
    linear-gradient(var(--bhe-ncg-surface), var(--bhe-ncg-surface)),
    linear-gradient(120deg, var(--bhe-ncg-neon), var(--bhe-ncg-cyan), var(--bhe-ncg-neon));
  background-origin: padding-box, border-box;
  background-clip: padding-box, border-box;
  background-size: auto, 300% 100%;
  background-position: 0 0, 0 0;
  background-repeat: no-repeat;
  transition: background-position 0.5s ease, filter 0.3s ease;
}
.bhe-ncg__clip:hover {
  background-position: 0 0, 100% 0;
  filter: drop-shadow(0 0 10px var(--bhe-ncg-neon));
}

@media (prefers-reduced-motion: reduce) {
  .bhe-ncg__brutal, .bhe-ncg__neon, .bhe-ncg__glitch, .bhe-ncg__clip { transition: none; }
}
```

### 04. Sliding Background Color Wipe Button Effects

**Type:** Pure CSS
**Description:** Conversion-optimized fills that reveal contrasting text on hover — left-to-right slide, diagonal skewed wipe, center scaleX expand, and an upward gradient wave. Each uses overflow: hidden plus a translating ::before. Built for SaaS landing CTAs, Get Started buttons, Buy Now blocks, and any primary action that needs a confident invitation.

**HTML:**
```html
<section class="bhe-sbg" aria-label="Sliding background color wipe button effects demo">
  <div class="bhe-sbg__cell"><button class="bhe-sbg__btn bhe-sbg__ltr"    type="button"><span>Get Started</span></button><span class="bhe-sbg__label">Slide Right</span></div>
  <div class="bhe-sbg__cell"><button class="bhe-sbg__btn bhe-sbg__diag"   type="button"><span>Buy Now</span></button><span class="bhe-sbg__label">Diagonal Wipe</span></div>
  <div class="bhe-sbg__cell"><button class="bhe-sbg__btn bhe-sbg__center" type="button"><span>Subscribe</span></button><span class="bhe-sbg__label">Center Expand</span></div>
  <div class="bhe-sbg__cell"><button class="bhe-sbg__btn bhe-sbg__wave"   type="button"><span>Join Free</span></button><span class="bhe-sbg__label">Gradient Wave</span></div>
</section>
```

**CSS:**
```css
.bhe-sbg {
  --bhe-sbg-bg: #fafaf7;
  --bhe-sbg-ink: #14110f;
  --bhe-sbg-muted: #8a857e;
  --bhe-sbg-c1: #ff5e3a;
  --bhe-sbg-c2: #1d3557;
  --bhe-sbg-c3: #06b6a4;
  --bhe-sbg-c4-a: #7c3aed;
  --bhe-sbg-c4-b: #ec4899;

  background: var(--bhe-sbg-bg); color: var(--bhe-sbg-ink);
  font-family: 'Verdana', 'Helvetica Neue', sans-serif;
  display: flex; flex-wrap: wrap; gap: 3rem;
  align-items: center; justify-content: center;
  padding: 3rem 2rem; min-height: 320px;
  box-sizing: border-box;
}
.bhe-sbg *, .bhe-sbg *::before, .bhe-sbg *::after { box-sizing: border-box; }
.bhe-sbg__cell { display: flex; flex-direction: column; align-items: center; gap: 1.2rem; }
.bhe-sbg__label { font-size: 0.72rem; letter-spacing: 0.12em; color: var(--bhe-sbg-muted); text-transform: uppercase; }

.bhe-sbg__btn {
  position: relative; font-family: inherit; font-weight: 700; font-size: 1rem;
  cursor: pointer; border: 2px solid currentColor; padding: 1rem 2.6rem;
  overflow: hidden; background: transparent; letter-spacing: 0.04em;
}
.bhe-sbg__btn span { position: relative; z-index: 2; transition: color 0.4s ease; }
.bhe-sbg__btn::before { content: ''; position: absolute; inset: 0; z-index: 1; }

/* 1: slide left to right */
.bhe-sbg__ltr { color: var(--bhe-sbg-c1); }
.bhe-sbg__ltr::before { background: var(--bhe-sbg-c1); transform: translateX(-100%); transition: transform 0.45s cubic-bezier(0.7, 0, 0.2, 1); }
.bhe-sbg__ltr:hover::before { transform: translateX(0); }
.bhe-sbg__ltr:hover span { color: var(--bhe-sbg-bg); }

/* 2: diagonal skewed wipe */
.bhe-sbg__diag { color: var(--bhe-sbg-c2); }
.bhe-sbg__diag::before { background: var(--bhe-sbg-c2); transform: translateX(-120%) skewX(-20deg); width: 130%; left: -15%; transition: transform 0.45s cubic-bezier(0.7, 0, 0.2, 1); }
.bhe-sbg__diag:hover::before { transform: translateX(0) skewX(-20deg); }
.bhe-sbg__diag:hover span { color: var(--bhe-sbg-bg); }

/* 3: scaleX center expand */
.bhe-sbg__center { color: var(--bhe-sbg-c3); }
.bhe-sbg__center::before { background: var(--bhe-sbg-c3); transform: scaleX(0); transform-origin: center; transition: transform 0.4s cubic-bezier(0.7, 0, 0.2, 1); }
.bhe-sbg__center:hover::before { transform: scaleX(1); }
.bhe-sbg__center:hover span { color: var(--bhe-sbg-bg); }

/* 4: gradient wave slide up */
.bhe-sbg__wave { color: var(--bhe-sbg-ink); border-color: var(--bhe-sbg-c4-a); }
.bhe-sbg__wave::before {
  background: linear-gradient(120deg, var(--bhe-sbg-c4-a), var(--bhe-sbg-c4-b));
  transform: translateY(100%); transition: transform 0.45s cubic-bezier(0.7, 0, 0.2, 1);
}
.bhe-sbg__wave:hover::before { transform: translateY(0); }
.bhe-sbg__wave:hover span { color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .bhe-sbg__btn::before, .bhe-sbg__btn span { transition: none; }
}
```

### 05. Liquid Fill & Organic Morphing Button Effects

**Type:** Pure CSS
**Description:** Playful fluid motion on a teal organic palette — a liquid rising fill with a wavy meniscus, a border-radius blob morph, a gooey scaling-circle expand, and a swirling wave keyframe loop. Suited to creative platforms, modern e-commerce, friendly user-centric branding, and anywhere stiffness reads as wrong.

**HTML:**
```html
<section class="bhe-lfo" aria-label="Liquid fill organic morphing button effects demo">
  <div class="bhe-lfo__cell"><button class="bhe-lfo__btn bhe-lfo__liquid" type="button"><span>Fill Up</span></button><span class="bhe-lfo__label">Liquid Rise</span></div>
  <div class="bhe-lfo__cell"><button class="bhe-lfo__btn bhe-lfo__morph"  type="button"><span>Explore</span></button><span class="bhe-lfo__label">Blob Morph</span></div>
  <div class="bhe-lfo__cell"><button class="bhe-lfo__btn bhe-lfo__goo"    type="button"><span>Add Item</span></button><span class="bhe-lfo__label">Gooey Expand</span></div>
  <div class="bhe-lfo__cell"><button class="bhe-lfo__btn bhe-lfo__flow"   type="button"><span>Dive In</span></button><span class="bhe-lfo__label">Wave Flow</span></div>
</section>
```

**CSS:**
```css
.bhe-lfo {
  --bhe-lfo-bg: #eef6f3;
  --bhe-lfo-ink: #16302a;
  --bhe-lfo-muted: #6f8a82;
  --bhe-lfo-liquid: #14b8a6;
  --bhe-lfo-liquid2: #0d9488;
  --bhe-lfo-grape: #8b5cf6;
  --bhe-lfo-coral: #fb7185;

  background: var(--bhe-lfo-bg); color: var(--bhe-lfo-ink);
  font-family: 'Geneva', 'Avenir', 'Segoe UI', sans-serif;
  display: flex; flex-wrap: wrap; gap: 3rem;
  align-items: center; justify-content: center;
  padding: 3rem 2rem; min-height: 320px;
  box-sizing: border-box;
}
.bhe-lfo *, .bhe-lfo *::before, .bhe-lfo *::after { box-sizing: border-box; }
.bhe-lfo__cell { display: flex; flex-direction: column; align-items: center; gap: 1.2rem; }
.bhe-lfo__label { font-size: 0.72rem; letter-spacing: 0.12em; color: var(--bhe-lfo-muted); text-transform: uppercase; }

.bhe-lfo__btn {
  position: relative; font-family: inherit; font-weight: 700; font-size: 1rem;
  cursor: pointer; border: none; padding: 1.05rem 2.6rem; overflow: hidden;
}
.bhe-lfo__btn span { position: relative; z-index: 2; transition: color 0.4s ease; }

/* 1: liquid rising fill */
.bhe-lfo__liquid {
  background: transparent; color: var(--bhe-lfo-liquid);
  border: 2px solid var(--bhe-lfo-liquid); border-radius: 12px;
}
.bhe-lfo__liquid::before {
  content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 0;
  background: var(--bhe-lfo-liquid); z-index: 1;
  border-radius: 40% 42% 0 0 / 18px 18px 0 0;
  transition: height 0.5s cubic-bezier(0.6, 0, 0.2, 1);
}
.bhe-lfo__liquid:hover::before { height: 130%; }
.bhe-lfo__liquid:hover span { color: var(--bhe-lfo-bg); }

/* 2: morphing border-radius */
.bhe-lfo__morph {
  background: var(--bhe-lfo-grape); color: #fff;
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
  transition: border-radius 0.6s ease, transform 0.6s ease;
}
.bhe-lfo__morph:hover { border-radius: 70% 30% 35% 65% / 65% 60% 40% 35%; transform: scale(1.05) rotate(-2deg); }

/* 3: gooey blob expand */
.bhe-lfo__goo {
  background: transparent; color: var(--bhe-lfo-coral);
  border: 2px solid var(--bhe-lfo-coral); border-radius: 50px;
}
.bhe-lfo__goo::before {
  content: ''; position: absolute; top: 50%; left: 50%; z-index: 1;
  width: 12px; height: 12px; background: var(--bhe-lfo-coral); border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.5s cubic-bezier(0.6, 0, 0.2, 1);
}
.bhe-lfo__goo:hover::before { transform: translate(-50%, -50%) scale(30); }
.bhe-lfo__goo:hover span { color: var(--bhe-lfo-bg); }

/* 4: animated wave */
.bhe-lfo__flow {
  background: var(--bhe-lfo-liquid2); color: #fff; border-radius: 14px;
}
.bhe-lfo__flow::before {
  content: ''; position: absolute; left: -50%; bottom: -160%;
  width: 200%; height: 200%; z-index: 1;
  background: rgba(255,255,255,0.25);
  border-radius: 45%;
  transition: bottom 0.6s ease;
}
.bhe-lfo__flow:hover::before { bottom: -130%; animation: bhe-lfo-swirl 4s linear infinite; }
@keyframes bhe-lfo-swirl { from { transform: rotate(0); } to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .bhe-lfo__btn, .bhe-lfo__btn::before, .bhe-lfo__btn span { transition: none; }
  .bhe-lfo__flow:hover::before { animation: none; }
}
```

### 06. Kinetic Text Flip & Icon Reveal Button Effects

**Type:** Pure CSS
**Description:** Typography and icon micro-interactions in compact pills — a vertical two-label flip, an Add-to-Cart text-out / icon-in reveal, per-letter staggered lift, and an arrow that slides in with text shift. Built for e-commerce product grids, nav menu items, app toolbars, and any compact button that earns its space by being legible at small sizes.

**HTML:**
```html
<section class="bhe-ktf" aria-label="Kinetic text flip icon reveal button effects demo">
  <div class="bhe-ktf__cell">
    <button class="bhe-ktf__btn bhe-ktf__flip" type="button"><span class="bhe-ktf__flipInner"><span>Download</span><span>Let&rsquo;s Go!</span></span></button>
    <span class="bhe-ktf__label">Vertical Flip</span>
  </div>
  <div class="bhe-ktf__cell">
    <button class="bhe-ktf__btn bhe-ktf__cart" type="button"><span class="bhe-ktf__txt">Add to Cart</span><span class="bhe-ktf__ico" aria-hidden="true">🛒</span></button>
    <span class="bhe-ktf__label">Icon Reveal</span>
  </div>
  <div class="bhe-ktf__cell">
    <button class="bhe-ktf__btn bhe-ktf__letters" type="button"><span class="bhe-ktf__l">C</span><span class="bhe-ktf__l">o</span><span class="bhe-ktf__l">n</span><span class="bhe-ktf__l">f</span><span class="bhe-ktf__l">i</span><span class="bhe-ktf__l">r</span><span class="bhe-ktf__l">m</span></button>
    <span class="bhe-ktf__label">Letter Stagger</span>
  </div>
  <div class="bhe-ktf__cell">
    <button class="bhe-ktf__btn bhe-ktf__arrow" type="button">Continue<span class="bhe-ktf__arrowIco" aria-hidden="true">→</span></button>
    <span class="bhe-ktf__label">Arrow Slide</span>
  </div>
</section>
```

**CSS:**
```css
.bhe-ktf {
  --bhe-ktf-bg: #f7f5f2;
  --bhe-ktf-ink: #1c1b1a;
  --bhe-ktf-muted: #8d8983;
  --bhe-ktf-accent: #e85d04;
  --bhe-ktf-dark: #1c1b1a;
  --bhe-ktf-blue: #2563eb;

  background: var(--bhe-ktf-bg); color: var(--bhe-ktf-ink);
  font-family: 'Tahoma', 'Segoe UI', sans-serif;
  display: flex; flex-wrap: wrap; gap: 3rem;
  align-items: center; justify-content: center;
  padding: 3rem 2rem; min-height: 320px;
  box-sizing: border-box;
}
.bhe-ktf *, .bhe-ktf *::before, .bhe-ktf *::after { box-sizing: border-box; }
.bhe-ktf__cell { display: flex; flex-direction: column; align-items: center; gap: 1.2rem; }
.bhe-ktf__label { font-size: 0.72rem; letter-spacing: 0.12em; color: var(--bhe-ktf-muted); text-transform: uppercase; }

.bhe-ktf__btn {
  position: relative; font-family: inherit; font-weight: 700; font-size: 1rem;
  cursor: pointer; border: none; padding: 1.05rem 2.6rem; overflow: hidden;
  letter-spacing: 0.03em;
}

/* 1: vertical text flip */
.bhe-ktf__flip {
  background: var(--bhe-ktf-accent); color: #fff; border-radius: 10px;
  height: 52px; display: inline-flex; align-items: center;
}
.bhe-ktf__flipInner { position: relative; display: block; height: 1.2em; overflow: hidden; }
.bhe-ktf__flipInner > span { display: block; transition: transform 0.4s cubic-bezier(0.7, 0, 0.2, 1); }
.bhe-ktf__flipInner > span + span { position: absolute; top: 100%; left: 0; }
.bhe-ktf__flip:hover .bhe-ktf__flipInner > span { transform: translateY(-100%); }

/* 2: icon slide-in, text slide-out */
.bhe-ktf__cart {
  background: var(--bhe-ktf-dark); color: var(--bhe-ktf-bg); border-radius: 10px;
  min-width: 180px; height: 52px;
}
.bhe-ktf__txt, .bhe-ktf__ico {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  transition: transform 0.4s cubic-bezier(0.7, 0, 0.2, 1), opacity 0.4s;
}
.bhe-ktf__txt { transform: translateY(0); }
.bhe-ktf__ico { transform: translateY(100%); opacity: 0; font-size: 1.4rem; }
.bhe-ktf__cart:hover .bhe-ktf__txt { transform: translateY(-100%); opacity: 0; }
.bhe-ktf__cart:hover .bhe-ktf__ico { transform: translateY(0); opacity: 1; }

/* 3: per-letter stagger */
.bhe-ktf__letters {
  background: transparent; color: var(--bhe-ktf-blue);
  border: 2px solid var(--bhe-ktf-blue); border-radius: 10px;
}
.bhe-ktf__l { display: inline-block; transition: transform 0.3s ease; }
.bhe-ktf__letters:hover .bhe-ktf__l { transform: translateY(-4px); }
.bhe-ktf__letters:hover .bhe-ktf__l:nth-child(2) { transition-delay: 0.03s; }
.bhe-ktf__letters:hover .bhe-ktf__l:nth-child(3) { transition-delay: 0.06s; }
.bhe-ktf__letters:hover .bhe-ktf__l:nth-child(4) { transition-delay: 0.09s; }
.bhe-ktf__letters:hover .bhe-ktf__l:nth-child(5) { transition-delay: 0.12s; }
.bhe-ktf__letters:hover .bhe-ktf__l:nth-child(6) { transition-delay: 0.15s; }
.bhe-ktf__letters:hover .bhe-ktf__l:nth-child(7) { transition-delay: 0.18s; }

/* 4: arrow reveal */
.bhe-ktf__arrow {
  background: var(--bhe-ktf-accent); color: #fff; border-radius: 40px;
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding-right: 3rem; transition: padding 0.35s ease;
}
.bhe-ktf__arrowIco {
  position: absolute; right: 1.4rem;
  opacity: 0; transform: translateX(-8px); transition: 0.35s ease; font-size: 1.2rem;
}
.bhe-ktf__arrow:hover { padding-right: 3.4rem; padding-left: 2.2rem; }
.bhe-ktf__arrow:hover .bhe-ktf__arrowIco { opacity: 1; transform: translateX(0); }

@media (prefers-reduced-motion: reduce) {
  .bhe-ktf__btn, .bhe-ktf__flipInner > span, .bhe-ktf__txt, .bhe-ktf__ico,
  .bhe-ktf__l, .bhe-ktf__arrowIco { transition: none; }
}
```

### 07. Liquid Fill

**Type:** Pure CSS
**Description:** Background floods upward like liquid filling a container via pseudo-element height transition.

**HTML:**
```html
<button class="bhe-07__btn">Hover Me</button>
```

**CSS:**
```css
.bhe-07__btn {
  padding: 12px 32px;
  font-size: 13.5px;
  font-family: inherit;
  font-weight: 500;
  border-radius: 8px;
  cursor: pointer;
  letter-spacing: 0.02em;
  background: transparent;
  color: inherit;
}

.bhe-07__btn {
  position: relative;
  color: #7c6cff;
  background: transparent;
  border: 2px solid #7c6cff;
  overflow: hidden;
  transition: color 0.4s;
  z-index: 0;
}
.bhe-07__btn::before {
  content: "";
  position: absolute;
  bottom: -2px;
  left: -2px;
  right: -2px;
  height: 0;
  background: #7c6cff;
  transition: height 0.45s cubic-bezier(0.23, 1, 0.32, 1);
  z-index: -1;
}
.bhe-07__btn:hover {
  color: #fff;
}
.bhe-07__btn:hover::before {
  height: calc(100% + 4px);
}
```

### 08. Magnetic Border

**Type:** Pure CSS
**Description:** A conic-gradient border spins into view on hover and the button lifts with a coloured glow.

**HTML:**
```html
<button class="bhe-08__wrap">
  <span class="bhe-08__inner">Magnetic Border</span>
</button>
```

**CSS:**
```css
.bhe-08__wrap {
  font-family: inherit;
  letter-spacing: 0.02em;
  background: transparent;
  color: inherit;
}

.bhe-08__wrap {
  position: relative;
  padding: 2px;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: 8px;
  display: inline-block;
}
.bhe-08__wrap::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 10px;
  background: conic-gradient(#7c6cff, #ff6c8a, #3de8f5, #1ed98a, #7c6cff);
  opacity: 0;
  transition: opacity 0.3s;
  animation: border-spin 3s linear infinite paused;
}
.bhe-08__wrap:hover::before {
  opacity: 1;
  animation-play-state: running;
}
@keyframes border-spin {
  to {
    transform: rotate(360deg);
  }
}
.bhe-08__inner {
  display: block;
  padding: 12px 32px;
  border-radius: 7px;
  background: #111118;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  transition:
    transform 0.3s,
    box-shadow 0.3s;
}
.bhe-08__wrap:hover .bhe-08__inner {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(124, 108, 255, 0.3);
}

@media (prefers-reduced-motion: reduce) {
  .bhe-08__wrap,
  .bhe-08__wrap * {
    animation: none !important;
  }
}

```

### 09. Glitch Slice

**Type:** Pure CSS
**Description:** Two color-shifted clones slice through in staggered horizontal bands, simulating a signal glitch.

**HTML:**
```html
<button class="bhe-09__btn" data-text="GLITCH">GLITCH</button>
```

**CSS:**
```css
.bhe-09__btn {
  padding: 12px 32px;
  font-size: 13.5px;
  font-family: inherit;
  font-weight: 500;
  border-radius: 8px;
  cursor: pointer;
  letter-spacing: 0.02em;
  background: transparent;
  color: inherit;
}

.bhe-09__btn {
  position: relative;
  overflow: hidden;
}
.bhe-09__btn::before,
.bhe-09__btn::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
}
.bhe-09__btn::before {
  background: #ff6c8a;
  color: #fff;
  clip-path: polygon(0 30%, 100% 30%, 100% 50%, 0 50%);
}
.bhe-09__btn::after {
  background: #7c6cff;
  color: #fff;
  clip-path: polygon(0 55%, 100% 55%, 100% 75%, 0 75%);
}
.bhe-09__btn:hover::before {
  animation: glitch1 0.3s steps(1) infinite;
}
.bhe-09__btn:hover::after {
  animation: glitch2 0.3s steps(1) infinite 0.05s;
}
@keyframes glitch1 {
  50% {
    opacity: 1;
    transform: translateX(-4px);
  }
}
@keyframes glitch2 {
  50% {
    opacity: 1;
    transform: translateX(4px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .bhe-09__btn,
  .bhe-09__btn * {
    animation: none !important;
  }
}

```

### 10. Neon Pulse

**Type:** Pure CSS
**Description:** Multi-layered box-shadows create a breathing neon glow that pulses rhythmically on hover.

**HTML:**
```html
<button class="bhe-10__btn">NEON</button>
```

**CSS:**
```css
.bhe-10__btn {
  padding: 12px 32px;
  font-size: 13.5px;
  font-family: inherit;
  font-weight: 500;
  border-radius: 8px;
  cursor: pointer;
  background: transparent;
  color: inherit;
}

.bhe-10__btn {
  color: #2ecc8a;
  border: 2px solid #2ecc8a;
  background: transparent;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  transition: all 0.3s;
}
.bhe-10__btn:hover {
  background: rgba(46, 204, 138, 0.1);
  animation: neonpulse 1.2s ease-in-out infinite;
}
@keyframes neonpulse {
  0%,
  100% {
    box-shadow:
      0 0 12px #2ecc8a,
      0 0 28px rgba(46, 204, 138, 0.35);
  }
  50% {
    box-shadow:
      0 0 20px #2ecc8a,
      0 0 50px rgba(46, 204, 138, 0.55),
      0 0 80px rgba(46, 204, 138, 0.2);
  }
}

@media (prefers-reduced-motion: reduce) {
  .bhe-10__btn,
  .bhe-10__btn * {
    animation: none !important;
  }
}

```

### 11. Split Reveal

**Type:** Pure CSS
**Description:** The button splits at the centre — top half slides up, bottom half slides down — both halves show the same text.

**HTML:**
```html
<button class="bhe-11__btn">
  <span class="bhe-11__top">Split Reveal</span>
  <span class="bhe-11__bottom" aria-hidden="true">Split Reveal</span>
</button>
```

**CSS:**
```css
.bhe-11__btn {
  padding: 12px 32px;
  font-family: inherit;
  border-radius: 8px;
  letter-spacing: 0.02em;
  background: transparent;
  color: inherit;
}

.bhe-11__btn {
  position: relative;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.15);
  background: #17171f;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.bhe-11__top {
  display: block;
  clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
  transition: transform 0.35s cubic-bezier(0.23, 1, 0.32, 1);
}
.bhe-11__bottom {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #7c6cff;
  clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
  transform: translateY(50%);
  transition: transform 0.35s cubic-bezier(0.23, 1, 0.32, 1);
}
.bhe-11__btn:hover .bhe-11__top {
  transform: translateY(-50%);
}
.bhe-11__btn:hover .bhe-11__bottom {
  transform: translateY(0);
}
```

### 12. Diagonal Shutter

**Type:** Pure CSS
**Description:** A skewed gradient panel wipes diagonally across the button like a camera shutter opening.

**HTML:**
```html
<button class="bhe-12__btn">Hover Me</button>
```

**CSS:**
```css
.bhe-12__btn {
  padding: 12px 32px;
  font-size: 13.5px;
  font-family: inherit;
  font-weight: 500;
  border-radius: 8px;
  cursor: pointer;
  letter-spacing: 0.02em;
  color: inherit;
  background: transparent;
}

.bhe-12__btn {
  position: relative;
  overflow: hidden;
  z-index: 0;
  border: 1px solid rgba(255, 255, 255, 0.18);
  transition:
    color 0.3s,
    border-color 0.3s;
}
.bhe-12__btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -105%;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #7c6cff 0%, #ff6c8a 100%);
  transition: left 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  z-index: -1;
  transform: skewX(-15deg);
}
.bhe-12__btn:hover::before {
  left: 0;
}
.bhe-12__btn:hover {
  border-color: transparent;
}
```

### 13. Elastic Lift

**Type:** Pure CSS
**Description:** A hard bottom shadow creates a physical 3D effect — elastic cubic-bezier makes it bounce on hover.

**HTML:**
```html
<button class="bhe-13__btn">Click Me</button>
```

**CSS:**
```css
.bhe-13__btn {
  padding: 12px 32px;
  font-size: 13.5px;
  font-family: inherit;
  font-weight: 500;
  border-radius: 8px;
  cursor: pointer;
  letter-spacing: 0.02em;
  background: transparent;
  color: inherit;
}

.bhe-13__btn {
  background: #7c6cff;
  color: #fff;
  border: none;
  box-shadow: 0 4px 0 #4a3aad;
  transform: translateY(0);
  transition:
    transform 0.12s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.12s;
}
.bhe-13__btn:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 0 #4a3aad;
}
.bhe-13__btn:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #4a3aad;
}
```

### 14. Center Underline Draw

**Type:** Pure CSS
**Description:** A gradient underline expands symmetrically outward from the center of the button text.

**HTML:**
```html
<button class="bhe-14__btn">Hover Me</button>
```

**CSS:**
```css
.bhe-14__btn {
  padding: 12px 32px;
  font-size: 13.5px;
  font-family: inherit;
  font-weight: 500;
  cursor: pointer;
  letter-spacing: 0.02em;
  color: inherit;
  background: transparent;
}

.bhe-14__btn {
  position: relative;
  background: transparent;
  border: none;
}
.bhe-14__btn::after {
  content: "";
  position: absolute;
  bottom: 5px;
  left: 50%;
  right: 50%;
  height: 2px;
  background: linear-gradient(90deg, #7c6cff, #ff6c8a);
  transition:
    left 0.4s cubic-bezier(0.23, 1, 0.32, 1),
    right 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  border-radius: 2px;
}
.bhe-14__btn:hover::after {
  left: 32px;
  right: 32px;
}
```

### 15. 3D Flip

**Type:** Pure CSS
**Description:** The button flips on its X axis to reveal a second face — pure CSS 3D transform perspective.

**HTML:**
```html
<div class="bhe-15__wrapper">
  <button class="bhe-15__btn">
    <span class="bhe-15__front">Hover Me</span>
    <span class="bhe-15__back">Flipped!</span>
  </button>
</div>
```

**CSS:**
```css
.bhe-15__wrapper {
  font-size: 13.5px;
  font-family: inherit;
  font-weight: 500;
  cursor: pointer;
  letter-spacing: 0.02em;
  background: transparent;
  color: inherit;
}

.bhe-15__wrapper {
  perspective: 600px;
  display: inline-block;
}
.bhe-15__btn {
  position: relative;
  display: block;
  transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  background: transparent;
  border: none;
}
.bhe-15__front,
.bhe-15__back {
  display: block;
  padding: 12px 32px;
  border-radius: 8px;
  backface-visibility: hidden;
}
.bhe-15__front {
  background: #ff6c8a;
  color: #fff;
}
.bhe-15__back {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #7c6cff;
  color: #fff;
  transform: rotateX(180deg);
}
.bhe-15__wrapper:hover .bhe-15__btn {
  transform: rotateX(180deg);
}
```

### 16. Particle Burst

**Type:** Pure CSS
**Description:** Six colored dots shoot out in all directions from the center of the button on hover.

**HTML:**
```html
<button class="bhe-16__btn">
  <span>Burst!</span>
  <span class="bhe-16__dot"></span>
  <span class="bhe-16__dot"></span>
  <span class="bhe-16__dot"></span>
  <span class="bhe-16__dot"></span>
  <span class="bhe-16__dot"></span>
  <span class="bhe-16__dot"></span>
</button>
```

**CSS:**
```css
.bhe-16__btn {
  padding: 12px 32px;
  font-size: 13.5px;
  font-family: inherit;
  font-weight: 500;
  cursor: pointer;
  letter-spacing: 0.02em;
  color: inherit;
  background: transparent;
}

.bhe-16__btn {
  position: relative;
  overflow: visible;
}
.bhe-16__dot {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  margin: -3px 0 0 -3px;
  opacity: 0;
}
.bhe-16__btn:hover .bhe-16__dot {
  animation: burst 0.65s ease-out forwards;
}
.bhe-16__dot:nth-child(1) {
  background: #7c6cff;
  --dx: -52px;
  --dy: -42px;
}
.bhe-16__dot:nth-child(2) {
  background: #ff6c8a;
  --dx: 52px;
  --dy: -42px;
  animation-delay: 0.05s;
}
.bhe-16__dot:nth-child(3) {
  background: #2ecc8a;
  --dx: -62px;
  --dy: 2px;
  animation-delay: 0.02s;
}
.bhe-16__dot:nth-child(4) {
  background: #f5a623;
  --dx: 62px;
  --dy: 2px;
  animation-delay: 0.07s;
}
.bhe-16__dot:nth-child(5) {
  background: #7c6cff;
  --dx: -36px;
  --dy: 46px;
  animation-delay: 0.04s;
}
.bhe-16__dot:nth-child(6) {
  background: #ff6c8a;
  --dx: 36px;
  --dy: 46px;
  animation-delay: 0.03s;
}
@keyframes burst {
  0% {
    opacity: 1;
  }
  100% {
    transform: translate(var(--dx), var(--dy)) scale(0);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bhe-16__btn,
  .bhe-16__btn * {
    animation: none !important;
  }
}

```

### 17. Slide Doors

**Type:** Pure CSS
**Description:** Two panels slide in from opposite sides and meet in the middle to fill the entire button.

**HTML:**
```html
<button class="bhe-17__btn"><span class="bhe-17__label">Slide Doors</span></button>
```

**CSS:**
```css
.bhe-17__btn {
  padding: 12px 32px;
  font-size: 13.5px;
  font-family: inherit;
  font-weight: 500;
  border-radius: 8px;
  cursor: pointer;
  letter-spacing: 0.02em;
  background: transparent;
  color: inherit;
}

.bhe-17__btn {
  position: relative;
  overflow: hidden;
}
.bhe-17__btn::before,
.bhe-17__btn::after {
  content: "";
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  background: #7c6cff;
  transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}
.bhe-17__btn::before {
  left: 0;
  transform: translateX(-101%);
}
.bhe-17__btn::after {
  right: 0;
  transform: translateX(101%);
}
.bhe-17__btn .bhe-17__label {
  position: relative;
  z-index: 1;
  transition: color 0.4s;
}
.bhe-17__btn:hover::before {
  transform: translateX(0);
}
.bhe-17__btn:hover::after {
  transform: translateX(0);
}
.bhe-17__btn:hover .bhe-17__label {
  color: #fff;
}
```

### 18. Typewriter Retype

**Type:** CSS + JS
**Description:** Text erases and retypes itself character by character on hover — like a live terminal cursor.

**HTML:**
```html
<button class="bhe-18__btn">
  <span class="bhe-18__text">console.log()</span>
  <span class="bhe-18__cursor"></span>
</button>
```

**CSS:**
```css
.bhe-18__btn {
  padding: 12px 32px;
  font-size: 13.5px;
  font-weight: 500;
  border-radius: 8px;
  cursor: pointer;
  letter-spacing: 0.02em;
  color: inherit;
  background: transparent;
}

.bhe-18__btn {
  font-family: monospace;
}
.bhe-18__cursor {
  display: inline-block;
  width: 2px;
  height: 13px;
  background: currentColor;
  margin-left: 2px;
  vertical-align: middle;
  opacity: 0;
}
.bhe-18__btn:hover .bhe-18__cursor {
  animation: blink 0.6s step-end infinite;
}
@keyframes blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bhe-18__btn,
  .bhe-18__btn * {
    animation: none !important;
  }
}

```

**JS:**
```js
document.querySelectorAll(".bhe-18__btn").forEach(function (btn) {
  const txt = btn.querySelector(".bhe-18__text");
  if (!txt) return;
  const full = txt.textContent;
  btn.addEventListener("mouseenter", function () {
    let i = full.length;
    const erase = setInterval(function () {
      txt.textContent = full.slice(0, --i);
      if (i === 0) {
        clearInterval(erase);
        retype();
      }
    }, 55);
    function retype() {
      let j = 0;
      const write = setInterval(function () {
        txt.textContent = full.slice(0, ++j);
        if (j === full.length) clearInterval(write);
      }, 55);
    }
  });
});
```

### 19. Hard Shadow Shift

**Type:** Pure CSS
**Description:** Brutalist hard offset shadow shifts both position and color on hover, snaps back on click.

**HTML:**
```html
<button class="bhe-19__btn">CLICK ME</button>
```

**CSS:**
```css
.bhe-19__btn {
  padding: 12px 32px;
  font-size: 13.5px;
  font-family: inherit;
  border-radius: 8px;
  cursor: pointer;
  background: transparent;
  color: inherit;
}

.bhe-19__btn {
  color: #0a0a0f;
  background: #f0eeff;
  border: 2px solid #0a0a0f;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 700;
  box-shadow: 4px 4px 0 #0a0a0f;
  transition:
    box-shadow 0.15s,
    transform 0.15s;
}
.bhe-19__btn:hover {
  box-shadow: 8px 8px 0 #7c6cff;
  transform: translate(-2px, -2px);
}
.bhe-19__btn:active {
  box-shadow: 2px 2px 0 #0a0a0f;
  transform: translate(2px, 2px);
}
```

### 20. Ripple Wave

**Type:** CSS + JS
**Description:** A ripple circle radiates outward from the exact point of your click, like Material Design.

**HTML:**
```html
<button class="bhe-20__btn">Click Me</button>
```

**CSS:**
```css
.bhe-20__btn {
  padding: 12px 32px;
  font-size: 13.5px;
  font-family: inherit;
  font-weight: 500;
  cursor: pointer;
  letter-spacing: 0.02em;
  color: inherit;
  background: transparent;
}

.bhe-20__btn {
  position: relative;
  overflow: hidden;
}
.bhe-20__ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.32);
  transform: scale(0);
  animation: rwave 0.7s linear;
  pointer-events: none;
}
@keyframes rwave {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bhe-20__btn,
  .bhe-20__btn * {
    animation: none !important;
  }
}

```

**JS:**
```js
document.querySelectorAll(".bhe-20__btn").forEach(function (btn) {
  btn.addEventListener("click", function (e) {
    const c = document.createElement("span");
    const d = Math.max(btn.offsetWidth, btn.offsetHeight);
    const r = btn.getBoundingClientRect();
    c.className = "bhe-20__ripple";
    c.style.cssText =
      "width:" + d + "px;height:" + d + "px;" +
      "left:" + (e.clientX - r.left - d / 2) + "px;" +
      "top:" + (e.clientY - r.top - d / 2) + "px";
    btn.appendChild(c);
    c.addEventListener("animationend", function () { c.remove(); });
  });
});
```

### 21. Rainbow Border Spin

**Type:** Pure CSS
**Description:** A conic-gradient border spins continuously using the CSS mask-composite technique.

**HTML:**
```html
<button class="bhe-21__btn">Hover Me</button>
```

**CSS:**
```css
.bhe-21__btn {
  font-size: 13.5px;
  font-family: inherit;
  font-weight: 500;
  cursor: pointer;
  letter-spacing: 0.02em;
  color: inherit;
  background: transparent;
}

.bhe-21__btn {
  position: relative;
  border: none;
}
.bhe-21__btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 8px;
  padding: 2px;
  background: conic-gradient(#7c6cff, #ff6c8a, #2ecc8a, #f5a623, #7c6cff);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.3s;
}
.bhe-21__btn:hover::before {
  opacity: 1;
  animation: spin 2s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .bhe-21__btn,
  .bhe-21__btn * {
    animation: none !important;
  }
}

```

### 22. Morph Shape

**Type:** Pure CSS
**Description:** The button border-radius morphs from rectangle to pill and color transitions simultaneously.

**HTML:**
```html
<button class="bhe-22__btn">Hover Me</button>
```

**CSS:**
```css
.bhe-22__btn {
  padding: 12px 32px;
  font-size: 13.5px;
  font-family: inherit;
  font-weight: 500;
  cursor: pointer;
  letter-spacing: 0.02em;
  background: transparent;
  color: inherit;
}

.bhe-22__btn {
  background: #ff6c8a;
  color: #fff;
  border: none;
  transition:
    border-radius 0.4s cubic-bezier(0.23, 1, 0.32, 1),
    background 0.3s,
    transform 0.2s;
}
.bhe-22__btn:hover {
  border-radius: 50px;
  background: #7c6cff;
  transform: scaleX(0.92);
}
```

### 23. Icon Slide In

**Type:** Pure CSS
**Description:** An arrow slides in from outside as the button padding expands to make room for it.

**HTML:**
```html
<button class="bhe-23__btn">Get Started<span class="bhe-23__icon">→</span></button>
```

**CSS:**
```css
.bhe-23__btn {
  padding: 12px 32px;
  font-size: 13.5px;
  font-family: inherit;
  font-weight: 500;
  border-radius: 8px;
  cursor: pointer;
  letter-spacing: 0.02em;
  background: transparent;
  color: inherit;
}

.bhe-23__btn {
  position: relative;
  overflow: hidden;
  transition: padding 0.35s cubic-bezier(0.23, 1, 0.32, 1);
}
.bhe-23__icon {
  position: absolute;
  right: -24px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  transition:
    right 0.35s cubic-bezier(0.23, 1, 0.32, 1),
    opacity 0.3s;
}
.bhe-23__btn:hover {
  padding-right: 52px;
}
.bhe-23__btn:hover .bhe-23__icon {
  right: 16px;
  opacity: 1;
}
```

### 24. Cursor Spotlight

**Type:** CSS + JS
**Description:** A soft radial light follows your cursor around inside the button, illuminating where you hover.

**HTML:**
```html
<button class="bhe-24__btn">
  <span class="bhe-24__glow"></span>
  Hover Me
</button>
```

**CSS:**
```css
.bhe-24__btn {
  padding: 12px 32px;
  font-size: 13.5px;
  font-family: inherit;
  font-weight: 500;
  cursor: pointer;
  letter-spacing: 0.02em;
  color: inherit;
  background: transparent;
}

.bhe-24__btn {
  position: relative;
  overflow: hidden;
}
.bhe-24__glow {
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(124, 108, 255, 0.28) 0%, transparent 70%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
  transform: translate(-50%, -50%);
}
.bhe-24__btn:hover .bhe-24__glow {
  opacity: 1;
}
```

**JS:**
```js
document.querySelectorAll(".bhe-24__btn").forEach(function (btn) {
  const glow = btn.querySelector(".bhe-24__glow");
  if (!glow) return;
  btn.addEventListener("mousemove", function (e) {
    const r = btn.getBoundingClientRect();
    glow.style.left = e.clientX - r.left + "px";
    glow.style.top = e.clientY - r.top + "px";
  });
});
```

### 25. Stagger Fill

**Type:** Pure CSS
**Description:** Five vertical segments fill upward one by one in a cascading waterfall sequence.

**HTML:**
```html
<button class="bhe-25__btn">
  <span class="bhe-25__seg"></span>
  <span class="bhe-25__seg"></span>
  <span class="bhe-25__seg"></span>
  <span class="bhe-25__seg"></span>
  <span class="bhe-25__seg"></span>
  <span class="bhe-25__label">Hover Me</span>
</button>
```

**CSS:**
```css
.bhe-25__btn {
  padding: 12px 32px;
  font-size: 13.5px;
  font-family: inherit;
  font-weight: 500;
  border-radius: 8px;
  cursor: pointer;
  letter-spacing: 0.02em;
  background: transparent;
  color: inherit;
}

.bhe-25__btn {
  position: relative;
  overflow: hidden;
}
.bhe-25__seg {
  position: absolute;
  top: 0;
  width: 20%;
  height: 100%;
  background: #7c6cff;
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}
.bhe-25__seg:nth-child(1) {
  left: 0%;
  transition-delay: 0s;
}
.bhe-25__seg:nth-child(2) {
  left: 20%;
  transition-delay: 0.04s;
}
.bhe-25__seg:nth-child(3) {
  left: 40%;
  transition-delay: 0.08s;
}
.bhe-25__seg:nth-child(4) {
  left: 60%;
  transition-delay: 0.12s;
}
.bhe-25__seg:nth-child(5) {
  left: 80%;
  transition-delay: 0.16s;
}
.bhe-25__label {
  position: relative;
  z-index: 1;
  transition: color 0.4s 0.1s;
}
.bhe-25__btn:hover .bhe-25__seg {
  transform: scaleY(1);
}
.bhe-25__btn:hover .bhe-25__label {
  color: #fff;
}
```

### 26. Sunburst Expand

**Type:** Pure CSS
**Description:** Spinning conic-gradient rays fan out behind the button on hover, glowing like a sunburst.

**HTML:**
```html
<button class="bhe-26__btn">
  <div class="bhe-26__rays"></div>
  <span class="bhe-26__label">Sunburst</span>
</button>
```

**CSS:**
```css
.bhe-26__btn {
  font-family: inherit;
  letter-spacing: 0.02em;
  background: transparent;
  color: inherit;
}

.bhe-26__btn {
  position: relative;
  overflow: hidden;
  padding: 12px 40px;
  border-radius: 50px;
  border: none;
  background: #f5a84a;
  color: #0a0a0f;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition:
    transform 0.3s,
    box-shadow 0.3s;
}
.bhe-26__btn:hover {
  transform: scale(1.06);
  box-shadow: 0 8px 24px rgba(245, 168, 74, 0.5);
}
.bhe-26__rays {
  position: absolute;
  inset: -40%;
  background: conic-gradient(
    transparent 0deg,
    rgba(255, 255, 255, 0.2) 10deg,
    transparent 20deg,
    rgba(255, 255, 255, 0.2) 30deg,
    transparent 40deg,
    rgba(255, 255, 255, 0.2) 50deg,
    transparent 60deg,
    rgba(255, 255, 255, 0.2) 70deg,
    transparent 80deg,
    rgba(255, 255, 255, 0.2) 90deg,
    transparent 100deg,
    rgba(255, 255, 255, 0.2) 110deg,
    transparent 120deg,
    rgba(255, 255, 255, 0.2) 130deg,
    transparent 140deg,
    rgba(255, 255, 255, 0.2) 150deg,
    transparent 160deg,
    rgba(255, 255, 255, 0.2) 170deg,
    transparent 180deg,
    rgba(255, 255, 255, 0.2) 190deg,
    transparent 200deg,
    rgba(255, 255, 255, 0.2) 210deg,
    transparent 220deg,
    rgba(255, 255, 255, 0.2) 230deg,
    transparent 240deg,
    rgba(255, 255, 255, 0.2) 250deg,
    transparent 260deg,
    rgba(255, 255, 255, 0.2) 270deg,
    transparent 280deg,
    rgba(255, 255, 255, 0.2) 290deg,
    transparent 300deg,
    rgba(255, 255, 255, 0.2) 310deg,
    transparent 320deg,
    rgba(255, 255, 255, 0.2) 330deg,
    transparent 340deg,
    rgba(255, 255, 255, 0.2) 350deg
  );
  opacity: 0;
  transition: opacity 0.3s;
}
.bhe-26__btn:hover .bhe-26__rays {
  opacity: 1;
  animation: sunburst-spin 6s linear infinite;
}
@keyframes sunburst-spin {
  to {
    transform: rotate(360deg);
  }
}
.bhe-26__label {
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .bhe-26__btn,
  .bhe-26__btn * {
    animation: none !important;
  }
}

```

### 27. 3D Press

**Type:** Pure CSS
**Description:** Layered box-shadows create a physical 3D extrusion. Hovering lifts the button; clicking presses it flush into the surface.

**HTML:**
```html
<button class="bhe-27__btn">3D Press</button>
```

**CSS:**
```css
.bhe-27__btn {
  padding: 12px 32px;
  font-size: 13.5px;
  font-family: inherit;
  font-weight: 500;
  cursor: pointer;
  letter-spacing: 0.02em;
  background: transparent;
  color: inherit;
}

.bhe-27__btn {
  background: #7c6cff;
  color: #fff;
  border: none;
  border-radius: 8px;
  box-shadow:
    0 6px 0 #4a3ab0,
    0 8px 16px rgba(74, 58, 176, 0.4);
  transition:
    transform 0.15s cubic-bezier(0.23, 1, 0.32, 1),
    box-shadow 0.15s cubic-bezier(0.23, 1, 0.32, 1);
}
.bhe-27__btn:hover {
  transform: translateY(-3px);
  box-shadow:
    0 9px 0 #4a3ab0,
    0 14px 24px rgba(74, 58, 176, 0.45);
}
.bhe-27__btn:active {
  transform: translateY(4px);
  box-shadow:
    0 2px 0 #4a3ab0,
    0 4px 8px rgba(74, 58, 176, 0.3);
}
```

---
## 43 CSS Button Designs

URL: https://codefronts.com/components/css-buttons/
Description: 43 hand-coded CSS buttons — real-world materials like brushed brass and vinyl, interactive use-case buttons (add-to-cart, download, like, delete), and click-effect studies: magnetic mercury ripple, brutalist glitch, neon plasma burst, clay press, ink spread, and particle shards.
Demo count: 43

### 01. Add to Cart

**Type:** CSS + JS
**Description:** A real e-commerce state machine: click fills a green progress bar along the bottom edge, snaps to a success state with a particle burst, then auto-resets after two seconds.

**HTML:**
```html
<div class="btn-cart-surface">
  <button class="btn-cart">
    <span class="btn-cart-icon" aria-hidden="true">🛒</span>
    <span class="btn-cart-text">Add to Cart</span>
    <span class="btn-cart-bar" aria-hidden="true"></span>
    <span class="btn-cart-check">✓&nbsp;Added!</span>
    <span class="btn-cart-particles" aria-hidden="true"></span>
  </button>
</div>
```

**CSS:**
```css
.btn-cart-surface {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 40px;
  background: #f2efe9;
  border-radius: 16px;
}
.btn-cart {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 200px;
  padding: 15px 30px;
  border: none;
  border-radius: 14px;
  background: #1a1814;
  color: #fff;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  overflow: hidden;
  user-select: none;
  transition: background 0.3s ease, transform 0.15s ease;
}
.btn-cart:hover { background: #333; transform: translateY(-1px); }
.btn-cart:active { transform: scale(0.97); }
.btn-cart-icon { font-size: 18px; transition: transform 0.3s, opacity 0.3s; }
.btn-cart-text { transition: opacity 0.2s; }
.btn-cart-bar {
  position: absolute;
  left: 0; bottom: 0;
  height: 3px;
  width: 0%;
  background: #4ade80;
  border-radius: 0 0 14px 14px;
}
.btn-cart-check {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.3s, transform 0.3s;
}
.btn-cart.is-loading { pointer-events: none; }
.btn-cart.is-loading .btn-cart-bar {
  width: 100%;
  transition: width 1.2s cubic-bezier(.4,0,.2,1);
}
.btn-cart.is-success { background: #16a34a; pointer-events: none; }
.btn-cart.is-success .btn-cart-icon,
.btn-cart.is-success .btn-cart-text { opacity: 0; transform: translateY(-10px); }
.btn-cart.is-success .btn-cart-check { opacity: 1; transform: translateY(0); }
.btn-cart-particles { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.btn-cart-particle {
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #4ade80;
  animation: btn-cart-pop 0.6s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes btn-cart-pop {
  0%   { transform: translate(0,0) scale(1); opacity: 1; }
  100% { transform: translate(var(--tx), var(--ty)) scale(0); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .btn-cart-bar, .btn-cart-icon, .btn-cart-text, .btn-cart-check { transition: none; }
}
```

**JS:**
```js
document.querySelectorAll('.btn-cart').forEach(function (btn) {
  var busy = false;
  btn.addEventListener('click', function () {
    if (busy) return;
    busy = true;
    var bar = btn.querySelector('.btn-cart-bar');
    var wrap = btn.querySelector('.btn-cart-particles');
    btn.classList.add('is-loading');
    setTimeout(function () {
      btn.classList.remove('is-loading');
      btn.classList.add('is-success');
      var colors = ['#4ade80', '#86efac', '#bbf7d0'];
      for (var i = 0; i < 12; i++) {
        var p = document.createElement('div');
        p.className = 'btn-cart-particle';
        var angle = (i / 12) * Math.PI * 2;
        var dist = 20 + Math.random() * 35;
        p.style.left = (btn.offsetWidth / 2) + 'px';
        p.style.top = (btn.offsetHeight / 2) + 'px';
        p.style.setProperty('--tx', (Math.cos(angle) * dist) + 'px');
        p.style.setProperty('--ty', (Math.sin(angle) * dist) + 'px');
        p.style.background = colors[i % 3];
        p.style.animationDelay = (Math.random() * 0.1) + 's';
        wrap.appendChild(p);
        p.addEventListener('animationend', function () { this.remove(); });
      }
      setTimeout(function () {
        btn.classList.remove('is-success');
        bar.style.transition = 'none';
        bar.style.width = '0%';
        requestAnimationFrame(function () {
          bar.style.transition = '';
          busy = false;
        });
      }, 2200);
    }, 1400);
  });
});
```

### 02. Download Progress

**Type:** CSS + JS
**Description:** The button body itself fills left-to-right like a true progress indicator while the arrow bounces, then morphs into a "Complete" state with a checkmark.

**HTML:**
```html
<div class="btn-dl-surface">
  <button class="btn-dl">
    <span class="btn-dl-fill" aria-hidden="true"></span>
    <span class="btn-dl-label">
      <span class="btn-dl-arrow" aria-hidden="true">↓</span>
      <span>Download File</span>
    </span>
    <span class="btn-dl-done">✓&nbsp;Complete</span>
  </button>
</div>
```

**CSS:**
```css
.btn-dl-surface {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 40px;
  background: #f2efe9;
  border-radius: 16px;
}
.btn-dl {
  position: relative;
  width: 200px;
  height: 52px;
  border: 2px solid #1a1814;
  border-radius: 26px;
  background: transparent;
  cursor: pointer;
  overflow: hidden;
  user-select: none;
}
.btn-dl-fill {
  position: absolute;
  inset: 0;
  background: #1a1814;
  border-radius: 24px;
  transform: translateX(-100%);
}
.btn-dl-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  z-index: 1;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #1a1814;
  transition: color 0.2s;
}
.btn-dl-arrow { font-size: 16px; }
.btn-dl-done {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.3s, transform 0.3s;
}
.btn-dl.is-loading .btn-dl-fill {
  transform: translateX(0);
  transition: transform 1.4s cubic-bezier(.4,0,.2,1);
}
.btn-dl.is-loading .btn-dl-label { color: #fff; }
.btn-dl.is-loading .btn-dl-arrow { animation: btn-dl-bounce 0.6s infinite alternate; }
@keyframes btn-dl-bounce {
  from { transform: translateY(-3px); }
  to   { transform: translateY(3px); }
}
.btn-dl.is-done .btn-dl-fill { transform: translateX(0); }
.btn-dl.is-done .btn-dl-label { opacity: 0; }
.btn-dl.is-done .btn-dl-done { opacity: 1; transform: scale(1); }
@media (prefers-reduced-motion: reduce) {
  .btn-dl.is-loading .btn-dl-arrow { animation: none; }
}
```

**JS:**
```js
document.querySelectorAll('.btn-dl').forEach(function (btn) {
  var busy = false;
  btn.addEventListener('click', function () {
    if (busy) return;
    busy = true;
    btn.classList.add('is-loading');
    setTimeout(function () {
      btn.classList.remove('is-loading');
      btn.classList.add('is-done');
      setTimeout(function () {
        btn.classList.remove('is-done');
        busy = false;
      }, 2500);
    }, 1600);
  });
});
```

### 03. Like Heart

**Type:** CSS + JS
**Description:** A toggle that bursts seven floating heart particles upward on activation; the count ticks up or down with a sliding number animation.

**HTML:**
```html
<button class="btn-like" aria-pressed="false">
  <span class="btn-like-heart" aria-hidden="true">🤍</span>
  <span class="btn-like-count">2.4k</span>
</button>
```

**CSS:**
```css
.btn-like {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  border: 1.5px solid #e0dbd3;
  border-radius: 50px;
  background: transparent;
  cursor: pointer;
  overflow: visible;
  user-select: none;
  transition: border-color 0.3s, background 0.3s;
}
.btn-like:hover { border-color: #f43f5e; background: #fff0f3; }
.btn-like-heart {
  font-size: 22px;
  line-height: 1;
  filter: grayscale(1);
  transition: transform 0.15s cubic-bezier(.34,1.56,.64,1);
}
.btn-like-count {
  display: flex;
  align-items: center;
  height: 20px;
  min-width: 24px;
  overflow: hidden;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #888;
  transition: color 0.3s;
}
.btn-like.is-liked { border-color: #f43f5e; background: #fff0f3; }
.btn-like.is-liked .btn-like-heart {
  filter: none;
  animation: btn-like-pop 0.4s cubic-bezier(.34,1.56,.64,1) forwards;
}
.btn-like.is-liked .btn-like-count { color: #f43f5e; }
@keyframes btn-like-pop {
  0%   { transform: scale(0.8); }
  50%  { transform: scale(1.4); }
  100% { transform: scale(1); }
}
.btn-like-particle {
  position: absolute;
  font-size: var(--fs, 12px);
  line-height: 1;
  pointer-events: none;
  z-index: 10;
  animation: btn-like-fly 0.7s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes btn-like-fly {
  0%   { transform: translate(0,0) scale(1); opacity: 1; }
  100% { transform: translate(var(--tx), var(--ty)) scale(0.3); opacity: 0; }
}
.btn-like-slide {
  display: inline-block;
  animation: btn-like-count-up 0.3s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes btn-like-count-up {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .btn-like-heart, .btn-like-slide, .btn-like-particle { animation: none; }
}
```

**JS:**
```js
document.querySelectorAll('.btn-like').forEach(function (btn) {
  var liked = false;
  var count = 2400;
  var heart = btn.querySelector('.btn-like-heart');
  var label = btn.querySelector('.btn-like-count');
  btn.addEventListener('click', function () {
    liked = !liked;
    btn.classList.toggle('is-liked', liked);
    btn.setAttribute('aria-pressed', String(liked));
    heart.textContent = liked ? '❤️' : '🤍';
    count += liked ? 1 : -1;
    var text = count >= 1000 ? (count / 1000).toFixed(1) + 'k' : String(count);
    var span = document.createElement('span');
    span.className = 'btn-like-slide';
    span.textContent = text;
    label.innerHTML = '';
    label.appendChild(span);
    if (liked) {
      var cx = heart.offsetLeft + heart.offsetWidth / 2;
      var cy = heart.offsetTop + heart.offsetHeight / 2;
      for (var i = 0; i < 7; i++) {
        var p = document.createElement('span');
        p.className = 'btn-like-particle';
        p.textContent = '❤️';
        var angle = -Math.PI / 2 + (Math.random() - 0.5) * Math.PI * 1.5;
        var dist = 25 + Math.random() * 35;
        p.style.left = cx + 'px';
        p.style.top = cy + 'px';
        p.style.setProperty('--tx', (Math.cos(angle) * dist) + 'px');
        p.style.setProperty('--ty', (Math.sin(angle) * dist) + 'px');
        p.style.setProperty('--fs', (9 + Math.random() * 7) + 'px');
        p.style.animationDelay = (Math.random() * 0.15) + 's';
        btn.appendChild(p);
        p.addEventListener('animationend', function () { this.remove(); });
      }
    }
  });
});
```

### 04. Confirm Delete

**Type:** CSS + JS
**Description:** A two-step destructive pattern: the first click shakes the button and slides up a red confirmation panel; a second click within three seconds wipes it with a sweep into a "Deleted" ghost state.

**HTML:**
```html
<button class="btn-del">
  <span class="btn-del-icon" aria-hidden="true">🗑</span>
  <span class="btn-del-text">Delete Item</span>
  <span class="btn-del-confirm">⚠ Tap again to confirm</span>
  <span class="btn-del-wipe" aria-hidden="true"></span>
</button>
```

**CSS:**
```css
.btn-del {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 170px;
  padding: 13px 22px;
  border: 1.5px solid #fca5a5;
  border-radius: 10px;
  background: #fff0f0;
  color: #dc2626;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  overflow: hidden;
  user-select: none;
  transition: background 0.3s, border-color 0.3s;
}
.btn-del:hover { background: #fee2e2; border-color: #f87171; }
.btn-del-icon { font-size: 16px; }
.btn-del-text { transition: opacity 0.2s; }
.btn-del-confirm {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #dc2626;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  opacity: 0;
  transform: translateY(100%);
  transition: opacity 0.25s, transform 0.25s cubic-bezier(.22,1,.36,1);
}
.btn-del-wipe {
  position: absolute;
  inset: 0;
  z-index: 5;
  background: #dc2626;
  border-radius: 8px;
  transform: scaleX(0);
  transform-origin: left;
}
.btn-del.is-confirming { animation: btn-del-shake 0.4s cubic-bezier(.36,.07,.19,.97); }
.btn-del.is-confirming .btn-del-confirm { opacity: 1; transform: translateY(0); }
.btn-del.is-confirming .btn-del-text,
.btn-del.is-confirming .btn-del-icon { opacity: 0; }
@keyframes btn-del-shake {
  0%,100% { transform: translateX(0); }
  20% { transform: translateX(-5px) rotate(-1deg); }
  40% { transform: translateX(5px) rotate(1deg); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}
.btn-del.is-deleting { pointer-events: none; overflow: visible; }
.btn-del.is-deleting .btn-del-wipe { animation: btn-del-wipe-out 0.5s cubic-bezier(.77,0,.18,1) forwards; }
@keyframes btn-del-wipe-out {
  0%   { transform: scaleX(0); opacity: 1; }
  60%  { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(1); opacity: 0; }
}
.btn-del.is-deleted {
  border-color: #e5e7eb;
  background: #f9fafb;
  color: #9ca3af;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .btn-del.is-confirming { animation: none; }
  .btn-del.is-deleting .btn-del-wipe { animation: none; }
}
```

**JS:**
```js
document.querySelectorAll('.btn-del').forEach(function (btn) {
  var state = 'idle';
  var resetTimer;
  btn.addEventListener('click', function () {
    if (state === 'idle') {
      state = 'confirming';
      btn.classList.add('is-confirming');
      resetTimer = setTimeout(function () {
        if (state === 'confirming') {
          state = 'idle';
          btn.classList.remove('is-confirming');
        }
      }, 3000);
    } else if (state === 'confirming') {
      clearTimeout(resetTimer);
      state = 'deleting';
      btn.classList.add('is-deleting');
      setTimeout(function () {
        btn.classList.remove('is-confirming', 'is-deleting');
        btn.classList.add('is-deleted');
        btn.querySelector('.btn-del-icon').textContent = '✓';
        btn.querySelector('.btn-del-icon').style.opacity = '1';
        btn.querySelector('.btn-del-text').textContent = 'Deleted';
        btn.querySelector('.btn-del-text').style.opacity = '1';
        btn.querySelector('.btn-del-confirm').style.opacity = '0';
      }, 600);
    }
  });
});
```

### 05. Play Pause

**Type:** CSS + JS
**Description:** A media control whose icon morphs between a triangle and pause bars; a pulsing halo ring appears while playing and a row of waveform bars dances with staggered timing.

**HTML:**
```html
<div class="btn-pp-surface">
  <div class="btn-pp-area">
    <button class="btn-pp" aria-label="Play">
      <span class="btn-pp-ring" aria-hidden="true"></span>
      <span class="btn-pp-play" aria-hidden="true">▶</span>
      <span class="btn-pp-pause" aria-hidden="true"><span></span><span></span></span>
    </button>
    <div class="btn-pp-info">
      <div class="btn-pp-meta">
        <span class="btn-pp-title">Midnight Drive</span>
        <span class="btn-pp-sub">3:42 · Synthwave</span>
      </div>
      <span class="btn-pp-wave" aria-hidden="true"></span>
    </div>
  </div>
</div>
```

**CSS:**
```css
.btn-pp-surface {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 36px;
  background: #f2efe9;
  border-radius: 16px;
}
.btn-pp-area { display: flex; align-items: center; gap: 16px; }
.btn-pp-info { display: flex; flex-direction: column; gap: 6px; }
.btn-pp-meta { display: flex; flex-direction: column; gap: 2px; }
.btn-pp-title {
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #1a1814;
}
.btn-pp-sub {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 9px;
  letter-spacing: 1px;
  color: #b0aaa0;
}
.btn-pp {
  position: relative;
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  border: none;
  border-radius: 50%;
  background: #1a1814;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s cubic-bezier(.34,1.56,.64,1), background 0.3s;
}
.btn-pp:hover { transform: scale(1.1); background: #333; }
.btn-pp:active { transform: scale(0.93); }
.btn-pp-play {
  position: relative;
  z-index: 1;
  margin-left: 3px;
  font-size: 24px;
  line-height: 1;
  color: #fff;
  transition: opacity 0.15s, transform 0.15s;
}
.btn-pp-pause {
  position: absolute;
  z-index: 1;
  display: flex;
  gap: 5px;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.2s, transform 0.2s;
}
.btn-pp-pause span { width: 4px; height: 20px; border-radius: 2px; background: #fff; }
.btn-pp.is-playing .btn-pp-play { opacity: 0; transform: scale(0); }
.btn-pp.is-playing .btn-pp-pause { opacity: 1; transform: scale(1); }
.btn-pp-ring {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid rgba(26,24,20,0.2);
}
.btn-pp.is-playing .btn-pp-ring { animation: btn-pp-ring 2s ease-in-out infinite; }
@keyframes btn-pp-ring {
  0%,100% { transform: scale(1); opacity: 0.5; }
  50%     { transform: scale(1.15); opacity: 0.15; }
}
.btn-pp-wave {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 36px;
}
.btn-pp-bar {
  width: 3px;
  border-radius: 2px;
  background: #1a1814;
  opacity: 0.25;
  transition: height 0.3s, opacity 0.3s;
}
.btn-pp-bar.is-active {
  opacity: 0.7;
  animation: btn-pp-dance var(--dur, 0.8s) ease-in-out infinite alternate;
}
@keyframes btn-pp-dance {
  from { height: var(--min, 4px); }
  to   { height: var(--max, 28px); }
}
@media (prefers-reduced-motion: reduce) {
  .btn-pp.is-playing .btn-pp-ring,
  .btn-pp-bar.is-active { animation: none; }
}
```

**JS:**
```js
document.querySelectorAll('.btn-pp-area').forEach(function (area) {
  var btn = area.querySelector('.btn-pp');
  var wave = area.querySelector('.btn-pp-wave');
  var playing = false;
  var barCount = 18;
  var heights = [];
  for (var i = 0; i < barCount; i++) {
    var mid = barCount / 2;
    var d = Math.abs(i - mid) / mid;
    var h = { min: 3 + d * 3, max: 6 + (1 - d * d) * 26 };
    heights.push(h);
    var bar = document.createElement('span');
    bar.className = 'btn-pp-bar';
    bar.style.height = h.min + 'px';
    bar.style.setProperty('--min', h.min + 'px');
    bar.style.setProperty('--max', h.max + 'px');
    bar.style.setProperty('--dur', (0.4 + Math.random() * 0.7).toFixed(2) + 's');
    bar.style.animationDelay = (Math.random() * 0.5).toFixed(2) + 's';
    wave.appendChild(bar);
  }
  btn.addEventListener('click', function () {
    playing = !playing;
    btn.classList.toggle('is-playing', playing);
    btn.setAttribute('aria-label', playing ? 'Pause' : 'Play');
    var bars = wave.querySelectorAll('.btn-pp-bar');
    bars.forEach(function (b, i) {
      if (playing) {
        b.classList.add('is-active');
        b.style.height = '';
      } else {
        b.classList.remove('is-active');
        b.style.height = heights[i].min + 'px';
      }
    });
  });
});
```

### 06. Subscribe Confetti

**Type:** CSS + JS
**Description:** The border fills upward with a purple gradient, the label swaps to a checkmark, then twenty-four confetti pieces in six colors burst outward in a celebratory fan.

**HTML:**
```html
<button class="btn-sub">
  <span class="btn-sub-fill" aria-hidden="true"></span>
  <span class="btn-sub-text">Subscribe Now</span>
  <span class="btn-sub-check">✦&nbsp;Subscribed!</span>
</button>
```

**CSS:**
```css
.btn-sub {
  position: relative;
  min-width: 180px;
  padding: 14px 30px;
  border: 2px solid #7c3aed;
  border-radius: 12px;
  background: transparent;
  color: #7c3aed;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  overflow: hidden;
  user-select: none;
  transition: transform 0.2s;
}
.btn-sub-fill {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.4s cubic-bezier(.77,0,.18,1);
}
.btn-sub-text {
  position: relative;
  z-index: 1;
  transition: color 0.2s 0.15s, opacity 0.2s;
}
.btn-sub-check {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.3s 0.2s, transform 0.3s 0.2s;
}
.btn-sub.is-subscribed { pointer-events: none; transform: scale(0.98); }
.btn-sub.is-subscribed .btn-sub-fill { transform: scaleY(1); }
.btn-sub.is-subscribed .btn-sub-text { opacity: 0; color: #fff; }
.btn-sub.is-subscribed .btn-sub-check { opacity: 1; transform: translateY(0); }
.btn-sub-confetti {
  position: absolute;
  width: var(--w, 6px);
  height: var(--h, 8px);
  background: var(--c, #7c3aed);
  pointer-events: none;
  z-index: 20;
  animation: btn-sub-fall 0.9s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes btn-sub-fall {
  0%   { transform: translate(0,0) rotate(0deg) scale(1); opacity: 1; }
  100% { transform: translate(var(--tx), var(--ty)) rotate(var(--r)) scale(0.5); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .btn-sub-fill, .btn-sub-text, .btn-sub-check { transition: none; }
  .btn-sub-confetti { animation: none; }
}
```

**JS:**
```js
document.querySelectorAll('.btn-sub').forEach(function (btn) {
  var done = false;
  var colors = ['#7c3aed', '#a855f7', '#ec4899', '#f59e0b', '#10b981', '#3b82f6'];
  btn.addEventListener('click', function () {
    if (done) return;
    done = true;
    btn.classList.add('is-subscribed');
    var w = btn.offsetWidth;
    var h = btn.offsetHeight;
    for (var i = 0; i < 24; i++) {
      var p = document.createElement('span');
      p.className = 'btn-sub-confetti';
      var angle = -Math.PI / 2 + (Math.random() - 0.5) * Math.PI * 1.6;
      var dist = 40 + Math.random() * 70;
      p.style.left = (w / 2 + (Math.random() - 0.5) * w * 0.6) + 'px';
      p.style.top = (h / 2) + 'px';
      p.style.setProperty('--w', (4 + Math.random() * 6) + 'px');
      p.style.setProperty('--h', (5 + Math.random() * 9) + 'px');
      p.style.setProperty('--c', colors[Math.floor(Math.random() * colors.length)]);
      p.style.setProperty('--tx', (Math.cos(angle) * dist) + 'px');
      p.style.setProperty('--ty', (Math.sin(angle) * dist) + 'px');
      p.style.setProperty('--r', (Math.random() * 360 - 180) + 'deg');
      p.style.animationDelay = (Math.random() * 0.15) + 's';
      p.style.borderRadius = Math.random() > 0.5 ? '50%' : '2px';
      btn.appendChild(p);
      p.addEventListener('animationend', function () { this.remove(); });
    }
  });
});
```

### 07. Magnetic Mercury

**Type:** CSS + JS
**Description:** A liquid-metal pill with a polished radial sheen. Click anywhere on the surface and a bright ripple expands from the exact point of contact, like mercury catching the light.

**HTML:**
```html
<button class="btn-merc">Initiate</button>
```

**CSS:**
```css
.btn-merc {
  position: relative;
  padding: 16px 38px;
  border: none;
  border-radius: 60px;
  background: linear-gradient(135deg, #e8e0d5 0%, #c8bfb0 50%, #a89f94 100%);
  color: #0c0c0f;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  overflow: hidden;
  user-select: none;
  box-shadow:
    0 2px 20px rgba(200,191,176,0.15),
    inset 0 1px 0 rgba(255,255,255,0.4),
    inset 0 -1px 0 rgba(0,0,0,0.15);
  transition: transform 0.15s cubic-bezier(.34,1.56,.64,1), box-shadow 0.3s ease;
}
.btn-merc::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(ellipse 80% 60% at 50% -20%, rgba(255,255,255,0.6) 0%, transparent 60%);
  pointer-events: none;
}
.btn-merc:hover {
  transform: scale(1.04) translateY(-2px);
  box-shadow:
    0 8px 40px rgba(200,191,176,0.25),
    inset 0 1px 0 rgba(255,255,255,0.5),
    inset 0 -1px 0 rgba(0,0,0,0.1);
}
.btn-merc:active { transform: scale(0.94); }
.btn-merc-ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  background: rgba(255,255,255,0.4);
  pointer-events: none;
  animation: btn-merc-ripple 0.7s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes btn-merc-ripple {
  to { transform: scale(4); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .btn-merc-ripple { animation: none; display: none; }
}
```

**JS:**
```js
document.querySelectorAll('.btn-merc').forEach(function (btn) {
  btn.addEventListener('click', function (e) {
    var r = btn.getBoundingClientRect();
    var size = Math.max(r.width, r.height) * 1.5;
    var ripple = document.createElement('span');
    ripple.className = 'btn-merc-ripple';
    ripple.style.width = size + 'px';
    ripple.style.height = size + 'px';
    ripple.style.left = (e.clientX - r.left - size / 2) + 'px';
    ripple.style.top = (e.clientY - r.top - size / 2) + 'px';
    btn.appendChild(ripple);
    ripple.addEventListener('animationend', function () { this.remove(); });
  });
});
```

### 08. Brutalist Glitch

**Type:** CSS + JS
**Description:** A raw outlined button that fills hard on hover. Click triggers a chromatic-aberration glitch — the label tears into red and cyan layers with a violent shake before snapping back.

**HTML:**
```html
<button class="btn-glitch" data-text="SUBMIT">
  <span class="btn-glitch-fill" aria-hidden="true"></span>
  <span class="btn-glitch-label">SUBMIT</span>
</button>
```

**CSS:**
```css
.btn-glitch {
  position: relative;
  padding: 14px 36px;
  border: 2px solid #fff;
  background: transparent;
  color: #fff;
  font-family: "Arial Narrow", Arial, sans-serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  cursor: pointer;
  overflow: hidden;
  user-select: none;
  transition: color 0.1s;
}
.btn-glitch-fill {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: #fff;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.15s cubic-bezier(.77,0,.18,1);
}
.btn-glitch-label { position: relative; z-index: 1; }
.btn-glitch:hover { color: #0c0c0f; }
.btn-glitch:hover .btn-glitch-fill { transform: scaleX(1); }
.btn-glitch.is-glitching { animation: btn-glitch-shake 0.4s cubic-bezier(.36,.07,.19,.97) both; }
.btn-glitch.is-glitching::before,
.btn-glitch.is-glitching::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Arial Narrow", Arial, sans-serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 3px;
  overflow: hidden;
}
.btn-glitch.is-glitching::before {
  color: #ff0040;
  clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
  animation: btn-glitch-l1 0.4s steps(2) forwards;
}
.btn-glitch.is-glitching::after {
  color: #00fff9;
  clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%);
  animation: btn-glitch-l2 0.4s steps(2) forwards;
}
@keyframes btn-glitch-shake {
  0%,100% { transform: translate(0); }
  20% { transform: translate(-3px, 1px) skewX(-3deg); }
  40% { transform: translate(3px, -1px) skewX(3deg); }
  60% { transform: translate(-2px, 2px); }
  80% { transform: translate(2px, -2px); }
}
@keyframes btn-glitch-l1 {
  0% { transform: translate(-4px, -2px); opacity: 1; }
  50% { transform: translate(4px, 2px); opacity: 0.8; }
  100% { transform: translate(0); opacity: 0; }
}
@keyframes btn-glitch-l2 {
  0% { transform: translate(4px, 2px); opacity: 1; }
  50% { transform: translate(-4px, -2px); opacity: 0.8; }
  100% { transform: translate(0); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .btn-glitch.is-glitching { animation: none; }
  .btn-glitch.is-glitching::before,
  .btn-glitch.is-glitching::after { animation: none; opacity: 0; }
}
```

**JS:**
```js
document.querySelectorAll('.btn-glitch').forEach(function (btn) {
  btn.addEventListener('click', function () {
    btn.classList.add('is-glitching');
    setTimeout(function () { btn.classList.remove('is-glitching'); }, 420);
  });
});
```

### 09. Neon Noir

**Type:** CSS + JS
**Description:** A cyberpunk terminal button glowing faint cyan. Click detonates a plasma burst — an expanding ring, a radial bloom, and ten sparks flung from the point of contact.

**HTML:**
```html
<button class="btn-neon">Connect</button>
```

**CSS:**
```css
.btn-neon {
  position: relative;
  padding: 16px 36px;
  border: 1px solid rgba(0,255,249,0.3);
  background: rgba(0,255,249,0.04);
  color: #00fff9;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  cursor: pointer;
  overflow: hidden;
  user-select: none;
  box-shadow: 0 0 20px rgba(0,255,249,0.05), inset 0 0 20px rgba(0,255,249,0.02);
  transition: border-color 0.3s, background 0.3s, box-shadow 0.3s, color 0.3s;
}
.btn-neon:hover {
  border-color: rgba(0,255,249,0.8);
  background: rgba(0,255,249,0.08);
  box-shadow: 0 0 30px rgba(0,255,249,0.2), inset 0 0 30px rgba(0,255,249,0.05);
  color: #fff;
}
.btn-neon-plasma,
.btn-neon-ring {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  pointer-events: none;
}
.btn-neon-plasma {
  background: radial-gradient(circle, rgba(0,255,249,0.8) 0%, rgba(0,120,255,0.4) 40%, transparent 70%);
  mix-blend-mode: screen;
  animation: btn-neon-burst 0.7s cubic-bezier(.22,1,.36,1) forwards;
}
.btn-neon-ring {
  border: 2px solid rgba(0,255,249,0.6);
  animation: btn-neon-ring 0.7s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes btn-neon-burst {
  0% { transform: scale(0); opacity: 1; }
  60% { opacity: 0.6; }
  100% { transform: scale(5); opacity: 0; }
}
@keyframes btn-neon-ring {
  0% { transform: scale(0); opacity: 1; }
  100% { transform: scale(4); opacity: 0; }
}
.btn-neon-spark {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #00fff9;
  pointer-events: none;
  animation: btn-neon-spark 0.6s ease-out forwards;
}
@keyframes btn-neon-spark {
  0% { transform: translate(0,0) scale(1); opacity: 1; }
  100% { transform: translate(var(--sx), var(--sy)) scale(0); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .btn-neon-plasma, .btn-neon-ring, .btn-neon-spark { animation: none; display: none; }
}
```

**JS:**
```js
document.querySelectorAll('.btn-neon').forEach(function (btn) {
  btn.addEventListener('click', function (e) {
    var r = btn.getBoundingClientRect();
    var x = e.clientX - r.left;
    var y = e.clientY - r.top;
    var size = Math.max(r.width, r.height) * 0.8;
    ['btn-neon-plasma', 'btn-neon-ring'].forEach(function (cls) {
      var el = document.createElement('div');
      el.className = cls;
      el.style.width = size + 'px';
      el.style.height = size + 'px';
      el.style.left = (x - size / 2) + 'px';
      el.style.top = (y - size / 2) + 'px';
      btn.appendChild(el);
      el.addEventListener('animationend', function () { this.remove(); });
    });
    for (var i = 0; i < 10; i++) {
      var s = document.createElement('span');
      s.className = 'btn-neon-spark';
      var angle = (i / 10) * Math.PI * 2;
      var dist = 30 + Math.random() * 50;
      s.style.left = x + 'px';
      s.style.top = y + 'px';
      s.style.setProperty('--sx', (Math.cos(angle) * dist) + 'px');
      s.style.setProperty('--sy', (Math.sin(angle) * dist) + 'px');
      s.style.animationDelay = (Math.random() * 0.1) + 's';
      btn.appendChild(s);
      s.addEventListener('animationend', function () { this.remove(); });
    }
  });
});
```

### 10. Clay Press

**Type:** CSS + JS
**Description:** A chunky claymorphism button with a thick 3D base shadow. Press it and the whole shape squishes down and stretches wide, with a soft white bloom blossoming from the click point.

**HTML:**
```html
<button class="btn-clay">Confirm</button>
```

**CSS:**
```css
.btn-clay {
  position: relative;
  padding: 18px 40px;
  border: none;
  border-radius: 20px;
  background: #2ecc71;
  color: #fff;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  overflow: hidden;
  user-select: none;
  box-shadow:
    0 6px 0 #1a7a43,
    0 10px 20px rgba(0,0,0,0.3),
    inset 0 2px 4px rgba(255,255,255,0.2);
  transition: transform 0.2s cubic-bezier(.34,1.56,.64,1), box-shadow 0.2s ease, filter 0.2s ease;
}
.btn-clay:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow:
    0 9px 0 #1a7a43,
    0 16px 30px rgba(0,0,0,0.35),
    inset 0 2px 4px rgba(255,255,255,0.2);
}
.btn-clay:active {
  transform: translateY(4px) scale(0.95) scaleX(1.06);
  box-shadow:
    0 2px 0 #1a7a43,
    0 4px 10px rgba(0,0,0,0.2),
    inset 0 2px 8px rgba(0,0,0,0.2);
  filter: saturate(1.4) brightness(0.95);
}
.btn-clay-blob {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  background: rgba(255,255,255,0.25);
  pointer-events: none;
  animation: btn-clay-bloom 0.5s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes btn-clay-bloom {
  0% { transform: scale(0); opacity: 0.8; }
  100% { transform: scale(3); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .btn-clay-blob { animation: none; display: none; }
}
```

**JS:**
```js
document.querySelectorAll('.btn-clay').forEach(function (btn) {
  btn.addEventListener('click', function (e) {
    var r = btn.getBoundingClientRect();
    var size = Math.max(r.width, r.height);
    var blob = document.createElement('div');
    blob.className = 'btn-clay-blob';
    blob.style.width = size + 'px';
    blob.style.height = size + 'px';
    blob.style.left = (e.clientX - r.left - size / 2) + 'px';
    blob.style.top = (e.clientY - r.top - size / 2) + 'px';
    btn.appendChild(blob);
    blob.addEventListener('animationend', function () { this.remove(); });
  });
});
```

### 11. Editorial Ink

**Type:** CSS + JS
**Description:** A serif, italic button with a thin frame and a hairline underline that draws in on hover. Press and hold and ink floods the button from your finger; release and it retreats.

**HTML:**
```html
<button class="btn-ink">
  <span class="btn-ink-fill" aria-hidden="true"></span>
  <span class="btn-ink-underline" aria-hidden="true"></span>
  <span class="btn-ink-label">Discover</span>
</button>
```

**CSS:**
```css
.btn-ink {
  position: relative;
  padding: 14px 32px;
  border: none;
  background: transparent;
  color: #f5f0e8;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 16px;
  font-weight: 700;
  font-style: italic;
  letter-spacing: -0.5px;
  cursor: pointer;
  overflow: hidden;
  user-select: none;
}
.btn-ink::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 1.5px solid rgba(245,240,232,0.2);
  transition: border-color 0.3s;
}
.btn-ink:hover::before { border-color: rgba(245,240,232,0.5); }
.btn-ink-underline {
  position: absolute;
  left: 32px;
  right: 32px;
  bottom: 10px;
  height: 1px;
  background: #f5f0e8;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(.77,0,.18,1);
}
.btn-ink:hover .btn-ink-underline { transform: scaleX(1); }
.btn-ink-fill {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: #f5f0e8;
  clip-path: circle(0% at var(--ox, 50%) var(--oy, 50%));
}
.btn-ink-label { position: relative; z-index: 1; }
.btn-ink.is-spreading .btn-ink-fill {
  clip-path: circle(150% at var(--ox, 50%) var(--oy, 50%));
  transition: clip-path 0.6s cubic-bezier(.4,0,.2,1);
}
.btn-ink.is-spreading .btn-ink-label { color: #0c0c0f; transition: color 0.2s 0.15s; }
.btn-ink.is-retreating .btn-ink-fill {
  clip-path: circle(0% at var(--ox, 50%) var(--oy, 50%));
  transition: clip-path 0.5s cubic-bezier(.4,0,.2,1) 0.05s;
}
@media (prefers-reduced-motion: reduce) {
  .btn-ink-fill, .btn-ink-underline { transition: none; }
}
```

**JS:**
```js
document.querySelectorAll('.btn-ink').forEach(function (btn) {
  function retreat() {
    btn.classList.remove('is-spreading');
    btn.classList.add('is-retreating');
    setTimeout(function () { btn.classList.remove('is-retreating'); }, 600);
  }
  btn.addEventListener('mousedown', function (e) {
    var r = btn.getBoundingClientRect();
    btn.style.setProperty('--ox', ((e.clientX - r.left) / r.width * 100) + '%');
    btn.style.setProperty('--oy', ((e.clientY - r.top) / r.height * 100) + '%');
    btn.classList.remove('is-retreating');
    btn.classList.add('is-spreading');
  });
  btn.addEventListener('mouseup', retreat);
  btn.addEventListener('mouseleave', function () {
    if (btn.classList.contains('is-spreading')) retreat();
  });
});
```

### 12. Particle Burst

**Type:** CSS + JS
**Description:** A warm, dark editorial button. Click and eighteen triangular shards explode outward in a full circle — each a random size, colour, and spin — like struck flint throwing sparks.

**HTML:**
```html
<div class="btn-shard-surface">
  <button class="btn-shard">
    <span class="btn-shard-canvas" aria-hidden="true"></span>
    <span class="btn-shard-label">Illuminate</span>
  </button>
</div>
```

**CSS:**
```css
.btn-shard-surface {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 56px;
  background: #0c0c0f;
  border-radius: 16px;
}
.btn-shard {
  position: relative;
  padding: 16px 44px;
  border: 1px solid rgba(232,213,176,0.2);
  background: linear-gradient(135deg, #1a1206 0%, #2c1f0a 100%);
  color: #e8d5b0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
  font-weight: 400;
  font-style: italic;
  letter-spacing: 1px;
  cursor: pointer;
  user-select: none;
  transition: border-color 0.3s, background 0.3s, transform 0.1s;
}
.btn-shard:hover {
  border-color: rgba(232,213,176,0.5);
  background: linear-gradient(135deg, #221a0a 0%, #3a2810 100%);
}
.btn-shard:active { transform: scale(0.97); }
.btn-shard-label { position: relative; z-index: 1; }
.btn-shard-canvas {
  position: absolute;
  inset: -60px;
  z-index: 10;
  pointer-events: none;
}
.btn-shard-piece {
  position: absolute;
  width: var(--w, 6px);
  height: var(--h, 6px);
  background: var(--c, #e8d5b0);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  animation: btn-shard-fly 0.7s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes btn-shard-fly {
  0% { transform: translate(0,0) rotate(0deg) scale(1); opacity: 1; }
  100% { transform: translate(var(--tx,0px), var(--ty,-60px)) rotate(var(--r,360deg)) scale(0); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .btn-shard-piece { animation: none; display: none; }
}
```

**JS:**
```js
document.querySelectorAll('.btn-shard').forEach(function (btn) {
  var colors = ['#e8d5b0', '#f5c842', '#ff8c42', '#e8d5b0', '#fff8e7'];
  btn.addEventListener('click', function (e) {
    var canvas = btn.querySelector('.btn-shard-canvas');
    var cr = canvas.getBoundingClientRect();
    var cx = e.clientX - cr.left;
    var cy = e.clientY - cr.top;
    for (var i = 0; i < 18; i++) {
      var piece = document.createElement('span');
      piece.className = 'btn-shard-piece';
      var angle = (i / 18) * Math.PI * 2 + (Math.random() - 0.5) * 0.5;
      var dist = 40 + Math.random() * 70;
      var size = 4 + Math.random() * 8;
      piece.style.left = cx + 'px';
      piece.style.top = cy + 'px';
      piece.style.setProperty('--tx', (Math.cos(angle) * dist) + 'px');
      piece.style.setProperty('--ty', (Math.sin(angle) * dist) + 'px');
      piece.style.setProperty('--r', (Math.random() * 360 - 180) + 'deg');
      piece.style.setProperty('--w', size + 'px');
      piece.style.setProperty('--h', size + 'px');
      piece.style.setProperty('--c', colors[Math.floor(Math.random() * colors.length)]);
      piece.style.animationDelay = (Math.random() * 0.1) + 's';
      canvas.appendChild(piece);
      piece.addEventListener('animationend', function () { this.remove(); });
    }
  });
});
```

### 13. Brushed Brass

**Type:** Pure CSS
**Description:** Letterpress brass plate with engraved label and steel rivets at the corners. Hover deepens the bevel; click presses the plate into the surface.

**HTML:**
```html
<button class="btn-brass">
  <span class="btn-brass-rivet" aria-hidden="true"></span>
  <span class="btn-brass-rivet" aria-hidden="true"></span>
  <span class="btn-brass-label">Engage</span>
  <span class="btn-brass-rivet" aria-hidden="true"></span>
  <span class="btn-brass-rivet" aria-hidden="true"></span>
</button>
```

**CSS:**
```css
.btn-brass {
  position: relative;
  padding: 14px 36px;
  border: none;
  border-radius: 4px;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255,232,180,0.12) 0 1px,
      transparent 1px 3px
    ),
    linear-gradient(180deg, #d8b66e 0%, #c9a15e 50%, #a07f3a 100%);
  color: #2a1d0e;
  font-family: ui-serif, Georgia, serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto;
  gap: 0 24px;
  align-items: center;
  box-shadow:
    inset 0 1px 0 rgba(255,232,180,0.6),
    inset 0 -2px 0 rgba(58,36,16,0.4),
    0 4px 8px rgba(0,0,0,0.3);
  text-shadow: 0 1px 0 rgba(255,232,180,0.5);
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.18s ease;
}
.btn-brass-rivet {
  width: 6px; height: 6px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #f0e8d8, #6a5a30 70%);
  box-shadow: inset 0 -1px 1px rgba(0,0,0,0.4);
}
.btn-brass-label {
  grid-column: span 1;
  grid-row: 1 / span 2;
  text-align: center;
  border-top: 1px solid rgba(58,36,16,0.4);
  border-bottom: 1px solid rgba(58,36,16,0.4);
  padding: 4px 0;
}
.btn-brass:hover {
  filter: brightness(1.06);
  box-shadow:
    inset 0 1px 0 rgba(255,232,180,0.7),
    inset 0 -2px 0 rgba(58,36,16,0.5),
    0 6px 12px rgba(0,0,0,0.35);
}
.btn-brass:active {
  transform: translateY(2px);
  box-shadow:
    inset 0 2px 4px rgba(58,36,16,0.4),
    0 1px 2px rgba(0,0,0,0.2);
}
```

### 14. Paper Crane

**Type:** Pure CSS
**Description:** Washi paper with a hand-stamped red ink seal in the corner. The bottom-right corner is folded like an origami crease; hover lifts the whole card like a postcard.

**HTML:**
```html
<button class="btn-crane">
  <span class="btn-crane-text">Send Wish</span>
  <span class="btn-crane-seal" aria-hidden="true">福</span>
  <span class="btn-crane-fold" aria-hidden="true"></span>
</button>
```

**CSS:**
```css
.btn-crane {
  position: relative;
  padding: 14px 44px 14px 28px;
  border: 1px solid #d4c8a3;
  border-radius: 2px;
  background: #f5e8c4;
  color: #3a2010;
  font-family: ui-serif, Georgia, serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.25s cubic-bezier(.3,1,.3,1), box-shadow 0.25s ease;
  box-shadow: 0 2px 0 rgba(170,140,80,0.4), 0 4px 10px rgba(0,0,0,0.12);
}
.btn-crane-text { position: relative; z-index: 1; }
.btn-crane-seal {
  position: absolute;
  top: 50%; right: 10px;
  transform: translateY(-50%);
  width: 20px; height: 20px;
  background: #a83232;
  color: #f5e8c4;
  font-family: ui-serif, Georgia, serif;
  font-size: 12px; font-weight: 700;
  display: grid; place-items: center;
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.18);
}
.btn-crane-fold {
  position: absolute;
  right: 0; bottom: 0;
  width: 14px; height: 14px;
  background: linear-gradient(135deg, transparent 50%, #d4c8a3 50%);
}
.btn-crane:hover {
  transform: translateY(-3px) rotate(-0.6deg);
  box-shadow: 0 4px 0 rgba(170,140,80,0.4), 0 8px 16px rgba(0,0,0,0.18);
}
```

### 15. Frosted Ice

**Type:** Pure CSS
**Description:** Glacier blue with backdrop-filter refraction and noisy frost grain on top. Hover melts the surface to a brighter, glossier ice.

**HTML:**
```html
<button class="btn-ice">
  <span class="btn-ice-frost" aria-hidden="true"></span>
  <span class="btn-ice-glint" aria-hidden="true"></span>
  <span class="btn-ice-text">Cool Down</span>
</button>
```

**CSS:**
```css
.btn-ice {
  position: relative;
  padding: 14px 30px;
  border: 1px solid rgba(168,224,240,0.5);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(168,224,240,0.55), rgba(93,158,176,0.65));
  color: #0a3a4a;
  font-family: ui-sans-serif, system-ui;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  overflow: hidden;
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  backdrop-filter: blur(8px) saturate(140%);
  box-shadow: 0 8px 22px -8px rgba(15,80,100,0.4), inset 0 1px 0 rgba(255,255,255,0.6);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.btn-ice-frost {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255,255,255,0.55), transparent 60%),
    repeating-linear-gradient(45deg, rgba(255,255,255,0.04) 0 2px, transparent 2px 4px);
  pointer-events: none;
}
.btn-ice-glint {
  position: absolute; top: -50%; left: -30%;
  width: 30%; height: 200%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.7), transparent);
  transform: rotate(20deg);
  transition: left 0.5s cubic-bezier(.3,1,.3,1);
  pointer-events: none;
}
.btn-ice-text { position: relative; z-index: 1; }
.btn-ice:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -8px rgba(15,80,100,0.5), inset 0 1px 0 rgba(255,255,255,0.7);
}
.btn-ice:hover .btn-ice-glint { left: 130%; }
```

### 16. Typewriter Key

**Type:** Pure CSS
**Description:** Concave ivory keycap with black ring and serif letter. Click depresses the key 4px with a soft mechanical thud shadow.

**HTML:**
```html
<button class="btn-key">
  <span class="btn-key-cap">
    <span class="btn-key-letter">RETURN</span>
  </span>
</button>
```

**CSS:**
```css
.btn-key {
  display: inline-block;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  perspective: 200px;
}
.btn-key-cap {
  display: inline-flex; align-items: center; justify-content: center;
  width: 130px; height: 56px;
  background: radial-gradient(ellipse at 50% 30%, #fff8e8 0%, #f0e8d8 60%, #d4c8a8 100%);
  border: 3px solid #1a1a1a;
  border-radius: 8px;
  box-shadow:
    inset 0 -8px 12px rgba(0,0,0,0.15),
    inset 0 2px 4px rgba(255,255,255,0.6),
    0 5px 0 #1a1a1a,
    0 8px 14px rgba(0,0,0,0.25);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.btn-key-letter {
  font-family: ui-serif, 'Courier New', Georgia, monospace;
  font-size: 13px; font-weight: 800;
  letter-spacing: 0.16em;
  color: #1a1a1a;
}
.btn-key:hover .btn-key-cap {
  transform: translateY(-1px);
}
.btn-key:active .btn-key-cap {
  transform: translateY(4px);
  box-shadow:
    inset 0 -2px 6px rgba(0,0,0,0.25),
    inset 0 2px 4px rgba(255,255,255,0.4),
    0 1px 0 #1a1a1a,
    0 2px 4px rgba(0,0,0,0.2);
}
```

### 17. Lacquered Wood

**Type:** Pure CSS
**Description:** Walnut grain block with brass corner brackets and gilt label. Hover deepens the lacquer sheen; the brass catches a tilt of light.

**HTML:**
```html
<button class="btn-wood">
  <span class="btn-wood-corner btn-wood-corner-tl" aria-hidden="true"></span>
  <span class="btn-wood-corner btn-wood-corner-tr" aria-hidden="true"></span>
  <span class="btn-wood-corner btn-wood-corner-bl" aria-hidden="true"></span>
  <span class="btn-wood-corner btn-wood-corner-br" aria-hidden="true"></span>
  <span class="btn-wood-text">Reserve</span>
</button>
```

**CSS:**
```css
.btn-wood {
  position: relative;
  padding: 14px 36px;
  border: none;
  border-radius: 3px;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(0,0,0,0.06) 0 1px,
      transparent 1px 4px
    ),
    repeating-linear-gradient(
      0deg,
      rgba(0,0,0,0.04) 0 6px,
      transparent 6px 14px
    ),
    linear-gradient(135deg, #6a4628 0%, #5a3a20 50%, #3a2410 100%);
  color: #c9a15e;
  font-family: ui-serif, Georgia, serif;
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(201,161,94,0.2),
    0 4px 14px rgba(0,0,0,0.4);
  transition: filter 0.2s ease, transform 0.18s ease;
}
.btn-wood-corner {
  position: absolute;
  width: 12px; height: 12px;
  border: 2px solid #c9a15e;
  background: #c9a15e22;
}
.btn-wood-corner-tl { top: 4px;    left: 4px;    border-right: none;  border-bottom: none; }
.btn-wood-corner-tr { top: 4px;    right: 4px;   border-left: none;   border-bottom: none; }
.btn-wood-corner-bl { bottom: 4px; left: 4px;    border-right: none;  border-top: none; }
.btn-wood-corner-br { bottom: 4px; right: 4px;   border-left: none;   border-top: none; }
.btn-wood-text { position: relative; z-index: 1; }
.btn-wood:hover {
  filter: brightness(1.12);
  transform: translateY(-1px);
}
```

### 18. Gel Capsule

**Type:** Pure CSS
**Description:** Pill-shaped pharma capsule split half clinical-blue, half pearl-white, with a chunky black band carrying the dose label. Hover brightens both halves.

**HTML:**
```html
<button class="btn-pill">
  <span class="btn-pill-half btn-pill-l" aria-hidden="true"></span>
  <span class="btn-pill-half btn-pill-r" aria-hidden="true"></span>
  <span class="btn-pill-band">
    <span class="btn-pill-text">PRESCRIBE 500 MG</span>
  </span>
</button>
```

**CSS:**
```css
.btn-pill {
  position: relative;
  width: 220px; height: 48px;
  border: none;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  isolation: isolate;
  filter: drop-shadow(0 4px 10px rgba(58,120,201,0.3));
  transition: transform 0.18s ease, filter 0.18s ease;
}
.btn-pill-half {
  position: absolute; top: 0; bottom: 0; width: 50%;
}
.btn-pill-l {
  left: 0;
  background: linear-gradient(180deg, #5a96e0 0%, #3a78c9 60%, #2a5a99 100%);
  border-radius: 999px 0 0 999px;
  box-shadow: inset 4px 0 6px rgba(0,0,0,0.1);
}
.btn-pill-l::after {
  content: '';
  position: absolute; top: 5px; left: 14px; right: 4px; height: 35%;
  background: linear-gradient(180deg, rgba(255,255,255,0.55), transparent);
  border-radius: 999px 0 0 0;
}
.btn-pill-r {
  right: 0;
  background: linear-gradient(180deg, #ffffff 0%, #e8edf2 60%, #c8d2dc 100%);
  border-radius: 0 999px 999px 0;
  box-shadow: inset -4px 0 6px rgba(0,0,0,0.08);
}
.btn-pill-r::after {
  content: '';
  position: absolute; top: 5px; left: 4px; right: 14px; height: 35%;
  background: linear-gradient(180deg, rgba(255,255,255,0.9), transparent);
  border-radius: 0 999px 0 0;
}
.btn-pill-band {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 86%; height: 22px;
  background: #0e0e1a;
  border-radius: 4px;
  display: grid; place-items: center;
  z-index: 1;
}
.btn-pill-text {
  font-family: ui-monospace, monospace;
  font-size: 11px; font-weight: 800;
  color: #fdfcfa;
  letter-spacing: 0.18em;
}
.btn-pill:hover { transform: translateY(-2px); filter: drop-shadow(0 6px 14px rgba(58,120,201,0.45)); }
```

### 19. Copper Coin

**Type:** Pure CSS
**Description:** Aged copper disc with verdigris patina blooming around the rim. Hover spins the patina conically.

**HTML:**
```html
<button class="btn-copper">
  <span class="btn-copper-rim" aria-hidden="true"></span>
  <span class="btn-copper-text">Mint</span>
</button>
```

**CSS:**
```css
@property --btn-copper-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.btn-copper {
  position: relative;
  width: 96px; height: 96px;
  border: none; border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, #e8b878 0%, #b87333 55%, #6a3f15 100%);
  color: #3a2410;
  font-family: ui-serif, Georgia, serif;
  font-size: 12px; font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  isolation: isolate;
  box-shadow:
    inset 0 -3px 6px rgba(0,0,0,0.4),
    inset 0 2px 3px rgba(255,255,255,0.4),
    0 6px 14px rgba(0,0,0,0.3);
  --btn-copper-angle: 0deg;
  transition: --btn-copper-angle 4s linear, transform 0.18s ease;
}
.btn-copper-rim {
  position: absolute; inset: 4px;
  border-radius: 50%;
  background: conic-gradient(from var(--btn-copper-angle),
    transparent 0deg,
    #5d8a73aa 30deg,
    transparent 80deg,
    #88a896aa 200deg,
    transparent 260deg,
    #5d8a73aa 320deg,
    transparent 360deg);
  filter: blur(2px);
  pointer-events: none;
  -webkit-mask: radial-gradient(circle, transparent 60%, #000 70%);
          mask: radial-gradient(circle, transparent 60%, #000 70%);
}
.btn-copper-text { position: relative; z-index: 1; text-shadow: 0 1px 0 rgba(255,232,180,0.4); }
.btn-copper:hover {
  --btn-copper-angle: 360deg;
  transform: scale(1.04);
}
```

### 20. Origami Fortune

**Type:** Pure CSS
**Description:** Triangular fold of cream paper with a single ink-red strip. Hover unfolds slightly to reveal the fortune underneath.

**HTML:**
```html
<button class="btn-fortune">
  <span class="btn-fortune-fold" aria-hidden="true"></span>
  <span class="btn-fortune-strip" aria-hidden="true"></span>
  <span class="btn-fortune-text">Open</span>
</button>
```

**CSS:**
```css
.btn-fortune {
  position: relative;
  padding: 16px 36px;
  border: none;
  background: #f5ead0;
  color: #3a2410;
  font-family: ui-serif, Georgia, serif;
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  clip-path: polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 70%);
  box-shadow: 0 4px 12px rgba(58,36,16,0.25);
  transition: transform 0.25s cubic-bezier(.3,1.2,.3,1);
}
.btn-fortune-fold {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(58,36,16,0.18) 100%);
  pointer-events: none;
}
.btn-fortune-strip {
  position: absolute;
  bottom: 0; left: 50%;
  width: 4px; height: 32%;
  background: #a83232;
  transform: translateX(-50%);
}
.btn-fortune-text { position: relative; z-index: 1; }
.btn-fortune:hover {
  transform: translateY(-2px) rotate(-2deg);
  clip-path: polygon(0 0, 100% 0, 100% 80%, 50% 100%, 0 80%);
}
```

### 21. Holographic Foil

**Type:** Pure CSS
**Description:** Iridescent cyan→magenta sheen with a ragged sticker edge. Hover shifts the spectrum across the surface.

**HTML:**
```html
<button class="btn-holo">
  <span class="btn-holo-text">Mint NFT</span>
</button>
```

**CSS:**
```css
.btn-holo {
  position: relative;
  padding: 13px 28px;
  border: 2px solid #fff;
  border-radius: 6px;
  background:
    linear-gradient(115deg,
      #00d4ff 0%,
      #ff3d8c 30%,
      #3eff7f 55%,
      #fef34c 75%,
      #00d4ff 100%);
  background-size: 240% 100%;
  background-position: 0% 50%;
  color: #1a0033;
  font-family: ui-monospace, monospace;
  font-size: 13px; font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow:
    0 4px 18px rgba(0,212,255,0.35),
    0 4px 18px rgba(255,61,140,0.35),
    inset 0 0 0 1px rgba(255,255,255,0.4);
  transition: background-position 0.5s cubic-bezier(.3,1,.3,1), transform 0.18s;
}
.btn-holo-text {
  background: rgba(255,255,255,0.7);
  padding: 4px 10px;
  border-radius: 3px;
}
.btn-holo:hover {
  background-position: 100% 50%;
  transform: translateY(-2px) scale(1.02);
}
```

### 22. Brutalist Slab

**Type:** Pure CSS
**Description:** Rough concrete with a safety-yellow stripe and hard 6px offset. Click slams the slab to flush with the page.

**HTML:**
```html
<button class="btn-brutal">
  <span class="btn-brutal-stripe" aria-hidden="true"></span>
  <span class="btn-brutal-text">SUBMIT</span>
</button>
```

**CSS:**
```css
.btn-brutal {
  position: relative;
  padding: 16px 40px;
  border: 3px solid #1a1a1a;
  border-radius: 0;
  background:
    repeating-radial-gradient(circle at 20% 30%, rgba(0,0,0,0.06) 0 1px, transparent 1px 5px),
    repeating-radial-gradient(circle at 80% 70%, rgba(0,0,0,0.05) 0 1px, transparent 1px 7px),
    #8a8a85;
  color: #1a1a1a;
  font-family: ui-monospace, monospace;
  font-size: 14px; font-weight: 900;
  letter-spacing: 0.18em;
  cursor: pointer;
  box-shadow: 6px 6px 0 #1a1a1a;
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.btn-brutal-stripe {
  position: absolute; left: 0; right: 0;
  top: -3px; height: 6px;
  background: #f5cb1a;
  border-bottom: 3px solid #1a1a1a;
}
.btn-brutal-text { position: relative; }
.btn-brutal:hover { transform: translate(-2px,-2px); box-shadow: 8px 8px 0 #1a1a1a; }
.btn-brutal:active { transform: translate(6px,6px); box-shadow: 0 0 0 #1a1a1a; }
```

### 23. Mercury Bead

**Type:** Pure CSS
**Description:** Quicksilver bead that morphs its border-radius on hover, like surface tension giving way under pressure.

**HTML:**
```html
<button class="btn-mercury">Liquid</button>
```

**CSS:**
```css
.btn-mercury {
  padding: 14px 32px;
  border: none;
  border-radius: 50% 14px 50% 14px / 14px 50% 14px 50%;
  background: radial-gradient(circle at 30% 30%, #e0e6ec 0%, #bcc4ce 50%, #5a6470 100%);
  color: #1e242a;
  font-family: ui-sans-serif, system-ui;
  font-size: 14px; font-weight: 700;
  cursor: pointer;
  box-shadow:
    inset 0 -4px 8px rgba(30,36,42,0.4),
    inset 0 2px 4px rgba(255,255,255,0.6),
    0 4px 12px rgba(30,36,42,0.4);
  transition: border-radius 0.5s cubic-bezier(.3,1.2,.3,1), transform 0.3s;
}
.btn-mercury:hover {
  border-radius: 14px 50% 14px 50% / 50% 14px 50% 14px;
  transform: scale(1.04);
}
```

### 24. Soft Pill

**Type:** Pure CSS
**Description:** The Linear / Raycast / Vercel button trend of 2026 — soft gradient pill with a crisp inset highlight, ambient glow, and a tiny shortcut chip on the right. Hover brightens the glow without moving the button.

**HTML:**
```html
<button class="btn-soft">
  <svg
    class="btn-soft-icon"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    stroke-width="2.4"
    stroke-linecap="round"
    stroke-linejoin="round"
    aria-hidden="true"
  >
    <path d="M5 12h14M13 5l7 7-7 7" />
  </svg>
  <span class="btn-soft-text">Continue</span>
  <span class="btn-soft-kbd" aria-hidden="true">⏎</span>
</button>
```

**CSS:**
```css
.btn-soft {
  --soft-bg-1: #2a2a3a;
  --soft-bg-2: #16161e;
  --soft-glow: #6e7eff;
  position: relative;
  padding: 11px 14px 11px 18px;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 999px;
  background: linear-gradient(180deg, var(--soft-bg-1), var(--soft-bg-2));
  color: #f5f5fa;
  font-family: ui-sans-serif, system-ui;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    inset 0 -1px 0 rgba(0,0,0,0.4),
    0 6px 14px rgba(0,0,0,0.35),
    0 0 0 0 var(--soft-glow);
  transition: box-shadow 0.25s ease, transform 0.12s ease;
}
.btn-soft-icon {
  width: 14px; height: 14px;
  color: var(--soft-glow);
  flex-shrink: 0;
}
.btn-soft-kbd {
  font-family: ui-monospace, monospace;
  font-size: 11px;
  color: #a8a8b8;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 4px;
  padding: 1px 6px;
  margin-left: 4px;
}
.btn-soft:hover {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.15),
    inset 0 -1px 0 rgba(0,0,0,0.4),
    0 6px 14px rgba(0,0,0,0.35),
    0 0 22px -4px var(--soft-glow);
}
.btn-soft:active { transform: translateY(1px); }
```

### 25. Masking Tape

**Type:** Pure CSS
**Description:** Kraft masking tape with torn perforated edges and a hand-stamped ink label. Hover lifts the corner like a peel.

**HTML:**
```html
<button class="btn-tape">
  <span class="btn-tape-text">FRAGILE</span>
</button>
```

**CSS:**
```css
.btn-tape {
  position: relative;
  padding: 14px 38px;
  border: none;
  border-radius: 0;
  background:
    repeating-linear-gradient(135deg,
      rgba(0,0,0,0.04) 0 6px,
      transparent 6px 12px),
    #d8b87a;
  color: #2a1d0e;
  font-family: ui-monospace, monospace;
  font-size: 14px; font-weight: 800;
  letter-spacing: 0.32em;
  cursor: pointer;
  /* Torn edges: scalloped left/right via radial-gradient mask */
  -webkit-mask:
    radial-gradient(circle 4px at 0% 50%, transparent 99%, #000 100%),
    radial-gradient(circle 4px at 100% 50%, transparent 99%, #000 100%),
    linear-gradient(#000, #000);
          mask:
    radial-gradient(circle 4px at 0% 50%, transparent 99%, #000 100%),
    radial-gradient(circle 4px at 100% 50%, transparent 99%, #000 100%),
    linear-gradient(#000, #000);
  -webkit-mask-composite: source-over;
          mask-composite: add;
  box-shadow: 0 3px 8px rgba(0,0,0,0.2);
  transition: transform 0.25s cubic-bezier(.3,1,.3,1);
}
.btn-tape:hover {
  transform: rotate(-2deg) translateY(-2px);
}
```

### 26. Glass Shard

**Type:** Pure CSS
**Description:** Obsidian shard with a faceted clip-path; magenta and cyan refract through the cuts on hover.

**HTML:**
```html
<button class="btn-shard">
  <span class="btn-shard-text">Activate</span>
</button>
```

**CSS:**
```css
.btn-shard {
  position: relative;
  padding: 14px 36px;
  border: none;
  background:
    linear-gradient(115deg,
      #0e0e1a 0%,
      #ff3d8c 30%,
      #0e0e1a 50%,
      #00d4ff 70%,
      #0e0e1a 100%);
  background-size: 240% 100%;
  background-position: 0% 50%;
  color: #fff;
  font-family: ui-sans-serif, system-ui;
  font-size: 14px; font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  clip-path: polygon(8% 0, 92% 0, 100% 50%, 92% 100%, 8% 100%, 0 50%);
  box-shadow: 0 6px 18px rgba(0,212,255,0.25), 0 6px 18px rgba(255,61,140,0.25);
  transition: background-position 0.6s cubic-bezier(.3,1,.3,1), transform 0.2s;
}
.btn-shard-text { position: relative; }
.btn-shard:hover {
  background-position: 100% 50%;
  transform: translateY(-2px);
}
```

### 27. Velvet Ribbon

**Type:** Pure CSS
**Description:** Wine-velvet pill with gilt edges; the nap shimmers like brushed fabric on hover.

**HTML:**
```html
<button class="btn-velvet">
  <span class="btn-velvet-text">RSVP</span>
</button>
```

**CSS:**
```css
.btn-velvet {
  position: relative;
  padding: 13px 36px;
  border: 2px solid #d4a017;
  border-radius: 999px;
  background:
    repeating-linear-gradient(115deg,
      rgba(212,160,23,0.06) 0 1px,
      transparent 1px 4px),
    radial-gradient(ellipse at 50% 30%, #6a2235 0%, #5a1d2c 60%, #3a0e1a 100%);
  color: #f5d678;
  font-family: ui-serif, Georgia, serif;
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.22em;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(245,214,120,0.25),
    inset 0 -8px 18px rgba(0,0,0,0.4),
    0 4px 14px rgba(58,14,26,0.45);
  transition: filter 0.3s ease, transform 0.2s ease;
}
.btn-velvet:hover {
  filter: brightness(1.18) saturate(1.1);
  transform: translateY(-1px);
}
```

### 28. LED Segment

**Type:** Pure CSS
**Description:** Phosphor-green 7-segment-style display on a pure black panel with a faint scanline overlay.

**HTML:**
```html
<button class="btn-led">
  <span class="btn-led-scanline" aria-hidden="true"></span>
  <span class="btn-led-text">START</span>
</button>
```

**CSS:**
```css
.btn-led {
  position: relative;
  padding: 14px 30px;
  border: 2px solid #1a3a20;
  border-radius: 4px;
  background: #0a0a0a;
  color: #3eff7f;
  font-family: 'Courier New', ui-monospace, monospace;
  font-size: 16px; font-weight: 900;
  letter-spacing: 0.2em;
  cursor: pointer;
  text-shadow:
    0 0 6px rgba(62,255,127,0.8),
    0 0 14px rgba(62,255,127,0.4);
  box-shadow:
    inset 0 0 0 1px #0a1a10,
    inset 0 0 24px rgba(62,255,127,0.08),
    0 4px 14px rgba(0,0,0,0.5);
  overflow: hidden;
  transition: text-shadow 0.18s ease;
}
.btn-led-scanline {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    0deg,
    rgba(62,255,127,0.05) 0 2px,
    transparent 2px 4px);
  pointer-events: none;
}
.btn-led-text { position: relative; }
.btn-led:hover {
  text-shadow:
    0 0 10px rgba(62,255,127,1),
    0 0 22px rgba(62,255,127,0.7),
    0 0 30px rgba(62,255,127,0.3);
}
```

### 29. Cassette Label

**Type:** Pure CSS
**Description:** Hot-pink mixtape J-card with electric-teal corner sticker and ruled lines. Hover gives it a 90s cassette tilt.

**HTML:**
```html
<button class="btn-cass">
  <span class="btn-cass-corner" aria-hidden="true"></span>
  <span class="btn-cass-text">SIDE A</span>
</button>
```

**CSS:**
```css
.btn-cass {
  position: relative;
  padding: 14px 32px 14px 38px;
  border: 2px solid #0a0a14;
  border-radius: 0;
  background:
    repeating-linear-gradient(0deg,
      transparent 0 13px,
      rgba(10,10,20,0.18) 13px 14px),
    #ff3d83;
  color: #0a0a14;
  font-family: ui-monospace, monospace;
  font-size: 14px; font-weight: 900;
  letter-spacing: 0.28em;
  cursor: pointer;
  box-shadow: 4px 4px 0 #0a0a14;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-cass-corner {
  position: absolute;
  top: 4px; left: 4px;
  width: 16px; height: 16px;
  background: #00d4d4;
  border: 2px solid #0a0a14;
  transform: rotate(45deg);
  transform-origin: center;
}
.btn-cass-text { position: relative; }
.btn-cass:hover { transform: rotate(-1.5deg) translate(-1px,-1px); box-shadow: 5px 5px 0 #0a0a14; }
```

### 30. Chalkboard

**Type:** Pure CSS
**Description:** Slate-green chalkboard with a chalk-drawn label and dusty grain. Hover smudges a faint eraser trail.

**HTML:**
```html
<button class="btn-chalk">
  <span class="btn-chalk-dust" aria-hidden="true"></span>
  <span class="btn-chalk-text">Today's Special</span>
</button>
```

**CSS:**
```css
.btn-chalk {
  position: relative;
  padding: 14px 30px;
  border: 4px solid #c9a15e;
  border-radius: 6px;
  background:
    repeating-linear-gradient(45deg,
      rgba(232,226,208,0.04) 0 1px,
      transparent 1px 4px),
    #1e2a23;
  color: #e8e2d0;
  font-family: 'Caveat', 'Comic Sans MS', cursive, ui-serif;
  font-size: 17px; font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  box-shadow: inset 0 0 24px rgba(0,0,0,0.5), 0 4px 12px rgba(0,0,0,0.3);
  overflow: hidden;
  transition: filter 0.18s ease;
}
.btn-chalk-dust {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 30% 30%, rgba(232,226,208,0.06), transparent 60%),
    radial-gradient(ellipse at 70% 80%, rgba(232,226,208,0.04), transparent 60%);
  pointer-events: none; opacity: 0;
  transition: opacity 0.3s ease;
}
.btn-chalk-text { position: relative; text-shadow: 0 0 1px rgba(232,226,208,0.4); }
.btn-chalk:hover .btn-chalk-dust { opacity: 1; }
```

### 31. Vinyl Sleeve

**Type:** CSS + JS
**Description:** Sleeve-red record cover with concentric grooves; click drops the needle and ripples outward from the click point.

**HTML:**
```html
<button class="btn-vinyl">Play</button>
```

**CSS:**
```css
.btn-vinyl {
  position: relative;
  width: 96px; height: 96px;
  border: 2px solid #1a1a1a;
  border-radius: 50%;
  background:
    radial-gradient(circle at center,
      #f5ead0 0%,
      #f5ead0 18%,
      #1a1a1a 19%,
      #1a1a1a 100%),
    #cc3232;
  background-size: 100% 100%;
  background-color: #cc3232;
  color: #cc3232;
  font-family: ui-serif, Georgia, serif;
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.16em;
  cursor: pointer;
  display: grid; place-items: center;
  isolation: isolate;
  overflow: hidden;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.05),
    0 4px 14px rgba(0,0,0,0.35);
  transition: transform 0.3s ease;
}
.btn-vinyl::before {
  content: '';
  position: absolute; inset: 12px;
  border-radius: 50%;
  background:
    repeating-radial-gradient(circle, #1a1a1a 0 1px, #2a2a2a 1px 3px);
  pointer-events: none;
}
.btn-vinyl::after {
  content: '';
  position: absolute; top: 50%; left: 50%;
  width: 0; height: 0;
  border-radius: 50%;
  background: rgba(245,234,208,0.4);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.btn-vinyl.btn-vinyl-rippled::after {
  animation: btn-vinyl-ripple 0.7s ease-out;
}
@keyframes btn-vinyl-ripple {
  0%   { width: 0; height: 0; opacity: 0.7; }
  100% { width: 200%; height: 200%; opacity: 0; }
}
.btn-vinyl:hover { transform: rotate(20deg); }
.btn-vinyl span,
.btn-vinyl  { isolation: isolate; }
/* label sits on top of grooves */
.btn-vinyl { z-index: 0; }
```

**JS:**
```js
document.querySelectorAll('.btn-vinyl').forEach(function(btn) {
  btn.addEventListener('click', function() {
    btn.classList.remove('btn-vinyl-rippled');
    /* force reflow so the same animation can replay */
    void btn.offsetWidth;
    btn.classList.add('btn-vinyl-rippled');
  });
});
```

### 32. Polaroid Snapshot

**Type:** Pure CSS
**Description:** A genuine Polaroid frame — square sepia photo on top, the iconic chunky white bottom border with a handwritten caption and date stamp. Tilts casually on hover like it was just dropped on a table.

**HTML:**
```html
<button class="btn-polar">
  <span class="btn-polar-photo" aria-hidden="true">
    <span class="btn-polar-glare" aria-hidden="true"></span>
  </span>
  <span class="btn-polar-caption">
    <span class="btn-polar-text">Save to album</span>
    <span class="btn-polar-date">'89 · 03/24</span>
  </span>
</button>
```

**CSS:**
```css
.btn-polar {
  position: relative;
  padding: 8px 8px 0;
  border: none;
  background: #fff8e7;
  cursor: pointer;
  display: flex; flex-direction: column;
  gap: 0;
  width: 156px;
  box-shadow:
    0 8px 22px rgba(0,0,0,0.35),
    0 1px 0 rgba(112,72,48,0.1) inset;
  transition: transform 0.3s cubic-bezier(.3,1,.3,1), box-shadow 0.3s ease;
  transform: rotate(-1.5deg);
}
.btn-polar-photo {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  background:
    radial-gradient(circle at 30% 25%, #ffd089 0%, transparent 45%),
    radial-gradient(circle at 70% 75%, rgba(0,0,0,0.25), transparent 50%),
    linear-gradient(135deg, #fcb938 0%, #b87333 50%, #5a3010 100%);
  filter: sepia(0.35) saturate(1.2) contrast(1.05);
  overflow: hidden;
}
.btn-polar-glare {
  position: absolute;
  top: -10%; left: -20%;
  width: 70%; height: 70%;
  background: radial-gradient(ellipse, rgba(255,255,255,0.4), transparent 60%);
  pointer-events: none;
}
.btn-polar-caption {
  /* The iconic chunky bottom border */
  display: flex; flex-direction: column;
  align-items: center;
  padding: 14px 10px 22px;
  gap: 4px;
}
.btn-polar-text {
  font-family: 'Caveat', 'Comic Sans MS', cursive, ui-serif;
  font-size: 16px; font-weight: 600;
  color: #3a2410;
  letter-spacing: 0.02em;
  line-height: 1;
}
.btn-polar-date {
  font-family: ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.16em;
  color: #b87333;
}
.btn-polar:hover {
  transform: rotate(0deg) translateY(-4px) scale(1.02);
  box-shadow: 0 14px 32px rgba(0,0,0,0.4);
}
```

### 33. Boarding Pass

**Type:** Pure CSS
**Description:** Airline-navy ticket with three-letter airport codes, a flight-path arrow, magenta tear-line stub, and a real barcode strip along the bottom.

**HTML:**
```html
<button class="btn-board">
  <span class="btn-board-main">
    <span class="btn-board-route">
      <span class="btn-board-iata">SFO</span>
      <svg
        class="btn-board-arrow"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        aria-hidden="true"
      >
        <path d="M2 12h18M14 5l7 7-7 7" />
      </svg>
      <span class="btn-board-iata">JFK</span>
    </span>
    <span class="btn-board-barcode" aria-hidden="true"></span>
  </span>
  <span class="btn-board-tear" aria-hidden="true"></span>
  <span class="btn-board-stub">
    <span class="btn-board-stub-label">SEAT</span>
    <span class="btn-board-stub-val">14A</span>
  </span>
</button>
```

**CSS:**
```css
.btn-board {
  position: relative;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: #0c2340;
  color: #fdf6e9;
  font-family: ui-monospace, monospace;
  cursor: pointer;
  display: inline-flex; align-items: stretch;
  box-shadow: 0 6px 16px rgba(12,35,64,0.4);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  overflow: hidden;
}
.btn-board-main {
  display: flex; flex-direction: column;
  padding: 12px 18px 10px;
  gap: 8px;
}
.btn-board-route {
  display: flex; align-items: center; gap: 10px;
  font-size: 16px; font-weight: 800;
  letter-spacing: 0.12em;
}
.btn-board-arrow { width: 20px; height: 14px; color: #e84a8a; }
.btn-board-iata { color: #fdf6e9; }
.btn-board-barcode {
  display: block;
  height: 14px;
  background: repeating-linear-gradient(90deg,
    #fdf6e9 0 2px,
    transparent 2px 3px,
    #fdf6e9 3px 4px,
    transparent 4px 7px,
    #fdf6e9 7px 8px,
    transparent 8px 10px);
  opacity: 0.95;
}
.btn-board-tear {
  position: relative;
  width: 0;
  border-left: 2px dashed rgba(253,246,233,0.35);
  margin: 6px 0;
}
.btn-board-tear::before, .btn-board-tear::after {
  content: '';
  position: absolute;
  left: -7px; width: 12px; height: 12px;
  background: #17171f;
  border-radius: 50%;
}
.btn-board-tear::before { top: -12px; }
.btn-board-tear::after  { bottom: -12px; }
.btn-board-stub {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 12px 18px;
  background: linear-gradient(180deg, rgba(232,74,138,0.18), rgba(232,74,138,0.05));
  border-left: 1px solid rgba(232,74,138,0.4);
  gap: 2px;
}
.btn-board-stub-label {
  font-size: 9px; font-weight: 700;
  letter-spacing: 0.22em;
  color: #e84a8a;
}
.btn-board-stub-val {
  font-size: 18px; font-weight: 900;
  letter-spacing: 0.04em;
  color: #fdf6e9;
}
.btn-board:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(12,35,64,0.55);
}
```

### 34. Subway Token

**Type:** CSS + JS
**Description:** Aged brass subway token with a curved arc sweep that traces a clock-like ring around the inscription on click. The arc is an SVG path so the curve stays smooth at every angle.

**HTML:**
```html
<button class="btn-token">
  <svg class="btn-token-arc" viewBox="0 0 100 100" aria-hidden="true">
    <circle cx="50" cy="50" r="42" fill="none" stroke="rgba(42,29,14,0.18)" stroke-width="3" />
    <circle
      class="btn-token-arc-spin"
      cx="50"
      cy="50"
      r="42"
      fill="none"
      stroke="#2a1d0e"
      stroke-width="3"
      stroke-linecap="round"
      pathLength="100"
      stroke-dasharray="22 100"
    />
  </svg>
  <span class="btn-token-text">PROCESS</span>
</button>
```

**CSS:**
```css
.btn-token {
  position: relative;
  width: 124px; height: 124px;
  border: none; border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, #e8c890 0%, #c9a15e 50%, #6a4520 100%);
  color: #2a1d0e;
  font-family: ui-serif, Georgia, serif;
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.22em;
  cursor: pointer;
  display: grid; place-items: center;
  box-shadow:
    inset 0 -3px 6px rgba(0,0,0,0.4),
    inset 0 3px 4px rgba(255,232,180,0.6),
    0 6px 14px rgba(0,0,0,0.35);
  transition: transform 0.18s ease;
}
.btn-token-arc {
  position: absolute;
  inset: 8px;
  width: calc(100% - 16px); height: calc(100% - 16px);
  pointer-events: none;
}
.btn-token-arc-spin {
  transform-origin: 50% 50%;
  transform: rotate(-90deg);
  transition: transform 1.4s cubic-bezier(.3,1,.3,1);
}
.btn-token-text {
  position: relative; z-index: 1;
  text-shadow: 0 1px 0 rgba(255,232,180,0.4);
}
.btn-token.is-processing .btn-token-arc-spin {
  transform: rotate(270deg);
}
.btn-token:hover { transform: scale(1.04); }
```

**JS:**
```js
document.querySelectorAll('.btn-token').forEach(function(btn) {
  btn.addEventListener('click', function() {
    if (btn.classList.contains('is-processing')) return;
    btn.classList.add('is-processing');
    setTimeout(function() { btn.classList.remove('is-processing'); }, 1400);
  });
});
```

### 35. Rx Label

**Type:** Pure CSS
**Description:** Cream pharmacy label with letterpress serif, dotted underline, and a red Rx badge. Vintage prescription chic.

**HTML:**
```html
<button class="btn-rx">
  <span class="btn-rx-badge" aria-hidden="true">℞</span>
  <span class="btn-rx-text">TAKE ONE</span>
</button>
```

**CSS:**
```css
.btn-rx {
  position: relative;
  padding: 12px 26px 12px 16px;
  border: 1.5px solid #4d5435;
  border-radius: 3px;
  background:
    repeating-linear-gradient(0deg,
      transparent 0 22px,
      rgba(77,84,53,0.08) 22px 23px),
    #f5ede0;
  color: #4d5435;
  font-family: ui-serif, Georgia, serif;
  font-size: 14px; font-weight: 700;
  letter-spacing: 0.18em;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 14px;
  box-shadow: 0 4px 10px rgba(77,84,53,0.18);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.btn-rx-badge {
  width: 26px; height: 26px;
  background: #a32424;
  color: #f5ede0;
  border-radius: 3px;
  display: grid; place-items: center;
  font-family: ui-serif, Georgia, serif;
  font-size: 14px; font-weight: 800;
}
.btn-rx-text { border-bottom: 1.5px dotted #4d5435; padding-bottom: 1px; }
.btn-rx:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(77,84,53,0.22); }
```

### 36. Radio Dial

**Type:** CSS + JS
**Description:** Bakelite-cream dial with a brass pointer locked to OFF. Click toggles to ON: the pointer swings clockwise to the right tick mark and stays there until the next click.

**HTML:**
```html
<button class="btn-radio" aria-pressed="false" aria-label="Toggle power">
  <span class="btn-radio-tick btn-radio-tick-l" aria-hidden="true">OFF</span>
  <span class="btn-radio-tick btn-radio-tick-r" aria-hidden="true">ON</span>
  <span class="btn-radio-arrow" aria-hidden="true"></span>
</button>
```

**CSS:**
```css
.btn-radio {
  position: relative;
  width: 124px; height: 64px;
  border: 3px solid #1a1a1a;
  border-bottom-width: 6px;
  border-radius: 124px 124px 0 0 / 124px 124px 0 0;
  background: radial-gradient(ellipse at 50% 90%, #f5ede0 0%, #d8c8a8 100%);
  cursor: pointer;
  overflow: hidden;
  font-family: ui-serif, Georgia, serif;
  font-size: 9px; font-weight: 800;
  letter-spacing: 0.14em;
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
}
.btn-radio-tick {
  position: absolute; bottom: 6px;
  color: #5a4520;
  transition: color 0.3s ease, font-weight 0.3s ease;
}
.btn-radio-tick-l { left: 14px; color: #a32424; }
.btn-radio-tick-r { right: 14px; }
.btn-radio[aria-pressed="true"] .btn-radio-tick-l { color: #5a4520; }
.btn-radio[aria-pressed="true"] .btn-radio-tick-r { color: #a32424; }
.btn-radio-arrow {
  position: absolute;
  bottom: 0; left: 50%;
  width: 4px; height: 44px;
  background: linear-gradient(180deg, #c9a15e 0%, #6a4520 100%);
  border-radius: 2px 2px 0 0;
  transform-origin: bottom center;
  transform: translateX(-2px) rotate(-40deg);
  transition: transform 0.55s cubic-bezier(.3,1.2,.3,1);
}
.btn-radio[aria-pressed="true"] .btn-radio-arrow {
  transform: translateX(-2px) rotate(40deg);
}
```

**JS:**
```js
document.querySelectorAll('.btn-radio').forEach(function(btn) {
  btn.addEventListener('click', function() {
    var pressed = btn.getAttribute('aria-pressed') === 'true';
    btn.setAttribute('aria-pressed', pressed ? 'false' : 'true');
  });
});
```

### 37. Postage Stamp

**Type:** Pure CSS
**Description:** Regal blue stamp with scalloped perforated edges and a faded ink date. Pure SVG-mask perforation.

**HTML:**
```html
<button class="btn-stamp">
  <span class="btn-stamp-text">FIRST CLASS</span>
  <span class="btn-stamp-num">¢25</span>
</button>
```

**CSS:**
```css
.btn-stamp {
  position: relative;
  padding: 16px 22px;
  border: none;
  background: #1a3a78;
  color: #fdf6e9;
  font-family: ui-serif, Georgia, serif;
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.22em;
  cursor: pointer;
  display: grid; gap: 4px;
  /* Scalloped perforated edges via radial mask */
  -webkit-mask:
    radial-gradient(circle 4px at 0 50%, transparent 99%, #000 100%) repeat-y left,
    radial-gradient(circle 4px at 100% 50%, transparent 99%, #000 100%) repeat-y right,
    radial-gradient(circle 4px at 50% 0, transparent 99%, #000 100%) repeat-x top,
    radial-gradient(circle 4px at 50% 100%, transparent 99%, #000 100%) repeat-x bottom,
    linear-gradient(#000, #000);
  -webkit-mask-size: 8px 12px, 8px 12px, 12px 8px, 12px 8px, 100% 100%;
  -webkit-mask-composite: source-over;
          mask:
    radial-gradient(circle 4px at 0 50%, transparent 99%, #000 100%) repeat-y left,
    radial-gradient(circle 4px at 100% 50%, transparent 99%, #000 100%) repeat-y right,
    radial-gradient(circle 4px at 50% 0, transparent 99%, #000 100%) repeat-x top,
    radial-gradient(circle 4px at 50% 100%, transparent 99%, #000 100%) repeat-x bottom,
    linear-gradient(#000, #000);
          mask-size: 8px 12px, 8px 12px, 12px 8px, 12px 8px, 100% 100%;
          mask-composite: add;
  box-shadow: 0 4px 12px rgba(26,58,120,0.4);
  transition: transform 0.2s ease;
}
.btn-stamp-num {
  font-size: 18px; color: #fcb938;
  letter-spacing: 0.08em;
}
.btn-stamp:hover { transform: rotate(-3deg) translateY(-2px); }
```

### 38. Cigar Band

**Type:** Pure CSS
**Description:** Gold filigree foil seal over a maroon ribbon; ornate Victorian club-lounge energy.

**HTML:**
```html
<button class="btn-cigar">
  <span class="btn-cigar-edge" aria-hidden="true"></span>
  <span class="btn-cigar-text">PRIVATE CLUB</span>
</button>
```

**CSS:**
```css
.btn-cigar {
  position: relative;
  padding: 14px 36px;
  border: 2px solid #d4a017;
  border-radius: 2px;
  background:
    repeating-radial-gradient(circle at 50% 50%, rgba(212,160,23,0.1) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(212,160,23,0.06) 0 2px, transparent 2px 6px),
    linear-gradient(180deg, #6a2540 0%, #5a1d2c 60%, #3a0e1a 100%);
  color: #d4a017;
  font-family: ui-serif, Georgia, serif;
  font-size: 13px; font-weight: 800;
  letter-spacing: 0.28em;
  cursor: pointer;
  box-shadow:
    inset 0 0 0 4px rgba(212,160,23,0.15),
    inset 0 1px 0 rgba(212,160,23,0.4),
    0 6px 16px rgba(58,14,26,0.4);
  text-shadow: 0 1px 0 rgba(0,0,0,0.4);
  transition: filter 0.18s, transform 0.2s;
}
.btn-cigar-edge {
  position: absolute; inset: 4px;
  border: 1px solid #d4a017;
  pointer-events: none;
}
.btn-cigar:hover { filter: brightness(1.1); transform: translateY(-1px); }
```

### 39. Calculator Key

**Type:** Pure CSS
**Description:** Beige concave keycap with olive-green accent label; click flips the press shadow flush.

**HTML:**
```html
<button class="btn-calc">
  <span class="btn-calc-cap">
    <span class="btn-calc-glyph">=</span>
    <span class="btn-calc-label">EQUAL</span>
  </span>
</button>
```

**CSS:**
```css
.btn-calc {
  display: inline-block;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}
.btn-calc-cap {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px;
  width: 84px; height: 64px;
  background: linear-gradient(180deg, #ebe4d3 0%, #d8d2c0 60%, #c0b9a3 100%);
  border-radius: 6px;
  box-shadow:
    inset 0 -6px 8px rgba(0,0,0,0.12),
    inset 0 2px 3px rgba(255,255,255,0.7),
    0 4px 0 #4d5435,
    0 6px 12px rgba(0,0,0,0.2);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.btn-calc-glyph {
  font-family: ui-monospace, monospace;
  font-size: 22px; font-weight: 900;
  color: #4d5435;
}
.btn-calc-label {
  font-family: ui-monospace, monospace;
  font-size: 8px; font-weight: 700;
  letter-spacing: 0.18em;
  color: #4d5435;
  opacity: 0.8;
}
.btn-calc:active .btn-calc-cap {
  transform: translateY(3px);
  box-shadow:
    inset 0 -2px 4px rgba(0,0,0,0.18),
    inset 0 2px 3px rgba(255,255,255,0.5),
    0 1px 0 #4d5435,
    0 2px 4px rgba(0,0,0,0.15);
}
```

### 40. Toolbox Latch

**Type:** CSS + JS
**Description:** Enamel teal lever with chrome bolt; the cursor spotlight illuminates the metal as you move across.

**HTML:**
```html
<button class="btn-latch">
  <span class="btn-latch-bolt" aria-hidden="true"></span>
  <span class="btn-latch-text">UNLOCK</span>
</button>
```

**CSS:**
```css
.btn-latch {
  position: relative;
  padding: 14px 32px 14px 50px;
  border: 2px solid #1a1a1a;
  border-radius: 6px;
  background:
    radial-gradient(circle 80px at var(--mx, 50%) var(--my, 50%),
      rgba(255,255,255,0.18), transparent 70%),
    linear-gradient(180deg, #0e7a5c 0%, #0d6048 60%, #084030 100%);
  color: #e0f0ec;
  font-family: ui-monospace, monospace;
  font-size: 13px; font-weight: 800;
  letter-spacing: 0.22em;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(8,64,48,0.4), inset 0 1px 0 rgba(255,255,255,0.15);
  --mx: 50%; --my: 50%;
}
.btn-latch-bolt {
  position: absolute;
  left: 12px; top: 50%;
  width: 18px; height: 18px;
  margin-top: -9px;
  background: radial-gradient(circle at 35% 30%, #f5f5f5, #8a8a85 60%, #3a3a32 100%);
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px #1a1a1a, 0 1px 2px rgba(0,0,0,0.4);
}
.btn-latch-bolt::before, .btn-latch-bolt::after {
  content: '';
  position: absolute; top: 50%; left: 50%;
  width: 12px; height: 2px;
  background: #1a1a1a;
  transform: translate(-50%, -50%);
}
.btn-latch-bolt::after { transform: translate(-50%, -50%) rotate(90deg); }
```

**JS:**
```js
document.querySelectorAll('.btn-latch').forEach(function(btn) {
  btn.addEventListener('mousemove', function(e) {
    var rect = btn.getBoundingClientRect();
    btn.style.setProperty('--mx', (e.clientX - rect.left) + 'px');
    btn.style.setProperty('--my', (e.clientY - rect.top) + 'px');
  });
  btn.addEventListener('mouseleave', function() {
    btn.style.setProperty('--mx', '50%');
    btn.style.setProperty('--my', '50%');
  });
});
```

### 41. Receipt Paper

**Type:** CSS + JS
**Description:** Newsprint-cream receipt with a dashed perforation along the top, a tilted "PAID" rubber stamp watermark in the top-left corner, and a total that counts up on click before resetting.

**HTML:**
```html
<button class="btn-receipt">
  <span class="btn-receipt-perf" aria-hidden="true"></span>
  <span class="btn-receipt-stamp" aria-hidden="true">PAID</span>
  <span class="btn-receipt-row">
    <span class="btn-receipt-text">TOTAL</span>
    <span class="btn-receipt-amt" data-target="142">$0</span>
  </span>
</button>
```

**CSS:**
```css
.btn-receipt {
  position: relative;
  padding: 28px 26px 16px;
  border: none;
  background: #f4ecd8;
  color: #1a1a1a;
  font-family: ui-monospace, monospace;
  font-size: 12px; font-weight: 800;
  letter-spacing: 0.16em;
  cursor: pointer;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.18));
  transition: transform 0.18s ease;
  overflow: hidden;
}
.btn-receipt-perf {
  position: absolute;
  top: 0; left: 0; right: 0; height: 6px;
  background-image:
    radial-gradient(circle 3px at 50% 0, transparent 99%, #f4ecd8 100%);
  background-size: 12px 6px;
  background-repeat: repeat-x;
  background-position: top;
  border-bottom: 1px dashed #8a7d5a;
  pointer-events: none;
}
.btn-receipt-stamp {
  position: absolute;
  top: 14px; left: 8px;
  font-family: ui-serif, Georgia, serif;
  font-size: 10px;
  color: #aa2a2a;
  border: 1.5px solid #aa2a2a;
  padding: 1px 5px;
  transform: rotate(-14deg);
  transform-origin: left center;
  letter-spacing: 0.14em;
  opacity: 0.55;
  pointer-events: none;
}
.btn-receipt-row {
  display: inline-flex; align-items: baseline; gap: 24px;
  padding-left: 38px;
}
.btn-receipt-text { color: #1a1a1a; }
.btn-receipt-amt {
  color: #aa2a2a; font-weight: 800;
  font-size: 18px;
  letter-spacing: 0.04em;
  min-width: 64px;
  display: inline-block;
}
.btn-receipt:hover { transform: translateY(-2px); }
```

**JS:**
```js
document.querySelectorAll('.btn-receipt').forEach(function(btn) {
  btn.addEventListener('click', function() {
    var amt = btn.querySelector('.btn-receipt-amt');
    if (!amt || amt.dataset.animating === '1') return;
    amt.dataset.animating = '1';
    var target = parseInt(amt.dataset.target, 10) || 0;
    var start = 0;
    var startTime = null;
    var duration = 700;
    function step(ts) {
      if (!startTime) startTime = ts;
      var t = Math.min((ts - startTime) / duration, 1);
      var eased = 1 - Math.pow(1 - t, 3);
      var val = Math.round(start + (target - start) * eased);
      amt.textContent = '$' + val;
      if (t < 1) requestAnimationFrame(step);
      else { setTimeout(function() { amt.textContent = '$0'; amt.dataset.animating = ''; }, 1200); }
    }
    requestAnimationFrame(step);
  });
});
```

### 42. Punch Card

**Type:** CSS + JS
**Description:** Manila IBM-style punch card with the iconic clipped top-right corner, a stamped FORTRAN-style header at the top, and a real grid of column-and-row holes punched through the body. On hover the whole card follows the cursor magnetically.

**HTML:**
```html
<button class="btn-punch">
  <span class="btn-punch-header">RUN COMPILE 0030</span>
  <span class="btn-punch-grid" aria-hidden="true"></span>
  <span class="btn-punch-text">COMPILE</span>
</button>
```

**CSS:**
```css
.btn-punch {
  position: relative;
  padding: 28px 32px 18px;
  border: 1.5px solid #8a7d4a;
  background: #e3d4a8;
  color: #2a1d0e;
  font-family: ui-monospace, monospace;
  font-size: 14px; font-weight: 800;
  letter-spacing: 0.28em;
  cursor: pointer;
  /* Iconic clipped top-right corner */
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
  box-shadow: 0 4px 12px rgba(58,36,16,0.3);
  transition: transform 0.25s cubic-bezier(.3,1,.5,1);
  text-align: center;
  display: block;
  --px: 0px; --py: 0px;
}
.btn-punch-header {
  position: absolute;
  top: 6px; left: 14px;
  font-family: ui-monospace, monospace;
  font-size: 8px; font-weight: 700;
  color: #5a4520;
  letter-spacing: 0.22em;
  border-bottom: 1px solid #8a7d4a;
  padding-bottom: 2px;
  width: calc(100% - 36px);
  text-align: left;
}
/* The hole grid: a single repeating background that draws columns of
   1.5×4 mm rectangular holes — the visual signature of an 80-column card.
   Two rows of perforations, evenly spaced, with ink-black holes. */
.btn-punch-grid {
  position: absolute;
  top: 22px; bottom: 4px;
  left: 8px; right: 8px;
  background-image:
    radial-gradient(2px 4px at 50% 50%, #1a1a1a 99%, transparent 100%),
    radial-gradient(2px 4px at 50% 50%, rgba(0,0,0,0.18) 99%, transparent 100%);
  background-size: 14px 22px, 14px 22px;
  background-position: 0 0, 0 11px;
  background-repeat: repeat-x, repeat-x;
  pointer-events: none;
  opacity: 0.85;
  -webkit-mask: linear-gradient(180deg,
    #000 0 30%, transparent 30% 60%, #000 60% 100%);
          mask: linear-gradient(180deg,
    #000 0 30%, transparent 30% 60%, #000 60% 100%);
}
.btn-punch-text {
  position: relative;
  z-index: 1;
  display: inline-block;
  background: #e3d4a8;
  padding: 2px 12px;
}
.btn-punch:hover { transform: translate(var(--px), var(--py)); }
```

**JS:**
```js
document.querySelectorAll('.btn-punch').forEach(function(btn) {
  btn.addEventListener('mousemove', function(e) {
    var rect = btn.getBoundingClientRect();
    var x = (e.clientX - rect.left - rect.width  / 2) * 0.18;
    var y = (e.clientY - rect.top  - rect.height / 2) * 0.18;
    btn.style.setProperty('--px', x + 'px');
    btn.style.setProperty('--py', y + 'px');
  });
  btn.addEventListener('mouseleave', function() {
    btn.style.setProperty('--px', '0px');
    btn.style.setProperty('--py', '0px');
  });
});
```

### 43. Periscope Lens

**Type:** Pure CSS
**Description:** Brass periscope rim around a glowing cyan lens with crosshair etching. Hover pulses the lens like a sub coming online.

**HTML:**
```html
<button class="btn-peri">
  <span class="btn-peri-rim" aria-hidden="true"></span>
  <span class="btn-peri-cross" aria-hidden="true"></span>
  <span class="btn-peri-text">SCAN</span>
</button>
```

**CSS:**
```css
.btn-peri {
  position: relative;
  width: 110px; height: 110px;
  border: none; border-radius: 50%;
  background:
    radial-gradient(circle at center,
      #0a1a2a 0%,
      #0a3a5a 35%,
      #00d4ff 75%,
      #6ef0ff 100%);
  color: #0a1a2a;
  font-family: ui-monospace, monospace;
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.22em;
  cursor: pointer;
  display: grid; place-items: center;
  isolation: isolate;
  box-shadow:
    inset 0 0 0 8px #b87333,
    inset 0 0 0 10px #6a3f15,
    0 0 24px rgba(0,212,255,0.3),
    0 6px 14px rgba(0,0,0,0.4);
}
.btn-peri-rim {
  position: absolute; inset: 12px;
  border: 1.5px solid rgba(0,212,255,0.5);
  border-radius: 50%;
  pointer-events: none;
  animation: btn-peri-pulse 2.4s ease-in-out infinite;
}
.btn-peri-cross {
  position: absolute; inset: 12px;
  pointer-events: none;
}
.btn-peri-cross::before, .btn-peri-cross::after {
  content: '';
  position: absolute;
  background: rgba(0,212,255,0.5);
}
.btn-peri-cross::before {
  top: 50%; left: 0; right: 0; height: 1px;
  transform: translateY(-50%);
}
.btn-peri-cross::after {
  left: 50%; top: 0; bottom: 0; width: 1px;
  transform: translateX(-50%);
}
.btn-peri-text {
  position: relative; z-index: 1;
  background: rgba(0,212,255,0.85);
  padding: 4px 8px;
  border-radius: 2px;
  color: #0a1a2a;
  text-shadow: 0 0 4px rgba(0,212,255,0.4);
}
@keyframes btn-peri-pulse {
  0%, 100% { transform: scale(1);    opacity: 0.7; }
  50%      { transform: scale(1.05); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .btn-peri-rim { animation: none; }
}
.btn-peri:hover {
  box-shadow:
    inset 0 0 0 8px #b87333,
    inset 0 0 0 10px #6a3f15,
    0 0 36px rgba(0,212,255,0.55),
    0 6px 14px rgba(0,0,0,0.4);
}
```

---
## 27 CSS Calendar Designs

URL: https://codefronts.com/components/css-calendar-designs/
Description: 27 hand-coded CSS calendar designs covering every search intent for 'css calendar' — pure-CSS calendar (no JavaScript), CSS Grid layouts, glassmorphism widgets, brutalist designs, dark mode UIs, neumorphic cards, horizontal timelines, sidebar widgets, booking date-range pickers, CSS Grid advent calendars, Fluent / Material Design, circular / radial layouts, retro neon cyberpunk, 3D flip cards, isometric dashboards, split-screen heroes, liquid micro-interactions, bento grid booking, vintage paper tear-offs, vertical timelines, kinetic typography, and slanted diagonal grids. 1 truly pure-CSS, 26 with small vanilla JS snippets for event handling. Scoped class names that never collide, prefers-reduced-motion respected, MIT-licensed.
Demo count: 27

### 01. Glassmorphism CSS Calendar Widget

**Type:** CSS + JS
**Description:** A frosted-glass calendar on an animated indigo aurora gradient with two drifting light orbs. Heavy backdrop-filter blur, a shimmering gradient month title, a dual-ring pulse on today, plus a glass side panel with a floating date tile, live event strip and emoji mood tracker.

**HTML:**
```html
<div class="cal-01-scene">

  <!-- Main Calendar -->
  <div class="cal-01-card">
    <div class="cal-01-header">
      <div class="cal-01-month-display">
        <div class="cal-01-month-name">June</div>
        <div class="cal-01-year">2026</div>
      </div>
      <div class="cal-01-nav">
        <div class="cal-01-nav-btn">‹</div>
        <div class="cal-01-nav-btn">›</div>
      </div>
    </div>

    <div class="cal-01-days-header">
      <div class="cal-01-day-label">Su</div>
      <div class="cal-01-day-label">Mo</div>
      <div class="cal-01-day-label">Tu</div>
      <div class="cal-01-day-label">We</div>
      <div class="cal-01-day-label">Th</div>
      <div class="cal-01-day-label">Fr</div>
      <div class="cal-01-day-label">Sa</div>
    </div>

    <div class="cal-01-grid" id="cal-01-calGrid">
      <!-- Week 1 (May overflow) -->
      <div class="cal-01-cell cal-01-other-month cal-01-weekend">25</div>
      <div class="cal-01-cell cal-01-other-month">26</div>
      <div class="cal-01-cell cal-01-other-month">27</div>
      <div class="cal-01-cell cal-01-other-month">28</div>
      <div class="cal-01-cell cal-01-other-month">29</div>
      <div class="cal-01-cell cal-01-other-month">30</div>
      <div class="cal-01-cell cal-01-other-month cal-01-weekend">31</div>
      <!-- Week 2 -->
      <div class="cal-01-cell cal-01-weekend">1</div>
      <div class="cal-01-cell">2<div class="cal-01-dot-row"><span class="cal-01-dot cal-01-dot--purple"></span></div></div>
      <div class="cal-01-cell">3</div>
      <div class="cal-01-cell">4<div class="cal-01-dot-row"><span class="cal-01-dot cal-01-dot--pink"></span><span class="cal-01-dot cal-01-dot--green"></span></div></div>
      <div class="cal-01-cell">5</div>
      <div class="cal-01-cell">6</div>
      <div class="cal-01-cell cal-01-weekend">7<div class="cal-01-dot-row"><span class="cal-01-dot cal-01-dot--purple"></span></div></div>
      <!-- Week 3 -->
      <div class="cal-01-cell cal-01-today cal-01-selected cal-01-weekend">8</div>
      <div class="cal-01-cell">9</div>
      <div class="cal-01-cell">10</div>
      <div class="cal-01-cell">11<div class="cal-01-dot-row"><span class="cal-01-dot cal-01-dot--green"></span></div></div>
      <div class="cal-01-cell">12</div>
      <div class="cal-01-cell">13<div class="cal-01-dot-row"><span class="cal-01-dot cal-01-dot--pink"></span></div></div>
      <div class="cal-01-cell cal-01-weekend">14</div>
      <!-- Week 4 -->
      <div class="cal-01-cell cal-01-weekend">15</div>
      <div class="cal-01-cell">16</div>
      <div class="cal-01-cell">17<div class="cal-01-dot-row"><span class="cal-01-dot cal-01-dot--purple"></span><span class="cal-01-dot cal-01-dot--purple"></span></div></div>
      <div class="cal-01-cell">18</div>
      <div class="cal-01-cell">19</div>
      <div class="cal-01-cell">20<div class="cal-01-dot-row"><span class="cal-01-dot cal-01-dot--pink"></span></div></div>
      <div class="cal-01-cell cal-01-weekend">21</div>
      <!-- Week 5 -->
      <div class="cal-01-cell cal-01-weekend">22</div>
      <div class="cal-01-cell">23<div class="cal-01-dot-row"><span class="cal-01-dot cal-01-dot--green"></span></div></div>
      <div class="cal-01-cell">24</div>
      <div class="cal-01-cell">25<div class="cal-01-dot-row"><span class="cal-01-dot cal-01-dot--purple"></span><span class="cal-01-dot cal-01-dot--pink"></span></div></div>
      <div class="cal-01-cell">26</div>
      <div class="cal-01-cell">27</div>
      <div class="cal-01-cell cal-01-weekend">28</div>
      <!-- Week 6 -->
      <div class="cal-01-cell cal-01-weekend">29</div>
      <div class="cal-01-cell">30</div>
      <div class="cal-01-cell cal-01-other-month">1</div>
      <div class="cal-01-cell cal-01-other-month">2</div>
      <div class="cal-01-cell cal-01-other-month">3</div>
      <div class="cal-01-cell cal-01-other-month">4</div>
      <div class="cal-01-cell cal-01-other-month cal-01-weekend">5</div>
    </div>
  </div>

  <!-- Side Panel -->
  <div class="cal-01-side">

    <div class="cal-01-mini-card cal-01-today-card">
      <div class="cal-01-today-label">Today</div>
      <div class="cal-01-today-date">8</div>
      <div class="cal-01-today-info">Sunday, June 2026</div>
    </div>

    <div class="cal-01-mini-card">
      <div class="cal-01-events-title">Upcoming</div>

      <div class="cal-01-event-item">
        <div class="cal-01-event-stripe" style="background: var(--accent);"></div>
        <div class="cal-01-event-body">
          <div class="cal-01-event-name">Design Review</div>
          <div class="cal-01-event-time">Mon, Jun 9 · 10:00 AM</div>
        </div>
      </div>

      <div class="cal-01-event-item">
        <div class="cal-01-event-stripe" style="background: var(--accent2);"></div>
        <div class="cal-01-event-body">
          <div class="cal-01-event-name">Team Sprint Planning</div>
          <div class="cal-01-event-time">Tue, Jun 10 · 2:00 PM</div>
        </div>
      </div>

      <div class="cal-01-event-item">
        <div class="cal-01-event-stripe" style="background: var(--accent3);"></div>
        <div class="cal-01-event-body">
          <div class="cal-01-event-name">Product Launch</div>
          <div class="cal-01-event-time">Wed, Jun 11 · 9:00 AM</div>
        </div>
      </div>

      <div class="cal-01-event-item">
        <div class="cal-01-event-stripe" style="background: var(--accent);"></div>
        <div class="cal-01-event-body">
          <div class="cal-01-event-name">Quarterly Sync</div>
          <div class="cal-01-event-time">Fri, Jun 13 · 3:30 PM</div>
        </div>
      </div>
    </div>

    <div class="cal-01-mini-card">
      <div class="cal-01-mood-title">Today's Mood</div>
      <div class="cal-01-mood-row">
        <span class="cal-01-mood-btn" title="Great">😄</span>
        <span class="cal-01-mood-btn cal-01-active" title="Good">🙂</span>
        <span class="cal-01-mood-btn" title="Meh">😐</span>
        <span class="cal-01-mood-btn" title="Off">😔</span>
        <span class="cal-01-mood-btn" title="Rough">😩</span>
      </div>
    </div>

  </div>
</div>
```

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

:root {
  --bg1: #0f0c29;
  --bg2: #302b63;
  --bg3: #24243e;
  --glass: rgba(255,255,255,0.07);
  --glass-border: rgba(255,255,255,0.15);
  --glass-strong: rgba(255,255,255,0.13);
  --accent: #a78bfa;
  --accent2: #f472b6;
  --accent3: #34d399;
  --text: #f1f5f9;
  --muted: rgba(255,255,255,0.45);
  --today-glow: rgba(167,139,250,0.5);
}

body {
  font-family: 'Outfit', sans-serif;
  background: linear-gradient(135deg, var(--bg1) 0%, var(--bg2) 50%, var(--bg3) 100%);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  overflow: hidden;
  position: relative;
}

/* Animated background orbs */
body::before {
  content: '';
  position: fixed;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(167,139,250,0.25) 0%, transparent 70%);
  top: -100px; left: -100px;
  border-radius: 50%;
  animation: cal01-drift 12s ease-in-out infinite alternate;
}
body::after {
  content: '';
  position: fixed;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(244,114,182,0.2) 0%, transparent 70%);
  bottom: -80px; right: -80px;
  border-radius: 50%;
  animation: cal01-drift 9s ease-in-out infinite alternate-reverse;
}

@keyframes cal01-drift {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(40px, 30px) scale(1.15); }
}
@keyframes cal01-pulse {
  0%, 100% { box-shadow: 0 0 20px var(--today-glow), 0 0 40px rgba(167,139,250,0.3); }
  50% { box-shadow: 0 0 30px var(--today-glow), 0 0 60px rgba(167,139,250,0.5); }
}
@keyframes cal01-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@keyframes cal01-shimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}
@keyframes cal01-fadein {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

.cal-01-scene {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 20px;
  max-width: 860px;
  width: 100%;
  position: relative;
  z-index: 1;
  animation: cal01-fadein 0.8s ease both;
}

/* ── Main Calendar Card ── */
.cal-01-card {
  background: var(--glass);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid var(--glass-border);
  border-radius: 28px;
  padding: 32px;
  box-shadow: 0 32px 64px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.12);
}

.cal-01-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 32px;
}

.cal-01-month-display {
  display: flex;
  flex-direction: column;
}

.cal-01-month-name {
  font-family: 'DM Serif Display', serif;
  font-size: 36px;
  font-style: italic;
  background: linear-gradient(135deg, #fff 0%, var(--accent) 60%, var(--accent2) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: cal01-shimmer 4s linear infinite;
  line-height: 1;
}

.cal-01-year {
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-top: 4px;
}

.cal-01-nav {
  display: flex;
  gap: 8px;
}

.cal-01-nav-btn {
  width: 42px; height: 42px;
  background: var(--glass-strong);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--text);
  font-size: 18px;
  transition: all 0.2s;
  user-select: none;
}
.cal-01-nav-btn:hover {
  background: rgba(167,139,250,0.25);
  border-color: var(--accent);
  transform: scale(1.08);
}

/* Day labels */
.cal-01-days-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: 10px;
}
.cal-01-day-label {
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 8px 0;
}

/* Grid */
.cal-01-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.cal-01-cell {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  position: relative;
  transition: all 0.2s;
  padding-bottom: 6px;
}

.cal-01-cell:hover {
  background: var(--glass-strong);
}

.cal-01-cell.cal-01-other-month {
  color: rgba(255,255,255,0.2);
}

.cal-01-cell.cal-01-today {
  background: linear-gradient(135deg, rgba(167,139,250,0.3), rgba(244,114,182,0.2));
  border: 1px solid rgba(167,139,250,0.5);
  animation: cal01-pulse 2.5s ease-in-out infinite;
  font-weight: 700;
}

.cal-01-cell.cal-01-selected {
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #fff;
  font-weight: 700;
  box-shadow: 0 6px 24px rgba(167,139,250,0.45);
  transform: scale(1.1);
  z-index: 2;
}

/* Event dots */
.cal-01-dot-row {
  display: flex;
  gap: 3px;
  position: absolute;
  bottom: 4px;
}
.cal-01-dot {
  width: 4px; height: 4px;
  border-radius: 50%;
}
.cal-01-dot--purple { background: var(--accent); }
.cal-01-dot--pink   { background: var(--accent2); }
.cal-01-dot--green  { background: var(--accent3); }

/* Weekend tint */
.cal-01-cell.cal-01-weekend { color: rgba(244,114,182,0.8); }
.cal-01-cell.cal-01-weekend.cal-01-today { color: #fff; }

/* ── Side Panel ── */
.cal-01-side {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cal-01-mini-card {
  background: var(--glass);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--glass-border);
  border-radius: 22px;
  padding: 22px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.1);
}

/* Today's highlight card */
.cal-01-today-card {
  background: linear-gradient(135deg, rgba(167,139,250,0.2), rgba(244,114,182,0.15));
  border-color: rgba(167,139,250,0.35);
  animation: cal01-float 4s ease-in-out infinite;
}

.cal-01-today-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}

.cal-01-today-date {
  font-family: 'DM Serif Display', serif;
  font-size: 52px;
  line-height: 1;
  color: #fff;
  font-style: italic;
}

.cal-01-today-info {
  font-size: 13px;
  color: var(--muted);
  margin-top: 6px;
}

/* Upcoming events */
.cal-01-events-title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
}

.cal-01-event-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.cal-01-event-item:last-child { border-bottom: none; }

.cal-01-event-stripe {
  width: 3px;
  height: 36px;
  border-radius: 3px;
  flex-shrink: 0;
  margin-top: 2px;
}

.cal-01-event-body { flex: 1; min-width: 0; }

.cal-01-event-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cal-01-event-time {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}

/* Mood tracker mini */
.cal-01-mood-title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
}
.cal-01-mood-row {
  display: flex;
  justify-content: space-between;
}
.cal-01-mood-btn {
  font-size: 24px;
  cursor: pointer;
  transition: transform 0.2s;
  filter: grayscale(0.4);
  opacity: 0.7;
}
.cal-01-mood-btn:hover,
.cal-01-mood-btn.cal-01-active {
  transform: scale(1.25);
  filter: grayscale(0);
  opacity: 1;
}

@media (max-width: 680px) {
  .cal-01-scene { grid-template-columns: 1fr; }
  .cal-01-side { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
```

**JS:**
```js
// Cell click selection
document.querySelectorAll('.cal-01-cell:not(.cal-01-other-month)').forEach(cell => {
  cell.addEventListener('click', function() {
    document.querySelectorAll('.cal-01-cell').forEach(c => c.classList.remove('cal-01-selected'));
    this.classList.add('cal-01-selected');
  });
});
// Mood selection
document.querySelectorAll('.cal-01-mood-btn').forEach(btn => {
  btn.addEventListener('click', function() {
    document.querySelectorAll('.cal-01-mood-btn').forEach(b => b.classList.remove('cal-01-active'));
    this.classList.add('cal-01-active');
  });
});
```

### 02. Brutalist CSS Calendar Design

**Type:** CSS + JS
**Description:** Raw newspaper-meets-Bauhaus brutalism on graph-paper. Full-width black header with a flickering Bebas Neue month, hard borders and solid box-shadow offsets, top-edge event bars, and an ink-black sidebar with stamp decoration, event list and a 2x2 stats grid.

**HTML:**
```html
<div class="cal-02-wrapper">

  <!-- Banner -->
  <div class="cal-02-banner">
    <div class="cal-02-banner-month">June</div>
    <div class="cal-02-banner-nav">
      <div class="cal-02-banner-navbtn">←</div>
      <div class="cal-02-banner-navbtn">→</div>
    </div>
    <div class="cal-02-banner-right">
      <div class="cal-02-banner-year">2026</div>
      <div class="cal-02-banner-sub">Q2 · Week 23</div>
    </div>
  </div>

  <!-- Main Grid -->
  <div class="cal-02-main">
    <div class="cal-02-day-labels">
      <div class="cal-02-dl cal-02-weekend">SUN</div>
      <div class="cal-02-dl">MON</div>
      <div class="cal-02-dl">TUE</div>
      <div class="cal-02-dl">WED</div>
      <div class="cal-02-dl">THU</div>
      <div class="cal-02-dl">FRI</div>
      <div class="cal-02-dl cal-02-weekend">SAT</div>
    </div>
    <div class="cal-02-grid" id="cal-02-brutCal">
      <!-- Row 1 (May) -->
      <div class="cal-02-cell cal-02-other-month"><div class="cal-02-num">25</div></div>
      <div class="cal-02-cell cal-02-other-month"><div class="cal-02-num">26</div></div>
      <div class="cal-02-cell cal-02-other-month"><div class="cal-02-num">27</div></div>
      <div class="cal-02-cell cal-02-other-month"><div class="cal-02-num">28</div></div>
      <div class="cal-02-cell cal-02-other-month"><div class="cal-02-num">29</div></div>
      <div class="cal-02-cell cal-02-other-month"><div class="cal-02-num">30</div></div>
      <div class="cal-02-cell cal-02-other-month"><div class="cal-02-num">31</div></div>
      <!-- Row 2 -->
      <div class="cal-02-cell"><div class="cal-02-num">1</div></div>
      <div class="cal-02-cell cal-02-has-event cal-02-ev-blue"><div class="cal-02-num">2</div><span class="cal-02-event-tag">Workshop</span></div>
      <div class="cal-02-cell"><div class="cal-02-num">3</div></div>
      <div class="cal-02-cell cal-02-has-event cal-02-ev-red"><div class="cal-02-num">4</div><span class="cal-02-event-tag cal-02-red">Deadline</span></div>
      <div class="cal-02-cell"><div class="cal-02-num">5</div></div>
      <div class="cal-02-cell"><div class="cal-02-num">6</div></div>
      <div class="cal-02-cell"><div class="cal-02-num">7</div></div>
      <!-- Row 3 — cal-02-today -->
      <div class="cal-02-cell cal-02-today cal-02-selected"><div class="cal-02-num">8</div></div>
      <div class="cal-02-cell"><div class="cal-02-num">9</div></div>
      <div class="cal-02-cell cal-02-has-event cal-02-ev-blue"><div class="cal-02-num">10</div><span class="cal-02-event-tag">Sprint</span></div>
      <div class="cal-02-cell"><div class="cal-02-num">11</div></div>
      <div class="cal-02-cell cal-02-has-event cal-02-ev-red"><div class="cal-02-num">12</div><span class="cal-02-event-tag cal-02-red">Review</span></div>
      <div class="cal-02-cell"><div class="cal-02-num">13</div></div>
      <div class="cal-02-cell"><div class="cal-02-num">14</div></div>
      <!-- Row 4 -->
      <div class="cal-02-cell"><div class="cal-02-num">15</div></div>
      <div class="cal-02-cell"><div class="cal-02-num">16</div></div>
      <div class="cal-02-cell cal-02-has-event cal-02-ev-yellow"><div class="cal-02-num">17</div><span class="cal-02-event-tag">Demo Day</span></div>
      <div class="cal-02-cell"><div class="cal-02-num">18</div></div>
      <div class="cal-02-cell"><div class="cal-02-num">19</div></div>
      <div class="cal-02-cell cal-02-has-event cal-02-ev-blue"><div class="cal-02-num">20</div><span class="cal-02-event-tag">Launch</span></div>
      <div class="cal-02-cell"><div class="cal-02-num">21</div></div>
      <!-- Row 5 -->
      <div class="cal-02-cell"><div class="cal-02-num">22</div></div>
      <div class="cal-02-cell"><div class="cal-02-num">23</div></div>
      <div class="cal-02-cell"><div class="cal-02-num">24</div></div>
      <div class="cal-02-cell cal-02-has-event cal-02-ev-red"><div class="cal-02-num">25</div><span class="cal-02-event-tag cal-02-red">Board Mtg</span></div>
      <div class="cal-02-cell"><div class="cal-02-num">26</div></div>
      <div class="cal-02-cell"><div class="cal-02-num">27</div></div>
      <div class="cal-02-cell"><div class="cal-02-num">28</div></div>
      <!-- Row 6 -->
      <div class="cal-02-cell"><div class="cal-02-num">29</div></div>
      <div class="cal-02-cell"><div class="cal-02-num">30</div></div>
      <div class="cal-02-cell cal-02-other-month"><div class="cal-02-num">1</div></div>
      <div class="cal-02-cell cal-02-other-month"><div class="cal-02-num">2</div></div>
      <div class="cal-02-cell cal-02-other-month"><div class="cal-02-num">3</div></div>
      <div class="cal-02-cell cal-02-other-month"><div class="cal-02-num">4</div></div>
      <div class="cal-02-cell cal-02-other-month"><div class="cal-02-num">5</div></div>
    </div>
  </div>

  <!-- Sidebar -->
  <div class="cal-02-sidebar">
    <div class="cal-02-sb-section">
      <div class="cal-02-sb-label">Today</div>
      <div class="cal-02-sb-big">08<span class="cal-02-cursor"></span></div>
      <div class="cal-02-sb-biginfo">Sunday / June / 2026</div>
      <div class="cal-02-stamp">Day 159</div>
    </div>

    <div class="cal-02-sb-section">
      <div class="cal-02-sb-label">This Week</div>
      <div class="cal-02-evlist-item">
        <div class="cal-02-ev-bar cal-02-blue"></div>
        <div class="cal-02-ev-info">
          <div class="cal-02-ev-name">Sprint Planning</div>
          <div class="cal-02-ev-time">MON 10 · 10:00</div>
        </div>
      </div>
      <div class="cal-02-evlist-item">
        <div class="cal-02-ev-bar cal-02-red"></div>
        <div class="cal-02-ev-info">
          <div class="cal-02-ev-name">Design Review</div>
          <div class="cal-02-ev-time">WED 12 · 14:00</div>
        </div>
      </div>
      <div class="cal-02-evlist-item">
        <div class="cal-02-ev-bar cal-02-yellow"></div>
        <div class="cal-02-ev-info">
          <div class="cal-02-ev-name">Client Presentation</div>
          <div class="cal-02-ev-time">FRI 13 · 16:30</div>
        </div>
      </div>
    </div>

    <div class="cal-02-sb-section">
      <div class="cal-02-sb-label">Month Stats</div>
      <div class="cal-02-stats">
        <div class="cal-02-stat">
          <div class="cal-02-stat-val">12</div>
          <div class="cal-02-stat-lbl">Events</div>
        </div>
        <div class="cal-02-stat">
          <div class="cal-02-stat-val">4</div>
          <div class="cal-02-stat-lbl">Deadlines</div>
        </div>
        <div class="cal-02-stat">
          <div class="cal-02-stat-val">23</div>
          <div class="cal-02-stat-lbl">Work days</div>
        </div>
        <div class="cal-02-stat">
          <div class="cal-02-stat-val">7</div>
          <div class="cal-02-stat-lbl">Remaining</div>
        </div>
      </div>
    </div>
  </div>

</div>
```

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

:root {
  --bg: #f5f0e8;
  --ink: #0d0d0d;
  --red: #e63e2f;
  --yellow: #f5c800;
  --blue: #1a4fff;
  --white: #fafaf7;
  --border: 3px solid var(--ink);
  --shadow: 5px 5px 0 var(--ink);
  --shadow-lg: 8px 8px 0 var(--ink);
}

body {
  font-family: 'IBM Plex Mono', monospace;
  background-color: var(--bg);
  background-image:
    repeating-linear-gradient(0deg, transparent, transparent 39px, rgba(0,0,0,0.06) 39px, rgba(0,0,0,0.06) 40px),
    repeating-linear-gradient(90deg, transparent, transparent 39px, rgba(0,0,0,0.06) 39px, rgba(0,0,0,0.06) 40px);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  color: var(--ink);
}

@keyframes cal02-stamp {
  from { transform: scale(1.4) rotate(-3deg); opacity: 0; }
  to { transform: scale(1) rotate(0deg); opacity: 1; }
}
@keyframes cal02-flicker {
  0%, 100% { opacity: 1; }
  92% { opacity: 1; }
  93% { opacity: 0.4; }
  94% { opacity: 1; }
}
@keyframes cal02-slide-in {
  from { transform: translateX(-30px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
@keyframes cal02-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.cal-02-wrapper {
  max-width: 880px;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: 0;
  border: var(--border);
  box-shadow: var(--shadow-lg);
  animation: cal02-stamp 0.5s cubic-bezier(0.34,1.56,0.64,1) both;
}

/* ── Header Banner ── */
.cal-02-banner {
  background: var(--ink);
  color: var(--yellow);
  padding: 20px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: var(--border);
  grid-column: 1 / -1;
}

.cal-02-banner-month {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 72px;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--yellow);
  animation: cal02-flicker 5s infinite;
}

.cal-02-banner-right {
  text-align: right;
}

.cal-02-banner-year {
  font-family: 'Anton', sans-serif;
  font-size: 42px;
  color: var(--white);
  line-height: 1;
}

.cal-02-banner-sub {
  font-size: 11px;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-top: 4px;
}

.cal-02-banner-nav {
  display: flex;
  gap: 0;
  border: 2px solid var(--yellow);
  align-self: center;
}

.cal-02-banner-navbtn {
  padding: 8px 16px;
  background: transparent;
  border: none;
  color: var(--yellow);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 18px;
  cursor: pointer;
  transition: background 0.1s;
  user-select: none;
}
.cal-02-banner-navbtn:first-child { border-right: 2px solid var(--yellow); }
.cal-02-banner-navbtn:hover { background: var(--yellow); color: var(--ink); }

/* ── Main Calendar Body ── */
.cal-02-main {
  background: var(--white);
  border-right: var(--border);
}

.cal-02-day-labels {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-bottom: var(--border);
}

.cal-02-dl {
  padding: 12px 0;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  border-right: 2px solid var(--ink);
}
.cal-02-dl:last-child { border-right: none; }
.cal-02-dl.cal-02-weekend { background: var(--yellow); }

.cal-02-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.cal-02-cell {
  min-height: 70px;
  border-right: 2px solid rgba(0,0,0,0.12);
  border-bottom: 2px solid rgba(0,0,0,0.12);
  padding: 8px;
  cursor: pointer;
  position: relative;
  transition: background 0.1s;
}
.cal-02-cell:nth-child(7n) { border-right: none; }
.cal-02-cell:nth-last-child(-n+7) { border-bottom: none; }

.cal-02-cell:hover { background: rgba(245,200,0,0.12); }
.cal-02-cell.cal-02-other-month { background: rgba(0,0,0,0.03); }

.cal-02-cell.cal-02-today {
  background: var(--yellow);
}
.cal-02-cell.cal-02-today .cal-02-num { color: var(--ink); }
.cal-02-cell.cal-02-today::after {
  content: '◀ TODAY';
  position: absolute;
  right: 6px;
  bottom: 6px;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--red);
}

.cal-02-cell.cal-02-selected {
  background: var(--red);
  box-shadow: inset 4px 4px 0 rgba(0,0,0,0.25);
}
.cal-02-cell.cal-02-selected .cal-02-num { color: #fff; }

.cal-02-cell.cal-02-has-event::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
}
.cal-02-cell.cal-02-ev-red::before { background: var(--red); }
.cal-02-cell.cal-02-ev-blue::before { background: var(--blue); }
.cal-02-cell.cal-02-ev-yellow::before { background: var(--yellow); border-bottom: 2px solid var(--ink); }

.cal-02-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 28px;
  line-height: 1;
  color: var(--ink);
}
.cal-02-cell.cal-02-other-month .cal-02-num { color: rgba(0,0,0,0.2); }

.cal-02-event-tag {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--white);
  background: var(--blue);
  padding: 2px 5px;
  display: inline-block;
  margin-top: 4px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cal-02-event-tag.cal-02-red { background: var(--red); }

/* ── Sidebar ── */
.cal-02-sidebar {
  background: var(--ink);
  color: var(--white);
  display: flex;
  flex-direction: column;
}

.cal-02-sb-section {
  padding: 20px;
  border-bottom: 2px solid rgba(255,255,255,0.1);
}
.cal-02-sb-section:last-child { border-bottom: none; flex: 1; }

.cal-02-sb-label {
  font-size: 9px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  margin-bottom: 12px;
}

.cal-02-sb-big {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 64px;
  color: var(--yellow);
  line-height: 1;
  animation: cal02-flicker 7s infinite 1s;
}

.cal-02-sb-biginfo {
  font-size: 11px;
  color: rgba(255,255,255,0.5);
  margin-top: 4px;
  letter-spacing: 0.1em;
}

/* Event list */
.cal-02-evlist-item {
  display: flex;
  align-items: stretch;
  gap: 10px;
  margin-bottom: 12px;
  animation: cal02-slide-in 0.4s ease both;
}
.cal-02-evlist-item:nth-child(2) { animation-delay: 0.08s; }
.cal-02-evlist-item:nth-child(3) { animation-delay: 0.16s; }

.cal-02-ev-bar {
  width: 4px;
  flex-shrink: 0;
}
.cal-02-ev-bar.cal-02-red { background: var(--red); }
.cal-02-ev-bar.cal-02-yellow { background: var(--yellow); }
.cal-02-ev-bar.cal-02-blue { background: var(--blue); }

.cal-02-ev-info {}
.cal-02-ev-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--white);
  letter-spacing: 0.02em;
}
.cal-02-ev-time {
  font-size: 10px;
  color: rgba(255,255,255,0.4);
  margin-top: 2px;
}

/* Cursor blink in terminal style */
.cal-02-cursor {
  display: inline-block;
  width: 10px; height: 14px;
  background: var(--yellow);
  vertical-align: middle;
  animation: cal02-blink 1s step-end infinite;
  margin-left: 4px;
}

/* Stats row */
.cal-02-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: rgba(255,255,255,0.1);
}
.cal-02-stat {
  padding: 12px;
  background: var(--ink);
}
.cal-02-stat-val {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 30px;
  color: var(--yellow);
}
.cal-02-stat-lbl {
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  margin-top: 2px;
}

/* Stamp decoration */
.cal-02-stamp {
  border: 3px solid var(--red);
  color: var(--red);
  font-family: 'Bebas Neue', sans-serif;
  font-size: 16px;
  letter-spacing: 0.2em;
  padding: 6px 10px;
  display: inline-block;
  transform: rotate(-8deg);
  opacity: 0.7;
  margin-top: 12px;
  align-self: flex-start;
}

@media (max-width: 680px) {
  .cal-02-wrapper { grid-template-columns: 1fr; }
  .cal-02-sidebar { display: none; }
  .cal-02-banner-month { font-size: 48px; }
  .cal-02-cell { min-height: 50px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; }
}
```

**JS:**
```js
document.querySelectorAll('#cal-02-brutCal .cal-02-cell:not(.cal-02-other-month)').forEach(cell => {
  cell.addEventListener('click', function() {
    document.querySelectorAll('#cal-02-brutCal .cal-02-cell').forEach(c => c.classList.remove('cal-02-selected'));
    this.classList.add('cal-02-selected');
  });
});
```

### 03. Dark Mode CSS Calendar UI

**Type:** CSS + JS
**Description:** A premium dark productivity UI with a browser-style chrome bar, CRT scanline overlay and cyan glow accents. Date cells carry inline color-coded event pills, today pings with a ripple ring, and the right panel holds a schedule, activity heatmap and animated goal bars.

**HTML:**
```html
<div class="cal-03-scanlines"></div>

<div class="cal-03-shell">

  <!-- Chrome bar -->
  <div class="cal-03-chrome">
    <div class="cal-03-chrome-dots">
      <div class="cal-03-chrome-dot"></div>
      <div class="cal-03-chrome-dot"></div>
      <div class="cal-03-chrome-dot"></div>
    </div>
    <div class="cal-03-chrome-tabs">
      <div class="cal-03-chrome-tab cal-03-active">Month</div>
      <div class="cal-03-chrome-tab">Week</div>
      <div class="cal-03-chrome-tab">Agenda</div>
    </div>
    <div class="cal-03-chrome-right">
      <div class="cal-03-chrome-status">
        <div class="cal-03-status-dot"></div>
        <span>Synced</span>
      </div>
      <span>SUN 08 JUN</span>
    </div>
  </div>

  <!-- Body -->
  <div class="cal-03-body">

    <!-- Calendar Panel -->
    <div class="cal-03-panel">
      <div class="cal-03-head">
        <div class="cal-03-title-group">
          <div class="cal-03-month-title"><span>June</span> 2026</div>
          <div class="cal-03-month-meta">Week 23 of 52 · Q2</div>
        </div>
        <div class="cal-03-controls">
          <div class="cal-03-ctrl-btn">‹</div>
          <div class="cal-03-ctrl-btn cal-03-ctrl-today">Today</div>
          <div class="cal-03-ctrl-btn">›</div>
        </div>
      </div>

      <div class="cal-03-weekdays">
        <div class="cal-03-wd cal-03-weekend">SUN</div>
        <div class="cal-03-wd">MON</div>
        <div class="cal-03-wd">TUE</div>
        <div class="cal-03-wd">WED</div>
        <div class="cal-03-wd">THU</div>
        <div class="cal-03-wd">FRI</div>
        <div class="cal-03-wd cal-03-weekend">SAT</div>
      </div>

      <div class="cal-03-dates" id="cal-03-darkCal">
        <!-- May overflow -->
        <div class="cal-03-date cal-03-dim cal-03-weekend"><div class="cal-03-date-num">25</div></div>
        <div class="cal-03-date cal-03-dim"><div class="cal-03-date-num">26</div></div>
        <div class="cal-03-date cal-03-dim"><div class="cal-03-date-num">27</div></div>
        <div class="cal-03-date cal-03-dim"><div class="cal-03-date-num">28</div></div>
        <div class="cal-03-date cal-03-dim"><div class="cal-03-date-num">29</div></div>
        <div class="cal-03-date cal-03-dim"><div class="cal-03-date-num">30</div></div>
        <div class="cal-03-date cal-03-dim cal-03-weekend"><div class="cal-03-date-num">31</div></div>
        <!-- June -->
        <div class="cal-03-date cal-03-weekend"><div class="cal-03-date-num">1</div></div>
        <div class="cal-03-date"><div class="cal-03-date-num">2</div><div class="cal-03-date-events"><span class="cal-03-date-event cal-03-cyan">Workshop</span></div></div>
        <div class="cal-03-date"><div class="cal-03-date-num">3</div></div>
        <div class="cal-03-date"><div class="cal-03-date-num">4</div><div class="cal-03-date-events"><span class="cal-03-date-event cal-03-orange">Deadline</span></div></div>
        <div class="cal-03-date"><div class="cal-03-date-num">5</div></div>
        <div class="cal-03-date"><div class="cal-03-date-num">6</div><div class="cal-03-date-events"><span class="cal-03-date-event cal-03-green">Retro</span></div></div>
        <div class="cal-03-date cal-03-weekend"><div class="cal-03-date-num">7</div></div>

        <div class="cal-03-date cal-03-today cal-03-selected cal-03-weekend"><div class="cal-03-date-num">8</div></div>
        <div class="cal-03-date"><div class="cal-03-date-num">9</div><div class="cal-03-date-events"><span class="cal-03-date-event cal-03-cyan">Sprint</span></div></div>
        <div class="cal-03-date"><div class="cal-03-date-num">10</div></div>
        <div class="cal-03-date"><div class="cal-03-date-num">11</div><div class="cal-03-date-events"><span class="cal-03-date-event cal-03-green">Launch</span></div></div>
        <div class="cal-03-date"><div class="cal-03-date-num">12</div></div>
        <div class="cal-03-date"><div class="cal-03-date-num">13</div><div class="cal-03-date-events"><span class="cal-03-date-event cal-03-purple">Review</span></div></div>
        <div class="cal-03-date cal-03-weekend"><div class="cal-03-date-num">14</div></div>

        <div class="cal-03-date cal-03-weekend"><div class="cal-03-date-num">15</div></div>
        <div class="cal-03-date"><div class="cal-03-date-num">16</div></div>
        <div class="cal-03-date"><div class="cal-03-date-num">17</div><div class="cal-03-date-events"><span class="cal-03-date-event cal-03-orange">Demo</span></div></div>
        <div class="cal-03-date"><div class="cal-03-date-num">18</div></div>
        <div class="cal-03-date"><div class="cal-03-date-num">19</div></div>
        <div class="cal-03-date"><div class="cal-03-date-num">20</div><div class="cal-03-date-events"><span class="cal-03-date-event cal-03-cyan">1:1</span></div></div>
        <div class="cal-03-date cal-03-weekend"><div class="cal-03-date-num">21</div></div>

        <div class="cal-03-date cal-03-weekend"><div class="cal-03-date-num">22</div></div>
        <div class="cal-03-date"><div class="cal-03-date-num">23</div></div>
        <div class="cal-03-date"><div class="cal-03-date-num">24</div><div class="cal-03-date-events"><span class="cal-03-date-event cal-03-purple">Board</span></div></div>
        <div class="cal-03-date"><div class="cal-03-date-num">25</div></div>
        <div class="cal-03-date"><div class="cal-03-date-num">26</div></div>
        <div class="cal-03-date"><div class="cal-03-date-num">27</div><div class="cal-03-date-events"><span class="cal-03-date-event cal-03-green">EOQ</span></div></div>
        <div class="cal-03-date cal-03-weekend"><div class="cal-03-date-num">28</div></div>

        <div class="cal-03-date cal-03-weekend"><div class="cal-03-date-num">29</div></div>
        <div class="cal-03-date"><div class="cal-03-date-num">30</div></div>
        <div class="cal-03-date cal-03-dim"><div class="cal-03-date-num">1</div></div>
        <div class="cal-03-date cal-03-dim"><div class="cal-03-date-num">2</div></div>
        <div class="cal-03-date cal-03-dim"><div class="cal-03-date-num">3</div></div>
        <div class="cal-03-date cal-03-dim"><div class="cal-03-date-num">4</div></div>
        <div class="cal-03-date cal-03-dim cal-03-weekend"><div class="cal-03-date-num">5</div></div>
      </div>
    </div>

    <!-- Right Panel -->
    <div class="cal-03-right">

      <div class="cal-03-right-section">
        <div class="cal-03-right-label">Selected</div>
        <div class="cal-03-selected-date" id="cal-03-selDate">08</div>
        <div class="cal-03-selected-info" id="cal-03-selInfo">Sunday, June 2026</div>
      </div>

      <div class="cal-03-right-section">
        <div class="cal-03-right-label">Schedule</div>

        <div class="cal-03-schedule-item">
          <div class="cal-03-sch-dot" style="background:var(--cyan);box-shadow:0 0 8px var(--cyan)"></div>
          <div class="cal-03-sch-time">09:00</div>
          <div class="cal-03-sch-body">
            <div class="cal-03-sch-name">Sprint Planning</div>
            <div class="cal-03-sch-sub">1h · Zoom · 8 people</div>
          </div>
        </div>

        <div class="cal-03-schedule-item">
          <div class="cal-03-sch-dot" style="background:var(--orange);box-shadow:0 0 8px var(--orange)"></div>
          <div class="cal-03-sch-time">14:00</div>
          <div class="cal-03-sch-body">
            <div class="cal-03-sch-name">Design Review</div>
            <div class="cal-03-sch-sub">45m · Figma share</div>
          </div>
        </div>

        <div class="cal-03-schedule-item">
          <div class="cal-03-sch-dot" style="background:var(--green);box-shadow:0 0 8px var(--green)"></div>
          <div class="cal-03-sch-time">16:30</div>
          <div class="cal-03-sch-body">
            <div class="cal-03-sch-name">Client Call</div>
            <div class="cal-03-sch-sub">30m · Recurring</div>
          </div>
        </div>

        <div class="cal-03-schedule-item">
          <div class="cal-03-sch-dot" style="background:var(--purple);box-shadow:0 0 8px var(--purple)"></div>
          <div class="cal-03-sch-time">18:00</div>
          <div class="cal-03-sch-body">
            <div class="cal-03-sch-name">Team Retro</div>
            <div class="cal-03-sch-sub">1h · All hands</div>
          </div>
        </div>
      </div>

      <div class="cal-03-right-section">
        <div class="cal-03-right-label">Activity</div>
        <div class="cal-03-heatmap-grid">
          <div class="cal-03-heat-cell cal-03-h1"></div><div class="cal-03-heat-cell cal-03-h3"></div><div class="cal-03-heat-cell cal-03-h2"></div>
          <div class="cal-03-heat-cell cal-03-h4"></div><div class="cal-03-heat-cell cal-03-h1"></div><div class="cal-03-heat-cell cal-03-h2"></div>
          <div class="cal-03-heat-cell"></div><div class="cal-03-heat-cell cal-03-h3"></div><div class="cal-03-heat-cell cal-03-h2"></div>
          <div class="cal-03-heat-cell cal-03-h1"></div><div class="cal-03-heat-cell cal-03-h4"></div><div class="cal-03-heat-cell cal-03-h2"></div>
          <div class="cal-03-heat-cell cal-03-h2"></div><div class="cal-03-heat-cell"></div><div class="cal-03-heat-cell cal-03-h3"></div>
          <div class="cal-03-heat-cell cal-03-h1"></div><div class="cal-03-heat-cell cal-03-h2"></div><div class="cal-03-heat-cell cal-03-h4"></div>
          <div class="cal-03-heat-cell cal-03-h3"></div><div class="cal-03-heat-cell cal-03-h1"></div><div class="cal-03-heat-cell"></div>
          <div class="cal-03-heat-cell cal-03-h2"></div><div class="cal-03-heat-cell cal-03-h3"></div><div class="cal-03-heat-cell cal-03-h1"></div>
        </div>
      </div>

      <div class="cal-03-right-section">
        <div class="cal-03-right-label">Goals</div>
        <div class="cal-03-progress-item">
          <div class="cal-03-progress-head">
            <span class="cal-03-progress-name">Meetings</span>
            <span class="cal-03-progress-val">8/12</span>
          </div>
          <div class="cal-03-progress-track">
            <div class="cal-03-progress-fill" style="width:66%;background:var(--cyan);animation-delay:0.1s"></div>
          </div>
        </div>
        <div class="cal-03-progress-item">
          <div class="cal-03-progress-head">
            <span class="cal-03-progress-name">Deliverables</span>
            <span class="cal-03-progress-val">4/7</span>
          </div>
          <div class="cal-03-progress-track">
            <div class="cal-03-progress-fill" style="width:57%;background:var(--green);animation-delay:0.2s"></div>
          </div>
        </div>
        <div class="cal-03-progress-item">
          <div class="cal-03-progress-head">
            <span class="cal-03-progress-name">Month</span>
            <span class="cal-03-progress-val">27%</span>
          </div>
          <div class="cal-03-progress-track">
            <div class="cal-03-progress-fill" style="width:27%;background:var(--purple);animation-delay:0.3s"></div>
          </div>
        </div>
      </div>

    </div>
  </div>
</div>
```

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

:root {
  --bg: #0a0a0f;
  --surface: #111118;
  --surface2: #181824;
  --surface3: #1e1e2e;
  --border: rgba(255,255,255,0.07);
  --border2: rgba(255,255,255,0.12);
  --text: #e8e8f0;
  --muted: rgba(232,232,240,0.4);
  --dim: rgba(232,232,240,0.15);
  --cyan: #00d4ff;
  --green: #00ff94;
  --orange: #ff6b35;
  --purple: #b347ff;
  --pink: #ff4da6;
  --glow-cyan: rgba(0,212,255,0.18);
  --glow-green: rgba(0,255,148,0.15);
}

body {
  font-family: 'Syne', sans-serif;
  background: var(--bg);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  overflow: hidden;
}

/* Ambient background glow */
body::before {
  content: '';
  position: fixed;
  width: 600px; height: 600px;
  background: radial-gradient(ellipse at center, rgba(0,212,255,0.05) 0%, transparent 65%);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

@keyframes cal03-glow-pulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}
@keyframes cal03-scan {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(100vh); }
}
@keyframes cal03-enter {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes cal03-bar-fill {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
@keyframes cal03-ping {
  0% { transform: scale(1); opacity: 1; }
  80%, 100% { transform: scale(2); opacity: 0; }
}
@keyframes cal03-slide-up {
  from { transform: translateY(10px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* CRT scanline effect */
.cal-03-scanlines {
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,0.03) 2px,
    rgba(0,0,0,0.03) 4px
  );
  pointer-events: none;
  z-index: 100;
}

.cal-03-shell {
  max-width: 900px;
  width: 100%;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 0;
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: 20px;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(0,212,255,0.08),
    0 40px 80px rgba(0,0,0,0.6),
    0 0 60px rgba(0,212,255,0.06);
  animation: cal03-enter 0.6s cubic-bezier(0.22,1,0.36,1) both;
  position: relative;
  z-index: 1;
}

/* ── Top Chrome Bar ── */
.cal-03-chrome {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 20px;
  background: var(--surface2);
  border-bottom: 1px solid var(--border);
}

.cal-03-chrome-dots {
  display: flex;
  gap: 6px;
}
.cal-03-chrome-dot {
  width: 12px; height: 12px;
  border-radius: 50%;
}
.cal-03-chrome-dot:nth-child(1) { background: #ff5f56; }
.cal-03-chrome-dot:nth-child(2) { background: #febc2e; }
.cal-03-chrome-dot:nth-child(3) { background: #28c840; }

.cal-03-chrome-tabs {
  display: flex;
  gap: 2px;
  flex: 1;
}

.cal-03-chrome-tab {
  padding: 6px 16px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 6px;
  cursor: pointer;
  color: var(--muted);
  transition: all 0.2s;
}
.cal-03-chrome-tab:hover { color: var(--text); background: var(--border); }
.cal-03-chrome-tab.cal-03-active {
  color: var(--cyan);
  background: rgba(0,212,255,0.08);
  border-bottom: 2px solid var(--cyan);
  border-radius: 6px 6px 0 0;
}

.cal-03-chrome-right {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--muted);
  display: flex;
  gap: 14px;
  align-items: center;
}

.cal-03-chrome-status {
  display: flex;
  align-items: center;
  gap: 5px;
}
.cal-03-status-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 8px var(--green);
  animation: cal03-glow-pulse 2s ease-in-out infinite;
}

/* ── Body Layout ── */
.cal-03-body {
  display: grid;
  grid-template-columns: 1fr 280px;
}

/* ── Calendar Panel ── */
.cal-03-panel {
  padding: 28px;
  border-right: 1px solid var(--border);
}

.cal-03-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
}

.cal-03-title-group {
  display: flex;
  flex-direction: column;
}

.cal-03-month-title {
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1;
}

.cal-03-month-title span {
  color: var(--cyan);
  text-shadow: 0 0 20px rgba(0,212,255,0.5);
}

.cal-03-month-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.15em;
  margin-top: 5px;
}

.cal-03-controls {
  display: flex;
  gap: 6px;
  align-items: center;
}

.cal-03-ctrl-btn {
  width: 36px; height: 36px;
  border-radius: 8px;
  background: var(--surface3);
  border: 1px solid var(--border2);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--text);
  font-size: 16px;
  transition: all 0.2s;
  user-select: none;
}
.cal-03-ctrl-btn:hover {
  border-color: var(--cyan);
  color: var(--cyan);
  background: rgba(0,212,255,0.06);
}

.cal-03-ctrl-today {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0 12px;
  width: auto;
  color: var(--cyan);
  border-color: rgba(0,212,255,0.3);
}

/* Weekday headers */
.cal-03-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: 8px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.cal-03-wd {
  text-align: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dim);
  padding: 6px 0;
}
.cal-03-wd.cal-03-weekend { color: rgba(179,71,255,0.6); }

/* Date cells */
.cal-03-dates {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}

.cal-03-date {
  min-height: 64px;
  border-radius: 10px;
  padding: 9px;
  cursor: pointer;
  position: relative;
  transition: all 0.15s;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cal-03-date:hover { background: var(--surface3); }
.cal-03-date.cal-03-dim { opacity: 0.25; pointer-events: none; }

.cal-03-date.cal-03-today {
  background: linear-gradient(135deg, rgba(0,212,255,0.12), rgba(179,71,255,0.08));
  border: 1px solid rgba(0,212,255,0.3);
}
.cal-03-date.cal-03-today::after {
  content: '';
  position: absolute;
  top: 8px; right: 8px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 0 rgba(0,212,255,0.4);
  animation: cal03-ping 2s cubic-bezier(0,0,0.2,1) infinite;
}

.cal-03-date.cal-03-selected {
  background: rgba(0,212,255,0.12);
  border: 1px solid var(--cyan);
  box-shadow: 0 0 20px rgba(0,212,255,0.15);
}

.cal-03-date-num {
  font-weight: 700;
  font-size: 15px;
  color: var(--text);
  line-height: 1;
}
.cal-03-date.cal-03-today .cal-03-date-num { color: var(--cyan); }
.cal-03-date.cal-03-weekend .cal-03-date-num { color: rgba(179,71,255,0.8); }

/* Tiny event pills in cell */
.cal-03-date-events {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cal-03-date-event {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px;
  font-weight: 500;
  padding: 2px 5px;
  border-radius: 3px;
  letter-spacing: 0.03em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cal-03-date-event.cal-03-cyan  { background: rgba(0,212,255,0.15); color: var(--cyan); }
.cal-03-date-event.cal-03-green { background: rgba(0,255,148,0.1); color: var(--green); }
.cal-03-date-event.cal-03-orange { background: rgba(255,107,53,0.15); color: var(--orange); }
.cal-03-date-event.cal-03-purple { background: rgba(179,71,255,0.15); color: var(--purple); }

/* ── Right Panel ── */
.cal-03-right {
  display: flex;
  flex-direction: column;
  background: var(--surface2);
}

.cal-03-right-section {
  padding: 22px 20px;
  border-bottom: 1px solid var(--border);
}
.cal-03-right-section:last-child { border-bottom: none; flex: 1; }

.cal-03-right-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.cal-03-right-label::before {
  content: '';
  width: 3px; height: 10px;
  background: var(--cyan);
  border-radius: 2px;
  box-shadow: 0 0 8px var(--cyan);
}

/* Selected date info */
.cal-03-selected-date {
  font-size: 48px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1;
  animation: cal03-slide-up 0.3s ease;
}
.cal-03-selected-info {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--muted);
  margin-top: 6px;
}

/* Schedule list */
.cal-03-schedule-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 12px;
  animation: cal03-slide-up 0.3s ease both;
}
.cal-03-schedule-item:nth-child(2) { animation-delay: 0.05s; }
.cal-03-schedule-item:nth-child(3) { animation-delay: 0.1s; }
.cal-03-schedule-item:nth-child(4) { animation-delay: 0.15s; }

.cal-03-sch-time {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--muted);
  width: 38px;
  flex-shrink: 0;
  padding-top: 2px;
}

.cal-03-sch-body {
  flex: 1;
  min-width: 0;
}

.cal-03-sch-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cal-03-sch-sub {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--muted);
  margin-top: 2px;
}

.cal-03-sch-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 4px;
}

/* Heatmap mini */
.cal-03-heatmap-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 3px;
  margin-top: 4px;
}
.cal-03-heat-cell {
  aspect-ratio: 1;
  border-radius: 3px;
  background: var(--surface3);
  transition: background 0.2s;
}
.cal-03-heat-cell.cal-03-h1 { background: rgba(0,212,255,0.2); }
.cal-03-heat-cell.cal-03-h2 { background: rgba(0,212,255,0.4); }
.cal-03-heat-cell.cal-03-h3 { background: rgba(0,212,255,0.65); }
.cal-03-heat-cell.cal-03-h4 { background: var(--cyan); box-shadow: 0 0 8px rgba(0,212,255,0.4); }

/* Progress bars */
.cal-03-progress-item {
  margin-bottom: 12px;
}
.cal-03-progress-head {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  margin-bottom: 5px;
}
.cal-03-progress-name { font-weight: 600; color: var(--text); }
.cal-03-progress-val { font-family: 'JetBrains Mono', monospace; color: var(--muted); }

.cal-03-progress-track {
  height: 4px;
  background: var(--surface3);
  border-radius: 2px;
  overflow: hidden;
}
.cal-03-progress-fill {
  height: 100%;
  border-radius: 2px;
  transform-origin: left;
  animation: cal03-bar-fill 1s cubic-bezier(0.22,1,0.36,1) both;
}

@media (max-width: 700px) {
  .cal-03-body { grid-template-columns: 1fr; }
  .cal-03-right { display: none; }
  .cal-03-date { min-height: 50px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
```

**JS:**
```js
const days = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
const months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];

document.querySelectorAll('#cal-03-darkCal .cal-03-date:not(.cal-03-dim)').forEach(cell => {
  cell.addEventListener('click', function() {
    document.querySelectorAll('#cal-03-darkCal .cal-03-date').forEach(c => c.classList.remove('cal-03-selected'));
    this.classList.add('cal-03-selected');
    const num = parseInt(this.querySelector('.cal-03-date-num').textContent);
    document.getElementById('cal-03-selDate').textContent = String(num).padStart(2,'0');
  });
});
```

### 04. Pure CSS Calendar (No JavaScript)

**Type:** Pure CSS
**Description:** A Japandi/wabi-sabi calendar driven entirely by the checkbox/radio hack. Hidden radio inputs switch months and select dates via :checked sibling rules with zero JavaScript. Cormorant + Noto Serif JP, kanji month marks, gold/red event dots on warm parchment.

**HTML:**
```html
<!-- ALL radio inputs must live OUTSIDE .cal04__frame so :checked siblings can target inside -->
<div class="cal04">

  <!-- Month selector radios (outside frame so ~ combinator works) -->
  <input type="radio" class="cal04__radio" name="cal04-month" id="cal04-m1" checked>
  <input type="radio" class="cal04__radio" name="cal04-month" id="cal04-m2">
  <input type="radio" class="cal04__radio" name="cal04-month" id="cal04-m3">

  <!-- Date selection radios for June -->
  <input type="radio" class="cal04__date-radio" name="cal04-date" id="cal04-d8">
  <input type="radio" class="cal04__date-radio" name="cal04-date" id="cal04-d9">
  <input type="radio" class="cal04__date-radio" name="cal04-date" id="cal04-d10">
  <input type="radio" class="cal04__date-radio" name="cal04-date" id="cal04-d11">
  <input type="radio" class="cal04__date-radio" name="cal04-date" id="cal04-d12">
  <input type="radio" class="cal04__date-radio" name="cal04-date" id="cal04-d13">
  <input type="radio" class="cal04__date-radio" name="cal04-date" id="cal04-d14">
  <input type="radio" class="cal04__date-radio" name="cal04-date" id="cal04-d15">
  <input type="radio" class="cal04__date-radio" name="cal04-date" id="cal04-d16">
  <input type="radio" class="cal04__date-radio" name="cal04-date" id="cal04-d17">
  <input type="radio" class="cal04__date-radio" name="cal04-date" id="cal04-d18">
  <input type="radio" class="cal04__date-radio" name="cal04-date" id="cal04-d19">
  <input type="radio" class="cal04__date-radio" name="cal04-date" id="cal04-d20">
  <input type="radio" class="cal04__date-radio" name="cal04-date" id="cal04-d21">
  <input type="radio" class="cal04__date-radio" name="cal04-date" id="cal04-d22">
  <input type="radio" class="cal04__date-radio" name="cal04-date" id="cal04-d23">
  <input type="radio" class="cal04__date-radio" name="cal04-date" id="cal04-d24">
  <input type="radio" class="cal04__date-radio" name="cal04-date" id="cal04-d25">
  <input type="radio" class="cal04__date-radio" name="cal04-date" id="cal04-d26">
  <input type="radio" class="cal04__date-radio" name="cal04-date" id="cal04-d27">
  <input type="radio" class="cal04__date-radio" name="cal04-date" id="cal04-d28">
  <input type="radio" class="cal04__date-radio" name="cal04-date" id="cal04-d29">
  <input type="radio" class="cal04__date-radio" name="cal04-date" id="cal04-d30">

  <div class="cal04__frame">

    <!-- Month tabs -->
    <div class="cal04__header">
      <div class="cal04__tab-labels">
        <label class="cal04__tab-label" for="cal04-m1">June</label>
        <label class="cal04__tab-label" for="cal04-m2">July</label>
        <label class="cal04__tab-label" for="cal04-m3">August</label>
      </div>
    </div>

    <!-- Month panels -->
    <div class="cal04__months">

      <!-- ── June ── -->
      <div class="cal04__month cal04__month--1">
        <div class="cal04__month-head">
          <div class="cal04__month-name">June</div>
          <div class="cal04__month-year">2026</div>
          <div class="cal04__month-kanji">六月</div>
        </div>

        <div class="cal04__dow">
          <div class="cal04__dow-cell">日 Sun</div>
          <div class="cal04__dow-cell">月 Mon</div>
          <div class="cal04__dow-cell">火 Tue</div>
          <div class="cal04__dow-cell">水 Wed</div>
          <div class="cal04__dow-cell">木 Thu</div>
          <div class="cal04__dow-cell">金 Fri</div>
          <div class="cal04__dow-cell">土 Sat</div>
        </div>

        <div class="cal04__grid">
          <!-- May overflow -->
          <label class="cal04__date-label other sun"><span class="cal04__date-num">25</span></label>
          <label class="cal04__date-label other"><span class="cal04__date-num">26</span></label>
          <label class="cal04__date-label other"><span class="cal04__date-num">27</span></label>
          <label class="cal04__date-label other"><span class="cal04__date-num">28</span></label>
          <label class="cal04__date-label other"><span class="cal04__date-num">29</span></label>
          <label class="cal04__date-label other"><span class="cal04__date-num">30</span></label>
          <label class="cal04__date-label other sat"><span class="cal04__date-num">31</span></label>
          <!-- June 1–7 -->
          <label class="cal04__date-label sun" for="cal04-d8"><span class="cal04__date-num">1</span></label>
          <label class="cal04__date-label" for="cal04-d9"><span class="cal04__date-num">2</span><div class="cal04__dots"><span class="cal04__dot cal04__dot--red"></span></div></label>
          <label class="cal04__date-label" for="cal04-d10"><span class="cal04__date-num">3</span></label>
          <label class="cal04__date-label" for="cal04-d11"><span class="cal04__date-num">4</span></label>
          <label class="cal04__date-label" for="cal04-d12"><span class="cal04__date-num">5</span><div class="cal04__dots"><span class="cal04__dot cal04__dot--gold"></span></div></label>
          <label class="cal04__date-label" for="cal04-d13"><span class="cal04__date-num">6</span></label>
          <label class="cal04__date-label sat" for="cal04-d14"><span class="cal04__date-num">7</span></label>
          <!-- June 8–14: today = 8 -->
          <input type="radio" class="cal04__date-radio" name="cal04-date" id="cal04-d8" checked>
          <label class="cal04__date-label today sun" for="cal04-d8"><span class="cal04__date-num">8</span></label>
          <label class="cal04__date-label" for="cal04-d9"><span class="cal04__date-num">9</span></label>
          <label class="cal04__date-label" for="cal04-d10"><span class="cal04__date-num">10</span><div class="cal04__dots"><span class="cal04__dot cal04__dot--red"></span><span class="cal04__dot"></span></div></label>
          <label class="cal04__date-label" for="cal04-d11"><span class="cal04__date-num">11</span></label>
          <label class="cal04__date-label" for="cal04-d12"><span class="cal04__date-num">12</span></label>
          <label class="cal04__date-label" for="cal04-d13"><span class="cal04__date-num">13</span><div class="cal04__dots"><span class="cal04__dot cal04__dot--gold"></span></div></label>
          <label class="cal04__date-label sat" for="cal04-d14"><span class="cal04__date-num">14</span></label>
          <!-- June 15–21 -->
          <label class="cal04__date-label sun" for="cal04-d15"><span class="cal04__date-num">15</span></label>
          <label class="cal04__date-label" for="cal04-d16"><span class="cal04__date-num">16</span></label>
          <label class="cal04__date-label" for="cal04-d17"><span class="cal04__date-num">17</span><div class="cal04__dots"><span class="cal04__dot cal04__dot--red"></span><span class="cal04__dot cal04__dot--red"></span></div></label>
          <label class="cal04__date-label" for="cal04-d18"><span class="cal04__date-num">18</span></label>
          <label class="cal04__date-label" for="cal04-d19"><span class="cal04__date-num">19</span></label>
          <label class="cal04__date-label" for="cal04-d20"><span class="cal04__date-num">20</span></label>
          <label class="cal04__date-label sat" for="cal04-d21"><span class="cal04__date-num">21</span><div class="cal04__dots"><span class="cal04__dot cal04__dot--gold"></span></div></label>
          <!-- June 22–28 -->
          <label class="cal04__date-label sun" for="cal04-d22"><span class="cal04__date-num">22</span></label>
          <label class="cal04__date-label" for="cal04-d23"><span class="cal04__date-num">23</span></label>
          <label class="cal04__date-label" for="cal04-d24"><span class="cal04__date-num">24</span><div class="cal04__dots"><span class="cal04__dot"></span></div></label>
          <label class="cal04__date-label" for="cal04-d25"><span class="cal04__date-num">25</span></label>
          <label class="cal04__date-label" for="cal04-d26"><span class="cal04__date-num">26</span></label>
          <label class="cal04__date-label" for="cal04-d27"><span class="cal04__date-num">27</span><div class="cal04__dots"><span class="cal04__dot cal04__dot--red"></span></div></label>
          <label class="cal04__date-label sat" for="cal04-d28"><span class="cal04__date-num">28</span></label>
          <!-- June 29–30 + July overflow -->
          <label class="cal04__date-label sun" for="cal04-d29"><span class="cal04__date-num">29</span></label>
          <label class="cal04__date-label" for="cal04-d30"><span class="cal04__date-num">30</span></label>
          <label class="cal04__date-label other"><span class="cal04__date-num">1</span></label>
          <label class="cal04__date-label other"><span class="cal04__date-num">2</span></label>
          <label class="cal04__date-label other"><span class="cal04__date-num">3</span></label>
          <label class="cal04__date-label other"><span class="cal04__date-num">4</span></label>
          <label class="cal04__date-label other sat"><span class="cal04__date-num">5</span></label>
        </div>
      </div>

      <!-- ── July ── -->
      <div class="cal04__month cal04__month--2">
        <div class="cal04__month-head">
          <div class="cal04__month-name">July</div>
          <div class="cal04__month-year">2026</div>
          <div class="cal04__month-kanji">七月</div>
        </div>
        <div class="cal04__dow">
          <div class="cal04__dow-cell">日</div><div class="cal04__dow-cell">月</div><div class="cal04__dow-cell">火</div>
          <div class="cal04__dow-cell">水</div><div class="cal04__dow-cell">木</div><div class="cal04__dow-cell">金</div><div class="cal04__dow-cell">土</div>
        </div>
        <div class="cal04__grid">
          <label class="cal04__date-label other sun"><span class="cal04__date-num">29</span></label>
          <label class="cal04__date-label other"><span class="cal04__date-num">30</span></label>
          <label class="cal04__date-label"><span class="cal04__date-num">1</span></label>
          <label class="cal04__date-label"><span class="cal04__date-num">2</span></label>
          <label class="cal04__date-label"><span class="cal04__date-num">3</span><div class="cal04__dots"><span class="cal04__dot cal04__dot--gold"></span></div></label>
          <label class="cal04__date-label"><span class="cal04__date-num">4</span><div class="cal04__dots"><span class="cal04__dot cal04__dot--red"></span></div></label>
          <label class="cal04__date-label sat"><span class="cal04__date-num">5</span></label>
          <label class="cal04__date-label sun"><span class="cal04__date-num">6</span></label>
          <label class="cal04__date-label"><span class="cal04__date-num">7</span></label>
          <label class="cal04__date-label"><span class="cal04__date-num">8</span></label>
          <label class="cal04__date-label"><span class="cal04__date-num">9</span><div class="cal04__dots"><span class="cal04__dot"></span></div></label>
          <label class="cal04__date-label"><span class="cal04__date-num">10</span></label>
          <label class="cal04__date-label"><span class="cal04__date-num">11</span></label>
          <label class="cal04__date-label sat"><span class="cal04__date-num">12</span></label>
          <label class="cal04__date-label sun"><span class="cal04__date-num">13</span></label>
          <label class="cal04__date-label"><span class="cal04__date-num">14</span></label>
          <label class="cal04__date-label"><span class="cal04__date-num">15</span><div class="cal04__dots"><span class="cal04__dot cal04__dot--red"></span><span class="cal04__dot cal04__dot--gold"></span></div></label>
          <label class="cal04__date-label"><span class="cal04__date-num">16</span></label>
          <label class="cal04__date-label"><span class="cal04__date-num">17</span></label>
          <label class="cal04__date-label"><span class="cal04__date-num">18</span></label>
          <label class="cal04__date-label sat"><span class="cal04__date-num">19</span></label>
          <label class="cal04__date-label sun"><span class="cal04__date-num">20</span></label>
          <label class="cal04__date-label"><span class="cal04__date-num">21</span></label>
          <label class="cal04__date-label"><span class="cal04__date-num">22</span></label>
          <label class="cal04__date-label"><span class="cal04__date-num">23</span></label>
          <label class="cal04__date-label"><span class="cal04__date-num">24</span><div class="cal04__dots"><span class="cal04__dot"></span></div></label>
          <label class="cal04__date-label"><span class="cal04__date-num">25</span></label>
          <label class="cal04__date-label sat"><span class="cal04__date-num">26</span></label>
          <label class="cal04__date-label sun"><span class="cal04__date-num">27</span></label>
          <label class="cal04__date-label"><span class="cal04__date-num">28</span></label>
          <label class="cal04__date-label"><span class="cal04__date-num">29</span></label>
          <label class="cal04__date-label"><span class="cal04__date-num">30</span></label>
          <label class="cal04__date-label"><span class="cal04__date-num">31</span></label>
          <label class="cal04__date-label other"><span class="cal04__date-num">1</span></label>
          <label class="cal04__date-label other sat"><span class="cal04__date-num">2</span></label>
        </div>
      </div>

      <!-- ── August ── -->
      <div class="cal04__month cal04__month--3">
        <div class="cal04__month-head">
          <div class="cal04__month-name">August</div>
          <div class="cal04__month-year">2026</div>
          <div class="cal04__month-kanji">八月</div>
        </div>
        <div class="cal04__dow">
          <div class="cal04__dow-cell">日</div><div class="cal04__dow-cell">月</div><div class="cal04__dow-cell">火</div>
          <div class="cal04__dow-cell">水</div><div class="cal04__dow-cell">木</div><div class="cal04__dow-cell">金</div><div class="cal04__dow-cell">土</div>
        </div>
        <div class="cal04__grid">
          <label class="cal04__date-label other sun"><span class="cal04__date-num">27</span></label>
          <label class="cal04__date-label other"><span class="cal04__date-num">28</span></label>
          <label class="cal04__date-label other"><span class="cal04__date-num">29</span></label>
          <label class="cal04__date-label other"><span class="cal04__date-num">30</span></label>
          <label class="cal04__date-label other"><span class="cal04__date-num">31</span></label>
          <label class="cal04__date-label"><span class="cal04__date-num">1</span><div class="cal04__dots"><span class="cal04__dot cal04__dot--red"></span></div></label>
          <label class="cal04__date-label sat"><span class="cal04__date-num">2</span></label>
          <label class="cal04__date-label sun"><span class="cal04__date-num">3</span></label>
          <label class="cal04__date-label"><span class="cal04__date-num">4</span></label>
          <label class="cal04__date-label"><span class="cal04__date-num">5</span></label>
          <label class="cal04__date-label"><span class="cal04__date-num">6</span><div class="cal04__dots"><span class="cal04__dot cal04__dot--gold"></span></div></label>
          <label class="cal04__date-label"><span class="cal04__date-num">7</span></label>
          <label class="cal04__date-label"><span class="cal04__date-num">8</span></label>
          <label class="cal04__date-label sat"><span class="cal04__date-num">9</span></label>
          <label class="cal04__date-label sun"><span class="cal04__date-num">10</span></label>
          <label class="cal04__date-label"><span class="cal04__date-num">11</span></label>
          <label class="cal04__date-label"><span class="cal04__date-num">12</span></label>
          <label class="cal04__date-label"><span class="cal04__date-num">13</span></label>
          <label class="cal04__date-label"><span class="cal04__date-num">14</span></label>
          <label class="cal04__date-label"><span class="cal04__date-num">15</span><div class="cal04__dots"><span class="cal04__dot cal04__dot--red"></span><span class="cal04__dot"></span></div></label>
          <label class="cal04__date-label sat"><span class="cal04__date-num">16</span></label>
          <label class="cal04__date-label sun"><span class="cal04__date-num">17</span></label>
          <label class="cal04__date-label"><span class="cal04__date-num">18</span></label>
          <label class="cal04__date-label"><span class="cal04__date-num">19</span></label>
          <label class="cal04__date-label"><span class="cal04__date-num">20</span></label>
          <label class="cal04__date-label"><span class="cal04__date-num">21</span></label>
          <label class="cal04__date-label"><span class="cal04__date-num">22</span></label>
          <label class="cal04__date-label sat"><span class="cal04__date-num">23</span></label>
          <label class="cal04__date-label sun"><span class="cal04__date-num">24</span></label>
          <label class="cal04__date-label"><span class="cal04__date-num">25</span><div class="cal04__dots"><span class="cal04__dot cal04__dot--gold"></span><span class="cal04__dot cal04__dot--red"></span></div></label>
          <label class="cal04__date-label"><span class="cal04__date-num">26</span></label>
          <label class="cal04__date-label"><span class="cal04__date-num">27</span></label>
          <label class="cal04__date-label"><span class="cal04__date-num">28</span></label>
          <label class="cal04__date-label"><span class="cal04__date-num">29</span></label>
          <label class="cal04__date-label sat"><span class="cal04__date-num">30</span></label>
          <label class="cal04__date-label sun"><span class="cal04__date-num">31</span></label>
          <label class="cal04__date-label other"><span class="cal04__date-num">1</span></label>
          <label class="cal04__date-label other"><span class="cal04__date-num">2</span></label>
          <label class="cal04__date-label other"><span class="cal04__date-num">3</span></label>
          <label class="cal04__date-label other"><span class="cal04__date-num">4</span></label>
          <label class="cal04__date-label other sat"><span class="cal04__date-num">5</span></label>
          <label class="cal04__date-label other sun"><span class="cal04__date-num">6</span></label>
          <label class="cal04__date-label other"><span class="cal04__date-num">7</span></label>
        </div>
      </div>

    </div><!-- /months -->

    <!-- Footer -->
    <div class="cal04__footer">
      <div class="cal04__footer-note">純CSS · No JavaScript · 2026</div>
      <div class="cal04__legend">
        <div class="cal04__legend-item">
          <span class="cal04__legend-dot" style="background:#b5413a"></span> Event
        </div>
        <div class="cal04__legend-item">
          <span class="cal04__legend-dot" style="background:#c9954a"></span> Holiday
        </div>
      </div>
    </div>

  </div><!-- /frame -->
</div><!-- /cal04 -->
```

**CSS:**
```css
/* ── Reset scoped ── */
.cal04, .cal04 *, .cal04 *::before, .cal04 *::after {
  box-sizing: border-box; margin: 0; padding: 0;
}
.cal04 ::selection { background: #b5a99a; color: #fff; }

/* ── CSS-only toggle mechanism: hidden radio inputs ── */
.cal04__radio { display: none; }

/* ── Root variables ── */
.cal04 {
  --paper:   #f7f3ed;
  --warm:    #ede7dc;
  --ink:     #2c2520;
  --ink2:    #6b5f56;
  --ink3:    #a89e95;
  --red:     #b5413a;
  --gold:    #c9954a;
  --line:    rgba(44,37,32,0.1);
  --sel:     rgba(181,65,58,0.08);
  --sel-bdr: rgba(181,65,58,0.4);

  font-family: 'Cormorant Garamond', serif;
  background: var(--paper);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  color: var(--ink);
  background-image:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(201,149,74,0.06) 0%, transparent 70%);
}

/* ── Outer frame ── */
.cal04__frame {
  width: 100%;
  max-width: 640px;
  border: 1px solid rgba(44,37,32,0.14);
  background: #faf7f2;
  box-shadow:
    0 2px 0 rgba(44,37,32,0.04),
    0 12px 48px rgba(44,37,32,0.08);
}

/* ── Header: month navigation using :checked ── */
.cal04__header {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--line);
}

/* Month tabs — driven by radio inputs */
.cal04__tab-labels {
  display: flex;
  flex: 1;
  overflow: hidden;
}

.cal04__tab-label {
  flex: 1;
  padding: 18px 6px 16px;
  text-align: center;
  cursor: pointer;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink3);
  border-right: 1px solid var(--line);
  transition: background 0.25s, color 0.25s;
  user-select: none;
  position: relative;
}
.cal04__tab-label:last-child { border-right: none; }
.cal04__tab-label:hover { background: var(--warm); color: var(--ink2); }

/* Active tab: when corresponding radio is checked */
#cal04-m1:checked ~ .cal04__frame .cal04__tab-label[for="cal04-m1"],
#cal04-m2:checked ~ .cal04__frame .cal04__tab-label[for="cal04-m2"],
#cal04-m3:checked ~ .cal04__frame .cal04__tab-label[for="cal04-m3"] {
  color: var(--red);
  background: var(--sel);
  font-weight: 600;
}
#cal04-m1:checked ~ .cal04__frame .cal04__tab-label[for="cal04-m1"]::after,
#cal04-m2:checked ~ .cal04__frame .cal04__tab-label[for="cal04-m2"]::after,
#cal04-m3:checked ~ .cal04__frame .cal04__tab-label[for="cal04-m3"]::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: var(--red);
}

/* ── Month panels: show/hide via :checked ── */
.cal04__months { position: relative; }

.cal04__month {
  display: none;
  flex-direction: column;
}

#cal04-m1:checked ~ .cal04__frame .cal04__month--1,
#cal04-m2:checked ~ .cal04__frame .cal04__month--2,
#cal04-m3:checked ~ .cal04__frame .cal04__month--3 {
  display: flex;
  animation: cal04-reveal 0.35s cubic-bezier(0.22,1,0.36,1);
}

@keyframes cal04-reveal {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Month title ── */
.cal04__month-head {
  padding: 32px 36px 20px;
  display: flex;
  align-items: baseline;
  gap: 14px;
  border-bottom: 1px solid var(--line);
}

.cal04__month-name {
  font-size: 52px;
  font-weight: 300;
  font-style: italic;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.cal04__month-year {
  font-size: 14px;
  letter-spacing: 0.2em;
  color: var(--ink3);
  font-family: 'Noto Serif JP', serif;
  font-weight: 300;
}

.cal04__month-kanji {
  margin-left: auto;
  font-family: 'Noto Serif JP', serif;
  font-size: 32px;
  font-weight: 300;
  color: var(--gold);
  opacity: 0.7;
}

/* ── Day-of-week labels ── */
.cal04__dow {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  padding: 12px 20px 0;
}

.cal04__dow-cell {
  text-align: center;
  font-family: 'Noto Serif JP', serif;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.14em;
  color: var(--ink3);
  padding-bottom: 10px;
}
.cal04__dow-cell:first-child { color: var(--red); opacity: 0.7; }
.cal04__dow-cell:last-child  { color: var(--gold); opacity: 0.7; }

/* ── Date grid — pure CSS, checkbox-hack date selection ── */
.cal04__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  padding: 4px 20px 28px;
  gap: 2px;
}

/* Hidden radio inputs for date selection */
.cal04__date-radio { display: none; }

.cal04__date-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 10px 4px 8px;
  min-height: 56px;
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.18s;
  position: relative;
}
.cal04__date-label:hover { background: var(--warm); }

.cal04__date-num {
  font-size: 16px;
  font-weight: 400;
  color: var(--ink);
  line-height: 1;
  transition: color 0.18s;
}

.cal04__date-label.other { opacity: 0.22; pointer-events: none; }
.cal04__date-label.sun .cal04__date-num { color: var(--red); }
.cal04__date-label.sat .cal04__date-num { color: var(--gold); }

/* Today ring */
.cal04__date-label.today .cal04__date-num {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--red);
  border-radius: 50%;
  color: var(--red);
  font-weight: 600;
}

/* Selected state — :checked sibling targets label */
.cal04__date-radio:checked + .cal04__date-label {
  background: var(--sel);
  border: 1px solid var(--sel-bdr);
}
.cal04__date-radio:checked + .cal04__date-label .cal04__date-num {
  color: var(--red);
  font-weight: 600;
}

/* Event dots (pure CSS, decorative) */
.cal04__dots {
  display: flex;
  gap: 3px;
  margin-top: 5px;
}
.cal04__dot {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--ink3);
  opacity: 0.5;
}
.cal04__dot--red  { background: var(--red);  opacity: 0.8; }
.cal04__dot--gold { background: var(--gold); opacity: 0.8; }

/* ── Footer: selected date readout (CSS :checked trick) ── */
.cal04__footer {
  border-top: 1px solid var(--line);
  padding: 16px 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--warm);
}

.cal04__footer-note {
  font-family: 'Noto Serif JP', serif;
  font-size: 11px;
  letter-spacing: 0.15em;
  color: var(--ink3);
}

.cal04__legend {
  display: flex;
  gap: 14px;
}
.cal04__legend-item {
  display: flex; align-items: center; gap: 5px;
  font-size: 11px; color: var(--ink3); letter-spacing: 0.06em;
}
.cal04__legend-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
}

/* ── Decorative vertical rule ── */
.cal04__rule {
  width: 1px;
  background: linear-gradient(to bottom, transparent, var(--line) 30%, var(--line) 70%, transparent);
  align-self: stretch;
}

/* ── Ink brush decoration ── */
.cal04__brush {
  position: absolute;
  top: -8px; right: 24px;
  font-family: 'Noto Serif JP', serif;
  font-size: 11px;
  letter-spacing: 0.3em;
  color: var(--ink3);
  opacity: 0.4;
  writing-mode: vertical-rl;
}

@media (max-width: 480px) {
  .cal04__month-head { padding: 20px 16px 14px; }
  .cal04__month-name { font-size: 36px; }
  .cal04__grid { padding: 4px 8px 20px; gap: 1px; }
  .cal04__footer { padding: 12px 16px; flex-direction: column; gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .cal04 * { animation: none !important; transition: none !important; }
}
```

### 05. CSS Grid Calendar Layout

**Type:** CSS + JS
**Description:** An editorial magazine layout showcasing display:grid with grid-template-columns:repeat(7,1fr). A 1px gap over a colored parent fakes clean grid lines; column headers and date grid share the same 7-track system. Playfair Display masthead, rust/sage/sand event labels.

**HTML:**
```html
<div class="cal05">
  <div class="cal05__shell">

    <!-- Masthead -->
    <div class="cal05__masthead">
      <div class="cal05__masthead-left">Vol. VI &nbsp;·&nbsp; Issue 6 &nbsp;·&nbsp; Q2 2026</div>
      <div class="cal05__masthead-center">
        <div class="cal05__title">June<span>.</span></div>
        <div class="cal05__subtitle">CSS Grid Calendar Layout &nbsp;·&nbsp; display: grid; repeat(7, 1fr)</div>
      </div>
      <div class="cal05__masthead-right">
        <div class="cal05__nav">
          <div class="cal05__nav-btn">←</div>
          <div class="cal05__nav-btn">→</div>
        </div>
      </div>
    </div>

    <!-- Column headers — also a 7-col grid -->
    <div class="cal05__col-headers">
      <div class="cal05__col-header cal05__col-header--weekend">
        <div class="cal05__col-day-abbr">Sun</div>
        <div class="cal05__col-day-num">wk</div>
      </div>
      <div class="cal05__col-header">
        <div class="cal05__col-day-abbr">Mon</div>
        <div class="cal05__col-day-num">col 2</div>
      </div>
      <div class="cal05__col-header">
        <div class="cal05__col-day-abbr">Tue</div>
        <div class="cal05__col-day-num">col 3</div>
      </div>
      <div class="cal05__col-header">
        <div class="cal05__col-day-abbr">Wed</div>
        <div class="cal05__col-day-num">col 4</div>
      </div>
      <div class="cal05__col-header">
        <div class="cal05__col-day-abbr">Thu</div>
        <div class="cal05__col-day-num">col 5</div>
      </div>
      <div class="cal05__col-header">
        <div class="cal05__col-day-abbr">Fri</div>
        <div class="cal05__col-day-num">col 6</div>
      </div>
      <div class="cal05__col-header cal05__col-header--weekend">
        <div class="cal05__col-day-abbr">Sat</div>
        <div class="cal05__col-day-num">col 7</div>
      </div>
    </div>

    <!--
      ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
        CSS GRID: display:grid; grid-template-columns:repeat(7,1fr)
        Each .cal05__cell auto-places into the next column.
        grid-auto-rows: minmax(100px, auto) — rows expand to fit content.
        gap: 1px + background on parent = visible grid lines.
      ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
    -->
    <div class="cal05__grid" id="cal05Grid">

      <!-- Row 1: May overflow (grid auto-places, starts col 1 = Sun) -->
      <div class="cal05__cell cal05__cell--other cal05__cell--weekend">
        <div class="cal05__week-tag">W21</div>
        <div class="cal05__cell-num">25</div>
      </div>
      <div class="cal05__cell cal05__cell--other"><div class="cal05__cell-num">26</div></div>
      <div class="cal05__cell cal05__cell--other"><div class="cal05__cell-num">27</div></div>
      <div class="cal05__cell cal05__cell--other"><div class="cal05__cell-num">28</div></div>
      <div class="cal05__cell cal05__cell--other"><div class="cal05__cell-num">29</div></div>
      <div class="cal05__cell cal05__cell--other"><div class="cal05__cell-num">30</div></div>
      <div class="cal05__cell cal05__cell--other cal05__cell--weekend"><div class="cal05__cell-num">31</div></div>

      <!-- Row 2 -->
      <div class="cal05__cell cal05__cell--weekend">
        <div class="cal05__week-tag">W22</div>
        <div class="cal05__cell-num">1</div>
      </div>
      <div class="cal05__cell">
        <div class="cal05__cell-num">2</div>
        <div class="cal05__cell-events">
          <div class="cal05__event cal05__event--rust">Design Sprint</div>
        </div>
      </div>
      <div class="cal05__cell"><div class="cal05__cell-num">3</div></div>
      <div class="cal05__cell">
        <div class="cal05__cell-num">4</div>
        <div class="cal05__cell-events">
          <div class="cal05__event cal05__event--sand">Holiday</div>
        </div>
      </div>
      <div class="cal05__cell"><div class="cal05__cell-num">5</div></div>
      <div class="cal05__cell">
        <div class="cal05__cell-num">6</div>
        <div class="cal05__cell-events">
          <div class="cal05__event cal05__event--sage">Deadline</div>
        </div>
      </div>
      <div class="cal05__cell cal05__cell--weekend"><div class="cal05__cell-num">7</div></div>

      <!-- Row 3: Today = Jun 8 (Sunday) -->
      <div class="cal05__cell cal05__cell--today cal05__cell--weekend" id="cal05Today">
        <div class="cal05__week-tag">W23</div>
        <div class="cal05__cell-num">8</div>
        <div class="cal05__cell-events">
          <div class="cal05__event cal05__event--rust">Today</div>
        </div>
      </div>
      <div class="cal05__cell">
        <div class="cal05__cell-num">9</div>
        <div class="cal05__cell-events">
          <div class="cal05__event cal05__event--sage">Sprint</div>
        </div>
      </div>
      <div class="cal05__cell"><div class="cal05__cell-num">10</div></div>
      <div class="cal05__cell">
        <div class="cal05__cell-num">11</div>
        <div class="cal05__cell-events">
          <div class="cal05__event cal05__event--rust">Launch</div>
          <div class="cal05__event cal05__event--ink">All-hands</div>
        </div>
      </div>
      <div class="cal05__cell"><div class="cal05__cell-num">12</div></div>
      <div class="cal05__cell"><div class="cal05__cell-num">13</div></div>
      <div class="cal05__cell cal05__cell--weekend"><div class="cal05__cell-num">14</div></div>

      <!-- Row 4 -->
      <div class="cal05__cell cal05__cell--weekend">
        <div class="cal05__week-tag">W24</div>
        <div class="cal05__cell-num">15</div>
      </div>
      <div class="cal05__cell"><div class="cal05__cell-num">16</div></div>
      <div class="cal05__cell">
        <div class="cal05__cell-num">17</div>
        <div class="cal05__cell-events">
          <div class="cal05__event cal05__event--sand">Demo Day</div>
          <div class="cal05__event cal05__event--sage">Q2 Report</div>
        </div>
      </div>
      <div class="cal05__cell"><div class="cal05__cell-num">18</div></div>
      <div class="cal05__cell"><div class="cal05__cell-num">19</div></div>
      <div class="cal05__cell">
        <div class="cal05__cell-num">20</div>
        <div class="cal05__cell-events">
          <div class="cal05__event cal05__event--rust">Board Mtg</div>
        </div>
      </div>
      <div class="cal05__cell cal05__cell--weekend"><div class="cal05__cell-num">21</div></div>

      <!-- Row 5 -->
      <div class="cal05__cell cal05__cell--weekend">
        <div class="cal05__week-tag">W25</div>
        <div class="cal05__cell-num">22</div>
      </div>
      <div class="cal05__cell"><div class="cal05__cell-num">23</div></div>
      <div class="cal05__cell"><div class="cal05__cell-num">24</div></div>
      <div class="cal05__cell">
        <div class="cal05__cell-num">25</div>
        <div class="cal05__cell-events">
          <div class="cal05__event cal05__event--ink">Planning</div>
        </div>
      </div>
      <div class="cal05__cell"><div class="cal05__cell-num">26</div></div>
      <div class="cal05__cell">
        <div class="cal05__cell-num">27</div>
        <div class="cal05__cell-events">
          <div class="cal05__event cal05__event--sage">Retro</div>
        </div>
      </div>
      <div class="cal05__cell cal05__cell--weekend"><div class="cal05__cell-num">28</div></div>

      <!-- Row 6 -->
      <div class="cal05__cell cal05__cell--weekend">
        <div class="cal05__week-tag">W26</div>
        <div class="cal05__cell-num">29</div>
      </div>
      <div class="cal05__cell"><div class="cal05__cell-num">30</div></div>
      <div class="cal05__cell cal05__cell--other"><div class="cal05__cell-num">1</div></div>
      <div class="cal05__cell cal05__cell--other"><div class="cal05__cell-num">2</div></div>
      <div class="cal05__cell cal05__cell--other"><div class="cal05__cell-num">3</div></div>
      <div class="cal05__cell cal05__cell--other"><div class="cal05__cell-num">4</div></div>
      <div class="cal05__cell cal05__cell--other cal05__cell--weekend"><div class="cal05__cell-num">5</div></div>

    </div><!-- /grid -->

    <!-- Annotation strip -->
    <div class="cal05__annotation">
      <div class="cal05__ann-cell">
        <div class="cal05__ann-label">Grid columns</div>
        <div class="cal05__ann-value">7</div>
        <div class="cal05__ann-sub">repeat(7, 1fr)</div>
      </div>
      <div class="cal05__ann-cell">
        <div class="cal05__ann-label">Events this month</div>
        <div class="cal05__ann-value">11</div>
        <div class="cal05__ann-sub">across 30 days</div>
      </div>
      <div class="cal05__ann-cell">
        <div class="cal05__ann-label">Week in year</div>
        <div class="cal05__ann-value">W23</div>
        <div class="cal05__ann-sub">Q2 · Day 159</div>
      </div>
    </div>

    <!-- Legend -->
    <div class="cal05__legend">
      <span class="cal05__legend-label">Legend:</span>
      <div class="cal05__legend-item"><div class="cal05__legend-swatch" style="background:#c94f2c"></div>Priority</div>
      <div class="cal05__legend-item"><div class="cal05__legend-swatch" style="background:#4a7c6f"></div>Milestone</div>
      <div class="cal05__legend-item"><div class="cal05__legend-swatch" style="background:#d4a853"></div>Holiday</div>
      <div class="cal05__legend-item"><div class="cal05__legend-swatch" style="background:#1a1a2e"></div>General</div>
    </div>

  </div>
</div>
```

**CSS:**
```css
.cal05, .cal05 *, .cal05 *::before, .cal05 *::after {
  box-sizing: border-box; margin: 0; padding: 0;
}
.cal05 ::selection { background: #1a1a2e; color: #f5e6c8; }

.cal05 {
  --cream:    #f8f4ed;
  --warm:     #ede5d5;
  --ink:      #1a1a2e;
  --ink2:     #4a4a6a;
  --ink3:     #8a8aaa;
  --rust:     #c94f2c;
  --sage:     #4a7c6f;
  --sand:     #d4a853;
  --grid-gap: 1px;
  --border:   rgba(26,26,46,0.1);

  font-family: 'Barlow', sans-serif;
  background: var(--cream);
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 20px;
  color: var(--ink);
}

@keyframes cal05-enter {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes cal05-highlight {
  from { background: rgba(201,79,44,0.15); }
  to   { background: transparent; }
}

/* ── Shell ── */
.cal05__shell {
  width: 100%;
  max-width: 900px;
  animation: cal05-enter 0.5s ease both;
}

/* ── Masthead ── */
.cal05__masthead {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  padding-bottom: 20px;
  border-bottom: 3px double var(--ink);
  margin-bottom: 0;
}

.cal05__masthead-left {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--ink3);
  align-self: center;
}

.cal05__masthead-center {
  text-align: center;
  padding: 0 32px;
}

.cal05__title {
  font-family: 'Playfair Display', serif;
  font-size: 80px;
  font-weight: 900;
  font-style: italic;
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.cal05__title span { color: var(--rust); }

.cal05__subtitle {
  font-size: 11px;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--ink3);
  margin-top: 8px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 6px 0;
}

.cal05__masthead-right {
  text-align: right;
  align-self: center;
}

.cal05__nav {
  display: flex;
  gap: 4px;
  justify-content: flex-end;
}

.cal05__nav-btn {
  width: 36px; height: 36px;
  border: 1.5px solid var(--ink);
  background: transparent;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: 16px;
  color: var(--ink);
  transition: all 0.15s;
  font-family: 'Barlow', sans-serif;
  user-select: none;
}
.cal05__nav-btn:hover { background: var(--ink); color: var(--cream); }

/* ── Column headers ── */
.cal05__col-headers {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--grid-gap);
  background: var(--border);
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  margin-top: 24px;
}

.cal05__col-header {
  background: var(--warm);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.cal05__col-day-abbr {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink3);
}

.cal05__col-day-num {
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1;
}

/* Highlight the current day column header */
.cal05__col-header--today .cal05__col-day-abbr { color: var(--rust); }
.cal05__col-header--today .cal05__col-day-num  { color: var(--rust); }

.cal05__col-header--weekend .cal05__col-day-abbr { color: var(--sage); opacity: 0.7; }

/* ── Main CSS Grid: The Star of the Show ── */
/*
  Core technique:
  - display: grid
  - grid-template-columns: repeat(7, 1fr) — 7 equal columns for 7 days
  - gap creates the gutters; background on the container "fakes" visible grid lines
  - Each cell: grid-column auto-places days correctly
  - named grid areas optionally mark special rows
*/
.cal05__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: minmax(100px, auto);
  gap: var(--grid-gap);
  background: var(--border);  /* gap shows through as grid lines */
  border: 1px solid var(--border);
  border-top: none;
}

/* ── Individual date cells ── */
.cal05__cell {
  background: var(--cream);
  padding: 10px 12px 8px;
  cursor: pointer;
  transition: background 0.15s;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
  min-height: 100px;
}

.cal05__cell:hover { background: rgba(212,168,83,0.08); }

.cal05__cell--other  { background: var(--warm); opacity: 0.5; pointer-events: none; }
.cal05__cell--weekend { background: #f5f0e6; }

.cal05__cell--today {
  background: #fff9f0;
}
.cal05__cell--today::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--rust);
}

.cal05__cell--selected {
  background: rgba(201,79,44,0.06);
  outline: 2px solid var(--rust);
  outline-offset: -2px;
  z-index: 2;
}

/* Cell number */
.cal05__cell-num {
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
}

.cal05__cell--today  .cal05__cell-num { color: var(--rust); }
.cal05__cell--other  .cal05__cell-num { color: var(--ink3); }
.cal05__cell--weekend:not(.cal05__cell--today) .cal05__cell-num { color: var(--sage); }

/* Week number annotation */
.cal05__week-tag {
  position: absolute;
  top: 10px; right: 10px;
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--ink3);
  opacity: 0.5;
}

/* Events inside cells */
.cal05__cell-events {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: auto;
}

.cal05__event {
  font-size: 10px;
  font-weight: 500;
  padding: 3px 6px;
  border-left: 3px solid transparent;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: rgba(26,26,46,0.04);
}
.cal05__event--rust   { border-left-color: var(--rust); color: var(--rust); background: rgba(201,79,44,0.06); }
.cal05__event--sage   { border-left-color: var(--sage); color: var(--sage); background: rgba(74,124,111,0.08); }
.cal05__event--sand   { border-left-color: var(--sand); color: #8b6914; background: rgba(212,168,83,0.1); }
.cal05__event--ink    { border-left-color: var(--ink);  color: var(--ink2); }

/* ── Grid annotation panel below ── */
.cal05__annotation {
  margin-top: 20px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
}

.cal05__ann-cell {
  background: var(--cream);
  padding: 16px 20px;
}

.cal05__ann-label {
  font-size: 9px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--ink3);
  margin-bottom: 6px;
}

.cal05__ann-value {
  font-family: 'Playfair Display', serif;
  font-size: 28px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1;
}

.cal05__ann-sub {
  font-size: 11px;
  color: var(--ink3);
  margin-top: 4px;
}

/* ── Legend ── */
.cal05__legend {
  margin-top: 16px;
  display: flex;
  gap: 20px;
  align-items: center;
  padding: 12px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.cal05__legend-label {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink3);
  margin-right: 4px;
}

.cal05__legend-item {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--ink2);
}

.cal05__legend-swatch {
  width: 16px; height: 3px; border-radius: 1px;
}

@media (max-width: 640px) {
  .cal05__title { font-size: 48px; }
  .cal05__masthead { grid-template-columns: 1fr; gap: 12px; }
  .cal05__masthead-right { text-align: left; }
  .cal05__grid { grid-auto-rows: minmax(70px, auto); }
  .cal05__cell { padding: 6px 8px; }
  .cal05__cell-num { font-size: 15px; }
  .cal05__event { display: none; }
  .cal05__annotation { grid-template-columns: 1fr 1fr; }
  .cal05__ann-cell:last-child { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cal05 * { animation: none !important; transition: none !important; }
}
```

**JS:**
```js
document.querySelectorAll('#cal05Grid .cal05__cell:not(.cal05__cell--other)').forEach(cell => {
  cell.addEventListener('click', function() {
    document.querySelectorAll('#cal05Grid .cal05__cell').forEach(c => c.classList.remove('cal05__cell--selected'));
    this.classList.add('cal05__cell--selected');
  });
});
```

### 06. Responsive Mobile-Friendly Calendar UI

**Type:** CSS + JS
**Description:** An organic green calendar built to scale across three breakpoints. Layout collapses from two columns to one, then compacts cell sizes and touch targets for small screens. Fraunces italic month, pulsing today ring, color pips and a desktop side panel with a mini activity chart.

**HTML:**
```html
<div class="cal06">
  <div class="cal06__layout">

    <!-- Main calendar -->
    <div class="cal06__main">

      <div class="cal06__top">
        <div class="cal06__month-block">
          <div class="cal06__month-label">June</div>
          <div class="cal06__year-label">2026 · Q2</div>
        </div>
        <div class="cal06__top-right">
          <div class="cal06__nav-row">
            <div class="cal06__nav-btn">‹</div>
            <div class="cal06__nav-btn">›</div>
          </div>
          <div class="cal06__today-pill">Today</div>
        </div>
      </div>

      <div class="cal06__dow">
        <div class="cal06__dow-lbl">S</div>
        <div class="cal06__dow-lbl">M</div>
        <div class="cal06__dow-lbl">T</div>
        <div class="cal06__dow-lbl">W</div>
        <div class="cal06__dow-lbl">T</div>
        <div class="cal06__dow-lbl">F</div>
        <div class="cal06__dow-lbl">S</div>
      </div>

      <div class="cal06__grid" id="cal06Grid">
        <!-- May overflow -->
        <div class="cal06__cell other weekend"><div class="cal06__cell-n">25</div></div>
        <div class="cal06__cell other"><div class="cal06__cell-n">26</div></div>
        <div class="cal06__cell other"><div class="cal06__cell-n">27</div></div>
        <div class="cal06__cell other"><div class="cal06__cell-n">28</div></div>
        <div class="cal06__cell other"><div class="cal06__cell-n">29</div></div>
        <div class="cal06__cell other"><div class="cal06__cell-n">30</div></div>
        <div class="cal06__cell other weekend"><div class="cal06__cell-n">31</div></div>
        <!-- June 1-7 -->
        <div class="cal06__cell weekend"><div class="cal06__cell-n">1</div></div>
        <div class="cal06__cell"><div class="cal06__cell-n">2</div><div class="cal06__pips"><span class="cal06__pip cal06__pip--g"></span></div></div>
        <div class="cal06__cell"><div class="cal06__cell-n">3</div></div>
        <div class="cal06__cell"><div class="cal06__cell-n">4</div><div class="cal06__pips"><span class="cal06__pip cal06__pip--y"></span></div></div>
        <div class="cal06__cell"><div class="cal06__cell-n">5</div></div>
        <div class="cal06__cell"><div class="cal06__cell-n">6</div><div class="cal06__pips"><span class="cal06__pip cal06__pip--p"></span></div></div>
        <div class="cal06__cell weekend"><div class="cal06__cell-n">7</div></div>
        <!-- June 8-14: today=8 -->
        <div class="cal06__cell today weekend"><div class="cal06__cell-n">8</div><div class="cal06__pips"><span class="cal06__pip cal06__pip--g"></span></div></div>
        <div class="cal06__cell"><div class="cal06__cell-n">9</div><div class="cal06__pips"><span class="cal06__pip cal06__pip--g"></span><span class="cal06__pip cal06__pip--l"></span></div></div>
        <div class="cal06__cell"><div class="cal06__cell-n">10</div></div>
        <div class="cal06__cell"><div class="cal06__cell-n">11</div><div class="cal06__pips"><span class="cal06__pip cal06__pip--p"></span></div></div>
        <div class="cal06__cell"><div class="cal06__cell-n">12</div></div>
        <div class="cal06__cell"><div class="cal06__cell-n">13</div><div class="cal06__pips"><span class="cal06__pip cal06__pip--y"></span></div></div>
        <div class="cal06__cell weekend"><div class="cal06__cell-n">14</div></div>
        <!-- June 15-21 -->
        <div class="cal06__cell weekend"><div class="cal06__cell-n">15</div></div>
        <div class="cal06__cell"><div class="cal06__cell-n">16</div></div>
        <div class="cal06__cell"><div class="cal06__cell-n">17</div><div class="cal06__pips"><span class="cal06__pip cal06__pip--g"></span><span class="cal06__pip cal06__pip--g"></span></div></div>
        <div class="cal06__cell"><div class="cal06__cell-n">18</div></div>
        <div class="cal06__cell"><div class="cal06__cell-n">19</div></div>
        <div class="cal06__cell"><div class="cal06__cell-n">20</div><div class="cal06__pips"><span class="cal06__pip cal06__pip--l"></span></div></div>
        <div class="cal06__cell weekend"><div class="cal06__cell-n">21</div><div class="cal06__pips"><span class="cal06__pip cal06__pip--y"></span></div></div>
        <!-- June 22-28 -->
        <div class="cal06__cell weekend"><div class="cal06__cell-n">22</div></div>
        <div class="cal06__cell"><div class="cal06__cell-n">23</div></div>
        <div class="cal06__cell"><div class="cal06__cell-n">24</div><div class="cal06__pips"><span class="cal06__pip cal06__pip--p"></span></div></div>
        <div class="cal06__cell"><div class="cal06__cell-n">25</div></div>
        <div class="cal06__cell"><div class="cal06__cell-n">26</div></div>
        <div class="cal06__cell"><div class="cal06__cell-n">27</div><div class="cal06__pips"><span class="cal06__pip cal06__pip--g"></span></div></div>
        <div class="cal06__cell weekend"><div class="cal06__cell-n">28</div></div>
        <!-- June 29-30 + July -->
        <div class="cal06__cell weekend"><div class="cal06__cell-n">29</div></div>
        <div class="cal06__cell"><div class="cal06__cell-n">30</div></div>
        <div class="cal06__cell other"><div class="cal06__cell-n">1</div></div>
        <div class="cal06__cell other"><div class="cal06__cell-n">2</div></div>
        <div class="cal06__cell other"><div class="cal06__cell-n">3</div></div>
        <div class="cal06__cell other"><div class="cal06__cell-n">4</div></div>
        <div class="cal06__cell other weekend"><div class="cal06__cell-n">5</div></div>
      </div>

    </div>

    <!-- Side panel -->
    <div class="cal06__side">

      <div class="cal06__side-card">
        <div class="cal06__side-label">Selected Day</div>
        <div class="cal06__date-big" id="cal06DateBig">08</div>
        <div class="cal06__date-info">Sunday, June 2026</div>
      </div>

      <div class="cal06__side-card">
        <div class="cal06__side-label">Upcoming Events</div>
        <div class="cal06__ev">
          <div class="cal06__ev-dot" style="background:var(--green)"></div>
          <div class="cal06__ev-body">
            <div class="cal06__ev-name">Sprint Planning</div>
            <div class="cal06__ev-time">Mon Jun 9 · 10:00 AM</div>
          </div>
        </div>
        <div class="cal06__ev">
          <div class="cal06__ev-dot" style="background:var(--peach)"></div>
          <div class="cal06__ev-body">
            <div class="cal06__ev-name">Product Launch</div>
            <div class="cal06__ev-time">Wed Jun 11 · 9:00 AM</div>
          </div>
        </div>
        <div class="cal06__ev">
          <div class="cal06__ev-dot" style="background:var(--yellow)"></div>
          <div class="cal06__ev-body">
            <div class="cal06__ev-name">Demo Day</div>
            <div class="cal06__ev-time">Fri Jun 13 · 2:00 PM</div>
          </div>
        </div>
      </div>

      <div class="cal06__side-card">
        <div class="cal06__side-label">Week Activity</div>
        <div class="cal06__week-bars">
          <div class="cal06__bar-col"><div class="cal06__bar" style="height:20px;opacity:.3"></div><div class="cal06__bar-lbl">S</div></div>
          <div class="cal06__bar-col"><div class="cal06__bar" style="height:32px"></div><div class="cal06__bar-lbl">M</div></div>
          <div class="cal06__bar-col"><div class="cal06__bar" style="height:18px;opacity:.5"></div><div class="cal06__bar-lbl">T</div></div>
          <div class="cal06__bar-col"><div class="cal06__bar" style="height:36px"></div><div class="cal06__bar-lbl">W</div></div>
          <div class="cal06__bar-col"><div class="cal06__bar" style="height:28px;opacity:.8"></div><div class="cal06__bar-lbl">T</div></div>
          <div class="cal06__bar-col"><div class="cal06__bar" style="height:22px;opacity:.6"></div><div class="cal06__bar-lbl">F</div></div>
          <div class="cal06__bar-col"><div class="cal06__bar" style="height:10px;opacity:.25"></div><div class="cal06__bar-lbl">S</div></div>
        </div>
      </div>

    </div>

  </div>
</div>
```

**CSS:**
```css
.cal06, .cal06 *, .cal06 *::before, .cal06 *::after {
  box-sizing: border-box; margin: 0; padding: 0;
}
.cal06 ::selection { background: #5b7e5f; color: #fff; }

.cal06 {
  --bg:      #eef3ec;
  --surface: #f7faf5;
  --card:    #ffffff;
  --ink:     #1e2b1f;
  --ink2:    #4a5e4c;
  --muted:   #8fa892;
  --green:   #5b7e5f;
  --green2:  #3d6641;
  --peach:   #e07a5f;
  --yellow:  #f2b94b;
  --lavender:#9b89c4;
  --today-bg:#e8f0e9;
  --sel-bg:  #5b7e5f;

  font-family: 'Plus Jakarta Sans', sans-serif;
  background: var(--bg);
  background-image:
    radial-gradient(circle at 20% 80%, rgba(91,126,95,0.08) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(242,185,75,0.06) 0%, transparent 50%);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  color: var(--ink);
}

@keyframes cal06-in {
  from { opacity: 0; transform: scale(0.97) translateY(12px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes cal06-pulse-ring {
  0%   { box-shadow: 0 0 0 0 rgba(91,126,95,0.4); }
  70%  { box-shadow: 0 0 0 8px rgba(91,126,95,0); }
  100% { box-shadow: 0 0 0 0 rgba(91,126,95,0); }
}
@keyframes cal06-slide {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ── Outermost: full desktop layout ── */
.cal06__layout {
  display: grid;
  grid-template-columns: 1fr 310px;
  gap: 20px;
  max-width: 860px;
  width: 100%;
  animation: cal06-in 0.5s cubic-bezier(0.22,1,0.36,1) both;
}

/* ── Main Card ── */
.cal06__main {
  background: var(--card);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(30,43,31,0.08), 0 1px 4px rgba(30,43,31,0.06);
}

/* ── Top strip: month + year ── */
.cal06__top {
  background: var(--green);
  padding: 24px 28px 20px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}
.cal06__top::before {
  content: '';
  position: absolute;
  width: 200px; height: 200px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  top: -60px; right: -60px;
}
.cal06__top::after {
  content: '';
  position: absolute;
  width: 100px; height: 100px;
  border-radius: 50%;
  background: rgba(255,255,255,0.05);
  bottom: -30px; left: 40px;
}

.cal06__month-block { position: relative; z-index: 1; }

.cal06__month-label {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 44px;
  font-weight: 700;
  color: #fff;
  line-height: 1;
}

.cal06__year-label {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,0.65);
  letter-spacing: 0.12em;
  margin-top: 4px;
}

.cal06__top-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  position: relative; z-index: 1;
}

.cal06__nav-row {
  display: flex;
  gap: 6px;
}

.cal06__nav-btn {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.25);
  color: #fff;
  font-size: 16px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 0.2s;
  user-select: none;
}
.cal06__nav-btn:hover { background: rgba(255,255,255,0.28); }

.cal06__today-pill {
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.3);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 20px;
  cursor: pointer;
}

/* ── DOW row ── */
.cal06__dow {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  padding: 12px 16px 6px;
  background: var(--surface);
}
.cal06__dow-lbl {
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 6px 0;
}
.cal06__dow-lbl:first-child,
.cal06__dow-lbl:last-child { color: var(--green); opacity: 0.7; }

/* ── Grid ── */
.cal06__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  padding: 6px 16px 20px;
  gap: 4px;
}

.cal06__cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 2px 4px;
  border-radius: 14px;
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
  min-height: 52px;
  position: relative;
}
.cal06__cell:hover { background: var(--today-bg); transform: scale(1.04); }
.cal06__cell.other { opacity: 0.22; pointer-events: none; }

.cal06__cell-n {
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  transition: all 0.15s;
}
.cal06__cell.weekend .cal06__cell-n { color: var(--green); }

.cal06__cell.today .cal06__cell-n {
  background: var(--green);
  color: #fff;
  font-weight: 700;
  animation: cal06-pulse-ring 2.5s ease-in-out infinite;
}

.cal06__cell.selected .cal06__cell-n {
  background: var(--peach);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(224,122,95,0.45);
}

/* Event pips below number */
.cal06__pips {
  display: flex;
  gap: 3px;
  margin-top: 3px;
}
.cal06__pip {
  width: 5px; height: 5px;
  border-radius: 50%;
}
.cal06__pip--g { background: var(--green); }
.cal06__pip--p { background: var(--peach); }
.cal06__pip--y { background: var(--yellow); }
.cal06__pip--l { background: var(--lavender); }

/* ── Right panel (desktop only) ── */
.cal06__side {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.cal06__side-card {
  background: var(--card);
  border-radius: 20px;
  padding: 22px;
  box-shadow: 0 4px 20px rgba(30,43,31,0.07);
}

.cal06__side-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 16px;
}

/* Mini date display */
.cal06__date-big {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 64px;
  font-weight: 700;
  color: var(--green2);
  line-height: 1;
}
.cal06__date-info {
  font-size: 13px;
  color: var(--muted);
  margin-top: 4px;
}

/* Event items */
.cal06__ev {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(30,43,31,0.06);
  animation: cal06-slide 0.3s ease both;
}
.cal06__ev:last-child { border-bottom: none; padding-bottom: 0; }
.cal06__ev:nth-child(2) { animation-delay: 0.06s; }
.cal06__ev:nth-child(3) { animation-delay: 0.12s; }

.cal06__ev-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.cal06__ev-body { flex: 1; min-width: 0; }
.cal06__ev-name {
  font-size: 13px; font-weight: 600; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cal06__ev-time { font-size: 11px; color: var(--muted); margin-top: 2px; }

/* Week summary mini bars */
.cal06__week-bars {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  align-items: flex-end;
  height: 40px;
}
.cal06__bar-col { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.cal06__bar {
  width: 100%;
  background: var(--green);
  border-radius: 3px 3px 0 0;
  opacity: 0.7;
  transition: opacity 0.2s;
}
.cal06__bar:hover { opacity: 1; }
.cal06__bar-lbl { font-size: 8px; color: var(--muted); font-weight: 600; letter-spacing: 0.05em; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   RESPONSIVE: tablet → collapse to 1 col
   RESPONSIVE: mobile → compact top strip,
   smaller cells, hide side panel under grid
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 780px) {
  .cal06__layout {
    grid-template-columns: 1fr;
    max-width: 500px;
  }
  .cal06__side { display: none; }
}

@media (max-width: 480px) {
  .cal06__top { padding: 18px 20px 16px; }
  .cal06__month-label { font-size: 34px; }
  .cal06__dow { padding: 8px 10px 4px; }
  .cal06__grid { padding: 4px 10px 14px; gap: 2px; }
  .cal06__cell { min-height: 42px; border-radius: 10px; }
  .cal06__cell-n { width: 28px; height: 28px; font-size: 13px; }
  .cal06__today-pill { display: none; }
}

@media (max-width: 360px) {
  .cal06__month-label { font-size: 28px; }
  .cal06__cell-n { width: 24px; height: 24px; font-size: 11px; }
  .cal06__dow-lbl { font-size: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .cal06 * { animation: none !important; transition: none !important; }
}
```

**JS:**
```js
document.querySelectorAll('#cal06Grid .cal06__cell:not(.other)').forEach(cell => {
  cell.addEventListener('click', function() {
    document.querySelectorAll('#cal06Grid .cal06__cell').forEach(c => c.classList.remove('selected'));
    this.classList.add('selected');
    const n = this.querySelector('.cal06__cell-n').textContent;
    const el = document.getElementById('cal06DateBig');
    if (el) el.textContent = n.padStart(2,'0');
  });
});
```

### 07. Glassmorphism Calendar Card

**Type:** CSS + JS
**Description:** The definitive glassmorphism reference on an aurora-borealis scene with four animated gradient blobs and a starfield. The card uses backdrop-filter blur/saturate with a layered inner shine; today glows, the card floats, and frosted event pills demonstrate layered glass depth.

**HTML:**
```html
<div class="cal07">

  <!-- Aurora background -->
  <div class="cal07__aurora">
    <div class="cal07__aurora-blob"></div>
    <div class="cal07__aurora-blob"></div>
    <div class="cal07__aurora-blob"></div>
    <div class="cal07__aurora-blob"></div>
  </div>
  <div class="cal07__stars"></div>

  <div class="cal07__scene">

    <!-- Glass calendar card -->
    <div class="cal07__card">

      <div class="cal07__hd">
        <div class="cal07__hd-left">
          <div class="cal07__card-month">June</div>
          <div class="cal07__card-year-row">
            <div class="cal07__card-year">2026</div>
            <div class="cal07__card-badge">Q2</div>
          </div>
        </div>
        <div class="cal07__hd-right">
          <div class="cal07__nav">
            <div class="cal07__nav-btn">‹</div>
            <div class="cal07__nav-btn">›</div>
          </div>
        </div>
      </div>

      <div class="cal07__dow">
        <div class="cal07__dw">S</div><div class="cal07__dw">M</div>
        <div class="cal07__dw">T</div><div class="cal07__dw">W</div>
        <div class="cal07__dw">T</div><div class="cal07__dw">F</div>
        <div class="cal07__dw">S</div>
      </div>

      <div class="cal07__dates" id="cal07Dates">
        <!-- May -->
        <div class="cal07__date dim weekend"><div class="cal07__date-n">25</div></div>
        <div class="cal07__date dim"><div class="cal07__date-n">26</div></div>
        <div class="cal07__date dim"><div class="cal07__date-n">27</div></div>
        <div class="cal07__date dim"><div class="cal07__date-n">28</div></div>
        <div class="cal07__date dim"><div class="cal07__date-n">29</div></div>
        <div class="cal07__date dim"><div class="cal07__date-n">30</div></div>
        <div class="cal07__date dim weekend"><div class="cal07__date-n">31</div></div>
        <!-- June 1–7 -->
        <div class="cal07__date weekend"><div class="cal07__date-n">1</div></div>
        <div class="cal07__date"><div class="cal07__date-n">2</div><div class="cal07__date-pip cal07__date-pip--t"></div></div>
        <div class="cal07__date"><div class="cal07__date-n">3</div></div>
        <div class="cal07__date"><div class="cal07__date-n">4</div><div class="cal07__date-pip cal07__date-pip--a"></div></div>
        <div class="cal07__date"><div class="cal07__date-n">5</div></div>
        <div class="cal07__date"><div class="cal07__date-n">6</div></div>
        <div class="cal07__date weekend"><div class="cal07__date-n">7</div><div class="cal07__date-pip cal07__date-pip--p"></div></div>
        <!-- June 8–14 -->
        <div class="cal07__date today weekend"><div class="cal07__date-n">8</div></div>
        <div class="cal07__date"><div class="cal07__date-n">9</div><div class="cal07__date-pip cal07__date-pip--t"></div></div>
        <div class="cal07__date"><div class="cal07__date-n">10</div></div>
        <div class="cal07__date"><div class="cal07__date-n">11</div><div class="cal07__date-pip cal07__date-pip--p"></div></div>
        <div class="cal07__date"><div class="cal07__date-n">12</div></div>
        <div class="cal07__date"><div class="cal07__date-n">13</div><div class="cal07__date-pip cal07__date-pip--a"></div></div>
        <div class="cal07__date weekend"><div class="cal07__date-n">14</div></div>
        <!-- June 15–21 -->
        <div class="cal07__date weekend"><div class="cal07__date-n">15</div></div>
        <div class="cal07__date"><div class="cal07__date-n">16</div></div>
        <div class="cal07__date"><div class="cal07__date-n">17</div><div class="cal07__date-pip cal07__date-pip--t"></div></div>
        <div class="cal07__date"><div class="cal07__date-n">18</div></div>
        <div class="cal07__date"><div class="cal07__date-n">19</div></div>
        <div class="cal07__date"><div class="cal07__date-n">20</div><div class="cal07__date-pip cal07__date-pip--p"></div></div>
        <div class="cal07__date weekend"><div class="cal07__date-n">21</div></div>
        <!-- June 22–28 -->
        <div class="cal07__date weekend"><div class="cal07__date-n">22</div></div>
        <div class="cal07__date"><div class="cal07__date-n">23</div><div class="cal07__date-pip cal07__date-pip--a"></div></div>
        <div class="cal07__date"><div class="cal07__date-n">24</div></div>
        <div class="cal07__date"><div class="cal07__date-n">25</div><div class="cal07__date-pip cal07__date-pip--t"></div></div>
        <div class="cal07__date"><div class="cal07__date-n">26</div></div>
        <div class="cal07__date"><div class="cal07__date-n">27</div></div>
        <div class="cal07__date weekend"><div class="cal07__date-n">28</div></div>
        <!-- June 29–30 + July -->
        <div class="cal07__date weekend"><div class="cal07__date-n">29</div></div>
        <div class="cal07__date"><div class="cal07__date-n">30</div></div>
        <div class="cal07__date dim"><div class="cal07__date-n">1</div></div>
        <div class="cal07__date dim"><div class="cal07__date-n">2</div></div>
        <div class="cal07__date dim"><div class="cal07__date-n">3</div></div>
        <div class="cal07__date dim"><div class="cal07__date-n">4</div></div>
        <div class="cal07__date dim weekend"><div class="cal07__date-n">5</div></div>
      </div>

      <div class="cal07__strip">
        <div class="cal07__strip-stat">
          <div class="cal07__strip-val">12</div>
          <div class="cal07__strip-lbl">Events</div>
        </div>
        <div class="cal07__strip-stat">
          <div class="cal07__strip-val">4</div>
          <div class="cal07__strip-lbl">Holidays</div>
        </div>
        <div class="cal07__strip-stat">
          <div class="cal07__strip-val">7</div>
          <div class="cal07__strip-lbl">Left</div>
        </div>
      </div>

    </div>

    <!-- Event glass pills below -->
    <div class="cal07__events-row">
      <div class="cal07__ev-glass">
        <div class="cal07__ev-icon" style="background:rgba(0,201,177,0.15)">🚀</div>
        <div class="cal07__ev-body">
          <div class="cal07__ev-name">Product Launch</div>
          <div class="cal07__ev-time">Wed Jun 11 · 9:00 AM</div>
        </div>
        <div class="cal07__ev-pill" style="background:rgba(0,201,177,0.15);color:var(--teal);border:1px solid rgba(0,201,177,0.3)">Today+3</div>
      </div>
      <div class="cal07__ev-glass">
        <div class="cal07__ev-icon" style="background:rgba(147,51,234,0.15)">📊</div>
        <div class="cal07__ev-body">
          <div class="cal07__ev-name">Board Meeting</div>
          <div class="cal07__ev-time">Thu Jun 25 · 2:00 PM</div>
        </div>
        <div class="cal07__ev-pill" style="background:rgba(147,51,234,0.15);color:var(--purple);border:1px solid rgba(147,51,234,0.3)">In 17d</div>
      </div>
    </div>

  </div>
</div>
```

**CSS:**
```css
.cal07, .cal07 *, .cal07 *::before, .cal07 *::after {
  box-sizing: border-box; margin: 0; padding: 0;
}
.cal07 ::selection { background: rgba(255,255,255,0.3); color: #fff; }

.cal07 {
  --teal:     #00c9b1;
  --blue:     #3b82f6;
  --purple:   #9333ea;
  --pink:     #f472b6;
  --amber:    #fbbf24;
  --white:    #ffffff;
  --text:     rgba(255,255,255,0.92);
  --muted:    rgba(255,255,255,0.45);
  --dim:      rgba(255,255,255,0.18);
  --glass:    rgba(255,255,255,0.09);
  --glass2:   rgba(255,255,255,0.14);
  --border:   rgba(255,255,255,0.18);
  --border2:  rgba(255,255,255,0.28);

  font-family: 'Manrope', sans-serif;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  position: relative;
  overflow: hidden;

  /* Aurora background */
  background: #060b14;
}

/* ── Aurora mesh background ── */
.cal07__aurora {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.cal07__aurora-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.55;
  animation: cal07-aurora 14s ease-in-out infinite alternate;
}
.cal07__aurora-blob:nth-child(1) {
  width: 700px; height: 500px;
  background: radial-gradient(ellipse, #00c9b1 0%, transparent 70%);
  top: -150px; left: -200px;
  animation-duration: 16s;
}
.cal07__aurora-blob:nth-child(2) {
  width: 600px; height: 500px;
  background: radial-gradient(ellipse, #9333ea 0%, transparent 70%);
  top: -100px; right: -150px;
  animation-duration: 12s;
  animation-direction: alternate-reverse;
}
.cal07__aurora-blob:nth-child(3) {
  width: 500px; height: 400px;
  background: radial-gradient(ellipse, #3b82f6 0%, transparent 70%);
  bottom: -100px; left: 10%;
  animation-duration: 18s;
}
.cal07__aurora-blob:nth-child(4) {
  width: 300px; height: 300px;
  background: radial-gradient(ellipse, #f472b6 0%, transparent 70%);
  bottom: 20%; right: 10%;
  animation-duration: 10s;
  animation-direction: alternate-reverse;
}

/* Stars overlay */
.cal07__stars {
  position: fixed;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 80% 10%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1px 1px at 50% 60%, rgba(255,255,255,0.3), transparent),
    radial-gradient(1px 1px at 10% 80%, rgba(255,255,255,0.35), transparent),
    radial-gradient(1px 1px at 70% 85%, rgba(255,255,255,0.25), transparent),
    radial-gradient(1px 1px at 35% 45%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1px 1px at 90% 50%, rgba(255,255,255,0.3), transparent),
    radial-gradient(1px 1px at 15% 15%, rgba(255,255,255,0.45), transparent),
    radial-gradient(1px 1px at 60% 25%, rgba(255,255,255,0.2), transparent),
    radial-gradient(1px 1px at 45% 75%, rgba(255,255,255,0.35), transparent);
  z-index: 0;
  pointer-events: none;
}

@keyframes cal07-aurora {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(40px, 30px) scale(1.12); }
}
@keyframes cal07-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}
@keyframes cal07-glow {
  0%, 100% { box-shadow: 0 0 20px rgba(0,201,177,0.3), 0 0 60px rgba(0,201,177,0.15); }
  50%       { box-shadow: 0 0 35px rgba(0,201,177,0.5), 0 0 80px rgba(0,201,177,0.25); }
}
@keyframes cal07-shimmer {
  0%   { opacity: 0.5; }
  50%  { opacity: 1; }
  100% { opacity: 0.5; }
}
@keyframes cal07-enter {
  from { opacity: 0; transform: scale(0.94) translateY(20px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* ── Main glass card ── */
.cal07__card {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 420px;
  background: var(--glass);
  backdrop-filter: blur(32px) saturate(180%) brightness(1.1);
  -webkit-backdrop-filter: blur(32px) saturate(180%) brightness(1.1);
  border: 1px solid var(--border2);
  border-radius: 32px;
  padding: 32px;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.05) inset,
    0 40px 80px rgba(0,0,0,0.5),
    0 8px 32px rgba(0,0,0,0.3);
  animation: cal07-enter 0.7s cubic-bezier(0.22,1,0.36,1) both, cal07-float 6s ease-in-out 1s infinite;
}

/* Inner shine edge */
.cal07__card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 32px;
  background: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, transparent 50%, rgba(255,255,255,0.04) 100%);
  pointer-events: none;
}

/* ── Card header ── */
.cal07__hd {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 28px;
}

.cal07__hd-left {}

.cal07__card-month {
  font-family: 'Gilda Display', serif;
  font-size: 42px;
  color: var(--white);
  line-height: 1;
  text-shadow: 0 0 30px rgba(0,201,177,0.4);
}

.cal07__card-year-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

.cal07__card-year {
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0.12em;
}

.cal07__card-badge {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 20px;
  background: rgba(0,201,177,0.18);
  border: 1px solid rgba(0,201,177,0.35);
  color: var(--teal);
  animation: cal07-shimmer 3s ease-in-out infinite;
}

.cal07__hd-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.cal07__nav {
  display: flex;
  gap: 6px;
}

.cal07__nav-btn {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--glass2);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--text);
  font-size: 16px;
  transition: all 0.2s;
  user-select: none;
  backdrop-filter: blur(10px);
}
.cal07__nav-btn:hover {
  background: rgba(0,201,177,0.2);
  border-color: var(--teal);
  color: var(--teal);
}

/* ── DOW row ── */
.cal07__dow {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: 6px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--dim);
}
.cal07__dw {
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 4px 0;
}
.cal07__dw:first-child,
.cal07__dw:last-child { color: rgba(0,201,177,0.7); }

/* ── Date grid ── */
.cal07__dates {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}

.cal07__date {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.18s;
  position: relative;
  gap: 3px;
}
.cal07__date:hover { background: var(--glass2); }
.cal07__date.dim { opacity: 0.22; pointer-events: none; }

.cal07__date-n {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  line-height: 1;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  transition: all 0.18s;
}
.cal07__date.weekend .cal07__date-n { color: rgba(0,201,177,0.85); }

/* Today */
.cal07__date.today .cal07__date-n {
  background: linear-gradient(135deg, var(--teal), var(--blue));
  color: #fff;
  font-weight: 700;
  box-shadow: 0 4px 16px rgba(0,201,177,0.5);
  animation: cal07-glow 2.5s ease-in-out infinite;
}

/* Selected */
.cal07__date.selected .cal07__date-n {
  background: linear-gradient(135deg, var(--purple), var(--pink));
  color: #fff;
  font-weight: 700;
  box-shadow: 0 4px 16px rgba(147,51,234,0.45);
  transform: scale(1.1);
}

/* Pip */
.cal07__date-pip {
  width: 4px; height: 4px;
  border-radius: 50%;
}
.cal07__date-pip--t { background: var(--teal); box-shadow: 0 0 6px var(--teal); }
.cal07__date-pip--p { background: var(--purple); }
.cal07__date-pip--a { background: var(--amber); }

/* ── Bottom summary strip ── */
.cal07__strip {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--dim);
  display: flex;
  gap: 12px;
}

.cal07__strip-stat {
  flex: 1;
  background: var(--glass2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px 14px;
  backdrop-filter: blur(10px);
}

.cal07__strip-val {
  font-family: 'Gilda Display', serif;
  font-size: 28px;
  color: var(--white);
  line-height: 1;
}

.cal07__strip-lbl {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 3px;
}

/* Color the values */
.cal07__strip-stat:nth-child(1) .cal07__strip-val { color: var(--teal); text-shadow: 0 0 16px rgba(0,201,177,0.5); }
.cal07__strip-stat:nth-child(2) .cal07__strip-val { color: var(--amber); }
.cal07__strip-stat:nth-child(3) .cal07__strip-val { color: var(--pink); }

/* ── Event preview below card ── */
.cal07__events-row {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 420px;
  margin-top: 16px;
}

.cal07__ev-glass {
  background: var(--glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  animation: cal07-enter 0.5s ease both;
}
.cal07__ev-glass:nth-child(2) { animation-delay: 0.1s; }
.cal07__ev-glass:nth-child(3) { animation-delay: 0.2s; }

.cal07__ev-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.cal07__ev-body { flex: 1; min-width: 0; }
.cal07__ev-name { font-size: 13px; font-weight: 600; color: var(--text); }
.cal07__ev-time { font-size: 11px; color: var(--muted); margin-top: 2px; }

.cal07__ev-pill {
  font-size: 10px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
  flex-shrink: 0;
}

/* Scene wrapper */
.cal07__scene {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  position: relative;
  z-index: 10;
}

@media (max-width: 480px) {
  .cal07__card { padding: 22px; border-radius: 24px; }
  .cal07__card-month { font-size: 32px; }
  .cal07__strip { gap: 8px; }
  .cal07__strip-stat { padding: 10px; }
  .cal07__strip-val { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .cal07 * { animation: none !important; transition: none !important; }
  .cal07__aurora-blob { opacity: 0.3; }
}
```

**JS:**
```js
document.querySelectorAll('#cal07Dates .cal07__date:not(.dim)').forEach(cell => {
  cell.addEventListener('click', function() {
    document.querySelectorAll('#cal07Dates .cal07__date').forEach(c => c.classList.remove('selected'));
    this.classList.add('selected');
  });
});
```

### 08. Dark Mode Calendar Design

**Type:** CSS + JS
**Description:** Luxury obsidian calendar whose entire theme lives in CSS variables. A single data-theme toggle swaps all 15 variables between dark and light with no extra selectors. Instrument Serif month, gold accents, today ring pulse, and a sidebar event list plus sparkline.

**HTML:**
```html
<div class="cal08" id="cal08Root">

  <div class="cal08__shell">

    <!-- Main calendar -->
    <div class="cal08__main">
      <div class="cal08__header">
        <div class="cal08__header-left">
          <div class="cal08__month-big">J<em>une</em></div>
          <div class="cal08__header-meta">
            <span class="cal08__meta-item">2026</span>
            <div class="cal08__meta-dot"></div>
            <span class="cal08__meta-item">Q2</span>
            <div class="cal08__meta-dot"></div>
            <span class="cal08__meta-item">Week 23</span>
          </div>
        </div>
        <div class="cal08__header-right">
          <div class="cal08__nav">
            <div class="cal08__nav-btn">←</div>
            <div class="cal08__nav-btn">→</div>
          </div>
          <!-- Theme toggle — pure CSS vars swap -->
          <div class="cal08__theme-toggle" id="cal08Toggle">
            <span class="cal08__toggle-icon" id="cal08Icon">☽</span>
            <span id="cal08ThemeLabel">Dark</span>
          </div>
        </div>
      </div>

      <div class="cal08__dow">
        <div class="cal08__dw">Sun</div><div class="cal08__dw">Mon</div>
        <div class="cal08__dw">Tue</div><div class="cal08__dw">Wed</div>
        <div class="cal08__dw">Thu</div><div class="cal08__dw">Fri</div>
        <div class="cal08__dw">Sat</div>
      </div>

      <div class="cal08__grid" id="cal08Grid">
        <!-- May overflow -->
        <div class="cal08__cell other weekend"><div class="cal08__cell-n">25</div></div>
        <div class="cal08__cell other"><div class="cal08__cell-n">26</div></div>
        <div class="cal08__cell other"><div class="cal08__cell-n">27</div></div>
        <div class="cal08__cell other"><div class="cal08__cell-n">28</div></div>
        <div class="cal08__cell other"><div class="cal08__cell-n">29</div></div>
        <div class="cal08__cell other"><div class="cal08__cell-n">30</div></div>
        <div class="cal08__cell other weekend"><div class="cal08__cell-n">31</div></div>
        <!-- June 1-7 -->
        <div class="cal08__cell weekend"><div class="cal08__cell-n">1</div></div>
        <div class="cal08__cell"><div class="cal08__cell-n">2</div><div class="cal08__cell-evs"><div class="cal08__ev-block cal08__ev-block--gold">Sprint</div></div></div>
        <div class="cal08__cell"><div class="cal08__cell-n">3</div></div>
        <div class="cal08__cell"><div class="cal08__cell-n">4</div><div class="cal08__cell-evs"><div class="cal08__ev-block cal08__ev-block--emerald">Holiday</div></div></div>
        <div class="cal08__cell"><div class="cal08__cell-n">5</div></div>
        <div class="cal08__cell"><div class="cal08__cell-n">6</div></div>
        <div class="cal08__cell weekend"><div class="cal08__cell-n">7</div></div>
        <!-- June 8-14: today=8 -->
        <div class="cal08__cell today weekend"><div class="cal08__cell-n">8</div></div>
        <div class="cal08__cell"><div class="cal08__cell-n">9</div><div class="cal08__cell-evs"><div class="cal08__ev-block cal08__ev-block--sky">Planning</div></div></div>
        <div class="cal08__cell"><div class="cal08__cell-n">10</div></div>
        <div class="cal08__cell"><div class="cal08__cell-n">11</div><div class="cal08__cell-evs"><div class="cal08__ev-block cal08__ev-block--gold">Launch</div><div class="cal08__ev-block cal08__ev-block--red">Deadline</div></div></div>
        <div class="cal08__cell"><div class="cal08__cell-n">12</div></div>
        <div class="cal08__cell"><div class="cal08__cell-n">13</div><div class="cal08__cell-evs"><div class="cal08__ev-block cal08__ev-block--emerald">Review</div></div></div>
        <div class="cal08__cell weekend"><div class="cal08__cell-n">14</div></div>
        <!-- June 15-21 -->
        <div class="cal08__cell weekend"><div class="cal08__cell-n">15</div></div>
        <div class="cal08__cell"><div class="cal08__cell-n">16</div></div>
        <div class="cal08__cell"><div class="cal08__cell-n">17</div><div class="cal08__cell-evs"><div class="cal08__ev-block cal08__ev-block--sky">Demo</div></div></div>
        <div class="cal08__cell"><div class="cal08__cell-n">18</div></div>
        <div class="cal08__cell"><div class="cal08__cell-n">19</div></div>
        <div class="cal08__cell"><div class="cal08__cell-n">20</div><div class="cal08__cell-evs"><div class="cal08__ev-block cal08__ev-block--gold">1:1</div></div></div>
        <div class="cal08__cell weekend"><div class="cal08__cell-n">21</div></div>
        <!-- June 22-28 -->
        <div class="cal08__cell weekend"><div class="cal08__cell-n">22</div></div>
        <div class="cal08__cell"><div class="cal08__cell-n">23</div></div>
        <div class="cal08__cell"><div class="cal08__cell-n">24</div><div class="cal08__cell-evs"><div class="cal08__ev-block cal08__ev-block--red">Board</div></div></div>
        <div class="cal08__cell"><div class="cal08__cell-n">25</div></div>
        <div class="cal08__cell"><div class="cal08__cell-n">26</div></div>
        <div class="cal08__cell"><div class="cal08__cell-n">27</div><div class="cal08__cell-evs"><div class="cal08__ev-block cal08__ev-block--emerald">Retro</div></div></div>
        <div class="cal08__cell weekend"><div class="cal08__cell-n">28</div></div>
        <!-- June 29-30 + July -->
        <div class="cal08__cell weekend"><div class="cal08__cell-n">29</div></div>
        <div class="cal08__cell"><div class="cal08__cell-n">30</div></div>
        <div class="cal08__cell other"><div class="cal08__cell-n">1</div></div>
        <div class="cal08__cell other"><div class="cal08__cell-n">2</div></div>
        <div class="cal08__cell other"><div class="cal08__cell-n">3</div></div>
        <div class="cal08__cell other"><div class="cal08__cell-n">4</div></div>
        <div class="cal08__cell other weekend"><div class="cal08__cell-n">5</div></div>
      </div>
    </div>

    <!-- Sidebar -->
    <div class="cal08__side">

      <div class="cal08__side-card">
        <div class="cal08__side-lbl">Today</div>
        <div class="cal08__big-date">08</div>
        <div class="cal08__big-sub">Sunday · June 2026</div>
      </div>

      <div class="cal08__side-card">
        <div class="cal08__side-lbl">This Week</div>
        <div class="cal08__ev-item">
          <div class="cal08__ev-bar" style="background:var(--sky)"></div>
          <div class="cal08__ev-info"><div class="cal08__ev-name">Sprint Planning</div><div class="cal08__ev-time">Mon · 10:00 AM</div></div>
        </div>
        <div class="cal08__ev-item">
          <div class="cal08__ev-bar" style="background:var(--gold)"></div>
          <div class="cal08__ev-info"><div class="cal08__ev-name">Product Launch</div><div class="cal08__ev-time">Wed · 9:00 AM</div></div>
        </div>
        <div class="cal08__ev-item">
          <div class="cal08__ev-bar" style="background:var(--red)"></div>
          <div class="cal08__ev-info"><div class="cal08__ev-name">Hard Deadline</div><div class="cal08__ev-time">Wed · 5:00 PM</div></div>
        </div>
        <div class="cal08__ev-item">
          <div class="cal08__ev-bar" style="background:var(--emerald)"></div>
          <div class="cal08__ev-info"><div class="cal08__ev-name">Design Review</div><div class="cal08__ev-time">Fri · 2:00 PM</div></div>
        </div>
      </div>

      <div class="cal08__side-card">
        <div class="cal08__side-lbl">Event Load</div>
        <div class="cal08__bars">
          <div class="cal08__bar-w"><div class="cal08__bar-fill" style="height:18px"></div><div class="cal08__bar-lbl">W1</div></div>
          <div class="cal08__bar-w"><div class="cal08__bar-fill" style="height:28px"></div><div class="cal08__bar-lbl">W2</div></div>
          <div class="cal08__bar-w"><div class="cal08__bar-fill" style="height:38px"></div><div class="cal08__bar-lbl">W3</div></div>
          <div class="cal08__bar-w"><div class="cal08__bar-fill" style="height:22px"></div><div class="cal08__bar-lbl">W4</div></div>
          <div class="cal08__bar-w"><div class="cal08__bar-fill" style="height:14px"></div><div class="cal08__bar-lbl">W5</div></div>
        </div>
      </div>

    </div>

  </div>
</div>
```

**CSS:**
```css
.cal08, .cal08 *, .cal08 *::before, .cal08 *::after {
  box-sizing: border-box; margin: 0; padding: 0;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   CSS VARIABLES — the entire theme lives here.
   Toggle between dark / light by swapping values.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.cal08 {
  /* Dark theme (default) */
  --bg:       #0d0d0d;
  --surface:  #161616;
  --card:     #1c1c1c;
  --card2:    #222222;
  --border:   rgba(255,255,255,0.08);
  --border2:  rgba(255,255,255,0.13);
  --text:     #f0ece4;
  --text2:    #a09890;
  --text3:    #5a5550;
  --gold:     #c9a84c;
  --gold2:    #e8c87a;
  --red:      #e05252;
  --emerald:  #3d9970;
  --sky:      #5ab0d4;
  --shadow:   rgba(0,0,0,0.5);
  --today-ring: rgba(201,168,76,0.5);
  --sel-bg:   #c9a84c;
  --sel-text: #0d0d0d;
  --toggle-bg:#2a2a2a;
  --icon-sun: '☀';
  --icon-moon:'☽';
}

/* Light theme override — all via CSS vars, zero new selectors needed for the calendar */
.cal08[data-theme="light"] {
  --bg:       #f9f6f0;
  --surface:  #f2ede4;
  --card:     #ffffff;
  --card2:    #f7f4ee;
  --border:   rgba(0,0,0,0.08);
  --border2:  rgba(0,0,0,0.14);
  --text:     #1a1410;
  --text2:    #6b5f50;
  --text3:    #b0a090;
  --gold:     #b8892a;
  --gold2:    #d4a040;
  --shadow:   rgba(0,0,0,0.1);
  --today-ring: rgba(184,137,42,0.4);
  --sel-bg:   #b8892a;
  --sel-text: #fff;
  --toggle-bg:#e8e2d8;
}

.cal08 {
  font-family: 'Instrument Sans', sans-serif;
  background: var(--bg);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  color: var(--text);
  transition: background 0.4s ease, color 0.4s ease;
  position: relative;
}

/* Subtle noise overlay for dark mode texture */
.cal08::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}

@keyframes cal08-enter {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes cal08-today-ring {
  0%, 100% { box-shadow: 0 0 0 2px var(--today-ring), 0 0 16px var(--today-ring); }
  50%       { box-shadow: 0 0 0 4px var(--today-ring), 0 0 28px var(--today-ring); }
}
@keyframes cal08-bar-grow {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}
@keyframes cal08-theme-flip {
  0%   { transform: rotate(0deg) scale(1); }
  50%  { transform: rotate(180deg) scale(0.8); }
  100% { transform: rotate(360deg) scale(1); }
}

.cal08__shell {
  position: relative;
  z-index: 1;
  max-width: 860px;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 256px;
  gap: 16px;
  animation: cal08-enter 0.55s cubic-bezier(0.22,1,0.36,1) both;
}

/* ── Main card ── */
.cal08__main {
  background: var(--card);
  border: 1px solid var(--border2);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 24px 60px var(--shadow);
  transition: background 0.4s, border-color 0.4s, box-shadow 0.4s;
}

/* ── Header ── */
.cal08__header {
  padding: 28px 28px 20px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
  position: relative;
}

/* Gold accent top bar */
.cal08__header::before {
  content: '';
  position: absolute;
  top: 0; left: 28px; right: 28px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0.6;
}

.cal08__header-left {}

.cal08__month-big {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: 52px;
  line-height: 1;
  color: var(--text);
  letter-spacing: -0.01em;
  transition: color 0.4s;
}

.cal08__month-big em {
  font-style: normal;
  color: var(--gold);
}

.cal08__header-meta {
  margin-top: 5px;
  display: flex;
  gap: 12px;
  align-items: center;
}

.cal08__meta-item {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text3);
  transition: color 0.4s;
}

.cal08__meta-dot {
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--text3);
  opacity: 0.4;
}

.cal08__header-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.cal08__nav {
  display: flex;
  border: 1px solid var(--border2);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 0.4s;
}

.cal08__nav-btn {
  padding: 8px 14px;
  background: transparent;
  border: none;
  color: var(--text2);
  font-size: 15px;
  cursor: pointer;
  transition: all 0.15s;
  user-select: none;
  font-family: 'Instrument Sans', sans-serif;
  border-right: 1px solid var(--border2);
}
.cal08__nav-btn:last-child { border-right: none; }
.cal08__nav-btn:hover { background: var(--card2); color: var(--gold); }

/* Theme toggle button */
.cal08__theme-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--toggle-bg);
  border: 1px solid var(--border2);
  border-radius: 24px;
  padding: 6px 14px 6px 10px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: var(--text2);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: all 0.25s;
  user-select: none;
}
.cal08__theme-toggle:hover { border-color: var(--gold); color: var(--gold); }

.cal08__toggle-icon {
  font-size: 16px;
  transition: transform 0.4s;
  line-height: 1;
}
.cal08__theme-toggle:active .cal08__toggle-icon {
  animation: cal08-theme-flip 0.4s ease;
}

/* ── DOW row ── */
.cal08__dow {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  padding: 14px 20px 0;
}
.cal08__dw {
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text3);
  padding-bottom: 10px;
  transition: color 0.4s;
}
.cal08__dw:first-child,
.cal08__dw:last-child { color: var(--gold); opacity: 0.7; }

/* ── Date grid ── */
.cal08__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  padding: 4px 20px 24px;
  gap: 3px;
}

.cal08__cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 5px 0;
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.15s;
  min-height: 60px;
  position: relative;
  gap: 3px;
}
.cal08__cell:hover { background: var(--card2); }
.cal08__cell.other { opacity: 0.2; pointer-events: none; }

.cal08__cell-n {
  font-family: 'Instrument Serif', serif;
  font-size: 18px;
  color: var(--text);
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  line-height: 1;
  transition: all 0.15s, color 0.4s;
}

.cal08__cell.weekend .cal08__cell-n { color: var(--gold); opacity: 0.8; }
.cal08__cell.other .cal08__cell-n { color: var(--text3); }

.cal08__cell.today .cal08__cell-n {
  background: var(--gold);
  color: var(--sel-text);
  font-weight: 700;
  animation: cal08-today-ring 2.5s ease-in-out infinite;
  font-style: italic;
}

.cal08__cell.selected:not(.today) .cal08__cell-n {
  background: var(--card2);
  border: 2px solid var(--gold);
  color: var(--gold);
}

/* Event blocks inside cells */
.cal08__cell-evs {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  padding: 0 3px;
}

.cal08__ev-block {
  font-size: 8.5px;
  font-weight: 600;
  padding: 2px 4px;
  border-radius: 3px;
  text-align: left;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: uppercase;
}

.cal08__ev-block--gold    { background: rgba(201,168,76,0.15); color: var(--gold); }
.cal08__ev-block--red     { background: rgba(224,82,82,0.15);  color: var(--red);  }
.cal08__ev-block--emerald { background: rgba(61,153,112,0.15); color: var(--emerald); }
.cal08__ev-block--sky     { background: rgba(90,176,212,0.15); color: var(--sky); }

/* ── Right sidebar ── */
.cal08__side {
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: all 0.4s;
}

.cal08__side-card {
  background: var(--card);
  border: 1px solid var(--border2);
  border-radius: 20px;
  padding: 20px;
  box-shadow: 0 8px 24px var(--shadow);
  transition: background 0.4s, border-color 0.4s, box-shadow 0.4s;
}

.cal08__side-lbl {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text3);
  margin-bottom: 14px;
  transition: color 0.4s;
  display: flex;
  align-items: center;
  gap: 8px;
}
.cal08__side-lbl::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* Big date */
.cal08__big-date {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: 72px;
  line-height: 1;
  color: var(--gold);
  text-shadow: 0 0 30px var(--today-ring);
  letter-spacing: -0.02em;
  transition: color 0.4s, text-shadow 0.4s;
}
.cal08__big-sub {
  font-size: 12px;
  color: var(--text3);
  margin-top: 6px;
  letter-spacing: 0.08em;
  transition: color 0.4s;
}

/* Event list */
.cal08__ev-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  transition: border-color 0.4s;
}
.cal08__ev-item:last-child { border-bottom: none; padding-bottom: 0; }

.cal08__ev-bar {
  width: 2px;
  min-height: 30px;
  border-radius: 1px;
  flex-shrink: 0;
  margin-top: 2px;
}

.cal08__ev-info { flex: 1; min-width: 0; }
.cal08__ev-name { font-size: 12px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color 0.4s; }
.cal08__ev-time { font-size: 10px; color: var(--text3); margin-top: 2px; transition: color 0.4s; }

/* Sparkline / bar chart */
.cal08__bars {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 40px;
}
.cal08__bar-w {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  height: 100%;
  justify-content: flex-end;
}
.cal08__bar-fill {
  width: 100%;
  border-radius: 3px 3px 0 0;
  background: var(--gold);
  opacity: 0.6;
  transform-origin: bottom;
  animation: cal08-bar-grow 0.7s cubic-bezier(0.22,1,0.36,1) both;
}
.cal08__bar-fill:nth-child(1) { animation-delay: 0.05s; }
.cal08__bar-lbl { font-size: 8px; color: var(--text3); font-weight: 600; letter-spacing: 0.05em; transition: color 0.4s; }

/* Color bar overrides */
.cal08__bar-w:nth-child(4) .cal08__bar-fill { background: var(--gold2); opacity: 1; }
.cal08__bar-w:nth-child(2) .cal08__bar-fill,
.cal08__bar-w:nth-child(6) .cal08__bar-fill { background: var(--emerald); }

@media (max-width: 700px) {
  .cal08__shell { grid-template-columns: 1fr; }
  .cal08__side  { display: none; }
  .cal08__month-big { font-size: 38px; }
}
@media (prefers-reduced-motion: reduce) {
  .cal08 * { animation: none !important; transition: color 0.1s, background 0.1s !important; }
}
```

**JS:**
```js
// Date cell selection
document.querySelectorAll('#cal08Grid .cal08__cell:not(.other)').forEach(cell => {
  cell.addEventListener('click', function() {
    document.querySelectorAll('#cal08Grid .cal08__cell').forEach(c => c.classList.remove('selected'));
    this.classList.add('selected');
  });
});

// Theme toggle — just flips data-theme, CSS vars do ALL the work
const root   = document.getElementById('cal08Root');
const toggle = document.getElementById('cal08Toggle');
const icon   = document.getElementById('cal08Icon');
const label  = document.getElementById('cal08ThemeLabel');

toggle.addEventListener('click', function() {
  const isDark = root.getAttribute('data-theme') === 'dark';
  root.setAttribute('data-theme', isDark ? 'light' : 'dark');
  icon.textContent  = isDark ? '☀' : '☽';
  label.textContent = isDark ? 'Light' : 'Dark';
});
```

### 09. Event Planner & Schedule Layout

**Type:** CSS + JS
**Description:** A dense event planner where each date cell anchors layered events via position:relative: an absolute count badge, a flex stack of color-coded event blocks with ::before accent bars, and a +N more overflow. Sidebar shows a time-blocked agenda and a counted legend.

**HTML:**
```html
<div class="cal09">
  <div class="cal09__shell">

    <!-- Toolbar -->
    <div class="cal09__toolbar">
      <div class="cal09__toolbar-left">
        <div class="cal09__title">June 2026</div>
        <div class="cal09__title-badge">Event Planner</div>
      </div>
      <div class="cal09__toolbar-right">
        <div class="cal09__view-btn active">Month</div>
        <div class="cal09__view-btn">Week</div>
        <div class="cal09__view-btn">Agenda</div>
        <div class="cal09__nav-group">
          <div class="cal09__nav-b">←</div>
          <div class="cal09__nav-b">→</div>
        </div>
      </div>
    </div>

    <!-- Body -->
    <div class="cal09__body">

      <!-- Calendar panel -->
      <div class="cal09__cal-panel">

        <div class="cal09__dow">
          <div class="cal09__dw wkend">Sun</div>
          <div class="cal09__dw">Mon</div>
          <div class="cal09__dw">Tue</div>
          <div class="cal09__dw">Wed</div>
          <div class="cal09__dw">Thu</div>
          <div class="cal09__dw">Fri</div>
          <div class="cal09__dw wkend">Sat</div>
        </div>

        <div class="cal09__grid" id="cal09Grid">

          <!-- Row 1: May overflow -->
          <div class="cal09__cell other wkend"><div class="cal09__cell-top"><div class="cal09__cell-n">25</div></div></div>
          <div class="cal09__cell other"><div class="cal09__cell-top"><div class="cal09__cell-n">26</div></div></div>
          <div class="cal09__cell other"><div class="cal09__cell-top"><div class="cal09__cell-n">27</div></div></div>
          <div class="cal09__cell other"><div class="cal09__cell-top"><div class="cal09__cell-n">28</div></div></div>
          <div class="cal09__cell other"><div class="cal09__cell-top"><div class="cal09__cell-n">29</div></div></div>
          <div class="cal09__cell other"><div class="cal09__cell-top"><div class="cal09__cell-n">30</div></div></div>
          <div class="cal09__cell other wkend"><div class="cal09__cell-top"><div class="cal09__cell-n">31</div></div></div>

          <!-- Row 2: Jun 1-7 -->
          <div class="cal09__cell wkend"><div class="cal09__cell-top"><div class="cal09__cell-n">1</div></div></div>
          <div class="cal09__cell">
            <div class="cal09__cell-top"><div class="cal09__cell-n">2</div></div>
            <div class="cal09__cell-badge cal09__cell-badge--g">1</div>
            <div class="cal09__cell-events">
              <div class="cal09__ev cal09__ev--green"><div class="cal09__ev-dot" style="background:var(--green)"></div>Design Sprint</div>
            </div>
          </div>
          <div class="cal09__cell"><div class="cal09__cell-top"><div class="cal09__cell-n">3</div></div></div>
          <div class="cal09__cell">
            <div class="cal09__cell-top"><div class="cal09__cell-n">4</div></div>
            <div class="cal09__cell-badge cal09__cell-badge--a">2</div>
            <div class="cal09__cell-events">
              <div class="cal09__ev cal09__ev--amber"><div class="cal09__ev-dot" style="background:var(--amber)"></div>Holiday</div>
              <div class="cal09__ev cal09__ev--sky"><div class="cal09__ev-dot" style="background:var(--sky)"></div>BBQ</div>
            </div>
          </div>
          <div class="cal09__cell"><div class="cal09__cell-top"><div class="cal09__cell-n">5</div></div></div>
          <div class="cal09__cell">
            <div class="cal09__cell-top"><div class="cal09__cell-n">6</div></div>
            <div class="cal09__cell-badge cal09__cell-badge--g">1</div>
            <div class="cal09__cell-events">
              <div class="cal09__ev cal09__ev--lime"><div class="cal09__ev-dot" style="background:var(--lime)"></div>Deadline</div>
            </div>
          </div>
          <div class="cal09__cell wkend"><div class="cal09__cell-top"><div class="cal09__cell-n">7</div></div></div>

          <!-- Row 3: Jun 8-14 (today = 8) -->
          <div class="cal09__cell today wkend">
            <div class="cal09__cell-top"><div class="cal09__cell-n">8</div></div>
            <div class="cal09__cell-badge cal09__cell-badge--g">1</div>
            <div class="cal09__cell-events">
              <div class="cal09__ev cal09__ev--green"><div class="cal09__ev-dot" style="background:var(--green)"></div>Today</div>
            </div>
          </div>
          <div class="cal09__cell">
            <div class="cal09__cell-top"><div class="cal09__cell-n">9</div></div>
            <div class="cal09__cell-badge cal09__cell-badge--a">2</div>
            <div class="cal09__cell-events">
              <div class="cal09__ev cal09__ev--sky"><div class="cal09__ev-dot" style="background:var(--sky)"></div>Sprint Plan</div>
              <div class="cal09__ev cal09__ev--violet"><div class="cal09__ev-dot" style="background:var(--violet)"></div>1:1 w/ Sam</div>
            </div>
          </div>
          <div class="cal09__cell"><div class="cal09__cell-top"><div class="cal09__cell-n">10</div></div></div>
          <div class="cal09__cell">
            <div class="cal09__cell-top"><div class="cal09__cell-n">11</div></div>
            <div class="cal09__cell-badge cal09__cell-badge--r">3</div>
            <div class="cal09__cell-events">
              <div class="cal09__ev cal09__ev--rose"><div class="cal09__ev-dot" style="background:var(--rose)"></div>🚀 Launch</div>
              <div class="cal09__ev cal09__ev--amber"><div class="cal09__ev-dot" style="background:var(--amber)"></div>Deadline</div>
              <div class="cal09__more">+1 more</div>
            </div>
          </div>
          <div class="cal09__cell"><div class="cal09__cell-top"><div class="cal09__cell-n">12</div></div></div>
          <div class="cal09__cell">
            <div class="cal09__cell-top"><div class="cal09__cell-n">13</div></div>
            <div class="cal09__cell-badge cal09__cell-badge--g">2</div>
            <div class="cal09__cell-events">
              <div class="cal09__ev cal09__ev--lime"><div class="cal09__ev-dot" style="background:var(--lime)"></div>Review</div>
              <div class="cal09__ev cal09__ev--sand"><div class="cal09__ev-dot" style="background:var(--sand)"></div>Lunch</div>
            </div>
          </div>
          <div class="cal09__cell wkend"><div class="cal09__cell-top"><div class="cal09__cell-n">14</div></div></div>

          <!-- Row 4: Jun 15-21 -->
          <div class="cal09__cell wkend"><div class="cal09__cell-top"><div class="cal09__cell-n">15</div></div></div>
          <div class="cal09__cell"><div class="cal09__cell-top"><div class="cal09__cell-n">16</div></div></div>
          <div class="cal09__cell">
            <div class="cal09__cell-top"><div class="cal09__cell-n">17</div></div>
            <div class="cal09__cell-badge cal09__cell-badge--a">3</div>
            <div class="cal09__cell-events">
              <div class="cal09__ev cal09__ev--amber"><div class="cal09__ev-dot" style="background:var(--amber)"></div>Demo Day</div>
              <div class="cal09__ev cal09__ev--violet"><div class="cal09__ev-dot" style="background:var(--violet)"></div>Q2 Report</div>
              <div class="cal09__more">+1 more</div>
            </div>
          </div>
          <div class="cal09__cell"><div class="cal09__cell-top"><div class="cal09__cell-n">18</div></div></div>
          <div class="cal09__cell"><div class="cal09__cell-top"><div class="cal09__cell-n">19</div></div></div>
          <div class="cal09__cell">
            <div class="cal09__cell-top"><div class="cal09__cell-n">20</div></div>
            <div class="cal09__cell-badge cal09__cell-badge--g">1</div>
            <div class="cal09__cell-events">
              <div class="cal09__ev cal09__ev--green"><div class="cal09__ev-dot" style="background:var(--green)"></div>Board Mtg</div>
            </div>
          </div>
          <div class="cal09__cell wkend">
            <div class="cal09__cell-top"><div class="cal09__cell-n">21</div></div>
            <div class="cal09__cell-badge cal09__cell-badge--a">1</div>
            <div class="cal09__cell-events">
              <div class="cal09__ev cal09__ev--sand"><div class="cal09__ev-dot" style="background:var(--sand)"></div>Summer!</div>
            </div>
          </div>

          <!-- Row 5: Jun 22-28 -->
          <div class="cal09__cell wkend"><div class="cal09__cell-top"><div class="cal09__cell-n">22</div></div></div>
          <div class="cal09__cell"><div class="cal09__cell-top"><div class="cal09__cell-n">23</div></div></div>
          <div class="cal09__cell"><div class="cal09__cell-top"><div class="cal09__cell-n">24</div></div></div>
          <div class="cal09__cell">
            <div class="cal09__cell-top"><div class="cal09__cell-n">25</div></div>
            <div class="cal09__cell-badge cal09__cell-badge--g">2</div>
            <div class="cal09__cell-events">
              <div class="cal09__ev cal09__ev--sky"><div class="cal09__ev-dot" style="background:var(--sky)"></div>Planning</div>
              <div class="cal09__ev cal09__ev--lime"><div class="cal09__ev-dot" style="background:var(--lime)"></div>Team Dinner</div>
            </div>
          </div>
          <div class="cal09__cell"><div class="cal09__cell-top"><div class="cal09__cell-n">26</div></div></div>
          <div class="cal09__cell">
            <div class="cal09__cell-top"><div class="cal09__cell-n">27</div></div>
            <div class="cal09__cell-badge cal09__cell-badge--g">1</div>
            <div class="cal09__cell-events">
              <div class="cal09__ev cal09__ev--green"><div class="cal09__ev-dot" style="background:var(--green)"></div>Retro</div>
            </div>
          </div>
          <div class="cal09__cell wkend"><div class="cal09__cell-top"><div class="cal09__cell-n">28</div></div></div>

          <!-- Row 6: Jun 29-30 + July overflow -->
          <div class="cal09__cell wkend"><div class="cal09__cell-top"><div class="cal09__cell-n">29</div></div></div>
          <div class="cal09__cell"><div class="cal09__cell-top"><div class="cal09__cell-n">30</div></div></div>
          <div class="cal09__cell other"><div class="cal09__cell-top"><div class="cal09__cell-n">1</div></div></div>
          <div class="cal09__cell other"><div class="cal09__cell-top"><div class="cal09__cell-n">2</div></div></div>
          <div class="cal09__cell other"><div class="cal09__cell-top"><div class="cal09__cell-n">3</div></div></div>
          <div class="cal09__cell other"><div class="cal09__cell-top"><div class="cal09__cell-n">4</div></div></div>
          <div class="cal09__cell other wkend"><div class="cal09__cell-top"><div class="cal09__cell-n">5</div></div></div>

        </div>
      </div>

      <!-- Sidebar -->
      <div class="cal09__sidebar">

        <div class="cal09__sb-card">
          <div class="cal09__sb-lbl">Today</div>
          <div class="cal09__today-date" id="cal09BigDate">08</div>
          <div class="cal09__today-info">Sunday, June 2026</div>
        </div>

        <div class="cal09__sb-card">
          <div class="cal09__sb-lbl">Today's Agenda</div>
          <div class="cal09__agenda-item">
            <div class="cal09__ag-time">09:00</div>
            <div class="cal09__ag-body">
              <div class="cal09__ag-name">Sprint Planning</div>
              <div class="cal09__ag-meta">Zoom · 1h</div>
              <div class="cal09__ag-tag" style="background:rgba(90,180,212,0.12);color:var(--sky)">● Team</div>
            </div>
          </div>
          <div class="cal09__agenda-item">
            <div class="cal09__ag-time">14:00</div>
            <div class="cal09__ag-body">
              <div class="cal09__ag-name">Product Launch</div>
              <div class="cal09__ag-meta">All-hands · 2h</div>
              <div class="cal09__ag-tag" style="background:rgba(224,88,112,0.12);color:var(--rose)">● Critical</div>
            </div>
          </div>
          <div class="cal09__agenda-item">
            <div class="cal09__ag-time">17:30</div>
            <div class="cal09__ag-body">
              <div class="cal09__ag-name">Design Review</div>
              <div class="cal09__ag-meta">Figma share · 45m</div>
              <div class="cal09__ag-tag" style="background:rgba(76,175,125,0.12);color:var(--green)">● Design</div>
            </div>
          </div>
        </div>

        <div class="cal09__sb-card">
          <div class="cal09__sb-lbl">Event Legend</div>
          <div class="cal09__legend">
            <div class="cal09__legend-row"><div class="cal09__legend-swatch" style="background:var(--green)"></div>Team & sprints<span class="cal09__legend-count">5</span></div>
            <div class="cal09__legend-row"><div class="cal09__legend-swatch" style="background:var(--rose)"></div>Critical / launches<span class="cal09__legend-count">3</span></div>
            <div class="cal09__legend-row"><div class="cal09__legend-swatch" style="background:var(--amber)"></div>Deadlines<span class="cal09__legend-count">4</span></div>
            <div class="cal09__legend-row"><div class="cal09__legend-swatch" style="background:var(--sky)"></div>Meetings<span class="cal09__legend-count">6</span></div>
            <div class="cal09__legend-row"><div class="cal09__legend-swatch" style="background:var(--violet)"></div>1:1s<span class="cal09__legend-count">2</span></div>
            <div class="cal09__legend-row"><div class="cal09__legend-swatch" style="background:var(--sand)"></div>Social<span class="cal09__legend-count">3</span></div>
          </div>
        </div>

      </div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.cal09, .cal09 *, .cal09 *::before, .cal09 *::after {
  box-sizing: border-box; margin: 0; padding: 0;
}
.cal09 ::selection { background: #2d4a3e; color: #fff; }

.cal09 {
  --bg:      #1a1f1c;
  --surface: #222820;
  --card:    #262d24;
  --card2:   #2d3529;
  --border:  rgba(255,255,255,0.07);
  --border2: rgba(255,255,255,0.12);
  --text:    #e8ede4;
  --text2:   #8fa888;
  --text3:   #4a574a;
  --green:   #4caf7d;
  --lime:    #97c95c;
  --amber:   #e8a23a;
  --rose:    #e05870;
  --sky:     #5ab4d4;
  --violet:  #a07dd4;
  --sand:    #d4b87a;

  font-family: 'Space Grotesk', sans-serif;
  background: var(--bg);
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 36px 20px;
  color: var(--text);
  position: relative;
  overflow-x: hidden;
}

/* Subtle grid pattern background */
.cal09::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(76,175,125,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(76,175,125,0.03) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
  z-index: 0;
}

@keyframes cal09-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes cal09-badge-pop {
  from { transform: scale(0.7); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
@keyframes cal09-event-slide {
  from { transform: translateX(-6px); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}
@keyframes cal09-today-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(76,175,125,0.5); }
  50%       { box-shadow: 0 0 0 5px rgba(76,175,125,0); }
}

.cal09__shell {
  position: relative;
  z-index: 1;
  max-width: 980px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
  animation: cal09-in 0.5s ease both;
}

/* ── Top toolbar ── */
.cal09__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px;
}

.cal09__toolbar-left {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.cal09__title {
  font-family: 'Libre Baskerville', serif;
  font-style: italic;
  font-size: 36px;
  color: var(--text);
  line-height: 1;
}

.cal09__title-badge {
  font-family: 'Space Grotesk', sans-serif;
  font-style: normal;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green);
  background: rgba(76,175,125,0.12);
  border: 1px solid rgba(76,175,125,0.25);
  padding: 4px 10px;
  border-radius: 20px;
  animation: cal09-badge-pop 0.4s cubic-bezier(0.34,1.56,0.64,1) 0.3s both;
}

.cal09__toolbar-right {
  display: flex;
  gap: 8px;
  align-items: center;
}

.cal09__view-btn {
  padding: 7px 16px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: all 0.15s;
  user-select: none;
  background: var(--card);
  border: 1px solid var(--border2);
  color: var(--text2);
}
.cal09__view-btn:hover { border-color: var(--green); color: var(--green); }
.cal09__view-btn.active { background: rgba(76,175,125,0.15); border-color: var(--green); color: var(--green); }

.cal09__nav-group {
  display: flex;
  border: 1px solid var(--border2);
  border-radius: 8px;
  overflow: hidden;
}
.cal09__nav-b {
  padding: 7px 12px;
  font-size: 15px;
  cursor: pointer;
  color: var(--text2);
  border-right: 1px solid var(--border2);
  transition: all 0.15s;
  user-select: none;
}
.cal09__nav-b:last-child { border-right: none; }
.cal09__nav-b:hover { background: var(--card2); color: var(--green); }

/* ── Body: 2-col layout ── */
.cal09__body {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 14px;
}

/* ── Calendar grid panel ── */
.cal09__cal-panel {
  background: var(--card);
  border: 1px solid var(--border2);
  border-radius: 20px;
  overflow: hidden;
}

/* DOW headers */
.cal09__dow {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-bottom: 1px solid var(--border);
  padding: 0;
}
.cal09__dw {
  padding: 12px 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text3);
  text-align: center;
  border-right: 1px solid var(--border);
}
.cal09__dw:last-child { border-right: none; }
.cal09__dw.wkend { color: var(--green); opacity: 0.6; }

/* ── The Event Planner Grid — THE CORE TECHNIQUE ──
   Each cell uses:
   - display: grid / flex for inner layout
   - position: relative for absolute-positioned event blocks
   - Nested grids for multi-event day layouts
   - CSS absolute positioning for spanning events
   - z-index layers for overlapping badges
   ── */
.cal09__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: minmax(110px, auto);
}

.cal09__cell {
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 8px 6px 6px;
  position: relative; /* ← enables absolute event blocks */
  transition: background 0.15s;
  display: flex;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
}
.cal09__cell:nth-child(7n) { border-right: none; }
.cal09__cell:hover { background: var(--card2); }
.cal09__cell.other { opacity: 0.2; pointer-events: none; }

.cal09__cell-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.cal09__cell-n {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px;
  line-height: 1;
  font-family: 'Libre Baskerville', serif;
  transition: all 0.15s;
}
.cal09__cell.wkend .cal09__cell-n { color: var(--green); opacity: 0.8; }

/* Today */
.cal09__cell.today { background: rgba(76,175,125,0.06); border-color: rgba(76,175,125,0.2); }
.cal09__cell.today .cal09__cell-n {
  background: var(--green);
  color: #0d1a12;
  animation: cal09-today-pulse 2.5s ease-in-out infinite;
}

.cal09__cell.selected { background: rgba(76,175,125,0.08); }
.cal09__cell.selected .cal09__cell-n { background: var(--card2); border: 2px solid var(--green); color: var(--green); }

/* Event count badge — top right, absolutely positioned */
.cal09__cell-badge {
  position: absolute;
  top: 8px; right: 6px;
  min-width: 18px; height: 18px;
  border-radius: 9px;
  font-size: 9px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  padding: 0 5px;
  animation: cal09-badge-pop 0.3s cubic-bezier(0.34,1.56,0.64,1) both;
}
.cal09__cell-badge--g { background: rgba(76,175,125,0.25); color: var(--green); }
.cal09__cell-badge--a { background: rgba(232,162,58,0.25); color: var(--amber); }
.cal09__cell-badge--r { background: rgba(224,88,112,0.2);  color: var(--rose); }

/* ── Event blocks inside cells ──
   Technique 1: stacked flex column (normal flow)
   Technique 2: absolute positioned for "spanning" look
   Technique 3: color-coded left border + bg
   ── */
.cal09__cell-events {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 4px;
  flex: 1;
}

.cal09__ev {
  padding: 3px 6px 3px 8px;
  border-radius: 5px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
  animation: cal09-event-slide 0.3s ease both;
  cursor: default;
  display: flex;
  align-items: center;
  gap: 5px;
}

/* Left accent bar via ::before */
.cal09__ev::before {
  content: '';
  position: absolute;
  left: 0; top: 2px; bottom: 2px;
  width: 3px;
  border-radius: 2px;
}

/* Color variants */
.cal09__ev--green  { background: rgba(76,175,125,0.12); color: var(--green); }
.cal09__ev--green::before  { background: var(--green); }
.cal09__ev--amber  { background: rgba(232,162,58,0.12); color: var(--amber); }
.cal09__ev--amber::before  { background: var(--amber); }
.cal09__ev--rose   { background: rgba(224,88,112,0.12); color: var(--rose); }
.cal09__ev--rose::before   { background: var(--rose); }
.cal09__ev--sky    { background: rgba(90,180,212,0.12); color: var(--sky); }
.cal09__ev--sky::before    { background: var(--sky); }
.cal09__ev--violet { background: rgba(160,125,212,0.12); color: var(--violet); }
.cal09__ev--violet::before { background: var(--violet); }
.cal09__ev--lime   { background: rgba(151,201,92,0.12); color: var(--lime); }
.cal09__ev--lime::before   { background: var(--lime); }
.cal09__ev--sand   { background: rgba(212,184,122,0.12); color: var(--sand); }
.cal09__ev--sand::before   { background: var(--sand); }

/* Event dot icon */
.cal09__ev-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* "+N more" overflow badge — absolutely placed bottom */
.cal09__more {
  font-size: 9px;
  font-weight: 600;
  color: var(--text3);
  letter-spacing: 0.06em;
  padding: 2px 6px;
  text-align: right;
  cursor: pointer;
  margin-top: auto;
}
.cal09__more:hover { color: var(--green); }

/* ── Right sidebar ── */
.cal09__sidebar {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cal09__sb-card {
  background: var(--card);
  border: 1px solid var(--border2);
  border-radius: 16px;
  padding: 18px;
}

.cal09__sb-lbl {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text3);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.cal09__sb-lbl::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* Today summary */
.cal09__today-date {
  font-family: 'Libre Baskerville', serif;
  font-style: italic;
  font-size: 56px;
  color: var(--green);
  line-height: 1;
}
.cal09__today-info { font-size: 12px; color: var(--text3); margin-top: 4px; }

/* Agenda list — time-blocked */
.cal09__agenda-item {
  display: grid;
  grid-template-columns: 38px auto;
  gap: 10px;
  align-items: start;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  animation: cal09-event-slide 0.3s ease both;
}
.cal09__agenda-item:last-child { border-bottom: none; padding-bottom: 0; }
.cal09__agenda-item:nth-child(2) { animation-delay: 0.07s; }
.cal09__agenda-item:nth-child(3) { animation-delay: 0.14s; }
.cal09__agenda-item:nth-child(4) { animation-delay: 0.21s; }

.cal09__ag-time {
  font-size: 10px;
  color: var(--text3);
  font-weight: 600;
  letter-spacing: 0.04em;
  padding-top: 3px;
}

.cal09__ag-body {}

.cal09__ag-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cal09__ag-meta {
  font-size: 10px;
  color: var(--text3);
  margin-top: 2px;
}

.cal09__ag-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 9px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 10px;
  margin-top: 5px;
  letter-spacing: 0.04em;
}

/* Legend */
.cal09__legend {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cal09__legend-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--text2);
}
.cal09__legend-swatch {
  width: 12px; height: 4px;
  border-radius: 2px;
  flex-shrink: 0;
}
.cal09__legend-count {
  margin-left: auto;
  font-size: 10px;
  color: var(--text3);
  font-weight: 600;
}

@media (max-width: 780px) {
  .cal09__body { grid-template-columns: 1fr; }
  .cal09__sidebar { display: none; }
  .cal09__cell { min-height: 80px; }
}
@media (max-width: 480px) {
  .cal09__title { font-size: 26px; }
  .cal09__cell { padding: 5px 4px; min-height: 60px; }
  .cal09__cell-n { font-size: 12px; width: 22px; height: 22px; }
  .cal09__ev { font-size: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .cal09 * { animation: none !important; transition: none !important; }
}
```

**JS:**
```js
document.querySelectorAll('#cal09Grid .cal09__cell:not(.other)').forEach(cell => {
  cell.addEventListener('click', function() {
    document.querySelectorAll('#cal09Grid .cal09__cell').forEach(c => c.classList.remove('selected'));
    this.classList.add('selected');
    const n = this.querySelector('.cal09__cell-n');
    if (n) document.getElementById('cal09BigDate').textContent = n.textContent.padStart(2,'0');
  });
});
```

### 10. Neumorphic Calendar Widget

**Type:** CSS + JS
**Description:** Pure soft-UI on the canonical #e0e5ec base with the dual light/dark shadow recipe exposed as reusable variables. Buttons extrude and press to inset, today is permanently inset, the selected day is a raised button, and the footer is one large inset event well.

**HTML:**
```html
<div class="cal10">
  <div class="cal10__widget">

    <div class="cal10__head">
      <div class="cal10__month-wrap">
        <div class="cal10__month">June</div>
        <div class="cal10__year">2026</div>
      </div>
      <div class="cal10__nav">
        <div class="cal10__nav-btn">‹</div>
        <div class="cal10__nav-btn">›</div>
      </div>
    </div>

    <div class="cal10__dow">
      <div class="cal10__dw">S</div><div class="cal10__dw">M</div><div class="cal10__dw">T</div>
      <div class="cal10__dw">W</div><div class="cal10__dw">T</div><div class="cal10__dw">F</div><div class="cal10__dw">S</div>
    </div>

    <div class="cal10__grid" id="cal10Grid">
      <div class="cal10__cell other">25</div><div class="cal10__cell other">26</div><div class="cal10__cell other">27</div>
      <div class="cal10__cell other">28</div><div class="cal10__cell other">29</div><div class="cal10__cell other">30</div><div class="cal10__cell other">31</div>
      <div class="cal10__cell">1</div>
      <div class="cal10__cell">2<span class="cal10__dot cal10__dot--a"></span></div>
      <div class="cal10__cell">3</div>
      <div class="cal10__cell">4<span class="cal10__dot cal10__dot--g"></span></div>
      <div class="cal10__cell">5</div>
      <div class="cal10__cell">6</div>
      <div class="cal10__cell">7<span class="cal10__dot cal10__dot--r"></span></div>
      <div class="cal10__cell today selected">8</div>
      <div class="cal10__cell">9<span class="cal10__dot cal10__dot--a"></span></div>
      <div class="cal10__cell">10</div>
      <div class="cal10__cell">11<span class="cal10__dot cal10__dot--r"></span></div>
      <div class="cal10__cell">12</div>
      <div class="cal10__cell">13<span class="cal10__dot cal10__dot--g"></span></div>
      <div class="cal10__cell">14</div>
      <div class="cal10__cell">15</div>
      <div class="cal10__cell">16</div>
      <div class="cal10__cell">17<span class="cal10__dot cal10__dot--a"></span></div>
      <div class="cal10__cell">18</div>
      <div class="cal10__cell">19</div>
      <div class="cal10__cell">20<span class="cal10__dot cal10__dot--r"></span></div>
      <div class="cal10__cell">21</div>
      <div class="cal10__cell">22</div>
      <div class="cal10__cell">23<span class="cal10__dot cal10__dot--g"></span></div>
      <div class="cal10__cell">24</div>
      <div class="cal10__cell">25<span class="cal10__dot cal10__dot--a"></span></div>
      <div class="cal10__cell">26</div>
      <div class="cal10__cell">27</div>
      <div class="cal10__cell">28</div>
      <div class="cal10__cell">29</div>
      <div class="cal10__cell">30</div>
      <div class="cal10__cell other">1</div><div class="cal10__cell other">2</div><div class="cal10__cell other">3</div>
      <div class="cal10__cell other">4</div><div class="cal10__cell other">5</div>
    </div>

    <div class="cal10__footer">
      <div class="cal10__footer-label">Today · June 8</div>
      <div class="cal10__ev">
        <div class="cal10__ev-icon">📋</div>
        <div class="cal10__ev-body">
          <div class="cal10__ev-name">Sprint Planning</div>
          <div class="cal10__ev-time">10:00 AM</div>
        </div>
        <div class="cal10__ev-pill cal10__ev-pill--a">1h</div>
      </div>
      <div class="cal10__ev">
        <div class="cal10__ev-icon">🚀</div>
        <div class="cal10__ev-body">
          <div class="cal10__ev-name">Product Launch</div>
          <div class="cal10__ev-time">2:00 PM</div>
        </div>
        <div class="cal10__ev-pill cal10__ev-pill--r">Now</div>
      </div>
      <div class="cal10__ev">
        <div class="cal10__ev-icon">☕</div>
        <div class="cal10__ev-body">
          <div class="cal10__ev-name">Team Coffee</div>
          <div class="cal10__ev-time">4:30 PM</div>
        </div>
        <div class="cal10__ev-pill cal10__ev-pill--g">30m</div>
      </div>
    </div>

    <div class="cal10__toggles">
      <div class="cal10__toggle active">Month</div>
      <div class="cal10__toggle">Week</div>
      <div class="cal10__toggle">Day</div>
    </div>

  </div>
</div>
```

**CSS:**
```css
.cal10, .cal10 *, .cal10 *::before, .cal10 *::after {
  box-sizing: border-box; margin: 0; padding: 0;
}
.cal10 ::selection { background: #6d5dfc; color: #fff; }

.cal10 {
  /* The neumorphic base — everything matches this exact bg */
  --bg:       #e0e5ec;
  --light:    #ffffff;
  --dark:     #a3b1c6;
  --text:     #4a5568;
  --text2:    #8595ad;
  --text3:    #b0bcce;
  --accent:   #6d5dfc;
  --accent-l: #8a7cff;
  --red:      #fc5d7c;
  --green:    #4ecda6;
  --amber:    #fcb15d;

  /* The famous dual-shadow recipe */
  --shadow-out: 8px 8px 16px var(--dark), -8px -8px 16px var(--light);
  --shadow-out-sm: 5px 5px 10px var(--dark), -5px -5px 10px var(--light);
  --shadow-in: inset 5px 5px 10px var(--dark), inset -5px -5px 10px var(--light);
  --shadow-in-sm: inset 3px 3px 6px var(--dark), inset -3px -3px 6px var(--light);

  font-family: 'Nunito', sans-serif;
  background: var(--bg);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  color: var(--text);
}

@keyframes cal10-in {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}

.cal10__widget {
  width: 100%;
  max-width: 420px;
  background: var(--bg);
  border-radius: 36px;
  padding: 32px;
  box-shadow: var(--shadow-out);
  animation: cal10-in 0.5s ease both;
}

/* ── Header ── */
.cal10__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
}

.cal10__month-wrap {}

.cal10__month {
  font-size: 28px;
  font-weight: 900;
  color: var(--text);
  line-height: 1;
}
.cal10__year {
  font-size: 13px;
  font-weight: 700;
  color: var(--text3);
  letter-spacing: 0.08em;
  margin-top: 2px;
}

.cal10__nav {
  display: flex;
  gap: 12px;
}

/* Neumorphic buttons — extruded, press to inset */
.cal10__nav-btn {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--bg);
  box-shadow: var(--shadow-out-sm);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--accent);
  font-size: 18px;
  font-weight: 800;
  transition: box-shadow 0.18s, color 0.18s;
  user-select: none;
}
.cal10__nav-btn:hover { color: var(--accent-l); }
.cal10__nav-btn:active { box-shadow: var(--shadow-in-sm); }

/* ── DOW row ── */
.cal10__dow {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: 16px;
}
.cal10__dw {
  text-align: center;
  font-size: 11px;
  font-weight: 800;
  color: var(--text3);
  letter-spacing: 0.05em;
}

/* ── Date grid ── */
.cal10__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 10px;
}

.cal10__cell {
  aspect-ratio: 1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  cursor: pointer;
  position: relative;
  transition: box-shadow 0.18s, color 0.18s, transform 0.18s;
  background: var(--bg);
}

/* Default flat cells press in on hover */
.cal10__cell:hover {
  box-shadow: var(--shadow-in-sm);
  color: var(--accent);
}

.cal10__cell.other { color: var(--text3); opacity: 0.5; pointer-events: none; }

/* Today — permanently inset (pressed look) */
.cal10__cell.today {
  box-shadow: var(--shadow-in);
  color: var(--accent);
  font-weight: 900;
}

/* Selected — raised + accent, the "active" button */
.cal10__cell.selected {
  box-shadow: var(--shadow-out-sm);
  color: var(--accent);
  font-weight: 900;
  transform: scale(1.02);
}
.cal10__cell.selected::after {
  content: '';
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  opacity: 0.25;
}

/* Event dots */
.cal10__dot {
  position: absolute;
  bottom: 7px;
  width: 5px; height: 5px;
  border-radius: 50%;
}
.cal10__dot--a { background: var(--accent); }
.cal10__dot--r { background: var(--red); }
.cal10__dot--g { background: var(--green); }

/* ── Footer event card — inset well ── */
.cal10__footer {
  margin-top: 28px;
  padding: 20px;
  border-radius: 24px;
  box-shadow: var(--shadow-in);
  background: var(--bg);
}

.cal10__footer-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text3);
  margin-bottom: 14px;
}

.cal10__ev {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 0;
}
.cal10__ev + .cal10__ev { border-top: 1px solid rgba(163,177,198,0.25); }

/* Neumorphic mini icon */
.cal10__ev-icon {
  width: 40px; height: 40px;
  border-radius: 12px;
  background: var(--bg);
  box-shadow: var(--shadow-out-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.cal10__ev-body { flex: 1; min-width: 0; }
.cal10__ev-name { font-size: 14px; font-weight: 800; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal10__ev-time { font-size: 12px; font-weight: 600; color: var(--text2); margin-top: 1px; }

.cal10__ev-pill {
  font-size: 11px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 20px;
  background: var(--bg);
  box-shadow: var(--shadow-out-sm);
  flex-shrink: 0;
}
.cal10__ev-pill--a { color: var(--accent); }
.cal10__ev-pill--r { color: var(--red); }
.cal10__ev-pill--g { color: var(--green); }

/* ── Bottom toggle row (neumorphic switches) ── */
.cal10__toggles {
  display: flex;
  gap: 12px;
  margin-top: 20px;
}

.cal10__toggle {
  flex: 1;
  padding: 12px;
  border-radius: 16px;
  background: var(--bg);
  box-shadow: var(--shadow-out-sm);
  text-align: center;
  font-size: 12px;
  font-weight: 800;
  color: var(--text2);
  cursor: pointer;
  transition: box-shadow 0.18s, color 0.18s;
  user-select: none;
}
.cal10__toggle:hover { color: var(--accent); }
.cal10__toggle.active {
  box-shadow: var(--shadow-in-sm);
  color: var(--accent);
}

@media (max-width: 460px) {
  .cal10__widget { padding: 24px; border-radius: 28px; }
  .cal10__grid { gap: 7px; }
  .cal10__cell { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .cal10 * { animation: none !important; transition: none !important; }
}
```

**JS:**
```js
document.querySelectorAll('#cal10Grid .cal10__cell:not(.other)').forEach(cell => {
  cell.addEventListener('click', function() {
    document.querySelectorAll('#cal10Grid .cal10__cell').forEach(c => c.classList.remove('selected'));
    this.classList.add('selected');
  });
});
document.querySelectorAll('.cal10__toggle').forEach(t => {
  t.addEventListener('click', function() {
    document.querySelectorAll('.cal10__toggle').forEach(x => x.classList.remove('active'));
    this.classList.add('active');
  });
});
```

### 11. Horizontal Scroll / Timeline Calendar

**Type:** CSS + JS
**Description:** A fitness/booking-app date strip using display:flex with overflow-x:auto and scroll-snap. Day pills spring on hover, today glows lime, edge gradient masks hint at more, and a selected-day detail panel renders a vertical timeline with connector line and node dots.

**HTML:**
```html
<div class="cal11">
  <div class="cal11__wrap">

    <div class="cal11__head">
      <div class="cal11__title-block">
        <div class="cal11__eyebrow">June 2026 · Week 23</div>
        <div class="cal11__title">Schedule</div>
      </div>
      <div class="cal11__month-toggle">
        <div class="cal11__mt-btn">‹</div>
        <div class="cal11__mt-btn">›</div>
      </div>
    </div>

    <div class="cal11__strip-wrap">
      <div class="cal11__strip" id="cal11Strip">
        <div class="cal11__day weekend"><div class="cal11__day-dow">Sun</div><div class="cal11__day-num">1</div><div class="cal11__day-mon">Jun</div><div class="cal11__day-pips"></div></div>
        <div class="cal11__day"><div class="cal11__day-dow">Mon</div><div class="cal11__day-num">2</div><div class="cal11__day-mon">Jun</div><div class="cal11__day-pips"><span class="cal11__pip cal11__pip--l"></span></div></div>
        <div class="cal11__day"><div class="cal11__day-dow">Tue</div><div class="cal11__day-num">3</div><div class="cal11__day-mon">Jun</div><div class="cal11__day-pips"></div></div>
        <div class="cal11__day"><div class="cal11__day-dow">Wed</div><div class="cal11__day-num">4</div><div class="cal11__day-mon">Jun</div><div class="cal11__day-pips"><span class="cal11__pip cal11__pip--y"></span><span class="cal11__pip cal11__pip--c"></span></div></div>
        <div class="cal11__day"><div class="cal11__day-dow">Thu</div><div class="cal11__day-num">5</div><div class="cal11__day-mon">Jun</div><div class="cal11__day-pips"></div></div>
        <div class="cal11__day"><div class="cal11__day-dow">Fri</div><div class="cal11__day-num">6</div><div class="cal11__day-mon">Jun</div><div class="cal11__day-pips"><span class="cal11__pip cal11__pip--v"></span></div></div>
        <div class="cal11__day weekend"><div class="cal11__day-dow">Sat</div><div class="cal11__day-num">7</div><div class="cal11__day-mon">Jun</div><div class="cal11__day-pips"></div></div>

        <div class="cal11__day today weekend"><div class="cal11__day-dow">Sun</div><div class="cal11__day-num">8</div><div class="cal11__day-mon">Today</div><div class="cal11__day-pips"><span class="cal11__pip cal11__pip--l"></span><span class="cal11__pip cal11__pip--c"></span><span class="cal11__pip cal11__pip--y"></span></div></div>

        <div class="cal11__day selected"><div class="cal11__day-dow">Mon</div><div class="cal11__day-num">9</div><div class="cal11__day-mon">Jun</div><div class="cal11__day-pips"><span class="cal11__pip cal11__pip--y"></span><span class="cal11__pip cal11__pip--v"></span></div></div>
        <div class="cal11__day"><div class="cal11__day-dow">Tue</div><div class="cal11__day-num">10</div><div class="cal11__day-mon">Jun</div><div class="cal11__day-pips"></div></div>
        <div class="cal11__day"><div class="cal11__day-dow">Wed</div><div class="cal11__day-num">11</div><div class="cal11__day-mon">Jun</div><div class="cal11__day-pips"><span class="cal11__pip cal11__pip--c"></span><span class="cal11__pip cal11__pip--l"></span></div></div>
        <div class="cal11__day"><div class="cal11__day-dow">Thu</div><div class="cal11__day-num">12</div><div class="cal11__day-mon">Jun</div><div class="cal11__day-pips"></div></div>
        <div class="cal11__day"><div class="cal11__day-dow">Fri</div><div class="cal11__day-num">13</div><div class="cal11__day-mon">Jun</div><div class="cal11__day-pips"><span class="cal11__pip cal11__pip--y"></span></div></div>
        <div class="cal11__day weekend"><div class="cal11__day-dow">Sat</div><div class="cal11__day-num">14</div><div class="cal11__day-mon">Jun</div><div class="cal11__day-pips"></div></div>
        <div class="cal11__day weekend"><div class="cal11__day-dow">Sun</div><div class="cal11__day-num">15</div><div class="cal11__day-mon">Jun</div><div class="cal11__day-pips"></div></div>
        <div class="cal11__day"><div class="cal11__day-dow">Mon</div><div class="cal11__day-num">16</div><div class="cal11__day-mon">Jun</div><div class="cal11__day-pips"></div></div>
        <div class="cal11__day"><div class="cal11__day-dow">Tue</div><div class="cal11__day-num">17</div><div class="cal11__day-mon">Jun</div><div class="cal11__day-pips"><span class="cal11__pip cal11__pip--c"></span><span class="cal11__pip cal11__pip--v"></span></div></div>
        <div class="cal11__day"><div class="cal11__day-dow">Wed</div><div class="cal11__day-num">18</div><div class="cal11__day-mon">Jun</div><div class="cal11__day-pips"></div></div>
        <div class="cal11__day"><div class="cal11__day-dow">Thu</div><div class="cal11__day-num">19</div><div class="cal11__day-mon">Jun</div><div class="cal11__day-pips"></div></div>
        <div class="cal11__day"><div class="cal11__day-dow">Fri</div><div class="cal11__day-num">20</div><div class="cal11__day-mon">Jun</div><div class="cal11__day-pips"><span class="cal11__pip cal11__pip--l"></span></div></div>
        <div class="cal11__day weekend"><div class="cal11__day-dow">Sat</div><div class="cal11__day-num">21</div><div class="cal11__day-mon">Jun</div><div class="cal11__day-pips"></div></div>
      </div>
    </div>

    <div class="cal11__detail">
      <div class="cal11__detail-head">
        <div class="cal11__detail-date">Monday, <span>June 9</span></div>
        <div class="cal11__detail-count">2 events</div>
      </div>
      <div class="cal11__timeline">
        <div class="cal11__tl-item cal11__tl-item--y">
          <div class="cal11__tl-time">10:00 — 11:00 AM</div>
          <div class="cal11__tl-name">Sprint Planning</div>
          <div class="cal11__tl-meta">Zoom · 8 attendees</div>
        </div>
        <div class="cal11__tl-item cal11__tl-item--v">
          <div class="cal11__tl-time">3:00 — 3:30 PM</div>
          <div class="cal11__tl-name">1:1 with Sam</div>
          <div class="cal11__tl-meta">Office · Recurring</div>
        </div>
      </div>
    </div>

  </div>
</div>
```

**CSS:**
```css
.cal11, .cal11 *, .cal11 *::before, .cal11 *::after {
  box-sizing: border-box; margin: 0; padding: 0;
}
.cal11 ::selection { background: #ff4d4d; color: #fff; }

.cal11 {
  --bg:      #0e0e12;
  --surface: #16161d;
  --card:    #1d1d27;
  --card2:   #25252f;
  --border:  rgba(255,255,255,0.08);
  --text:    #f5f5f7;
  --text2:   #9a9aa8;
  --text3:   #55555f;
  --lime:    #d4ff3d;
  --coral:   #ff5e4d;
  --cyan:    #3dd4ff;
  --violet:  #9d7dff;

  font-family: 'Sora', sans-serif;
  background: var(--bg);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 0;
  color: var(--text);
}

@keyframes cal11-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes cal11-glow {
  0%, 100% { box-shadow: 0 0 20px rgba(212,255,61,0.4); }
  50%       { box-shadow: 0 0 36px rgba(212,255,61,0.65); }
}

.cal11__wrap {
  width: 100%;
  max-width: 720px;
  padding: 0 24px;
  animation: cal11-in 0.5s ease both;
}

/* ── Header ── */
.cal11__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 28px;
  padding: 0 4px;
}

.cal11__title-block {}

.cal11__eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--lime);
  margin-bottom: 6px;
}

.cal11__title {
  font-family: 'Archivo Black', sans-serif;
  font-size: 40px;
  line-height: 0.95;
  letter-spacing: -0.02em;
}

.cal11__month-toggle {
  display: flex;
  gap: 6px;
}
.cal11__mt-btn {
  width: 42px; height: 42px;
  border-radius: 14px;
  background: var(--card);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--text2);
  font-size: 18px;
  transition: all 0.2s;
  user-select: none;
}
.cal11__mt-btn:hover { background: var(--card2); color: var(--lime); border-color: var(--lime); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   HORIZONTAL SCROLL STRIP — the core.
   display: flex; overflow-x: auto;
   scroll-snap for that booking-app feel.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.cal11__strip {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 8px 4px 20px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--card2) transparent;
}
.cal11__strip::-webkit-scrollbar { height: 6px; }
.cal11__strip::-webkit-scrollbar-track { background: transparent; }
.cal11__strip::-webkit-scrollbar-thumb { background: var(--card2); border-radius: 3px; }
.cal11__strip::-webkit-scrollbar-thumb:hover { background: var(--text3); }

/* Each day pill */
.cal11__day {
  flex: 0 0 auto;
  width: 76px;
  padding: 18px 10px 14px;
  border-radius: 20px;
  background: var(--card);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  scroll-snap-align: center;
  transition: all 0.22s cubic-bezier(0.34,1.56,0.64,1);
  position: relative;
}
.cal11__day:hover {
  transform: translateY(-4px);
  border-color: var(--text3);
  background: var(--card2);
}

.cal11__day-dow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text2);
}

.cal11__day-num {
  font-family: 'Archivo Black', sans-serif;
  font-size: 26px;
  line-height: 1;
  color: var(--text);
}

.cal11__day-mon {
  font-size: 10px;
  font-weight: 600;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Event pips on the pill */
.cal11__day-pips {
  display: flex;
  gap: 4px;
  height: 6px;
}
.cal11__pip { width: 6px; height: 6px; border-radius: 50%; }
.cal11__pip--l { background: var(--lime); }
.cal11__pip--c { background: var(--coral); }
.cal11__pip--y { background: var(--cyan); }
.cal11__pip--v { background: var(--violet); }

/* Weekend tint */
.cal11__day.weekend .cal11__day-dow { color: var(--coral); }

/* Today */
.cal11__day.today {
  background: var(--lime);
  border-color: var(--lime);
  animation: cal11-glow 2.5s ease-in-out infinite;
}
.cal11__day.today .cal11__day-dow,
.cal11__day.today .cal11__day-num,
.cal11__day.today .cal11__day-mon { color: #0e0e12; }
.cal11__day.today .cal11__pip--l { background: #0e0e12; }

/* Selected */
.cal11__day.selected:not(.today) {
  background: var(--card2);
  border-color: var(--lime);
  transform: translateY(-4px);
}
.cal11__day.selected:not(.today)::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 50%;
  transform: translateX(-50%);
  width: 24px; height: 3px;
  background: var(--lime);
  border-radius: 2px;
}

/* Scroll hint gradient masks */
.cal11__strip-wrap { position: relative; }
.cal11__strip-wrap::before,
.cal11__strip-wrap::after {
  content: '';
  position: absolute;
  top: 0; bottom: 20px;
  width: 40px;
  pointer-events: none;
  z-index: 2;
}
.cal11__strip-wrap::before { left: 0; background: linear-gradient(90deg, var(--bg), transparent); }
.cal11__strip-wrap::after  { right: 0; background: linear-gradient(270deg, var(--bg), transparent); }

/* ── Selected day detail panel ── */
.cal11__detail {
  margin-top: 16px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 24px;
}

.cal11__detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.cal11__detail-date {
  font-size: 18px;
  font-weight: 700;
}
.cal11__detail-date span { color: var(--lime); }

.cal11__detail-count {
  font-size: 12px;
  font-weight: 600;
  color: var(--text2);
  background: var(--card2);
  padding: 5px 12px;
  border-radius: 20px;
}

/* Timeline of the day */
.cal11__timeline {
  position: relative;
  padding-left: 20px;
}
.cal11__timeline::before {
  content: '';
  position: absolute;
  left: 4px; top: 6px; bottom: 6px;
  width: 2px;
  background: var(--border);
}

.cal11__tl-item {
  position: relative;
  padding: 10px 0 10px 18px;
}
.cal11__tl-item::before {
  content: '';
  position: absolute;
  left: -20px; top: 14px;
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 2px solid var(--bg);
}
.cal11__tl-item--l::before { background: var(--lime); }
.cal11__tl-item--c::before { background: var(--coral); }
.cal11__tl-item--y::before { background: var(--cyan); }
.cal11__tl-item--v::before { background: var(--violet); }

.cal11__tl-time {
  font-size: 11px;
  font-weight: 700;
  color: var(--text3);
  letter-spacing: 0.05em;
}
.cal11__tl-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-top: 2px;
}
.cal11__tl-meta {
  font-size: 12px;
  color: var(--text2);
  margin-top: 2px;
}

@media (max-width: 480px) {
  .cal11__title { font-size: 30px; }
  .cal11__day { width: 66px; padding: 14px 8px 12px; }
  .cal11__day-num { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .cal11 * { animation: none !important; transition: none !important; }
  .cal11__strip { scroll-behavior: auto; }
}
```

**JS:**
```js
document.querySelectorAll('#cal11Strip .cal11__day').forEach(d => {
  d.addEventListener('click', function() {
    document.querySelectorAll('#cal11Strip .cal11__day').forEach(x => x.classList.remove('selected'));
    if (!this.classList.contains('today')) this.classList.add('selected');
    this.scrollIntoView({behavior:'smooth', inline:'center', block:'nearest'});
  });
});
```

### 12. Minimalist Sidebar Calendar Card

**Type:** CSS + JS
**Description:** An ultra-clean compact widget sized for a dashboard rail or blog footer. Newsreader serif month, tight 1px grid, hairline dividers, a quiet today dot and black-fill selection, a 3-row mini agenda with tabular times, and a footer mini-stat with an add chip.

**HTML:**
```html
<div class="cal12">
  <div class="cal12__context">
    <div class="cal12__card">

      <div class="cal12__head">
        <div class="cal12__month">June <span>2026</span></div>
        <div class="cal12__nav">
          <div class="cal12__nav-btn">‹</div>
          <div class="cal12__nav-btn">›</div>
        </div>
      </div>

      <div class="cal12__dow">
        <div class="cal12__dw">S</div><div class="cal12__dw">M</div><div class="cal12__dw">T</div>
        <div class="cal12__dw">W</div><div class="cal12__dw">T</div><div class="cal12__dw">F</div><div class="cal12__dw">S</div>
      </div>

      <div class="cal12__grid" id="cal12Grid">
        <div class="cal12__cell other">25</div><div class="cal12__cell other">26</div><div class="cal12__cell other">27</div>
        <div class="cal12__cell other">28</div><div class="cal12__cell other">29</div><div class="cal12__cell other">30</div><div class="cal12__cell other">31</div>
        <div class="cal12__cell">1</div>
        <div class="cal12__cell has-ev">2</div>
        <div class="cal12__cell">3</div>
        <div class="cal12__cell has-ev">4</div>
        <div class="cal12__cell">5</div>
        <div class="cal12__cell">6</div>
        <div class="cal12__cell">7</div>
        <div class="cal12__cell today selected">8</div>
        <div class="cal12__cell has-ev">9</div>
        <div class="cal12__cell">10</div>
        <div class="cal12__cell has-ev">11</div>
        <div class="cal12__cell">12</div>
        <div class="cal12__cell has-ev">13</div>
        <div class="cal12__cell">14</div>
        <div class="cal12__cell">15</div>
        <div class="cal12__cell">16</div>
        <div class="cal12__cell has-ev">17</div>
        <div class="cal12__cell">18</div>
        <div class="cal12__cell">19</div>
        <div class="cal12__cell has-ev">20</div>
        <div class="cal12__cell">21</div>
        <div class="cal12__cell">22</div>
        <div class="cal12__cell">23</div>
        <div class="cal12__cell">24</div>
        <div class="cal12__cell has-ev">25</div>
        <div class="cal12__cell">26</div>
        <div class="cal12__cell">27</div>
        <div class="cal12__cell">28</div>
        <div class="cal12__cell">29</div>
        <div class="cal12__cell">30</div>
        <div class="cal12__cell other">1</div><div class="cal12__cell other">2</div><div class="cal12__cell other">3</div>
        <div class="cal12__cell other">4</div><div class="cal12__cell other">5</div>
      </div>

      <div class="cal12__rule"></div>

      <div class="cal12__agenda-label">Today</div>
      <div class="cal12__ev">
        <div class="cal12__ev-time">10:00</div>
        <div class="cal12__ev-bar" style="background:var(--accent)"></div>
        <div class="cal12__ev-name">Sprint Planning</div>
      </div>
      <div class="cal12__ev">
        <div class="cal12__ev-time">14:00</div>
        <div class="cal12__ev-bar" style="background:#3b82f6"></div>
        <div class="cal12__ev-name">Product Launch</div>
      </div>
      <div class="cal12__ev">
        <div class="cal12__ev-time">16:30</div>
        <div class="cal12__ev-bar" style="background:#10b981"></div>
        <div class="cal12__ev-name">Design Review</div>
      </div>

      <div class="cal12__foot">
        <div class="cal12__foot-text"><b>3</b> events today</div>
        <div class="cal12__foot-btn">+ Add</div>
      </div>

    </div>
    <div class="cal12__caption">— sidebar widget, actual size —</div>
  </div>
</div>
```

**CSS:**
```css
.cal12, .cal12 *, .cal12 *::before, .cal12 *::after {
  box-sizing: border-box; margin: 0; padding: 0;
}
.cal12 ::selection { background: #111; color: #fff; }

.cal12 {
  --paper:  #fcfcfa;
  --ink:    #14140f;
  --ink2:   #6e6e64;
  --ink3:   #b8b8ad;
  --hair:   #ebebe4;
  --accent: #d94f30;
  --accent-soft: #fbe9e4;

  font-family: 'Inter Tight', sans-serif;
  background: #f0f0eb;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  color: var(--ink);
}

@keyframes cal12-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Mock sidebar context to show scale */
.cal12__context {
  width: 100%;
  max-width: 300px;
  animation: cal12-in 0.45s ease both;
}

/* ── The compact card ── */
.cal12__card {
  background: var(--paper);
  border: 1px solid var(--hair);
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03), 0 8px 24px rgba(0,0,0,0.04);
}

/* ── Header ── */
.cal12__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 18px;
}

.cal12__month {
  font-family: 'Newsreader', serif;
  font-size: 21px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.cal12__month span { color: var(--ink3); font-weight: 400; }

.cal12__nav {
  display: flex;
  gap: 2px;
}
.cal12__nav-btn {
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 6px;
  cursor: pointer;
  color: var(--ink2);
  font-size: 13px;
  transition: all 0.15s;
  user-select: none;
}
.cal12__nav-btn:hover { background: var(--hair); color: var(--ink); }

/* ── DOW ── */
.cal12__dow {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: 6px;
}
.cal12__dw {
  text-align: center;
  font-size: 10px;
  font-weight: 600;
  color: var(--ink3);
  letter-spacing: 0.04em;
  padding: 2px 0;
}

/* ── Grid — tight ── */
.cal12__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
}

.cal12__cell {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  border-radius: 8px;
  position: relative;
  transition: all 0.13s;
}
.cal12__cell:hover { background: var(--hair); }
.cal12__cell.other { color: var(--ink3); opacity: 0.55; pointer-events: none; }

.cal12__cell.today {
  font-weight: 700;
  color: var(--accent);
}
.cal12__cell.today::after {
  content: '';
  position: absolute;
  bottom: 4px;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--accent);
}

.cal12__cell.selected {
  background: var(--ink);
  color: var(--paper);
  font-weight: 600;
}
.cal12__cell.selected.today { color: var(--paper); }
.cal12__cell.selected.today::after { background: var(--paper); }

/* tiny event marker */
.cal12__cell.has-ev:not(.selected)::before {
  content: '';
  position: absolute;
  top: 5px; right: 5px;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--ink3);
}

/* ── Divider ── */
.cal12__rule {
  height: 1px;
  background: var(--hair);
  margin: 18px 0 14px;
}

/* ── Mini agenda ── */
.cal12__agenda-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink3);
  margin-bottom: 12px;
}

.cal12__ev {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
}

.cal12__ev-time {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink2);
  width: 38px;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

.cal12__ev-bar {
  width: 2px;
  align-self: stretch;
  border-radius: 1px;
  flex-shrink: 0;
}

.cal12__ev-name {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Footer mini-stat ── */
.cal12__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--hair);
}
.cal12__foot-text {
  font-size: 11px;
  color: var(--ink2);
}
.cal12__foot-text b { color: var(--ink); font-weight: 700; }

.cal12__foot-btn {
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 8px;
  background: var(--accent-soft);
  transition: all 0.15s;
  user-select: none;
}
.cal12__foot-btn:hover { background: var(--accent); color: #fff; }

/* Caption beneath card */
.cal12__caption {
  text-align: center;
  font-size: 11px;
  color: #aaa;
  margin-top: 14px;
  letter-spacing: 0.05em;
}

@media (prefers-reduced-motion: reduce) {
  .cal12 * { animation: none !important; transition: none !important; }
}
```

**JS:**
```js
document.querySelectorAll('#cal12Grid .cal12__cell:not(.other)').forEach(cell => {
  cell.addEventListener('click', function() {
    document.querySelectorAll('#cal12Grid .cal12__cell').forEach(c => c.classList.remove('selected'));
    this.classList.add('selected');
  });
});
```

### 13. CSS Booking Date Picker UI

**Type:** CSS + JS
**Description:** A travel/reservation dual-month range picker. Range days get a band that stretches edge-to-edge via full-width ::before; endpoints use half-width bands so the highlight connects across rows. Live check-in/out summary and night count; click to set start then end.

**HTML:**
```html
<div class="cal13">
  <div class="cal13__card">

    <!-- Summary -->
    <div class="cal13__summary">
      <div class="cal13__sum-block active">
        <div class="cal13__sum-label">Check-in</div>
        <div class="cal13__sum-value" id="cal13In">Jun 11</div>
      </div>
      <div class="cal13__sum-arrow">→</div>
      <div class="cal13__sum-block">
        <div class="cal13__sum-label">Check-out</div>
        <div class="cal13__sum-value" id="cal13Out">Jun 17</div>
      </div>
      <div class="cal13__sum-nights">
        <div class="cal13__nights-num" id="cal13Nights">6</div>
        <div class="cal13__nights-lbl">Nights</div>
      </div>
    </div>

    <!-- Dual months -->
    <div class="cal13__months">

      <!-- June -->
      <div class="cal13__month">
        <div class="cal13__month-head">
          <div class="cal13__month-nav" id="cal13Prev">‹</div>
          <div class="cal13__month-name">June 2026</div>
          <div class="cal13__month-nav ghost">›</div>
        </div>
        <div class="cal13__dow">
          <div class="cal13__dw">Su</div><div class="cal13__dw">Mo</div><div class="cal13__dw">Tu</div>
          <div class="cal13__dw">We</div><div class="cal13__dw">Th</div><div class="cal13__dw">Fr</div><div class="cal13__dw">Sa</div>
        </div>
        <div class="cal13__grid" id="cal13June">
          <div class="cal13__cell other"><span class="n">25</span></div><div class="cal13__cell other"><span class="n">26</span></div><div class="cal13__cell other"><span class="n">27</span></div>
          <div class="cal13__cell other"><span class="n">28</span></div><div class="cal13__cell other"><span class="n">29</span></div><div class="cal13__cell other"><span class="n">30</span></div><div class="cal13__cell other"><span class="n">31</span></div>
          <div class="cal13__cell disabled"><span class="n">1</span></div>
          <div class="cal13__cell disabled"><span class="n">2</span></div>
          <div class="cal13__cell disabled"><span class="n">3</span></div>
          <div class="cal13__cell disabled"><span class="n">4</span></div>
          <div class="cal13__cell disabled"><span class="n">5</span></div>
          <div class="cal13__cell disabled"><span class="n">6</span></div>
          <div class="cal13__cell disabled"><span class="n">7</span></div>
          <div class="cal13__cell today" data-d="8"><span class="n">8</span></div>
          <div class="cal13__cell" data-d="9"><span class="n">9</span></div>
          <div class="cal13__cell" data-d="10"><span class="n">10</span></div>
          <div class="cal13__cell range-start" data-d="11"><span class="n">11</span></div>
          <div class="cal13__cell in-range" data-d="12"><span class="n">12</span></div>
          <div class="cal13__cell in-range" data-d="13"><span class="n">13</span></div>
          <div class="cal13__cell in-range" data-d="14"><span class="n">14</span></div>
          <div class="cal13__cell in-range" data-d="15"><span class="n">15</span></div>
          <div class="cal13__cell in-range" data-d="16"><span class="n">16</span></div>
          <div class="cal13__cell range-end" data-d="17"><span class="n">17</span></div>
          <div class="cal13__cell" data-d="18"><span class="n">18</span></div>
          <div class="cal13__cell" data-d="19"><span class="n">19</span></div>
          <div class="cal13__cell" data-d="20"><span class="n">20</span></div>
          <div class="cal13__cell" data-d="21"><span class="n">21</span></div>
          <div class="cal13__cell" data-d="22"><span class="n">22</span></div>
          <div class="cal13__cell" data-d="23"><span class="n">23</span></div>
          <div class="cal13__cell" data-d="24"><span class="n">24</span></div>
          <div class="cal13__cell" data-d="25"><span class="n">25</span></div>
          <div class="cal13__cell" data-d="26"><span class="n">26</span></div>
          <div class="cal13__cell" data-d="27"><span class="n">27</span></div>
          <div class="cal13__cell" data-d="28"><span class="n">28</span></div>
          <div class="cal13__cell" data-d="29"><span class="n">29</span></div>
          <div class="cal13__cell" data-d="30"><span class="n">30</span></div>
        </div>
      </div>

      <!-- July -->
      <div class="cal13__month">
        <div class="cal13__month-head">
          <div class="cal13__month-nav ghost">‹</div>
          <div class="cal13__month-name">July 2026</div>
          <div class="cal13__month-nav" id="cal13Next">›</div>
        </div>
        <div class="cal13__dow">
          <div class="cal13__dw">Su</div><div class="cal13__dw">Mo</div><div class="cal13__dw">Tu</div>
          <div class="cal13__dw">We</div><div class="cal13__dw">Th</div><div class="cal13__dw">Fr</div><div class="cal13__dw">Sa</div>
        </div>
        <div class="cal13__grid" id="cal13July">
          <div class="cal13__cell other"><span class="n">29</span></div><div class="cal13__cell other"><span class="n">30</span></div>
          <div class="cal13__cell" data-d="101"><span class="n">1</span></div>
          <div class="cal13__cell" data-d="102"><span class="n">2</span></div>
          <div class="cal13__cell" data-d="103"><span class="n">3</span></div>
          <div class="cal13__cell" data-d="104"><span class="n">4</span></div>
          <div class="cal13__cell" data-d="105"><span class="n">5</span></div>
          <div class="cal13__cell" data-d="106"><span class="n">6</span></div>
          <div class="cal13__cell" data-d="107"><span class="n">7</span></div>
          <div class="cal13__cell" data-d="108"><span class="n">8</span></div>
          <div class="cal13__cell" data-d="109"><span class="n">9</span></div>
          <div class="cal13__cell" data-d="110"><span class="n">10</span></div>
          <div class="cal13__cell" data-d="111"><span class="n">11</span></div>
          <div class="cal13__cell" data-d="112"><span class="n">12</span></div>
          <div class="cal13__cell" data-d="113"><span class="n">13</span></div>
          <div class="cal13__cell" data-d="114"><span class="n">14</span></div>
          <div class="cal13__cell" data-d="115"><span class="n">15</span></div>
          <div class="cal13__cell" data-d="116"><span class="n">16</span></div>
          <div class="cal13__cell" data-d="117"><span class="n">17</span></div>
          <div class="cal13__cell" data-d="118"><span class="n">18</span></div>
          <div class="cal13__cell" data-d="119"><span class="n">19</span></div>
          <div class="cal13__cell" data-d="120"><span class="n">20</span></div>
          <div class="cal13__cell" data-d="121"><span class="n">21</span></div>
          <div class="cal13__cell" data-d="122"><span class="n">22</span></div>
          <div class="cal13__cell" data-d="123"><span class="n">23</span></div>
          <div class="cal13__cell" data-d="124"><span class="n">24</span></div>
          <div class="cal13__cell" data-d="125"><span class="n">25</span></div>
          <div class="cal13__cell" data-d="126"><span class="n">26</span></div>
          <div class="cal13__cell" data-d="127"><span class="n">27</span></div>
          <div class="cal13__cell" data-d="128"><span class="n">28</span></div>
          <div class="cal13__cell" data-d="129"><span class="n">29</span></div>
          <div class="cal13__cell" data-d="130"><span class="n">30</span></div>
          <div class="cal13__cell" data-d="131"><span class="n">31</span></div>
        </div>
      </div>

    </div>

    <!-- Footer -->
    <div class="cal13__foot">
      <div class="cal13__foot-legend">
        <div class="cal13__leg"><span class="cal13__leg-sw" style="background:var(--teal)"></span>Selected</div>
        <div class="cal13__leg"><span class="cal13__leg-sw" style="background:var(--range)"></span>In range</div>
      </div>
      <div class="cal13__foot-actions">
        <button class="cal13__btn cal13__btn--ghost" id="cal13Clear">Clear</button>
        <button class="cal13__btn cal13__btn--solid">Reserve · 6 nights</button>
      </div>
    </div>

  </div>
</div>
```

**CSS:**
```css
.cal13, .cal13 *, .cal13 *::before, .cal13 *::after {
  box-sizing: border-box; margin: 0; padding: 0;
}
.cal13 ::selection { background: #1f6f5c; color: #fff; }

.cal13 {
  --bg:      #f4f1ec;
  --card:    #ffffff;
  --ink:     #1c2825;
  --ink2:    #5e6e69;
  --ink3:    #a3afab;
  --hair:    #ebe7e0;
  --teal:    #1f6f5c;
  --teal-d:  #16513f;
  --range:   #e3f0eb;
  --range-edge: #1f6f5c;

  font-family: 'DM Sans', sans-serif;
  background: var(--bg);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  color: var(--ink);
}

@keyframes cal13-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.cal13__card {
  background: var(--card);
  border-radius: 24px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 24px 60px rgba(28,40,37,0.1);
  overflow: hidden;
  max-width: 720px;
  width: 100%;
  animation: cal13-in 0.5s ease both;
}

/* ── Summary header ── */
.cal13__summary {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--hair);
}

.cal13__sum-block {
  flex: 1;
  padding: 20px 24px;
  cursor: pointer;
  transition: background 0.15s;
  position: relative;
}
.cal13__sum-block:hover { background: #faf9f6; }
.cal13__sum-block.active::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 24px; right: 24px;
  height: 2px;
  background: var(--teal);
}

.cal13__sum-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink3);
  margin-bottom: 5px;
}
.cal13__sum-value {
  font-family: 'Fraunces', serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
}
.cal13__sum-value.empty { color: var(--ink3); font-weight: 400; }

.cal13__sum-arrow {
  display: flex;
  align-items: center;
  padding: 0 8px;
  color: var(--ink3);
  font-size: 18px;
}

.cal13__sum-nights {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0 24px;
  border-left: 1px solid var(--hair);
  background: var(--range);
  min-width: 90px;
}
.cal13__nights-num {
  font-family: 'Fraunces', serif;
  font-size: 28px;
  font-weight: 600;
  color: var(--teal-d);
  line-height: 1;
}
.cal13__nights-lbl {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal);
  margin-top: 3px;
}

/* ── Dual month container ── */
.cal13__months {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  padding: 24px;
}

.cal13__month {
  padding: 0 16px;
}
.cal13__month:first-child { border-right: 1px solid var(--hair); }

.cal13__month-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.cal13__month-name {
  font-family: 'Fraunces', serif;
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
}
.cal13__month-nav {
  width: 30px; height: 30px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--ink2);
  font-size: 14px;
  transition: all 0.15s;
  user-select: none;
}
.cal13__month-nav:hover { background: var(--hair); color: var(--teal); }
.cal13__month-nav.ghost { visibility: hidden; }

.cal13__dow {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: 6px;
}
.cal13__dw {
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  color: var(--ink3);
  letter-spacing: 0.03em;
}

.cal13__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0;
  row-gap: 2px;
}

/* Each date cell */
.cal13__cell {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  position: relative;
  transition: color 0.12s;
}
.cal13__cell .n {
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  position: relative;
  z-index: 2;
  transition: all 0.12s;
}
.cal13__cell:hover:not(.other):not(.disabled) .n { background: var(--hair); }
.cal13__cell.other  { color: var(--ink3); opacity: 0; pointer-events: none; }
.cal13__cell.disabled { color: var(--ink3); opacity: 0.4; pointer-events: none; text-decoration: line-through; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   RANGE SELECTION — the key feature.
   .in-range  → light band background that stretches
   .range-start / .range-end → solid teal endpoints
   The band uses a ::before that fills the full cell width.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.cal13__cell.in-range::before {
  content: '';
  position: absolute;
  top: 3px; bottom: 3px;
  left: 0; right: 0;
  background: var(--range);
  z-index: 1;
}

.cal13__cell.range-start::before,
.cal13__cell.range-end::before {
  content: '';
  position: absolute;
  top: 3px; bottom: 3px;
  background: var(--range);
  z-index: 1;
}
/* start: band only extends right */
.cal13__cell.range-start::before { left: 50%; right: 0; }
/* end: band only extends left */
.cal13__cell.range-end::before   { left: 0; right: 50%; }
/* single day (start==end): no band */
.cal13__cell.range-start.range-end::before { display: none; }

/* endpoint circles */
.cal13__cell.range-start .n,
.cal13__cell.range-end .n {
  background: var(--teal);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(31,111,92,0.3);
}

/* today marker */
.cal13__cell.today .n {
  border: 1.5px solid var(--teal);
  color: var(--teal);
  font-weight: 700;
}
.cal13__cell.today.range-start .n,
.cal13__cell.today.range-end .n { color: #fff; border-color: var(--teal); }

/* ── Footer ── */
.cal13__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-top: 1px solid var(--hair);
  background: #faf9f6;
}

.cal13__foot-legend {
  display: flex;
  gap: 16px;
}
.cal13__leg {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--ink2);
}
.cal13__leg-sw { width: 14px; height: 14px; border-radius: 4px; }

.cal13__foot-actions {
  display: flex;
  gap: 10px;
}
.cal13__btn {
  padding: 10px 20px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  user-select: none;
  border: none;
  font-family: 'DM Sans', sans-serif;
}
.cal13__btn--ghost { background: transparent; color: var(--ink2); }
.cal13__btn--ghost:hover { background: var(--hair); }
.cal13__btn--solid { background: var(--teal); color: #fff; }
.cal13__btn--solid:hover { background: var(--teal-d); }

@media (max-width: 600px) {
  .cal13__months { grid-template-columns: 1fr; }
  .cal13__month:first-child { border-right: none; border-bottom: 1px solid var(--hair); padding-bottom: 20px; margin-bottom: 20px; }
  .cal13__sum-nights { display: none; }
  .cal13__foot { flex-direction: column; gap: 14px; align-items: stretch; }
  .cal13__foot-actions { justify-content: flex-end; }
}
@media (prefers-reduced-motion: reduce) {
  .cal13 * { animation: none !important; transition: none !important; }
}
```

**JS:**
```js
(() => {
  const cells = Array.from(document.querySelectorAll('.cal13__cell[data-d]'));
  // Build an ordered index for range math (June 1-30 = 1..30, July = 101..131)
  const order = d => d > 100 ? (30 + (d - 100)) : d;
  let start = 11, end = 17; // June 11 -> June 17

  const monNames = {June:'Jun', July:'Jul'};
  function fmt(d) {
    if (d > 100) return 'Jul ' + (d - 100);
    return 'Jun ' + d;
  }

  function paint() {
    const lo = Math.min(order(start), end ? order(end) : order(start));
    const hi = end ? Math.max(order(start), order(end)) : order(start);
    cells.forEach(c => {
      c.classList.remove('range-start','range-end','in-range');
      const o = order(+c.dataset.d);
      if (end === null) {
        if (+c.dataset.d === start) { c.classList.add('range-start','range-end'); }
      } else {
        if (o === lo) c.classList.add('range-start');
        else if (o === hi) c.classList.add('range-end');
        else if (o > lo && o < hi) c.classList.add('in-range');
      }
    });
    // summary
    const inEl = document.getElementById('cal13In');
    const outEl = document.getElementById('cal13Out');
    const nightsEl = document.getElementById('cal13Nights');
    const sLo = Math.min(order(start), end ? order(end) : order(start));
    const sHi = end ? Math.max(order(start), order(end)) : null;
    inEl.textContent = fmt(order(start) <= (end ? order(end) : 1e9) ? start : end);
    if (end !== null) {
      const lowD = order(start) <= order(end) ? start : end;
      const highD = order(start) <= order(end) ? end : start;
      inEl.textContent = fmt(lowD);
      outEl.textContent = fmt(highD);
      outEl.classList.remove('empty');
      nightsEl.textContent = Math.abs(order(end) - order(start));
    } else {
      outEl.textContent = 'Select';
      outEl.classList.add('empty');
      nightsEl.textContent = '0';
    }
  }

  cells.forEach(c => {
    c.addEventListener('click', () => {
      const d = +c.dataset.d;
      if (end === null) {
        // completing a range
        end = d;
      } else {
        // start a new range
        start = d; end = null;
      }
      paint();
    });
  });

  document.getElementById('cal13Clear').addEventListener('click', () => {
    start = 11; end = 17; paint();
  });

  paint();
})();
```

### 14. CSS Grid Advent Calendar

**Type:** CSS + JS
**Description:** A festive mosaic using grid-auto-flow:dense so wide/tall/big door tiles pack together. Each door is a real 3D flip card (perspective + preserve-3d + rotateY) revealing an emoji surprise. Falling-snow background, glowing today door, click to flip open.

**HTML:**
```html
<div class="cal14">
  <div class="cal14__snow"></div>

  <div class="cal14__wrap">
    <div class="cal14__head">
      <div class="cal14__title">Advent Calendar</div>
      <div class="cal14__sub">December 2026 · Tap a door</div>
    </div>

    <div class="cal14__grid" id="cal14Grid">
      <!-- Mosaic of doors; sizes vary via modifier classes -->
      <div class="cal14__door cal14__door--big"><div class="cal14__door-inner"><div class="cal14__face cal14__front"><div class="cal14__door-num">1</div><div class="cal14__door-deco">❄</div></div><div class="cal14__face cal14__back"><div class="cal14__back-emoji">🎁</div><div class="cal14__back-label">A gift!</div></div></div></div>
      <div class="cal14__door"><div class="cal14__door-inner"><div class="cal14__face cal14__front"><div class="cal14__door-num">2</div></div><div class="cal14__face cal14__back"><div class="cal14__back-emoji">🍪</div></div></div></div>
      <div class="cal14__door"><div class="cal14__door-inner"><div class="cal14__face cal14__front"><div class="cal14__door-num">3</div></div><div class="cal14__face cal14__back"><div class="cal14__back-emoji">⭐</div></div></div></div>
      <div class="cal14__door cal14__door--tall"><div class="cal14__door-inner"><div class="cal14__face cal14__front"><div class="cal14__door-num">4</div><div class="cal14__door-deco">🎄</div></div><div class="cal14__face cal14__back"><div class="cal14__back-emoji">🕯️</div><div class="cal14__back-label">Candle</div></div></div></div>
      <div class="cal14__door"><div class="cal14__door-inner"><div class="cal14__face cal14__front"><div class="cal14__door-num">5</div></div><div class="cal14__face cal14__back"><div class="cal14__back-emoji">🦌</div></div></div></div>
      <div class="cal14__door"><div class="cal14__door-inner"><div class="cal14__face cal14__front"><div class="cal14__door-num">6</div></div><div class="cal14__face cal14__back"><div class="cal14__back-emoji">🔔</div></div></div></div>
      <div class="cal14__door cal14__door--wide"><div class="cal14__door-inner"><div class="cal14__face cal14__front"><div class="cal14__door-num">7</div><div class="cal14__door-deco">✨</div></div><div class="cal14__face cal14__back"><div class="cal14__back-emoji">🧦</div><div class="cal14__back-label">Stocking</div></div></div></div>
      <div class="cal14__door"><div class="cal14__door-inner"><div class="cal14__face cal14__front"><div class="cal14__door-num">8</div></div><div class="cal14__face cal14__back"><div class="cal14__back-emoji">☃️</div></div></div></div>
      <div class="cal14__door"><div class="cal14__door-inner"><div class="cal14__face cal14__front"><div class="cal14__door-num">9</div></div><div class="cal14__face cal14__back"><div class="cal14__back-emoji">🍬</div></div></div></div>
      <div class="cal14__door"><div class="cal14__door-inner"><div class="cal14__face cal14__front"><div class="cal14__door-num">10</div></div><div class="cal14__face cal14__back"><div class="cal14__back-emoji">🎅</div></div></div></div>
      <div class="cal14__door cal14__door--tall"><div class="cal14__door-inner"><div class="cal14__face cal14__front"><div class="cal14__door-num">11</div><div class="cal14__door-deco">❄</div></div><div class="cal14__face cal14__back"><div class="cal14__back-emoji">🎶</div><div class="cal14__back-label">Carols</div></div></div></div>
      <div class="cal14__door"><div class="cal14__door-inner"><div class="cal14__face cal14__front"><div class="cal14__door-num">12</div></div><div class="cal14__face cal14__back"><div class="cal14__back-emoji">🧣</div></div></div></div>
      <div class="cal14__door"><div class="cal14__door-inner"><div class="cal14__face cal14__front"><div class="cal14__door-num">13</div></div><div class="cal14__face cal14__back"><div class="cal14__back-emoji">🌟</div></div></div></div>
      <div class="cal14__door cal14__door--wide"><div class="cal14__door-inner"><div class="cal14__face cal14__front"><div class="cal14__door-num">14</div><div class="cal14__door-deco">🎄</div></div><div class="cal14__face cal14__back"><div class="cal14__back-emoji">🥮</div><div class="cal14__back-label">Treat</div></div></div></div>
      <div class="cal14__door"><div class="cal14__door-inner"><div class="cal14__face cal14__front"><div class="cal14__door-num">15</div></div><div class="cal14__face cal14__back"><div class="cal14__back-emoji">🎀</div></div></div></div>
      <div class="cal14__door"><div class="cal14__door-inner"><div class="cal14__face cal14__front"><div class="cal14__door-num">16</div></div><div class="cal14__face cal14__back"><div class="cal14__back-emoji">🍫</div></div></div></div>
      <div class="cal14__door"><div class="cal14__door-inner"><div class="cal14__face cal14__front"><div class="cal14__door-num">17</div></div><div class="cal14__face cal14__back"><div class="cal14__back-emoji">🦌</div></div></div></div>
      <div class="cal14__door"><div class="cal14__door-inner"><div class="cal14__face cal14__front"><div class="cal14__door-num">18</div></div><div class="cal14__face cal14__back"><div class="cal14__back-emoji">⛄</div></div></div></div>
      <div class="cal14__door cal14__door--wide"><div class="cal14__door-inner"><div class="cal14__face cal14__front"><div class="cal14__door-num">19</div><div class="cal14__door-deco">✨</div></div><div class="cal14__face cal14__back"><div class="cal14__back-emoji">🎁</div><div class="cal14__back-label">Surprise</div></div></div></div>
      <div class="cal14__door"><div class="cal14__door-inner"><div class="cal14__face cal14__front"><div class="cal14__door-num">20</div></div><div class="cal14__face cal14__back"><div class="cal14__back-emoji">🔔</div></div></div></div>
      <div class="cal14__door"><div class="cal14__door-inner"><div class="cal14__face cal14__front"><div class="cal14__door-num">21</div></div><div class="cal14__face cal14__back"><div class="cal14__back-emoji">🌟</div></div></div></div>
      <div class="cal14__door"><div class="cal14__door-inner"><div class="cal14__face cal14__front"><div class="cal14__door-num">22</div></div><div class="cal14__face cal14__back"><div class="cal14__back-emoji">🍷</div></div></div></div>
      <div class="cal14__door"><div class="cal14__door-inner"><div class="cal14__face cal14__front"><div class="cal14__door-num">23</div></div><div class="cal14__face cal14__back"><div class="cal14__back-emoji">🎶</div></div></div></div>
      <div class="cal14__door today cal14__door--big"><div class="cal14__door-inner"><div class="cal14__face cal14__front"><div class="cal14__door-num">24</div><div class="cal14__door-deco">⭐ Today ⭐</div></div><div class="cal14__face cal14__back"><div class="cal14__back-emoji">🎄</div><div class="cal14__back-label">Christmas Eve!</div></div></div></div>
    </div>

    <div class="cal14__hint">🎁 <b>1 door</b> opened · 23 to go · come back tomorrow!</div>
  </div>
</div>
```

**CSS:**
```css
.cal14, .cal14 *, .cal14 *::before, .cal14 *::after {
  box-sizing: border-box; margin: 0; padding: 0;
}
.cal14 ::selection { background: #c0392b; color: #fff; }

.cal14 {
  --bg1:   #0a2342;
  --bg2:   #123c63;
  --red:   #c0392b;
  --red-d: #8e2820;
  --green: #1e6f5c;
  --green-l:#2a9d8f;
  --gold:  #e9c46a;
  --gold-d:#d4a843;
  --cream: #fdf6ec;
  --snow:  #ffffff;

  font-family: 'Quicksand', sans-serif;
  background: radial-gradient(ellipse at top, var(--bg2) 0%, var(--bg1) 70%);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  color: var(--cream);
  position: relative;
  overflow: hidden;
}

/* Falling snow */
.cal14__snow {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(2px 2px at 10% 10%, #fff, transparent),
    radial-gradient(2px 2px at 30% 40%, rgba(255,255,255,.8), transparent),
    radial-gradient(1px 1px at 50% 20%, #fff, transparent),
    radial-gradient(2px 2px at 70% 60%, rgba(255,255,255,.7), transparent),
    radial-gradient(1px 1px at 90% 30%, #fff, transparent),
    radial-gradient(2px 2px at 20% 80%, rgba(255,255,255,.6), transparent),
    radial-gradient(1px 1px at 60% 90%, #fff, transparent),
    radial-gradient(2px 2px at 85% 75%, rgba(255,255,255,.7), transparent);
  background-size: 100% 100%;
  animation: cal14-snowfall 12s linear infinite;
  opacity: 0.5;
}
@keyframes cal14-snowfall {
  from { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
  to   { background-position: 0 100vh, 0 100vh, 0 100vh, 0 100vh, 0 100vh, 0 100vh, 0 100vh, 0 100vh; }
}

@keyframes cal14-in {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes cal14-twinkle {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}
@keyframes cal14-pop {
  0%   { transform: scale(0.6) rotate(-10deg); opacity: 0; }
  60%  { transform: scale(1.15) rotate(4deg); }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

.cal14__wrap {
  position: relative;
  z-index: 1;
  max-width: 680px;
  width: 100%;
  animation: cal14-in 0.6s ease both;
}

/* ── Header ── */
.cal14__head {
  text-align: center;
  margin-bottom: 24px;
}
.cal14__title {
  font-family: 'Mountains of Christmas', cursive;
  font-weight: 700;
  font-size: 52px;
  line-height: 1;
  color: var(--gold);
  text-shadow: 0 2px 0 var(--gold-d), 0 0 30px rgba(233,196,106,0.4);
}
.cal14__sub {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(253,246,236,0.6);
  margin-top: 6px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   CSS GRID with auto-flow:dense — doors
   of varying sizes pack like a mosaic.
   grid-auto-flow:dense lets big tiles
   slot in wherever they fit.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.cal14__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 80px;
  grid-auto-flow: dense;
  gap: 10px;
}

/* ── Each door — 3D flip card ── */
.cal14__door {
  perspective: 600px;
  cursor: pointer;
  position: relative;
}

/* Size variants for mosaic effect */
.cal14__door--wide { grid-column: span 2; }
.cal14__door--tall { grid-row: span 2; }
.cal14__door--big  { grid-column: span 2; grid-row: span 2; }

.cal14__door-inner {
  position: relative;
  width: 100%; height: 100%;
  transition: transform 0.6s cubic-bezier(0.34,1.2,0.64,1);
  transform-style: preserve-3d;
  border-radius: 14px;
}

.cal14__door.open .cal14__door-inner {
  transform: rotateY(180deg);
}

/* Faces */
.cal14__face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Front face — the closed door */
.cal14__front {
  background: linear-gradient(145deg, var(--red) 0%, var(--red-d) 100%);
  border: 2px solid rgba(255,255,255,0.15);
  box-shadow: inset 0 2px 8px rgba(255,255,255,0.15), 0 6px 16px rgba(0,0,0,0.35);
}
.cal14__door:nth-child(3n) .cal14__front { background: linear-gradient(145deg, var(--green-l) 0%, var(--green) 100%); }
.cal14__door:nth-child(4n) .cal14__front { background: linear-gradient(145deg, var(--gold) 0%, var(--gold-d) 100%); }

.cal14__door-num {
  font-family: 'Mountains of Christmas', cursive;
  font-weight: 700;
  font-size: 32px;
  color: var(--cream);
  text-shadow: 0 2px 3px rgba(0,0,0,0.3);
  line-height: 1;
}
.cal14__door--big .cal14__door-num { font-size: 56px; }
.cal14__door:nth-child(4n) .cal14__door-num { color: var(--bg1); text-shadow: none; }

.cal14__door-deco {
  font-size: 14px;
  margin-top: 2px;
  opacity: 0.7;
}

/* Back face — the surprise behind the door */
.cal14__back {
  background: linear-gradient(145deg, var(--cream) 0%, #f0e6d2 100%);
  transform: rotateY(180deg);
  border: 2px solid var(--gold);
  padding: 6px;
  text-align: center;
}
.cal14__back-emoji {
  font-size: 28px;
  animation: cal14-pop 0.5s ease both;
}
.cal14__door--big .cal14__back-emoji { font-size: 52px; }
.cal14__back-label {
  font-size: 9px;
  font-weight: 700;
  color: var(--red-d);
  margin-top: 3px;
  letter-spacing: 0.04em;
}
.cal14__door--big .cal14__back-label,
.cal14__door--wide .cal14__back-label { font-size: 11px; }

/* Today's door — glowing gold ring + twinkle */
.cal14__door.today .cal14__front {
  border-color: var(--gold);
  box-shadow: inset 0 2px 8px rgba(255,255,255,0.2), 0 0 0 3px var(--gold), 0 0 24px rgba(233,196,106,0.6);
}
.cal14__door.today .cal14__door-deco { animation: cal14-twinkle 1.5s ease-in-out infinite; }

/* Hover lift */
.cal14__door:hover .cal14__door-inner:not(.open) {
  transform: translateY(-4px) scale(1.03);
}
.cal14__door.open:hover .cal14__door-inner {
  transform: rotateY(180deg) translateY(4px) scale(1.03);
}

/* ── Footer hint ── */
.cal14__hint {
  text-align: center;
  margin-top: 22px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: rgba(253,246,236,0.5);
}
.cal14__hint b { color: var(--gold); }

@media (max-width: 560px) {
  .cal14__title { font-size: 38px; }
  .cal14__grid { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 70px; gap: 8px; }
  .cal14__door-num { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .cal14 *, .cal14__snow { animation: none !important; }
  .cal14__door-inner { transition: none !important; }
}
```

**JS:**
```js
document.querySelectorAll('#cal14Grid .cal14__door').forEach(door => {
  door.addEventListener('click', function() {
    this.classList.toggle('open');
  });
});
```

### 15. Fluent / Material Design Calendar

**Type:** CSS + JS
**Description:** Two design languages in one: a Material 3 calendar with accent-ring today, filled-circle selection, state layers and JS ripple animations plus a FAB; and a Fluent events list with pointer-tracking reveal glow borders built via radial-gradient and mask-composite.

**HTML:**
```html
<div class="cal15">
  <div class="cal15__card">

    <!-- Header -->
    <div class="cal15__header">
      <div class="cal15__header-label">Select date</div>
      <div class="cal15__header-row">
        <div class="cal15__header-date">June 2026</div>
        <div class="cal15__header-nav">
          <div class="cal15__icon-btn">‹</div>
          <div class="cal15__icon-btn">›</div>
        </div>
      </div>
    </div>

    <!-- DOW -->
    <div class="cal15__dow">
      <div class="cal15__dw">S</div><div class="cal15__dw">M</div><div class="cal15__dw">T</div>
      <div class="cal15__dw">W</div><div class="cal15__dw">T</div><div class="cal15__dw">F</div><div class="cal15__dw">S</div>
    </div>

    <!-- Grid -->
    <div class="cal15__grid" id="cal15Grid">
      <div class="cal15__cell other"><div class="cal15__day">25</div></div>
      <div class="cal15__cell other"><div class="cal15__day">26</div></div>
      <div class="cal15__cell other"><div class="cal15__day">27</div></div>
      <div class="cal15__cell other"><div class="cal15__day">28</div></div>
      <div class="cal15__cell other"><div class="cal15__day">29</div></div>
      <div class="cal15__cell other"><div class="cal15__day">30</div></div>
      <div class="cal15__cell other"><div class="cal15__day">31</div></div>
      <div class="cal15__cell"><div class="cal15__day">1</div></div>
      <div class="cal15__cell"><div class="cal15__day">2</div><div class="cal15__cell-dots"><span class="cal15__cdot cal15__cdot--p"></span></div></div>
      <div class="cal15__cell"><div class="cal15__day">3</div></div>
      <div class="cal15__cell"><div class="cal15__day">4</div><div class="cal15__cell-dots"><span class="cal15__cdot cal15__cdot--t"></span></div></div>
      <div class="cal15__cell"><div class="cal15__day">5</div></div>
      <div class="cal15__cell"><div class="cal15__day">6</div></div>
      <div class="cal15__cell"><div class="cal15__day">7</div><div class="cal15__cell-dots"><span class="cal15__cdot cal15__cdot--s"></span></div></div>
      <div class="cal15__cell today selected"><div class="cal15__day">8</div></div>
      <div class="cal15__cell"><div class="cal15__day">9</div><div class="cal15__cell-dots"><span class="cal15__cdot cal15__cdot--p"></span><span class="cal15__cdot cal15__cdot--s"></span></div></div>
      <div class="cal15__cell"><div class="cal15__day">10</div></div>
      <div class="cal15__cell"><div class="cal15__day">11</div><div class="cal15__cell-dots"><span class="cal15__cdot cal15__cdot--t"></span></div></div>
      <div class="cal15__cell"><div class="cal15__day">12</div></div>
      <div class="cal15__cell"><div class="cal15__day">13</div><div class="cal15__cell-dots"><span class="cal15__cdot cal15__cdot--p"></span></div></div>
      <div class="cal15__cell"><div class="cal15__day">14</div></div>
      <div class="cal15__cell"><div class="cal15__day">15</div></div>
      <div class="cal15__cell"><div class="cal15__day">16</div></div>
      <div class="cal15__cell"><div class="cal15__day">17</div><div class="cal15__cell-dots"><span class="cal15__cdot cal15__cdot--t"></span><span class="cal15__cdot cal15__cdot--p"></span></div></div>
      <div class="cal15__cell"><div class="cal15__day">18</div></div>
      <div class="cal15__cell"><div class="cal15__day">19</div></div>
      <div class="cal15__cell"><div class="cal15__day">20</div><div class="cal15__cell-dots"><span class="cal15__cdot cal15__cdot--s"></span></div></div>
      <div class="cal15__cell"><div class="cal15__day">21</div></div>
      <div class="cal15__cell"><div class="cal15__day">22</div></div>
      <div class="cal15__cell"><div class="cal15__day">23</div></div>
      <div class="cal15__cell"><div class="cal15__day">24</div><div class="cal15__cell-dots"><span class="cal15__cdot cal15__cdot--p"></span></div></div>
      <div class="cal15__cell"><div class="cal15__day">25</div></div>
      <div class="cal15__cell"><div class="cal15__day">26</div></div>
      <div class="cal15__cell"><div class="cal15__day">27</div><div class="cal15__cell-dots"><span class="cal15__cdot cal15__cdot--s"></span></div></div>
      <div class="cal15__cell"><div class="cal15__day">28</div></div>
      <div class="cal15__cell"><div class="cal15__day">29</div></div>
      <div class="cal15__cell"><div class="cal15__day">30</div></div>
      <div class="cal15__cell other"><div class="cal15__day">1</div></div>
      <div class="cal15__cell other"><div class="cal15__day">2</div></div>
      <div class="cal15__cell other"><div class="cal15__day">3</div></div>
      <div class="cal15__cell other"><div class="cal15__day">4</div></div>
      <div class="cal15__cell other"><div class="cal15__day">5</div></div>
    </div>

    <!-- Fluent reveal events -->
    <div class="cal15__fluent">
      <div class="cal15__fluent-label">Today · 3 events</div>
      <div class="cal15__event" id="ev1">
        <div class="cal15__event-icon cal15__event-icon--p">📋</div>
        <div class="cal15__event-body">
          <div class="cal15__event-name">Sprint Planning</div>
          <div class="cal15__event-time">10:00 AM · Teams</div>
        </div>
        <div class="cal15__event-chip" style="background:var(--primary-cont);color:var(--primary-ct)">1h</div>
      </div>
      <div class="cal15__event" id="ev2">
        <div class="cal15__event-icon cal15__event-icon--t">🚀</div>
        <div class="cal15__event-body">
          <div class="cal15__event-name">Product Launch</div>
          <div class="cal15__event-time">2:00 PM · All-hands</div>
        </div>
        <div class="cal15__event-chip" style="background:#ffd8e4;color:#31111d">2h</div>
      </div>
      <div class="cal15__event" id="ev3">
        <div class="cal15__event-icon cal15__event-icon--s">🎨</div>
        <div class="cal15__event-body">
          <div class="cal15__event-name">Design Review</div>
          <div class="cal15__event-time">4:30 PM · Figma</div>
        </div>
        <div class="cal15__event-chip" style="background:#e2e0f0;color:#1d192b">45m</div>
      </div>
    </div>

    <!-- Material FAB -->
    <div class="cal15__fab" id="cal15Fab">+</div>

  </div>
</div>
```

**CSS:**
```css
.cal15, .cal15 *, .cal15 *::before, .cal15 *::after {
  box-sizing: border-box; margin: 0; padding: 0;
}
.cal15 ::selection { background: #6750a4; color: #fff; }

.cal15 {
  /* Material 3 tonal palette */
  --primary:    #6750a4;
  --primary-c:  #ffffff;
  --primary-ct: #21005d;
  --primary-cont: #eaddff;
  --surface:    #fef7ff;
  --surface-2:  #f7f2fa;
  --surface-v:  #e7e0ec;
  --on-surface: #1d1b20;
  --on-surface-v:#49454f;
  --outline:    #cac4d0;
  --tertiary:   #7d5260;
  --secondary:  #625b71;
  /* Fluent acrylic */
  --fluent-glow: rgba(103,80,164,0.4);

  font-family: 'Roboto', sans-serif;
  background: #e8def8;
  background-image: radial-gradient(circle at 30% 20%, #f0e7fb 0%, #e2d4f5 100%);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  color: var(--on-surface);
}

@keyframes cal15-in {
  from { opacity: 0; transform: translateY(20px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes cal15-ripple {
  from { transform: scale(0); opacity: 0.5; }
  to   { transform: scale(2.6); opacity: 0; }
}
@keyframes cal15-fab-in {
  from { transform: scale(0) rotate(-90deg); }
  to   { transform: scale(1) rotate(0); }
}

.cal15__card {
  background: var(--surface);
  border-radius: 28px;
  max-width: 400px;
  width: 100%;
  overflow: hidden;
  box-shadow:
    0 1px 3px rgba(0,0,0,0.1),
    0 8px 24px rgba(103,80,164,0.18),
    0 24px 48px rgba(103,80,164,0.12);
  animation: cal15-in 0.5s cubic-bezier(0.2,0,0,1) both;
  position: relative;
}

/* ── Header (Material filled style) ── */
.cal15__header {
  background: var(--primary-cont);
  padding: 24px 24px 20px;
  position: relative;
}

.cal15__header-label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--primary-ct);
  opacity: 0.7;
  text-transform: uppercase;
}

.cal15__header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px;
}

.cal15__header-date {
  font-family: 'Roboto Flex', sans-serif;
  font-size: 30px;
  font-weight: 600;
  color: var(--primary-ct);
  letter-spacing: -0.01em;
}

.cal15__header-nav {
  display: flex;
  gap: 4px;
}

/* Material icon button with state layer + ripple */
.cal15__icon-btn {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--primary-ct);
  font-size: 20px;
  position: relative;
  overflow: hidden;
  transition: background 0.2s;
  user-select: none;
}
.cal15__icon-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--primary-ct);
  opacity: 0;
  transition: opacity 0.15s;
}
.cal15__icon-btn:hover::before { opacity: 0.08; }
.cal15__icon-btn:active::before { opacity: 0.12; }

/* ── DOW row ── */
.cal15__dow {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  padding: 16px 16px 8px;
}
.cal15__dw {
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  color: var(--on-surface-v);
}

/* ── Grid ── */
.cal15__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  padding: 0 16px 16px;
  gap: 2px;
}

.cal15__cell {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
}

/* The day number sits in a circular state-layer target */
.cal15__day {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 500;
  color: var(--on-surface);
  position: relative;
  overflow: hidden;
  transition: background 0.2s, color 0.2s;
}

/* Material state layer on hover */
.cal15__day::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--primary);
  opacity: 0;
  transition: opacity 0.15s;
}
.cal15__cell:hover:not(.other) .cal15__day::before { opacity: 0.08; }

.cal15__cell.other .cal15__day { color: var(--on-surface-v); opacity: 0.38; pointer-events: none; }

/* ── Material TODAY: bold accent ring ── */
.cal15__cell.today .cal15__day {
  border: 1px solid var(--primary);
  color: var(--primary);
  font-weight: 700;
}

/* ── Material SELECTED: filled accent circle ── */
.cal15__cell.selected .cal15__day {
  background: var(--primary);
  color: var(--primary-c);
  font-weight: 700;
}
.cal15__cell.selected.today .cal15__day { border-color: transparent; }

/* Ripple element injected by JS */
.cal15__rip {
  position: absolute;
  border-radius: 50%;
  background: var(--primary);
  opacity: 0.4;
  pointer-events: none;
  transform: scale(0);
  animation: cal15-ripple 0.55s ease-out forwards;
}

/* Event indicator dots (Material small) */
.cal15__cell-dots {
  position: absolute;
  bottom: 3px;
  display: flex;
  gap: 3px;
}
.cal15__cdot { width: 4px; height: 4px; border-radius: 50%; }
.cal15__cdot--p { background: var(--primary); }
.cal15__cdot--t { background: var(--tertiary); }
.cal15__cdot--s { background: var(--secondary); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   FLUENT SECTION — reveal-on-hover
   glow border that follows the card,
   acrylic translucency.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.cal15__fluent {
  margin: 0 16px 16px;
  padding: 4px;
  border-radius: 18px;
  background: var(--surface-2);
}

.cal15__fluent-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-surface-v);
  padding: 10px 14px 6px;
}

.cal15__event {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 14px;
  cursor: pointer;
  position: relative;
  background: var(--surface);
  margin-bottom: 4px;
  transition: background 0.2s, box-shadow 0.2s;
  /* Fluent reveal border base */
  border: 1px solid transparent;
}
.cal15__event:last-child { margin-bottom: 0; }

/* Fluent glow-border reveal on hover */
.cal15__event::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 14px;
  padding: 1px;
  background: radial-gradient(120px circle at var(--mx, 50%) var(--my, 50%), var(--fluent-glow), transparent 60%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}
.cal15__event:hover { box-shadow: 0 2px 8px rgba(103,80,164,0.12); }
.cal15__event:hover::after { opacity: 1; }

.cal15__event-icon {
  width: 40px; height: 40px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.cal15__event-icon--p { background: var(--primary-cont); }
.cal15__event-icon--t { background: #ffd8e4; }
.cal15__event-icon--s { background: #e2e0f0; }

.cal15__event-body { flex: 1; min-width: 0; }
.cal15__event-name { font-size: 14px; font-weight: 500; color: var(--on-surface); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal15__event-time { font-size: 12px; color: var(--on-surface-v); margin-top: 1px; }

.cal15__event-chip {
  font-size: 11px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 8px;
  flex-shrink: 0;
}

/* Material FAB */
.cal15__fab {
  position: absolute;
  bottom: 20px; right: 20px;
  width: 56px; height: 56px;
  border-radius: 18px;
  background: var(--primary-cont);
  color: var(--primary-ct);
  display: flex; align-items: center; justify-content: center;
  font-size: 26px;
  cursor: pointer;
  box-shadow: 0 3px 8px rgba(0,0,0,0.2), 0 1px 3px rgba(0,0,0,0.12);
  transition: box-shadow 0.2s, transform 0.15s;
  animation: cal15-fab-in 0.5s cubic-bezier(0.2,0,0,1) 0.3s both;
  overflow: hidden;
  z-index: 5;
}
.cal15__fab:hover { box-shadow: 0 5px 14px rgba(0,0,0,0.28); }
.cal15__fab:active { transform: scale(0.94); }
.cal15__fab::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--primary-ct);
  opacity: 0;
  transition: opacity 0.15s;
}
.cal15__fab:hover::before { opacity: 0.08; }

@media (prefers-reduced-motion: reduce) {
  .cal15 *, .cal15__rip { animation: none !important; transition: none !important; }
}
```

**JS:**
```js
// Material ripple on date cells
function ripple(target, e) {
  const day = target.querySelector('.cal15__day');
  const rect = day.getBoundingClientRect();
  const rip = document.createElement('span');
  rip.className = 'cal15__rip';
  const size = rect.width;
  rip.style.width = rip.style.height = size + 'px';
  const x = (e.clientX || rect.left + rect.width/2) - rect.left - size/2;
  const y = (e.clientY || rect.top + rect.height/2) - rect.top - size/2;
  rip.style.left = x + 'px';
  rip.style.top = y + 'px';
  day.appendChild(rip);
  setTimeout(() => rip.remove(), 600);
}

document.querySelectorAll('#cal15Grid .cal15__cell:not(.other)').forEach(cell => {
  cell.addEventListener('click', function(e) {
    document.querySelectorAll('#cal15Grid .cal15__cell').forEach(c => c.classList.remove('selected'));
    this.classList.add('selected');
    ripple(this, e);
  });
});

// Fluent pointer-tracking glow border
document.querySelectorAll('.cal15__event').forEach(ev => {
  ev.addEventListener('pointermove', function(e) {
    const r = this.getBoundingClientRect();
    this.style.setProperty('--mx', (e.clientX - r.left) + 'px');
    this.style.setProperty('--my', (e.clientY - r.top) + 'px');
  });
});

// FAB ripple
const fab = document.getElementById('cal15Fab');
fab.addEventListener('click', function(e) {
  const rect = this.getBoundingClientRect();
  const rip = document.createElement('span');
  rip.className = 'cal15__rip';
  rip.style.width = rip.style.height = rect.width + 'px';
  rip.style.left = (e.clientX - rect.left - rect.width/2) + 'px';
  rip.style.top = (e.clientY - rect.top - rect.width/2) + 'px';
  rip.style.borderRadius = '50%';
  this.appendChild(rip);
  setTimeout(() => rip.remove(), 600);
});
```

### 16. Minimalist Circular / Radial Calendar Layout

**Type:** CSS + JS
**Description:** Days arranged around an elegant ring instead of a grid, positioned with trig-computed transforms. Concentric guide rings, a slowly rotating tick ring, a serif center hub, gold pulsing today, gold-outline selection, and radially placed weekday labels.

**HTML:**
```html
<div class="cal16">
  <div class="cal16__stage" id="cal16Stage">

    <div class="cal16__ring cal16__ring--1"></div>
    <div class="cal16__ring cal16__ring--2"></div>
    <div class="cal16__ring cal16__ring--3"></div>

    <div class="cal16__ticks" id="cal16Ticks"></div>
    <div class="cal16__wlabels" id="cal16Wlabels"></div>

    <!-- Center hub -->
    <div class="cal16__center">
      <div class="cal16__center-month">June</div>
      <div class="cal16__center-year">2026</div>
      <div class="cal16__center-divider"></div>
      <div class="cal16__center-today">the 8th</div>
      <div class="cal16__center-events">3 events today</div>
    </div>

    <!-- Days injected by JS around the ring -->
    <div id="cal16Days"></div>

    <div class="cal16__nav">
      <div class="cal16__nav-btn">‹</div>
      <div class="cal16__nav-btn">›</div>
    </div>

  </div>
</div>
```

**CSS:**
```css
.cal16, .cal16 *, .cal16 *::before, .cal16 *::after {
  box-sizing: border-box; margin: 0; padding: 0;
}
.cal16 ::selection { background: #c89b6a; color: #fff; }

.cal16 {
  --bg:     #faf8f4;
  --ink:    #2b2820;
  --ink2:   #837c6e;
  --ink3:   #c4bcab;
  --hair:   #e7e1d5;
  --gold:   #c89b6a;
  --gold-d: #a47c4c;
  --rose:   #c97a6a;
  --ring:   #ddd5c6;

  font-family: 'Jost', sans-serif;
  background: var(--bg);
  background-image: radial-gradient(circle at center, #fffdfa 0%, #f2ede3 100%);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  color: var(--ink);
}

@keyframes cal16-in {
  from { opacity: 0; transform: scale(0.9) rotate(-8deg); }
  to   { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes cal16-spin-ring {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes cal16-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(200,155,106,0.5); }
  50%       { box-shadow: 0 0 0 8px rgba(200,155,106,0); }
}

.cal16__stage {
  position: relative;
  width: 560px;
  height: 560px;
  max-width: 92vw;
  max-height: 92vw;
  animation: cal16-in 0.7s cubic-bezier(0.22,1,0.36,1) both;
}

/* Decorative concentric rings */
.cal16__ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid var(--hair);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}
/* Outer ring sits just inside where the day numbers orbit */
.cal16__ring--1 { width: 75%; height: 75%; }
/* Middle dashed ring */
.cal16__ring--2 { width: 52%; height: 52%; border-style: dashed; border-color: var(--ring); }
/* Inner ring hugs the center hub */
.cal16__ring--3 { width: 30%; height: 30%; }

/* Slowly rotating tick marks ring — anchored at exact center, ticks pushed out by transform */
.cal16__ticks {
  position: absolute;
  width: 0; height: 0;
  top: 50%; left: 50%;
  animation: cal16-spin-ring 160s linear infinite;
}
.cal16__tick {
  position: absolute;
  top: 0; left: 0;
  width: 1px; height: 6px;
  background: var(--ink3);
  transform-origin: 0 0;
}

/* ── Day cells positioned around the circle ──
   Each cell uses: rotate(θ) translateY(-radius) rotate(-θ)
   to sit on the ring while keeping text upright.
   θ set inline per cell. ── */
.cal16__day {
  position: absolute;
  top: 50%; left: 50%;
  width: 42px; height: 42px;
  margin: -21px 0 0 -21px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-family: 'Jost', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: var(--ink);
  cursor: pointer;
  transition: all 0.2s;
}
.cal16__day:hover { background: #fff; box-shadow: 0 4px 14px rgba(43,40,32,0.1); }

.cal16__day.weekend { color: var(--rose); }

.cal16__day.today {
  background: var(--gold);
  color: #fff;
  font-weight: 600;
  animation: cal16-pulse 2.5s ease-in-out infinite;
}

.cal16__day.selected:not(.today) {
  background: #fff;
  color: var(--gold-d);
  font-weight: 600;
  box-shadow: 0 0 0 1.5px var(--gold);
}

/* event dot */
.cal16__day .ev {
  position: absolute;
  bottom: 4px;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--rose);
}
.cal16__day.today .ev { background: #fff; }

/* ── Center hub ── */
.cal16__center {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 38%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.cal16__center-month {
  font-family: 'Cormorant', serif;
  font-size: 54px;
  font-weight: 400;
  line-height: 0.9;
  color: var(--ink);
  letter-spacing: 0.01em;
}
.cal16__center-year {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.4em;
  color: var(--ink3);
  margin-top: 8px;
  padding-left: 0.4em;
}

.cal16__center-divider {
  width: 40px; height: 1px;
  background: var(--gold);
  margin: 14px 0;
  opacity: 0.5;
}

.cal16__center-today {
  font-family: 'Cormorant', serif;
  font-style: italic;
  font-size: 18px;
  color: var(--ink2);
}
.cal16__center-events {
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--ink3);
  margin-top: 6px;
  text-transform: uppercase;
}

/* Weekday labels on the outer edge */
.cal16__wlabels {
  position: absolute;
  width: 100%; height: 100%;
  top: 0; left: 0;
}
.cal16__wlabel {
  position: absolute;
  top: 50%; left: 50%;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink3);
  transform-origin: 0 0;
}

/* Nav buttons */
.cal16__nav {
  position: absolute;
  bottom: -6px; left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 12px;
}
.cal16__nav-btn {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--hair);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--gold-d);
  font-size: 15px;
  transition: all 0.2s;
  user-select: none;
  box-shadow: 0 2px 8px rgba(43,40,32,0.06);
}
.cal16__nav-btn:hover { background: var(--gold); color: #fff; border-color: var(--gold); }

@media (max-width: 600px) {
  .cal16__center-month { font-size: 38px; }
  .cal16__day { width: 34px; height: 34px; margin: -17px 0 0 -17px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .cal16 *, .cal16__ticks { animation: none !important; }
}
```

**JS:**
```js
(() => {
  const stage = document.getElementById('cal16Stage');
  const daysWrap = document.getElementById('cal16Days');
  const ticksWrap = document.getElementById('cal16Ticks');
  const wlabelsWrap = document.getElementById('cal16Wlabels');

  const DAYS = 30;
  const today = 8;
  const events = {2:1, 4:1, 7:1, 8:1, 9:1, 11:1, 13:1, 17:1, 20:1, 25:1};
  // June 1, 2026 is a Monday → Sunday index. weekday of day d:
  // Jun 1 = Mon(1). day-of-week = (d) % 7 where 0=Sun... compute:
  const firstDow = 1; // Monday
  const isWeekend = d => { const dow = (firstDow + (d-1)) % 7; return dow === 0 || dow === 6; };

  const R = 210; // radius for day-number ring (stage radius = 280)

  for (let d = 1; d <= DAYS; d++) {
    const angle = (d / DAYS) * 360 - 90; // start at top
    const rad = angle * Math.PI / 180;
    const x = Math.cos(rad) * R;
    const y = Math.sin(rad) * R;
    const el = document.createElement('div');
    el.className = 'cal16__day';
    if (d === today) el.classList.add('today');
    if (isWeekend(d)) el.classList.add('weekend');
    el.style.transform = `translate(${x}px, ${y}px)`;
    el.innerHTML = d + (events[d] ? '<span class="ev"></span>' : '');
    el.addEventListener('click', function() {
      daysWrap.querySelectorAll('.cal16__day').forEach(c => c.classList.remove('selected'));
      this.classList.add('selected');
    });
    daysWrap.appendChild(el);
  }

  // tick marks — placed by rotate + translateY from the dead-center anchor
  const tickR = 232;
  for (let i = 0; i < 60; i++) {
    const t = document.createElement('div');
    t.className = 'cal16__tick';
    const ang = (i / 60) * 360;
    t.style.transform = `rotate(${ang}deg) translate(0, ${-tickR}px)`;
    if (i % 5 === 0) { t.style.height = '10px'; t.style.opacity = '0.6'; }
    ticksWrap.appendChild(t);
  }

  // weekday labels on the outer edge
  const labels = ['S','M','T','W','T','F','S'];
  const RL = 256;
  for (let i = 0; i < 7; i++) {
    const ang = (i / 7) * 360 - 90;
    const rad = ang * Math.PI / 180;
    const x = Math.cos(rad) * RL;
    const y = Math.sin(rad) * RL;
    const l = document.createElement('div');
    l.className = 'cal16__wlabel';
    l.style.transform = `translate(${x}px, ${y}px) translate(-50%, -50%)`;
    l.textContent = labels[i];
    wlabelsWrap.appendChild(l);
  }
})();
```

### 17. Retro Neon / Cyberpunk Grid Calendar

**Type:** CSS + JS
**Description:** Full synthwave: near-black canvas, animated perspective grid floor and glow sun. Orbitron title with stacked text-shadow and a neon flicker keyframe; cells carry cyan glow borders that intensify on hover, today pulses, selection fills hot pink, glowing event dots.

**HTML:**
```html
<div class="cal17">
  <div class="cal17__frame">

    <div class="cal17__head">
      <div>
        <div class="cal17__title">JUNE<span>_26</span></div>
        <div class="cal17__year">// SYS.CAL.2026</div>
      </div>
      <div class="cal17__nav">
        <div class="cal17__nav-btn">‹</div>
        <div class="cal17__nav-btn">›</div>
      </div>
    </div>

    <div class="cal17__dow">
      <div class="cal17__dw">SUN</div><div class="cal17__dw">MON</div><div class="cal17__dw">TUE</div>
      <div class="cal17__dw">WED</div><div class="cal17__dw">THU</div><div class="cal17__dw">FRI</div><div class="cal17__dw">SAT</div>
    </div>

    <div class="cal17__grid" id="cal17Grid">
      <div class="cal17__cell other">25</div><div class="cal17__cell other">26</div><div class="cal17__cell other">27</div>
      <div class="cal17__cell other">28</div><div class="cal17__cell other">29</div><div class="cal17__cell other">30</div><div class="cal17__cell other">31</div>
      <div class="cal17__cell">01</div>
      <div class="cal17__cell">02<span class="ev ev--c"></span></div>
      <div class="cal17__cell">03</div>
      <div class="cal17__cell">04<span class="ev ev--y"></span></div>
      <div class="cal17__cell">05</div>
      <div class="cal17__cell">06</div>
      <div class="cal17__cell">07<span class="ev ev--p"></span></div>
      <div class="cal17__cell today selected">08</div>
      <div class="cal17__cell">09<span class="ev ev--c"></span></div>
      <div class="cal17__cell">10</div>
      <div class="cal17__cell">11<span class="ev ev--p"></span></div>
      <div class="cal17__cell">12</div>
      <div class="cal17__cell">13<span class="ev ev--y"></span></div>
      <div class="cal17__cell">14</div>
      <div class="cal17__cell">15</div>
      <div class="cal17__cell">16</div>
      <div class="cal17__cell">17<span class="ev ev--c"></span></div>
      <div class="cal17__cell">18</div>
      <div class="cal17__cell">19</div>
      <div class="cal17__cell">20<span class="ev ev--p"></span></div>
      <div class="cal17__cell">21</div>
      <div class="cal17__cell">22</div>
      <div class="cal17__cell">23<span class="ev ev--y"></span></div>
      <div class="cal17__cell">24</div>
      <div class="cal17__cell">25<span class="ev ev--c"></span></div>
      <div class="cal17__cell">26</div>
      <div class="cal17__cell">27</div>
      <div class="cal17__cell">28</div>
      <div class="cal17__cell">29</div>
      <div class="cal17__cell">30</div>
      <div class="cal17__cell other">01</div><div class="cal17__cell other">02</div><div class="cal17__cell other">03</div>
      <div class="cal17__cell other">04</div><div class="cal17__cell other">05</div>
    </div>

    <div class="cal17__foot">
      <div class="cal17__stat"><div class="cal17__stat-val">12</div><div class="cal17__stat-lbl">Events</div></div>
      <div class="cal17__stat"><div class="cal17__stat-val">07</div><div class="cal17__stat-lbl">Days_left</div></div>
      <div class="cal17__stat"><div class="cal17__stat-val">03</div><div class="cal17__stat-lbl">Priority</div></div>
    </div>

  </div>
</div>
```

**CSS:**
```css
.cal17, .cal17 *, .cal17 *::before, .cal17 *::after {
  box-sizing: border-box; margin: 0; padding: 0;
}
.cal17 ::selection { background: #ff2bd6; color: #000; }

.cal17 {
  --bg:     #07060f;
  --bg2:    #0d0a1f;
  --pink:   #ff2bd6;
  --cyan:   #00f0ff;
  --purple: #a64dff;
  --yellow: #f5ff3d;
  --grid:   rgba(0,240,255,0.12);
  --text:   #d8e8ff;
  --dim:    #4a5a7a;

  font-family: 'Share Tech Mono', monospace;
  background: var(--bg);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  color: var(--text);
  position: relative;
  overflow: hidden;
}

/* Perspective grid floor */
.cal17::before {
  content: '';
  position: fixed;
  bottom: 0; left: -50%;
  width: 200%; height: 60%;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 50px 50px;
  transform: perspective(300px) rotateX(70deg);
  transform-origin: bottom;
  pointer-events: none;
  z-index: 0;
  animation: cal17-floor 8s linear infinite;
}
@keyframes cal17-floor {
  from { background-position: 0 0; }
  to   { background-position: 0 50px; }
}

/* glow sun */
.cal17::after {
  content: '';
  position: fixed;
  top: 8%; left: 50%;
  transform: translateX(-50%);
  width: 380px; height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,43,214,0.18) 0%, rgba(166,77,255,0.08) 40%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

@keyframes cal17-flicker {
  0%, 100% { opacity: 1; }
  41% { opacity: 1; }
  42% { opacity: 0.4; }
  43% { opacity: 1; }
  45% { opacity: 0.6; }
  46% { opacity: 1; }
}
@keyframes cal17-scan {
  0% { transform: translateY(0); }
  100% { transform: translateY(100%); }
}
@keyframes cal17-in {
  from { opacity: 0; transform: translateY(20px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes cal17-pulse-border {
  0%, 100% { box-shadow: 0 0 8px var(--cyan), inset 0 0 8px rgba(0,240,255,0.3); }
  50%       { box-shadow: 0 0 18px var(--cyan), inset 0 0 14px rgba(0,240,255,0.5); }
}

.cal17__frame {
  position: relative;
  z-index: 1;
  max-width: 520px;
  width: 100%;
  background: rgba(13,10,31,0.85);
  backdrop-filter: blur(8px);
  border: 2px solid var(--cyan);
  border-radius: 4px;
  padding: 28px;
  box-shadow:
    0 0 20px rgba(0,240,255,0.5),
    inset 0 0 30px rgba(0,240,255,0.08),
    0 0 60px rgba(255,43,214,0.2);
  animation: cal17-in 0.6s ease both;
}

/* corner accents */
.cal17__frame::before,
.cal17__frame::after {
  content: '';
  position: absolute;
  width: 18px; height: 18px;
  border: 2px solid var(--pink);
}
.cal17__frame::before { top: -2px; left: -2px; border-right: none; border-bottom: none; }
.cal17__frame::after  { bottom: -2px; right: -2px; border-left: none; border-top: none; }

/* ── Header ── */
.cal17__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(0,240,255,0.2);
}

.cal17__title {
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  font-size: 30px;
  letter-spacing: 0.05em;
  color: var(--pink);
  text-shadow:
    0 0 6px var(--pink),
    0 0 14px var(--pink),
    0 0 28px rgba(255,43,214,0.6);
  animation: cal17-flicker 6s infinite;
  line-height: 1;
}
.cal17__title span {
  color: var(--cyan);
  text-shadow: 0 0 6px var(--cyan), 0 0 14px var(--cyan);
}

.cal17__year {
  font-family: 'Orbitron', sans-serif;
  font-size: 13px;
  letter-spacing: 0.25em;
  color: var(--cyan);
  text-shadow: 0 0 8px var(--cyan);
  margin-top: 4px;
}

.cal17__nav {
  display: flex;
  gap: 8px;
}
.cal17__nav-btn {
  width: 40px; height: 40px;
  background: transparent;
  border: 1px solid var(--purple);
  color: var(--purple);
  font-size: 18px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s;
  user-select: none;
  text-shadow: 0 0 6px var(--purple);
}
.cal17__nav-btn:hover {
  border-color: var(--cyan);
  color: var(--cyan);
  box-shadow: 0 0 14px var(--cyan), inset 0 0 8px rgba(0,240,255,0.3);
  text-shadow: 0 0 8px var(--cyan);
}

/* ── DOW ── */
.cal17__dow {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
  margin-bottom: 5px;
}
.cal17__dw {
  text-align: center;
  font-family: 'Orbitron', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--cyan);
  text-shadow: 0 0 6px rgba(0,240,255,0.6);
  padding: 6px 0;
}

/* ── Grid ── */
.cal17__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
}

.cal17__cell {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Orbitron', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  border: 1px solid rgba(0,240,255,0.15);
  background: rgba(0,240,255,0.02);
  position: relative;
  transition: all 0.18s;
}
.cal17__cell:hover {
  border-color: var(--cyan);
  color: var(--cyan);
  box-shadow: 0 0 12px rgba(0,240,255,0.6), inset 0 0 8px rgba(0,240,255,0.2);
  text-shadow: 0 0 8px var(--cyan);
}
.cal17__cell.other { color: var(--dim); border-color: rgba(74,90,122,0.15); pointer-events: none; opacity: 0.4; }

/* Today — neon cyan box */
.cal17__cell.today {
  border-color: var(--cyan);
  color: var(--cyan);
  text-shadow: 0 0 10px var(--cyan);
  animation: cal17-pulse-border 2s ease-in-out infinite;
}

/* Selected — hot pink fill */
.cal17__cell.selected {
  border-color: var(--pink);
  background: rgba(255,43,214,0.12);
  color: var(--pink);
  text-shadow: 0 0 10px var(--pink);
  box-shadow: 0 0 16px rgba(255,43,214,0.7), inset 0 0 10px rgba(255,43,214,0.3);
}

/* event marker */
.cal17__cell .ev {
  position: absolute;
  bottom: 4px;
  width: 5px; height: 5px;
  border-radius: 50%;
}
.cal17__cell .ev--p { background: var(--pink); box-shadow: 0 0 6px var(--pink); }
.cal17__cell .ev--y { background: var(--yellow); box-shadow: 0 0 6px var(--yellow); }
.cal17__cell .ev--c { background: var(--cyan); box-shadow: 0 0 6px var(--cyan); }

/* ── Footer readout ── */
.cal17__foot {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid rgba(0,240,255,0.2);
  display: flex;
  gap: 10px;
}
.cal17__stat {
  flex: 1;
  border: 1px solid rgba(166,77,255,0.4);
  padding: 10px 12px;
  background: rgba(166,77,255,0.05);
}
.cal17__stat-val {
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  font-size: 22px;
  color: var(--purple);
  text-shadow: 0 0 8px var(--purple);
  line-height: 1;
}
.cal17__stat-lbl {
  font-size: 9px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--dim);
  margin-top: 4px;
}
.cal17__stat:nth-child(1) .cal17__stat-val { color: var(--cyan); text-shadow: 0 0 8px var(--cyan); }
.cal17__stat:nth-child(3) .cal17__stat-val { color: var(--pink); text-shadow: 0 0 8px var(--pink); }

@media (max-width: 480px) {
  .cal17__title { font-size: 22px; }
  .cal17__cell { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .cal17 *, .cal17::before { animation: none !important; }
}
```

**JS:**
```js
document.querySelectorAll('#cal17Grid .cal17__cell:not(.other)').forEach(cell => {
  cell.addEventListener('click', function() {
    document.querySelectorAll('#cal17Grid .cal17__cell').forEach(c => c.classList.remove('selected'));
    this.classList.add('selected');
  });
});
```

### 18. Brutalist Bold Typography Calendar

**Type:** CSS + JS
**Description:** Neo-brutalism with 5px solid borders, hard offset shadow, zero radius and a slam entrance. Archivo Black 64px month, oversized date numerals, mismatched primary colors, a red NOW tag and bordered event squares, plus clashing solid-color footer stat blocks.

**HTML:**
```html
<div class="cal18">
  <div class="cal18__wrap">

    <div class="cal18__head">
      <div class="cal18__month">
        <div class="cal18__month-name">JUNE</div>
        <div class="cal18__month-year">2026 // Q2 // WK23</div>
      </div>
      <div class="cal18__nav">
        <button class="cal18__nav-btn">↑</button>
        <button class="cal18__nav-btn">↓</button>
      </div>
    </div>

    <div class="cal18__dow">
      <div class="cal18__dw">SU</div><div class="cal18__dw">MO</div><div class="cal18__dw">TU</div>
      <div class="cal18__dw">WE</div><div class="cal18__dw">TH</div><div class="cal18__dw">FR</div><div class="cal18__dw">SA</div>
    </div>

    <div class="cal18__grid" id="cal18Grid">
      <div class="cal18__cell other">25</div><div class="cal18__cell other">26</div><div class="cal18__cell other">27</div>
      <div class="cal18__cell other">28</div><div class="cal18__cell other">29</div><div class="cal18__cell other">30</div><div class="cal18__cell other">31</div>
      <div class="cal18__cell">1</div>
      <div class="cal18__cell">2<span class="ev ev--r"></span></div>
      <div class="cal18__cell">3</div>
      <div class="cal18__cell">4<span class="ev ev--g"></span></div>
      <div class="cal18__cell">5</div>
      <div class="cal18__cell">6</div>
      <div class="cal18__cell">7<span class="ev ev--p"></span></div>
      <div class="cal18__cell today selected">8</div>
      <div class="cal18__cell">9<span class="ev ev--r"></span></div>
      <div class="cal18__cell">10</div>
      <div class="cal18__cell">11<span class="ev ev--g"></span></div>
      <div class="cal18__cell">12</div>
      <div class="cal18__cell">13<span class="ev ev--p"></span></div>
      <div class="cal18__cell">14</div>
      <div class="cal18__cell">15</div>
      <div class="cal18__cell">16</div>
      <div class="cal18__cell">17<span class="ev ev--r"></span></div>
      <div class="cal18__cell">18</div>
      <div class="cal18__cell">19</div>
      <div class="cal18__cell">20<span class="ev ev--g"></span></div>
      <div class="cal18__cell">21</div>
      <div class="cal18__cell">22</div>
      <div class="cal18__cell">23<span class="ev ev--p"></span></div>
      <div class="cal18__cell">24</div>
      <div class="cal18__cell">25<span class="ev ev--r"></span></div>
      <div class="cal18__cell">26</div>
      <div class="cal18__cell">27</div>
      <div class="cal18__cell">28</div>
      <div class="cal18__cell">29</div>
      <div class="cal18__cell">30</div>
      <div class="cal18__cell other">1</div><div class="cal18__cell other">2</div><div class="cal18__cell other">3</div>
      <div class="cal18__cell other">4</div><div class="cal18__cell other">5</div>
    </div>

    <div class="cal18__foot">
      <div class="cal18__stat"><div class="cal18__stat-val">12</div><div class="cal18__stat-lbl">Events</div></div>
      <div class="cal18__stat"><div class="cal18__stat-val">04</div><div class="cal18__stat-lbl">Deadlines</div></div>
      <div class="cal18__stat"><div class="cal18__stat-val">07</div><div class="cal18__stat-lbl">Left</div></div>
    </div>

  </div>
</div>
```

**CSS:**
```css
.cal18, .cal18 *, .cal18 *::before, .cal18 *::after {
  box-sizing: border-box; margin: 0; padding: 0;
}
.cal18 ::selection { background: #000; color: #ffe600; }

.cal18 {
  --black:  #000000;
  --paper:  #f4f2e9;
  --yellow: #ffe600;
  --blue:   #2b3fff;
  --red:    #ff2e2e;
  --green:  #00d97e;
  --pink:   #ff6ec7;

  font-family: 'Space Mono', monospace;
  background: var(--paper);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px 20px;
  color: var(--black);
}

@keyframes cal18-slam {
  0%   { transform: scale(1.15) rotate(1deg); opacity: 0; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

.cal18__wrap {
  max-width: 760px;
  width: 100%;
  border: 5px solid var(--black);
  background: var(--paper);
  box-shadow: 12px 12px 0 var(--black);
  animation: cal18-slam 0.4s cubic-bezier(0.34,1.3,0.64,1) both;
}

/* ── Header ── */
.cal18__head {
  display: flex;
  align-items: stretch;
  border-bottom: 5px solid var(--black);
}

.cal18__month {
  flex: 1;
  padding: 18px 22px;
  background: var(--yellow);
  border-right: 5px solid var(--black);
}
.cal18__month-name {
  font-family: 'Archivo Black', sans-serif;
  font-size: 64px;
  line-height: 0.85;
  text-transform: uppercase;
  letter-spacing: -0.03em;
}
.cal18__month-year {
  font-family: 'Space Mono', monospace;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.2em;
  margin-top: 6px;
}

.cal18__nav {
  display: flex;
  flex-direction: column;
}
.cal18__nav-btn {
  flex: 1;
  width: 64px;
  background: var(--paper);
  border: none;
  border-bottom: 5px solid var(--black);
  font-family: 'Archivo Black', sans-serif;
  font-size: 24px;
  cursor: pointer;
  transition: background 0.1s;
  user-select: none;
}
.cal18__nav-btn:last-child { border-bottom: none; }
.cal18__nav-btn:hover { background: var(--blue); color: var(--paper); }

/* ── DOW ── */
.cal18__dow {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-bottom: 5px solid var(--black);
}
.cal18__dw {
  padding: 8px 0;
  text-align: center;
  font-family: 'Archivo Black', sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  border-right: 3px solid var(--black);
}
.cal18__dw:last-child { border-right: none; }
.cal18__dw:first-child, .cal18__dw:last-child { background: var(--black); color: var(--paper); }

/* ── Grid ── */
.cal18__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.cal18__cell {
  aspect-ratio: 1;
  border-right: 3px solid var(--black);
  border-bottom: 3px solid var(--black);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Archivo Black', sans-serif;
  font-size: 28px;
  cursor: pointer;
  position: relative;
  transition: all 0.08s;
  background: var(--paper);
}
.cal18__cell:nth-child(7n) { border-right: none; }
.cal18__cell:nth-last-child(-n+7) { border-bottom: none; }

.cal18__cell:hover {
  background: var(--black);
  color: var(--paper);
  transform: scale(1.04);
  z-index: 2;
  box-shadow: 4px 4px 0 var(--blue);
}

.cal18__cell.other { color: #b8b5a8; pointer-events: none; }

/* Today — yellow block, oversized */
.cal18__cell.today {
  background: var(--yellow);
  font-size: 38px;
}
.cal18__cell.today::after {
  content: 'NOW';
  position: absolute;
  top: 5px; right: 5px;
  font-family: 'Space Mono', monospace;
  font-size: 8px;
  font-weight: 700;
  background: var(--red);
  color: var(--paper);
  padding: 1px 4px;
}

/* Selected — blue invert */
.cal18__cell.selected {
  background: var(--blue);
  color: var(--paper);
}

/* Event corner blocks */
.cal18__cell .ev {
  position: absolute;
  bottom: 5px; left: 5px;
  width: 12px; height: 12px;
  border: 2px solid var(--black);
}
.cal18__cell.today .ev, .cal18__cell.selected .ev { border-color: var(--paper); }
.cal18__cell .ev--r { background: var(--red); }
.cal18__cell .ev--g { background: var(--green); }
.cal18__cell .ev--p { background: var(--pink); }

/* ── Footer ── */
.cal18__foot {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  border-top: 5px solid var(--black);
}
.cal18__stat {
  padding: 16px 18px;
  border-right: 5px solid var(--black);
}
.cal18__stat:last-child { border-right: none; }
.cal18__stat:nth-child(1) { background: var(--red); color: var(--paper); }
.cal18__stat:nth-child(2) { background: var(--green); }
.cal18__stat:nth-child(3) { background: var(--pink); }

.cal18__stat-val {
  font-family: 'Archivo Black', sans-serif;
  font-size: 36px;
  line-height: 1;
}
.cal18__stat-lbl {
  font-family: 'Space Mono', monospace;
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: 4px;
}

@media (max-width: 560px) {
  .cal18__month-name { font-size: 40px; }
  .cal18__cell { font-size: 18px; }
  .cal18__cell.today { font-size: 22px; }
  .cal18__stat-val { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .cal18 * { animation: none !important; transition: none !important; }
}
```

**JS:**
```js
document.querySelectorAll('#cal18Grid .cal18__cell:not(.other)').forEach(cell => {
  cell.addEventListener('click', function() {
    document.querySelectorAll('#cal18Grid .cal18__cell').forEach(c => c.classList.remove('selected'));
    this.classList.add('selected');
  });
});
```

### 19. Interactive 3D Flip Card Calendar

**Type:** CSS + JS
**Description:** Every day is a true 3D flip card using perspective, preserve-3d and rotateY with hidden backfaces. Event days flip on hover; any day flips and stays on click to reveal an emoji, title and time on the back. Dark indigo theme with a selected-event detail panel.

**HTML:**
```html
<div class="cal19">
  <div class="cal19__wrap">

    <div class="cal19__head">
      <div>
        <div class="cal19__title">June <span>2026</span></div>
        <div class="cal19__hint">// hover or tap a marked day to flip</div>
      </div>
      <div class="cal19__nav">
        <div class="cal19__nav-btn">‹</div>
        <div class="cal19__nav-btn">›</div>
      </div>
    </div>

    <div class="cal19__dow">
      <div class="cal19__dw">SUN</div><div class="cal19__dw">MON</div><div class="cal19__dw">TUE</div>
      <div class="cal19__dw">WED</div><div class="cal19__dw">THU</div><div class="cal19__dw">FRI</div><div class="cal19__dw">SAT</div>
    </div>

    <div class="cal19__grid" id="cal19Grid">
      <!-- other -->
      <div class="cal19__card3d other"><div class="cal19__inner"><div class="cal19__face cal19__front">25</div><div class="cal19__face cal19__back"></div></div></div>
      <div class="cal19__card3d other"><div class="cal19__inner"><div class="cal19__face cal19__front">26</div><div class="cal19__face cal19__back"></div></div></div>
      <div class="cal19__card3d other"><div class="cal19__inner"><div class="cal19__face cal19__front">27</div><div class="cal19__face cal19__back"></div></div></div>
      <div class="cal19__card3d other"><div class="cal19__inner"><div class="cal19__face cal19__front">28</div><div class="cal19__face cal19__back"></div></div></div>
      <div class="cal19__card3d other"><div class="cal19__inner"><div class="cal19__face cal19__front">29</div><div class="cal19__face cal19__back"></div></div></div>
      <div class="cal19__card3d other"><div class="cal19__inner"><div class="cal19__face cal19__front">30</div><div class="cal19__face cal19__back"></div></div></div>
      <div class="cal19__card3d other"><div class="cal19__inner"><div class="cal19__face cal19__front">31</div><div class="cal19__face cal19__back"></div></div></div>
      <!-- week 2 -->
      <div class="cal19__card3d weekend"><div class="cal19__inner"><div class="cal19__face cal19__front">1</div><div class="cal19__face cal19__back"></div></div></div>
      <div class="cal19__card3d has-ev"><div class="cal19__inner"><div class="cal19__face cal19__front">2<div class="ev-dots"><span style="background:var(--teal)"></span></div></div><div class="cal19__face cal19__back"><div class="cal19__back-icon">📋</div><div class="cal19__back-title">Standup</div><div class="cal19__back-time">09:00</div></div></div></div>
      <div class="cal19__card3d"><div class="cal19__inner"><div class="cal19__face cal19__front">3</div><div class="cal19__face cal19__back"></div></div></div>
      <div class="cal19__card3d has-ev"><div class="cal19__inner"><div class="cal19__face cal19__front">4<div class="ev-dots"><span style="background:var(--amber)"></span></div></div><div class="cal19__face cal19__back"><div class="cal19__back-icon">🎉</div><div class="cal19__back-title">Holiday</div><div class="cal19__back-time">All day</div></div></div></div>
      <div class="cal19__card3d"><div class="cal19__inner"><div class="cal19__face cal19__front">5</div><div class="cal19__face cal19__back"></div></div></div>
      <div class="cal19__card3d"><div class="cal19__inner"><div class="cal19__face cal19__front">6</div><div class="cal19__face cal19__back"></div></div></div>
      <div class="cal19__card3d weekend has-ev"><div class="cal19__inner"><div class="cal19__face cal19__front">7<div class="ev-dots"><span style="background:var(--pink)"></span></div></div><div class="cal19__face cal19__back"><div class="cal19__back-icon">🍷</div><div class="cal19__back-title">Dinner</div><div class="cal19__back-time">19:30</div></div></div></div>
      <!-- week 3: today=8 -->
      <div class="cal19__card3d today weekend"><div class="cal19__inner"><div class="cal19__face cal19__front">8</div><div class="cal19__face cal19__back"><div class="cal19__back-icon">⭐</div><div class="cal19__back-title">Today</div><div class="cal19__back-time">3 events</div></div></div></div>
      <div class="cal19__card3d has-ev"><div class="cal19__inner"><div class="cal19__face cal19__front">9<div class="ev-dots"><span style="background:var(--teal)"></span><span style="background:var(--violet-l)"></span></div></div><div class="cal19__face cal19__back"><div class="cal19__back-icon">🗓️</div><div class="cal19__back-title">Sprint</div><div class="cal19__back-time">10:00</div></div></div></div>
      <div class="cal19__card3d"><div class="cal19__inner"><div class="cal19__face cal19__front">10</div><div class="cal19__face cal19__back"></div></div></div>
      <div class="cal19__card3d has-ev"><div class="cal19__inner"><div class="cal19__face cal19__front">11<div class="ev-dots"><span style="background:var(--pink)"></span></div></div><div class="cal19__face cal19__back"><div class="cal19__back-icon">🚀</div><div class="cal19__back-title">Launch</div><div class="cal19__back-time">14:00</div></div></div></div>
      <div class="cal19__card3d"><div class="cal19__inner"><div class="cal19__face cal19__front">12</div><div class="cal19__face cal19__back"></div></div></div>
      <div class="cal19__card3d has-ev"><div class="cal19__inner"><div class="cal19__face cal19__front">13<div class="ev-dots"><span style="background:var(--amber)"></span></div></div><div class="cal19__face cal19__back"><div class="cal19__back-icon">🎨</div><div class="cal19__back-title">Review</div><div class="cal19__back-time">16:30</div></div></div></div>
      <div class="cal19__card3d weekend"><div class="cal19__inner"><div class="cal19__face cal19__front">14</div><div class="cal19__face cal19__back"></div></div></div>
      <!-- week 4 -->
      <div class="cal19__card3d weekend"><div class="cal19__inner"><div class="cal19__face cal19__front">15</div><div class="cal19__face cal19__back"></div></div></div>
      <div class="cal19__card3d"><div class="cal19__inner"><div class="cal19__face cal19__front">16</div><div class="cal19__face cal19__back"></div></div></div>
      <div class="cal19__card3d has-ev"><div class="cal19__inner"><div class="cal19__face cal19__front">17<div class="ev-dots"><span style="background:var(--teal)"></span></div></div><div class="cal19__face cal19__back"><div class="cal19__back-icon">📊</div><div class="cal19__back-title">Demo Day</div><div class="cal19__back-time">11:00</div></div></div></div>
      <div class="cal19__card3d"><div class="cal19__inner"><div class="cal19__face cal19__front">18</div><div class="cal19__face cal19__back"></div></div></div>
      <div class="cal19__card3d"><div class="cal19__inner"><div class="cal19__face cal19__front">19</div><div class="cal19__face cal19__back"></div></div></div>
      <div class="cal19__card3d has-ev"><div class="cal19__inner"><div class="cal19__face cal19__front">20<div class="ev-dots"><span style="background:var(--violet-l)"></span></div></div><div class="cal19__face cal19__back"><div class="cal19__back-icon">👥</div><div class="cal19__back-title">1:1</div><div class="cal19__back-time">15:00</div></div></div></div>
      <div class="cal19__card3d weekend"><div class="cal19__inner"><div class="cal19__face cal19__front">21</div><div class="cal19__face cal19__back"></div></div></div>
      <!-- week 5 -->
      <div class="cal19__card3d weekend"><div class="cal19__inner"><div class="cal19__face cal19__front">22</div><div class="cal19__face cal19__back"></div></div></div>
      <div class="cal19__card3d"><div class="cal19__inner"><div class="cal19__face cal19__front">23</div><div class="cal19__face cal19__back"></div></div></div>
      <div class="cal19__card3d has-ev"><div class="cal19__inner"><div class="cal19__face cal19__front">24<div class="ev-dots"><span style="background:var(--pink)"></span></div></div><div class="cal19__face cal19__back"><div class="cal19__back-icon">🏛️</div><div class="cal19__back-title">Board</div><div class="cal19__back-time">14:00</div></div></div></div>
      <div class="cal19__card3d"><div class="cal19__inner"><div class="cal19__face cal19__front">25</div><div class="cal19__face cal19__back"></div></div></div>
      <div class="cal19__card3d"><div class="cal19__inner"><div class="cal19__face cal19__front">26</div><div class="cal19__face cal19__back"></div></div></div>
      <div class="cal19__card3d has-ev"><div class="cal19__inner"><div class="cal19__face cal19__front">27<div class="ev-dots"><span style="background:var(--teal)"></span></div></div><div class="cal19__face cal19__back"><div class="cal19__back-icon">🔄</div><div class="cal19__back-title">Retro</div><div class="cal19__back-time">16:00</div></div></div></div>
      <div class="cal19__card3d weekend"><div class="cal19__inner"><div class="cal19__face cal19__front">28</div><div class="cal19__face cal19__back"></div></div></div>
      <!-- week 6 -->
      <div class="cal19__card3d weekend"><div class="cal19__inner"><div class="cal19__face cal19__front">29</div><div class="cal19__face cal19__back"></div></div></div>
      <div class="cal19__card3d"><div class="cal19__inner"><div class="cal19__face cal19__front">30</div><div class="cal19__face cal19__back"></div></div></div>
      <div class="cal19__card3d other"><div class="cal19__inner"><div class="cal19__face cal19__front">1</div><div class="cal19__face cal19__back"></div></div></div>
      <div class="cal19__card3d other"><div class="cal19__inner"><div class="cal19__face cal19__front">2</div><div class="cal19__face cal19__back"></div></div></div>
      <div class="cal19__card3d other"><div class="cal19__inner"><div class="cal19__face cal19__front">3</div><div class="cal19__face cal19__back"></div></div></div>
      <div class="cal19__card3d other"><div class="cal19__inner"><div class="cal19__face cal19__front">4</div><div class="cal19__face cal19__back"></div></div></div>
      <div class="cal19__card3d other"><div class="cal19__inner"><div class="cal19__face cal19__front">5</div><div class="cal19__face cal19__back"></div></div></div>
    </div>

    <div class="cal19__detail">
      <div class="cal19__detail-date">11</div>
      <div class="cal19__detail-body">
        <div class="cal19__detail-title">Product Launch 🚀</div>
        <div class="cal19__detail-sub">Wednesday, June 11 · 2:00 PM · All-hands</div>
        <div class="cal19__detail-tags">
          <span class="cal19__tag" style="background:rgba(253,121,168,0.15);color:var(--pink)">High priority</span>
          <span class="cal19__tag" style="background:rgba(0,206,201,0.15);color:var(--teal)">2 hours</span>
          <span class="cal19__tag" style="background:rgba(108,92,231,0.15);color:var(--violet-l)">28 invited</span>
        </div>
      </div>
    </div>

  </div>
</div>
```

**CSS:**
```css
.cal19, .cal19 *, .cal19 *::before, .cal19 *::after {
  box-sizing: border-box; margin: 0; padding: 0;
}
.cal19 ::selection { background: #6c5ce7; color: #fff; }

.cal19 {
  --bg1:    #1a1a2e;
  --bg2:    #16213e;
  --card:   #232444;
  --card2:  #2c2d52;
  --border: rgba(255,255,255,0.08);
  --text:   #eef0ff;
  --text2:  #9a9cc4;
  --text3:  #5a5c88;
  --violet: #6c5ce7;
  --violet-l:#a29bfe;
  --pink:   #fd79a8;
  --teal:   #00cec9;
  --amber:  #fdcb6e;

  font-family: 'Sora', sans-serif;
  background: linear-gradient(135deg, var(--bg1), var(--bg2));
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  color: var(--text);
}

@keyframes cal19-in {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.cal19__wrap {
  max-width: 580px;
  width: 100%;
  animation: cal19-in 0.55s ease both;
}

/* ── Header ── */
.cal19__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
  padding: 0 4px;
}
.cal19__title {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.cal19__title span { color: var(--violet-l); }
.cal19__hint {
  font-family: 'Spline Sans Mono', monospace;
  font-size: 11px;
  color: var(--text3);
  letter-spacing: 0.05em;
  margin-top: 3px;
}
.cal19__nav { display: flex; gap: 8px; }
.cal19__nav-btn {
  width: 40px; height: 40px;
  border-radius: 12px;
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--text2);
  font-size: 16px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s;
  user-select: none;
}
.cal19__nav-btn:hover { background: var(--card2); color: var(--violet-l); border-color: var(--violet); }

/* ── DOW ── */
.cal19__dow {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin-bottom: 6px;
}
.cal19__dw {
  text-align: center;
  font-family: 'Spline Sans Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--text3);
  padding: 4px 0;
}

/* ── Grid of flip cards ── */
.cal19__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}

/* The flip card mechanism */
.cal19__card3d {
  aspect-ratio: 1;
  perspective: 700px;
  cursor: pointer;
}
.cal19__card3d.other { pointer-events: none; opacity: 0.25; }

.cal19__inner {
  position: relative;
  width: 100%; height: 100%;
  transition: transform 0.6s cubic-bezier(0.34,1.1,0.5,1);
  transform-style: preserve-3d;
}

/* Flip when card has .flipped OR on hover (for days with events) */
.cal19__card3d.flipped .cal19__inner { transform: rotateY(180deg); }
.cal19__card3d.has-ev:hover .cal19__inner { transform: rotateY(180deg); }

.cal19__face {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Front */
.cal19__front {
  background: var(--card);
  border: 1px solid var(--border);
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  flex-direction: column;
  gap: 4px;
}
.cal19__card3d.weekend .cal19__front { color: var(--violet-l); }

.cal19__front .ev-dots {
  display: flex;
  gap: 3px;
}
.cal19__front .ev-dots span {
  width: 4px; height: 4px; border-radius: 50%;
}

/* Today front */
.cal19__card3d.today .cal19__front {
  background: linear-gradient(135deg, var(--violet), var(--pink));
  border-color: transparent;
  color: #fff;
  font-weight: 800;
  box-shadow: 0 6px 20px rgba(108,92,231,0.4);
}

/* Back — reveals event detail */
.cal19__back {
  transform: rotateY(180deg);
  background: linear-gradient(135deg, var(--card2), var(--card));
  border: 1px solid var(--violet);
  padding: 6px 4px;
  flex-direction: column;
  text-align: center;
  gap: 2px;
}
.cal19__back-icon { font-size: 16px; line-height: 1; }
.cal19__back-title {
  font-size: 8px;
  font-weight: 700;
  color: var(--violet-l);
  letter-spacing: 0.02em;
  line-height: 1.1;
}
.cal19__back-time {
  font-family: 'Spline Sans Mono', monospace;
  font-size: 7px;
  color: var(--text3);
}

/* Selected (clicked) keeps flip + glow */
.cal19__card3d.flipped .cal19__back { box-shadow: inset 0 0 16px rgba(108,92,231,0.25); }

/* ── Detail readout ── */
.cal19__detail {
  margin-top: 20px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 22px;
  display: flex;
  align-items: center;
  gap: 18px;
}
.cal19__detail-date {
  font-size: 44px;
  font-weight: 800;
  color: var(--violet-l);
  line-height: 1;
  flex-shrink: 0;
}
.cal19__detail-body { flex: 1; }
.cal19__detail-title { font-size: 15px; font-weight: 700; }
.cal19__detail-sub { font-size: 12px; color: var(--text2); margin-top: 3px; }
.cal19__detail-tags { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.cal19__tag {
  font-family: 'Spline Sans Mono', monospace;
  font-size: 10px;
  padding: 3px 9px;
  border-radius: 20px;
  font-weight: 500;
}

@media (max-width: 480px) {
  .cal19__title { font-size: 24px; }
  .cal19__front { font-size: 13px; }
  .cal19__detail { flex-direction: column; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .cal19 * { animation: none !important; }
  .cal19__inner { transition: none !important; }
}
```

**JS:**
```js
document.querySelectorAll('#cal19Grid .cal19__card3d:not(.other)').forEach(card => {
  card.addEventListener('click', function() {
    this.classList.toggle('flipped');
  });
});
```

### 20. Infinite Isometric Dashboard Calendar View

**Type:** CSS + JS
**Description:** The grid tilts into an architectural floating plane via rotateX/rotateZ with a float loop. Each date is an extruded 3D block with pseudo-element sides; numbers are counter-rotated to stay upright and legible. Today is a tall bobbing tower, with a floating HUD and legend.

**HTML:**
```html
<div class="cal20">
  <div class="cal20__dash">

    <!-- HUD -->
    <div class="cal20__hud">
      <div>
        <div class="cal20__hud-title">June <span>2026</span></div>
        <div class="cal20__hud-sub">// isometric.view · q2.dashboard</div>
      </div>
      <div class="cal20__hud-stats">
        <div class="cal20__hud-stat"><div class="cal20__hud-stat-v">12</div><div class="cal20__hud-stat-l">Events</div></div>
        <div class="cal20__hud-stat"><div class="cal20__hud-stat-v">8</div><div class="cal20__hud-stat-l">Done</div></div>
        <div class="cal20__hud-stat"><div class="cal20__hud-stat-v">4</div><div class="cal20__hud-stat-l">Due</div></div>
      </div>
    </div>

    <!-- Isometric plane -->
    <div class="cal20__stage">
      <div class="cal20__plane">
        <div class="cal20__plane-label">▦ JUNE.GRID</div>
        <div class="cal20__grid" id="cal20Grid">
          <div class="cal20__tile other">25</div><div class="cal20__tile other">26</div><div class="cal20__tile other">27</div>
          <div class="cal20__tile other">28</div><div class="cal20__tile other">29</div><div class="cal20__tile other">30</div><div class="cal20__tile other">31</div>
          <div class="cal20__tile">1</div>
          <div class="cal20__tile ev ev--teal">2<span class="marker"></span></div>
          <div class="cal20__tile">3</div>
          <div class="cal20__tile ev ev--amber">4<span class="marker"></span></div>
          <div class="cal20__tile">5</div>
          <div class="cal20__tile">6</div>
          <div class="cal20__tile ev ev--pink">7<span class="marker"></span></div>
          <div class="cal20__tile today">8</div>
          <div class="cal20__tile ev ev--teal">9<span class="marker"></span></div>
          <div class="cal20__tile">10</div>
          <div class="cal20__tile ev ev--pink">11<span class="marker"></span></div>
          <div class="cal20__tile">12</div>
          <div class="cal20__tile ev ev--amber">13<span class="marker"></span></div>
          <div class="cal20__tile">14</div>
          <div class="cal20__tile">15</div>
          <div class="cal20__tile">16</div>
          <div class="cal20__tile ev ev--teal">17<span class="marker"></span></div>
          <div class="cal20__tile">18</div>
          <div class="cal20__tile">19</div>
          <div class="cal20__tile ev ev--pink">20<span class="marker"></span></div>
          <div class="cal20__tile">21</div>
          <div class="cal20__tile">22</div>
          <div class="cal20__tile">23</div>
          <div class="cal20__tile ev ev--amber">24<span class="marker"></span></div>
          <div class="cal20__tile">25</div>
          <div class="cal20__tile">26</div>
          <div class="cal20__tile ev ev--teal">27<span class="marker"></span></div>
          <div class="cal20__tile">28</div>
          <div class="cal20__tile">29</div>
          <div class="cal20__tile">30</div>
          <div class="cal20__tile other">1</div><div class="cal20__tile other">2</div><div class="cal20__tile other">3</div>
          <div class="cal20__tile other">4</div><div class="cal20__tile other">5</div>
        </div>
      </div>
    </div>

    <!-- Legend -->
    <div class="cal20__legend">
      <div class="cal20__leg"><span class="cal20__leg-block" style="background:var(--blue)"></span>Today (tower)</div>
      <div class="cal20__leg"><span class="cal20__leg-block" style="background:var(--pink)"></span>Selected</div>
      <div class="cal20__leg"><span class="cal20__leg-block" style="background:var(--teal)"></span>Has event</div>
    </div>

  </div>
</div>
```

**CSS:**
```css
.cal20, .cal20 *, .cal20 *::before, .cal20 *::after {
  box-sizing: border-box; margin: 0; padding: 0;
}
.cal20 ::selection { background: #5e72e4; color: #fff; }

.cal20 {
  --bg1:    #161a2e;
  --bg2:    #1e2440;
  --tile:   #2a3157;
  --tile-l: #343d6b;
  --tile-top: #3a4378;
  --border: rgba(255,255,255,0.1);
  --text:   #eef1ff;
  --text2:  #9aa3d4;
  --text3:  #5a6394;
  --blue:   #5e72e4;
  --blue-l: #8a9bff;
  --pink:   #f56991;
  --teal:   #2dd4bf;
  --amber:  #fbbf24;

  font-family: 'Outfit', sans-serif;
  background: radial-gradient(ellipse at top, var(--bg2), var(--bg1) 80%);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  color: var(--text);
  overflow: hidden;
}

@keyframes cal20-in {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes cal20-float {
  0%, 100% { transform: rotateX(58deg) rotateZ(-45deg) translateZ(0); }
  50%       { transform: rotateX(58deg) rotateZ(-45deg) translateZ(14px); }
}
@keyframes cal20-bob {
  0%, 100% { transform: translateZ(40px); }
  50%       { transform: translateZ(58px); }
}

.cal20__dash {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  max-width: 720px;
  width: 100%;
  animation: cal20-in 0.7s cubic-bezier(0.22,1,0.36,1) both;
}

/* ── HUD header (flat, on top) ── */
.cal20__hud {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(42,49,87,0.5);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px 22px;
  position: relative;
  z-index: 10;
}
.cal20__hud-title {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.cal20__hud-title span { color: var(--blue-l); }
.cal20__hud-sub {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--text3);
  margin-top: 2px;
}
.cal20__hud-stats { display: flex; gap: 22px; }
.cal20__hud-stat { text-align: right; }
.cal20__hud-stat-v { font-size: 22px; font-weight: 700; line-height: 1; }
.cal20__hud-stat-l { font-size: 9px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text3); margin-top: 3px; }
.cal20__hud-stat:nth-child(1) .cal20__hud-stat-v { color: var(--blue-l); }
.cal20__hud-stat:nth-child(2) .cal20__hud-stat-v { color: var(--teal); }
.cal20__hud-stat:nth-child(3) .cal20__hud-stat-v { color: var(--pink); }

/* ── Isometric stage ── */
.cal20__stage {
  perspective: 1400px;
  display: flex;
  justify-content: center;
  padding: 40px 0 60px;
  min-height: 480px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ISOMETRIC TRANSFORM — the core.
   rotateX(58deg) rotateZ(-45deg) tilts
   the whole grid into an architectural
   floating-plane look.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.cal20__plane {
  transform: rotateX(52deg) rotateZ(-45deg);
  transform-style: preserve-3d;
  animation: cal20-float 6s ease-in-out infinite;
  position: relative;
}

.cal20__grid {
  display: grid;
  grid-template-columns: repeat(7, 56px);
  grid-auto-rows: 56px;
  gap: 8px;
  transform-style: preserve-3d;
}

/* Each tile is a raised 3D block */
.cal20__tile {
  position: relative;
  background: var(--tile-top);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  transform-style: preserve-3d;
  transform: translateZ(14px);
  transition: transform 0.25s cubic-bezier(0.34,1.4,0.5,1);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.05);
}

/* Counter-rotate the number to fully face the camera (undo the plane exactly),
   lift it above the tile face, and give it a subtle backing so digits read clearly. */
.cal20__tile .num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 22px;
  padding: 0 4px;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  background: rgba(20,26,46,0.55);
  transform: translateZ(6px) rotateZ(45deg) rotateX(-52deg);
  transform-origin: center;
  pointer-events: none;
  white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
  will-change: transform;
}

/* Block sides via pseudo-elements for the extruded depth */
.cal20__tile::before {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 14px;
  background: var(--tile-l);
  transform: rotateX(-90deg);
  transform-origin: bottom;
  border-radius: 0 0 6px 6px;
}
.cal20__tile::after {
  content: '';
  position: absolute;
  right: 0; top: 0;
  width: 14px; height: 100%;
  background: var(--tile);
  transform: rotateY(90deg);
  transform-origin: right;
  border-radius: 0 6px 6px 0;
}

.cal20__tile:hover { transform: translateZ(34px); }
.cal20__tile.other { opacity: 0.3; pointer-events: none; transform: translateZ(4px); }

/* Today — tall blue tower, bobbing */
.cal20__tile.today {
  background: var(--blue);
  color: #fff;
  font-weight: 800;
  transform: translateZ(46px);
  animation: cal20-bob 2.5s ease-in-out infinite;
  box-shadow: 0 0 24px rgba(94,114,228,0.6);
}
.cal20__tile.today::before { background: #3a4bbf; height: 46px; }
.cal20__tile.today::after  { background: #4a5dd0; }

/* Selected — pink raised */
.cal20__tile.selected {
  background: var(--pink);
  color: #fff;
  font-weight: 700;
  transform: translateZ(38px);
}
.cal20__tile.selected::before { background: #d04a72; height: 38px; }
.cal20__tile.selected::after  { background: #e05882; }

/* Event tiles get a colored top stripe + raised a bit */
.cal20__tile.ev {
  transform: translateZ(24px);
}
.cal20__tile.ev::before { height: 24px; }
.cal20__tile.ev .marker {
  position: absolute;
  top: 4px; right: 4px;
  width: 6px; height: 6px;
  border-radius: 50%;
  transform: translateZ(8px);
}
.cal20__tile.ev--teal  .marker { background: var(--teal); }
.cal20__tile.ev--amber .marker { background: var(--amber); }
.cal20__tile.ev--pink  .marker { background: var(--pink); }

/* On the bright today/selected towers, give the number a light frosted backing
   and lift it higher so it clears the raised tower geometry. */
.cal20__tile.today .num,
.cal20__tile.selected .num {
  background: rgba(255,255,255,0.28);
  color: #fff;
  transform: translateZ(30px) rotateZ(45deg) rotateX(-52deg);
  z-index: 5;
}

/* Floating month label on the plane */
.cal20__plane-label {
  position: absolute;
  top: -54px; left: 0;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--blue-l);
  transform: translateZ(60px);
  white-space: nowrap;
}

/* ── Footer legend ── */
.cal20__legend {
  display: flex;
  justify-content: center;
  gap: 20px;
  position: relative;
  z-index: 10;
}
.cal20__leg {
  display: flex; align-items: center; gap: 7px;
  font-size: 12px; color: var(--text2);
}
.cal20__leg-block {
  width: 14px; height: 14px; border-radius: 3px;
}

@media (max-width: 600px) {
  .cal20__grid { grid-template-columns: repeat(7, 38px); grid-auto-rows: 38px; gap: 5px; }
  .cal20__tile { font-size: 12px; }
  .cal20__hud-stats { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cal20 * { animation: none !important; }
}
```

**JS:**
```js
// Wrap the leading number text of every tile in a counter-rotated .num span
// so digits stay upright/legible on the isometric plane (markers untouched).
document.querySelectorAll('#cal20Grid .cal20__tile').forEach(tile => {
  const first = tile.firstChild;
  if (first && first.nodeType === Node.TEXT_NODE && first.textContent.trim()) {
    const span = document.createElement('span');
    span.className = 'num';
    span.textContent = first.textContent.trim();
    tile.replaceChild(span, first);
  }
});

document.querySelectorAll('#cal20Grid .cal20__tile:not(.other)').forEach(tile => {
  tile.addEventListener('click', function() {
    document.querySelectorAll('#cal20Grid .cal20__tile').forEach(t => t.classList.remove('selected'));
    this.classList.add('selected');
  });
});
```

### 21. Fluid Split-Screen Hero Calendar

**Type:** CSS + JS
**Description:** A landing-page hero split into an immersive seasonal half (sunset gradient, drifting sun orb, layered hills, giant Fraunces month) and a clean date-selector half with pulsing today, event dots, a live selected-day readout and a CTA. Stacks vertically on mobile.

**HTML:**
```html
<div class="cal21">
  <div class="cal21__hero">

    <!-- LEFT: seasonal immersive -->
    <div class="cal21__left">
      <div class="cal21__hills">
        <div class="cal21__hill cal21__hill--1"></div>
        <div class="cal21__hill cal21__hill--2"></div>
        <div class="cal21__hill cal21__hill--3"></div>
      </div>

      <div class="cal21__left-top">
        <div class="cal21__eyebrow">Early Summer</div>
        <div class="cal21__left-meta">Long days, warm light</div>
      </div>

      <div class="cal21__bigmonth">
        <div class="cal21__bigmonth-name">June</div>
        <div class="cal21__bigmonth-year">2026</div>
      </div>

      <div class="cal21__left-foot">
        <div class="cal21__lf-stat">
          <div class="cal21__lf-num">21°</div>
          <div class="cal21__lf-lbl">Avg high</div>
        </div>
        <div class="cal21__lf-stat">
          <div class="cal21__lf-num">15h</div>
          <div class="cal21__lf-lbl">Daylight</div>
        </div>
        <div class="cal21__lf-stat">
          <div class="cal21__lf-num">12</div>
          <div class="cal21__lf-lbl">Events</div>
        </div>
      </div>
    </div>

    <!-- RIGHT: selector -->
    <div class="cal21__right">
      <div class="cal21__right-head">
        <div class="cal21__right-title">Pick a date</div>
        <div class="cal21__right-nav">
          <div class="cal21__rn-btn">‹</div>
          <div class="cal21__rn-btn">›</div>
        </div>
      </div>

      <div class="cal21__dow">
        <div class="cal21__dw">S</div><div class="cal21__dw">M</div><div class="cal21__dw">T</div>
        <div class="cal21__dw">W</div><div class="cal21__dw">T</div><div class="cal21__dw">F</div><div class="cal21__dw">S</div>
      </div>

      <div class="cal21__grid" id="cal21Grid">
        <div class="cal21__cell other weekend">25</div><div class="cal21__cell other">26</div><div class="cal21__cell other">27</div>
        <div class="cal21__cell other">28</div><div class="cal21__cell other">29</div><div class="cal21__cell other">30</div><div class="cal21__cell other weekend">31</div>
        <div class="cal21__cell weekend">1</div>
        <div class="cal21__cell">2<span class="ev"></span></div>
        <div class="cal21__cell">3</div>
        <div class="cal21__cell">4<span class="ev"></span></div>
        <div class="cal21__cell">5</div>
        <div class="cal21__cell">6</div>
        <div class="cal21__cell weekend">7<span class="ev"></span></div>
        <div class="cal21__cell today weekend">8</div>
        <div class="cal21__cell">9<span class="ev"></span></div>
        <div class="cal21__cell">10</div>
        <div class="cal21__cell">11<span class="ev"></span></div>
        <div class="cal21__cell">12</div>
        <div class="cal21__cell">13<span class="ev"></span></div>
        <div class="cal21__cell weekend">14</div>
        <div class="cal21__cell weekend">15</div>
        <div class="cal21__cell">16</div>
        <div class="cal21__cell">17<span class="ev"></span></div>
        <div class="cal21__cell">18</div>
        <div class="cal21__cell">19</div>
        <div class="cal21__cell">20<span class="ev"></span></div>
        <div class="cal21__cell weekend">21</div>
        <div class="cal21__cell weekend">22</div>
        <div class="cal21__cell">23</div>
        <div class="cal21__cell">24<span class="ev"></span></div>
        <div class="cal21__cell">25</div>
        <div class="cal21__cell">26</div>
        <div class="cal21__cell">27<span class="ev"></span></div>
        <div class="cal21__cell weekend">28</div>
        <div class="cal21__cell weekend">29</div>
        <div class="cal21__cell">30</div>
        <div class="cal21__cell other">1</div><div class="cal21__cell other">2</div><div class="cal21__cell other">3</div>
        <div class="cal21__cell other">4</div><div class="cal21__cell other weekend">5</div>
      </div>

      <div class="cal21__readout">
        <div class="cal21__readout-date" id="cal21RoDate">08</div>
        <div class="cal21__readout-body">
          <div class="cal21__readout-title" id="cal21RoTitle">Sunday, June 8</div>
          <div class="cal21__readout-sub">3 events · Sprint, Launch, Review</div>
        </div>
      </div>

      <div class="cal21__cta">Reserve this date →</div>
    </div>

  </div>
</div>
```

**CSS:**
```css
.cal21, .cal21 *, .cal21 *::before, .cal21 *::after {
  box-sizing: border-box; margin: 0; padding: 0;
}
.cal21 ::selection { background: #e8643c; color: #fff; }

.cal21 {
  --cream:  #f6f1e9;
  --ink:    #2a2520;
  --ink2:   #6e665a;
  --ink3:   #b5ad9e;
  --hair:   #e4ddd0;
  --sun:    #e8643c;
  --sun-d:  #c44e2c;
  --leaf:   #4a7c59;
  --sky:    #f3a953;

  font-family: 'Manrope', sans-serif;
  background: var(--cream);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
}

@keyframes cal21-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes cal21-slide-left {
  from { opacity: 0; transform: translateX(-30px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes cal21-slide-right {
  from { opacity: 0; transform: translateX(30px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes cal21-sun-drift {
  0%, 100% { transform: translate(0,0) scale(1); }
  50%       { transform: translate(-20px, 16px) scale(1.05); }
}
@keyframes cal21-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232,100,60,0.4); }
  50%       { box-shadow: 0 0 0 7px rgba(232,100,60,0); }
}

.cal21__hero {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  width: 100%;
  min-height: 100vh;
  animation: cal21-in 0.6s ease both;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   LEFT — immersive seasonal panel
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.cal21__left {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, #f3a953 0%, #e8643c 55%, #c44e2c 100%);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 56px 52px;
  color: var(--cream);
}

/* Big sun orb */
.cal21__left::before {
  content: '';
  position: absolute;
  top: 12%; right: -10%;
  width: 380px; height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,236,200,0.9) 0%, rgba(248,200,120,0.5) 45%, transparent 70%);
  animation: cal21-sun-drift 10s ease-in-out infinite;
}

/* Layered hill silhouettes */
.cal21__hills {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 45%;
  pointer-events: none;
}
.cal21__hill {
  position: absolute;
  bottom: 0; left: -10%;
  width: 120%;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}
.cal21__hill--1 { height: 70%; background: rgba(74,124,89,0.4); }
.cal21__hill--2 { height: 50%; background: rgba(58,98,70,0.5); left: 20%; width: 100%; }
.cal21__hill--3 { height: 32%; background: rgba(42,72,52,0.55); left: -20%; }

.cal21__left-top {
  position: relative;
  z-index: 2;
}
.cal21__eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  opacity: 0.85;
}
.cal21__left-meta {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 18px;
  margin-top: 8px;
  opacity: 0.9;
}

.cal21__bigmonth {
  position: relative;
  z-index: 2;
}
.cal21__bigmonth-name {
  font-family: 'Fraunces', serif;
  font-weight: 300;
  font-size: 110px;
  line-height: 0.82;
  letter-spacing: -0.02em;
}
.cal21__bigmonth-year {
  font-family: 'Fraunces', serif;
  font-size: 28px;
  font-weight: 300;
  opacity: 0.8;
  margin-top: 4px;
}

.cal21__left-foot {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 28px;
}
.cal21__lf-stat {}
.cal21__lf-num {
  font-family: 'Fraunces', serif;
  font-size: 32px;
  font-weight: 600;
  line-height: 1;
}
.cal21__lf-lbl {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.8;
  margin-top: 3px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   RIGHT — minimalist date selector
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.cal21__right {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 56px 52px;
  background: var(--cream);
  animation: cal21-slide-right 0.6s ease 0.1s both;
}

.cal21__right-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 32px;
}
.cal21__right-title {
  font-family: 'Fraunces', serif;
  font-size: 22px;
  font-weight: 600;
}
.cal21__right-nav { display: flex; gap: 6px; }
.cal21__rn-btn {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid var(--hair);
  background: transparent;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--ink2);
  font-size: 15px;
  transition: all 0.2s;
  user-select: none;
}
.cal21__rn-btn:hover { background: var(--sun); color: #fff; border-color: var(--sun); }

.cal21__dow {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: 10px;
}
.cal21__dw {
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ink3);
  text-transform: uppercase;
}

.cal21__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.cal21__cell {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  position: relative;
  transition: all 0.18s;
}
.cal21__cell:hover { background: #fff; box-shadow: 0 4px 14px rgba(42,37,32,0.08); }
.cal21__cell.other { color: var(--ink3); opacity: 0.4; pointer-events: none; }
.cal21__cell.weekend { color: var(--sun-d); }

.cal21__cell.today {
  background: var(--sun);
  color: #fff;
  font-weight: 700;
  animation: cal21-pulse 2.5s ease-in-out infinite;
}

.cal21__cell.selected:not(.today) {
  background: var(--ink);
  color: var(--cream);
  font-weight: 600;
}

.cal21__cell .ev {
  position: absolute;
  bottom: 6px;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--leaf);
}
.cal21__cell.today .ev, .cal21__cell.selected .ev { background: currentColor; }

/* Selected day readout */
.cal21__readout {
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid var(--hair);
  display: flex;
  align-items: center;
  gap: 18px;
}
.cal21__readout-date {
  font-family: 'Fraunces', serif;
  font-size: 50px;
  font-weight: 300;
  color: var(--sun);
  line-height: 1;
}
.cal21__readout-body {}
.cal21__readout-title { font-size: 15px; font-weight: 700; }
.cal21__readout-sub { font-size: 13px; color: var(--ink2); margin-top: 3px; }

.cal21__cta {
  margin-top: 28px;
  padding: 16px;
  border-radius: 16px;
  background: var(--ink);
  color: var(--cream);
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: all 0.2s;
  user-select: none;
}
.cal21__cta:hover { background: var(--sun); }

/* ── Responsive: stack ── */
@media (max-width: 860px) {
  .cal21__hero { grid-template-columns: 1fr; min-height: auto; }
  .cal21__left { padding: 44px 36px; min-height: 360px; gap: 40px; }
  .cal21__bigmonth-name { font-size: 72px; }
  .cal21__right { padding: 40px 36px; }
}
@media (max-width: 480px) {
  .cal21__left { padding: 32px 24px; }
  .cal21__bigmonth-name { font-size: 56px; }
  .cal21__right { padding: 32px 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .cal21 *, .cal21__left::before { animation: none !important; }
}
```

**JS:**
```js
const days = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
// Jun 1 2026 = Monday; cell index 7 = Jun 1
document.querySelectorAll('#cal21Grid .cal21__cell:not(.other)').forEach(cell => {
  cell.addEventListener('click', function() {
    document.querySelectorAll('#cal21Grid .cal21__cell').forEach(c => c.classList.remove('selected'));
    this.classList.add('selected');
    const n = parseInt(this.textContent);
    document.getElementById('cal21RoDate').textContent = String(n).padStart(2,'0');
    const dow = days[(1 + (n-1)) % 7];
    document.getElementById('cal21RoTitle').textContent = dow + ', June ' + n;
  });
});
```

### 22. Micro-Interactions & Liquid Bubble Date Hover

**Type:** CSS + JS
**Description:** A plain-looking grid whose magic is the hover. A goo layer with filter:blur+contrast and screen blending fuses circles into a liquid metaball; each cell's hidden blob springs to scale under the cursor and melts away. Today wobbles a morphing gradient blob.

**HTML:**
```html
<div class="cal22">
  <div class="cal22__card">

    <div class="cal22__head">
      <div>
        <div class="cal22__title">June <span>2026</span></div>
        <div class="cal22__hint">// hover the dates — liquid goo</div>
      </div>
      <div class="cal22__nav">
        <div class="cal22__nav-btn">‹</div>
        <div class="cal22__nav-btn">›</div>
      </div>
    </div>

    <div class="cal22__dow">
      <div class="cal22__dw">S</div><div class="cal22__dw">M</div><div class="cal22__dw">T</div>
      <div class="cal22__dw">W</div><div class="cal22__dw">T</div><div class="cal22__dw">F</div><div class="cal22__dw">S</div>
    </div>

    <div class="cal22__gridwrap">
      <div class="cal22__goo" id="cal22Goo"></div>
      <div class="cal22__grid" id="cal22Grid">
        <div class="cal22__cell other">25</div><div class="cal22__cell other">26</div><div class="cal22__cell other">27</div>
        <div class="cal22__cell other">28</div><div class="cal22__cell other">29</div><div class="cal22__cell other">30</div><div class="cal22__cell other">31</div>
        <div class="cal22__cell">1</div>
        <div class="cal22__cell">2<span class="ev"></span></div>
        <div class="cal22__cell">3</div>
        <div class="cal22__cell">4<span class="ev"></span></div>
        <div class="cal22__cell">5</div>
        <div class="cal22__cell">6</div>
        <div class="cal22__cell">7<span class="ev"></span></div>
        <div class="cal22__cell today">8</div>
        <div class="cal22__cell">9<span class="ev"></span></div>
        <div class="cal22__cell">10</div>
        <div class="cal22__cell">11<span class="ev"></span></div>
        <div class="cal22__cell">12</div>
        <div class="cal22__cell">13<span class="ev"></span></div>
        <div class="cal22__cell">14</div>
        <div class="cal22__cell">15</div>
        <div class="cal22__cell">16</div>
        <div class="cal22__cell">17<span class="ev"></span></div>
        <div class="cal22__cell">18</div>
        <div class="cal22__cell">19</div>
        <div class="cal22__cell">20<span class="ev"></span></div>
        <div class="cal22__cell">21</div>
        <div class="cal22__cell">22</div>
        <div class="cal22__cell">23</div>
        <div class="cal22__cell">24<span class="ev"></span></div>
        <div class="cal22__cell">25</div>
        <div class="cal22__cell">26</div>
        <div class="cal22__cell">27<span class="ev"></span></div>
        <div class="cal22__cell">28</div>
        <div class="cal22__cell">29</div>
        <div class="cal22__cell">30</div>
        <div class="cal22__cell other">1</div><div class="cal22__cell other">2</div><div class="cal22__cell other">3</div>
        <div class="cal22__cell other">4</div><div class="cal22__cell other">5</div>
      </div>
    </div>

    <div class="cal22__foot">
      <div class="cal22__foot-blob"></div>
      <div class="cal22__foot-body">
        <div class="cal22__foot-title">Sunday, June 8</div>
        <div class="cal22__foot-sub">3 events · sprint, launch, review</div>
      </div>
    </div>

  </div>
</div>
```

**CSS:**
```css
.cal22, .cal22 *, .cal22 *::before, .cal22 *::after {
  box-sizing: border-box; margin: 0; padding: 0;
}
.cal22 ::selection { background: #ff5470; color: #fff; }

.cal22 {
  --bg:     #0f0e17;
  --surface:#16151f;
  --text:   #fffffe;
  --text2:  #a7a9be;
  --text3:  #5a5b70;
  --blob:   #ff5470;
  --blob2:  #ff8906;
  --accent: #e53170;
  --soft:   #2e2f3e;

  font-family: 'Bricolage Grotesque', sans-serif;
  background: var(--bg);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  color: var(--text);
}

@keyframes cal22-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes cal22-wobble {
  0%, 100% { border-radius: 42% 58% 56% 44% / 48% 50% 50% 52%; }
  50%       { border-radius: 56% 44% 48% 52% / 56% 44% 56% 44%; }
}

.cal22__card {
  max-width: 460px;
  width: 100%;
  background: var(--surface);
  border-radius: 28px;
  padding: 32px;
  box-shadow: 0 30px 70px rgba(0,0,0,0.5);
  animation: cal22-in 0.5s ease both;
  position: relative;
}

/* ── Header ── */
.cal22__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
}
.cal22__title {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.cal22__title span {
  background: linear-gradient(135deg, var(--blob), var(--blob2));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.cal22__hint {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  color: var(--text3);
  margin-top: 3px;
}
.cal22__nav { display: flex; gap: 8px; }
.cal22__nav-btn {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--soft);
  border: none;
  color: var(--text2);
  font-size: 16px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex; align-items: center; justify-content: center;
  user-select: none;
}
.cal22__nav-btn:hover { background: var(--blob); color: #fff; }

/* ── DOW ── */
.cal22__dow {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: 8px;
}
.cal22__dw {
  text-align: center;
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  color: var(--text3);
  padding: 4px 0;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   GOOEY LIQUID LAYER — the core trick.
   A blurred + high-contrast filter on the
   blob container fuses overlapping circles
   into a single liquid mass (metaball effect).
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.cal22__gridwrap {
  position: relative;
}

/* Goo layer sits behind the numbers */
.cal22__goo {
  position: absolute;
  inset: 0;
  filter: blur(8px) contrast(22);
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: screen;
}

/* Each blob is a small circle that grows + wobbles on its cell's hover */
.cal22__blob {
  position: absolute;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--blob);
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1);
  will-change: transform;
}

.cal22__grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.cal22__cell {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  position: relative;
  border-radius: 50%;
  transition: color 0.2s;
}
.cal22__cell:hover { color: #fff; }
.cal22__cell.other { color: var(--text3); opacity: 0.4; pointer-events: none; }

/* Today — persistent gradient blob underneath via box-shadow ring */
.cal22__cell.today {
  color: #fff;
  font-weight: 800;
}
.cal22__cell.today::after {
  content: '';
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blob), var(--blob2));
  z-index: -1;
  animation: cal22-wobble 4s ease-in-out infinite;
}

.cal22__cell.selected { color: #fff; font-weight: 800; }
.cal22__cell.selected::before {
  content: '';
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  border: 2px solid var(--blob2);
  z-index: -1;
}

/* event dot */
.cal22__cell .ev {
  position: absolute;
  bottom: 8px;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--blob2);
}
.cal22__cell.today .ev, .cal22__cell:hover .ev { background: #fff; }

/* ── Footer readout ── */
.cal22__foot {
  margin-top: 26px;
  padding: 16px 18px;
  border-radius: 18px;
  background: var(--bg);
  display: flex;
  align-items: center;
  gap: 14px;
}
.cal22__foot-blob {
  width: 44px; height: 44px;
  border-radius: 42% 58% 56% 44% / 48% 50% 50% 52%;
  background: linear-gradient(135deg, var(--blob), var(--blob2));
  flex-shrink: 0;
  animation: cal22-wobble 4s ease-in-out infinite;
}
.cal22__foot-body {}
.cal22__foot-title { font-size: 14px; font-weight: 600; }
.cal22__foot-sub { font-family: 'DM Mono', monospace; font-size: 11px; color: var(--text3); margin-top: 2px; }

@media (prefers-reduced-motion: reduce) {
  .cal22 * { animation: none !important; }
}
```

**JS:**
```js
(() => {
  const grid = document.getElementById('cal22Grid');
  const goo  = document.getElementById('cal22Goo');
  const cells = grid.querySelectorAll('.cal22__cell:not(.other)');

  // create one blob per real cell, track to its position
  cells.forEach(cell => {
    const blob = document.createElement('div');
    blob.className = 'cal22__blob';
    goo.appendChild(blob);

    function place() {
      const gr = grid.getBoundingClientRect();
      const cr = cell.getBoundingClientRect();
      blob.style.left = (cr.left - gr.left + cr.width/2) + 'px';
      blob.style.top  = (cr.top  - gr.top  + cr.height/2) + 'px';
    }
    cell.addEventListener('mouseenter', () => { place(); blob.style.transform = 'translate(-50%,-50%) scale(1.15)'; });
    cell.addEventListener('mouseleave', () => { blob.style.transform = 'translate(-50%,-50%) scale(0)'; });
    cell.addEventListener('click', function() {
      cells.forEach(c => c.classList.remove('selected'));
      this.classList.add('selected');
    });
  });
})();
```

### 23. Bento Grid Style Booking System

**Type:** CSS + JS
**Description:** Apple-style asymmetric bento on a 7-column grid. Special cells break uniformity: a 2x2 gradient today hero with event chips, 2x1 event cells with icon+title+time, and a 1x2 cell holding an animated SVG progress ring. Cells lift and shadow on hover.

**HTML:**
```html
<div class="cal23">
  <div class="cal23__wrap">

    <div class="cal23__head">
      <div>
        <div class="cal23__title">June <span>2026</span></div>
        <div class="cal23__sub">Bento booking · 4 of 7 days available</div>
      </div>
      <div class="cal23__nav">
        <div class="cal23__nav-btn">‹</div>
        <div class="cal23__nav-btn">›</div>
      </div>
    </div>

    <!-- Bento: showing the current week with asymmetric emphasis -->
    <div class="cal23__bento" id="cal23Bento">

      <!-- TODAY hero spans 2x2 -->
      <div class="cal23__cell cal23__cell--today">
        <div class="cal23__today-top">
          <div>
            <div class="cal23__today-n">8</div>
            <div class="cal23__today-label">Sunday · Today</div>
          </div>
          <div class="cal23__today-badge">3 events</div>
        </div>
        <div class="cal23__today-events">
          <div class="cal23__today-ev">10:00 Sprint</div>
          <div class="cal23__today-ev">14:00 Launch</div>
        </div>
      </div>

      <!-- Mon 9 -->
      <div class="cal23__cell weekend">
        <div class="cal23__n">9</div>
        <div class="dow-mini">Mon</div>
        <div class="cal23__dots"><span style="background:var(--accent2)"></span></div>
      </div>

      <!-- Tue 10 -->
      <div class="cal23__cell">
        <div class="cal23__n">10</div>
        <div class="dow-mini">Tue</div>
      </div>

      <!-- Wed 11: event-rich 2x1 -->
      <div class="cal23__cell cal23__cell--2x1 cal23__cell--event">
        <div style="display:flex;align-items:flex-start;justify-content:space-between">
          <div><div class="cal23__n">11</div><div class="dow-mini">Wed</div></div>
        </div>
        <div class="cal23__ev-row">
          <div class="cal23__ev-icon" style="background:rgba(244,63,94,0.12);color:var(--rose)">🚀</div>
          <div class="cal23__ev-text">
            <div class="cal23__ev-name">Product Launch</div>
            <div class="cal23__ev-time">2:00 PM · All-hands</div>
          </div>
        </div>
      </div>

      <!-- Thu 12 -->
      <div class="cal23__cell">
        <div class="cal23__n">12</div>
        <div class="dow-mini">Thu</div>
      </div>

      <!-- Fri 13: progress ring cell 1x2 -->
      <div class="cal23__cell cal23__cell--1x2">
        <div style="display:flex;align-items:flex-start;justify-content:space-between">
          <div><div class="cal23__n">13</div><div class="dow-mini">Fri</div></div>
        </div>
        <div class="cal23__ring-wrap">
          <div style="position:relative;width:60px;height:60px">
            <svg class="cal23__ring" width="60" height="60" viewBox="0 0 60 60">
              <circle class="cal23__ring-bg" cx="30" cy="30" r="24"></circle>
              <circle class="cal23__ring-fg" cx="30" cy="30" r="24" stroke="var(--green)" style="--target:45.2; stroke-dashoffset:150.8"></circle>
            </svg>
            <div class="cal23__ring-label">70%</div>
          </div>
        </div>
      </div>

      <!-- Sat 14 -->
      <div class="cal23__cell weekend">
        <div class="cal23__n">14</div>
        <div class="dow-mini">Sat</div>
        <div class="cal23__dots"><span style="background:var(--amber)"></span><span style="background:var(--accent)"></span></div>
      </div>

      <!-- Sun 15 -->
      <div class="cal23__cell weekend">
        <div class="cal23__n">15</div>
        <div class="dow-mini">Sun</div>
      </div>

      <!-- Mon 16 -->
      <div class="cal23__cell">
        <div class="cal23__n">16</div>
        <div class="dow-mini">Mon</div>
      </div>

      <!-- Tue 17: event 2x1 -->
      <div class="cal23__cell cal23__cell--2x1 cal23__cell--event">
        <div><div class="cal23__n">17</div><div class="dow-mini">Tue</div></div>
        <div class="cal23__ev-row">
          <div class="cal23__ev-icon" style="background:rgba(6,182,212,0.12);color:var(--accent2)">📊</div>
          <div class="cal23__ev-text">
            <div class="cal23__ev-name">Demo Day + Q2 Report</div>
            <div class="cal23__ev-time">11:00 AM · 2 sessions</div>
          </div>
        </div>
      </div>

      <!-- Wed 18 -->
      <div class="cal23__cell">
        <div class="cal23__n">18</div>
        <div class="dow-mini">Wed</div>
      </div>

    </div>

  </div>
</div>
```

**CSS:**
```css
.cal23, .cal23 *, .cal23 *::before, .cal23 *::after {
  box-sizing: border-box; margin: 0; padding: 0;
}
.cal23 ::selection { background: #111; color: #fff; }

.cal23 {
  --bg:     #ececef;
  --card:   #ffffff;
  --ink:    #18181b;
  --ink2:   #71717a;
  --ink3:   #a1a1aa;
  --line:   #e4e4e7;
  --accent: #4f46e5;
  --accent2:#06b6d4;
  --green:  #10b981;
  --amber:  #f59e0b;
  --rose:   #f43f5e;

  font-family: 'Geist', -apple-system, sans-serif;
  background: var(--bg);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 20px;
  color: var(--ink);
}

@keyframes cal23-in {
  from { opacity: 0; transform: translateY(14px) scale(0.99); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes cal23-ring {
  to { stroke-dashoffset: var(--target); }
}

.cal23__wrap {
  max-width: 720px;
  width: 100%;
  animation: cal23-in 0.5s ease both;
}

/* ── Header ── */
.cal23__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 16px;
  padding: 0 2px;
}
.cal23__title { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; }
.cal23__title span { color: var(--ink3); font-weight: 500; }
.cal23__sub { font-size: 13px; color: var(--ink2); margin-top: 2px; }
.cal23__nav { display: flex; gap: 6px; }
.cal23__nav-btn {
  width: 38px; height: 38px; border-radius: 12px;
  background: var(--card); border: 1px solid var(--line);
  cursor: pointer; color: var(--ink2); font-size: 15px;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.18s; user-select: none;
}
.cal23__nav-btn:hover { border-color: var(--ink); color: var(--ink); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   BENTO GRID — asymmetric spans.
   7 base columns; special cells span
   2×2 / 2×1 / 1×2 for the bento look.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.cal23__bento {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: 78px;
  gap: 8px;
}

.cal23__cell {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 12px;
  cursor: pointer;
  transition: all 0.18s;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}
.cal23__cell:hover {
  border-color: var(--ink);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(24,24,27,0.1);
}
.cal23__cell.other { background: transparent; border-color: transparent; pointer-events: none; }
.cal23__cell.other .cal23__n { color: var(--ink3); opacity: 0.5; }

.cal23__n { font-size: 16px; font-weight: 600; line-height: 1; }
.cal23__cell .dow-mini { font-size: 10px; color: var(--ink3); font-weight: 500; margin-top: 2px; }

/* span helpers */
.cal23__cell--2x2 { grid-column: span 2; grid-row: span 2; }
.cal23__cell--2x1 { grid-column: span 2; }
.cal23__cell--1x2 { grid-row: span 2; }

/* ── TODAY: big 2×2 hero cell ── */
.cal23__cell--today {
  grid-column: span 2; grid-row: span 2;
  background: linear-gradient(135deg, var(--accent), #7c3aed);
  border-color: transparent;
  color: #fff;
  padding: 16px;
  justify-content: space-between;
}
.cal23__cell--today:hover { box-shadow: 0 14px 32px rgba(79,70,229,0.4); }
.cal23__today-top { display: flex; align-items: flex-start; justify-content: space-between; }
.cal23__today-n { font-size: 40px; font-weight: 800; line-height: 0.9; }
.cal23__today-badge {
  font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  background: rgba(255,255,255,0.2); padding: 4px 9px; border-radius: 20px;
}
.cal23__today-label { font-size: 12px; opacity: 0.8; }
.cal23__today-events { display: flex; gap: 5px; margin-top: 8px; }
.cal23__today-ev {
  flex: 1; background: rgba(255,255,255,0.16); border-radius: 8px; padding: 6px 8px;
  font-size: 10px; font-weight: 500;
}

/* progress ring cell (an event with a goal) */
.cal23__ring-wrap { display: flex; align-items: center; justify-content: center; flex: 1; }
.cal23__ring { transform: rotate(-90deg); }
.cal23__ring-bg { fill: none; stroke: var(--line); stroke-width: 6; }
.cal23__ring-fg { fill: none; stroke-width: 6; stroke-linecap: round; stroke-dasharray: 150.8;
  animation: cal23-ring 1.1s cubic-bezier(0.22,1,0.36,1) forwards; }
.cal23__ring-label {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  font-size: 13px; font-weight: 700;
}

/* event-rich 2x1 cell */
.cal23__cell--event { justify-content: space-between; }
.cal23__cell--event .cal23__ev-row { display: flex; align-items: center; gap: 6px; margin-top: auto; }
.cal23__ev-icon { width: 24px; height: 24px; border-radius: 7px; display: flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0; }
.cal23__ev-text { min-width: 0; }
.cal23__ev-name { font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal23__ev-time { font-size: 10px; color: var(--ink2); }

/* selected */
.cal23__cell.selected { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }

/* mini event dots */
.cal23__dots { display: flex; gap: 3px; margin-top: auto; }
.cal23__dots span { width: 5px; height: 5px; border-radius: 50%; }

/* corner pill for weekend */
.cal23__cell.weekend .cal23__n { color: var(--accent); }

@media (max-width: 600px) {
  .cal23__bento { grid-auto-rows: 64px; gap: 6px; }
  .cal23__today-n { font-size: 30px; }
  .cal23__title { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .cal23 * { animation: none !important; transition: none !important; }
}
```

**JS:**
```js
document.querySelectorAll('#cal23Bento .cal23__cell:not(.other):not(.cal23__cell--today)').forEach(cell => {
  cell.addEventListener('click', function() {
    document.querySelectorAll('#cal23Bento .cal23__cell').forEach(c => c.classList.remove('selected'));
    this.classList.add('selected');
  });
});
```

### 24. Vintage Skeuomorphic / Paper-Torn Tear-off Design

**Type:** CSS + JS
**Description:** A realistic desk tear-off pad on a wood-grain wall. Metal binding with 3D rings, paper depth via gradients and ruled lines, a stacked-page look, and a jagged torn bottom edge built with CSS mask. Giant serif date, typewriter weekday, and a tear-off page-rip animation.

**HTML:**
```html
<div class="cal24">
  <div class="cal24__pad">

    <div class="cal24__binding">
      <div class="cal24__ring"></div>
      <div class="cal24__ring"></div>
      <div class="cal24__ring"></div>
      <div class="cal24__ring"></div>
      <div class="cal24__ring"></div>
    </div>

    <div class="cal24__stack">
      <div class="cal24__page" id="cal24Page">
        <div class="cal24__top">
          <div class="cal24__month">June</div>
          <div class="cal24__year">2026</div>
        </div>

        <div class="cal24__bignum" id="cal24Num">8</div>
        <div class="cal24__weekday" id="cal24Day">Sunday</div>

        <div class="cal24__stamps">
          <div class="cal24__stamp">Sprint 10AM</div>
          <div class="cal24__stamp">Launch 2PM</div>
          <div class="cal24__stamp">Review 4PM</div>
        </div>

        <div class="cal24__note">— day 159 of 365 · 207 remaining —</div>
      </div>
    </div>

    <div class="cal24__controls">
      <button class="cal24__btn cal24__btn--ghost" id="cal24Prev">‹ Yesterday</button>
      <button class="cal24__btn" id="cal24Tear">Tear off ✂</button>
    </div>

  </div>
</div>
```

**CSS:**
```css
.cal24, .cal24 *, .cal24 *::before, .cal24 *::after {
  box-sizing: border-box; margin: 0; padding: 0;
}
.cal24 ::selection { background: #b23a2e; color: #fff; }

.cal24 {
  --wood:   #6b4f3a;
  --wood2:  #543d2c;
  --paper:  #f5f0e3;
  --paper2: #ebe3d0;
  --ink:    #2b2620;
  --red:    #b23a2e;
  --red-d:  #8a2c22;
  --gold:   #b8923f;
  --shadow: rgba(0,0,0,0.3);

  font-family: 'Oswald', sans-serif;
  background:
    repeating-linear-gradient(90deg, var(--wood) 0px, var(--wood) 38px, var(--wood2) 38px, var(--wood2) 40px),
    var(--wood);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  color: var(--ink);
}

@keyframes cal24-in {
  from { opacity: 0; transform: translateY(-20px) rotate(-1deg); }
  to   { opacity: 1; transform: translateY(0) rotate(0); }
}
@keyframes cal24-tear {
  0%   { transform: rotate(0) translateY(0); opacity: 1; }
  40%  { transform: rotate(-6deg) translateY(8px); }
  100% { transform: rotate(-14deg) translateY(420px) translateX(-60px); opacity: 0; }
}
@keyframes cal24-flutter {
  0%, 100% { transform: rotate(0deg); }
  50%       { transform: rotate(0.6deg); }
}

.cal24__pad {
  position: relative;
  width: 340px;
  animation: cal24-in 0.6s cubic-bezier(0.34,1.3,0.64,1) both;
}

/* The metal binding at top */
.cal24__binding {
  position: relative;
  height: 34px;
  background: linear-gradient(180deg, #c9c9cf 0%, #8e8e96 50%, #6a6a72 100%);
  border-radius: 8px 8px 0 0;
  box-shadow: inset 0 2px 3px rgba(255,255,255,0.5), 0 3px 6px var(--shadow);
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  padding: 0 24px 0;
  z-index: 5;
}
/* binding rings */
.cal24__ring {
  width: 14px; height: 26px;
  background: linear-gradient(180deg, #5a5a62, #2e2e34);
  border-radius: 7px;
  margin-bottom: -13px;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.3), 0 2px 3px rgba(0,0,0,0.4);
  position: relative;
  z-index: 6;
}

/* Stacked pages behind (depth) */
.cal24__stack {
  position: relative;
}
.cal24__stack::before,
.cal24__stack::after {
  content: '';
  position: absolute;
  left: 4px; right: 4px;
  background: var(--paper2);
  border-radius: 0 0 3px 3px;
}
.cal24__stack::before { top: 6px; bottom: -6px; box-shadow: 0 6px 10px var(--shadow); }
.cal24__stack::after  { top: 3px; bottom: -3px; background: #f0ead9; }

/* ── The top (current) page ── */
.cal24__page {
  position: relative;
  z-index: 3;
  background: var(--paper);
  background-image:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,0.6), transparent 60%),
    repeating-linear-gradient(0deg, transparent 0 27px, rgba(43,38,32,0.04) 27px 28px);
  padding: 18px 24px 0;
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
  animation: cal24-flutter 5s ease-in-out infinite;
  /* Torn bottom edge via mask */
  -webkit-mask:
    linear-gradient(#000 0 0) top/100% calc(100% - 14px) no-repeat,
    radial-gradient(circle at 8px -2px, transparent 7px, #000 8px) bottom left/16px 14px repeat-x;
  mask:
    linear-gradient(#000 0 0) top/100% calc(100% - 14px) no-repeat,
    radial-gradient(circle at 8px -2px, transparent 7px, #000 8px) bottom left/16px 14px repeat-x;
  padding-bottom: 22px;
}

/* Header row: month + year */
.cal24__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 8px;
}
.cal24__month {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 26px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--red);
}
.cal24__year {
  font-family: 'Special Elite', monospace;
  font-size: 15px;
  color: var(--ink);
}

/* The giant date numeral */
.cal24__bignum {
  font-family: 'Playfair Display', serif;
  font-weight: 900;
  font-size: 150px;
  line-height: 0.9;
  text-align: center;
  color: var(--ink);
  margin: 6px 0 -4px;
  text-shadow: 1px 1px 0 rgba(255,255,255,0.6), 3px 3px 5px rgba(0,0,0,0.12);
}

.cal24__weekday {
  text-align: center;
  font-family: 'Special Elite', monospace;
  font-size: 20px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--red);
  padding-left: 0.3em;
}

.cal24__note {
  text-align: center;
  font-family: 'Special Elite', monospace;
  font-size: 11px;
  color: var(--ink);
  opacity: 0.6;
  margin-top: 8px;
  letter-spacing: 0.05em;
}

/* tiny event stamps */
.cal24__stamps {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 12px 0 4px;
}
.cal24__stamp {
  font-family: 'Special Elite', monospace;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border: 1px solid var(--red);
  color: var(--red);
  padding: 3px 7px;
  border-radius: 2px;
  transform: rotate(-2deg);
  opacity: 0.85;
}
.cal24__stamp:nth-child(2) { transform: rotate(1.5deg); border-color: var(--gold); color: var(--gold); }
.cal24__stamp:nth-child(3) { transform: rotate(-1deg); border-color: var(--ink); color: var(--ink); }

/* ── Tear-off button ── */
.cal24__controls {
  position: relative;
  z-index: 4;
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 22px;
}
.cal24__btn {
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 10px 18px;
  border-radius: 4px;
  cursor: pointer;
  border: none;
  transition: all 0.15s;
  user-select: none;
  box-shadow: 0 3px 0 var(--red-d), 0 5px 8px rgba(0,0,0,0.3);
  background: var(--red);
  color: var(--paper);
}
.cal24__btn:active { transform: translateY(3px); box-shadow: 0 0 0 var(--red-d), 0 2px 4px rgba(0,0,0,0.3); }
.cal24__btn--ghost { background: var(--paper); color: var(--ink); box-shadow: 0 3px 0 #c9bfa6, 0 5px 8px rgba(0,0,0,0.25); }

.cal24__page.tearing { animation: cal24-tear 0.7s ease-in forwards; }

@media (max-width: 400px) {
  .cal24__pad { width: 290px; }
  .cal24__bignum { font-size: 120px; }
}
@media (prefers-reduced-motion: reduce) {
  .cal24 * { animation: none !important; }
}
```

**JS:**
```js
(() => {
  const page = document.getElementById('cal24Page');
  const num  = document.getElementById('cal24Num');
  const day  = document.getElementById('cal24Day');
  const days = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
  let date = 8; // June 8 = Sunday (index 0)

  function render() {
    num.textContent = date;
    day.textContent = days[(date - 8 + 700) % 7];
  }

  document.getElementById('cal24Tear').addEventListener('click', () => {
    page.classList.add('tearing');
    setTimeout(() => {
      date = date >= 30 ? 1 : date + 1;
      render();
      page.classList.remove('tearing');
    }, 650);
  });
  document.getElementById('cal24Prev').addEventListener('click', () => {
    date = date <= 1 ? 30 : date - 1;
    render();
  });
})();
```

### 25. Vertical Timeline Slipstream Calendar

**Type:** CSS + JS
**Description:** Dates cascade down a central spine, alternating left and right via a 2-column grid with directional slide-in. Nodes pin to a gradient line; today is a green card with a pulsing node. Each card stacks date, weekday and a dotted event list; collapses to a single rail on mobile.

**HTML:**
```html
<div class="cal25">
  <div class="cal25__wrap">

    <div class="cal25__head">
      <div class="cal25__title">June <b>2026</b></div>
      <div class="cal25__sub">Timeline · this week</div>
    </div>

    <div class="cal25__stream" id="cal25Stream">

      <div class="cal25__divider"><span>Week 23</span></div>

      <!-- Sun 8 — today -->
      <div class="cal25__item cal25__item--left cal25__item--today">
        <div class="cal25__node"></div>
        <div class="cal25__card">
          <div class="cal25__date-row">
            <span class="cal25__date-num">8</span>
            <span class="cal25__date-dow">Sun · Today</span>
          </div>
          <div class="cal25__events">
            <span class="cal25__ev"><span class="cal25__ev-dot" style="background:#fff"></span>Sprint Planning · 10:00</span>
            <span class="cal25__ev"><span class="cal25__ev-dot" style="background:#fff"></span>Product Launch · 14:00</span>
          </div>
        </div>
      </div>

      <!-- Mon 9 -->
      <div class="cal25__item cal25__item--right">
        <div class="cal25__node"></div>
        <div class="cal25__card">
          <div class="cal25__date-row">
            <span class="cal25__date-num">9</span>
            <span class="cal25__date-dow">Monday</span>
          </div>
          <div class="cal25__events">
            <span class="cal25__ev"><span class="cal25__ev-dot" style="background:var(--terra)"></span>Design Review · 11:00</span>
          </div>
        </div>
      </div>

      <!-- Tue 10 -->
      <div class="cal25__item cal25__item--left">
        <div class="cal25__node"></div>
        <div class="cal25__card">
          <div class="cal25__date-row">
            <span class="cal25__date-num">10</span>
            <span class="cal25__date-dow">Tuesday</span>
          </div>
          <div class="cal25__events">
            <span class="cal25__ev"><span class="cal25__ev-dot" style="background:var(--gold2)"></span>Free day</span>
          </div>
        </div>
      </div>

      <!-- Wed 11 -->
      <div class="cal25__item cal25__item--right">
        <div class="cal25__node"></div>
        <div class="cal25__card">
          <div class="cal25__date-row">
            <span class="cal25__date-num">11</span>
            <span class="cal25__date-dow">Wednesday</span>
          </div>
          <div class="cal25__events">
            <span class="cal25__ev"><span class="cal25__ev-dot" style="background:var(--terra)"></span>Board Meeting · 09:00</span>
            <span class="cal25__ev"><span class="cal25__ev-dot" style="background:var(--green)"></span>Team Dinner · 19:30</span>
          </div>
        </div>
      </div>

      <!-- Thu 12 -->
      <div class="cal25__item cal25__item--left">
        <div class="cal25__node"></div>
        <div class="cal25__card">
          <div class="cal25__date-row">
            <span class="cal25__date-num">12</span>
            <span class="cal25__date-dow">Thursday</span>
          </div>
          <div class="cal25__events">
            <span class="cal25__ev"><span class="cal25__ev-dot" style="background:var(--gold2)"></span>1:1 with Sam · 15:00</span>
          </div>
        </div>
      </div>

      <!-- Fri 13 -->
      <div class="cal25__item cal25__item--right">
        <div class="cal25__node"></div>
        <div class="cal25__card">
          <div class="cal25__date-row">
            <span class="cal25__date-num">13</span>
            <span class="cal25__date-dow">Friday</span>
          </div>
          <div class="cal25__events">
            <span class="cal25__ev"><span class="cal25__ev-dot" style="background:var(--green)"></span>Retro · 16:00</span>
          </div>
        </div>
      </div>

    </div>

  </div>
</div>
```

**CSS:**
```css
.cal25, .cal25 *, .cal25 *::before, .cal25 *::after {
  box-sizing: border-box; margin: 0; padding: 0;
}
.cal25 ::selection { background: #5b8a72; color: #fff; }

.cal25 {
  --bg:     #faf8f4;
  --line:   #d9d2c4;
  --ink:    #2a2620;
  --ink2:   #6e665a;
  --ink3:   #a59c8c;
  --green:  #5b8a72;
  --terra:  #c17a52;
  --gold:   #c9a44a;
  --gold2:  #b89344;
  --card:   #ffffff;

  font-family: 'Inter', sans-serif;
  background: var(--bg);
  background-image: radial-gradient(circle at 50% 0%, #fffdf9, #f2ece1);
  min-height: 100vh;
  display: flex;
  justify-content: center;
  padding: 48px 20px;
  color: var(--ink);
}

@keyframes cal25-in {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes cal25-slip-l {
  from { opacity: 0; transform: translateX(-30px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes cal25-slip-r {
  from { opacity: 0; transform: translateX(30px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes cal25-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(91,138,114,0.4); }
  50%       { box-shadow: 0 0 0 8px rgba(91,138,114,0); }
}

.cal25__wrap {
  max-width: 680px;
  width: 100%;
  animation: cal25-in 0.5s ease both;
}

/* ── Header ── */
.cal25__head {
  text-align: center;
  margin-bottom: 40px;
}
.cal25__title {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 46px;
  font-weight: 400;
  line-height: 1;
}
.cal25__title b { font-style: normal; font-weight: 600; color: var(--green); }
.cal25__sub {
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink3);
  margin-top: 8px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   VERTICAL TIMELINE — central line,
   items alternate left/right via grid.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.cal25__stream {
  position: relative;
  padding: 10px 0;
}
/* the central spine */
.cal25__stream::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 2px;
  background: linear-gradient(180deg, transparent, var(--line) 6%, var(--line) 94%, transparent);
  transform: translateX(-50%);
}

.cal25__item {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-bottom: 14px;
}

/* node on the spine */
.cal25__node {
  position: absolute;
  left: 50%; top: 22px;
  transform: translateX(-50%);
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--card);
  border: 3px solid var(--ink3);
  z-index: 3;
}

/* card */
.cal25__card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px 18px;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 2px 8px rgba(42,38,32,0.05);
}
.cal25__card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(42,38,32,0.1); border-color: var(--green); }

/* LEFT item: card in col 1, animate from left */
.cal25__item--left .cal25__card {
  grid-column: 1;
  margin-right: 32px;
  text-align: right;
  animation: cal25-slip-l 0.5s ease both;
}
/* RIGHT item: card in col 2, animate from right */
.cal25__item--right .cal25__card {
  grid-column: 2;
  margin-left: 32px;
  animation: cal25-slip-r 0.5s ease both;
}

/* card content */
.cal25__date-row { display: flex; align-items: baseline; gap: 8px; }
.cal25__item--left .cal25__date-row { justify-content: flex-end; }
.cal25__date-num {
  font-family: 'Fraunces', serif;
  font-size: 30px;
  font-weight: 600;
  line-height: 1;
  color: var(--ink);
}
.cal25__date-dow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink3);
}
.cal25__events { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.cal25__item--left .cal25__events { align-items: flex-end; }
.cal25__ev {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--ink2);
}
.cal25__ev-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }

/* Today node + card emphasis */
.cal25__item--today .cal25__node {
  background: var(--green);
  border-color: var(--green);
  width: 18px; height: 18px;
  animation: cal25-pulse 2.5s ease-in-out infinite;
}
.cal25__item--today .cal25__card {
  background: linear-gradient(135deg, var(--green), #4a7560);
  border-color: transparent;
  color: #fff;
}
.cal25__item--today .cal25__date-num { color: #fff; }
.cal25__item--today .cal25__date-dow { color: rgba(255,255,255,0.7); }
.cal25__item--today .cal25__ev { color: rgba(255,255,255,0.9); }

/* selected */
.cal25__card.selected { border-color: var(--terra); box-shadow: 0 0 0 2px var(--terra); }

/* month divider chip */
.cal25__divider {
  position: relative;
  text-align: center;
  margin: 8px 0 20px;
  z-index: 3;
}
.cal25__divider span {
  display: inline-block;
  background: var(--bg);
  padding: 4px 16px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink3);
  border: 1px solid var(--line);
  border-radius: 20px;
}

@media (max-width: 560px) {
  .cal25__stream::before { left: 20px; }
  .cal25__item { grid-template-columns: 1fr; }
  .cal25__node { left: 20px; }
  .cal25__item--left .cal25__card,
  .cal25__item--right .cal25__card {
    grid-column: 1;
    margin-left: 44px;
    margin-right: 0;
    text-align: left;
    animation: cal25-slip-r 0.5s ease both;
  }
  .cal25__item--left .cal25__date-row,
  .cal25__item--left .cal25__events { justify-content: flex-start; align-items: flex-start; }
  .cal25__divider { text-align: left; padding-left: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .cal25 * { animation: none !important; }
}
```

**JS:**
```js
document.querySelectorAll('#cal25Stream .cal25__card').forEach(card => {
  card.addEventListener('click', function() {
    document.querySelectorAll('#cal25Stream .cal25__card').forEach(c => c.classList.remove('selected'));
    this.classList.add('selected');
  });
});
```

### 26. Kinetic Typography Changing Calendar

**Type:** CSS + JS
**Description:** Hyper-minimal where the numbers are the layout, built on the Roboto Flex variable font. Cursor distance drives a decaying wave of font-variation-settings (weight, width and scale) so digits swell outward and settle on leave. Today stays heavy in accent lime.

**HTML:**
```html
<div class="cal26">
  <div class="cal26__wrap">

    <div class="cal26__head">
      <div class="cal26__title">JUNE<br><em>2026</em></div>
      <div class="cal26__hint">Hover across a row — the weights ripple like a wave</div>
    </div>

    <div class="cal26__dow">
      <div class="cal26__dw">Su</div><div class="cal26__dw">Mo</div><div class="cal26__dw">Tu</div>
      <div class="cal26__dw">We</div><div class="cal26__dw">Th</div><div class="cal26__dw">Fr</div><div class="cal26__dw">Sa</div>
    </div>

    <div class="cal26__grid" id="cal26Grid">
      <div class="cal26__cell other"><span class="cal26__n">25</span></div>
      <div class="cal26__cell other"><span class="cal26__n">26</span></div>
      <div class="cal26__cell other"><span class="cal26__n">27</span></div>
      <div class="cal26__cell other"><span class="cal26__n">28</span></div>
      <div class="cal26__cell other"><span class="cal26__n">29</span></div>
      <div class="cal26__cell other"><span class="cal26__n">30</span></div>
      <div class="cal26__cell other"><span class="cal26__n">31</span></div>
      <div class="cal26__cell"><span class="cal26__n">1</span></div>
      <div class="cal26__cell has-ev"><span class="cal26__n">2</span></div>
      <div class="cal26__cell"><span class="cal26__n">3</span></div>
      <div class="cal26__cell has-ev"><span class="cal26__n">4</span></div>
      <div class="cal26__cell"><span class="cal26__n">5</span></div>
      <div class="cal26__cell"><span class="cal26__n">6</span></div>
      <div class="cal26__cell has-ev"><span class="cal26__n">7</span></div>
      <div class="cal26__cell today has-ev"><span class="cal26__n">8</span></div>
      <div class="cal26__cell has-ev"><span class="cal26__n">9</span></div>
      <div class="cal26__cell"><span class="cal26__n">10</span></div>
      <div class="cal26__cell has-ev"><span class="cal26__n">11</span></div>
      <div class="cal26__cell"><span class="cal26__n">12</span></div>
      <div class="cal26__cell has-ev"><span class="cal26__n">13</span></div>
      <div class="cal26__cell"><span class="cal26__n">14</span></div>
      <div class="cal26__cell"><span class="cal26__n">15</span></div>
      <div class="cal26__cell"><span class="cal26__n">16</span></div>
      <div class="cal26__cell has-ev"><span class="cal26__n">17</span></div>
      <div class="cal26__cell"><span class="cal26__n">18</span></div>
      <div class="cal26__cell"><span class="cal26__n">19</span></div>
      <div class="cal26__cell has-ev"><span class="cal26__n">20</span></div>
      <div class="cal26__cell"><span class="cal26__n">21</span></div>
      <div class="cal26__cell"><span class="cal26__n">22</span></div>
      <div class="cal26__cell"><span class="cal26__n">23</span></div>
      <div class="cal26__cell has-ev"><span class="cal26__n">24</span></div>
      <div class="cal26__cell"><span class="cal26__n">25</span></div>
      <div class="cal26__cell"><span class="cal26__n">26</span></div>
      <div class="cal26__cell has-ev"><span class="cal26__n">27</span></div>
      <div class="cal26__cell"><span class="cal26__n">28</span></div>
      <div class="cal26__cell"><span class="cal26__n">29</span></div>
      <div class="cal26__cell"><span class="cal26__n">30</span></div>
      <div class="cal26__cell other"><span class="cal26__n">1</span></div>
      <div class="cal26__cell other"><span class="cal26__n">2</span></div>
      <div class="cal26__cell other"><span class="cal26__n">3</span></div>
      <div class="cal26__cell other"><span class="cal26__n">4</span></div>
      <div class="cal26__cell other"><span class="cal26__n">5</span></div>
    </div>

    <div class="cal26__foot">
      <div class="cal26__foot-date">Sunday <em>08</em></div>
      <div class="cal26__foot-meta">3 EVENTS · WEIGHT-WAVE INTERACTION</div>
    </div>

  </div>
</div>
```

**CSS:**
```css
.cal26, .cal26 *, .cal26 *::before, .cal26 *::after {
  box-sizing: border-box; margin: 0; padding: 0;
}
.cal26 ::selection { background: #e8ff3d; color: #000; }

.cal26 {
  --bg:     #0c0c0c;
  --text:   #f5f5f5;
  --text2:  #6a6a6a;
  --text3:  #333333;
  --accent: #e8ff3d;

  font-family: 'Roboto Flex', sans-serif;
  background: var(--bg);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  color: var(--text);
}

@keyframes cal26-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.cal26__wrap {
  max-width: 760px;
  width: 100%;
  animation: cal26-in 0.6s ease both;
}

/* ── Header ── */
.cal26__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 40px;
  border-bottom: 1px solid var(--text3);
  padding-bottom: 18px;
}
.cal26__title {
  font-variation-settings: 'wght' 800, 'opsz' 100;
  font-size: 44px;
  line-height: 0.9;
  letter-spacing: -0.02em;
}
.cal26__title em {
  font-style: normal;
  color: var(--accent);
}
.cal26__hint {
  font-variation-settings: 'wght' 400;
  font-size: 12px;
  color: var(--text2);
  letter-spacing: 0.06em;
  text-align: right;
  max-width: 180px;
}

/* DOW */
.cal26__dow {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: 18px;
}
.cal26__dw {
  text-align: center;
  font-variation-settings: 'wght' 500;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text2);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   KINETIC TYPE GRID — numbers ARE the
   layout. Hover drives a weight/width/
   scale wave via variable-font settings;
   neighbours respond at decaying strength
   through JS-set CSS custom properties.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.cal26__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0;
}

.cal26__cell {
  aspect-ratio: 1.1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
}

.cal26__n {
  --w: 200;          /* weight */
  --wd: 100;         /* width  */
  --s: 1;            /* scale  */
  font-variation-settings: 'wght' var(--w), 'wdth' var(--wd), 'opsz' 144;
  font-size: 34px;
  color: var(--text);
  line-height: 1;
  transform: scale(var(--s));
  transition:
    font-variation-settings 0.35s cubic-bezier(0.22,1,0.36,1),
    transform 0.35s cubic-bezier(0.22,1,0.36,1),
    color 0.35s;
  will-change: font-variation-settings, transform;
}

.cal26__cell.other .cal26__n { color: var(--text3); }
.cal26__cell.other { pointer-events: none; }

/* today: persistent heavy + accent */
.cal26__cell.today .cal26__n {
  --w: 900; --wd: 130;
  color: var(--accent);
}

/* selected */
.cal26__cell.selected .cal26__n {
  --w: 800;
  color: var(--accent);
}
.cal26__cell.selected::after {
  content: '';
  position: absolute;
  bottom: 18%;
  width: 26px; height: 3px;
  background: var(--accent);
  border-radius: 2px;
}

/* event underline tick */
.cal26__cell.has-ev::before {
  content: '';
  position: absolute;
  bottom: 22%;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--text2);
  transition: background 0.3s;
}
.cal26__cell:hover.has-ev::before,
.cal26__cell.today.has-ev::before { background: var(--accent); }

/* ── Footer readout ── */
.cal26__foot {
  margin-top: 36px;
  border-top: 1px solid var(--text3);
  padding-top: 20px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.cal26__foot-date {
  font-variation-settings: 'wght' 700, 'wdth' 120;
  font-size: 26px;
}
.cal26__foot-date em { font-style: normal; color: var(--accent); }
.cal26__foot-meta {
  font-variation-settings: 'wght' 400;
  font-size: 12px;
  color: var(--text2);
  letter-spacing: 0.08em;
}

@media (max-width: 560px) {
  .cal26__title { font-size: 30px; }
  .cal26__n { font-size: 24px; }
  .cal26__hint { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cal26 *, .cal26__n { animation: none !important; transition: color 0.2s !important; }
}
```

**JS:**
```js
(() => {
  const grid = document.getElementById('cal26Grid');
  const cells = Array.from(grid.querySelectorAll('.cal26__cell'));

  // map each real cell to its grid index for distance-based falloff
  cells.forEach((cell, i) => {
    if (cell.classList.contains('other')) return;
    cell.addEventListener('mousemove', () => {
      const col = i % 7, row = Math.floor(i / 7);
      cells.forEach((c, j) => {
        if (c.classList.contains('other') || c.classList.contains('today')) return;
        const cc = j % 7, cr = Math.floor(j / 7);
        const dist = Math.hypot(cc - col, cr - row);
        const n = c.querySelector('.cal26__n');
        // wave: closer = heavier/wider/bigger
        const f = Math.max(0, 1 - dist / 2.6);
        const w  = 200 + f * 700;       // 200 → 900
        const wd = 100 + f * 50;        // 100 → 150
        const s  = 1 + f * 0.35;        // 1 → 1.35
        n.style.setProperty('--w', w.toFixed(0));
        n.style.setProperty('--wd', wd.toFixed(0));
        n.style.setProperty('--s', s.toFixed(3));
      });
    });
  });

  grid.addEventListener('mouseleave', () => {
    cells.forEach(c => {
      if (c.classList.contains('today')) return;
      const n = c.querySelector('.cal26__n');
      n.style.setProperty('--w', '200');
      n.style.setProperty('--wd', '100');
      n.style.setProperty('--s', '1');
    });
  });

  cells.forEach(cell => {
    if (cell.classList.contains('other')) return;
    cell.addEventListener('click', function() {
      cells.forEach(c => c.classList.remove('selected'));
      this.classList.add('selected');
    });
  });
})();
```

### 27. Diagonal Slanted Grid Calendar

**Type:** CSS + JS
**Description:** Aggressive sports/gaming energy: a clip-path banner, week rows skewed with skewX and numbers counter-skewed to stay upright. Today is a red diagonal-split block with a corner flag, event days get skew-corrected underline bars, and footer stat panels match the slant.

**HTML:**
```html
<div class="cal27">
  <div class="cal27__wrap">

    <div class="cal27__head">
      <div class="cal27__title">June · 2026</div>
      <div class="cal27__nav">
        <button class="cal27__nav-btn">‹</button>
        <button class="cal27__nav-btn">›</button>
      </div>
    </div>

    <div class="cal27__dow">
      <div class="cal27__dw">Sun</div><div class="cal27__dw">Mon</div><div class="cal27__dw">Tue</div>
      <div class="cal27__dw">Wed</div><div class="cal27__dw">Thu</div><div class="cal27__dw">Fri</div><div class="cal27__dw">Sat</div>
    </div>

    <div class="cal27__grid" id="cal27Grid">
      <div class="cal27__row">
        <div class="cal27__cell other"><span class="cal27__n">25</span></div>
        <div class="cal27__cell other"><span class="cal27__n">26</span></div>
        <div class="cal27__cell other"><span class="cal27__n">27</span></div>
        <div class="cal27__cell other"><span class="cal27__n">28</span></div>
        <div class="cal27__cell other"><span class="cal27__n">29</span></div>
        <div class="cal27__cell other"><span class="cal27__n">30</span></div>
        <div class="cal27__cell other"><span class="cal27__n">31</span></div>
      </div>
      <div class="cal27__row">
        <div class="cal27__cell"><span class="cal27__n">1</span></div>
        <div class="cal27__cell ev ev--lime"><span class="cal27__n">2</span></div>
        <div class="cal27__cell"><span class="cal27__n">3</span></div>
        <div class="cal27__cell ev ev--amber"><span class="cal27__n">4</span></div>
        <div class="cal27__cell"><span class="cal27__n">5</span></div>
        <div class="cal27__cell"><span class="cal27__n">6</span></div>
        <div class="cal27__cell ev ev--cyan"><span class="cal27__n">7</span></div>
      </div>
      <div class="cal27__row">
        <div class="cal27__cell today"><span class="cal27__n">8</span></div>
        <div class="cal27__cell ev ev--lime"><span class="cal27__n">9</span></div>
        <div class="cal27__cell"><span class="cal27__n">10</span></div>
        <div class="cal27__cell ev ev--cyan"><span class="cal27__n">11</span></div>
        <div class="cal27__cell"><span class="cal27__n">12</span></div>
        <div class="cal27__cell ev ev--amber"><span class="cal27__n">13</span></div>
        <div class="cal27__cell"><span class="cal27__n">14</span></div>
      </div>
      <div class="cal27__row">
        <div class="cal27__cell"><span class="cal27__n">15</span></div>
        <div class="cal27__cell"><span class="cal27__n">16</span></div>
        <div class="cal27__cell ev ev--lime"><span class="cal27__n">17</span></div>
        <div class="cal27__cell"><span class="cal27__n">18</span></div>
        <div class="cal27__cell"><span class="cal27__n">19</span></div>
        <div class="cal27__cell ev ev--cyan"><span class="cal27__n">20</span></div>
        <div class="cal27__cell"><span class="cal27__n">21</span></div>
      </div>
      <div class="cal27__row">
        <div class="cal27__cell"><span class="cal27__n">22</span></div>
        <div class="cal27__cell"><span class="cal27__n">23</span></div>
        <div class="cal27__cell ev ev--amber"><span class="cal27__n">24</span></div>
        <div class="cal27__cell"><span class="cal27__n">25</span></div>
        <div class="cal27__cell"><span class="cal27__n">26</span></div>
        <div class="cal27__cell ev ev--lime"><span class="cal27__n">27</span></div>
        <div class="cal27__cell"><span class="cal27__n">28</span></div>
      </div>
      <div class="cal27__row">
        <div class="cal27__cell"><span class="cal27__n">29</span></div>
        <div class="cal27__cell"><span class="cal27__n">30</span></div>
        <div class="cal27__cell other"><span class="cal27__n">1</span></div>
        <div class="cal27__cell other"><span class="cal27__n">2</span></div>
        <div class="cal27__cell other"><span class="cal27__n">3</span></div>
        <div class="cal27__cell other"><span class="cal27__n">4</span></div>
        <div class="cal27__cell other"><span class="cal27__n">5</span></div>
      </div>
    </div>

    <div class="cal27__foot">
      <div class="cal27__stat"><div class="cal27__stat-inner"><div class="cal27__stat-val">12</div><div class="cal27__stat-lbl">Events</div></div></div>
      <div class="cal27__stat"><div class="cal27__stat-inner"><div class="cal27__stat-val">08</div><div class="cal27__stat-lbl">Sessions</div></div></div>
      <div class="cal27__stat"><div class="cal27__stat-inner"><div class="cal27__stat-val">07</div><div class="cal27__stat-lbl">Days left</div></div></div>
    </div>

  </div>
</div>
```

**CSS:**
```css
.cal27, .cal27 *, .cal27 *::before, .cal27 *::after {
  box-sizing: border-box; margin: 0; padding: 0;
}
.cal27 ::selection { background: #ff3b30; color: #fff; }

.cal27 {
  --bg:     #101216;
  --bg2:    #16191f;
  --panel:  #1d2129;
  --panel2: #252a34;
  --text:   #f2f4f8;
  --text2:  #8a92a6;
  --text3:  #4a5160;
  --red:    #ff3b30;
  --lime:   #c6ff00;
  --cyan:   #00e0ff;
  --amber:  #ffb300;

  font-family: 'Saira', sans-serif;
  background: var(--bg);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  color: var(--text);
  overflow: hidden;
}

/* diagonal stripe background */
.cal27::before {
  content: '';
  position: fixed;
  inset: -20%;
  background: repeating-linear-gradient(
    -22deg,
    transparent 0, transparent 60px,
    rgba(255,255,255,0.015) 60px, rgba(255,255,255,0.015) 61px
  );
  pointer-events: none;
}

@keyframes cal27-in {
  from { opacity: 0; transform: translateX(-30px) skewX(-3deg); }
  to   { opacity: 1; transform: translateX(0) skewX(0); }
}
@keyframes cal27-flash {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.6; }
}

.cal27__wrap {
  position: relative;
  z-index: 1;
  max-width: 720px;
  width: 100%;
  animation: cal27-in 0.5s cubic-bezier(0.22,1,0.36,1) both;
}

/* ── Header — slanted banner ── */
.cal27__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--red);
  padding: 14px 28px;
  clip-path: polygon(0 0, 100% 0, calc(100% - 22px) 100%, 0 100%);
  margin-bottom: 4px;
}
.cal27__title {
  font-family: 'Saira Condensed', sans-serif;
  font-weight: 900;
  font-size: 36px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-style: italic;
  line-height: 1;
  color: #fff;
}
.cal27__nav { display: flex; gap: 6px; }
.cal27__nav-btn {
  width: 38px; height: 38px;
  background: rgba(0,0,0,0.25);
  border: none;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  clip-path: polygon(0 0, 100% 0, 85% 100%, 0 100%);
  transition: background 0.15s;
  user-select: none;
}
.cal27__nav-btn:hover { background: rgba(0,0,0,0.5); }

/* DOW slanted strip */
.cal27__dow {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: var(--panel2);
  clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
  margin-bottom: 8px;
}
.cal27__dw {
  text-align: center;
  font-family: 'Saira Condensed', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text2);
  padding: 8px 0;
  transform: skewX(-12deg);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SLANTED GRID — each row is skewed,
   numbers counter-skewed to stay upright.
   Diagonal cut via clip-path + skewX.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.cal27__grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cal27__row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  transform: skewX(-12deg);
}

.cal27__cell {
  aspect-ratio: 1.15;
  background: var(--panel);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  transition: all 0.18s;
  overflow: hidden;
  border-left: 3px solid transparent;
}
.cal27__cell:hover { background: var(--panel2); border-left-color: var(--lime); }
.cal27__cell.other { background: var(--bg2); pointer-events: none; }

/* counter-skew the contents so numbers read upright */
.cal27__n {
  font-family: 'Saira Condensed', sans-serif;
  font-weight: 700;
  font-size: 22px;
  color: var(--text);
  transform: skewX(12deg);
  line-height: 1;
}
.cal27__cell.other .cal27__n { color: var(--text3); }

/* today — red slash block */
.cal27__cell.today {
  background: linear-gradient(110deg, var(--red) 60%, #d62d23 60%);
  border-left-color: var(--lime);
}
.cal27__cell.today .cal27__n { color: #fff; font-weight: 900; font-size: 26px; }
.cal27__cell.today::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  border-style: solid;
  border-width: 0 14px 14px 0;
  border-color: transparent var(--lime) transparent transparent;
  transform: skewX(12deg);
}

/* selected */
.cal27__cell.selected {
  background: var(--panel2);
  border-left-color: var(--cyan);
}
.cal27__cell.selected .cal27__n { color: var(--cyan); font-weight: 900; }

/* event flag — colored corner triangle */
.cal27__cell.ev::before {
  content: '';
  position: absolute;
  bottom: 5px; left: 8px;
  width: 16px; height: 3px;
  transform: skewX(12deg);
}
.cal27__cell.ev--lime::before  { background: var(--lime); }
.cal27__cell.ev--cyan::before  { background: var(--cyan); }
.cal27__cell.ev--amber::before { background: #ffb300; }

/* ── Footer slanted stats ── */
.cal27__foot {
  display: flex;
  gap: 6px;
  margin-top: 10px;
}
.cal27__stat {
  flex: 1;
  background: var(--panel);
  padding: 12px 18px;
  transform: skewX(-12deg);
}
.cal27__stat-inner { transform: skewX(12deg); }
.cal27__stat-val {
  font-family: 'Saira Condensed', sans-serif;
  font-weight: 900;
  font-size: 28px;
  line-height: 1;
  font-style: italic;
}
.cal27__stat-lbl {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text2);
  margin-top: 3px;
}
.cal27__stat:nth-child(1) .cal27__stat-val { color: var(--red); }
.cal27__stat:nth-child(2) .cal27__stat-val { color: var(--lime); }
.cal27__stat:nth-child(3) .cal27__stat-val { color: var(--cyan); }

@media (max-width: 560px) {
  .cal27__title { font-size: 26px; }
  .cal27__n { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .cal27 * { animation: none !important; transition: none !important; }
}
```

**JS:**
```js
document.querySelectorAll('#cal27Grid .cal27__cell:not(.other)').forEach(cell => {
  cell.addEventListener('click', function() {
    document.querySelectorAll('#cal27Grid .cal27__cell').forEach(c => c.classList.remove('selected'));
    this.classList.add('selected');
  });
});
```

---
## 33 CSS Card Hover Effects

URL: https://codefronts.com/motion/css-card-hover-effects/
Description: 33 hand-coded CSS card hover effects with live demos — multi-axis 3D tilt with parallax, glowing gradient glassmorphic border, image zoom with content slide-up, front-to-back 3D flip, sibling de-emphasis with :has(), minimalist elevation, plus 27 more (elastic lift, conic-gradient border, holographic foil, neon sign, glitch RGB split, magnetic float, blueprint reveal, aurora drift and more). 26 pure CSS + 7 with a small vanilla JS snippet for cursor tracking. prefers-reduced-motion respected, scoped class names, MIT-licensed.
Demo count: 33

### 01. 3D Tilt & Parallax Card Effects

**Type:** CSS + JS
**Description:** A premium portfolio card that follows the cursor's orientation in real 3D, with the background, badge, title, and description each pushed onto separate Z-axis depth planes so they shift at different rates as you move. A specular glare tracks the pointer across the surface, making the whole card feel like a physical, light-catching object — ideal for featured work, showcase grids, and hero web-app cards.

**HTML:**
```html
<div class="card-01">
  <article class="card-01__card" data-card-01="root">
    <div class="card-01__bg"      data-depth="10"></div>
    <span class="card-01__tag"    data-depth="34">Featured Work</span>
    <div class="card-01__emblem"  data-depth="46">◈</div>
    <h2 class="card-01__title"    data-depth="60">Aether<br>Studio</h2>
    <p class="card-01__desc"      data-depth="40">An award-winning interactive site. Background, type, and badge each ride their own depth plane.</p>
    <div class="card-01__glare"></div>
  </article>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,900&family=Inter+Tight:wght@400;500;600&display=swap');

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

.card-01 {
  min-height: 460px;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 30% 20%, #1f2347, #090a18 65%);
  font-family: 'Inter Tight', sans-serif;
  padding: 2rem;
  perspective: 1300px;
}

.card-01__card {
  position: relative;
  width: 340px;
  height: 460px;
  border-radius: 26px;
  cursor: pointer;
  transform-style: preserve-3d;
  transition: transform 0.15s ease-out, box-shadow 0.5s ease;
  box-shadow: 0 30px 60px rgba(0,0,0,0.5);
  background: #0e1024;
  border: 1px solid rgba(255,255,255,0.08);
}

.card-01__card > * {
  position: absolute;
  transition: transform 0.15s ease-out;
  will-change: transform;
}

/* split background — far layer */
.card-01__bg {
  inset: 0;
  border-radius: 26px;
  overflow: hidden;
  background:
    radial-gradient(circle at 30% 25%, #ff7a59 0 18%, transparent 19%),
    radial-gradient(circle at 75% 70%, #5b8cff 0 24%, transparent 25%),
    linear-gradient(160deg, #2a2f63, #11132c);
}
.card-01__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 40%, transparent, rgba(9,10,24,0.6));
}

/* floating glare */
.card-01__glare {
  inset: 0;
  border-radius: 26px;
  background: radial-gradient(circle at var(--card-01-gx,50%) var(--card-01-gy,50%), rgba(255,255,255,0.22), transparent 45%);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 6;
  pointer-events: none;
}
.card-01__card:hover .card-01__glare { opacity: 1; }

.card-01__tag {
  top: 2rem; left: 2rem;
  z-index: 5;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #ffd6c4;
}
.card-01__emblem {
  top: 2rem; right: 2rem;
  z-index: 5;
  width: 46px; height: 46px;
  border-radius: 14px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.25);
  display: grid; place-items: center;
  color: #fff; font-weight: 700;
  backdrop-filter: blur(4px);
}
.card-01__title {
  left: 2rem; bottom: 5.4rem;
  z-index: 5;
  font-family: 'Fraunces', serif;
  font-weight: 900;
  font-size: 3rem;
  line-height: 0.9;
  color: #fff;
}
.card-01__desc {
  left: 2rem; right: 2rem; bottom: 2rem;
  z-index: 5;
  font-size: 0.85rem;
  line-height: 1.55;
  color: #c4c8e6;
}

@media (prefers-reduced-motion: reduce) {
  .card-01__card,
  .card-01__card > *,
  .card-01__glare {
    transition: none !important;
  }
}
```

**JS:**
```js
(() => {
  const root = document.querySelector('.card-01');
  if (!root) return;
  const card = root.querySelector('[data-card-01="root"]');
  if (!card) return;
  const layers = card.querySelectorAll('[data-depth]');
  card.addEventListener('mousemove', (e) => {
    const r = card.getBoundingClientRect();
    const px = (e.clientX - r.left) / r.width;
    const py = (e.clientY - r.top) / r.height;
    card.style.transform =
      `rotateY(${(px - 0.5) * 18}deg) rotateX(${(0.5 - py) * 18}deg)`;
    layers.forEach((l) => {
      const d = parseFloat(l.dataset.depth);
      l.style.transform =
        `translateZ(${d}px) translate(${(0.5 - px) * d * 0.6}px, ${(0.5 - py) * d * 0.6}px)`;
    });
    card.style.setProperty('--card-01-gx', `${px * 100}%`);
    card.style.setProperty('--card-01-gy', `${py * 100}%`);
  });
  card.addEventListener('mouseleave', () => {
    card.style.transform = 'rotateY(0) rotateX(0)';
    layers.forEach((l) => {
      const d = parseFloat(l.dataset.depth);
      l.style.transform = `translateZ(${d}px)`;
    });
  });
})();
```

### 02. Glowing Gradient & Glassmorphic Borders

**Type:** CSS + JS
**Description:** A dark web3/crypto wallet card on a frosted-glass surface where a vibrant teal-to-violet radial glow blooms behind the blur and a matching neon border lights up, both tracking the cursor around the edges. Built with backdrop-filter and a masked gradient ring, perfect for crypto dashboards, staking widgets, and dark-themed SaaS landing pages that want an energetic, high-tech edge.

**HTML:**
```html
<div class="card-02">
  <article class="card-02__card" data-card-02="root">
    <div class="card-02__inner">
      <div class="card-02__row">
        <div class="card-02__coin"></div>
        <span class="card-02__net">// MAINNET</span>
      </div>
      <div>
        <p class="card-02__balance">STAKED BALANCE</p>
        <p class="card-02__amount">48.20 Ξ</p>
      </div>
      <p class="card-02__desc">Self-custody vault with live yield. The neon edge ignites and follows your cursor around the glass.</p>
      <div class="card-02__btn">STAKE MORE →</div>
    </div>
  </article>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=Azeret+Mono:wght@400;500&display=swap');

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

.card-02 {
  min-height: 460px;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 25% 25%, #1a1140 0 20%, transparent 21%),
    radial-gradient(circle at 80% 70%, #06343f 0 24%, transparent 25%),
    #06060e;
  font-family: 'Space Grotesk', sans-serif;
  padding: 2rem;
}

.card-02__card {
  --card-02-x: 50%;
  --card-02-y: 50%;
  position: relative;
  width: 340px;
  height: 440px;
  border-radius: 22px;
  cursor: pointer;
  background: rgba(255,255,255,0.05);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
  border: 1px solid rgba(255,255,255,0.1);
  overflow: hidden;
  transition: transform 0.4s ease;
}
.card-02__card:hover { transform: translateY(-4px); }

/* radial glow that tracks the cursor, behind the glass */
.card-02__card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(
    320px circle at var(--card-02-x) var(--card-02-y),
    rgba(0,240,200,0.35),
    rgba(120,80,255,0.18) 40%,
    transparent 65%
  );
  opacity: 0;
  transition: opacity 0.4s ease;
}
.card-02__card:hover::before { opacity: 1; }

/* neon border that lights up around the cursor */
.card-02__card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: radial-gradient(
    260px circle at var(--card-02-x) var(--card-02-y),
    #00f0c8,
    #7a50ff 45%,
    transparent 60%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 3;
  pointer-events: none;
}
.card-02__card:hover::after { opacity: 1; }

.card-02__inner {
  position: relative;
  z-index: 2;
  height: 100%;
  padding: 2.2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #e8f7f4;
}

.card-02__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.card-02__coin {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: conic-gradient(#00f0c8, #7a50ff, #00f0c8);
  box-shadow: 0 0 22px rgba(0,240,200,0.4);
}
.card-02__net {
  font-family: 'Azeret Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  color: #7af0db;
  border: 1px solid rgba(122,240,219,0.35);
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
}
.card-02__balance {
  font-family: 'Azeret Mono', monospace;
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  color: #8fa0bd;
}
.card-02__amount {
  font-weight: 700;
  font-size: 2.8rem;
  line-height: 1;
  background: linear-gradient(90deg, #00f0c8, #9d7bff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.card-02__desc {
  font-size: 0.84rem;
  line-height: 1.6;
  color: #9aa6bf;
}
.card-02__btn {
  text-align: center;
  font-family: 'Azeret Mono', monospace;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  padding: 0.85rem;
  border-radius: 12px;
  background: rgba(0,240,200,0.12);
  border: 1px solid rgba(0,240,200,0.3);
  color: #5ff5d8;
}

@media (prefers-reduced-motion: reduce) {
  .card-02__card,
  .card-02__card::before,
  .card-02__card::after {
    transition: none !important;
  }
}
```

**JS:**
```js
(() => {
  const root = document.querySelector('.card-02');
  if (!root) return;
  const c = root.querySelector('[data-card-02="root"]');
  if (!c) return;
  c.addEventListener('mousemove', (e) => {
    const r = c.getBoundingClientRect();
    c.style.setProperty('--card-02-x', `${e.clientX - r.left}px`);
    c.style.setProperty('--card-02-y', `${e.clientY - r.top}px`);
  });
})();
```

### 03. Image Zoom with Content Reveal / Slide-Up

**Type:** Pure CSS
**Description:** A clean e-commerce product card showing only the image and a small badge at rest. On hover, the image scales up smoothly inside an overflow:hidden frame while a frosted detail panel — name, price, description, and a "View Product" CTA — slides up from a peeking strip at the bottom. A dependable workhorse for shop grids, blog post cards, and directory listings.

**HTML:**
```html
<div class="card-03">
  <article class="card-03__card">
    <div class="card-03__media"><div class="card-03__img"></div></div>
    <span class="card-03__badge">New In</span>
    <div class="card-03__panel">
      <div class="card-03__top">
        <div>
          <h2 class="card-03__name">Terra Vase</h2>
          <p class="card-03__sub">Hand-thrown stoneware</p>
        </div>
        <span class="card-03__price">$68</span>
      </div>
      <p class="card-03__desc">Matte terracotta with a subtle asymmetric lip. Each piece is wheel-thrown and one of a kind.</p>
      <span class="card-03__cta">View Product</span>
    </div>
  </article>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600&family=Manrope:wght@400;500;700&display=swap');

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

.card-03 {
  min-height: 460px;
  display: grid;
  place-items: center;
  background: #f4f1ec;
  font-family: 'Manrope', sans-serif;
  padding: 2rem;
}

.card-03__card {
  position: relative;
  width: 330px;
  height: 440px;
  border-radius: 18px;
  cursor: pointer;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 14px 36px rgba(60,50,40,0.12);
}

/* image area — clips the zoom */
.card-03__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.card-03__img {
  position: absolute;
  inset: 0;
  transform: scale(1);
  transition: transform 0.7s cubic-bezier(0.16,1,0.3,1);
  background:
    radial-gradient(circle at 35% 30%, #ffe2c2 0 30%, transparent 31%),
    linear-gradient(150deg, #e8956b, #b6452f 70%);
}
.card-03__img::after {
  content: "";
  position: absolute;
  left: 50%; top: 42%;
  width: 150px; height: 150px;
  transform: translate(-50%,-50%);
  border-radius: 50% 50% 48% 52% / 60% 58% 42% 40%;
  background: linear-gradient(160deg, #6b3526, #3a1a12);
  box-shadow: 0 20px 40px rgba(0,0,0,0.25);
}
.card-03__card:hover .card-03__img { transform: scale(1.12); }

/* top tag pinned over image */
.card-03__badge {
  position: absolute;
  top: 1.2rem; left: 1.2rem;
  z-index: 3;
  background: #1a1a1a;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.4rem 0.8rem;
  border-radius: 999px;
}

/* sliding panel from bottom */
.card-03__panel {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 4;
  background: rgba(255,255,255,0.96);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  padding: 1.4rem 1.5rem 1.6rem;
  transform: translateY(calc(100% - 84px));
  transition: transform 0.55s cubic-bezier(0.16,1,0.3,1);
}
.card-03__card:hover .card-03__panel { transform: translateY(0); }

.card-03__top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.card-03__name {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 1.5rem;
  color: #2a2018;
}
.card-03__price {
  font-weight: 700;
  font-size: 1.25rem;
  color: #b6452f;
}
.card-03__sub {
  font-size: 0.8rem;
  color: #8a7d70;
  margin-top: 0.15rem;
}
.card-03__desc {
  font-size: 0.84rem;
  line-height: 1.55;
  color: #6a5e52;
  margin: 0.9rem 0 1rem;
}
.card-03__cta {
  display: block;
  text-align: center;
  background: #1a1a1a;
  color: #fff;
  font-weight: 600;
  font-size: 0.88rem;
  padding: 0.8rem;
  border-radius: 10px;
}

@media (prefers-reduced-motion: reduce) {
  .card-03__img,
  .card-03__panel {
    transition: none !important;
  }
}
```

### 04. 3D Flip Cards (Front to Back)

**Type:** Pure CSS
**Description:** A team-member profile card that rotates a full 180° on the Y-axis using perspective and backface-visibility, flipping from a photo-and-name front to a back face with bio and social links. Space-efficient and tactile, it suits team pages, flashcard apps, pricing tiers, and anywhere two sides of information share one footprint.

**HTML:**
```html
<div class="card-04">
  <article class="card-04__card">
    <div class="card-04__face card-04__front">
      <span class="card-04__ff-role">Lead Designer</span>
      <h2 class="card-04__ff-name">Mara<br>Okonkwo</h2>
      <span class="card-04__ff-hint">↻ hover to flip</span>
    </div>
    <div class="card-04__face card-04__back">
      <div>
        <span class="card-04__fb-role">Lead Designer</span>
        <h3 class="card-04__fb-name">Mara Okonkwo</h3>
        <p class="card-04__fb-bio">Twelve years shaping product systems for fintech and health. Obsessed with motion, type, and the space between clicks.</p>
      </div>
      <div class="card-04__fb-links">
        <a href="#">Email</a>
        <a href="#">Dribbble</a>
        <a href="#">LinkedIn</a>
      </div>
    </div>
  </article>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,800&family=DM+Sans:opsz,wght@9..40,400;9..40,500&display=swap');

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

.card-04 {
  min-height: 460px;
  display: grid;
  place-items: center;
  background: #eceae3;
  background-image: radial-gradient(circle at 70% 20%, #f6f4ee, #dcd9cf);
  font-family: 'DM Sans', sans-serif;
  padding: 2rem;
  perspective: 1600px;
}

.card-04__card {
  width: 320px;
  height: 430px;
  cursor: pointer;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.75s cubic-bezier(0.4,0.15,0.2,1);
}
.card-04__card:hover { transform: rotateY(180deg); }

.card-04__face {
  position: absolute;
  inset: 0;
  border-radius: 24px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
  box-shadow: 0 20px 45px rgba(60,55,40,0.2);
}

/* FRONT — photo + name */
.card-04__front {
  background: linear-gradient(165deg, #2f9e8f 0%, #145c52 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 2.2rem;
  color: #f2fbf9;
}
.card-04__front::before {
  content: "";
  position: absolute;
  top: -10%; left: 50%;
  width: 200px; height: 200px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #d8f5ee, #6cc4b4);
  box-shadow: 0 20px 50px rgba(0,0,0,0.2);
}
.card-04__ff-role {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #aef0e3;
}
.card-04__ff-name {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800;
  font-size: 2.2rem;
  line-height: 1;
  margin-top: 0.3rem;
}
.card-04__ff-hint {
  margin-top: 1rem;
  font-size: 0.74rem;
  color: #cdeee7;
  opacity: 0.8;
}

/* BACK — bio + links */
.card-04__back {
  background: linear-gradient(165deg, #1c1b1a, #0f0e0d);
  transform: rotateY(180deg);
  padding: 2.2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #ece9e2;
}
.card-04__fb-role {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #5fd3c0;
}
.card-04__fb-name {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800;
  font-size: 1.7rem;
  line-height: 1.05;
  margin: 0.3rem 0 0.9rem;
}
.card-04__fb-bio {
  font-size: 0.85rem;
  line-height: 1.6;
  color: #b3afa6;
}
.card-04__fb-links {
  display: flex;
  gap: 0.6rem;
}
.card-04__fb-links a {
  flex: 1;
  text-align: center;
  text-decoration: none;
  font-size: 0.78rem;
  font-weight: 500;
  color: #ece9e2;
  padding: 0.6rem;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.18);
  transition: background 0.3s ease;
}
.card-04__fb-links a:hover { background: rgba(95,211,192,0.18); }

@media (prefers-reduced-motion: reduce) {
  .card-04__card,
  .card-04__fb-links a {
    transition: none !important;
  }
}
```

### 05. Parent Blur / Sibling De-emphasis (Focus States)

**Type:** Pure CSS
**Description:** A pricing grid where hovering one card scales it up and brings it forward, while modern :has() and :not(:hover) selectors automatically blur and dim every neighboring card — pulling all attention to the chosen option with zero JavaScript. Best for pricing tables, minimalist galleries, and any multi-column layout where guiding focus matters. (Note: this demo intentionally renders three cards, since the effect only reads with siblings present.)

**HTML:**
```html
<div class="card-05">
  <div class="card-05__grid">
    <article class="card-05__card">
      <span class="card-05__plan">Starter</span>
      <div class="card-05__price">$0<span>/mo</span></div>
      <ul class="card-05__feat">
        <li>1 project</li>
        <li>Community support</li>
        <li>1 GB storage</li>
      </ul>
      <span class="card-05__btn">Get started</span>
    </article>

    <article class="card-05__card card-05__card--featured">
      <span class="card-05__plan card-05__popular">Pro · Popular</span>
      <div class="card-05__price">$24<span>/mo</span></div>
      <ul class="card-05__feat">
        <li>Unlimited projects</li>
        <li>Priority support</li>
        <li>100 GB storage</li>
        <li>Advanced analytics</li>
      </ul>
      <span class="card-05__btn">Start free trial</span>
    </article>

    <article class="card-05__card">
      <span class="card-05__plan">Team</span>
      <div class="card-05__price">$60<span>/mo</span></div>
      <ul class="card-05__feat">
        <li>Everything in Pro</li>
        <li>SSO &amp; roles</li>
        <li>1 TB storage</li>
      </ul>
      <span class="card-05__btn">Contact sales</span>
    </article>
  </div>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Clash+Display:wght@500;600;700&family=Geist:wght@400;500;600&display=swap');
@import url('https://fonts.cdnfonts.com/css/clash-display');

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

.card-05 {
  min-height: 460px;
  display: grid;
  place-items: center;
  background: #0d0f14;
  background-image: radial-gradient(circle at 50% 0%, #1a1e29, #0a0b10 70%);
  font-family: 'Geist', sans-serif;
  padding: 2rem;
}

.card-05__grid {
  display: flex;
  gap: 1.4rem;
}

.card-05__card {
  position: relative;
  width: 220px;
  height: 400px;
  border-radius: 20px;
  cursor: pointer;
  padding: 1.8rem;
  background: #14171f;
  border: 1px solid rgba(255,255,255,0.07);
  display: flex;
  flex-direction: column;
  color: #e6e9f0;
  transition:
    transform 0.4s cubic-bezier(0.16,1,0.3,1),
    filter 0.4s ease,
    opacity 0.4s ease,
    box-shadow 0.4s ease,
    border-color 0.4s ease;
}

/* hovered card pops forward */
.card-05__grid:has(.card-05__card:hover) .card-05__card:hover {
  transform: translateY(-12px) scale(1.05);
  box-shadow: 0 30px 60px rgba(0,0,0,0.5);
  border-color: rgba(122,160,255,0.5);
  z-index: 2;
}

/* every non-hovered sibling dims + blurs */
.card-05__grid:has(.card-05__card:hover) .card-05__card:not(:hover) {
  filter: blur(3px) saturate(0.6);
  opacity: 0.45;
  transform: scale(0.97);
}

.card-05__plan {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #8a93a8;
}
.card-05__popular {
  color: #7aa0ff;
}
.card-05__price {
  font-family: 'Clash Display', 'Geist', sans-serif;
  font-weight: 600;
  font-size: 2.6rem;
  line-height: 1;
  margin: 0.6rem 0 0.2rem;
}
.card-05__price span { font-size: 0.9rem; color: #8a93a8; font-family:'Geist'; }
.card-05__feat {
  list-style: none;
  margin: 1.4rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  font-size: 0.82rem;
  color: #aab2c4;
}
.card-05__feat li::before {
  content: "✓ ";
  color: #7aa0ff;
  font-weight: 700;
}
.card-05__btn {
  margin-top: auto;
  text-align: center;
  font-weight: 600;
  font-size: 0.85rem;
  padding: 0.8rem;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.15);
  color: #e6e9f0;
}
.card-05__card--featured .card-05__btn {
  background: linear-gradient(90deg, #5a7cff, #7a50ff);
  border: none;
  color: #fff;
}
.card-05__card--featured {
  border-color: rgba(122,160,255,0.3);
}

@media (max-width: 760px) {
  .card-05__grid { flex-direction: column; }
  .card-05__card { width: 280px; height: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .card-05__card { transition: none !important; }
}
```

### 06. Minimalist Elevation & Dynamic Shadows

**Type:** Pure CSS
**Description:** A clean corporate/SaaS documentation card that sits nearly flat at rest, then lifts on hover with a translateY shift and a layered, multi-step box-shadow that expands to mimic a real card rising off the page. A small arrow nudges forward on the CTA for a final touch of polish. Ideal for SaaS marketing sites, docs platforms, and restrained UI systems where subtlety is the point.

**HTML:**
```html
<div class="card-06">
  <article class="card-06__card">
    <div class="card-06__icon">⌘</div>
    <span class="card-06__kicker">Documentation</span>
    <h2 class="card-06__title">Quickstart<br>in 5 minutes</h2>
    <p class="card-06__desc">Install the SDK, authenticate, and ship your first request. The card lifts gently off the page as you focus it.</p>
    <span class="card-06__link">Read the guide <span class="card-06__arrow">→</span></span>
  </article>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,400;6..72,500&family=Geist:wght@400;500;600&display=swap');

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

.card-06 {
  min-height: 460px;
  display: grid;
  place-items: center;
  background: #f7f8fa;
  font-family: 'Geist', sans-serif;
  padding: 2rem;
}

.card-06__card {
  position: relative;
  width: 340px;
  height: 420px;
  border-radius: 16px;
  cursor: pointer;
  background: #ffffff;
  border: 1px solid #e7e9ee;
  padding: 2.2rem;
  display: flex;
  flex-direction: column;
  color: #1c2230;
  box-shadow:
    0 1px 2px rgba(20,30,50,0.04),
    0 2px 4px rgba(20,30,50,0.03);
  transition:
    transform 0.35s cubic-bezier(0.2,0.7,0.2,1),
    box-shadow 0.35s cubic-bezier(0.2,0.7,0.2,1),
    border-color 0.35s ease;
}

.card-06__card:hover {
  transform: translateY(-8px);
  border-color: #dfe2e8;
  box-shadow:
    0 2px 4px rgba(20,30,50,0.04),
    0 6px 12px rgba(20,30,50,0.06),
    0 14px 28px rgba(20,30,50,0.08),
    0 28px 56px rgba(20,30,50,0.10);
}

.card-06__icon {
  width: 52px; height: 52px;
  border-radius: 13px;
  background: linear-gradient(150deg, #3b82f6, #2563eb);
  display: grid; place-items: center;
  color: #fff;
  font-size: 1.5rem;
  box-shadow: 0 6px 14px rgba(37,99,235,0.3);
}

.card-06__kicker {
  margin-top: 1.6rem;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8a94a6;
}
.card-06__title {
  font-family: 'Newsreader', serif;
  font-weight: 500;
  font-size: 1.9rem;
  line-height: 1.15;
  margin-top: 0.4rem;
}
.card-06__desc {
  font-size: 0.9rem;
  line-height: 1.65;
  color: #5c6678;
  margin-top: 0.9rem;
}
.card-06__link {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: #2563eb;
}
.card-06__arrow {
  transition: transform 0.35s ease;
}
.card-06__card:hover .card-06__arrow { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  .card-06__card,
  .card-06__arrow {
    transition: none !important;
  }
}
```

### 07. Elastic Lift

**Type:** Pure CSS
**Description:** A coffee brand card that springs upward on hover with a bouncy, overshooting cubic-bezier curve and a warm ember glow rising from below. The elastic timing makes the lift feel physical and tactile rather than a flat translate — ideal for product or menu cards where you want a friendly, energetic response.

**HTML:**
```html
<div class="card-07">
  <article class="card-07__card">
    <div class="card-07__inner">
      <span class="card-07__tag">Seasonal Roast</span>
      <div>
        <div class="card-07__num">04</div>
      </div>
      <div>
        <h2 class="card-07__title">Ember Drip<br>Coffee Co.</h2>
        <p class="card-07__desc">Slow-roasted single origin beans with notes of burnt caramel and stone fruit.</p>
      </div>
    </div>
    <span class="card-07__dot"></span>
  </article>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,900&family=Spline+Sans+Mono:wght@400;500&display=swap');

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

.card-07 {
  min-height: 460px;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 20% 20%, #ffe7c2 0%, transparent 45%),
    radial-gradient(circle at 80% 80%, #ffc9d4 0%, transparent 45%),
    #f4ede4;
  font-family: 'Spline Sans Mono', monospace;
  padding: 2rem;
}

.card-07__card {
  --card-07-bounce: cubic-bezier(0.34, 1.8, 0.4, 1);
  position: relative;
  width: 320px;
  height: 420px;
  border-radius: 28px;
  background: linear-gradient(160deg, #1c1410 0%, #3a2618 100%);
  color: #f4ede4;
  cursor: pointer;
  overflow: hidden;
  transform-origin: bottom center;
  transition:
    transform 0.55s var(--card-07-bounce),
    box-shadow 0.55s ease;
  box-shadow: 0 10px 25px rgba(60, 30, 10, 0.25);
  will-change: transform;
}

.card-07__card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 120%, #ff8a3c 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.5s ease;
}

.card-07__card:hover {
  transform: translateY(-26px) scale(1.04);
  box-shadow: 0 40px 60px rgba(60, 30, 10, 0.4);
}

.card-07__card:hover::before { opacity: 0.55; }

.card-07__inner {
  position: relative;
  z-index: 2;
  height: 100%;
  padding: 2.4rem 2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.card-07__tag {
  font-size: 0.72rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #ffb27a;
}

.card-07__num {
  font-family: 'Fraunces', serif;
  font-size: 5.5rem;
  font-weight: 900;
  line-height: 0.85;
  transition: transform 0.55s var(--card-07-bounce);
}
.card-07__card:hover .card-07__num { transform: translateY(-6px); }

.card-07__title {
  font-family: 'Fraunces', serif;
  font-size: 1.9rem;
  font-weight: 600;
  line-height: 1.1;
}

.card-07__desc {
  font-size: 0.85rem;
  line-height: 1.6;
  color: #cdb9a6;
  max-width: 90%;
}

.card-07__dot {
  position: absolute;
  bottom: 1.8rem;
  right: 1.8rem;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #ff8a3c;
  box-shadow: 0 0 0 0 rgba(255, 138, 60, 0.6);
  transition: box-shadow 0.5s ease;
}
.card-07__card:hover .card-07__dot { box-shadow: 0 0 0 10px rgba(255, 138, 60, 0); }

@media (prefers-reduced-motion: reduce) {
  .card-07__card,
  .card-07__num,
  .card-07__dot {
    transition: none !important;
  }
}
```

### 08. Gradient Border Draw

**Type:** Pure CSS
**Description:** A dark edge-compute product card where a multi-color conic gradient traces a live circuit around the border on hover, powered by the modern @property animated angle. Great for tech, SaaS, or developer-tool cards that want a premium "powered-on" signal without distracting from the content.

**HTML:**
```html
<div class="card-08">
  <article class="card-08__card">
    <div class="card-08__inner">
      <span class="card-08__eyebrow">/ Edge Compute</span>
      <h2 class="card-08__title">Halo<br>Runtime</h2>
      <p class="card-08__desc">A serverless mesh that traces a live circuit around every active deployment region.</p>
      <div class="card-08__meta">
        <span>v3.2.0</span>
        <span>99.99% SLA</span>
      </div>
    </div>
  </article>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@600;800&family=DM+Mono:wght@400;500&display=swap');

@property --card-08-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

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

.card-08 {
  min-height: 460px;
  display: grid;
  place-items: center;
  background: #07080d;
  font-family: 'DM Mono', monospace;
  padding: 2rem;
}

.card-08__card {
  --card-08-b: 2px;
  position: relative;
  width: 340px;
  height: 420px;
  border-radius: 20px;
  background: #0d0f17;
  cursor: pointer;
  isolation: isolate;
}

.card-08__card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: var(--card-08-b);
  background: conic-gradient(
    from var(--card-08-angle, 0deg),
    transparent 0deg,
    transparent 70deg,
    #00f0ff 130deg,
    #7b5cff 200deg,
    #ff4dd8 250deg,
    transparent 320deg,
    transparent 360deg
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.4s ease;
  animation: card-08-spin 4s linear infinite paused;
}

@keyframes card-08-spin {
  to { --card-08-angle: 360deg; }
}

.card-08__card:hover::before {
  opacity: 1;
  animation-play-state: running;
}

.card-08__card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: var(--card-08-b) solid rgba(255,255,255,0.06);
  pointer-events: none;
}

.card-08__inner {
  position: relative;
  z-index: 2;
  height: 100%;
  padding: 2.4rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #e8eaf2;
}

.card-08__eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #6f7488;
}

.card-08__title {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 2.3rem;
  line-height: 1.05;
  background: linear-gradient(90deg, #00f0ff, #7b5cff, #ff4dd8);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}

.card-08__desc {
  font-size: 0.82rem;
  line-height: 1.65;
  color: #9499ab;
}

.card-08__meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.72rem;
  color: #6f7488;
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 1rem;
}

@media (prefers-reduced-motion: reduce) {
  .card-08__card::before {
    animation: none !important;
  }
}
```

### 09. Stacked Reveal

**Type:** Pure CSS
**Description:** A vinyl/record card built from three colored layers that fan out and rotate on hover, like spreading a deck of risograph prints. The offset rotations give a playful, editorial collage feel suited to music, art prints, or creative portfolios.

**HTML:**
```html
<div class="card-09">
  <article class="card-09__card">
    <div class="card-09__layer card-09__l1"></div>
    <div class="card-09__layer card-09__l2"></div>
    <div class="card-09__layer card-09__l3"></div>
    <div class="card-09__content">
      <span class="card-09__kicker">Vinyl Press · 2025</span>
      <h2 class="card-09__title">Paper<br>Cities</h2>
      <p class="card-09__desc">Limited run pressing. Three layers of risograph artwork fan out across the gatefold sleeve.</p>
    </div>
  </article>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Archivo:wght@400;600&display=swap');

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

.card-09 {
  min-height: 460px;
  display: grid;
  place-items: center;
  background: #ebe4d8;
  background-image:
    repeating-linear-gradient(45deg, rgba(0,0,0,0.02) 0 12px, transparent 12px 24px);
  font-family: 'Archivo', sans-serif;
  padding: 2rem;
}

.card-09__card {
  --card-09-shift: 14px;
  position: relative;
  width: 320px;
  height: 410px;
  cursor: pointer;
}

.card-09__layer {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.5s ease;
}

.card-09__layer.card-09__l1 {
  background: #d94f30;
  transform: translate(0, 0) rotate(0deg);
  z-index: 1;
}
.card-09__layer.card-09__l2 {
  background: #f2b138;
  z-index: 2;
}
.card-09__layer.card-09__l3 {
  background: #1a1a1a;
  z-index: 3;
  box-shadow: 0 18px 40px rgba(0,0,0,0.25);
}

.card-09__card:hover .card-09__l1 { transform: translate(calc(var(--card-09-shift) * -2), calc(var(--card-09-shift) * 1.4)) rotate(-6deg); }
.card-09__card:hover .card-09__l2 { transform: translate(calc(var(--card-09-shift) * 1.6), calc(var(--card-09-shift) * -0.6)) rotate(5deg); }
.card-09__card:hover .card-09__l3 { transform: translateY(-6px); box-shadow: 0 30px 60px rgba(0,0,0,0.35); }

.card-09__content {
  position: relative;
  z-index: 4;
  height: 100%;
  padding: 2.2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #f4efe6;
  pointer-events: none;
}

.card-09__kicker {
  font-size: 0.7rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #f2b138;
}

.card-09__title {
  font-family: 'Archivo Black', sans-serif;
  font-size: 2.6rem;
  line-height: 0.95;
  text-transform: uppercase;
}

.card-09__desc {
  font-size: 0.85rem;
  line-height: 1.6;
  color: #c9c2b6;
}

@media (prefers-reduced-motion: reduce) {
  .card-09__layer {
    transition: none !important;
  }
}
```

### 10. Holographic Shimmer

**Type:** Pure CSS
**Description:** A collectible trading-card treatment with a color-dodge foil sweep, sparkle grain, and a subtle 3D tilt, mimicking light catching a holographic surface. Perfect for NFT/collectible, gaming, or limited-edition product cards that need a "rare item" feel.

**HTML:**
```html
<div class="card-10">
  <article class="card-10__card">
    <div class="card-10__foil"></div>
    <div class="card-10__grain"></div>
    <div class="card-10__inner">
      <span class="card-10__rank">// MYTHIC · 001/250</span>
      <div class="card-10__emblem"></div>
      <div>
        <h2 class="card-10__title">Prism Warden</h2>
        <p class="card-10__desc">A foil-stamped collector card that catches light across the full spectrum.</p>
      </div>
    </div>
  </article>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;800&family=Rajdhani:wght@400;600&display=swap');

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

.card-10 {
  min-height: 460px;
  display: grid;
  place-items: center;
  background: #0a0a12;
  font-family: 'Rajdhani', sans-serif;
  padding: 2rem;
  perspective: 1200px;
}

.card-10__card {
  position: relative;
  width: 320px;
  height: 450px;
  border-radius: 18px;
  background: linear-gradient(135deg, #14142a, #0c0c1a);
  cursor: pointer;
  overflow: hidden;
  transform-style: preserve-3d;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  box-shadow: 0 12px 30px rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.08);
}

.card-10__card:hover {
  transform: rotateX(6deg) rotateY(-6deg);
  box-shadow: 0 30px 60px rgba(120, 80, 255, 0.3);
}

.card-10__foil {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    transparent 20%,
    rgba(255, 0, 200, 0.35) 35%,
    rgba(0, 255, 220, 0.35) 45%,
    rgba(255, 230, 0, 0.35) 55%,
    transparent 70%
  );
  background-size: 250% 250%;
  background-position: 0% 0%;
  mix-blend-mode: color-dodge;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.card-10__card:hover .card-10__foil {
  opacity: 1;
  animation: card-10-sweep 2.5s linear infinite;
}
@keyframes card-10-sweep {
  0% { background-position: 0% 0%; }
  100% { background-position: 200% 200%; }
}

.card-10__grain {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.4) 0.5px, transparent 0.6px);
  background-size: 7px 7px;
  opacity: 0;
  mix-blend-mode: overlay;
  transition: opacity 0.4s ease;
}
.card-10__card:hover .card-10__grain { opacity: 0.5; }

.card-10__inner {
  position: relative;
  z-index: 3;
  height: 100%;
  padding: 2.2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #e6e9ff;
  transform: translateZ(40px);
}

.card-10__rank {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  color: #6cf;
}

.card-10__emblem {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: conic-gradient(#ff00c8, #00ffdc, #ffe600, #ff00c8);
  margin: 0 auto;
  filter: blur(0.5px);
  box-shadow: 0 0 30px rgba(120, 80, 255, 0.5);
}

.card-10__title {
  font-family: 'Orbitron', sans-serif;
  font-weight: 800;
  font-size: 1.7rem;
  text-align: center;
  letter-spacing: 0.05em;
}

.card-10__desc {
  font-size: 0.95rem;
  line-height: 1.4;
  color: #aab;
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .card-10__foil {
    animation: none !important;
  }
}
```

### 11. Curtain Reveal

**Type:** Pure CSS
**Description:** A theater/event card where two striped velvet curtain halves part on hover to unveil the content behind, complete with a gold seam. Best for performing-arts, cinema, launch, or "reveal" moments where anticipation is part of the message.

**HTML:**
```html
<div class="card-11">
  <article class="card-11__card">
    <div class="card-11__back">
      <span class="card-11__num">— ACT III —</span>
      <h2 class="card-11__title">The Velvet<br>Hour</h2>
      <p class="card-11__desc">An evening of chamber music and candlelight. Doors open at eight.</p>
    </div>
    <div class="card-11__half card-11__left"></div>
    <div class="card-11__half card-11__right"></div>
    <div class="card-11__seam"></div>
    <span class="card-11__label">Hover to part the curtain</span>
  </article>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,600;0,800;1,500&family=Cormorant+Garamond:wght@400;500&display=swap');

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

.card-11 {
  min-height: 460px;
  display: grid;
  place-items: center;
  background: #1a0d12;
  font-family: 'Cormorant Garamond', serif;
  padding: 2rem;
}

.card-11__card {
  position: relative;
  width: 340px;
  height: 460px;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}

.card-11__back {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(20,8,12,0.55), rgba(20,8,12,0.75)),
    radial-gradient(circle at 50% 35%, #5a2030, #1a0d12 70%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 2.5rem;
  color: #f3e3d3;
}

.card-11__num {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 1rem;
  letter-spacing: 0.2em;
  color: #d4a373;
}
.card-11__title {
  font-family: 'Playfair Display', serif;
  font-weight: 800;
  font-size: 2.6rem;
  line-height: 1.05;
  margin: 0.6rem 0 1rem;
}
.card-11__desc {
  font-size: 1.15rem;
  line-height: 1.5;
  color: #cbb8a6;
}

.card-11__half {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  background:
    repeating-linear-gradient(90deg, #7a1f2b 0 10px, #5e1620 10px 20px);
  z-index: 2;
  transition: transform 0.7s cubic-bezier(0.77, 0, 0.18, 1);
  box-shadow: inset 0 0 40px rgba(0,0,0,0.4);
}
.card-11__half.card-11__left { left: 0; transform-origin: left; }
.card-11__half.card-11__right { right: 0; transform-origin: right; }

.card-11__half::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(0,0,0,0.25));
}
.card-11__half.card-11__right::after {
  background: linear-gradient(270deg, transparent, rgba(0,0,0,0.25));
}

.card-11__card:hover .card-11__half.card-11__left { transform: translateX(-100%); }
.card-11__card:hover .card-11__half.card-11__right { transform: translateX(100%); }

.card-11__seam {
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 2px;
  background: linear-gradient(#d4a373, #8a5a2b);
  transform: translateX(-50%);
  z-index: 3;
  opacity: 0.8;
  transition: opacity 0.4s ease;
}
.card-11__card:hover .card-11__seam { opacity: 0; }

.card-11__label {
  position: absolute;
  bottom: 1.4rem;
  left: 0; right: 0;
  text-align: center;
  z-index: 4;
  font-family: 'Playfair Display', serif;
  font-style: italic;
  color: #f3e3d3;
  font-size: 1.1rem;
  letter-spacing: 0.1em;
  transition: opacity 0.3s ease;
}
.card-11__card:hover .card-11__label { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .card-11__half,
  .card-11__seam,
  .card-11__label {
    transition: none !important;
  }
}
```

### 12. Corner Peel

**Type:** Pure CSS
**Description:** A sticker-style promo card whose top-right corner physically peels back to expose a hidden discount underneath, with a soft drop shadow on the lifted flap. Ideal for coupons, membership perks, or any card with a reward worth "uncovering."

**HTML:**
```html
<div class="card-12">
  <article class="card-12__card">
    <div class="card-12__secret"><span>-20%</span></div>
    <div class="card-12__flap"></div>
    <div class="card-12__content">
      <span class="card-12__tag">Members Only</span>
      <h2 class="card-12__title">Spring<br>Harvest Box</h2>
      <p class="card-12__desc">Peel the corner to uncover this week's hidden subscriber discount on farm-fresh produce.</p>
    </div>
  </article>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@600&family=Nunito+Sans:opsz,wght@6..12,400;6..12,700&display=swap');

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

.card-12 {
  min-height: 460px;
  display: grid;
  place-items: center;
  background: #cfe3dd;
  background-image: radial-gradient(circle at 30% 20%, #e2f0eb, #b9d4cb);
  font-family: 'Nunito Sans', sans-serif;
  padding: 2rem;
}

.card-12__card {
  position: relative;
  width: 320px;
  height: 400px;
  border-radius: 14px;
  background: #fffdf7;
  cursor: pointer;
  box-shadow: 0 14px 30px rgba(40, 70, 60, 0.18);
  overflow: hidden;
}

.card-12__content {
  position: relative;
  z-index: 1;
  height: 100%;
  padding: 2.2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #2a3d36;
}

.card-12__tag {
  align-self: flex-start;
  background: #ff7a59;
  color: #fff;
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  text-transform: uppercase;
}
.card-12__title {
  font-family: 'Caveat', cursive;
  font-size: 3rem;
  line-height: 0.95;
  color: #1f5c4d;
}
.card-12__desc {
  font-size: 0.9rem;
  line-height: 1.6;
  color: #5a6e66;
}

.card-12__flap {
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  z-index: 4;
  background: linear-gradient(135deg, #f7efe0, #e7dcc6);
  transform-origin: top right;
  transition: width 0.45s cubic-bezier(0.16,1,0.3,1),
              height 0.45s cubic-bezier(0.16,1,0.3,1),
              box-shadow 0.45s ease;
  clip-path: polygon(100% 0, 0 0, 100% 100%);
  box-shadow: none;
}

.card-12__secret {
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  z-index: 3;
  background: linear-gradient(135deg, #1f5c4d, #2f8f76);
  clip-path: polygon(100% 0, 0 0, 100% 100%);
  transition: width 0.45s cubic-bezier(0.16,1,0.3,1),
              height 0.45s cubic-bezier(0.16,1,0.3,1);
  display: grid;
  place-items: center;
}
.card-12__secret span {
  position: absolute;
  top: 14px;
  right: 14px;
  color: #fff;
  font-weight: 700;
  font-size: 0.65rem;
  opacity: 0;
  transition: opacity 0.3s ease 0.2s;
  transform: rotate(45deg);
}

.card-12__card:hover .card-12__secret { width: 110px; height: 110px; }
.card-12__card:hover .card-12__secret span { opacity: 1; }
.card-12__card:hover .card-12__flap {
  width: 110px;
  height: 110px;
  box-shadow: -6px 6px 14px rgba(0,0,0,0.25);
}

@media (prefers-reduced-motion: reduce) {
  .card-12__flap,
  .card-12__secret,
  .card-12__secret span {
    transition: none !important;
  }
}
```

### 13. Neon Sign

**Type:** Pure CSS
**Description:** A bar/nightlife card on a dim brick wall where the sign text ignites into a flickering neon glow on hover using layered text-shadows. Suited to restaurants, bars, music venues, and any brand with after-dark personality.

**HTML:**
```html
<div class="card-13">
  <article class="card-13__card">
    <div class="card-13__inner">
      <span class="card-13__open">— open till late —</span>
      <h2 class="card-13__title">Lola's</h2>
      <p class="card-13__sub">cocktail bar</p>
      <p class="card-13__desc">Hover to light the sign. Hand-bent tubes, mezcal flights, and a back room you have to ask about.</p>
    </div>
  </article>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Monoton&family=Major+Mono+Display&family=Oxanium:wght@400;600&display=swap');

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

.card-13 {
  min-height: 460px;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 120%, #1a1430 0%, #050308 70%);
  font-family: 'Oxanium', sans-serif;
  padding: 2rem;
}

.card-13__card {
  --card-13-c1: #ff2d95;
  --card-13-c2: #29f5ff;
  position: relative;
  width: 330px;
  height: 430px;
  border-radius: 16px;
  background: #0a0712;
  cursor: pointer;
  overflow: hidden;
  border: 2px solid rgba(255,255,255,0.04);
  transition: box-shadow 0.5s ease;
}
.card-13__card:hover {
  box-shadow: 0 0 50px rgba(255,45,149,0.25);
}

.card-13__card::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(10,7,18,0.85), rgba(10,7,18,0.92)),
    repeating-linear-gradient(0deg, #181020 0 24px, transparent 24px 26px),
    repeating-linear-gradient(90deg, #181020 0 48px, transparent 48px 50px);
  opacity: 0.7;
}

.card-13__inner {
  position: relative;
  z-index: 2;
  height: 100%;
  padding: 2.4rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  text-align: center;
}

.card-13__open {
  font-family: 'Major Mono Display', monospace;
  font-size: 0.85rem;
  letter-spacing: 0.3em;
  color: var(--card-13-c2);
  opacity: 0.4;
  transition: all 0.4s ease;
}
.card-13__card:hover .card-13__open {
  opacity: 1;
  text-shadow: 0 0 8px var(--card-13-c2), 0 0 18px var(--card-13-c2);
}

.card-13__title {
  font-family: 'Monoton', cursive;
  font-size: 3.4rem;
  line-height: 0.95;
  color: #2a1a35;
  transition: all 0.5s ease;
}
.card-13__card:hover .card-13__title {
  color: var(--card-13-c1);
  text-shadow:
    0 0 6px var(--card-13-c1),
    0 0 14px var(--card-13-c1),
    0 0 30px var(--card-13-c1),
    0 0 60px var(--card-13-c1);
  animation: card-13-flicker 3s infinite;
}

@keyframes card-13-flicker {
  0%, 18%, 22%, 25%, 53%, 57%, 100% {
    text-shadow: 0 0 6px var(--card-13-c1), 0 0 14px var(--card-13-c1), 0 0 30px var(--card-13-c1), 0 0 60px var(--card-13-c1);
    opacity: 1;
  }
  20%, 24%, 55% { text-shadow: none; opacity: 0.6; }
}

.card-13__desc {
  font-size: 0.85rem;
  line-height: 1.6;
  color: #8a7a9a;
  max-width: 90%;
}

.card-13__sub {
  font-family: 'Major Mono Display', monospace;
  font-size: 1.1rem;
  color: #2a1a35;
  transition: all 0.5s ease 0.1s;
}
.card-13__card:hover .card-13__sub {
  color: var(--card-13-c2);
  text-shadow: 0 0 6px var(--card-13-c2), 0 0 16px var(--card-13-c2);
}

@media (prefers-reduced-motion: reduce) {
  .card-13__card:hover .card-13__title {
    animation: none !important;
  }
}
```

### 14. Scanline

**Type:** Pure CSS
**Description:** A retro CRT terminal card with phosphor-green text, static scanlines, a sweeping refresh beam, and a blinking cursor. Great for cybersecurity, retro-tech, archival, or developer products that lean into a vintage-computing identity.

**HTML:**
```html
<div class="card-14">
  <article class="card-14__card">
    <div class="card-14__inner">
      <span class="card-14__head">&gt; SYSTEM/READY_</span>
      <h2 class="card-14__title">VAULT<br>OS 9<span class="card-14__cursor">&nbsp;</span></h2>
      <p class="card-14__desc">Cold-storage terminal for archival data. Phosphor-green display, zero network exposure.</p>
      <div class="card-14__stat">
        <span>UPTIME 4096d</span>
        <span>MEM 64K OK</span>
      </div>
    </div>
    <div class="card-14__lines"></div>
    <div class="card-14__beam"></div>
  </article>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=VT323&family=Share+Tech+Mono&display=swap');

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

.card-14 {
  min-height: 460px;
  display: grid;
  place-items: center;
  background: #04110a;
  font-family: 'Share Tech Mono', monospace;
  padding: 2rem;
}

.card-14__card {
  position: relative;
  width: 340px;
  height: 430px;
  border-radius: 10px;
  background: #021006;
  cursor: pointer;
  overflow: hidden;
  border: 1px solid #0c5;
  box-shadow: 0 0 25px rgba(0,255,120,0.12), inset 0 0 30px rgba(0,255,120,0.05);
}

.card-14__inner {
  position: relative;
  z-index: 1;
  height: 100%;
  padding: 2.2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #38ff8e;
  text-shadow: 0 0 4px rgba(56,255,142,0.6);
}

.card-14__head {
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  opacity: 0.7;
}
.card-14__title {
  font-family: 'VT323', monospace;
  font-size: 3.4rem;
  line-height: 0.95;
}
.card-14__cursor {
  display: inline-block;
  width: 0.6ch;
  background: #38ff8e;
  animation: card-14-blink 1s steps(1) infinite;
}
@keyframes card-14-blink { 50% { opacity: 0; } }

.card-14__desc {
  font-size: 0.85rem;
  line-height: 1.6;
  opacity: 0.85;
}
.card-14__stat {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  border-top: 1px dashed rgba(56,255,142,0.4);
  padding-top: 0.8rem;
  opacity: 0.7;
}

.card-14__lines {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: repeating-linear-gradient(
    0deg,
    rgba(0,0,0,0.25) 0 1px,
    transparent 1px 3px
  );
  pointer-events: none;
}

.card-14__beam {
  position: absolute;
  left: 0; right: 0;
  height: 80px;
  top: -80px;
  z-index: 3;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(56,255,142,0.18) 50%,
    transparent
  );
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.card-14__card:hover .card-14__beam {
  opacity: 1;
  animation: card-14-sweep 2s linear infinite;
}
@keyframes card-14-sweep {
  0% { top: -80px; }
  100% { top: 100%; }
}

.card-14__card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 60%, rgba(0,0,0,0.5));
}

@media (prefers-reduced-motion: reduce) {
  .card-14__cursor,
  .card-14__beam {
    animation: none !important;
  }
}
```

### 15. Depth Parallax

**Type:** CSS + JS
**Description:** A landscape/travel card with stacked depth layers (mountains, sun, foreground hills) that shift independently as the cursor moves, creating real 3D depth. Best for travel, outdoor, and immersive storytelling cards where motion conveys place.

**HTML:**
```html
<div class="card-15">
  <article class="card-15__card" data-card-15="root">
    <div class="card-15__layer card-15__far"  data-depth="8"></div>
    <div class="card-15__layer card-15__sun"  data-depth="16"><div class="card-15__orb"></div></div>
    <div class="card-15__layer card-15__near" data-depth="28"></div>
    <div class="card-15__content" data-depth="40">
      <span class="card-15__kicker">Field Notes</span>
      <h2 class="card-15__title">Valley of<br>Long Light</h2>
      <p class="card-15__desc">A guided dawn trek through layered ridgelines. Move your cursor to feel the depth.</p>
    </div>
  </article>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,800&family=Inter+Tight:wght@400;600&display=swap');

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

.card-15 {
  min-height: 460px;
  display: grid;
  place-items: center;
  background: #0b1d2a;
  font-family: 'Inter Tight', sans-serif;
  padding: 2rem;
  perspective: 1000px;
}

.card-15__card {
  position: relative;
  width: 340px;
  height: 440px;
  border-radius: 22px;
  cursor: pointer;
  overflow: hidden;
  transform-style: preserve-3d;
  transition: transform 0.2s ease-out, box-shadow 0.4s ease;
  background: linear-gradient(180deg, #2c6e8f 0%, #0b1d2a 100%);
  box-shadow: 0 20px 50px rgba(0,0,0,0.45);
}

.card-15__layer {
  position: absolute;
  inset: 0;
  transition: transform 0.2s ease-out;
  will-change: transform;
}

.card-15__far {
  background:
    radial-gradient(circle at 20% 70%, #1b4a63 0 28%, transparent 29%),
    radial-gradient(circle at 70% 75%, #1b4a63 0 32%, transparent 33%);
  opacity: 0.9;
}

.card-15__sun {
  display: grid;
  place-items: center;
}
.card-15__sun .card-15__orb {
  width: 130px; height: 130px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffd56b, #ff8c42);
  box-shadow: 0 0 60px rgba(255,170,80,0.6);
  margin-top: -60px;
}

.card-15__near {
  background:
    radial-gradient(ellipse 120% 60% at 30% 110%, #06222e 60%, transparent 61%),
    radial-gradient(ellipse 120% 50% at 80% 115%, #04161e 60%, transparent 61%);
}

.card-15__content {
  position: absolute;
  inset: 0;
  z-index: 5;
  padding: 2.2rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: #eaf4fa;
  transition: transform 0.2s ease-out;
}
.card-15__kicker {
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #ffd56b;
}
.card-15__title {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800;
  font-size: 2.6rem;
  line-height: 0.95;
  margin: 0.4rem 0 0.6rem;
}
.card-15__desc {
  font-size: 0.85rem;
  line-height: 1.6;
  color: #b9d0dd;
}

@media (prefers-reduced-motion: reduce) {
  .card-15__card,
  .card-15__layer,
  .card-15__content {
    transition: none !important;
  }
}
```

**JS:**
```js
(() => {
  const root = document.querySelector('.card-15');
  if (!root) return;
  const card = root.querySelector('[data-card-15="root"]');
  if (!card) return;
  const layers = card.querySelectorAll('[data-depth]');
  card.addEventListener('mousemove', (e) => {
    const r = card.getBoundingClientRect();
    const x = (e.clientX - r.left) / r.width - 0.5;
    const y = (e.clientY - r.top) / r.height - 0.5;
    card.style.transform = `rotateY(${x * 10}deg) rotateX(${-y * 10}deg)`;
    layers.forEach((l) => {
      const d = parseFloat(l.dataset.depth);
      l.style.transform = `translate(${-x * d}px, ${-y * d}px)`;
    });
  });
  card.addEventListener('mouseleave', () => {
    card.style.transform = 'rotateY(0) rotateX(0)';
    layers.forEach((l) => (l.style.transform = 'translate(0,0)'));
  });
})();
```

### 16. Spotlight

**Type:** CSS + JS
**Description:** A minimalist case-study card where a soft light and a matching border highlight follow the cursor across a dark surface. The restraint makes it ideal for design studios, agencies, and premium editorial content that values calm sophistication.

**HTML:**
```html
<div class="card-16">
  <article class="card-16__card" data-card-16="root">
    <div class="card-16__inner">
      <div class="card-16__row">
        <span>CASE STUDY</span>
        <span>2025</span>
      </div>
      <h2 class="card-16__title">Quiet<br><em>Interfaces</em></h2>
      <p class="card-16__desc">A design system built on restraint. The light follows you because attention should follow intent.</p>
      <span class="card-16__foot">— READ THE ESSAY</span>
    </div>
  </article>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist+Mono:wght@400;500&display=swap');

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

.card-16 {
  min-height: 460px;
  display: grid;
  place-items: center;
  background: #08080a;
  font-family: 'Geist Mono', monospace;
  padding: 2rem;
}

.card-16__card {
  --card-16-x: 50%;
  --card-16-y: 50%;
  position: relative;
  width: 340px;
  height: 440px;
  border-radius: 18px;
  background: #101014;
  cursor: pointer;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.06);
}

.card-16__card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    300px circle at var(--card-16-x) var(--card-16-y),
    rgba(120, 200, 255, 0.18),
    transparent 60%
  );
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 1;
}
.card-16__card:hover::before { opacity: 1; }

.card-16__card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: radial-gradient(
    250px circle at var(--card-16-x) var(--card-16-y),
    rgba(120,200,255,0.6),
    transparent 50%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 2;
}
.card-16__card:hover::after { opacity: 1; }

.card-16__inner {
  position: relative;
  z-index: 3;
  height: 100%;
  padding: 2.4rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #d7dbe2;
}

.card-16__row {
  display: flex;
  justify-content: space-between;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: #6a7080;
}
.card-16__title {
  font-family: 'Instrument Serif', serif;
  font-size: 3.4rem;
  line-height: 0.95;
  color: #f3f5f9;
}
.card-16__title em { color: #78c8ff; }
.card-16__desc {
  font-size: 0.82rem;
  line-height: 1.65;
  color: #8e94a3;
}
.card-16__foot {
  font-size: 0.72rem;
  color: #6a7080;
  letter-spacing: 0.12em;
}

@media (prefers-reduced-motion: reduce) {
  .card-16__card::before,
  .card-16__card::after {
    transition: none !important;
  }
}
```

**JS:**
```js
(() => {
  const root = document.querySelector('.card-16');
  if (!root) return;
  const c = root.querySelector('[data-card-16="root"]');
  if (!c) return;
  c.addEventListener('mousemove', (e) => {
    const r = c.getBoundingClientRect();
    c.style.setProperty('--card-16-x', `${e.clientX - r.left}px`);
    c.style.setProperty('--card-16-y', `${e.clientY - r.top}px`);
  });
})();
```

### 17. 3D Tilt

**Type:** CSS + JS
**Description:** A product card that tilts in 3D toward the cursor with a moving specular glare and layered depth on the text, using translateZ for true parallax. Perfect for sneaker drops, gadgets, and hero product features that reward close inspection.

**HTML:**
```html
<div class="card-17">
  <article class="card-17__card" data-card-17="root">
    <div class="card-17__glare"></div>
    <div class="card-17__inner">
      <span class="card-17__chip">Limited Drop</span>
      <h2 class="card-17__title">Nimbus<br>Hi-Tops</h2>
      <p class="card-17__desc">Float-foam midsole and an iridescent upper that shifts as it turns in the light.</p>
      <span class="card-17__price">$189</span>
    </div>
  </article>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Clash+Display:wght@600;700&family=Space+Grotesk:wght@400;500&display=swap');
@import url('https://fonts.cdnfonts.com/css/clash-display');

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

.card-17 {
  min-height: 460px;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 70% 30%, #2a1f4d, #0d0a1a 70%);
  font-family: 'Space Grotesk', sans-serif;
  padding: 2rem;
  perspective: 1100px;
}

.card-17__card {
  position: relative;
  width: 330px;
  height: 440px;
  border-radius: 24px;
  cursor: pointer;
  transform-style: preserve-3d;
  transition: transform 0.12s ease-out, box-shadow 0.4s ease;
  background: linear-gradient(150deg, #3a2b6e, #18122e);
  box-shadow: 0 25px 50px rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.08);
}

.card-17__glare {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    circle at var(--card-17-gx, 50%) var(--card-17-gy, 50%),
    rgba(255,255,255,0.28),
    transparent 45%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 5;
}
.card-17__card:hover .card-17__glare { opacity: 1; }

.card-17__inner {
  height: 100%;
  padding: 2.4rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #ede9ff;
  transform: translateZ(0);
}

.card-17__chip {
  align-self: flex-start;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.4rem 0.9rem;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 999px;
  transform: translateZ(60px);
  color: #c5b8ff;
}
.card-17__title {
  font-family: 'Clash Display', 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 2.8rem;
  line-height: 0.95;
  transform: translateZ(80px);
}
.card-17__desc {
  font-size: 0.85rem;
  line-height: 1.6;
  color: #b3a9d6;
  transform: translateZ(40px);
}
.card-17__price {
  font-family: 'Clash Display', 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: 1.6rem;
  transform: translateZ(70px);
  color: #9d7bff;
}

@media (prefers-reduced-motion: reduce) {
  .card-17__card,
  .card-17__glare {
    transition: none !important;
  }
}
```

**JS:**
```js
(() => {
  const root = document.querySelector('.card-17');
  if (!root) return;
  const c = root.querySelector('[data-card-17="root"]');
  if (!c) return;
  c.addEventListener('mousemove', (e) => {
    const r = c.getBoundingClientRect();
    const px = (e.clientX - r.left) / r.width;
    const py = (e.clientY - r.top) / r.height;
    c.style.transform = `rotateY(${(px - 0.5) * 20}deg) rotateX(${(0.5 - py) * 20}deg)`;
    c.style.setProperty('--card-17-gx', `${px * 100}%`);
    c.style.setProperty('--card-17-gy', `${py * 100}%`);
  });
  c.addEventListener('mouseleave', () => {
    c.style.transform = 'rotateY(0) rotateX(0)';
  });
})();
```

### 18. Slide Up Content

**Type:** Pure CSS
**Description:** A travel/blog card showing a hero image with a minimal label that slides away as a frosted detail panel rises from the bottom. A clean, dependable pattern for article grids, portfolios, and product listings that need progressive disclosure.

**HTML:**
```html
<div class="card-18">
  <article class="card-18__card">
    <div class="card-18__media"></div>
    <div class="card-18__peek">
      <span class="card-18__peek-cat">Travel · 12 min</span>
      <h2 class="card-18__peek-title">Sunset Over<br>Cartagena</h2>
    </div>
    <div class="card-18__panel">
      <span class="card-18__panel-cat">Travel · 12 min read</span>
      <h3 class="card-18__panel-title">Sunset Over Cartagena</h3>
      <p class="card-18__panel-desc">Walled-city rooftops, fruit carts at dusk, and where to find the best ceviche after dark.</p>
      <a class="card-18__panel-link">READ STORY →</a>
    </div>
  </article>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;600;800&family=JetBrains+Mono:wght@400;500&display=swap');

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

.card-18 {
  min-height: 460px;
  display: grid;
  place-items: center;
  background: #e8e4dd;
  font-family: 'Sora', sans-serif;
  padding: 2rem;
}

.card-18__card {
  position: relative;
  width: 330px;
  height: 440px;
  border-radius: 20px;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(0,0,0,0.2);
}

.card-18__media {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(160deg, #ff6b4a, #c91f5f 60%, #5b1e6b);
}
.card-18__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.3), transparent 50%);
}

.card-18__peek {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 1.8rem;
  z-index: 3;
  color: #fff;
  transition: transform 0.5s cubic-bezier(0.16,1,0.3,1), opacity 0.4s ease;
}
.card-18__peek-cat {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.85;
}
.card-18__peek-title {
  font-weight: 800;
  font-size: 1.9rem;
  line-height: 1.05;
  margin-top: 0.3rem;
}
.card-18__card:hover .card-18__peek {
  transform: translateY(-130px);
  opacity: 0;
}

.card-18__panel {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: rgba(12,8,16,0.92);
  backdrop-filter: blur(8px);
  color: #f0ece6;
  padding: 1.8rem;
  z-index: 4;
  transform: translateY(100%);
  transition: transform 0.5s cubic-bezier(0.16,1,0.3,1);
}
.card-18__card:hover .card-18__panel { transform: translateY(0); }

.card-18__panel-cat {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #ff8a6b;
}
.card-18__panel-title {
  font-weight: 800;
  font-size: 1.7rem;
  line-height: 1.05;
  margin: 0.4rem 0 0.7rem;
}
.card-18__panel-desc {
  font-size: 0.85rem;
  line-height: 1.6;
  color: #c4bdb4;
}
.card-18__panel-link {
  display: inline-block;
  margin-top: 1rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  color: #ff8a6b;
  letter-spacing: 0.08em;
}

@media (prefers-reduced-motion: reduce) {
  .card-18__peek,
  .card-18__panel {
    transition: none !important;
  }
}
```

### 19. Flip Card

**Type:** Pure CSS
**Description:** A credit-card-style component that performs a full 180° 3D flip to reveal the reverse face, complete with magnetic strip and CVV. Ideal for fintech, membership cards, profiles, or any front/back information pairing.

**HTML:**
```html
<div class="card-19">
  <article class="card-19__card">
    <div class="card-19__face card-19__front">
      <div style="display:flex;justify-content:space-between;align-items:center;">
        <div class="card-19__front-logo">◈</div>
        <span style="font-family:'IBM Plex Mono';font-size:0.75rem;letter-spacing:0.2em;">PLATINUM</span>
      </div>
      <div class="card-19__front-num">4921 ·· 7755 ·· 0042</div>
      <div class="card-19__front-row">
        <span class="card-19__front-name">A. Marlowe</span>
        <span>12/29</span>
      </div>
    </div>
    <div class="card-19__face card-19__back">
      <div class="card-19__back-strip"></div>
      <h2 class="card-19__back-title">Flip to<br>the back</h2>
      <p class="card-19__back-desc">Same card, two faces. A full 180° rotation reveals account details on the reverse.</p>
      <span class="card-19__back-cvv">··· 309</span>
    </div>
  </article>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Libre+Franklin:wght@400;600;800&family=IBM+Plex+Mono:wght@400;500&display=swap');

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

.card-19 {
  min-height: 460px;
  display: grid;
  place-items: center;
  background: #0e1116;
  font-family: 'Libre Franklin', sans-serif;
  padding: 2rem;
  perspective: 1500px;
}

.card-19__card {
  width: 330px;
  height: 440px;
  cursor: pointer;
  transform-style: preserve-3d;
  transition: transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1);
  position: relative;
}
.card-19__card:hover { transform: rotateY(180deg); }

.card-19__face {
  position: absolute;
  inset: 0;
  border-radius: 20px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
  padding: 2.4rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 20px 45px rgba(0,0,0,0.45);
}

.card-19__front {
  background: linear-gradient(160deg, #12806a, #064237);
  color: #eafff7;
}
.card-19__front-logo {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: #eafff7;
  color: #064237;
  display: grid; place-items: center;
  font-weight: 800; font-size: 1.3rem;
}
.card-19__front-num {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 1.4rem;
  letter-spacing: 0.16em;
}
.card-19__front-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  font-size: 0.78rem;
}
.card-19__front-name { font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }

.card-19__back {
  background: linear-gradient(160deg, #1a1f29, #0c0f14);
  color: #dfe4ec;
  transform: rotateY(180deg);
}
.card-19__back-strip {
  height: 46px;
  background: #000;
  margin: 0 -2.4rem;
}
.card-19__back-title {
  font-weight: 800;
  font-size: 1.6rem;
  line-height: 1.1;
}
.card-19__back-desc {
  font-size: 0.85rem;
  line-height: 1.6;
  color: #9aa3b2;
}
.card-19__back-cvv {
  font-family: 'IBM Plex Mono', monospace;
  background: #e8ecf3;
  color: #0c0f14;
  align-self: flex-end;
  padding: 0.3rem 0.9rem;
  border-radius: 6px;
  letter-spacing: 0.2em;
  font-weight: 500;
}

@media (prefers-reduced-motion: reduce) {
  .card-19__card {
    transition: none !important;
  }
}
```

### 20. Glitch Card

**Type:** Pure CSS
**Description:** An event/music card with RGB channel-split text, datamosh slice bars, and stepped jitter animation on hover. Built for cyberpunk, electronic music, gaming, and edgy brands that want controlled digital chaos.

**HTML:**
```html
<div class="card-20">
  <article class="card-20__card">
    <div class="card-20__bars"></div>
    <div class="card-20__inner">
      <span class="card-20__tag">// SIGNAL_LOST</span>
      <h2 class="card-20__title">
        <span class="card-20__ghost card-20__ghost-r" aria-hidden="true">NULL<br>CITY</span>
        <span class="card-20__ghost card-20__ghost-c" aria-hidden="true">NULL<br>CITY</span>
        <span class="card-20__real">NULL<br>CITY</span>
      </h2>
      <p class="card-20__desc">A cyberpunk audio-visual set. Corrupted frames, datamoshed visuals, bass you feel in your teeth.</p>
      <span class="card-20__foot">FRI · WAREHOUSE 7 · 23:00</span>
    </div>
  </article>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Space+Mono:wght@400;700&display=swap');

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

.card-20 {
  min-height: 460px;
  display: grid;
  place-items: center;
  background: #08080a;
  font-family: 'Space Mono', monospace;
  padding: 2rem;
}

.card-20__card {
  position: relative;
  width: 340px;
  height: 440px;
  border-radius: 4px;
  background: #0f0f12;
  cursor: pointer;
  overflow: hidden;
  border: 1px solid #1c1c22;
}

.card-20__inner {
  position: relative;
  z-index: 2;
  height: 100%;
  padding: 2.4rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #e8e8ee;
}

.card-20__tag {
  font-size: 0.72rem;
  letter-spacing: 0.25em;
  color: #00e0ff;
}

.card-20__title {
  font-family: 'Anton', sans-serif;
  font-size: 4rem;
  line-height: 0.85;
  text-transform: uppercase;
  position: relative;
  color: #fff;
  display: inline-block;
}

.card-20__ghost {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.card-20__ghost.card-20__ghost-r { color: #ff003c; }
.card-20__ghost.card-20__ghost-c { color: #00e0ff; }

.card-20__card:hover .card-20__ghost.card-20__ghost-r {
  opacity: 0.85;
  animation: card-20-shift-a 0.35s steps(2) infinite;
}
.card-20__card:hover .card-20__ghost.card-20__ghost-c {
  opacity: 0.85;
  animation: card-20-shift-b 0.35s steps(2) infinite;
}
@keyframes card-20-shift-a {
  0% { transform: translate(0,0); clip-path: inset(0 0 70% 0); }
  50% { transform: translate(-4px,2px); clip-path: inset(40% 0 20% 0); }
  100% { transform: translate(3px,-2px); clip-path: inset(70% 0 0 0); }
}
@keyframes card-20-shift-b {
  0% { transform: translate(0,0); clip-path: inset(60% 0 10% 0); }
  50% { transform: translate(4px,-2px); clip-path: inset(10% 0 60% 0); }
  100% { transform: translate(-3px,2px); clip-path: inset(30% 0 40% 0); }
}

.card-20__real {
  position: relative;
  z-index: 1;
  display: block;
}
.card-20__desc {
  font-size: 0.82rem;
  line-height: 1.6;
  color: #888;
}
.card-20__foot {
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  color: #555;
}

.card-20__bars {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
}
.card-20__card:hover .card-20__bars { opacity: 1; animation: card-20-bars 0.4s steps(3) infinite; }
.card-20__bars::before, .card-20__bars::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: rgba(0,224,255,0.5);
}
.card-20__bars::before { top: 32%; }
.card-20__bars::after  { top: 68%; background: rgba(255,0,60,0.5); }
@keyframes card-20-bars {
  0%,100% { transform: translateX(0); }
  50% { transform: translateX(6px); }
}

@media (prefers-reduced-motion: reduce) {
  .card-20__ghost,
  .card-20__bars {
    animation: none !important;
  }
}
```

### 21. Gradient Rotate

**Type:** Pure CSS
**Description:** A creative-suite card framed by a blurred conic gradient that rotates behind a masked inner panel, leaving a glowing animated ring. Great for AI tools, creative apps, and SaaS landing cards needing an energetic, "alive" aura.

**HTML:**
```html
<div class="card-21">
  <article class="card-21__card">
    <div class="card-21__inner">
      <span class="card-21__eyebrow">AI · CREATIVE SUITE</span>
      <h2 class="card-21__title">Spectra<br>Studio</h2>
      <p class="card-21__desc">Generate, remix, and color-grade in one canvas. The aura rotates while the engine warms up.</p>
      <span class="card-21__cta">→ START FREE TRIAL</span>
    </div>
  </article>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;500;700&family=Azeret+Mono:wght@400;500&display=swap');

@property --card-21-gr {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

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

.card-21 {
  min-height: 460px;
  display: grid;
  place-items: center;
  background: #0a0a0f;
  font-family: 'Outfit', sans-serif;
  padding: 2rem;
}

.card-21__card {
  position: relative;
  width: 330px;
  height: 430px;
  border-radius: 24px;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  background: #111118;
}

.card-21__card::before {
  content: "";
  position: absolute;
  inset: -40%;
  z-index: 0;
  background: conic-gradient(
    from var(--card-21-gr),
    #ff4d6d, #ffa64d, #ffe14d, #4dffa6, #4dd2ff, #b04dff, #ff4d6d
  );
  filter: blur(40px) saturate(1.2);
  opacity: 0.65;
  transition: opacity 0.5s ease;
  animation: card-21-spin 6s linear infinite paused;
}
@keyframes card-21-spin { to { --card-21-gr: 360deg; } }
.card-21__card:hover::before {
  opacity: 1;
  animation-play-state: running;
}

.card-21__card::after {
  content: "";
  position: absolute;
  inset: 2px;
  z-index: 1;
  border-radius: 22px;
  background: linear-gradient(160deg, #15151e, #0c0c12);
}

.card-21__inner {
  position: relative;
  z-index: 2;
  height: 100%;
  padding: 2.4rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #f2f2f7;
}

.card-21__eyebrow {
  font-family: 'Azeret Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  color: #9a9ab0;
}
.card-21__title {
  font-weight: 700;
  font-size: 2.6rem;
  line-height: 1;
  background: linear-gradient(120deg, #ff8aa0, #ffd24d, #6ad6ff);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
.card-21__desc {
  font-size: 0.88rem;
  line-height: 1.6;
  color: #a6a6bc;
  font-weight: 300;
}
.card-21__cta {
  font-family: 'Azeret Mono', monospace;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  color: #ffd24d;
}

@media (prefers-reduced-motion: reduce) {
  .card-21__card::before {
    animation: none !important;
  }
}
```

### 22. Border Morph

**Type:** Pure CSS
**Description:** A wellness/meditation card that morphs from an organic blob shape into a clean rounded rectangle on hover, with icons and buttons reshaping in sync. Best for calm, friendly, lifestyle, or health brands where softness is on-brand.

**HTML:**
```html
<div class="card-22">
  <article class="card-22__card">
    <div class="card-22__inner">
      <div class="card-22__icon">🫧</div>
      <div>
        <h2 class="card-22__title">Bubble<br>Wellness</h2>
        <p class="card-22__desc">A meditation app that breathes with you. Shapes soften and settle as you exhale.</p>
      </div>
      <span class="card-22__btn">Try a session</span>
    </div>
  </article>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=DM+Sans:opsz,wght@9..40,400;9..40,500&display=swap');

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

.card-22 {
  min-height: 460px;
  display: grid;
  place-items: center;
  background: #fef0e6;
  background-image: radial-gradient(circle at 80% 10%, #ffe0cc, transparent 50%);
  font-family: 'DM Sans', sans-serif;
  padding: 2rem;
}

.card-22__card {
  position: relative;
  width: 320px;
  height: 420px;
  cursor: pointer;
  background: linear-gradient(155deg, #ff7e54, #ff4d8d);
  color: #fff;
  border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%;
  transition: border-radius 0.7s cubic-bezier(0.34,1.4,0.5,1),
              transform 0.5s ease,
              box-shadow 0.5s ease;
  box-shadow: 0 20px 45px rgba(255,77,141,0.35);
  overflow: hidden;
}

.card-22__card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.35), transparent 55%);
}

.card-22__card:hover {
  border-radius: 28px;
  transform: translateY(-6px);
  box-shadow: 0 30px 60px rgba(255,77,141,0.45);
}

.card-22__inner {
  position: relative;
  z-index: 2;
  height: 100%;
  padding: 2.6rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.card-22__icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  display: grid; place-items: center;
  font-size: 1.6rem;
  transition: border-radius 0.7s cubic-bezier(0.34,1.4,0.5,1);
}
.card-22__card:hover .card-22__icon { border-radius: 16px; }

.card-22__title {
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  font-size: 2.5rem;
  line-height: 1;
}
.card-22__desc {
  font-size: 0.9rem;
  line-height: 1.6;
  color: rgba(255,255,255,0.9);
}
.card-22__btn {
  align-self: flex-start;
  background: #fff;
  color: #ff4d8d;
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  padding: 0.7rem 1.6rem;
  border-radius: 999px;
  font-size: 0.9rem;
  transition: border-radius 0.7s cubic-bezier(0.34,1.4,0.5,1);
}
.card-22__card:hover .card-22__btn { border-radius: 12px; }

@media (prefers-reduced-motion: reduce) {
  .card-22__card,
  .card-22__icon,
  .card-22__btn {
    transition: none !important;
  }
}
```

### 23. Magnetic Float

**Type:** CSS + JS
**Description:** A music/interactive card with a glowing orb that leans toward the cursor as if caught in a magnetic field, over a tech grid backdrop. Ideal for interactive demos, audio apps, and playful CTAs that invite the pointer in.

**HTML:**
```html
<div class="card-23">
  <article class="card-23__card" data-card-23="root">
    <div class="card-23__grid"></div>
    <div class="card-23__orb" data-card-23="orb">PLAY ▶</div>
    <div class="card-23__inner">
      <span class="card-23__eyebrow">Interactive Demo</span>
      <h2 class="card-23__title">Gravity<br>Synth</h2>
      <p class="card-23__desc">Drag your cursor near the orb — it leans toward you like it's caught in your field.</p>
    </div>
  </article>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@500;700;900&family=Manrope:wght@400;500;700&display=swap');

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

.card-23 {
  min-height: 460px;
  display: grid;
  place-items: center;
  background: #06060a;
  font-family: 'Manrope', sans-serif;
  padding: 2rem;
}

.card-23__card {
  position: relative;
  width: 340px;
  height: 440px;
  border-radius: 26px;
  background: radial-gradient(circle at 50% 0%, #1c2540, #0a0d1a);
  cursor: pointer;
  overflow: hidden;
  border: 1px solid rgba(120,160,255,0.12);
}

.card-23__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(120,160,255,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,160,255,0.06) 1px, transparent 1px);
  background-size: 28px 28px;
}

.card-23__inner {
  position: relative;
  z-index: 2;
  height: 100%;
  padding: 2.4rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #e9eefc;
}

.card-23__eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #6f8bd6;
}
.card-23__title {
  font-family: 'Unbounded', sans-serif;
  font-weight: 700;
  font-size: 2.1rem;
  line-height: 1.05;
}
.card-23__desc {
  font-size: 0.85rem;
  line-height: 1.6;
  color: #93a0c4;
}

.card-23__orb {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 110px;
  height: 110px;
  margin: -55px 0 0 -55px;
  border-radius: 50%;
  background: linear-gradient(145deg, #6a8cff, #b46aff);
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  z-index: 3;
  box-shadow: 0 0 40px rgba(120,140,255,0.5);
  transition: transform 0.18s ease-out, box-shadow 0.3s ease;
  will-change: transform;
}
.card-23__card:hover .card-23__orb {
  box-shadow: 0 0 60px rgba(140,120,255,0.7);
}

@media (prefers-reduced-motion: reduce) {
  .card-23__orb {
    transition: none !important;
  }
}
```

**JS:**
```js
(() => {
  const root = document.querySelector('.card-23');
  if (!root) return;
  const card = root.querySelector('[data-card-23="root"]');
  const orb = root.querySelector('[data-card-23="orb"]');
  if (!card || !orb) return;
  card.addEventListener('mousemove', (e) => {
    const r = card.getBoundingClientRect();
    const cx = r.left + r.width / 2;
    const cy = r.top + r.height / 2;
    const dx = (e.clientX - cx) * 0.4;
    const dy = (e.clientY - cy) * 0.4;
    orb.style.transform = `translate(${dx}px, ${dy}px) scale(1.05)`;
  });
  card.addEventListener('mouseleave', () => {
    orb.style.transform = 'translate(0,0) scale(1)';
  });
})();
```

### 24. Typewriter Reveal

**Type:** Pure CSS
**Description:** A field-journal card that types out its quote line-by-line with a blinking caret on hover, on aged paper with grain. Perfect for storytelling, blogs, narrative brands, and editorial content with a literary voice.

**HTML:**
```html
<div class="card-24">
  <article class="card-24__card">
    <div class="card-24__inner">
      <div class="card-24__meta">Dispatch No. 14 — Field Log</div>
      <h2 class="card-24__title">The Cartographer's<br>Last Letter</h2>
      <p class="card-24__line card-24__l1">They said the river had no end —</p>
      <p class="card-24__line card-24__l2">so I followed it anyway.</p>
      <div class="card-24__foot">— hover to type the entry —</div>
    </div>
  </article>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Special+Elite&family=Courier+Prime:wght@400;700&display=swap');

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

.card-24 {
  min-height: 460px;
  display: grid;
  place-items: center;
  background: #ddd6c7;
  background-image:
    radial-gradient(circle at 50% 50%, #e8e1d2, #c9c0ad);
  font-family: 'Courier Prime', monospace;
  padding: 2rem;
}

.card-24__card {
  position: relative;
  width: 350px;
  height: 440px;
  border-radius: 4px;
  background: #f7f2e7;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 16px 36px rgba(60,50,30,0.25);
  border: 1px solid #d8cfba;
}

.card-24__card::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(120,100,70,0.06) 0.5px, transparent 0.6px);
  background-size: 4px 4px;
  pointer-events: none;
}

.card-24__inner {
  position: relative;
  z-index: 2;
  height: 100%;
  padding: 2.4rem;
  display: flex;
  flex-direction: column;
  color: #2c2419;
}

.card-24__meta {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #8a7a5a;
  border-bottom: 1px solid #d8cfba;
  padding-bottom: 0.8rem;
  margin-bottom: 1.6rem;
}

.card-24__title {
  font-family: 'Special Elite', cursive;
  font-size: 2rem;
  line-height: 1.15;
  margin-bottom: 1.4rem;
  min-height: 4.6rem;
}

.card-24__line {
  font-family: 'Special Elite', cursive;
  font-size: 0.95rem;
  line-height: 1.7;
  white-space: nowrap;
  overflow: hidden;
  width: 0;
  border-right: 2px solid #2c2419;
}
.card-24__card:hover .card-24__line {
  animation:
    card-24-type 2.2s steps(34) forwards,
    card-24-caret 0.6s steps(1) infinite;
}
.card-24__card:hover .card-24__line.card-24__l2 {
  animation:
    card-24-type 1.8s steps(28) 2.2s forwards,
    card-24-caret 0.6s steps(1) infinite;
  border-right-color: transparent;
}
.card-24__card:hover .card-24__line.card-24__l1 { border-right-color: transparent; }

@keyframes card-24-type { to { width: 100%; } }
@keyframes card-24-caret { 50% { border-right-color: transparent; } }

.card-24__foot {
  margin-top: auto;
  font-size: 0.75rem;
  color: #8a7a5a;
  letter-spacing: 0.1em;
}

@media (prefers-reduced-motion: reduce) {
  .card-24__card:hover .card-24__line {
    animation: none !important;
  }
}
```

### 25. Overlay Slide

**Type:** Pure CSS
**Description:** A magazine card where a bold color panel slides up from the bottom to overtake the cover, swapping the teaser for full article details. A strong choice for editorial grids, issue archives, and publication or portfolio listings.

**HTML:**
```html
<div class="card-25">
  <article class="card-25__card">
    <div class="card-25__base">
      <span class="card-25__base-cat">Editorial</span>
      <h2 class="card-25__base-title">Issue<br>No. 27</h2>
    </div>
    <div class="card-25__panel">
      <span class="card-25__panel-num">№ 27 — Spring</span>
      <h3 class="card-25__panel-title">The Red<br>Issue</h3>
      <p class="card-25__panel-desc">Forty pages on color, courage, and the people painting cities awake.</p>
      <span class="card-25__panel-link">Read the issue →</span>
    </div>
  </article>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:opsz,wght@6..96,500;6..96,900&family=Work+Sans:wght@400;500&display=swap');

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

.card-25 {
  min-height: 460px;
  display: grid;
  place-items: center;
  background: #f2f0eb;
  font-family: 'Work Sans', sans-serif;
  padding: 2rem;
}

.card-25__card {
  position: relative;
  width: 330px;
  height: 440px;
  border-radius: 2px;
  cursor: pointer;
  overflow: hidden;
  background: #1a1a1a;
  box-shadow: 0 18px 40px rgba(0,0,0,0.2);
}

.card-25__base {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.45)),
    linear-gradient(135deg, #6b7c8c, #2f3a44);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 2.2rem;
  color: #fff;
}
.card-25__base-cat {
  font-size: 0.7rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  opacity: 0.85;
}
.card-25__base-title {
  font-family: 'Bodoni Moda', serif;
  font-weight: 900;
  font-size: 2.4rem;
  line-height: 1;
  margin-top: 0.4rem;
}

.card-25__panel {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: #e23744;
  transform: translateY(101%);
  transition: transform 0.55s cubic-bezier(0.76,0,0.24,1);
  padding: 2.2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #fff;
}
.card-25__card:hover .card-25__panel { transform: translateY(0); }

.card-25__panel-num {
  font-family: 'Bodoni Moda', serif;
  font-style: italic;
  font-size: 1rem;
}
.card-25__panel-title {
  font-family: 'Bodoni Moda', serif;
  font-weight: 900;
  font-size: 2.6rem;
  line-height: 0.95;
}
.card-25__panel-desc {
  font-size: 0.88rem;
  line-height: 1.6;
  color: rgba(255,255,255,0.92);
}
.card-25__panel-link {
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-top: 1px solid rgba(255,255,255,0.4);
  padding-top: 1rem;
}

@media (prefers-reduced-motion: reduce) {
  .card-25__panel {
    transition: none !important;
  }
}
```

### 26. Grain Texture

**Type:** Pure CSS
**Description:** A vintage film card where animated SVG noise grain breathes faster and stronger on hover over a sepia, vignetted frame. Suited to photography, film, archival, and any brand chasing an analog, celluloid mood.

**HTML:**
```html
<div class="card-26">
  <article class="card-26__card">
    <div class="card-26__overlay"></div>
    <div class="card-26__inner">
      <span class="card-26__meta">SUPER 8 · 1974</span>
      <h2 class="card-26__title">Golden<br>Hour Reel</h2>
      <p class="card-26__desc">A scanned film transfer. Hover and the grain breathes, like light running through celluloid.</p>
    </div>
  </article>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Cormorant:wght@500;600&family=Fragment+Mono&display=swap');

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

.card-26 {
  min-height: 460px;
  display: grid;
  place-items: center;
  background: #16130f;
  font-family: 'Fragment Mono', monospace;
  padding: 2rem;
}

.card-26__card {
  position: relative;
  width: 330px;
  height: 440px;
  border-radius: 8px;
  cursor: pointer;
  overflow: hidden;
  background: linear-gradient(160deg, #3a2e22, #1b140d);
  box-shadow: 0 20px 45px rgba(0,0,0,0.5);
}

.card-26__card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 35%, rgba(210,170,110,0.35), transparent 60%),
    linear-gradient(160deg, #5a4732, #241a10);
}

.card-26__overlay {
  position: absolute;
  inset: -50%;
  z-index: 2;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.12;
  mix-blend-mode: overlay;
  pointer-events: none;
  transition: opacity 0.5s ease;
  animation: card-26-move 0.6s steps(4) infinite;
}
.card-26__card:hover .card-26__overlay {
  opacity: 0.42;
  animation-duration: 0.25s;
}
@keyframes card-26-move {
  0% { transform: translate(0,0); }
  25% { transform: translate(-8%, 5%); }
  50% { transform: translate(6%, -8%); }
  75% { transform: translate(-5%, -4%); }
  100% { transform: translate(7%, 6%); }
}

.card-26__card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  box-shadow: inset 0 0 90px rgba(0,0,0,0.7);
  pointer-events: none;
}

.card-26__inner {
  position: relative;
  z-index: 4;
  height: 100%;
  padding: 2.4rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #f0e2cc;
}

.card-26__meta {
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  color: #c9a877;
}
.card-26__title {
  font-family: 'Cormorant', serif;
  font-weight: 600;
  font-size: 3rem;
  line-height: 0.95;
  font-style: italic;
}
.card-26__desc {
  font-size: 0.82rem;
  line-height: 1.65;
  color: #c4b39a;
}

@media (prefers-reduced-motion: reduce) {
  .card-26__overlay {
    animation: none !important;
  }
}
```

### 27. Frosted Glass Intensify

**Type:** Pure CSS
**Description:** A weather-widget card over a vivid color backdrop whose backdrop-filter blur deepens on hover, melting the colors behind the glass. Ideal for dashboards, weather/utility widgets, and modern glassmorphism interfaces.

**HTML:**
```html
<div class="card-27">
  <article class="card-27__card">
    <div class="card-27__inner">
      <span class="card-27__pill">Weather · Now</span>
      <h2 class="card-27__title">Coastal<br>Forecast</h2>
      <p class="card-27__desc">A glass widget over a living wallpaper. Hover and the frost thickens, melting the color behind it.</p>
      <div class="card-27__foot">
        <span>Light fog · breezy</span>
        <b>18°</b>
      </div>
    </div>
  </article>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;800&display=swap');

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

.card-27 {
  min-height: 460px;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 20% 30%, #ff5ea0 0 22%, transparent 23%),
    radial-gradient(circle at 75% 25%, #ffd23f 0 18%, transparent 19%),
    radial-gradient(circle at 60% 80%, #2bd9c4 0 26%, transparent 27%),
    radial-gradient(circle at 30% 75%, #6a5cff 0 20%, transparent 21%),
    #1a0f2e;
  font-family: 'Hanken Grotesk', sans-serif;
  padding: 2rem;
}

.card-27__card {
  position: relative;
  width: 340px;
  height: 440px;
  border-radius: 26px;
  cursor: pointer;
  overflow: hidden;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.22);
  -webkit-backdrop-filter: blur(4px) saturate(1.1);
          backdrop-filter: blur(4px) saturate(1.1);
  box-shadow: 0 18px 50px rgba(0,0,0,0.3);
  transition:
    backdrop-filter 0.5s ease,
    -webkit-backdrop-filter 0.5s ease,
    background 0.5s ease,
    border-color 0.5s ease,
    transform 0.4s ease;
}
.card-27__card:hover {
  -webkit-backdrop-filter: blur(22px) saturate(1.6);
          backdrop-filter: blur(22px) saturate(1.6);
  background: rgba(255,255,255,0.16);
  border-color: rgba(255,255,255,0.4);
  transform: translateY(-6px);
}

.card-27__card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 45%;
  background: linear-gradient(rgba(255,255,255,0.25), transparent);
  opacity: 0.5;
}

.card-27__inner {
  position: relative;
  z-index: 2;
  height: 100%;
  padding: 2.4rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #fff;
}

.card-27__pill {
  align-self: flex-start;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.2);
  border: 1px solid rgba(255,255,255,0.3);
}
.card-27__title {
  font-weight: 800;
  font-size: 2.5rem;
  line-height: 1;
  text-shadow: 0 2px 20px rgba(0,0,0,0.2);
}
.card-27__desc {
  font-size: 0.88rem;
  line-height: 1.6;
  color: rgba(255,255,255,0.92);
}
.card-27__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
}
.card-27__foot b { font-size: 1.5rem; font-weight: 800; }

@media (prefers-reduced-motion: reduce) {
  .card-27__card {
    transition: none !important;
  }
}
```

### 28. Blueprint Reveal

**Type:** Pure CSS
**Description:** A product card where a circular wipe transforms the finished object into a technical blueprint drawing with dimension lines and specs. Great for design, manufacturing, architecture, and engineering brands that want to show the craft behind the product.

**HTML:**
```html
<div class="card-28">
  <article class="card-28__card">
    <div class="card-28__product">
      <span class="card-28__meta" style="color:#5a6a7d;">MODEL · ARC-01</span>
      <div class="card-28__shape"></div>
      <div>
        <h2 class="card-28__title-p">Arc Pendant</h2>
        <p style="font-size:0.82rem;color:#5a6a7d;line-height:1.6;margin-top:0.4rem;">Hand-blown matte ceramic lamp.</p>
      </div>
    </div>
    <div class="card-28__blue">
      <span class="card-28__meta">DRAWING № 01 — REV C</span>
      <div class="card-28__draw"></div>
      <div>
        <h2 class="card-28__title-b">Arc Pendant<br>Cross-Section</h2>
        <p class="card-28__specs">Ø 130mm · cord 1.8m<br>E27 · 2700K · matte glaze<br>TOL ±0.5mm</p>
      </div>
    </div>
  </article>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;700&family=Spline+Sans+Mono:wght@400;500&display=swap');

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

.card-28 {
  min-height: 460px;
  display: grid;
  place-items: center;
  background: #e9ebee;
  font-family: 'Spline Sans Mono', monospace;
  padding: 2rem;
}

.card-28__card {
  position: relative;
  width: 340px;
  height: 440px;
  border-radius: 6px;
  cursor: pointer;
  overflow: hidden;
  background: #fdfdfb;
  border: 1px solid #d4d8de;
  box-shadow: 0 16px 36px rgba(30,50,80,0.15);
}

.card-28__product {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 2.4rem;
  color: #1a2533;
  background:
    radial-gradient(circle at 70% 20%, #f0f3f7, #fdfdfb 60%);
  transition: opacity 0.5s ease;
}
.card-28__shape {
  width: 130px; height: 130px;
  margin: 1rem auto;
  border-radius: 50% 50% 50% 12px;
  background: linear-gradient(145deg, #2d6cdf, #16306b);
  box-shadow: 0 14px 30px rgba(40,80,160,0.35);
}

.card-28__blue {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: #0d3b8c;
  background-image:
    linear-gradient(rgba(255,255,255,0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.12) 1px, transparent 1px);
  background-size: 22px 22px;
  color: #cfe0ff;
  padding: 2.4rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  clip-path: circle(0% at 100% 0%);
  transition: clip-path 0.6s cubic-bezier(0.65,0,0.35,1);
}
.card-28__card:hover .card-28__blue { clip-path: circle(150% at 100% 0%); }
.card-28__card:hover .card-28__product { opacity: 0; }

.card-28__draw {
  width: 130px; height: 130px;
  margin: 1rem auto;
  border: 1.5px solid #9dc0ff;
  border-radius: 50% 50% 50% 12px;
  position: relative;
}
.card-28__draw::before,
.card-28__draw::after {
  content: "";
  position: absolute;
  background: #6f9aff;
}
.card-28__draw::before {
  left: -30px; right: -30px; top: 50%;
  height: 1px;
  background: repeating-linear-gradient(90deg, #6f9aff 0 6px, transparent 6px 10px);
}
.card-28__draw::after {
  top: -30px; bottom: -30px; left: 50%;
  width: 1px;
  background: repeating-linear-gradient(0deg, #6f9aff 0 6px, transparent 6px 10px);
}

.card-28__meta { font-size: 0.72rem; letter-spacing: 0.16em; }
.card-28__title-p {
  font-family: 'Archivo', sans-serif;
  font-weight: 700;
  font-size: 2rem;
  line-height: 1;
}
.card-28__title-b {
  font-family: 'Archivo', sans-serif;
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1.05;
}
.card-28__specs {
  font-size: 0.74rem;
  line-height: 1.7;
  color: #aecaff;
}

@media (prefers-reduced-motion: reduce) {
  .card-28__product,
  .card-28__blue {
    transition: none !important;
  }
}
```

### 29. Shockwave

**Type:** CSS + JS
**Description:** An energy/tech card that fires concentric ripple rings outward from the exact point where the cursor enters, with staggered colored waves. Best for power, audio, gaming, and CTA cards that should feel reactive and kinetic.

**HTML:**
```html
<div class="card-29">
  <article class="card-29__card" data-card-29="root">
    <div class="card-29__inner">
      <span class="card-29__tag">// Energy Core</span>
      <h2 class="card-29__title">Pulse<br>Reactor</h2>
      <p class="card-29__desc">Every interaction sends a wave outward. Hover anywhere — the ripple starts where you enter.</p>
      <span class="card-29__btn">Discharge ⚡</span>
    </div>
  </article>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@500;700&family=Inter:wght@400;500&display=swap');

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

.card-29 {
  min-height: 460px;
  display: grid;
  place-items: center;
  background: #07101a;
  font-family: 'Inter', sans-serif;
  padding: 2rem;
}

.card-29__card {
  --card-29-x: 50%;
  --card-29-y: 50%;
  position: relative;
  width: 340px;
  height: 440px;
  border-radius: 18px;
  cursor: pointer;
  overflow: hidden;
  background: radial-gradient(circle at 50% 40%, #0e2236, #060d16);
  border: 1px solid rgba(60,180,255,0.18);
}

.card-29__card::before {
  content: "";
  position: absolute;
  top: var(--card-29-y);
  left: var(--card-29-x);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  border: 2px solid rgba(80,200,255,0.7);
  box-shadow: 0 0 30px rgba(80,200,255,0.5);
  z-index: 1;
}
.card-29__card:hover::before {
  animation: card-29-ring 0.9s cubic-bezier(0.2,0.6,0.3,1) forwards;
}
@keyframes card-29-ring {
  0% { transform: translate(-50%,-50%) scale(0); opacity: 0.9; }
  100% { transform: translate(-50%,-50%) scale(60); opacity: 0; }
}

.card-29__card::after {
  content: "";
  position: absolute;
  top: var(--card-29-y);
  left: var(--card-29-x);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  border: 1px solid rgba(160,90,255,0.6);
  z-index: 1;
}
.card-29__card:hover::after {
  animation: card-29-ring 1.1s cubic-bezier(0.2,0.6,0.3,1) 0.12s forwards;
}

.card-29__inner {
  position: relative;
  z-index: 2;
  height: 100%;
  padding: 2.4rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #dceaf7;
}

.card-29__tag {
  font-family: 'Chakra Petch', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #4fc3ff;
}
.card-29__title {
  font-family: 'Chakra Petch', sans-serif;
  font-weight: 700;
  font-size: 2.6rem;
  line-height: 0.95;
}
.card-29__desc {
  font-size: 0.86rem;
  line-height: 1.6;
  color: #8fa6bb;
}
.card-29__btn {
  align-self: flex-start;
  font-family: 'Chakra Petch', sans-serif;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  padding: 0.7rem 1.5rem;
  border-radius: 8px;
  border: 1px solid rgba(80,200,255,0.4);
  color: #4fc3ff;
  background: rgba(80,200,255,0.08);
  transition: background 0.3s ease;
}
.card-29__card:hover .card-29__btn { background: rgba(80,200,255,0.18); }

@media (prefers-reduced-motion: reduce) {
  .card-29__card::before,
  .card-29__card::after {
    animation: none !important;
  }
}
```

**JS:**
```js
(() => {
  const root = document.querySelector('.card-29');
  if (!root) return;
  const c = root.querySelector('[data-card-29="root"]');
  if (!c) return;
  c.addEventListener('mouseenter', (e) => {
    const r = c.getBoundingClientRect();
    c.style.setProperty('--card-29-x', `${e.clientX - r.left}px`);
    c.style.setProperty('--card-29-y', `${e.clientY - r.top}px`);
  });
})();
```

### 30. Color Burn

**Type:** Pure CSS
**Description:** A BBQ/food card that starts desaturated and dim, then ignites with a color-burn blend-mode fire layer and drifting embers on hover. Perfect for food, fitness, automotive, and any brand with heat and intensity in its story.

**HTML:**
```html
<div class="card-30">
  <article class="card-30__card">
    <div class="card-30__base"></div>
    <div class="card-30__layer"></div>
    <div class="card-30__embers"></div>
    <div class="card-30__inner">
      <span class="card-30__tag">BBQ · Texas Style</span>
      <h2 class="card-30__title">Low &amp;<br>Slow</h2>
      <p class="card-30__desc">Sixteen hours over post oak. Hover to bring the coals back to life.</p>
    </div>
  </article>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@600;800&family=Barlow:wght@400;500&display=swap');

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

.card-30 {
  min-height: 460px;
  display: grid;
  place-items: center;
  background: #100804;
  font-family: 'Barlow', sans-serif;
  padding: 2rem;
}

.card-30__card {
  position: relative;
  width: 330px;
  height: 440px;
  border-radius: 14px;
  cursor: pointer;
  overflow: hidden;
  background: #1a1a1a;
  filter: grayscale(0.8) brightness(0.7);
  transition: filter 0.6s ease, box-shadow 0.6s ease;
}
.card-30__card:hover {
  filter: grayscale(0) brightness(1);
  box-shadow: 0 0 60px rgba(255,90,20,0.4);
}

.card-30__base {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, #4a4a52, #1c1c20);
}

.card-30__layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(circle at 50% 100%, #ff7a18, #ff2d00 40%, #8a0e00 70%, transparent 90%);
  mix-blend-mode: color-burn;
  opacity: 0;
  transform: translateY(20%);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.card-30__card:hover .card-30__layer {
  opacity: 1;
  transform: translateY(0);
}

.card-30__embers {
  position: absolute;
  inset: 0;
  z-index: 2;
  background-image:
    radial-gradient(#ffcf6b 1px, transparent 1.5px),
    radial-gradient(#ff8a3c 1px, transparent 1.5px);
  background-size: 60px 60px, 90px 90px;
  background-position: 0 0, 30px 40px;
  opacity: 0;
  transition: opacity 0.6s ease 0.1s;
  mix-blend-mode: screen;
}
.card-30__card:hover .card-30__embers { opacity: 0.7; }

.card-30__inner {
  position: relative;
  z-index: 3;
  height: 100%;
  padding: 2.4rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #f3ece4;
}

.card-30__tag {
  font-size: 0.72rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: #ffb27a;
}
.card-30__title {
  font-family: 'Big Shoulders Display', sans-serif;
  font-weight: 800;
  font-size: 3.6rem;
  line-height: 0.82;
  text-transform: uppercase;
}
.card-30__desc {
  font-size: 0.86rem;
  line-height: 1.6;
  color: #d8cabc;
}

@media (prefers-reduced-motion: reduce) {
  .card-30__card,
  .card-30__layer,
  .card-30__embers {
    transition: none !important;
  }
}
```

### 31. Prismatic Sweep

**Type:** Pure CSS
**Description:** An optics/art card where a soft rainbow light bar sweeps diagonally across the surface in screen blend mode, like light refracting through glass. Ideal for art installations, science, premium tech, and visually rich landing cards.

**HTML:**
```html
<div class="card-31">
  <article class="card-31__card">
    <div class="card-31__sweep"></div>
    <div class="card-31__lines"></div>
    <div class="card-31__inner">
      <span class="card-31__eyebrow">Optics Lab</span>
      <h2 class="card-31__title">Refraction<br>No. 9</h2>
      <p class="card-31__desc">A coated-glass installation. Light enters white and leaves as a spectrum sweeping the wall.</p>
      <div class="card-31__meta">
        <span><b>540nm</b>peak</span>
        <span><b>1.52</b>index</span>
      </div>
    </div>
  </article>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;600;800&family=Geist+Mono:wght@400;500&display=swap');

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

.card-31 {
  min-height: 460px;
  display: grid;
  place-items: center;
  background: #06060c;
  font-family: 'Sora', sans-serif;
  padding: 2rem;
}

.card-31__card {
  position: relative;
  width: 340px;
  height: 440px;
  border-radius: 20px;
  cursor: pointer;
  overflow: hidden;
  background: linear-gradient(160deg, #14141f, #0a0a12);
  border: 1px solid rgba(255,255,255,0.07);
}

.card-31__sweep {
  position: absolute;
  top: -60%;
  left: -120%;
  width: 60%;
  height: 220%;
  z-index: 1;
  transform: rotate(22deg);
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,0,128,0.5),
    rgba(255,200,0,0.5),
    rgba(0,255,170,0.5),
    rgba(0,170,255,0.5),
    rgba(180,80,255,0.5),
    transparent
  );
  filter: blur(8px);
  mix-blend-mode: screen;
  transition: left 0.7s cubic-bezier(0.4,0,0.2,1);
}
.card-31__card:hover .card-31__sweep { left: 160%; }

.card-31__lines {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: repeating-linear-gradient(
    115deg,
    transparent 0 40px,
    rgba(255,255,255,0.015) 40px 41px
  );
}

.card-31__inner {
  position: relative;
  z-index: 2;
  height: 100%;
  padding: 2.4rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #eef0f7;
}

.card-31__eyebrow {
  font-family: 'Geist Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #8b8fa6;
}
.card-31__title {
  font-weight: 800;
  font-size: 2.5rem;
  line-height: 1;
}
.card-31__desc {
  font-size: 0.86rem;
  line-height: 1.6;
  color: #a3a7bd;
}
.card-31__meta {
  display: flex;
  gap: 1.4rem;
  font-family: 'Geist Mono', monospace;
  font-size: 0.74rem;
  color: #7c8197;
}
.card-31__meta span b { display: block; color: #eef0f7; font-size: 1.1rem; }

@media (prefers-reduced-motion: reduce) {
  .card-31__sweep {
    transition: none !important;
  }
}
```

### 32. Book Open

**Type:** Pure CSS
**Description:** A literary card whose hard cover swings open on a hinge in 3D to reveal the first page and chapter text inside. Best for publishers, bookstores, courses, and storytelling experiences that benefit from a tactile "open me" gesture.

**HTML:**
```html
<div class="card-32">
  <article class="card-32__card">
    <div class="card-32__pages">
      <span class="card-32__chapter">Chapter One</span>
      <h2 class="card-32__page-title">The House<br>on Linden Row</h2>
      <p class="card-32__text">"I had not meant to stay the winter. But the house, you understand, had other plans..."</p>
      <span class="card-32__page-no">— 1 —</span>
    </div>
    <div class="card-32__cover">
      <div class="card-32__cover-front">
        <span class="card-32__pub">Harrow &amp; Quill</span>
        <div>
          <h1 class="card-32__cover-title">The House<br>on Linden<br>Row</h1>
          <div class="card-32__rule"></div>
          <span class="card-32__author">by E. Marlowe</span>
        </div>
      </div>
      <div class="card-32__cover-back"></div>
    </div>
  </article>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Marcellus&family=EB+Garamond:ital,wght@0,400;0,500;1,400&display=swap');

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

.card-32 {
  min-height: 460px;
  display: grid;
  place-items: center;
  background: #2a2018;
  background-image: radial-gradient(circle at 50% 40%, #3a2e22, #1a130d);
  font-family: 'EB Garamond', serif;
  padding: 2rem;
  perspective: 1600px;
}

.card-32__card {
  position: relative;
  width: 300px;
  height: 420px;
  cursor: pointer;
  transform-style: preserve-3d;
}

.card-32__pages {
  position: absolute;
  inset: 0;
  border-radius: 4px 8px 8px 4px;
  background: #f5efe0;
  padding: 2.4rem 2rem 2.4rem 2.6rem;
  box-shadow: inset 18px 0 30px -18px rgba(0,0,0,0.4);
  display: flex;
  flex-direction: column;
  color: #3a2e1f;
}
.card-32__chapter {
  font-family: 'Marcellus', serif;
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #9a7b4f;
  margin-bottom: 1rem;
}
.card-32__page-title {
  font-family: 'Marcellus', serif;
  font-size: 1.9rem;
  line-height: 1.15;
  margin-bottom: 1rem;
}
.card-32__text {
  font-size: 1rem;
  line-height: 1.65;
  font-style: italic;
  color: #5a4a36;
}
.card-32__page-no {
  margin-top: auto;
  text-align: center;
  font-size: 0.85rem;
  color: #9a7b4f;
}

.card-32__cover {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: 4px 8px 8px 4px;
  transform-origin: left center;
  transform: rotateY(0deg);
  transition: transform 0.9s cubic-bezier(0.65,0,0.35,1),
              box-shadow 0.9s ease;
  transform-style: preserve-3d;
  box-shadow: 6px 6px 24px rgba(0,0,0,0.5);
}
.card-32__card:hover .card-32__cover {
  transform: rotateY(-145deg);
  box-shadow: -10px 6px 30px rgba(0,0,0,0.4);
}

.card-32__cover-front, .card-32__cover-back {
  position: absolute;
  inset: 0;
  border-radius: 4px 8px 8px 4px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.card-32__cover-front {
  background: linear-gradient(160deg, #6b2737, #401520);
  padding: 2.6rem 2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #e8d8b8;
  border-left: 6px solid #2e0f17;
}
.card-32__cover-back {
  background: #5a1f2c;
  transform: rotateY(180deg);
  box-shadow: inset 0 0 40px rgba(0,0,0,0.4);
}

.card-32__pub {
  font-family: 'Marcellus', serif;
  font-size: 0.72rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: #c9a86b;
}
.card-32__cover-title {
  font-family: 'Marcellus', serif;
  font-size: 2.6rem;
  line-height: 1.05;
}
.card-32__rule {
  width: 50px; height: 2px;
  background: #c9a86b;
  margin: 0.8rem 0;
}
.card-32__author {
  font-style: italic;
  font-size: 1.05rem;
  color: #d8c3a0;
}

@media (prefers-reduced-motion: reduce) {
  .card-32__cover {
    transition: none !important;
  }
}
```

### 33. Aurora

**Type:** Pure CSS
**Description:** A travel card with layered, drifting northern-lights ribbons over a starfield that brighten and sharpen on hover. Perfect for travel, hospitality, ambient/relaxation, and aspirational brands wanting an atmospheric, dreamlike backdrop.

**HTML:**
```html
<div class="card-33">
  <article class="card-33__card">
    <div class="card-33__band"></div>
    <div class="card-33__band card-33__b2"></div>
    <div class="card-33__inner">
      <span class="card-33__kicker">Arctic Expeditions</span>
      <h2 class="card-33__title">Chasing<br>the Lights</h2>
      <p class="card-33__desc">Seven nights in Tromsø under the polar sky. Glass-roof cabins, dog sleds, and the slow green fire overhead.</p>
      <div class="card-33__foot">
        <span>Sept – March</span>
        <span>from $2,400</span>
      </div>
    </div>
  </article>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&family=Jost:wght@300;400;500&display=swap');

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

.card-33 {
  min-height: 460px;
  display: grid;
  place-items: center;
  background: #03060d;
  font-family: 'Jost', sans-serif;
  padding: 2rem;
}

.card-33__card {
  position: relative;
  width: 340px;
  height: 450px;
  border-radius: 22px;
  cursor: pointer;
  overflow: hidden;
  background: linear-gradient(180deg, #050b1a 0%, #02040a 100%);
  border: 1px solid rgba(120,255,200,0.1);
}

.card-33__card::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 20% 30%, #fff, transparent),
    radial-gradient(1px 1px at 70% 20%, #cfe, transparent),
    radial-gradient(1px 1px at 40% 60%, #fff, transparent),
    radial-gradient(1px 1px at 85% 75%, #dff, transparent),
    radial-gradient(1px 1px at 55% 85%, #fff, transparent),
    radial-gradient(1px 1px at 10% 80%, #cef, transparent);
  opacity: 0.7;
}

.card-33__band {
  position: absolute;
  left: -30%;
  right: -30%;
  height: 60%;
  top: 5%;
  z-index: 1;
  filter: blur(28px);
  opacity: 0.55;
  background:
    radial-gradient(ellipse 60% 100% at 30% 50%, #2cffa6 0%, transparent 60%),
    radial-gradient(ellipse 50% 100% at 60% 40%, #3ad0ff 0%, transparent 60%),
    radial-gradient(ellipse 55% 100% at 80% 60%, #b06cff 0%, transparent 60%);
  transform: translateY(0) skewX(-6deg);
  transition: opacity 0.6s ease, filter 0.6s ease;
  animation: card-33-drift 9s ease-in-out infinite;
}
.card-33__band.card-33__b2 {
  top: 20%;
  opacity: 0.4;
  animation-duration: 13s;
  animation-direction: reverse;
  background:
    radial-gradient(ellipse 50% 100% at 50% 50%, #5affc4 0%, transparent 60%),
    radial-gradient(ellipse 50% 100% at 75% 40%, #6a8cff 0%, transparent 60%);
}
@keyframes card-33-drift {
  0%,100% { transform: translateX(-6%) translateY(0) skewX(-6deg); }
  50% { transform: translateX(8%) translateY(-12px) skewX(4deg); }
}
.card-33__card:hover .card-33__band {
  opacity: 0.85;
  filter: blur(20px);
}

.card-33__inner {
  position: relative;
  z-index: 2;
  height: 100%;
  padding: 2.6rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: #eafff6;
}

.card-33__kicker {
  font-size: 0.72rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #7ff0c4;
  font-weight: 500;
}
.card-33__title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-size: 3rem;
  line-height: 1;
  margin: 0.6rem 0 0.8rem;
}
.card-33__desc {
  font-size: 0.9rem;
  line-height: 1.65;
  color: #b9d6cc;
  font-weight: 300;
}
.card-33__foot {
  margin-top: 1.4rem;
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  color: #7ff0c4;
  letter-spacing: 0.08em;
  border-top: 1px solid rgba(127,240,196,0.2);
  padding-top: 1rem;
}

@media (prefers-reduced-motion: reduce) {
  .card-33__band {
    animation: none !important;
  }
}
```

---
## 20 CSS Cards with Animations

URL: https://codefronts.com/components/css-cards/
Description: 20 hand-crafted CSS card components — aurora glow, 3D tilt, glassmorphism, neon borders, flip card, pricing, terminal, music player, weather widget and more.
Demo count: 20

### 01. Glassmorphism Card

**Type:** Pure CSS
**Description:** Frosted glass effect using backdrop-filter blur with radial gradient background orbs and subtle white border.

**HTML:**
```html
<div class="stage-1">
  <div class="card-glass">
    <h4>Glassmorphism</h4>
    <p>Frosted glass with backdrop blur and layered gradient glows.</p>
    <button class="glass-btn">Learn more</button>
  </div>
</div>
```

**CSS:**
```css
.card-glass {
  width: 200px;
  padding: 20px 22px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  position: relative;
  z-index: 1;
  transition:
    transform 0.3s,
    box-shadow 0.3s;
}

.card-glass:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
}

.card-glass h4 {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 6px;
}

.card-glass p {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.5;
  margin-bottom: 14px;
}

.glass-btn {
  font-size: 11px;
  padding: 5px 14px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  cursor: pointer;
  transition: background 0.2s;
}

.card-glass:hover .glass-btn {
  background: rgba(255, 255, 255, 0.32);
}

/* parent stage backdrop (so the demo renders standalone) */
[class^="stage-"] {
  width: 100%;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 2.5rem 1.5rem;
  box-sizing: border-box;
}

.stage-1 {
  background: linear-gradient(135deg, #1a0533 0%, #0a1a3a 50%, #0d2b1a 100%);
  overflow: hidden;
}

.stage-1::before {
  content: "";
  position: absolute;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: rgba(124, 108, 255, 0.4);
  top: -30px;
  right: -20px;
  filter: blur(40px);
}

.stage-1::after {
  content: "";
  position: absolute;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(61, 232, 245, 0.35);
  bottom: -10px;
  left: 10px;
  filter: blur(30px);
}
```

### 02. Neon Gradient Border Card

**Type:** Pure CSS
**Description:** Rainbow gradient border that fades in on hover using a background pseudo-element positioned behind the card with z-index -1.

**HTML:**
```html
<div class="stage-2">
  <div class="card-neon">
    <div class="neon-icon">⚡</div>
    <h4>Neon Border</h4>
    <p>Gradient border reveals on hover using pseudo-element z-index trick.</p>
  </div>
</div>
```

**CSS:**
```css
.card-neon {
  width: 200px;
  padding: 22px;
  border-radius: 12px;
  background: #111118;
  border: 1px solid transparent;
  position: relative;
  transition: transform 0.3s;
}

.card-neon::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 13px;
  background: linear-gradient(135deg, #7c6cff, #ff6c8a, #3de8f5);
  z-index: -1;
  opacity: 0;
  transition: opacity 0.3s;
}

.card-neon:hover::before {
  opacity: 1;
}

.card-neon:hover {
  transform: translateY(-3px);
}

.card-neon:hover .neon-icon {
  box-shadow: 0 0 20px rgba(124, 108, 255, 0.8);
}

.neon-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(124, 108, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  margin-bottom: 12px;
  transition: box-shadow 0.3s;
}

.card-neon h4 {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 4px;
}

.card-neon p {
  font-size: 11px;
  color: var(--ccg-muted);
  line-height: 1.5;
}

/* parent stage backdrop (so the demo renders standalone) */
[class^="stage-"] {
  width: 100%;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 2.5rem 1.5rem;
  box-sizing: border-box;
}

.stage-2 {
  background: #07070f;
}

/* gallery vars + keyframes (so the demo renders standalone) */
:root {
  --ccg-bg: #0a0a0f;
  --ccg-surface: #111118;
  --ccg-surface2: #17171f;
  --ccg-surface3: #1e1e28;
  --ccg-border: rgba(255, 255, 255, 0.15);
  --ccg-border2: rgba(255, 255, 255, 0.13);
  --ccg-accent: #7c6cff;
  --ccg-pink: #ff6c8a;
  --ccg-green: #1ed98a;
  --ccg-amber: #f5a84a;
  --ccg-cyan: #3de8f5;
  --ccg-text: #f0eeff;
  --ccg-muted: #6b6987;
  --ccg-label: #9896b8;
  --ccg-mono: "DM Mono", "Fira Code", monospace;
  --ccg-sans: "Syne", sans-serif;
}
```

### 03. 3D Flip Card

**Type:** Pure CSS
**Description:** Pure CSS 3D flip using transform-style: preserve-3d and rotateY with backface-visibility: hidden on both faces.

**HTML:**
```html
<div class="stage-3">
  <div class="flip-scene">
    <div class="flip-card">
      <div class="flip-front">
        <h4>Hover to Flip</h4>
        <p style="font-size: 10px; color: var(--ccg-muted)">3D card flip effect →</p>
      </div>
      <div class="flip-back">
        <h4>The Back Side</h4>
        <p>Revealed with CSS 3D perspective</p>
      </div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.flip-scene {
  width: 190px;
  height: 120px;
  perspective: 700px;
  cursor: pointer;
}

.flip-card {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.flip-scene:hover .flip-card {
  transform: rotateY(180deg);
}

.flip-front,
.flip-back {
  position: absolute;
  inset: 0;
  border-radius: 14px;
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.flip-front {
  background: linear-gradient(135deg, #1a1a2e, #16213e);
  border: 1px solid rgba(124, 108, 255, 0.3);
}

.flip-front h4 {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 4px;
}

.flip-front p {
  font-size: 10px;
  color: var(--ccg-muted);
}

.flip-back {
  background: linear-gradient(135deg, #7c6cff, #ff6c8a);
  transform: rotateY(180deg);
}

.flip-back h4 {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 4px;
  text-align: center;
}

.flip-back p {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.8);
  text-align: center;
}

/* parent stage backdrop (so the demo renders standalone) */
[class^="stage-"] {
  width: 100%;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 2.5rem 1.5rem;
  box-sizing: border-box;
}

.stage-3 {
  background: #0d0d14;
}

/* gallery vars + keyframes (so the demo renders standalone) */
:root {
  --ccg-bg: #0a0a0f;
  --ccg-surface: #111118;
  --ccg-surface2: #17171f;
  --ccg-surface3: #1e1e28;
  --ccg-border: rgba(255, 255, 255, 0.15);
  --ccg-border2: rgba(255, 255, 255, 0.13);
  --ccg-accent: #7c6cff;
  --ccg-pink: #ff6c8a;
  --ccg-green: #1ed98a;
  --ccg-amber: #f5a84a;
  --ccg-cyan: #3de8f5;
  --ccg-text: #f0eeff;
  --ccg-muted: #6b6987;
  --ccg-label: #9896b8;
  --ccg-mono: "DM Mono", "Fira Code", monospace;
  --ccg-sans: "Syne", sans-serif;
}
```

### 04. Animated Gradient Border Card

**Type:** Pure CSS
**Description:** Continuously rotating conic-gradient border using a pseudo-element with rotate keyframes. No JavaScript needed.

**HTML:**
```html
<div class="stage-4">
  <div class="card-grad-border">
    <h4>Spinning Gradient</h4>
    <p>Conic-gradient border spins continuously using CSS animation.</p>
    <span class="grad-tag">Live animation</span>
  </div>
</div>
```

**CSS:**
```css
.card-grad-border {
  width: 200px;
  padding: 20px;
  border-radius: 14px;
  background: #111118;
  position: relative;
}

.card-grad-border::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 16px;
  background: conic-gradient(#7c6cff, #ff6c8a, #3de8f5, #1ed98a, #7c6cff);
  z-index: -1;
  animation: ccg-grad-spin 3s linear infinite;
}

.card-grad-border h4 {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 6px;
}

.card-grad-border p {
  font-size: 11px;
  color: var(--ccg-muted);
  line-height: 1.5;
  margin-bottom: 12px;
}

.grad-tag {
  display: inline-block;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 20px;
  background: rgba(124, 108, 255, 0.2);
  color: var(--ccg-accent);
}

/* parent stage backdrop (so the demo renders standalone) */
[class^="stage-"] {
  width: 100%;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 2.5rem 1.5rem;
  box-sizing: border-box;
}

.stage-4 {
  background: #090912;
  overflow: hidden;
}

/* gallery vars + keyframes (so the demo renders standalone) */
:root {
  --ccg-bg: #0a0a0f;
  --ccg-surface: #111118;
  --ccg-surface2: #17171f;
  --ccg-surface3: #1e1e28;
  --ccg-border: rgba(255, 255, 255, 0.15);
  --ccg-border2: rgba(255, 255, 255, 0.13);
  --ccg-accent: #7c6cff;
  --ccg-pink: #ff6c8a;
  --ccg-green: #1ed98a;
  --ccg-amber: #f5a84a;
  --ccg-cyan: #3de8f5;
  --ccg-text: #f0eeff;
  --ccg-muted: #6b6987;
  --ccg-label: #9896b8;
  --ccg-mono: "DM Mono", "Fira Code", monospace;
  --ccg-sans: "Syne", sans-serif;
}
@keyframes ccg-grad-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .card-grad-border,
  .card-grad-border * {
    animation: none !important;
  }
}

```

### 05. 3D Mouse Tilt Card

**Type:** CSS + JS
**Description:** Tracks cursor position and applies rotateX/rotateY perspective transforms in real-time, with a dynamic radial shine that follows the mouse.

**HTML:**
```html
<div class="stage-5">
  <div class="card-tilt" id="tiltCard">
    <div class="tilt-shine"></div>
    <div class="tilt-layer">
      <h4>3D Tilt Card</h4>
      <p>Move your mouse over me to see the 3D tilt effect.</p>
      <span class="tilt-badge">Mouse-tracked</span>
    </div>
  </div>
</div>
```

**CSS:**
```css
.card-tilt {
  width: 195px;
  padding: 22px;
  border-radius: 16px;
  background: linear-gradient(160deg, #1a1a28 0%, #111118 100%);
  border: 1px solid var(--ccg-border2);
  transform-style: preserve-3d;
  transition: transform 0.1s;
  cursor: none;
  position: relative;
}

.tilt-shine {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.08) 0%, transparent 65%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
}

.card-tilt:hover .tilt-shine {
  opacity: 1;
}

.tilt-layer {
  transform: translateZ(20px);
}

.card-tilt h4 {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 4px;
}

.card-tilt p {
  font-size: 11px;
  color: var(--ccg-muted);
  line-height: 1.5;
}

.tilt-badge {
  margin-top: 10px;
  display: inline-block;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 20px;
  background: rgba(61, 232, 245, 0.15);
  color: var(--ccg-cyan);
  border: 1px solid rgba(61, 232, 245, 0.3);
}

/* parent stage backdrop (so the demo renders standalone) */
[class^="stage-"] {
  width: 100%;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 2.5rem 1.5rem;
  box-sizing: border-box;
}

.stage-5 {
  background: #0c0c14;
}

/* gallery vars + keyframes (so the demo renders standalone) */
:root {
  --ccg-bg: #0a0a0f;
  --ccg-surface: #111118;
  --ccg-surface2: #17171f;
  --ccg-surface3: #1e1e28;
  --ccg-border: rgba(255, 255, 255, 0.15);
  --ccg-border2: rgba(255, 255, 255, 0.13);
  --ccg-accent: #7c6cff;
  --ccg-pink: #ff6c8a;
  --ccg-green: #1ed98a;
  --ccg-amber: #f5a84a;
  --ccg-cyan: #3de8f5;
  --ccg-text: #f0eeff;
  --ccg-muted: #6b6987;
  --ccg-label: #9896b8;
  --ccg-mono: "DM Mono", "Fira Code", monospace;
  --ccg-sans: "Syne", sans-serif;
}
```

**JS:**
```js
const card = document.getElementById("tiltCard");
card.addEventListener("mousemove", (e) => {
  const { left, top, width, height } = card.getBoundingClientRect();
  const x = (e.clientX - left) / width - 0.5;
  const y = (e.clientY - top) / height - 0.5;
  card.style.transform = `perspective(700px) rotateX(${-y * 18}deg) rotateY(${x * 18}deg)`;
});
card.addEventListener("mouseleave", () => {
  card.style.transform = "perspective(700px) rotateX(0) rotateY(0)";
});
```

### 06. Cursor Spotlight Card

**Type:** CSS + JS
**Description:** A soft radial glow follows the cursor position inside the card, illuminating where you look. Border subtly highlights on hover.

**HTML:**
```html
<div class="stage-6">
  <div class="card-spotlight" id="spotCard">
    <div class="spotlight-glow" id="spotGlow"></div>
    <div class="spot-content">
      <div class="spot-avatar">V</div>
      <h4>Spotlight Card</h4>
      <p>Cursor light follows your mouse around the card surface.</p>
    </div>
  </div>
</div>
```

**CSS:**
```css
.card-spotlight {
  width: 200px;
  padding: 20px;
  border-radius: 14px;
  background: #111118;
  border: 1px solid var(--ccg-border);
  position: relative;
  overflow: hidden;
  cursor: none;
}

.spotlight-glow {
  position: absolute;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(124, 108, 255, 0.22) 0%, transparent 70%);
  pointer-events: none;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  transition: opacity 0.3s;
  opacity: 0;
}

.card-spotlight:hover .spotlight-glow {
  opacity: 1;
}

.card-spotlight:hover {
  border-color: rgba(124, 108, 255, 0.4);
}

.spot-content {
  position: relative;
  z-index: 1;
}

.card-spotlight h4 {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 4px;
}

.card-spotlight p {
  font-size: 11px;
  color: var(--ccg-muted);
  line-height: 1.5;
}

.spot-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7c6cff, #ff6c8a);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
}

/* parent stage backdrop (so the demo renders standalone) */
[class^="stage-"] {
  width: 100%;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 2.5rem 1.5rem;
  box-sizing: border-box;
}

.stage-6 {
  background: #09090e;
  overflow: hidden;
}

/* gallery vars + keyframes (so the demo renders standalone) */
:root {
  --ccg-bg: #0a0a0f;
  --ccg-surface: #111118;
  --ccg-surface2: #17171f;
  --ccg-surface3: #1e1e28;
  --ccg-border: rgba(255, 255, 255, 0.15);
  --ccg-border2: rgba(255, 255, 255, 0.13);
  --ccg-accent: #7c6cff;
  --ccg-pink: #ff6c8a;
  --ccg-green: #1ed98a;
  --ccg-amber: #f5a84a;
  --ccg-cyan: #3de8f5;
  --ccg-text: #f0eeff;
  --ccg-muted: #6b6987;
  --ccg-label: #9896b8;
  --ccg-mono: "DM Mono", "Fira Code", monospace;
  --ccg-sans: "Syne", sans-serif;
}
```

**JS:**
```js
const card = document.getElementById("spotCard");
const glow = document.getElementById("spotGlow");
card.addEventListener("mousemove", (e) => {
  const r = card.getBoundingClientRect();
  glow.style.left = e.clientX - r.left + "px";
  glow.style.top = e.clientY - r.top + "px";
});
```

### 07. Stacked Paper Card

**Type:** Pure CSS
**Description:** Two pseudo-elements behind the card rotate and offset on hover to create a fanned paper stack effect. Works beautifully on light backgrounds.

**HTML:**
```html
<div class="stage-7">
  <div class="card-stack">
    <div class="stack-main">
      <h4>Stacked Paper</h4>
      <p>Pseudo-elements create layered paper cards that fan out on hover.</p>
      <button class="stack-btn">Open →</button>
    </div>
  </div>
</div>
```

**CSS:**
```css
.card-stack {
  position: relative;
  width: 200px;
}

.card-stack::before,
.card-stack::after {
  content: "";
  position: absolute;
  border-radius: 12px;
  transition: transform 0.35s cubic-bezier(0.23, 1, 0.32, 1);
}

.card-stack::before {
  background: #d6c9ff;
  width: 100%;
  height: 100%;
  top: 8px;
  left: 6px;
  z-index: 0;
}

.card-stack::after {
  background: #ffc8d6;
  width: 100%;
  height: 100%;
  top: 4px;
  left: 3px;
  z-index: 0;
}

.card-stack:hover::before {
  transform: translate(4px, 6px) rotate(3deg);
}

.card-stack:hover::after {
  transform: translate(-3px, 4px) rotate(-2deg);
}

.stack-main {
  position: relative;
  z-index: 1;
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}

.stack-main h4 {
  font-size: 13px;
  font-weight: 700;
  color: #1a1a2e;
  margin-bottom: 4px;
}

.stack-main p {
  font-size: 11px;
  color: #b8b6d4;
  line-height: 1.5;
  margin-bottom: 12px;
}

.stack-btn {
  font-size: 11px;
  padding: 5px 14px;
  border-radius: 6px;
  background: #1a1a2e;
  color: #fff;
  border: none;
  cursor: pointer;
}

/* parent stage backdrop (so the demo renders standalone) */
[class^="stage-"] {
  width: 100%;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 2.5rem 1.5rem;
  box-sizing: border-box;
}

.stage-7 {
  background: #f5f3ee;
}
```

### 08. Holographic Shimmer Card

**Type:** Pure CSS
**Description:** A white light sweeps across the card on hover using translateX animation, over a multi-color gradient background for a trading-card holographic look.

**HTML:**
```html
<div class="stage-8">
  <div class="card-holo">
    <div class="holo-shine"></div>
    <div class="holo-content">
      <div class="holo-label">Ultra Rare</div>
      <h4>Holographic</h4>
      <div class="holo-num">★</div>
      <div class="holo-bar"></div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.card-holo {
  width: 200px;
  padding: 22px;
  border-radius: 16px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.card-holo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(124, 108, 255, 0.2),
    rgba(61, 232, 245, 0.15),
    rgba(255, 108, 138, 0.2),
    rgba(30, 217, 138, 0.15)
  );
  opacity: 0.7;
}

.holo-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255, 255, 255, 0.15) 50%,
    transparent 60%
  );
  transform: translateX(-100%);
  transition: transform 0.5s ease;
}

.card-holo:hover .holo-shine {
  transform: translateX(100%);
}

.holo-content {
  position: relative;
  z-index: 1;
}

.holo-label {
  font-family: var(--ccg-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 8px;
}

.card-holo h4 {
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 4px;
  letter-spacing: -0.02em;
}

.card-holo .holo-num {
  font-size: 28px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.15);
  position: absolute;
  top: 12px;
  right: 16px;
  letter-spacing: -0.04em;
}

.holo-bar {
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, #7c6cff, #ff6c8a, #3de8f5);
  margin-top: 14px;
}

/* parent stage backdrop (so the demo renders standalone) */
[class^="stage-"] {
  width: 100%;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 2.5rem 1.5rem;
  box-sizing: border-box;
}

.stage-8 {
  background: #07070e;
  overflow: hidden;
}

/* gallery vars + keyframes (so the demo renders standalone) */
:root {
  --ccg-bg: #0a0a0f;
  --ccg-surface: #111118;
  --ccg-surface2: #17171f;
  --ccg-surface3: #1e1e28;
  --ccg-border: rgba(255, 255, 255, 0.15);
  --ccg-border2: rgba(255, 255, 255, 0.13);
  --ccg-accent: #7c6cff;
  --ccg-pink: #ff6c8a;
  --ccg-green: #1ed98a;
  --ccg-amber: #f5a84a;
  --ccg-cyan: #3de8f5;
  --ccg-text: #f0eeff;
  --ccg-muted: #6b6987;
  --ccg-label: #9896b8;
  --ccg-mono: "DM Mono", "Fira Code", monospace;
  --ccg-sans: "Syne", sans-serif;
}
```

### 09. Slide Reveal Card

**Type:** Pure CSS
**Description:** On hover the initial image content translates up and out while the description panel slides up from the bottom to fill the card.

**HTML:**
```html
<div class="stage-9">
  <div class="card-reveal">
    <div class="reveal-img">🎨</div>
    <div class="reveal-content">
      <h4>Hover to Reveal</h4>
      <p>Content slides up from the bottom replacing the image</p>
    </div>
  </div>
</div>
```

**CSS:**
```css
.card-reveal {
  width: 195px;
  height: 140px;
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  background: linear-gradient(160deg, #1a1a2e, #0d0d1a);
  border: 1px solid var(--ccg-border2);
}

.reveal-img {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.card-reveal:hover .reveal-img {
  transform: translateY(-100%);
}

.reveal-content {
  position: absolute;
  bottom: -100%;
  left: 0;
  right: 0;
  padding: 16px;
  background: linear-gradient(180deg, #7c6cff, #ff6c8a);
  transition: bottom 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.card-reveal:hover .reveal-content {
  bottom: 0;
}

.reveal-content h4 {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 3px;
}

.reveal-content p {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.4;
}

/* parent stage backdrop (so the demo renders standalone) */
[class^="stage-"] {
  width: 100%;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 2.5rem 1.5rem;
  box-sizing: border-box;
}

.stage-9 {
  background: #0d0d14;
}

/* gallery vars + keyframes (so the demo renders standalone) */
:root {
  --ccg-bg: #0a0a0f;
  --ccg-surface: #111118;
  --ccg-surface2: #17171f;
  --ccg-surface3: #1e1e28;
  --ccg-border: rgba(255, 255, 255, 0.15);
  --ccg-border2: rgba(255, 255, 255, 0.13);
  --ccg-accent: #7c6cff;
  --ccg-pink: #ff6c8a;
  --ccg-green: #1ed98a;
  --ccg-amber: #f5a84a;
  --ccg-cyan: #3de8f5;
  --ccg-text: #f0eeff;
  --ccg-muted: #6b6987;
  --ccg-label: #9896b8;
  --ccg-mono: "DM Mono", "Fira Code", monospace;
  --ccg-sans: "Syne", sans-serif;
}
```

### 10. Morphing Blob Card

**Type:** Pure CSS
**Description:** 8-point border-radius transitions between two organic blob shapes on hover with a smooth CSS transition. Pure CSS, no JavaScript.

**HTML:**
```html
<div class="stage-10">
  <div class="card-morph">
    <h4>Blob Shape</h4>
    <p>border-radius morphs into a completely different blob on hover</p>
  </div>
</div>
```

**CSS:**
```css
.card-morph {
  width: 200px;
  padding: 22px;
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  background: linear-gradient(135deg, #7c6cff 0%, #ff6c8a 100%);
  transition:
    border-radius 0.6s ease,
    transform 0.3s;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 140px;
}

.card-morph:hover {
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
  transform: scale(1.04);
}

.card-morph h4 {
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 4px;
}

.card-morph p {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.4;
}

/* parent stage backdrop (so the demo renders standalone) */
[class^="stage-"] {
  width: 100%;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 2.5rem 1.5rem;
  box-sizing: border-box;
}

.stage-10 {
  background: #0a0a0f;
}
```

### 11. Brutalist Card

**Type:** Pure CSS
**Description:** Hard offset box-shadow gives a bold physical depth effect. Shadow shifts position and color on hover. Pressing moves card into the shadow.

**HTML:**
```html
<div class="stage-11">
  <div class="card-brute">
    <span class="brute-tag">NEW</span>
    <h4>Brutalist<br />Design</h4>
    <p>Raw edges, hard shadows, zero subtlety. Hover to shift the shadow.</p>
    <button class="brute-btn">CLICK ME</button>
  </div>
</div>
```

**CSS:**
```css
.card-brute {
  width: 200px;
  padding: 18px 20px;
  background: #fff;
  border: 2.5px solid #1a1a1a;
  box-shadow: 6px 6px 0 #1a1a1a;
  transition:
    transform 0.15s,
    box-shadow 0.15s;
  cursor: pointer;
}

.card-brute:hover {
  transform: translate(-3px, -3px);
  box-shadow: 9px 9px 0 #7c6cff;
}

.card-brute:active {
  transform: translate(3px, 3px);
  box-shadow: 3px 3px 0 #1a1a1a;
}

.brute-tag {
  font-family: var(--ccg-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: #1a1a1a;
  color: #fff;
  padding: 2px 7px;
  display: inline-block;
  margin-bottom: 10px;
}

.card-brute h4 {
  font-size: 16px;
  font-weight: 800;
  color: #1a1a1a;
  letter-spacing: -0.03em;
  margin-bottom: 4px;
  line-height: 1.1;
}

.card-brute p {
  font-size: 11px;
  color: #b8b6d4;
  line-height: 1.5;
  margin-bottom: 12px;
}

.brute-btn {
  width: 100%;
  padding: 7px;
  background: #1a1a1a;
  color: #fff;
  border: none;
  font-family: var(--ccg-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s;
}

.brute-btn:hover {
  background: #7c6cff;
}

/* parent stage backdrop (so the demo renders standalone) */
[class^="stage-"] {
  width: 100%;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 2.5rem 1.5rem;
  box-sizing: border-box;
}

.stage-11 {
  background: #f0ede5;
}

/* gallery vars + keyframes (so the demo renders standalone) */
:root {
  --ccg-bg: #0a0a0f;
  --ccg-surface: #111118;
  --ccg-surface2: #17171f;
  --ccg-surface3: #1e1e28;
  --ccg-border: rgba(255, 255, 255, 0.15);
  --ccg-border2: rgba(255, 255, 255, 0.13);
  --ccg-accent: #7c6cff;
  --ccg-pink: #ff6c8a;
  --ccg-green: #1ed98a;
  --ccg-amber: #f5a84a;
  --ccg-cyan: #3de8f5;
  --ccg-text: #f0eeff;
  --ccg-muted: #6b6987;
  --ccg-label: #9896b8;
  --ccg-mono: "DM Mono", "Fira Code", monospace;
  --ccg-sans: "Syne", sans-serif;
}
```

### 12. Retro Terminal Card

**Type:** Pure CSS
**Description:** Green-on-black terminal aesthetic with a blinking cursor using step-end animation. Perfect for dev tools, documentation, and code-related sites.

**HTML:**
```html
<div class="stage-12">
  <div class="card-term">
    <div class="term-bar">
      <div class="term-dot" style="background: #ff5f57"></div>
      <div class="term-dot" style="background: #febc2e"></div>
      <div class="term-dot" style="background: #28c840"></div>
    </div>
    <div class="term-body">
      <div class="term-line"><span class="cmd">$ </span>npm install codefronts</div>
      <div class="term-line"><span class="out">✓ Packages installed</span></div>
      <div class="term-line"><span class="cmd">$ </span>npm run build</div>
      <div class="term-line"><span class="out">✓ Built in 0.4s</span></div>
      <div class="term-line"><span class="cmd">$ </span><span class="term-cursor"></span></div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.card-term {
  width: 210px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(30, 217, 138, 0.3);
  font-family: var(--ccg-mono);
}

.term-bar {
  background: #111;
  padding: 6px 10px;
  display: flex;
  align-items: center;
  gap: 5px;
  border-bottom: 1px solid rgba(30, 217, 138, 0.2);
}

.term-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.term-body {
  background: #050a05;
  padding: 14px;
}

.term-line {
  font-size: 10.5px;
  line-height: 2;
  color: var(--ccg-green);
}

.term-line .cmd {
  color: rgba(30, 217, 138, 0.5);
}

.term-line .out {
  color: rgba(255, 255, 255, 0.6);
}

.term-cursor {
  display: inline-block;
  width: 7px;
  height: 13px;
  background: var(--ccg-green);
  animation: ccg-blink 0.8s step-end infinite;
  vertical-align: middle;
}

/* parent stage backdrop (so the demo renders standalone) */
[class^="stage-"] {
  width: 100%;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 2.5rem 1.5rem;
  box-sizing: border-box;
}

.stage-12 {
  background: #050a05;
}

/* gallery vars + keyframes (so the demo renders standalone) */
:root {
  --ccg-bg: #0a0a0f;
  --ccg-surface: #111118;
  --ccg-surface2: #17171f;
  --ccg-surface3: #1e1e28;
  --ccg-border: rgba(255, 255, 255, 0.15);
  --ccg-border2: rgba(255, 255, 255, 0.13);
  --ccg-accent: #7c6cff;
  --ccg-pink: #ff6c8a;
  --ccg-green: #1ed98a;
  --ccg-amber: #f5a84a;
  --ccg-cyan: #3de8f5;
  --ccg-text: #f0eeff;
  --ccg-muted: #6b6987;
  --ccg-label: #9896b8;
  --ccg-mono: "DM Mono", "Fira Code", monospace;
  --ccg-sans: "Syne", sans-serif;
}
@keyframes ccg-blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .card-term,
  .card-term * {
    animation: none !important;
  }
}

```

### 13. Neumorphic Card

**Type:** Pure CSS
**Description:** Soft UI neumorphism using dual box-shadows — one light, one dark — to create the illusion of being extruded from the background surface.

**HTML:**
```html
<div class="stage-13">
  <div class="card-neu">
    <div class="neu-icon">🔮</div>
    <h4 style="color: #3a3a4a">Neumorphic</h4>
    <p style="color: #8a8898; font-size: 11px; line-height: 1.5; margin-top: 4px">
      Soft extrusion from the surface. Hover to push it inward.
    </p>
  </div>
</div>
```

**CSS:**
```css
.card-neu {
  width: 200px;
  padding: 22px;
  border-radius: 20px;
  background: #e0e0e8;
  box-shadow:
    6px 6px 14px rgba(0, 0, 0, 0.18),
    -6px -6px 14px rgba(255, 255, 255, 0.7);
  transition: box-shadow 0.3s;
}

.card-neu:hover {
  box-shadow:
    2px 2px 6px rgba(0, 0, 0, 0.15),
    -2px -2px 6px rgba(255, 255, 255, 0.6),
    inset 3px 3px 8px rgba(0, 0, 0, 0.12),
    inset -3px -3px 8px rgba(255, 255, 255, 0.6);
}

.neu-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #e0e0e8;
  box-shadow:
    4px 4px 8px rgba(0, 0, 0, 0.15),
    -4px -4px 8px rgba(255, 255, 255, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-bottom: 14px;
}

.card-neu h4 {
  font-size: 13px;
  font-weight: 700;
  color: #3a3a4a;
  margin-bottom: 4px;
}

.card-neu p {
  font-size: 11px;
  color: #8a8898;
  line-height: 1.5;
}

/* parent stage backdrop (so the demo renders standalone) */
[class^="stage-"] {
  width: 100%;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 2.5rem 1.5rem;
  box-sizing: border-box;
}

.stage-13 {
  background: #e0e0e8;
}
```

### 14. Animated Stats Card

**Type:** Pure CSS
**Description:** Dashboard metric card with an animated progress bar that grows from 0 using CSS animation. Use IntersectionObserver for scroll-trigger.

**HTML:**
```html
<div class="stage-14">
  <div class="card-stats">
    <div class="stats-header">
      <div class="stats-icon">📈</div>
      <span class="stats-trend">+24.8%</span>
    </div>
    <div class="stats-num">48,293</div>
    <div class="stats-label">Monthly Visitors</div>
    <div class="stats-bar-wrap">
      <div class="stats-bar-fill"></div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.card-stats {
  width: 200px;
  padding: 18px 20px;
  border-radius: 14px;
  background: var(--ccg-surface2);
  border: 1px solid var(--ccg-border2);
}

.stats-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.stats-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(124, 108, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.stats-trend {
  font-size: 10px;
  color: var(--ccg-green);
  background: rgba(30, 217, 138, 0.1);
  padding: 2px 6px;
  border-radius: 4px;
}

.stats-num {
  font-size: 28px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.04em;
  font-family: var(--ccg-sans);
}

.stats-label {
  font-size: 11px;
  color: var(--ccg-muted);
  margin-top: 2px;
  margin-bottom: 12px;
}

.stats-bar-wrap {
  height: 4px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
}

.stats-bar-fill {
  height: 100%;
  width: 72%;
  background: linear-gradient(90deg, #7c6cff, #ff6c8a);
  border-radius: 2px;
  animation: ccg-stats-grow 0.8s ease-out both;
}

/* parent stage backdrop (so the demo renders standalone) */
[class^="stage-"] {
  width: 100%;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 2.5rem 1.5rem;
  box-sizing: border-box;
}

.stage-14 {
  background: #0a0a0f;
}

/* gallery vars + keyframes (so the demo renders standalone) */
:root {
  --ccg-bg: #0a0a0f;
  --ccg-surface: #111118;
  --ccg-surface2: #17171f;
  --ccg-surface3: #1e1e28;
  --ccg-border: rgba(255, 255, 255, 0.15);
  --ccg-border2: rgba(255, 255, 255, 0.13);
  --ccg-accent: #7c6cff;
  --ccg-pink: #ff6c8a;
  --ccg-green: #1ed98a;
  --ccg-amber: #f5a84a;
  --ccg-cyan: #3de8f5;
  --ccg-text: #f0eeff;
  --ccg-muted: #6b6987;
  --ccg-label: #9896b8;
  --ccg-mono: "DM Mono", "Fira Code", monospace;
  --ccg-sans: "Syne", sans-serif;
}
@keyframes ccg-stats-grow {
  from {
    width: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .card-stats,
  .card-stats * {
    animation: none !important;
  }
}

```

### 15. Profile Card

**Type:** Pure CSS
**Description:** Social profile card with gradient avatar ring using CSS mask-composite trick, stats row, and a lift animation on hover.

**HTML:**
```html
<div class="stage-15">
  <div class="card-profile">
    <div class="profile-avatar">VR</div>
    <div class="profile-name">Alex Morgan</div>
    <div class="profile-role">Frontend Developer</div>
    <div class="profile-stats">
      <div class="pstat">
        <div class="pstat-num">142</div>
        <div class="pstat-label">Projects</div>
      </div>
      <div class="pstat">
        <div class="pstat-num">4.8k</div>
        <div class="pstat-label">Stars</div>
      </div>
      <div class="pstat">
        <div class="pstat-num">328</div>
        <div class="pstat-label">Followers</div>
      </div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.card-profile {
  width: 200px;
  padding: 22px;
  border-radius: 16px;
  background: var(--ccg-surface);
  border: 1px solid var(--ccg-border2);
  text-align: center;
  transition: transform 0.3s;
}

.card-profile:hover {
  transform: translateY(-4px);
}

.profile-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7c6cff, #ff6c8a);
  margin: 0 auto 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  position: relative;
}

.profile-avatar::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid transparent;
  background: linear-gradient(135deg, #7c6cff, #ff6c8a) border-box;
  -webkit-mask:
    linear-gradient(#fff 0 0) padding-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.profile-name {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 2px;
}

.profile-role {
  font-size: 11px;
  color: var(--ccg-muted);
  margin-bottom: 14px;
}

.profile-stats {
  display: flex;
  gap: 0;
  border-top: 1px solid var(--ccg-border);
  padding-top: 12px;
}

.pstat-num {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
}

.pstat-label {
  font-size: 9px;
  color: var(--ccg-muted);
  font-family: var(--ccg-mono);
  letter-spacing: 0.06em;
}

/* parent stage backdrop (so the demo renders standalone) */
[class^="stage-"] {
  width: 100%;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 2.5rem 1.5rem;
  box-sizing: border-box;
}

.stage-15 {
  background: #0d0d14;
}

/* gallery vars + keyframes (so the demo renders standalone) */
:root {
  --ccg-bg: #0a0a0f;
  --ccg-surface: #111118;
  --ccg-surface2: #17171f;
  --ccg-surface3: #1e1e28;
  --ccg-border: rgba(255, 255, 255, 0.15);
  --ccg-border2: rgba(255, 255, 255, 0.13);
  --ccg-accent: #7c6cff;
  --ccg-pink: #ff6c8a;
  --ccg-green: #1ed98a;
  --ccg-amber: #f5a84a;
  --ccg-cyan: #3de8f5;
  --ccg-text: #f0eeff;
  --ccg-muted: #6b6987;
  --ccg-label: #9896b8;
  --ccg-mono: "DM Mono", "Fira Code", monospace;
  --ccg-sans: "Syne", sans-serif;
}

/* missing class rules (merged from gallery) */
.pstat {
  flex: 1;
  text-align: center;
}
.pstat + .pstat {
  border-left: 1px solid var(--ccg-border);
}
```

### 16. Pricing Card

**Type:** Pure CSS
**Description:** Pricing tier card with a top border line that draws in from the left on hover using scaleX transform, and a button that fills with color.

**HTML:**
```html
<div class="stage-16">
  <div class="card-price">
    <div class="price-plan">Pro Plan</div>
    <div class="price-amt">$29<span>/mo</span></div>
    <div class="price-desc">Everything you need to ship faster.</div>
    <div class="price-features">
      <div class="price-feat">Unlimited projects</div>
      <div class="price-feat">Priority support</div>
      <div class="price-feat">Custom domain</div>
    </div>
    <button class="price-btn">Get started</button>
  </div>
</div>
```

**CSS:**
```css
.card-price {
  width: 190px;
  padding: 20px;
  border-radius: 16px;
  background: var(--ccg-surface2);
  border: 1px solid var(--ccg-border);
  position: relative;
  overflow: hidden;
  transition:
    border-color 0.3s,
    transform 0.3s;
}

.card-price::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #7c6cff, #ff6c8a);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.card-price:hover::before {
  transform: scaleX(1);
}

.card-price:hover {
  border-color: rgba(124, 108, 255, 0.4);
  transform: translateY(-3px);
}

.price-plan {
  font-family: var(--ccg-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ccg-accent);
  margin-bottom: 8px;
}

.price-amt {
  font-size: 30px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.04em;
  line-height: 1;
}

.price-amt span {
  font-size: 14px;
  font-weight: 400;
  color: var(--ccg-muted);
  letter-spacing: 0;
}

.price-desc {
  font-size: 11px;
  color: var(--ccg-muted);
  margin: 8px 0 14px;
  line-height: 1.5;
}

.price-features {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 14px;
}

.price-feat {
  font-size: 10.5px;
  color: var(--ccg-label);
  display: flex;
  align-items: center;
  gap: 5px;
}

.price-feat::before {
  content: "✓";
  color: var(--ccg-green);
  font-size: 10px;
}

.price-btn {
  width: 100%;
  padding: 8px;
  border-radius: 8px;
  background: rgba(124, 108, 255, 0.15);
  color: var(--ccg-accent);
  border: 1px solid rgba(124, 108, 255, 0.3);
  font-family: var(--ccg-mono);
  font-size: 11px;
  cursor: pointer;
  transition: all 0.2s;
}

.card-price:hover .price-btn {
  background: var(--ccg-accent);
  color: #fff;
  border-color: var(--ccg-accent);
}

/* parent stage backdrop (so the demo renders standalone) */
[class^="stage-"] {
  width: 100%;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 2.5rem 1.5rem;
  box-sizing: border-box;
}

.stage-16 {
  background: #09090e;
}

/* gallery vars + keyframes (so the demo renders standalone) */
:root {
  --ccg-bg: #0a0a0f;
  --ccg-surface: #111118;
  --ccg-surface2: #17171f;
  --ccg-surface3: #1e1e28;
  --ccg-border: rgba(255, 255, 255, 0.15);
  --ccg-border2: rgba(255, 255, 255, 0.13);
  --ccg-accent: #7c6cff;
  --ccg-pink: #ff6c8a;
  --ccg-green: #1ed98a;
  --ccg-amber: #f5a84a;
  --ccg-cyan: #3de8f5;
  --ccg-text: #f0eeff;
  --ccg-muted: #6b6987;
  --ccg-label: #9896b8;
  --ccg-mono: "DM Mono", "Fira Code", monospace;
  --ccg-sans: "Syne", sans-serif;
}
```

### 17. Notification Stack Card

**Type:** Pure CSS
**Description:** Stacked notification items that slide right and highlight on hover. Pulsing colored dots indicate notification type.

**HTML:**
```html
<div class="stage-17">
  <div class="card-notif">
    <div class="notif-item">
      <div class="notif-dot" style="background: #7c6cff"></div>
      <div class="notif-body">
        <h5>New follower</h5>
        <p>@alex started following you</p>
      </div>
      <span class="notif-time">2m</span>
    </div>
    <div class="notif-item">
      <div class="notif-dot" style="background: #1ed98a"></div>
      <div class="notif-body">
        <h5>Build passed</h5>
        <p>Production deploy successful</p>
      </div>
      <span class="notif-time">8m</span>
    </div>
    <div class="notif-item">
      <div class="notif-dot" style="background: #ff6c8a"></div>
      <div class="notif-body">
        <h5>Alert</h5>
        <p>CPU usage exceeded 90%</p>
      </div>
      <span class="notif-time">1h</span>
    </div>
  </div>
</div>
```

**CSS:**
```css
.card-notif {
  width: 210px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.notif-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--ccg-surface2);
  border: 1px solid var(--ccg-border);
  transform: translateX(0);
  transition:
    transform 0.2s,
    border-color 0.2s,
    background 0.2s;
  cursor: pointer;
}

.notif-item:hover {
  transform: translateX(4px);
  border-color: rgba(124, 108, 255, 0.4);
  background: rgba(124, 108, 255, 0.06);
}

.notif-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 3px;
  animation: ccg-notif-pulse 2s ease-in-out infinite;
}

.notif-body {
  flex: 1;
  min-width: 0;
}

.notif-body h5 {
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  margin: 0 0 2px;
}

.notif-body p {
  font-size: 10px;
  color: var(--ccg-muted);
  line-height: 1.4;
  margin: 0;
}

.notif-time {
  font-family: var(--ccg-mono);
  font-size: 9px;
  color: var(--ccg-muted);
  margin-left: auto;
  flex-shrink: 0;
  margin-top: 1px;
}

/* parent stage backdrop (so the demo renders standalone) */
[class^="stage-"] {
  width: 100%;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 2.5rem 1.5rem;
  box-sizing: border-box;
}

.stage-17 {
  background: #0a0a0f;
}

/* gallery vars + keyframes (so the demo renders standalone) */
:root {
  --ccg-bg: #0a0a0f;
  --ccg-surface: #111118;
  --ccg-surface2: #17171f;
  --ccg-surface3: #1e1e28;
  --ccg-border: rgba(255, 255, 255, 0.15);
  --ccg-border2: rgba(255, 255, 255, 0.13);
  --ccg-accent: #7c6cff;
  --ccg-pink: #ff6c8a;
  --ccg-green: #1ed98a;
  --ccg-amber: #f5a84a;
  --ccg-cyan: #3de8f5;
  --ccg-text: #f0eeff;
  --ccg-muted: #6b6987;
  --ccg-label: #9896b8;
  --ccg-mono: "DM Mono", "Fira Code", monospace;
  --ccg-sans: "Syne", sans-serif;
}
@keyframes ccg-notif-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}

@media (prefers-reduced-motion: reduce) {
  .card-notif,
  .card-notif * {
    animation: none !important;
  }
}

```

### 18. Skeleton Loader Card

**Type:** Pure CSS
**Description:** Animated skeleton loading state with a sweeping shimmer wave using background-position keyframes. Replace divs with real content after data loads.

**HTML:**
```html
<div class="stage-18">
  <div class="card-skel">
    <div class="skel skel-avatar"></div>
    <div class="skel skel-line w-3q"></div>
    <div class="skel skel-line w-full"></div>
    <div class="skel skel-line w-half"></div>
    <div class="skel skel-gap"></div>
    <div class="skel skel-line w-full"></div>
    <div class="skel skel-line w-2q"></div>
    <div class="skel skel-btn"></div>
  </div>
</div>
```

**CSS:**
```css
.card-skel {
  width: 200px;
  padding: 18px 20px;
  border-radius: 14px;
  background: var(--ccg-surface2);
  border: 1px solid var(--ccg-border);
}

.skel {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.04) 25%,
    rgba(255, 255, 255, 0.1) 50%,
    rgba(255, 255, 255, 0.04) 75%
  );
  background-size: 200% 100%;
  animation: ccg-skel-wave 1.5s infinite;
  border-radius: 4px;
}

.skel-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  margin-bottom: 14px;
}

.skel-line {
  height: 10px;
  margin-bottom: 7px;
}

.skel-line.w-full {
  width: 100%;
}

.skel-line.w-3q {
  width: 75%;
}

.skel-line.w-half {
  width: 50%;
}

.skel-line.w-2q {
  width: 40%;
}

.skel-gap {
  height: 14px;
}

.skel-btn {
  height: 30px;
  border-radius: 6px;
  margin-top: 14px;
}

/* missing class rules (merged from gallery) */

@keyframes ccg-skel-wave {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}
/* parent stage backdrop (so the demo renders standalone) */
[class^="stage-"] {
  width: 100%;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 2.5rem 1.5rem;
  box-sizing: border-box;
}

.stage-18 {
  background: #0a0a0f;
}

/* gallery vars + keyframes (so the demo renders standalone) */
:root {
  --ccg-bg: #0a0a0f;
  --ccg-surface: #111118;
  --ccg-surface2: #17171f;
  --ccg-surface3: #1e1e28;
  --ccg-border: rgba(255, 255, 255, 0.15);
  --ccg-border2: rgba(255, 255, 255, 0.13);
  --ccg-accent: #7c6cff;
  --ccg-pink: #ff6c8a;
  --ccg-green: #1ed98a;
  --ccg-amber: #f5a84a;
  --ccg-cyan: #3de8f5;
  --ccg-text: #f0eeff;
  --ccg-muted: #6b6987;
  --ccg-label: #9896b8;
  --ccg-mono: "DM Mono", "Fira Code", monospace;
  --ccg-sans: "Syne", sans-serif;
}

@media (prefers-reduced-motion: reduce) {
  .card-skel,
  .card-skel * {
    animation: none !important;
  }
}

```

### 19. Magazine Card

**Type:** Pure CSS
**Description:** Editorial card with image area, category badge, read progress bar that fills on hover, and a smooth lift transition.

**HTML:**
```html
<div class="stage-19">
  <div class="card-mag">
    <div class="mag-img"><div class="mag-img-inner">🌌</div></div>
    <div class="mag-body">
      <div class="mag-category">Design</div>
      <h4>The Future of CSS in 2025</h4>
      <div class="mag-footer">
        <span class="mag-author">Alex Morgan</span>
        <span class="mag-read">Read →</span>
      </div>
      <div class="mag-read-bar"><div class="mag-read-fill"></div></div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.card-mag {
  width: 210px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--ccg-border2);
  cursor: pointer;
  transition: transform 0.35s;
}

.card-mag:hover {
  transform: translateY(-4px);
}

.mag-img {
  height: 110px;
  background: linear-gradient(135deg, #1a0533 0%, #0a1535 50%, #0d1a33 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.mag-img::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 30% 50%, rgba(124, 108, 255, 0.4), transparent 60%),
    radial-gradient(ellipse at 80% 30%, rgba(61, 232, 245, 0.25), transparent 50%);
}

.mag-img-inner {
  position: relative;
  z-index: 1;
  font-size: 36px;
}

.mag-body {
  padding: 14px 16px;
  background: var(--ccg-surface);
}

.mag-category {
  font-family: var(--ccg-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ccg-accent);
  margin-bottom: 5px;
}

.card-mag h4 {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
  margin-bottom: 6px;
}

.mag-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
}

.mag-author {
  font-size: 10px;
  color: var(--ccg-muted);
}

.mag-read {
  font-size: 10px;
  color: var(--ccg-accent);
}

.mag-read-bar {
  height: 2px;
  background: rgba(124, 108, 255, 0.2);
  margin-top: 8px;
  border-radius: 1px;
  overflow: hidden;
}

.mag-read-fill {
  height: 100%;
  width: 0;
  background: var(--ccg-accent);
  transition: width 0.4s ease;
}

.card-mag:hover .mag-read-fill {
  width: 60%;
}

/* parent stage backdrop (so the demo renders standalone) */
[class^="stage-"] {
  width: 100%;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 2.5rem 1.5rem;
  box-sizing: border-box;
}

.stage-19 {
  background: #0a080e;
}

/* gallery vars + keyframes (so the demo renders standalone) */
:root {
  --ccg-bg: #0a0a0f;
  --ccg-surface: #111118;
  --ccg-surface2: #17171f;
  --ccg-surface3: #1e1e28;
  --ccg-border: rgba(255, 255, 255, 0.15);
  --ccg-border2: rgba(255, 255, 255, 0.13);
  --ccg-accent: #7c6cff;
  --ccg-pink: #ff6c8a;
  --ccg-green: #1ed98a;
  --ccg-amber: #f5a84a;
  --ccg-cyan: #3de8f5;
  --ccg-text: #f0eeff;
  --ccg-muted: #6b6987;
  --ccg-label: #9896b8;
  --ccg-mono: "DM Mono", "Fira Code", monospace;
  --ccg-sans: "Syne", sans-serif;
}
```

### 20. Interactive Vote Card

**Type:** CSS + JS
**Description:** Poll card with clickable options that fill in with a progress bar and show percentage. Selected option persists state via JS class toggle.

**HTML:**
```html
<div class="stage-20">
  <div class="card-vote">
    <div class="vote-header">
      <h4>Best CSS feature?</h4>
      <span class="vote-count">1,284 votes</span>
    </div>
    <div class="vote-desc">Pick your favourite modern CSS feature.</div>
    <div class="vote-options">
      <div
        class="vote-opt selected"
        onclick="
          this.closest('.vote-options')
            .querySelectorAll('.vote-opt')
            .forEach((o) => o.classList.remove('selected'));
          this.classList.add('selected');
        "
      >
        <div class="vote-fill"></div>
        <span class="vote-opt-label">Container Queries</span>
        <span class="vote-opt-pct">64%</span>
      </div>
      <div
        class="vote-opt"
        onclick="
          this.closest('.vote-options')
            .querySelectorAll('.vote-opt')
            .forEach((o) => o.classList.remove('selected'));
          this.classList.add('selected');
        "
      >
        <div class="vote-fill" style="width: 22%"></div>
        <span class="vote-opt-label">:has() selector</span>
        <span class="vote-opt-pct">22%</span>
      </div>
      <div
        class="vote-opt"
        onclick="
          this.closest('.vote-options')
            .querySelectorAll('.vote-opt')
            .forEach((o) => o.classList.remove('selected'));
          this.classList.add('selected');
        "
      >
        <div class="vote-fill" style="width: 14%"></div>
        <span class="vote-opt-label">CSS Layers</span>
        <span class="vote-opt-pct">14%</span>
      </div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.card-vote {
  width: 200px;
  padding: 18px 20px;
  border-radius: 14px;
  background: var(--ccg-surface2);
  border: 1px solid var(--ccg-border2);
}

.vote-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.vote-header h4 {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
  flex: 1;
  min-width: 0;
}

.vote-count {
  font-family: var(--ccg-mono);
  font-size: 11px;
  color: var(--ccg-muted);
}

.vote-desc {
  font-size: 11px;
  color: var(--ccg-muted);
  line-height: 1.5;
  margin-bottom: 14px;
}

.vote-options {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.vote-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--ccg-border);
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
  overflow: hidden;
}

.vote-opt:hover {
  border-color: rgba(124, 108, 255, 0.4);
  background: rgba(124, 108, 255, 0.07);
}

.vote-opt.selected {
  border-color: var(--ccg-accent);
}

.vote-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: rgba(124, 108, 255, 0.12);
  transition: width 0.4s ease;
  width: 0;
}

.vote-opt.selected .vote-fill {
  width: 64%;
}

.vote-opt-label {
  font-size: 11px;
  color: var(--ccg-label);
  position: relative;
  z-index: 1;
}

.vote-opt-pct {
  font-family: var(--ccg-mono);
  font-size: 10px;
  color: var(--ccg-muted);
  margin-left: auto;
  position: relative;
  z-index: 1;
}

.vote-opt.selected .vote-opt-pct {
  color: var(--ccg-accent);
}

.vote-opt.selected .vote-opt-label {
  color: #fff;
}

/* parent stage backdrop (so the demo renders standalone) */
[class^="stage-"] {
  width: 100%;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 2.5rem 1.5rem;
  box-sizing: border-box;
}

.stage-20 {
  background: #0a0a0f;
}

/* gallery vars + keyframes (so the demo renders standalone) */
:root {
  --ccg-bg: #0a0a0f;
  --ccg-surface: #111118;
  --ccg-surface2: #17171f;
  --ccg-surface3: #1e1e28;
  --ccg-border: rgba(255, 255, 255, 0.15);
  --ccg-border2: rgba(255, 255, 255, 0.13);
  --ccg-accent: #7c6cff;
  --ccg-pink: #ff6c8a;
  --ccg-green: #1ed98a;
  --ccg-amber: #f5a84a;
  --ccg-cyan: #3de8f5;
  --ccg-text: #f0eeff;
  --ccg-muted: #6b6987;
  --ccg-label: #9896b8;
  --ccg-mono: "DM Mono", "Fira Code", monospace;
  --ccg-sans: "Syne", sans-serif;
}

/* missing class rules (merged from gallery) */
.vote-desc {
  font-size: 11px;
  color: var(--ccg-muted);
  line-height: 1.5;
  margin-bottom: 14px;
}
```

**JS:**
```js
document.querySelectorAll(".vote-opt").forEach((opt) => {
  opt.addEventListener("click", () => {
    opt
      .closest(".vote-options")
      .querySelectorAll(".vote-opt")
      .forEach((o) => o.classList.remove("selected"));
    opt.classList.add("selected");
  });
});
```

---
## CSS Center a Div

URL: https://codefronts.com/layouts/css-center-div-designs/
Description: The complete guide to centering a div in CSS in 2026 — covering all 5 production techniques with live interactive demos. <strong>Flexbox</strong> (the modern default, works for 95% of cases): <code>display: flex; align-items: center; justify-content: center</code> on the parent. <strong>CSS Grid</strong> (one-line shorthand): <code>display: grid; place-items: center</code>. <strong>Absolute positioning + transform</strong> (for overlays and modals): <code>position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)</code>. <strong>Margin auto</strong> (for block elements with a known width): <code>margin: 0 auto</code> (horizontal only) or <code>margin: auto</code> with <code>position: absolute</code> + <code>inset: 0</code> (both axes). <strong>All methods side-by-side comparison</strong> — see every technique render the same content with visible axis crosshairs so you can see exactly where each method lands the element. All 5 demos are 100% pure CSS, MIT-licensed, copy-paste ready, with detailed explanations of which method to use when. Works in every modern browser (Chrome, Safari, Firefox, Edge), no JavaScript required.
Demo count: 5

### 01. CSS Flexbox Center a Div

**Type:** Pure CSS
**Description:** Three flex centering patterns showing how display:flex with align-items and justify-content centers a div both horizontally and vertically, as a row, and as a stacked column.

**HTML:**
```html
<div class="cd-01">
  <div class="cd-01__header">
    <div class="cd-01__badge">Pure CSS</div>
    <h2>CSS Flexbox Center a Div</h2>
    <p>Three flex centering patterns — single element, row of cards, and column stack</p>
  </div>

  <div class="cd-01__viewport">

    <!-- Demo 1: flex center both axes -->
    <div class="cd-01__demo">
      <div class="cd-01__demo-label">
        <span>Center both axes</span>
        <code>display:flex; align-items:center; justify-content:center</code>
      </div>
      <div class="cd-01__stage cd-01__stage--flex">
        <div class="cd-01__axis"></div>
        <div class="cd-01__grid-guide"></div>
        <div class="cd-01__card">
          <h3>Perfectly Centered</h3>
          <p>Both axes, one declaration</p>
        </div>
      </div>
    </div>

    <!-- Demo 2: flex row with gap -->
    <div class="cd-01__demo">
      <div class="cd-01__demo-label">
        <span>Row of items centered</span>
        <code>display:flex; justify-content:center; gap:20px</code>
      </div>
      <div class="cd-01__stage cd-01__stage--flex-row">
        <div class="cd-01__axis"></div>
        <div class="cd-01__card cd-01__card--sm">
          <h3>Card One</h3>
          <p>Auto aligned</p>
        </div>
        <div class="cd-01__card cd-01__card--sm">
          <h3>Card Two</h3>
          <p>Equal spacing</p>
        </div>
        <div class="cd-01__card cd-01__card--sm">
          <h3>Card Three</h3>
          <p>Via gap</p>
        </div>
      </div>
    </div>

    <!-- Demo 3: flex column center -->
    <div class="cd-01__demo">
      <div class="cd-01__demo-label">
        <span>Column stack centered</span>
        <code>flex-direction:column; align-items:center</code>
      </div>
      <div class="cd-01__stage cd-01__stage--flex-col">
        <div class="cd-01__axis"></div>
        <div class="cd-01__card">
          <h3>Stacked &amp; Centered</h3>
          <p>Column direction + align-items</p>
        </div>
        <div class="cd-01__pill">Call to Action</div>
      </div>
    </div>

  </div>
</div>
```

**CSS:**
```css
.cd-01,.cd-01 *,.cd-01 *::before,.cd-01 *::after{box-sizing:border-box;margin:0;padding:0}
.cd-01 ::selection{background:#6366f1;color:#fff}

.cd-01 {
  --bg: #0a0a0f;
  --surface: #13131a;
  --border: rgba(255,255,255,.08);
  --accent: #6366f1;
  --accent2: #a78bfa;
  --text: #f1f0ff;
  --muted: rgba(241,240,255,.45);
  font-family: 'Segoe UI', system-ui, sans-serif;
  background: var(--bg);
  min-height: 100vh;
  padding: 40px 24px;
  color: var(--text);
}

/* ── Label strip ── */
.cd-01__header {
  text-align: center;
  margin-bottom: 40px;
}
.cd-01__header h2 {
  font-size: clamp(1.4rem, 4vw, 2rem);
  font-weight: 700;
  letter-spacing: -.02em;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.cd-01__header p {
  margin-top: 8px;
  color: var(--muted);
  font-size: .9rem;
}

/* ── Code badge ── */
.cd-01__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(99,102,241,.12);
  border: 1px solid rgba(99,102,241,.3);
  border-radius: 6px;
  padding: 4px 12px;
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent2);
  margin-bottom: 16px;
}

/* ── Main showcase container ── */
.cd-01__viewport {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* ── Single demo cell ── */
.cd-01__demo {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
}

.cd-01__demo-label {
  padding: 14px 24px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cd-01__demo-label span {
  font-size: .78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted);
}
.cd-01__demo-label code {
  font-size: .78rem;
  background: rgba(99,102,241,.15);
  color: var(--accent2);
  padding: 2px 8px;
  border-radius: 4px;
  font-family: 'Cascadia Code', 'Fira Code', monospace;
}

/* ── The actual centering playgrounds ── */
.cd-01__stage {
  height: 260px;
  position: relative;
}

/* Flexbox center both axes */
.cd-01__stage--flex {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Flex row with gap */
.cd-01__stage--flex-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  padding: 24px;
}

/* Flex column center */
.cd-01__stage--flex-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

/* ── Cards inside stages ── */
.cd-01__card {
  background: linear-gradient(135deg, rgba(99,102,241,.2), rgba(167,139,250,.15));
  border: 1px solid rgba(99,102,241,.3);
  border-radius: 16px;
  padding: 28px 36px;
  text-align: center;
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 32px rgba(99,102,241,.15);
}
.cd-01__card h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
}
.cd-01__card p {
  font-size: .82rem;
  color: var(--muted);
}

.cd-01__card--sm {
  padding: 20px 24px;
}
.cd-01__card--sm h3 { font-size: .95rem; }

.cd-01__pill {
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  border-radius: 50px;
  padding: 10px 28px;
  font-size: .85rem;
  font-weight: 600;
  color: #fff;
  box-shadow: 0 4px 20px rgba(99,102,241,.4);
}

/* ── Axis lines overlay ── */
.cd-01__axis {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.cd-01__axis::before,
.cd-01__axis::after {
  content: '';
  position: absolute;
  background: rgba(99,102,241,.12);
}
.cd-01__axis::before {
  width: 1px;
  height: 100%;
  left: 50%;
}
.cd-01__axis::after {
  width: 100%;
  height: 1px;
  top: 50%;
}

/* ── Grid guide ── */
.cd-01__grid-guide {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(99,102,241,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(99,102,241,.06) 1px, transparent 1px);
  background-size: 40px 40px;
}

@media (max-width: 600px) {
  .cd-01__demo-label { flex-direction: column; align-items: flex-start; gap: 6px; }
  .cd-01__stage { height: auto; min-height: 200px; padding: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .cd-01 * { animation: none !important; transition: none !important; }
}
```

### 02. CSS Grid Center a Div

**Type:** Pure CSS
**Description:** Three CSS Grid centering techniques — place-items shorthand, a 3×3 named template that puts the child at column 2/row 2, and the grid-absorbs-free-space margin:auto pattern.

**HTML:**
```html
<div class="cd-02">
  <div class="cd-02__header">
    <div class="cd-02__badge">Pure CSS</div>
    <h2>CSS Grid Center a Div</h2>
    <p>Three grid centering techniques — place-items, named template areas, and auto margins</p>
  </div>

  <div class="cd-02__viewport">

    <!-- Demo 1: place-items: center -->
    <div class="cd-02__demo">
      <div class="cd-02__demo-label">
        <span>place-items shorthand</span>
        <code>display:grid; place-items:center</code>
      </div>
      <div class="cd-02__stage cd-02__stage--place">
        <div class="cd-02__dots"></div>
        <div class="cd-02__lines"></div>
        <div class="cd-02__card cd-02__center">
          <h3>Grid Centered</h3>
          <p>Two properties, total control</p>
        </div>
      </div>
    </div>

    <!-- Demo 2: 3-col 3-row template -->
    <div class="cd-02__demo">
      <div class="cd-02__demo-label">
        <span>3-col / 3-row template</span>
        <code>grid-template: 1fr auto 1fr / 1fr auto 1fr</code>
      </div>
      <div class="cd-02__stage cd-02__stage--template">
        <div class="cd-02__dots"></div>
        <div class="cd-02__lines"></div>
        <div class="cd-02__card cd-02__center">
          <h3>Column 2 · Row 2</h3>
          <p>Exact grid placement</p>
        </div>
      </div>
    </div>

    <!-- Demo 3: margin auto inside grid -->
    <div class="cd-02__demo">
      <div class="cd-02__demo-label">
        <span>Auto margins inside grid</span>
        <code>display:grid → margin:auto on child</code>
      </div>
      <div class="cd-02__stage cd-02__stage--margins">
        <div class="cd-02__dots"></div>
        <div class="cd-02__lines"></div>
        <div class="cd-02__card cd-02__center">
          <h3>Margin Auto Magic</h3>
          <p>Grid absorbs free space</p>
        </div>
      </div>
    </div>

  </div>
</div>
```

**CSS:**
```css
.cd-02,.cd-02 *,.cd-02 *::before,.cd-02 *::after{box-sizing:border-box;margin:0;padding:0}
.cd-02 ::selection{background:#f59e0b;color:#000}

.cd-02 {
  --bg: #0c0a00;
  --surface: #151200;
  --border: rgba(245,158,11,.12);
  --accent: #f59e0b;
  --accent2: #fcd34d;
  --text: #fefce8;
  --muted: rgba(254,252,232,.45);
  font-family: 'Segoe UI', system-ui, sans-serif;
  background: var(--bg);
  min-height: 100vh;
  padding: 40px 24px;
  color: var(--text);
}

.cd-02__header {
  text-align: center;
  margin-bottom: 40px;
}
.cd-02__badge {
  display: inline-flex;
  align-items: center;
  background: rgba(245,158,11,.12);
  border: 1px solid rgba(245,158,11,.3);
  border-radius: 6px;
  padding: 4px 12px;
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent2);
  margin-bottom: 16px;
}
.cd-02__header h2 {
  font-size: clamp(1.4rem, 4vw, 2rem);
  font-weight: 700;
  letter-spacing: -.02em;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.cd-02__header p {
  margin-top: 8px;
  color: var(--muted);
  font-size: .9rem;
}

.cd-02__viewport {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.cd-02__demo {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
}

.cd-02__demo-label {
  padding: 14px 24px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cd-02__demo-label span {
  font-size: .78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted);
}
.cd-02__demo-label code {
  font-size: .78rem;
  background: rgba(245,158,11,.15);
  color: var(--accent2);
  padding: 2px 8px;
  border-radius: 4px;
  font-family: 'Cascadia Code', 'Fira Code', monospace;
}

.cd-02__stage {
  height: 280px;
  position: relative;
}

/* ── Grid center: place-items shorthand ── */
.cd-02__stage--place {
  display: grid;
  place-items: center;
}

/* ── Grid center: named template ── */
.cd-02__stage--template {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-rows: 1fr auto 1fr;
  gap: 0;
}
.cd-02__stage--template .cd-02__center {
  grid-column: 2;
  grid-row: 2;
}

/* ── Grid center: auto margins ── */
.cd-02__stage--margins {
  display: grid;
}
.cd-02__stage--margins .cd-02__center {
  margin: auto;
}

/* ── Cards ── */
.cd-02__card {
  background: linear-gradient(135deg, rgba(245,158,11,.18), rgba(252,211,77,.1));
  border: 1px solid rgba(245,158,11,.3);
  border-radius: 16px;
  padding: 28px 36px;
  text-align: center;
  box-shadow: 0 8px 32px rgba(245,158,11,.12);
  position: relative;
  z-index: 1;
}
.cd-02__card h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
}
.cd-02__card p {
  font-size: .82rem;
  color: var(--muted);
}

/* ── Dot grid ── */
.cd-02__dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(245,158,11,.18) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}

/* ── Grid lines overlay ── */
.cd-02__lines {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.cd-02__lines::before,
.cd-02__lines::after {
  content: '';
  position: absolute;
  background: rgba(245,158,11,.1);
}
.cd-02__lines::before { width: 1px; height: 100%; left: 50%; }
.cd-02__lines::after  { width: 100%; height: 1px; top: 50%; }

/* ── Grid cell highlight visual ── */
.cd-02__cell-markers {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-rows: 1fr auto 1fr;
}
.cd-02__cell-markers span {
  border: 1px dashed rgba(245,158,11,.08);
}

@media (max-width: 600px) {
  .cd-02__demo-label { flex-direction: column; align-items: flex-start; gap: 6px; }
  .cd-02__stage { height: auto; min-height: 200px; padding: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .cd-02 * { animation: none !important; transition: none !important; }
}
```

### 03. CSS Absolute Position Center a Div

**Type:** Pure CSS
**Description:** Three absolute-positioning centering methods demonstrated inside a glassmorphism UI — the classic top/left 50% + translate trick, inset:0 with margin:auto, and known-size calc offset.

**HTML:**
```html
<div class="cd-03">
  <div class="cd-03__blob cd-03__blob--a"></div>
  <div class="cd-03__blob cd-03__blob--b"></div>

  <div class="cd-03__header">
    <div class="cd-03__badge">Pure CSS</div>
    <h2>CSS Absolute Position Center a Div</h2>
    <p>Classic centering via position:absolute — translate trick, inset auto, and calc variants</p>
  </div>

  <div class="cd-03__viewport">

    <!-- Method 1: top/left 50% + translate -->
    <div class="cd-03__demo">
      <div class="cd-03__demo-label">
        <span>Top/Left 50% + translate</span>
        <code>top:50%; left:50%; transform:translate(-50%,-50%)</code>
      </div>
      <div class="cd-03__stage">
        <div class="cd-03__cross"></div>
        <div class="cd-03__corner cd-03__corner--tl"></div>
        <div class="cd-03__corner cd-03__corner--tr"></div>
        <div class="cd-03__corner cd-03__corner--bl"></div>
        <div class="cd-03__corner cd-03__corner--br"></div>
        <div class="cd-03__glass cd-03__center--translate">
          <h3>Translate Trick</h3>
          <p>Works at any unknown size</p>
        </div>
      </div>
    </div>

    <!-- Method 2: inset:0 + margin:auto -->
    <div class="cd-03__demo">
      <div class="cd-03__demo-label">
        <span>Inset 0 + margin auto</span>
        <code>position:absolute; inset:0; margin:auto; width:fit-content</code>
      </div>
      <div class="cd-03__stage">
        <div class="cd-03__cross"></div>
        <div class="cd-03__corner cd-03__corner--tl"></div>
        <div class="cd-03__corner cd-03__corner--tr"></div>
        <div class="cd-03__corner cd-03__corner--bl"></div>
        <div class="cd-03__corner cd-03__corner--br"></div>
        <div class="cd-03__glass cd-03__center--inset">
          <h3>Inset + Margin Auto</h3>
          <p>Modern, readable, no translate</p>
        </div>
      </div>
    </div>

    <!-- Method 3: percentage anchor with calc reminder -->
    <div class="cd-03__demo">
      <div class="cd-03__demo-label">
        <span>Anchor with calc offset</span>
        <code>top:calc(50% - Npx); left:calc(50% - Npx)</code>
      </div>
      <div class="cd-03__stage">
        <div class="cd-03__cross"></div>
        <div class="cd-03__corner cd-03__corner--tl"></div>
        <div class="cd-03__corner cd-03__corner--tr"></div>
        <div class="cd-03__corner cd-03__corner--bl"></div>
        <div class="cd-03__corner cd-03__corner--br"></div>
        <div class="cd-03__glass cd-03__center--calc">
          <h3>Calc Offset</h3>
          <p>Precise when dimensions are known</p>
        </div>
      </div>
    </div>

  </div>
</div>
```

**CSS:**
```css
.cd-03,.cd-03 *,.cd-03 *::before,.cd-03 *::after{box-sizing:border-box;margin:0;padding:0}
.cd-03 ::selection{background:#ec4899;color:#fff}

.cd-03 {
  --bg: #0d0818;
  --surface: #130f22;
  --border: rgba(236,72,153,.1);
  --accent: #ec4899;
  --accent2: #f9a8d4;
  --blue: #818cf8;
  --text: #fdf2f8;
  --muted: rgba(253,242,248,.45);
  font-family: 'Segoe UI', system-ui, sans-serif;
  background: var(--bg);
  min-height: 100vh;
  padding: 40px 24px;
  color: var(--text);
}

/* ── Ambient glow blobs (decorative background) ── */
.cd-03__blob {
  position: fixed;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .25;
  pointer-events: none;
  z-index: 0;
}
.cd-03__blob--a {
  width: 500px; height: 500px;
  background: var(--accent);
  top: -120px; left: -100px;
}
.cd-03__blob--b {
  width: 400px; height: 400px;
  background: var(--blue);
  bottom: -100px; right: -80px;
}

.cd-03__header {
  text-align: center;
  margin-bottom: 40px;
  position: relative;
  z-index: 1;
}
.cd-03__badge {
  display: inline-flex;
  align-items: center;
  background: rgba(236,72,153,.12);
  border: 1px solid rgba(236,72,153,.3);
  border-radius: 6px;
  padding: 4px 12px;
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent2);
  margin-bottom: 16px;
}
.cd-03__header h2 {
  font-size: clamp(1.4rem, 4vw, 2rem);
  font-weight: 700;
  letter-spacing: -.02em;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.cd-03__header p {
  margin-top: 8px;
  color: var(--muted);
  font-size: .9rem;
}

.cd-03__viewport {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 32px;
  position: relative;
  z-index: 1;
}

.cd-03__demo {
  background: rgba(19,15,34,.6);
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
  backdrop-filter: blur(20px);
}

.cd-03__demo-label {
  padding: 14px 24px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cd-03__demo-label span {
  font-size: .78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted);
}
.cd-03__demo-label code {
  font-size: .78rem;
  background: rgba(236,72,153,.15);
  color: var(--accent2);
  padding: 2px 8px;
  border-radius: 4px;
  font-family: 'Cascadia Code', 'Fira Code', monospace;
}

.cd-03__stage {
  height: 280px;
  position: relative;
  overflow: hidden;
}

/* ── Method 1: top/left 50% + translate(-50%,-50%) ── */
.cd-03__center--translate {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* ── Method 2: inset:0 + margin:auto ── */
.cd-03__center--inset {
  position: absolute;
  inset: 0;
  margin: auto;
  width: fit-content;
  height: fit-content;
}

/* ── Method 3: calc center ── */
.cd-03__center--calc {
  position: absolute;
  /* centering via calc without knowing exact size — uses transform */
  top: calc(50% - 0px);
  left: calc(50% - 0px);
  transform: translate(-50%, -50%);
}

/* ── Glassmorphism cards ── */
.cd-03__glass {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 20px;
  padding: 32px 40px;
  text-align: center;
  backdrop-filter: blur(24px);
  box-shadow:
    0 8px 32px rgba(236,72,153,.15),
    inset 0 1px 0 rgba(255,255,255,.1);
  white-space: nowrap;
}
.cd-03__glass h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
}
.cd-03__glass p {
  font-size: .82rem;
  color: var(--muted);
}

/* ── Crosshair lines ── */
.cd-03__cross {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.cd-03__cross::before,
.cd-03__cross::after {
  content: '';
  position: absolute;
  background: rgba(236,72,153,.1);
}
.cd-03__cross::before { width: 1px; height: 100%; left: 50%; }
.cd-03__cross::after  { width: 100%; height: 1px; top: 50%; }

/* ── Corner tick marks ── */
.cd-03__corner {
  position: absolute;
  width: 14px;
  height: 14px;
  pointer-events: none;
}
.cd-03__corner--tl { top: 16px; left: 16px; border-top: 1px solid rgba(236,72,153,.3); border-left: 1px solid rgba(236,72,153,.3); }
.cd-03__corner--tr { top: 16px; right: 16px; border-top: 1px solid rgba(236,72,153,.3); border-right: 1px solid rgba(236,72,153,.3); }
.cd-03__corner--bl { bottom: 16px; left: 16px; border-bottom: 1px solid rgba(236,72,153,.3); border-left: 1px solid rgba(236,72,153,.3); }
.cd-03__corner--br { bottom: 16px; right: 16px; border-bottom: 1px solid rgba(236,72,153,.3); border-right: 1px solid rgba(236,72,153,.3); }

@media (max-width: 600px) {
  .cd-03__demo-label { flex-direction: column; align-items: flex-start; gap: 6px; }
  .cd-03__stage { height: 200px; }
  .cd-03__glass { padding: 20px 24px; white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
  .cd-03 * { animation: none !important; transition: none !important; }
}
```

### 04. CSS Margin Auto Center a Div

**Type:** Pure CSS
**Description:** Horizontal and block centering via the classic margin:0 auto, the modern logical margin-inline:auto equivalent, and the real-world max-width + margin-inline:auto content-column pattern.

**HTML:**
```html
<div class="cd-04">
  <div class="cd-04__header">
    <div class="cd-04__badge">Pure CSS</div>
    <h2>CSS Margin Auto Center a Div</h2>
    <p>Horizontal centering via margin auto, logical properties, and max-width content blocks</p>
  </div>

  <div class="cd-04__viewport">

    <!-- Method 1: margin: 0 auto -->
    <div class="cd-04__demo">
      <div class="cd-04__demo-label">
        <span>Classic margin auto</span>
        <code>width:fit-content; margin:0 auto</code>
      </div>
      <div class="cd-04__stage cd-04__stage--h-center">
        <div class="cd-04__rail"></div>
        <div class="cd-04__card cd-04__center--margin-auto">
          <h3>Margin Auto</h3>
          <p>The original horizontal centerer</p>
        </div>
      </div>
    </div>

    <!-- Method 2: margin-inline: auto (logical properties) -->
    <div class="cd-04__demo">
      <div class="cd-04__demo-label">
        <span>Logical properties</span>
        <code>margin-inline:auto; margin-block:auto</code>
      </div>
      <div class="cd-04__stage cd-04__stage--logical">
        <div class="cd-04__rail"></div>
        <div class="cd-04__card cd-04__center--logical">
          <h3>margin-inline: auto</h3>
          <p>Writing-mode aware, direction-safe</p>
        </div>
      </div>
    </div>

    <!-- Method 3: max-width + margin-inline auto -->
    <div class="cd-04__demo">
      <div class="cd-04__demo-label">
        <span>Max-width content centering</span>
        <code>max-width:560px; margin-inline:auto</code>
      </div>
      <div class="cd-04__stage cd-04__stage--content">
        <div class="cd-04__maxw-guide"></div>
        <div class="cd-04__content-wrapper">
          <div class="cd-04__content-block">
            <h3>Page Content Block</h3>
            <p>This is the real-world pattern — constrain width, auto-center inline</p>
          </div>
          <div class="cd-04__content-block">
            <h3>Works at Any Viewport</h3>
            <p>Centered on wide screens, full-bleed on mobile</p>
          </div>
        </div>
      </div>
    </div>

  </div>
</div>
```

**CSS:**
```css
.cd-04,.cd-04 *,.cd-04 *::before,.cd-04 *::after{box-sizing:border-box;margin:0;padding:0}
.cd-04 ::selection{background:#10b981;color:#000}

.cd-04 {
  --bg: #020c08;
  --surface: #071410;
  --border: rgba(16,185,129,.1);
  --accent: #10b981;
  --accent2: #6ee7b7;
  --text: #ecfdf5;
  --muted: rgba(236,253,245,.45);
  font-family: 'Segoe UI', system-ui, sans-serif;
  background: var(--bg);
  min-height: 100vh;
  padding: 40px 24px;
  color: var(--text);
}

.cd-04__header {
  text-align: center;
  margin-bottom: 40px;
}
.cd-04__badge {
  display: inline-flex;
  align-items: center;
  background: rgba(16,185,129,.12);
  border: 1px solid rgba(16,185,129,.3);
  border-radius: 6px;
  padding: 4px 12px;
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent2);
  margin-bottom: 16px;
}
.cd-04__header h2 {
  font-size: clamp(1.4rem, 4vw, 2rem);
  font-weight: 700;
  letter-spacing: -.02em;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.cd-04__header p {
  margin-top: 8px;
  color: var(--muted);
  font-size: .9rem;
}

.cd-04__viewport {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.cd-04__demo {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
}

.cd-04__demo-label {
  padding: 14px 24px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cd-04__demo-label span {
  font-size: .78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted);
}
.cd-04__demo-label code {
  font-size: .78rem;
  background: rgba(16,185,129,.15);
  color: var(--accent2);
  padding: 2px 8px;
  border-radius: 4px;
  font-family: 'Cascadia Code', 'Fira Code', monospace;
}

.cd-04__stage {
  height: 240px;
  position: relative;
  padding: 24px;
  display: flex;
  align-items: center;
}

/* ── Method 1: margin: 0 auto (horizontal only) ── */
.cd-04__stage--h-center {
  display: block;
  overflow: auto;
}
.cd-04__center--margin-auto {
  margin: 0 auto;
  width: fit-content;
  /* vertical centering via line-height trick */
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

/* ── Method 2: margin-inline: auto (logical) ── */
.cd-04__stage--logical {
  display: block;
  overflow: auto;
}
.cd-04__center--logical {
  margin-inline: auto;
  margin-block: auto;
  width: fit-content;
  /* Needs a block formatting context — use absolute parent here */
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

/* ── Method 3: max-width + margin auto (content centering) ── */
.cd-04__stage--content {
  display: block;
  padding: 0;
}
.cd-04__content-wrapper {
  max-width: 560px;
  width: 100%;
  margin-inline: auto;
  padding: 40px 32px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
}

/* ── Cards ── */
.cd-04__card {
  background: linear-gradient(135deg, rgba(16,185,129,.18), rgba(110,231,183,.1));
  border: 1px solid rgba(16,185,129,.3);
  border-radius: 16px;
  padding: 24px 32px;
  text-align: center;
  box-shadow: 0 8px 32px rgba(16,185,129,.1);
}
.cd-04__card h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
}
.cd-04__card p {
  font-size: .82rem;
  color: var(--muted);
}

/* ── Content block ── */
.cd-04__content-block {
  border-left: 3px solid var(--accent);
  padding: 16px 20px;
  background: rgba(16,185,129,.06);
  border-radius: 0 12px 12px 0;
}
.cd-04__content-block h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}
.cd-04__content-block p {
  font-size: .82rem;
  color: var(--muted);
}

/* ── Rail lines ── */
.cd-04__rail {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.cd-04__rail::before,
.cd-04__rail::after {
  content: '';
  position: absolute;
  background: rgba(16,185,129,.08);
}
.cd-04__rail::before { width: 1px; height: 100%; left: 50%; }
.cd-04__rail::after  { width: 100%; height: 1px; top: 50%; }

/* ── Max-width borders ── */
.cd-04__maxw-guide {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 560px;
  transform: translateX(-50%);
  border-left: 1px dashed rgba(16,185,129,.2);
  border-right: 1px dashed rgba(16,185,129,.2);
  pointer-events: none;
}

@media (max-width: 600px) {
  .cd-04__demo-label { flex-direction: column; align-items: flex-start; gap: 6px; }
  .cd-04__stage { height: auto; min-height: 180px; }
}
@media (prefers-reduced-motion: reduce) {
  .cd-04 * { animation: none !important; transition: none !important; }
}
```

### 05. CSS Center a Div All Methods

**Type:** Pure CSS
**Description:** Side-by-side comparison of every major CSS centering technique — Flexbox, Grid, Absolute+Transform, Table-cell, and the Writing-mode trick — each in its own live tile with browser support chips.

**HTML:**
```html
<div class="cd-05">
  <div class="cd-05__header">
    <div class="cd-05__badge">Pure CSS</div>
    <h2>CSS Center a Div — All 5 Methods</h2>
    <p>Flexbox, Grid, Absolute, Table-cell, and Writing-mode — every technique side by side</p>
  </div>

  <div class="cd-05__grid">

    <!-- 1: Flexbox -->
    <div class="cd-05__tile">
      <div class="cd-05__tile-label">
        <h3>1 · Flexbox</h3>
        <code>display:flex; align-items:center; justify-content:center</code>
      </div>
      <div class="cd-05__stage cd-05__stage--flex">
        <div class="cd-05__cross"></div>
        <div class="cd-05__box cd-05__box--flex">Flexbox</div>
      </div>
      <div class="cd-05__support">
        <span class="cd-05__chip cd-05__chip--green">Modern ✓</span>
        <span class="cd-05__chip cd-05__chip--green">2-axis</span>
        <span class="cd-05__chip cd-05__chip--blue">Chrome 21+</span>
      </div>
    </div>

    <!-- 2: Grid place-items -->
    <div class="cd-05__tile">
      <div class="cd-05__tile-label">
        <h3>2 · CSS Grid</h3>
        <code>display:grid; place-items:center</code>
      </div>
      <div class="cd-05__stage cd-05__stage--grid">
        <div class="cd-05__cross"></div>
        <div class="cd-05__box cd-05__box--grid">Grid</div>
      </div>
      <div class="cd-05__support">
        <span class="cd-05__chip cd-05__chip--green">Modern ✓</span>
        <span class="cd-05__chip cd-05__chip--green">Shortest</span>
        <span class="cd-05__chip cd-05__chip--blue">Chrome 57+</span>
      </div>
    </div>

    <!-- 3: Absolute + translate -->
    <div class="cd-05__tile">
      <div class="cd-05__tile-label">
        <h3>3 · Absolute + Transform</h3>
        <code>position:absolute; top:50%; left:50%; transform:translate(-50%,-50%)</code>
      </div>
      <div class="cd-05__stage cd-05__stage--abs">
        <div class="cd-05__cross"></div>
        <div class="cd-05__box cd-05__box--abs cd-05__abs-child">Absolute</div>
      </div>
      <div class="cd-05__support">
        <span class="cd-05__chip cd-05__chip--green">Universal ✓</span>
        <span class="cd-05__chip cd-05__chip--warn">Needs parent</span>
        <span class="cd-05__chip cd-05__chip--blue">IE9+</span>
      </div>
    </div>

    <!-- 4: table-cell -->
    <div class="cd-05__tile">
      <div class="cd-05__tile-label">
        <h3>4 · Table-Cell</h3>
        <code>display:table-cell; vertical-align:middle; text-align:center</code>
      </div>
      <div class="cd-05__table-wrap">
        <div class="cd-05__stage cd-05__stage--table">
          <div class="cd-05__cross"></div>
          <div class="cd-05__box cd-05__box--table" style="display:inline-block">Table Cell</div>
        </div>
      </div>
      <div class="cd-05__support">
        <span class="cd-05__chip cd-05__chip--warn">Legacy</span>
        <span class="cd-05__chip cd-05__chip--warn">Semantic cost</span>
        <span class="cd-05__chip cd-05__chip--blue">IE8+</span>
      </div>
    </div>

    <!-- 5: Writing-mode trick -->
    <div class="cd-05__tile">
      <div class="cd-05__tile-label">
        <h3>5 · Writing-Mode Trick</h3>
        <code>writing-mode → inline-block child → reset writing-mode</code>
      </div>
      <div class="cd-05__stage cd-05__stage--writing">
        <div class="cd-05__cross"></div>
        <div class="cd-05__box cd-05__box--writing">Writing-Mode</div>
      </div>
      <div class="cd-05__support">
        <span class="cd-05__chip cd-05__chip--warn">Obscure</span>
        <span class="cd-05__chip cd-05__chip--warn">RTL care needed</span>
        <span class="cd-05__chip cd-05__chip--blue">Chrome 25+</span>
      </div>
    </div>

  </div>
</div>
```

**CSS:**
```css
.cd-05,.cd-05 *,.cd-05 *::before,.cd-05 *::after{box-sizing:border-box;margin:0;padding:0}
.cd-05 ::selection{background:#8b5cf6;color:#fff}

.cd-05 {
  --bg: #08060f;
  --surface: #0e0b1a;
  --border: rgba(139,92,246,.1);
  --accent: #8b5cf6;
  --accent2: #c4b5fd;
  --orange: #fb923c;
  --teal: #2dd4bf;
  --text: #f5f3ff;
  --muted: rgba(245,243,255,.45);
  font-family: 'Segoe UI', system-ui, sans-serif;
  background: var(--bg);
  min-height: 100vh;
  padding: 40px 24px;
  color: var(--text);
}

.cd-05__header {
  text-align: center;
  margin-bottom: 40px;
}
.cd-05__badge {
  display: inline-flex;
  align-items: center;
  background: rgba(139,92,246,.12);
  border: 1px solid rgba(139,92,246,.3);
  border-radius: 6px;
  padding: 4px 12px;
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent2);
  margin-bottom: 16px;
}
.cd-05__header h2 {
  font-size: clamp(1.4rem, 4vw, 2rem);
  font-weight: 700;
  letter-spacing: -.02em;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.cd-05__header p {
  margin-top: 8px;
  color: var(--muted);
  font-size: .9rem;
}

/* ── Comparison grid ── */
.cd-05__grid {
  max-width: 960px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.cd-05__tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.cd-05__tile-label {
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--border);
}
.cd-05__tile-label h3 {
  font-size: .88rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}
.cd-05__tile-label code {
  font-size: .72rem;
  background: rgba(139,92,246,.15);
  color: var(--accent2);
  padding: 2px 8px;
  border-radius: 4px;
  font-family: 'Cascadia Code', 'Fira Code', monospace;
  word-break: break-all;
}

.cd-05__stage {
  flex: 1;
  height: 200px;
  position: relative;
}

/* ── Crosshair ── */
.cd-05__cross {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.cd-05__cross::before,
.cd-05__cross::after {
  content: '';
  position: absolute;
  background: rgba(139,92,246,.1);
}
.cd-05__cross::before { width: 1px; height: 100%; left: 50%; }
.cd-05__cross::after  { width: 100%; height: 1px; top: 50%; }

/* ── METHOD 1: Flexbox ── */
.cd-05__stage--flex {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── METHOD 2: Grid place-items ── */
.cd-05__stage--grid {
  display: grid;
  place-items: center;
}

/* ── METHOD 3: Absolute + translate ── */
.cd-05__stage--abs {
  position: relative;
}
.cd-05__abs-child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* ── METHOD 4: table-cell (legacy) ── */
.cd-05__table-wrap {
  display: table;
  width: 100%;
  height: 200px;
}
.cd-05__stage--table {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  height: 200px;
}

/* ── METHOD 5: sticky/sticky scroll snap (CSS-only modal-like center) ── */
.cd-05__stage--writing {
  writing-mode: horizontal-tb;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Boxes inside stages ── */
.cd-05__box {
  border-radius: 12px;
  padding: 18px 24px;
  text-align: center;
  font-size: .85rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  border: 1px solid;
}
.cd-05__box--flex {
  background: rgba(99,102,241,.2);
  border-color: rgba(99,102,241,.4);
  box-shadow: 0 0 20px rgba(99,102,241,.2);
}
.cd-05__box--grid {
  background: rgba(245,158,11,.15);
  border-color: rgba(245,158,11,.35);
  box-shadow: 0 0 20px rgba(245,158,11,.15);
}
.cd-05__box--abs {
  background: rgba(236,72,153,.15);
  border-color: rgba(236,72,153,.35);
  box-shadow: 0 0 20px rgba(236,72,153,.15);
}
.cd-05__box--table {
  background: rgba(16,185,129,.15);
  border-color: rgba(16,185,129,.35);
  box-shadow: 0 0 20px rgba(16,185,129,.15);
}
.cd-05__box--writing {
  background: rgba(251,146,60,.15);
  border-color: rgba(251,146,60,.35);
  box-shadow: 0 0 20px rgba(251,146,60,.15);
}

/* ── Support indicator ── */
.cd-05__support {
  padding: 10px 20px 14px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.cd-05__chip {
  font-size: .68rem;
  padding: 2px 8px;
  border-radius: 20px;
  font-weight: 600;
  letter-spacing: .04em;
}
.cd-05__chip--green { background: rgba(16,185,129,.15); color: #6ee7b7; }
.cd-05__chip--blue  { background: rgba(99,102,241,.15); color: #a5b4fc; }
.cd-05__chip--warn  { background: rgba(245,158,11,.15); color: #fcd34d; }

@media (max-width: 480px) {
  .cd-05__stage { height: 160px; }
  .cd-05__table-wrap { height: 160px; }
  .cd-05__stage--table { height: 160px; }
}
@media (prefers-reduced-motion: reduce) {
  .cd-05 * { animation: none !important; transition: none !important; }
}
```

---
## 23 CSS Checkboxes

URL: https://codefronts.com/components/css-checkboxes/
Description: 23 hand-crafted CSS checkboxes — toggles, glow, draw stroke, bouncy pop, glassmorphism, neumorphic, liquid fill, ripple, confetti and more. Mostly pure CSS, copy-paste ready.
Demo count: 23

### 01. Smooth Slide Toggle

**Type:** Pure CSS
**Description:** Pill toggle with gradient fill. The thumb glides on a cubic-bezier curve.

**HTML:**
```html
<label class="cb-toggle">
  <input class="cb-toggle__input" type="checkbox" checked />
  <span class="cb-toggle__track">
    <span class="cb-toggle__thumb"></span>
  </span>
  <span class="cb-toggle__label">Smooth slide toggle</span>
</label>
```

**CSS:**
```css
.cb-toggle {
  display: inline-flex; align-items: center;
  gap: 10px; cursor: pointer; user-select: none;
}
.cb-toggle__input { display: none; }
.cb-toggle__track {
  width: 44px; height: 24px; border-radius: 12px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.15);
  position: relative;
  transition: background .3s cubic-bezier(.23,1,.32,1),
              border-color .3s;
}
.cb-toggle__thumb {
  position: absolute; top: 3px; left: 3px;
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.3);
  transition: transform .3s cubic-bezier(.23,1,.32,1);
}
.cb-toggle__input:checked + .cb-toggle__track {
  background: linear-gradient(135deg, #7c6cff, #ff6c8a);
  border-color: transparent;
}
.cb-toggle__input:checked + .cb-toggle__track .cb-toggle__thumb {
  transform: translateX(20px);
}
```

### 02. Neon Glow Checkbox

**Type:** Pure CSS
**Description:** Electric box-shadow glow blooms when checked. The checkmark is an inline SVG.

**HTML:**
```html
<label class="cb-neon">
  <input class="cb-neon__input" type="checkbox" checked />
  <span class="cb-neon__box">
    <svg width="12" height="9" viewBox="0 0 14 11" fill="none">
      <polyline
        points="1,5.5 5,9.5 13,1"
        stroke="#fff"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
      />
    </svg>
  </span>
  <span>Neon glow on check</span>
</label>
```

**CSS:**
```css
.cb-neon {
  display: inline-flex; align-items: center;
  gap: 10px; cursor: pointer; user-select: none;
}
.cb-neon__input { display: none; }
.cb-neon__box {
  width: 22px; height: 22px; border-radius: 6px;
  border: 2px solid rgba(124,108,255,.4);
  display: flex; align-items: center;
  justify-content: center; color: transparent;
  transition: all .25s;
}
.cb-neon__input:checked + .cb-neon__box {
  background: #7c6cff;
  border-color: #7c6cff; color: #fff;
  box-shadow:
    0 0 12px rgba(124,108,255,.7),
    0 0 24px rgba(124,108,255,.3);
}
```

### 03. Draw Stroke Checkmark

**Type:** Pure CSS
**Description:** The checkmark draws itself using SVG stroke-dashoffset animation on :checked.

**HTML:**
```html
<label class="cb-draw">
  <input class="cb-draw__input" type="checkbox" checked />
  <span class="cb-draw__box">
    <svg class="cb-draw__svg" viewBox="0 0 16 12" fill="none">
      <polyline
        class="cb-draw__path"
        points="1,6 6,11 15,1"
        stroke="#1ed98a"
        stroke-width="2.2"
        stroke-linecap="round"
        stroke-linejoin="round"
      />
    </svg>
  </span>
  <span>Draw stroke checkmark</span>
</label>
```

**CSS:**
```css
.cb-draw {
  display: inline-flex; align-items: center;
  gap: 10px; cursor: pointer; user-select: none;
}
.cb-draw__input { display: none; }
.cb-draw__box {
  width: 24px; height: 24px; border-radius: 7px;
  border: 2px solid rgba(30,217,138,.35);
  background: rgba(30,217,138,.05);
  display: flex; align-items: center;
  justify-content: center;
  transition: border-color .3s, background .3s;
}
.cb-draw__input:checked + .cb-draw__box {
  border-color: #1ed98a;
  background: rgba(30,217,138,.12);
}
.cb-draw__svg { width: 14px; height: 10px; }
.cb-draw__path {
  stroke-dasharray: 22;
  stroke-dashoffset: 22;
  transition: stroke-dashoffset .35s
    cubic-bezier(.23,1,.32,1) .05s;
}
.cb-draw__input:checked
  + .cb-draw__box .cb-draw__path {
  stroke-dashoffset: 0;
}
```

### 04. Bouncy Pop Checkbox

**Type:** Pure CSS
**Description:** An inner dot springs in with cubic-bezier overshoot, giving an elastic tactile feel.

**HTML:**
```html
<label class="cb-pop">
  <input class="cb-pop__input" type="checkbox" checked />
  <span class="cb-pop__box">
    <span class="cb-pop__dot"></span>
  </span>
  <span>Bouncy pop checkbox</span>
</label>
```

**CSS:**
```css
.cb-pop {
  display: inline-flex; align-items: center;
  gap: 10px; cursor: pointer; user-select: none;
}
.cb-pop__input { display: none; }
.cb-pop__box {
  width: 24px; height: 24px; border-radius: 50%;
  border: 2px solid rgba(245,168,74,.4);
  display: flex; align-items: center;
  justify-content: center;
  transition: border-color .25s;
}
.cb-pop__dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: #f5a84a;
  transform: scale(0);
  transition: transform .4s
    cubic-bezier(.34,1.56,.64,1);
}
.cb-pop__input:checked + .cb-pop__box {
  border-color: #f5a84a;
}
.cb-pop__input:checked
  + .cb-pop__box .cb-pop__dot {
  transform: scale(1);
}
```

### 05. Glassmorphism Checkbox

**Type:** Pure CSS
**Description:** Frosted glass via backdrop-filter. Checked state fills with a translucent gradient.

**HTML:**
```html
<label class="cb-glass">
  <input class="cb-glass__input" type="checkbox" checked />
  <span class="cb-glass__box">
    <svg width="12" height="9" viewBox="0 0 14 11" fill="none">
      <polyline
        points="1,5.5 5,9.5 13,1"
        stroke="white"
        stroke-width="2.2"
        stroke-linecap="round"
        stroke-linejoin="round"
      />
    </svg>
  </span>
  <span>Glassmorphism checkbox</span>
</label>
```

**CSS:**
```css
.cb-glass {
  display: inline-flex; align-items: center;
  gap: 10px; cursor: pointer; user-select: none;
}
.cb-glass__input { display: none; }
.cb-glass__box {
  width: 24px; height: 24px; border-radius: 8px;
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.2);
  display: flex; align-items: center;
  justify-content: center; color: transparent;
  transition: background .3s, border-color .3s,
              box-shadow .3s, color .3s;
}
.cb-glass__input:checked + .cb-glass__box {
  background: rgba(124,108,255,.4);
  border-color: rgba(124,108,255,.6);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2);
}
```

### 06. Neumorphic Checkbox

**Type:** Pure CSS
**Description:** Dual box-shadows create extrusion. Checked state inverts to a pressed inset.

**HTML:**
```html
<!-- Requires a light background on the parent -->
<label class="cb-neu">
  <input class="cb-neu__input" type="checkbox" checked />
  <span class="cb-neu__box">
    <svg width="12" height="9" viewBox="0 0 14 11" fill="none">
      <polyline
        points="1,5.5 5,9.5 13,1"
        stroke="#7c6cff"
        stroke-width="2.2"
        stroke-linecap="round"
        stroke-linejoin="round"
      />
    </svg>
  </span>
  <span>Neumorphic checkbox</span>
</label>
```

**CSS:**
```css
/* Card background must match: #e0e0e8 */
.cb-neu {
  display: inline-flex; align-items: center;
  gap: 10px; cursor: pointer; user-select: none;
}
.cb-neu__input { display: none; }
.cb-neu__box {
  width: 26px; height: 26px; border-radius: 8px;
  background: #e0e0e8; color: transparent;
  display: flex; align-items: center;
  justify-content: center;
  box-shadow:
     3px  3px 6px rgba(0,0,0,.18),
    -3px -3px 6px rgba(255,255,255,.7);
  transition: box-shadow .3s, color .3s;
}
.cb-neu__input:checked + .cb-neu__box {
  color: #7c6cff;
  box-shadow:
    inset 2px 2px 5px rgba(0,0,0,.15),
    inset -2px -2px 5px rgba(255,255,255,.6);
}
```

### 07. Liquid Fill Checkbox

**Type:** Pure CSS
**Description:** A flood fill rises from the bottom using scaleY then reveals a white checkmark.

**HTML:**
```html
<label class="cb-liquid">
  <input class="cb-liquid__input" type="checkbox" checked />
  <span class="cb-liquid__box">
    <span class="cb-liquid__fill"></span>
    <svg
      width="12"
      height="9"
      viewBox="0 0 14 11"
      fill="none"
      style="position: relative; z-index: 1"
    >
      <polyline
        points="1,5.5 5,9.5 13,1"
        stroke="white"
        stroke-width="2.2"
        stroke-linecap="round"
        stroke-linejoin="round"
      />
    </svg>
  </span>
  <span>Liquid fill checkbox</span>
</label>
```

**CSS:**
```css
.cb-liquid {
  display: inline-flex; align-items: center;
  gap: 10px; cursor: pointer; user-select: none;
}
.cb-liquid__input { display: none; }
.cb-liquid__box {
  width: 24px; height: 24px; border-radius: 7px;
  border: 2px solid rgba(61,232,245,.4);
  position: relative; overflow: hidden;
  display: flex; align-items: center;
  justify-content: center; color: transparent;
  transition: border-color .3s, color .3s;
}
.cb-liquid__fill {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    #3de8f5, #06b6d4);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform .35s
    cubic-bezier(.23,1,.32,1);
}
.cb-liquid__input:checked + .cb-liquid__box {
  border-color: #3de8f5; color: #fff;
}
.cb-liquid__input:checked
  + .cb-liquid__box .cb-liquid__fill {
  transform: scaleY(1);
}
```

### 08. Rotating Ring Checkbox

**Type:** Pure CSS
**Description:** A conic-gradient ring spins in on check. The inner dot scales up simultaneously.

**HTML:**
```html
<label class="cb-ring">
  <input class="cb-ring__input" type="checkbox" checked />
  <span class="cb-ring__box">
    <span class="cb-ring__halo"></span>
    <span class="cb-ring__dot"></span>
  </span>
  <span>Rotating ring checkbox</span>
</label>
```

**CSS:**
```css
.cb-ring {
  display: inline-flex; align-items: center;
  gap: 10px; cursor: pointer; user-select: none;
}
.cb-ring__input { display: none; }
.cb-ring__box {
  width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.1);
  position: relative;
  display: flex; align-items: center;
  justify-content: center;
}
.cb-ring__halo {
  position: absolute; inset: -2px;
  border-radius: 50%;
  background: conic-gradient(
    #7c6cff 0%, #ff6c8a 50%, transparent 50%);
  opacity: 0;
  transition: opacity .3s;
}
.cb-ring__dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: linear-gradient(135deg,#7c6cff,#ff6c8a);
  transform: scale(0);
  transition: transform .35s
    cubic-bezier(.34,1.56,.64,1) .1s;
}
.cb-ring__input:checked
  + .cb-ring__box .cb-ring__halo {
  opacity: 1;
  animation: ring-spin .5s
    cubic-bezier(.23,1,.32,1) forwards;
}
.cb-ring__input:checked
  + .cb-ring__box .cb-ring__dot {
  transform: scale(1);
}
@keyframes ring-spin {
  from { transform: rotate(-90deg); opacity: 0; }
  to   { transform: rotate(0deg);   opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .cb-ring,
  .cb-ring * {
    animation: none !important;
  }
}

```

### 09. Brutalist Checkbox

**Type:** Pure CSS
**Description:** Hard offset shadow gives physical depth. Checking shifts the box like pressing a button.

**HTML:**
```html
<!-- Requires a light background on the parent -->
<label class="cb-brute">
  <input class="cb-brute__input" type="checkbox" checked />
  <span class="cb-brute__box" aria-hidden="true">&#10003;</span>
  <span>Brutalist checkbox</span>
</label>
```

**CSS:**
```css
/* Card background must be light, e.g. #f0ede5 */
.cb-brute {
  display: inline-flex; align-items: center;
  gap: 10px; cursor: pointer; user-select: none;
}
.cb-brute__input { display: none; }
.cb-brute__box {
  width: 24px; height: 24px;
  border: 2.5px solid #1a1a1a;
  box-shadow: 3px 3px 0 #1a1a1a;
  background: #fff;
  display: flex; align-items: center;
  justify-content: center;
  font-size: 14px; color: transparent;
  cursor: pointer;
  transition:
    transform .12s, box-shadow .12s,
    background .12s, color .12s;
}
.cb-brute__input:checked + .cb-brute__box {
  background: #1a1a1a; color: #fff;
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 #1a1a1a;
}
```

### 10. Gradient Sweep Checkbox

**Type:** Pure CSS
**Description:** A rainbow gradient sweeps across the box using background-position animation on check.

**HTML:**
```html
<label class="cb-sweep">
  <input class="cb-sweep__input" type="checkbox" checked />
  <span class="cb-sweep__box">
    <svg width="12" height="9" viewBox="0 0 14 11" fill="none">
      <polyline
        points="1,5.5 5,9.5 13,1"
        stroke="white"
        stroke-width="2.2"
        stroke-linecap="round"
        stroke-linejoin="round"
      />
    </svg>
  </span>
  <span>Gradient sweep checkbox</span>
</label>
```

**CSS:**
```css
.cb-sweep {
  display: inline-flex; align-items: center;
  gap: 10px; cursor: pointer; user-select: none;
}
.cb-sweep__input { display: none; }
.cb-sweep__box {
  width: 24px; height: 24px; border-radius: 7px;
  border: 2px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.06);
  display: flex; align-items: center;
  justify-content: center; color: transparent;
  transition: border-color .4s, color .4s;
}
.cb-sweep__input:checked + .cb-sweep__box {
  border-color: transparent; color: #fff;
  background: linear-gradient(90deg,
    #7c6cff, #ff6c8a, #3de8f5, #7c6cff);
  background-size: 200% 100%;
  animation: grad-sweep .6s ease forwards;
}
@keyframes grad-sweep {
  from { background-position: 100% 0; }
  to   { background-position: 0% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .cb-sweep,
  .cb-sweep * {
    animation: none !important;
  }
}

```

### 11. 3D Flip Checkbox

**Type:** Pure CSS
**Description:** The box rotates on the Y axis using rotateY to reveal a checked face.

**HTML:**
```html
<label class="cb-flip">
  <input class="cb-flip__input" type="checkbox" checked />
  <span class="cb-flip__box">
    <span class="cb-flip__face">&#10003;</span>
  </span>
  <span>3D flip checkbox</span>
</label>
```

**CSS:**
```css
.cb-flip {
  display: inline-flex; align-items: center;
  gap: 10px; cursor: pointer; user-select: none;
}
.cb-flip__input { display: none; }
.cb-flip__box {
  width: 26px; height: 26px; border-radius: 7px;
  border: 2px solid rgba(124,108,255,.3);
  perspective: 80px;
  position: relative;
}
.cb-flip__face {
  position: absolute; inset: 0; border-radius: 5px;
  background: #7c6cff;
  display: flex; align-items: center;
  justify-content: center;
  color: #fff; font-size: 14px;
  transform: rotateY(90deg);
  transform-origin: center;
  transition: transform .4s cubic-bezier(.23,1,.32,1);
}
.cb-flip__input:checked
  + .cb-flip__box .cb-flip__face {
  transform: rotateY(0deg);
}
```

### 12. Ripple Wave Checkbox

**Type:** Pure CSS
**Description:** A ring expands outward from the checkbox on check using a scale + fade keyframe.

**HTML:**
```html
<label class="cb-ripple">
  <input class="cb-ripple__input" type="checkbox" checked />
  <span class="cb-ripple__box">
    <span class="cb-ripple__wave"></span>
    <svg width="12" height="9" viewBox="0 0 14 11" fill="none">
      <polyline
        points="1,5.5 5,9.5 13,1"
        stroke="white"
        stroke-width="2.2"
        stroke-linecap="round"
        stroke-linejoin="round"
      />
    </svg>
  </span>
  <span>Ripple wave checkbox</span>
</label>
```

**CSS:**
```css
.cb-ripple {
  display: inline-flex; align-items: center;
  gap: 10px; cursor: pointer; user-select: none;
}
.cb-ripple__input { display: none; }
.cb-ripple__box {
  width: 24px; height: 24px; border-radius: 7px;
  border: 2px solid rgba(255,108,138,.4);
  position: relative; overflow: visible;
  display: flex; align-items: center;
  justify-content: center; color: transparent;
  transition: background .25s, border-color .25s,
              color .25s;
}
.cb-ripple__wave {
  position: absolute; inset: -4px;
  border-radius: 11px;
  border: 2px solid #ff6c8a;
  opacity: 0;
}
.cb-ripple__input:checked + .cb-ripple__box {
  background: #ff6c8a; border-color: #ff6c8a;
  color: #fff;
}
.cb-ripple__input:checked
  + .cb-ripple__box .cb-ripple__wave {
  animation: ripple-out .5s ease-out forwards;
}
@keyframes ripple-out {
  0%   { transform: scale(1);   opacity: .8; }
  100% { transform: scale(1.6); opacity: 0;  }
}

@media (prefers-reduced-motion: reduce) {
  .cb-ripple,
  .cb-ripple * {
    animation: none !important;
  }
}

```

### 13. Retro Pixel Checkbox

**Type:** Pure CSS
**Description:** An 8-bit checkmark built from SVG rects with crispEdges. Scales in with a pop on check.

**HTML:**
```html
<label class="cb-pixel">
  <input class="cb-pixel__input" type="checkbox" checked />
  <span class="cb-pixel__box">
    <svg class="cb-pixel__svg" viewBox="0 0 10 8" shape-rendering="crispEdges" fill="#1ed98a">
      <rect x="0" y="4" width="2" height="2" />
      <rect x="2" y="6" width="2" height="2" />
      <rect x="4" y="4" width="2" height="2" />
      <rect x="6" y="2" width="2" height="2" />
      <rect x="8" y="0" width="2" height="2" />
    </svg>
  </span>
  <span>Retro pixel checkbox</span>
</label>
```

**CSS:**
```css
.cb-pixel {
  display: inline-flex; align-items: center;
  gap: 10px; cursor: pointer; user-select: none;
}
.cb-pixel__input { display: none; }
.cb-pixel__box {
  width: 26px; height: 26px;
  border: 3px solid #1ed98a;
  display: flex; align-items: center;
  justify-content: center; overflow: hidden;
  transition: background .25s;
}
.cb-pixel__svg {
  width: 14px; height: 11px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  opacity: 0; transform: scale(.5);
  transition: opacity .2s,
    transform .3s cubic-bezier(.34,1.56,.64,1);
}
.cb-pixel__input:checked + .cb-pixel__box {
  background: rgba(30,217,138,.15);
}
.cb-pixel__input:checked
  + .cb-pixel__box .cb-pixel__svg {
  opacity: 1; transform: scale(1);
}
```

### 14. Strikethrough Checkbox

**Type:** Pure CSS
**Description:** Checking the box strikes through the label text with a sliding underline.

**HTML:**
```html
<label class="cb-strike">
  <input class="cb-strike__input" type="checkbox" checked />
  <span class="cb-strike__box">
    <svg width="12" height="9" viewBox="0 0 14 11" fill="none">
      <polyline
        points="1,5.5 5,9.5 13,1"
        stroke="white"
        stroke-width="2.2"
        stroke-linecap="round"
        stroke-linejoin="round"
      />
    </svg>
  </span>
  <span class="cb-strike__text">Strikethrough label</span>
</label>
```

**CSS:**
```css
.cb-strike {
  display: inline-flex; align-items: center;
  gap: 10px; cursor: pointer; user-select: none;
}
.cb-strike__input { display: none; }
.cb-strike__box {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.05);
  display: flex; align-items: center;
  justify-content: center; flex-shrink: 0;
  color: transparent; overflow: hidden;
  transition: background .25s, border-color .25s,
              color .25s;
}
.cb-strike__box svg {
  transform: scale(0);
  transition: transform .3s cubic-bezier(.34,1.56,.64,1);
}
.cb-strike__text {
  position: relative; transition: color .3s;
  font-size: 14px;
}
.cb-strike__text::after {
  content: ""; position: absolute;
  left: 0; top: 50%; width: 0; height: 1.5px;
  background: #7c6cff;
  transition: width .35s cubic-bezier(.23,1,.32,1);
}
.cb-strike__input:checked + .cb-strike__box {
  background: #7c6cff; border-color: #7c6cff;
  color: #fff;
}
.cb-strike__input:checked + .cb-strike__box svg {
  transform: scale(1);
}
.cb-strike__input:checked ~ .cb-strike__text {
  color: rgba(255, 255, 255, 0.55);
}
.cb-strike__input:checked ~ .cb-strike__text::after {
  width: 100%;
}
```

### 15. Gooey Blob Checkbox

**Type:** Pure CSS
**Description:** A morphing blob shape squishes into view with spring easing when checked.

**HTML:**
```html
<label class="cb-blob">
  <input class="cb-blob__input" type="checkbox" checked />
  <span class="cb-blob__box">
    <span class="cb-blob__shape"></span>
  </span>
  <span>Gooey blob checkbox</span>
</label>
```

**CSS:**
```css
.cb-blob {
  display: inline-flex; align-items: center;
  gap: 10px; cursor: pointer; user-select: none;
}
.cb-blob__input { display: none; }
.cb-blob__box {
  width: 28px; height: 28px; border-radius: 8px;
  border: 2px solid rgba(124,108,255,.3);
  display: flex; align-items: center;
  justify-content: center; overflow: hidden;
}
.cb-blob__shape {
  width: 18px; height: 18px;
  background: linear-gradient(135deg, #7c6cff, #ff6c8a);
  border-radius: 0;
  transform: scale(0) rotate(45deg);
  transition: transform .45s cubic-bezier(.34,1.56,.64,1),
              border-radius .45s ease;
}
.cb-blob__input:checked
  + .cb-blob__box .cb-blob__shape {
  transform: scale(1) rotate(0deg);
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
}
```

### 16. Dark Mode Toggle

**Type:** Pure CSS
**Description:** Moon-to-sun emoji toggle that shifts between a dark and a warm golden background.

**HTML:**
```html
<label class="cb-darkmode">
  <input class="cb-darkmode__input" type="checkbox" />
  <span class="cb-darkmode__track">
    <span class="cb-darkmode__thumb">
      <span class="cb-darkmode__icon"></span>
    </span>
  </span>
  <span>Toggle theme</span>
</label>
```

**CSS:**
```css
.cb-darkmode {
  display: inline-flex; align-items: center;
  gap: 10px; cursor: pointer; user-select: none;
}
.cb-darkmode__input { display: none; }
.cb-darkmode__track {
  width: 52px; height: 28px; border-radius: 14px;
  background: #1a1a2e;
  border: 1px solid rgba(255,255,255,.1);
  position: relative; transition: background .4s;
}
.cb-darkmode__thumb {
  position: absolute; top: 4px; left: 4px;
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff; font-size: 11px;
  display: flex; align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
  transition: transform .4s cubic-bezier(.23,1,.32,1);
}
.cb-darkmode__icon::before { content: "\1F319"; }
.cb-darkmode__input:checked + .cb-darkmode__track {
  background: linear-gradient(135deg, #f5a84a, #ffd700);
}
.cb-darkmode__input:checked
  + .cb-darkmode__track .cb-darkmode__thumb {
  transform: translateX(24px);
}
.cb-darkmode__input:checked
  + .cb-darkmode__track .cb-darkmode__icon::before {
  content: "\2600\FE0F";
}
```

### 17. Pulse Ring Checkbox

**Type:** Pure CSS
**Description:** A ring pulses outward from the box on check, like a sonar ping.

**HTML:**
```html
<label class="cb-pulse">
  <input class="cb-pulse__input" type="checkbox" checked />
  <span class="cb-pulse__box">
    <svg width="12" height="9" viewBox="0 0 14 11" fill="none">
      <polyline
        points="1,5.5 5,9.5 13,1"
        stroke="white"
        stroke-width="2.2"
        stroke-linecap="round"
        stroke-linejoin="round"
      />
    </svg>
  </span>
  <span>Pulse ring checkbox</span>
</label>
```

**CSS:**
```css
.cb-pulse {
  display: inline-flex; align-items: center;
  gap: 10px; cursor: pointer; user-select: none;
}
.cb-pulse__input { display: none; }
.cb-pulse__box {
  width: 24px; height: 24px; border-radius: 7px;
  border: 2px solid rgba(61,232,245,.3);
  position: relative; overflow: visible;
  display: flex; align-items: center;
  justify-content: center; color: transparent;
  transition: background .25s, border-color .25s,
              color .25s;
}
.cb-pulse__box::after {
  content: ""; position: absolute; inset: -6px;
  border-radius: 13px;
  border: 2px solid #3de8f5; opacity: 0;
}
.cb-pulse__input:checked + .cb-pulse__box {
  background: linear-gradient(135deg, #3de8f5, #06b6d4);
  border-color: #3de8f5; color: #fff;
}
.cb-pulse__input:checked + .cb-pulse__box::after {
  animation: pulse-ring .6s ease-out forwards;
}
@keyframes pulse-ring {
  0%   { transform: scale(1);   opacity: .8; }
  100% { transform: scale(1.5); opacity: 0;  }
}

@media (prefers-reduced-motion: reduce) {
  .cb-pulse,
  .cb-pulse * {
    animation: none !important;
  }
}

```

### 18. Dash to Check

**Type:** Pure CSS
**Description:** An indeterminate dash morphs into a checkmark using border rotation on check.

**HTML:**
```html
<label class="cb-dash">
  <input class="cb-dash__input" type="checkbox" checked />
  <span class="cb-dash__box">
    <span class="cb-dash__mark"></span>
  </span>
  <span>Dash to check</span>
</label>
```

**CSS:**
```css
.cb-dash {
  display: inline-flex; align-items: center;
  gap: 10px; cursor: pointer; user-select: none;
}
.cb-dash__input { display: none; }
.cb-dash__box {
  width: 24px; height: 24px; border-radius: 7px;
  border: 2px solid rgba(124,108,255,.4);
  background: rgba(124,108,255,.08);
  display: flex; align-items: center;
  justify-content: center;
  transition: border-color .3s, background .3s;
}
.cb-dash__mark {
  width: 10px; height: 2px;
  background: #7c6cff; border-radius: 2px;
  transition: all .35s cubic-bezier(.23,1,.32,1);
}
.cb-dash__input:checked + .cb-dash__box {
  border-color: #7c6cff;
  background: rgba(124,108,255,.18);
}
.cb-dash__input:checked
  + .cb-dash__box .cb-dash__mark {
  width: 12px; height: 12px;
  background: transparent;
  border-right: 2.5px solid #7c6cff;
  border-bottom: 2.5px solid #7c6cff;
  border-radius: 0;
  transform: rotate(45deg) translate(-2px,-3px);
}
```

### 19. Multi-State Checkbox

**Type:** CSS + JS
**Description:** Three visual states — unchecked, partial (amber), and checked (green) — cycled by JS.

**HTML:**
```html
<button class="cb-multi" data-state="0" aria-pressed="false">
  <span class="cb-multi__box">
    <svg class="cb-multi__tick" width="12" height="9" viewBox="0 0 14 11" fill="none">
      <polyline
        points="1,5.5 5,9.5 13,1"
        stroke="white"
        stroke-width="2.2"
        stroke-linecap="round"
        stroke-linejoin="round"
      />
    </svg>
  </span>
  <span class="cb-multi__label">Click to cycle</span>
</button>
```

**CSS:**
```css
.cb-multi {
  display: inline-flex; align-items: center;
  gap: 10px; cursor: pointer; user-select: none;
  background: none; border: none; color: #f0eeff;
  font-size: 14px; padding: 0;
}
.cb-multi__box {
  width: 24px; height: 24px; border-radius: 7px;
  border: 2px solid rgba(255,255,255,.2);
  display: flex; align-items: center;
  justify-content: center; color: transparent;
  transition: all .25s cubic-bezier(.23,1,.32,1);
}
.cb-multi__tick {
  transform: scale(0);
  transition: transform .3s cubic-bezier(.34,1.56,.64,1);
}
.cb-multi[data-state="1"] .cb-multi__box {
  background: #f5a84a; border-color: #f5a84a;
  color: #fff;
}
.cb-multi[data-state="1"] .cb-multi__tick {
  transform: scale(.55);
}
.cb-multi[data-state="2"] .cb-multi__box {
  background: #1ed98a; border-color: #1ed98a;
  color: #fff;
  box-shadow: 0 0 14px rgba(30,217,138,.4);
}
.cb-multi[data-state="2"] .cb-multi__tick {
  transform: scale(1);
}
```

**JS:**
```js
document.querySelectorAll('.cb-multi').forEach(function(btn) {
  btn.addEventListener('click', function() {
    var s = (parseInt(btn.dataset.state || '0') + 1) % 3;
    btn.dataset.state = s;
    var labels = ['Click to cycle', 'Partial', 'Checked'];
    btn.querySelector('.cb-multi__label').textContent = labels[s];
  });
});
```

### 20. Magnetic Checkbox

**Type:** CSS + JS
**Description:** The checkbox box subtly shifts toward the cursor on hover using JS-driven translate.

**HTML:**
```html
<label class="cb-magnet">
  <input class="cb-magnet__input" type="checkbox" checked />
  <span class="cb-magnet__box">
    <svg width="12" height="9" viewBox="0 0 14 11" fill="none">
      <polyline
        points="1,5.5 5,9.5 13,1"
        stroke="white"
        stroke-width="2.2"
        stroke-linecap="round"
        stroke-linejoin="round"
      />
    </svg>
  </span>
  <span>Magnetic checkbox</span>
</label>
```

**CSS:**
```css
.cb-magnet {
  display: inline-flex; align-items: center;
  gap: 10px; cursor: pointer; user-select: none;
}
.cb-magnet__input { display: none; }
.cb-magnet__box {
  width: 26px; height: 26px; border-radius: 8px;
  border: 2px solid rgba(124,108,255,.4);
  display: flex; align-items: center;
  justify-content: center; color: transparent;
  transition: background .25s, border-color .25s,
              color .25s;
  will-change: transform;
}
.cb-magnet__input:checked + .cb-magnet__box {
  background: #7c6cff; border-color: #7c6cff;
  color: #fff;
}
```

**JS:**
```js
document.querySelectorAll('.cb-magnet__box').forEach(function(box) {
  box.addEventListener('mousemove', function(e) {
    var r = box.getBoundingClientRect();
    var x = (e.clientX - r.left - r.width  / 2) * 0.3;
    var y = (e.clientY - r.top  - r.height / 2) * 0.3;
    box.style.transform = 'translate(' + x + 'px,' + y + 'px)';
  });
  box.addEventListener('mouseleave', function() {
    box.style.transform = '';
  });
});
```

### 21. Confetti Burst Checkbox

**Type:** CSS + JS
**Description:** Coloured dots explode outward from the checkbox the moment it is checked.

**HTML:**
```html
<label class="cb-confetti">
  <input class="cb-confetti__input" type="checkbox" />
  <span class="cb-confetti__box">
    <svg width="12" height="9" viewBox="0 0 14 11" fill="none">
      <polyline
        points="1,5.5 5,9.5 13,1"
        stroke="white"
        stroke-width="2.2"
        stroke-linecap="round"
        stroke-linejoin="round"
      />
    </svg>
  </span>
  <span>Click to confetti!</span>
</label>
```

**CSS:**
```css
.cb-confetti {
  display: inline-flex; align-items: center;
  gap: 10px; cursor: pointer; user-select: none;
  position: relative;
}
.cb-confetti__input { display: none; }
.cb-confetti__box {
  width: 24px; height: 24px; border-radius: 7px;
  border: 2px solid rgba(255,108,138,.4);
  display: flex; align-items: center;
  justify-content: center; color: transparent;
  transition: background .25s, border-color .25s,
              color .25s;
}
.cb-confetti__input:checked + .cb-confetti__box {
  background: #ff6c8a; border-color: #ff6c8a;
  color: #fff;
}
.cb-dot {
  position: absolute; width: 5px; height: 5px;
  border-radius: 50%; pointer-events: none;
  animation: cb-confetti-burst .55s ease-out forwards;
}
@keyframes cb-confetti-burst {
  0%   { transform: translate(0,0) scale(1); opacity: 1; }
  100% { transform: translate(var(--tx),var(--ty)) scale(0); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .cb-confetti,
  .cb-confetti * {
    animation: none !important;
  }
}

```

**JS:**
```js
document.querySelectorAll('.cb-confetti__input').forEach(function(inp) {
  inp.addEventListener('change', function() {
    if (!inp.checked) return;
    var box = inp.nextElementSibling;
    var colors = ['#7c6cff','#ff6c8a','#1ed98a','#f5a84a','#3de8f5'];
    for (var i = 0; i < 8; i++) {
      var dot = document.createElement('span');
      dot.className = 'cb-dot';
      var angle = (i / 8) * 2 * Math.PI;
      var dist = 22 + Math.random() * 14;
      dot.style.cssText =
        'background:' + colors[i % colors.length] + ';' +
        'left:8px;top:8px;' +
        '--tx:' + Math.cos(angle) * dist + 'px;' +
        '--ty:' + Math.sin(angle) * dist + 'px;';
      inp.closest('.cb-confetti').appendChild(dot);
      setTimeout(function(d) { d.remove(); }, 600, dot);
    }
  });
});
```

### 22. Slide-In Label

**Type:** Pure CSS
**Description:** A confirmation label slides in from the left when the checkbox is checked.

**HTML:**
```html
<label class="cb-slidein">
  <input class="cb-slidein__input" type="checkbox" checked />
  <span class="cb-slidein__box">
    <svg width="12" height="9" viewBox="0 0 14 11" fill="none">
      <polyline
        points="1,5.5 5,9.5 13,1"
        stroke="white"
        stroke-width="2.2"
        stroke-linecap="round"
        stroke-linejoin="round"
      />
    </svg>
  </span>
  <span class="cb-slidein__text">Done!</span>
</label>
```

**CSS:**
```css
.cb-slidein {
  display: inline-flex; align-items: center;
  gap: 10px; cursor: pointer; user-select: none;
}
.cb-slidein__input { display: none; }
.cb-slidein__box {
  width: 24px; height: 24px; border-radius: 7px;
  border: 2px solid rgba(30,217,138,.3);
  display: flex; align-items: center;
  justify-content: center; flex-shrink: 0;
  color: transparent;
  transition: background .25s, border-color .25s,
              color .25s;
}
.cb-slidein__text {
  font-size: 14px; color: #1ed98a;
  max-width: 0; overflow: hidden;
  white-space: nowrap; opacity: 0;
  transition: max-width .4s cubic-bezier(.23,1,.32,1),
              opacity .4s ease;
}
.cb-slidein__input:checked + .cb-slidein__box {
  background: #1ed98a; border-color: #1ed98a;
  color: #fff;
}
.cb-slidein__input:checked ~ .cb-slidein__text {
  max-width: 200px; opacity: 1;
}
```

### 23. Aurora Toggle

**Type:** Pure CSS
**Description:** A toggle whose track fills with a shifting aurora gradient when active.

**HTML:**
```html
<label class="cb-aurora">
  <input class="cb-aurora__input" type="checkbox" checked />
  <span class="cb-aurora__track">
    <span class="cb-aurora__thumb"></span>
  </span>
  <span>Aurora toggle</span>
</label>
```

**CSS:**
```css
.cb-aurora {
  display: inline-flex; align-items: center;
  gap: 10px; cursor: pointer; user-select: none;
}
.cb-aurora__input { display: none; }
.cb-aurora__track {
  width: 56px; height: 28px; border-radius: 14px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  position: relative;
  transition: background .4s, border-color .4s;
}
.cb-aurora__thumb {
  position: absolute; top: 4px; left: 4px;
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
  transition: transform .4s cubic-bezier(.23,1,.32,1);
}
.cb-aurora__input:checked + .cb-aurora__track {
  background: linear-gradient(90deg,
    #7c6cff, #ff6c8a, #3de8f5, #1ed98a, #7c6cff);
  background-size: 300% 100%;
  border-color: transparent;
  animation: aurora-shift 3s linear infinite;
}
.cb-aurora__input:checked
  + .cb-aurora__track .cb-aurora__thumb {
  transform: translateX(28px);
}
@keyframes aurora-shift {
  0%   { background-position: 0%   50%; }
  100% { background-position: 100% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .cb-aurora,
  .cb-aurora * {
    animation: none !important;
  }
}

```

---
## 21 CSS Circular & Radial Menu Designs

URL: https://codefronts.com/navigation/css-circular-menus/
Description: 21 free CSS circular and radial menu designs — pie, dome, orbital and skeumorphic layouts with copy-paste HTML and CSS.
Demo count: 21

### 01. Mission Hub

**Type:** Pure CSS
**Description:** A 5-segment half-wheel command surface with curved SVG labels riding the outer rim, hairline wedge dividers, and a context-aware sub-toolbar that swaps icons based on the selected wedge. Pure CSS via :checked + :has(), teal-on-navy cockpit palette.

**HTML:**
```html
<div class="ccm-sun" role="toolbar" aria-label="Mission Hub">
  <input type="radio" name="ccm-sun" id="ccm-sun-0" class="ccm-sun-r" hidden />
  <input type="radio" name="ccm-sun" id="ccm-sun-1" class="ccm-sun-r" hidden />
  <input type="radio" name="ccm-sun" id="ccm-sun-2" class="ccm-sun-r" hidden checked />
  <input type="radio" name="ccm-sun" id="ccm-sun-3" class="ccm-sun-r" hidden />
  <input type="radio" name="ccm-sun" id="ccm-sun-4" class="ccm-sun-r" hidden />
  <div class="ccm-sun-wheel" aria-hidden="true"></div>
  <svg class="ccm-sun-rim" viewBox="0 0 240 130" aria-hidden="true">
    <defs>
      <path id="ccm-sun-arc-path" d="M 30 130 A 90 90 0 0 1 210 130" fill="none" />
    </defs>
    <g class="ccm-sun-dividers">
      <line x1="91.7" y1="109.4" x2="56.9" y2="84.1" />
      <line x1="109.2" y1="96.7" x2="95.9" y2="55.8" />
      <line x1="130.8" y1="96.7" x2="144.1" y2="55.8" />
      <line x1="148.3" y1="109.4" x2="183.1" y2="84.1" />
    </g>
    <text class="ccm-sun-curve">
      <textPath href="#ccm-sun-arc-path" startOffset="10%" text-anchor="middle">MUSIC</textPath>
      <textPath href="#ccm-sun-arc-path" startOffset="30%" text-anchor="middle">MAPS</textPath>
      <textPath href="#ccm-sun-arc-path" startOffset="50%" text-anchor="middle">COMPASS</textPath>
      <textPath href="#ccm-sun-arc-path" startOffset="70%" text-anchor="middle">CAMERA</textPath>
      <textPath href="#ccm-sun-arc-path" startOffset="90%" text-anchor="middle">SETTINGS</textPath>
    </text>
  </svg>
  <div class="ccm-sun-pivot" aria-hidden="true"></div>
  <label for="ccm-sun-0" class="ccm-sun-arc" style="--i: 0" aria-label="Music"
    ><span class="ccm-sun-ico">♪</span></label
  >
  <label for="ccm-sun-1" class="ccm-sun-arc" style="--i: 1" aria-label="Maps"
    ><span class="ccm-sun-ico">◈</span></label
  >
  <label for="ccm-sun-2" class="ccm-sun-arc" style="--i: 2" aria-label="Compass"
    ><span class="ccm-sun-ico">⌖</span></label
  >
  <label for="ccm-sun-3" class="ccm-sun-arc" style="--i: 3" aria-label="Camera"
    ><span class="ccm-sun-ico">◉</span></label
  >
  <label for="ccm-sun-4" class="ccm-sun-arc" style="--i: 4" aria-label="Settings"
    ><span class="ccm-sun-ico">⚙</span></label
  >
  <div class="ccm-sun-bar ccm-sun-bar-0" role="toolbar" aria-label="Music actions">
    <a href="#" class="ccm-sun-sub" aria-label="Play">▶</a>
    <a href="#" class="ccm-sun-sub" aria-label="Pause">❚❚</a>
    <a href="#" class="ccm-sun-sub" aria-label="Skip">⏭</a>
  </div>
  <div class="ccm-sun-bar ccm-sun-bar-1" role="toolbar" aria-label="Maps actions">
    <a href="#" class="ccm-sun-sub" aria-label="Search">⌕</a>
    <a href="#" class="ccm-sun-sub" aria-label="Pin">◉</a>
    <a href="#" class="ccm-sun-sub" aria-label="Route">➤</a>
  </div>
  <div class="ccm-sun-bar ccm-sun-bar-2" role="toolbar" aria-label="Compass actions">
    <a href="#" class="ccm-sun-sub" aria-label="Calibrate">⊙</a>
    <a href="#" class="ccm-sun-sub" aria-label="North">▲</a>
    <a href="#" class="ccm-sun-sub" aria-label="Lock">⏻</a>
  </div>
  <div class="ccm-sun-bar ccm-sun-bar-3" role="toolbar" aria-label="Camera actions">
    <a href="#" class="ccm-sun-sub" aria-label="Shutter">●</a>
    <a href="#" class="ccm-sun-sub" aria-label="Flash">⚡</a>
    <a href="#" class="ccm-sun-sub" aria-label="Flip">⤾</a>
  </div>
  <div class="ccm-sun-bar ccm-sun-bar-4" role="toolbar" aria-label="Settings actions">
    <a href="#" class="ccm-sun-sub" aria-label="Profile">☺</a>
    <a href="#" class="ccm-sun-sub" aria-label="Theme">◐</a>
    <a href="#" class="ccm-sun-sub" aria-label="Help">?</a>
  </div>
</div>
```

**CSS:**
```css
.ccm-sun {
  --n: 5;
  --ba: calc(180deg / var(--n));
  --r: 110px;
  position: relative;
  width: 240px;
  height: 130px;
  overflow: visible;
  font-family: system-ui, sans-serif;
}

.ccm-sun-wheel {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: calc(var(--r) * 2);
  height: var(--r);
  margin-left: calc(var(--r) * -1);
  border-radius: var(--r) var(--r) 0 0;
  background: radial-gradient(
    farthest-side at 50% 100%,
    #14b8a6 35%,
    #1e293b 36%,
    #1e293b calc(100% - 1px),
    transparent 100%
  );
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.4));
}

.ccm-sun-rim {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 240px;
  height: 130px;
  margin-left: -120px;
  pointer-events: none;
  z-index: 1;
}

.ccm-sun-dividers line {
  stroke: rgba(94, 234, 212, 0.25);
  stroke-width: 1;
}

.ccm-sun-curve {
  font:
    700 9px/1 ui-monospace,
    monospace;
  letter-spacing: 0.18em;
  fill: #cbd5e1;
}

.ccm-sun-pivot {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 70px;
  height: 35px;
  margin-left: -35px;
  border-radius: 35px 35px 0 0;
  background: radial-gradient(farthest-side at 50% 100%, #5eead4 0%, #14b8a6 70%, #0f766e 100%);
  box-shadow: 0 -2px 8px rgba(94, 234, 212, 0.35);
  z-index: 3;
}

.ccm-sun-arc {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 50px;
  height: var(--r);
  margin-left: -25px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 28px;
  cursor: pointer;
  transform-origin: 50% 100%;
  transform: rotate(calc((var(--i) + 0.5) * var(--ba) - 90deg));
  transition: color 0.25s;
  color: #94a3b8;
  z-index: 2;
}

.ccm-sun-ico {
  display: inline-block;
  font-size: 22px;
  line-height: 1;
  transform: rotate(calc((var(--i) + 0.5) * var(--ba) * -1 + 90deg));
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ccm-sun-arc:hover,
.ccm-sun-arc:focus-visible {
  color: #5eead4;
}

.ccm-sun-arc:hover .ccm-sun-ico,
.ccm-sun-arc:focus-visible .ccm-sun-ico {
  transform: rotate(calc((var(--i) + 0.5) * var(--ba) * -1 + 90deg)) translateY(-3px) scale(1.1);
}

.ccm-sun:has(#ccm-sun-0:checked) [for="ccm-sun-0"],
.ccm-sun:has(#ccm-sun-1:checked) [for="ccm-sun-1"],
.ccm-sun:has(#ccm-sun-2:checked) [for="ccm-sun-2"],
.ccm-sun:has(#ccm-sun-3:checked) [for="ccm-sun-3"],
.ccm-sun:has(#ccm-sun-4:checked) [for="ccm-sun-4"] {
  color: #5eead4;
}

.ccm-sun:has(#ccm-sun-0:checked) [for="ccm-sun-0"] .ccm-sun-ico,
.ccm-sun:has(#ccm-sun-1:checked) [for="ccm-sun-1"] .ccm-sun-ico,
.ccm-sun:has(#ccm-sun-2:checked) [for="ccm-sun-2"] .ccm-sun-ico,
.ccm-sun:has(#ccm-sun-3:checked) [for="ccm-sun-3"] .ccm-sun-ico,
.ccm-sun:has(#ccm-sun-4:checked) [for="ccm-sun-4"] .ccm-sun-ico {
  filter: drop-shadow(0 0 6px rgba(94, 234, 212, 0.7));
}

.ccm-sun-bar {
  position: absolute;
  left: 50%;
  bottom: calc(var(--r) + 14px);
  display: flex;
  gap: 6px;
  padding: 8px 10px;
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 12px;
  transform: translateX(-50%) scale(0);
  transform-origin: 50% calc(100% + 10px);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 4;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}

.ccm-sun-bar::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -7px;
  margin-left: -6px;
  border: 6px solid transparent;
  border-top-color: #1e293b;
}

.ccm-sun:has(#ccm-sun-0:checked) .ccm-sun-bar-0,
.ccm-sun:has(#ccm-sun-1:checked) .ccm-sun-bar-1,
.ccm-sun:has(#ccm-sun-2:checked) .ccm-sun-bar-2,
.ccm-sun:has(#ccm-sun-3:checked) .ccm-sun-bar-3,
.ccm-sun:has(#ccm-sun-4:checked) .ccm-sun-bar-4 {
  transform: translateX(-50%) scale(1);
}

.ccm-sun-sub {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(94, 234, 212, 0.12);
  color: #5eead4;
  font:
    700 13px/1 ui-monospace,
    monospace;
  text-decoration: none;
  border: 1px solid rgba(94, 234, 212, 0.3);
  transition:
    background 0.2s,
    color 0.2s,
    transform 0.2s;
}

.ccm-sun-sub:hover,
.ccm-sun-sub:focus-visible {
  background: #5eead4;
  color: #0f172a;
  transform: scale(1.1);
}
```

### 02. Service Orbit

**Type:** Pure CSS
**Description:** Six service satellites orbit a central disc with an animated pointer that snaps to the active selection. Click any satellite to swap the centre title and rotate the pointer with a spring overshoot. Pure CSS via :checked + :has() — adapted from a service-business radial nav, simplified to remove its 600+ lines of icon paths and JS pointer animation.

**HTML:**
```html
<div class="ccm-svc">
  <input type="radio" name="ccm-svc" id="ccm-svc-0" class="ccm-svc-r" hidden checked />
  <input type="radio" name="ccm-svc" id="ccm-svc-1" class="ccm-svc-r" hidden />
  <input type="radio" name="ccm-svc" id="ccm-svc-2" class="ccm-svc-r" hidden />
  <input type="radio" name="ccm-svc" id="ccm-svc-3" class="ccm-svc-r" hidden />
  <input type="radio" name="ccm-svc" id="ccm-svc-4" class="ccm-svc-r" hidden />
  <input type="radio" name="ccm-svc" id="ccm-svc-5" class="ccm-svc-r" hidden />
  <div class="ccm-svc-orbit" aria-hidden="true"></div>
  <div class="ccm-svc-disc">
    <span class="ccm-svc-title ccm-svc-t-0">Industries</span>
    <span class="ccm-svc-title ccm-svc-t-1">Validation</span>
    <span class="ccm-svc-title ccm-svc-t-2">Engineering</span>
    <span class="ccm-svc-title ccm-svc-t-3">Project Mgmt</span>
    <span class="ccm-svc-title ccm-svc-t-4">Manufacturing</span>
    <span class="ccm-svc-title ccm-svc-t-5">Automation</span>
    <span class="ccm-svc-cta">Learn more →</span>
  </div>
  <div class="ccm-svc-pointer" aria-hidden="true"></div>
  <label for="ccm-svc-0" class="ccm-svc-sat" style="--i: 0" aria-label="Industries"
    ><span>♨</span></label
  >
  <label for="ccm-svc-1" class="ccm-svc-sat" style="--i: 1" aria-label="Validation"
    ><span>✓</span></label
  >
  <label for="ccm-svc-2" class="ccm-svc-sat" style="--i: 2" aria-label="Engineering"
    ><span>⚙</span></label
  >
  <label for="ccm-svc-3" class="ccm-svc-sat" style="--i: 3" aria-label="Project Management"
    ><span>◈</span></label
  >
  <label for="ccm-svc-4" class="ccm-svc-sat" style="--i: 4" aria-label="Manufacturing"
    ><span>⛭</span></label
  >
  <label for="ccm-svc-5" class="ccm-svc-sat" style="--i: 5" aria-label="Automation"
    ><span>⌬</span></label
  >
</div>
```

**CSS:**
```css
.ccm-svc {
  --n: 6;
  --ba: calc(360deg / var(--n));
  --r: 105px;
  --pa: 0deg;
  position: relative;
  width: 260px;
  height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: system-ui, sans-serif;
}

.ccm-svc-orbit {
  position: absolute;
  width: calc(var(--r) * 2);
  height: calc(var(--r) * 2);
  border-radius: 50%;
  border: 1px dashed rgba(124, 108, 255, 0.18);
  background: radial-gradient(circle at center, rgba(124, 108, 255, 0.08), transparent 70%);
}

.ccm-svc-disc {
  position: relative;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7c6cff, #a78bfa);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 8px 24px rgba(124, 108, 255, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  z-index: 2;
}

.ccm-svc-title {
  display: none;
  font:
    700 14px/1.2 system-ui,
    sans-serif;
  text-align: center;
  padding: 0 12px;
}

.ccm-svc-cta {
  display: block;
  margin-top: 8px;
  padding: 4px 10px;
  font:
    600 10px/1 ui-monospace,
    monospace;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 999px;
  cursor: pointer;
  transition:
    background 0.2s,
    color 0.2s;
}

.ccm-svc-cta:hover {
  background: #fff;
  color: #7c6cff;
}

.ccm-svc:has(#ccm-svc-0:checked) .ccm-svc-t-0,
.ccm-svc:has(#ccm-svc-1:checked) .ccm-svc-t-1,
.ccm-svc:has(#ccm-svc-2:checked) .ccm-svc-t-2,
.ccm-svc:has(#ccm-svc-3:checked) .ccm-svc-t-3,
.ccm-svc:has(#ccm-svc-4:checked) .ccm-svc-t-4,
.ccm-svc:has(#ccm-svc-5:checked) .ccm-svc-t-5 {
  display: block;
}

.ccm-svc-pointer {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #7c6cff;
  box-shadow: 0 0 0 4px rgba(124, 108, 255, 0.18);
  transform: rotate(var(--pa)) translateY(calc(var(--r) * -0.55));
  transform-origin: 50% 50%;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 3;
}

.ccm-svc:has(#ccm-svc-0:checked) {
  --pa: 0deg;
}

.ccm-svc:has(#ccm-svc-1:checked) {
  --pa: 60deg;
}

.ccm-svc:has(#ccm-svc-2:checked) {
  --pa: 120deg;
}

.ccm-svc:has(#ccm-svc-3:checked) {
  --pa: 180deg;
}

.ccm-svc:has(#ccm-svc-4:checked) {
  --pa: 240deg;
}

.ccm-svc:has(#ccm-svc-5:checked) {
  --pa: 300deg;
}

.ccm-svc-sat {
  position: absolute;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #1f1f2e;
  border: 1px solid rgba(124, 108, 255, 0.4);
  color: #c4b5fd;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transform: rotate(calc(var(--i) * var(--ba))) translateY(calc(var(--r) * -1))
    rotate(calc(var(--i) * var(--ba) * -1));
  transition:
    background 0.25s,
    color 0.25s,
    transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.25s;
  z-index: 4;
}

.ccm-svc-sat span {
  font-size: 18px;
  line-height: 1;
}

.ccm-svc-sat:hover,
.ccm-svc-sat:focus-visible {
  background: #2a2a3e;
  color: #fff;
  transform: rotate(calc(var(--i) * var(--ba))) translateY(calc(var(--r) * -1))
    rotate(calc(var(--i) * var(--ba) * -1)) scale(1.15);
}

.ccm-svc:has(#ccm-svc-0:checked) [for="ccm-svc-0"],
.ccm-svc:has(#ccm-svc-1:checked) [for="ccm-svc-1"],
.ccm-svc:has(#ccm-svc-2:checked) [for="ccm-svc-2"],
.ccm-svc:has(#ccm-svc-3:checked) [for="ccm-svc-3"],
.ccm-svc:has(#ccm-svc-4:checked) [for="ccm-svc-4"],
.ccm-svc:has(#ccm-svc-5:checked) [for="ccm-svc-5"] {
  background: #7c6cff;
  color: #fff;
  border-color: #fff;
  box-shadow: 0 0 0 4px rgba(124, 108, 255, 0.3);
  transform: rotate(calc(var(--i) * var(--ba))) translateY(calc(var(--r) * -1))
    rotate(calc(var(--i) * var(--ba) * -1)) scale(1.15);
}
```

### 03. Tactile Dial

**Type:** Pure CSS
**Description:** A brushed-steel rotary dial flanked by 5 icons arranged on a downward arc. Click any icon and the whole dial rotates left or right (-90°/-45°/0°/+45°/+90°) to "point" at the active selection, with a soft white halo around the chosen icon. Pure CSS via :checked + :has() + a CSS custom property for the rotation angle — adapted from a hardware-knob nav, simplified to drop ~10 PNG dependencies and ~100 lines of jQuery.

**HTML:**
```html
<div class="ccm-tac" role="toolbar" aria-label="Tactile Dial">
  <input type="radio" name="ccm-tac" id="ccm-tac-0" class="ccm-tac-r" hidden />
  <input type="radio" name="ccm-tac" id="ccm-tac-1" class="ccm-tac-r" hidden />
  <input type="radio" name="ccm-tac" id="ccm-tac-2" class="ccm-tac-r" hidden checked />
  <input type="radio" name="ccm-tac" id="ccm-tac-3" class="ccm-tac-r" hidden />
  <input type="radio" name="ccm-tac" id="ccm-tac-4" class="ccm-tac-r" hidden />
  <div class="ccm-tac-dial" aria-hidden="true">
    <div class="ccm-tac-mark"></div>
    <div class="ccm-tac-bevel"></div>
  </div>
  <div class="ccm-tac-arc" aria-hidden="true"></div>
  <label for="ccm-tac-0" class="ccm-tac-i" style="--p: 0" aria-label="Email"><span>✉</span></label>
  <label for="ccm-tac-1" class="ccm-tac-i" style="--p: 1" aria-label="Photos"><span>◇</span></label>
  <label for="ccm-tac-2" class="ccm-tac-i" style="--p: 2" aria-label="Cloud"><span>☁</span></label>
  <label for="ccm-tac-3" class="ccm-tac-i" style="--p: 3" aria-label="Portfolio"
    ><span>⊞</span></label
  >
  <label for="ccm-tac-4" class="ccm-tac-i" style="--p: 4" aria-label="Settings"
    ><span>⚙</span></label
  >
</div>
```

**CSS:**
```css
.ccm-tac {
  --rot: 0deg;
  position: relative;
  width: 280px;
  height: 240px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  font-family: system-ui, sans-serif;
}

.ccm-tac-dial {
  position: absolute;
  bottom: 20px;
  left: 50%;
  width: 130px;
  height: 130px;
  margin-left: -65px;
  border-radius: 50%;
  background:
    repeating-conic-gradient(from 0deg, #c9cfd7 0deg, #8b929c 1deg, #c9cfd7 2deg),
    linear-gradient(180deg, #c9cfd7 0%, #2b2f3e 46%, #2b2f3e 54%, #b0b7c1 100%);
  background-blend-mode: overlay, normal;
  box-shadow:
    0 12px 24px rgba(0, 0, 0, 0.4),
    0 4px 8px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -2px 4px rgba(0, 0, 0, 0.4);
  transform: rotate(var(--rot));
  transform-origin: center;
  transition: transform 0.7s cubic-bezier(0.65, 0, 0.35, 1);
  z-index: 2;
}

.ccm-tac-bevel {
  position: absolute;
  inset: 12px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #e8ecf0, #6b7280 70%, #2b2f3e);
  box-shadow:
    inset 0 1px 2px rgba(255, 255, 255, 0.4),
    inset 0 -2px 4px rgba(0, 0, 0, 0.5);
}

.ccm-tac-mark {
  position: absolute;
  top: 8px;
  left: 50%;
  width: 4px;
  height: 16px;
  margin-left: -2px;
  background: linear-gradient(180deg, #fff, #94a3b8);
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  z-index: 3;
}

.ccm-tac:has(#ccm-tac-0:checked) {
  --rot: -50deg;
}

.ccm-tac:has(#ccm-tac-1:checked) {
  --rot: -25deg;
}

.ccm-tac:has(#ccm-tac-2:checked) {
  --rot: 0deg;
}

.ccm-tac:has(#ccm-tac-3:checked) {
  --rot: 25deg;
}

.ccm-tac:has(#ccm-tac-4:checked) {
  --rot: 50deg;
}

.ccm-tac-arc {
  position: absolute;
  bottom: -40px;
  left: 50%;
  width: 250px;
  height: 250px;
  margin-left: -125px;
  border-radius: 50%;
  border: 1px dashed rgba(255, 255, 255, 0.08);
  pointer-events: none;
  -webkit-mask: linear-gradient(180deg, #000 0%, #000 50%, transparent 50%);
  mask: linear-gradient(180deg, #000 0%, #000 50%, transparent 50%);
}

.ccm-tac-i {
  position: absolute;
  bottom: calc(20px + 65px);
  left: 50%;
  width: 38px;
  height: 38px;
  margin: -19px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #94a3b8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transform: rotate(calc((var(--p) - 2) * 25deg)) translateY(-125px);
  transform-origin: 50% 50%;
  transition:
    background 0.25s,
    color 0.25s,
    box-shadow 0.3s,
    border-color 0.25s,
    transform 0.25s;
  z-index: 4;
}

.ccm-tac-i span {
  font-size: 17px;
  line-height: 1;
  display: inline-block;
  transform: rotate(calc((var(--p) - 2) * -25deg));
}

.ccm-tac-i:hover,
.ccm-tac-i:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.25);
  transform: rotate(calc((var(--p) - 2) * 25deg)) translateY(-130px);
}

.ccm-tac:has(#ccm-tac-0:checked) [for="ccm-tac-0"],
.ccm-tac:has(#ccm-tac-1:checked) [for="ccm-tac-1"],
.ccm-tac:has(#ccm-tac-2:checked) [for="ccm-tac-2"],
.ccm-tac:has(#ccm-tac-3:checked) [for="ccm-tac-3"],
.ccm-tac:has(#ccm-tac-4:checked) [for="ccm-tac-4"] {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 24px 6px rgba(255, 255, 255, 0.18);
  transform: rotate(calc((var(--p) - 2) * 25deg)) translateY(-132px);
}
```

### 04. Fan Reveal

**Type:** Pure CSS
**Description:** Six wedges of a 6-color pie that fan open from a closed stack on first paint with a staggered "deal the cards" reveal — each wedge rotates from 0° to its 60° slot with a per-wedge delay. Hover lifts the wedge outward, click locks the selection. Pure CSS keyframe animation, zero JS — adapted from a jQuery-driven menu and rebuilt with proper 60° clip-path geometry.

**HTML:**
```html
<div class="ccm-fan" role="toolbar" aria-label="Fan Reveal">
  <input type="radio" name="ccm-fan" id="ccm-fan-0" class="ccm-fan-r" hidden />
  <input type="radio" name="ccm-fan" id="ccm-fan-1" class="ccm-fan-r" hidden />
  <input type="radio" name="ccm-fan" id="ccm-fan-2" class="ccm-fan-r" hidden />
  <input type="radio" name="ccm-fan" id="ccm-fan-3" class="ccm-fan-r" hidden />
  <input type="radio" name="ccm-fan" id="ccm-fan-4" class="ccm-fan-r" hidden />
  <input type="radio" name="ccm-fan" id="ccm-fan-5" class="ccm-fan-r" hidden />
  <label for="ccm-fan-0" class="ccm-fan-w" style="--i: 0; --c: #255d74" aria-label="Home"
    ><span>home</span></label
  >
  <label for="ccm-fan-1" class="ccm-fan-w" style="--i: 1; --c: #da353b" aria-label="About"
    ><span>about</span></label
  >
  <label for="ccm-fan-2" class="ccm-fan-w" style="--i: 2; --c: #f89f44" aria-label="Contact"
    ><span>contact</span></label
  >
  <label for="ccm-fan-3" class="ccm-fan-w" style="--i: 3; --c: #78302c" aria-label="Links"
    ><span>links</span></label
  >
  <label for="ccm-fan-4" class="ccm-fan-w" style="--i: 4; --c: #002b55" aria-label="Bio"
    ><span>bio</span></label
  >
  <label for="ccm-fan-5" class="ccm-fan-w" style="--i: 5; --c: #207c6b" aria-label="Store"
    ><span>store</span></label
  >
  <span class="ccm-fan-hub" aria-hidden="true"></span>
</div>
```

**CSS:**
```css
.ccm-fan {
  position: relative;
  width: 220px;
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Lato", system-ui, sans-serif;
  filter: drop-shadow(0 0 18px rgba(255, 255, 255, 0.08));
}

.ccm-fan-w {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 5%, rgba(255, 255, 255, 0.35), transparent 55%),
    radial-gradient(circle at 50% 30%, var(--c) 0%, color-mix(in srgb, var(--c), #000 35%) 100%);
  cursor: pointer;
  clip-path: polygon(50% 50%, 25% 6.7%, 37.06% 1.92%, 50% 0%, 62.94% 1.92%, 75% 6.7%);
  transform-origin: 50% 50%;
  transform: rotate(0deg);
  animation: ccm-fan-deal 0.9s cubic-bezier(0.49, 0.24, 0.32, 0.96) forwards;
  animation-delay: calc(var(--i) * 0.08s);
  transition:
    filter 0.3s,
    transform 0.3s;
}

.ccm-fan-w span {
  position: absolute;
  top: 24px;
  left: 50%;
  display: inline-block;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transform: translateX(-50%);
  pointer-events: none;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.6),
    0 0 8px rgba(255, 255, 255, 0.25);
  white-space: nowrap;
}

.ccm-fan-w:hover,
.ccm-fan-w:focus-visible {
  filter: brightness(1.18) saturate(1.2)
    drop-shadow(0 0 12px color-mix(in srgb, var(--c), white 20%));
  z-index: 2;
}

.ccm-fan:has(#ccm-fan-0:checked) [for="ccm-fan-0"],
.ccm-fan:has(#ccm-fan-1:checked) [for="ccm-fan-1"],
.ccm-fan:has(#ccm-fan-2:checked) [for="ccm-fan-2"],
.ccm-fan:has(#ccm-fan-3:checked) [for="ccm-fan-3"],
.ccm-fan:has(#ccm-fan-4:checked) [for="ccm-fan-4"],
.ccm-fan:has(#ccm-fan-5:checked) [for="ccm-fan-5"] {
  filter: brightness(1.45) saturate(1.5)
    drop-shadow(0 0 22px color-mix(in srgb, var(--c), white 40%))
    drop-shadow(0 0 6px color-mix(in srgb, var(--c), white 60%));
  z-index: 3;
  transform: rotate(calc(var(--i) * 60deg)) scale(1.06);
}

.ccm-fan:has(#ccm-fan-0:checked) [for="ccm-fan-0"] span,
.ccm-fan:has(#ccm-fan-1:checked) [for="ccm-fan-1"] span,
.ccm-fan:has(#ccm-fan-2:checked) [for="ccm-fan-2"] span,
.ccm-fan:has(#ccm-fan-3:checked) [for="ccm-fan-3"] span,
.ccm-fan:has(#ccm-fan-4:checked) [for="ccm-fan-4"] span,
.ccm-fan:has(#ccm-fan-5:checked) [for="ccm-fan-5"] span {
  font-size: 13px;
  letter-spacing: 0.1em;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.7),
    0 0 12px rgba(255, 255, 255, 0.6);
}

.ccm-fan-hub {
  position: absolute;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.18), transparent 55%),
    radial-gradient(circle at center, #1f1f2e 0%, #0a0a14 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -2px 6px rgba(0, 0, 0, 0.5),
    0 0 24px rgba(124, 108, 255, 0.25),
    0 4px 12px rgba(0, 0, 0, 0.5);
  z-index: 4;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .ccm-fan-w {
    animation: none;
    transform: rotate(calc(var(--i) * 60deg));
  }
}

@keyframes ccm-fan-deal {
  from { transform: rotate(0deg); }
  to   { transform: rotate(calc(var(--i) * 60deg)); }
}

```

### 05. Petal Fan

**Type:** Pure CSS
**Description:** Six action buttons fan out across a 180° upper arc from a central FAB on hover, each with a staggered scale-in. Pure CSS via :hover + transition-delay per child.

**HTML:**
```html
<div class="ccm-petal">
  <input type="checkbox" id="ccm-petal-t" class="ccm-petal-t" hidden />
  <label for="ccm-petal-t" class="ccm-petal-fab" aria-label="Open menu">+</label>
  <a href="#" class="ccm-petal-i" style="--a: -90deg" aria-label="Home">⌂</a>
  <a href="#" class="ccm-petal-i" style="--a: -126deg" aria-label="Search">⌕</a>
  <a href="#" class="ccm-petal-i" style="--a: -162deg" aria-label="Star">★</a>
  <a href="#" class="ccm-petal-i" style="--a: -54deg" aria-label="Like">♥</a>
  <a href="#" class="ccm-petal-i" style="--a: -18deg" aria-label="Mail">✉</a>
  <a href="#" class="ccm-petal-i" style="--a: -198deg" aria-label="Settings">⚙</a>
</div>
```

**CSS:**
```css
.ccm-petal {
  position: relative;
  width: 220px;
  height: 140px;
}

.ccm-petal-fab {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7c6cff, #a78bfa);
  color: #fff;
  font-size: 26px;
  line-height: 52px;
  text-align: center;
  cursor: pointer;
  transform: translateX(-50%);
  transition: transform 0.4s;
  box-shadow: 0 6px 18px rgba(124, 108, 255, 0.4);
  z-index: 2;
}

.ccm-petal-i {
  position: absolute;
  left: 50%;
  bottom: 12px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #1f1f2e;
  color: #c4b5fd;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.08);
  transform: translate(-50%, 0) rotate(0) translateY(0) rotate(0);
  opacity: 0;
  transition:
    transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.3s;
}

.ccm-petal:hover .ccm-petal-fab,
.ccm-petal-t:checked + .ccm-petal-fab {
  transform: translateX(-50%) rotate(45deg);
}

.ccm-petal:hover .ccm-petal-i,
.ccm-petal-t:checked ~ .ccm-petal-i {
  transform: translate(-50%, 0) rotate(var(--a)) translateY(-72px) rotate(calc(var(--a) * -1));
  opacity: 1;
}

.ccm-petal-i:nth-of-type(1) {
  transition-delay: 0.05s;
}

.ccm-petal-i:nth-of-type(2) {
  transition-delay: 0.1s;
}

.ccm-petal-i:nth-of-type(3) {
  transition-delay: 0.15s;
}

.ccm-petal-i:nth-of-type(4) {
  transition-delay: 0.2s;
}

.ccm-petal-i:nth-of-type(5) {
  transition-delay: 0.25s;
}

.ccm-petal-i:nth-of-type(6) {
  transition-delay: 0.3s;
}
```

### 06. Full Circle Wheel

**Type:** Pure CSS
**Description:** Eight items evenly distributed around a 360° ring, all visible at rest. Hover any item to scale it up; the central icon stays anchored. Pure trig via CSS variables.

**HTML:**
```html
<div class="ccm-wheel">
  <span class="ccm-wheel-c" aria-hidden="true">◉</span>
  <a href="#" class="ccm-wheel-i" style="--a: 0deg">A</a>
  <a href="#" class="ccm-wheel-i" style="--a: 45deg">B</a>
  <a href="#" class="ccm-wheel-i" style="--a: 90deg">C</a>
  <a href="#" class="ccm-wheel-i" style="--a: 135deg">D</a>
  <a href="#" class="ccm-wheel-i" style="--a: 180deg">E</a>
  <a href="#" class="ccm-wheel-i" style="--a: 225deg">F</a>
  <a href="#" class="ccm-wheel-i" style="--a: 270deg">G</a>
  <a href="#" class="ccm-wheel-i" style="--a: 315deg">H</a>
</div>
```

**CSS:**
```css
.ccm-wheel {
  position: relative;
  width: 200px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ccm-wheel-c {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7c6cff, #ff6c8a);
  color: #fff;
  font-size: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 4px rgba(124, 108, 255, 0.18);
}

.ccm-wheel-i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 32px;
  height: 32px;
  margin: -16px;
  border-radius: 50%;
  background: #1f1f2e;
  color: #c4b5fd;
  font:
    700 12px/32px ui-monospace,
    monospace;
  text-align: center;
  text-decoration: none;
  border: 1px solid rgba(124, 108, 255, 0.3);
  transform: rotate(var(--a)) translate(78px) rotate(calc(var(--a) * -1));
  transition:
    transform 0.25s,
    background 0.2s,
    color 0.2s;
}

.ccm-wheel-i:hover,
.ccm-wheel-i:focus-visible {
  background: #7c6cff;
  color: #fff;
  transform: rotate(var(--a)) translate(78px) rotate(calc(var(--a) * -1)) scale(1.4);
  z-index: 2;
}
```

### 07. Pie Slice Selector

**Type:** Pure CSS
**Description:** Four pie slices, each a labelled clickable wedge. Real per-slice hit area via border-radius corners (no overlapping squares) — only the visible pie wedge receives hover and click.

**HTML:**
```html
<div class="ccm-pie">
  <a href="#" class="ccm-pie-s ccm-pie-tr" style="--c: #7c6cff" aria-label="Plan"
    ><span>Plan</span></a
  >
  <a href="#" class="ccm-pie-s ccm-pie-br" style="--c: #ff6c8a" aria-label="Build"
    ><span>Build</span></a
  >
  <a href="#" class="ccm-pie-s ccm-pie-bl" style="--c: #2ecc8a" aria-label="Test"
    ><span>Test</span></a
  >
  <a href="#" class="ccm-pie-s ccm-pie-tl" style="--c: #f5a84a" aria-label="Ship"
    ><span>Ship</span></a
  >
  <span class="ccm-pie-h" aria-hidden="true"></span>
</div>
```

**CSS:**
```css
.ccm-pie {
  position: relative;
  width: 170px;
  height: 170px;
}

.ccm-pie-s {
  position: absolute;
  width: 50%;
  height: 50%;
  background: var(--c);
  text-decoration: none;
  cursor: pointer;
  transition:
    filter 0.2s,
    transform 0.2s;
  display: flex;
}

.ccm-pie-tr {
  top: 0;
  right: 0;
  border-top-right-radius: 100% 100%;
  transform-origin: 0% 100%;
}

.ccm-pie-br {
  bottom: 0;
  right: 0;
  border-bottom-right-radius: 100% 100%;
  transform-origin: 0% 0%;
}

.ccm-pie-bl {
  bottom: 0;
  left: 0;
  border-bottom-left-radius: 100% 100%;
  transform-origin: 100% 0%;
}

.ccm-pie-tl {
  top: 0;
  left: 0;
  border-top-left-radius: 100% 100%;
  transform-origin: 100% 100%;
}

.ccm-pie-s span {
  margin: auto;
  padding: 8px 18px;
  font:
    700 12px/1 system-ui,
    sans-serif;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.ccm-pie-s:hover,
.ccm-pie-s:focus-visible {
  filter: brightness(1.18) saturate(1.15);
  transform: scale(1.04);
  z-index: 2;
}

.ccm-pie-h {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 56px;
  height: 56px;
  margin: -28px;
  border-radius: 50%;
  background: #15151d;
  border: 3px solid #17171f;
  pointer-events: none;
  z-index: 3;
}
```

### 08. Donut Sectors

**Type:** Pure CSS
**Description:** A 6-sector SVG donut with curved labels following each arc via textPath. On hover the sector pulls outward (split effect), the label brightens, and a subtle scale animation runs. Real hit-tested wedges.

**HTML:**
```html
<svg class="ccm-donut" viewBox="0 0 200 200" role="navigation" aria-label="Donut menu">
  <defs>
    <path id="ccm-donut-arc-1" d="M 100 25 A 75 75 0 0 1 164.95 62.5" />
    <path id="ccm-donut-arc-2" d="M 164.95 62.5 A 75 75 0 0 1 164.95 137.5" />
    <path id="ccm-donut-arc-3" d="M 164.95 137.5 A 75 75 0 0 1 100 175" />
    <path id="ccm-donut-arc-4" d="M 35.05 137.5 A 75 75 0 0 1 35.05 62.5" />
    <path id="ccm-donut-arc-5" d="M 100 175 A 75 75 0 0 1 35.05 137.5" />
    <path id="ccm-donut-arc-6" d="M 35.05 62.5 A 75 75 0 0 1 100 25" />
  </defs>
  <a href="#" class="ccm-donut-s" style="--c: #7c6cff" aria-label="Plan">
    <path d="M 100 100 L 100 10 A 90 90 0 0 1 177.94 55 Z" fill="var(--c)" />
    <text class="ccm-donut-l">
      <textPath href="#ccm-donut-arc-1" startOffset="50%" text-anchor="middle">PLAN</textPath>
    </text>
  </a>
  <a href="#" class="ccm-donut-s" style="--c: #a78bfa" aria-label="Design">
    <path d="M 100 100 L 177.94 55 A 90 90 0 0 1 177.94 145 Z" fill="var(--c)" />
    <text class="ccm-donut-l">
      <textPath href="#ccm-donut-arc-2" startOffset="50%" text-anchor="middle">DESIGN</textPath>
    </text>
  </a>
  <a href="#" class="ccm-donut-s" style="--c: #ff6c8a" aria-label="Build">
    <path d="M 100 100 L 177.94 145 A 90 90 0 0 1 100 190 Z" fill="var(--c)" />
    <text class="ccm-donut-l">
      <textPath href="#ccm-donut-arc-3" startOffset="50%" text-anchor="middle">BUILD</textPath>
    </text>
  </a>
  <a href="#" class="ccm-donut-s" style="--c: #f5a84a" aria-label="Test">
    <path d="M 100 100 L 100 190 A 90 90 0 0 1 22.06 145 Z" fill="var(--c)" />
    <text class="ccm-donut-l">
      <textPath href="#ccm-donut-arc-5" startOffset="50%" text-anchor="middle">TEST</textPath>
    </text>
  </a>
  <a href="#" class="ccm-donut-s" style="--c: #2ecc8a" aria-label="Ship">
    <path d="M 100 100 L 22.06 145 A 90 90 0 0 1 22.06 55 Z" fill="var(--c)" />
    <text class="ccm-donut-l">
      <textPath href="#ccm-donut-arc-4" startOffset="50%" text-anchor="middle">SHIP</textPath>
    </text>
  </a>
  <a href="#" class="ccm-donut-s" style="--c: #00e5ff" aria-label="Learn">
    <path d="M 100 100 L 22.06 55 A 90 90 0 0 1 100 10 Z" fill="var(--c)" />
    <text class="ccm-donut-l">
      <textPath href="#ccm-donut-arc-6" startOffset="50%" text-anchor="middle">LEARN</textPath>
    </text>
  </a>
  <circle cx="100" cy="100" r="32" fill="#15151d" stroke="#17171f" stroke-width="3" />
  <text x="100" y="104" class="ccm-donut-c" text-anchor="middle">MENU</text>
</svg>
```

**CSS:**
```css
.ccm-donut {
  width: 200px;
  height: 200px;
  display: block;
  overflow: visible;
  font-family: ui-monospace, "SF Mono", monospace;
}

.ccm-donut-s {
  cursor: pointer;
  transform-origin: 100px 100px;
  transform: scale(1) translate(0, 0);
  transition:
    transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
    filter 0.2s;
  text-decoration: none;
  animation: ccm-donut-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

.ccm-donut-s path {
  stroke: #17171f;
  stroke-width: 2;
  transition: filter 0.2s;
}

.ccm-donut-l {
  font:
    700 10px/1 ui-monospace,
    monospace;
  fill: #fff;
  letter-spacing: 0.18em;
  pointer-events: none;
  opacity: 0.92;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.ccm-donut-c {
  font:
    700 9px/1 ui-monospace,
    monospace;
  fill: #c4b5fd;
  letter-spacing: 0.16em;
  pointer-events: none;
}

.ccm-donut-s:nth-of-type(1):hover,
.ccm-donut-s:nth-of-type(1):focus-visible {
  transform: translate(4px, -4px);
}

.ccm-donut-s:nth-of-type(2):hover,
.ccm-donut-s:nth-of-type(2):focus-visible {
  transform: translate(6px, 0px);
}

.ccm-donut-s:nth-of-type(3):hover,
.ccm-donut-s:nth-of-type(3):focus-visible {
  transform: translate(4px, 4px);
}

.ccm-donut-s:nth-of-type(4):hover,
.ccm-donut-s:nth-of-type(4):focus-visible {
  transform: translate(-4px, 4px);
}

.ccm-donut-s:nth-of-type(5):hover,
.ccm-donut-s:nth-of-type(5):focus-visible {
  transform: translate(-6px, 0px);
}

.ccm-donut-s:nth-of-type(6):hover,
.ccm-donut-s:nth-of-type(6):focus-visible {
  transform: translate(-4px, -4px);
}

.ccm-donut-s:hover path,
.ccm-donut-s:focus-visible path {
  filter: brightness(1.18) saturate(1.1);
}

.ccm-donut-s:nth-of-type(1) {
  animation-delay: 0.05s;
}

.ccm-donut-s:nth-of-type(2) {
  animation-delay: 0.1s;
}

.ccm-donut-s:nth-of-type(3) {
  animation-delay: 0.15s;
}

.ccm-donut-s:nth-of-type(4) {
  animation-delay: 0.2s;
}

.ccm-donut-s:nth-of-type(5) {
  animation-delay: 0.25s;
}

.ccm-donut-s:nth-of-type(6) {
  animation-delay: 0.3s;
}

@keyframes ccm-donut-pop {
  from { opacity: 0; transform: scale(0.6); }
  to   { opacity: 1; transform: scale(1); }
}

```

### 09. Half-Donut Speed Dial

**Type:** Pure CSS
**Description:** A bottom-anchored half-arc FAB that fans 5 actions upward in a 180° spread. Each item lands on the arc at an even angle. Pure CSS via :checked.

**HTML:**
```html
<div class="ccm-half">
  <input type="checkbox" id="ccm-half-t" hidden />
  <label for="ccm-half-t" class="ccm-half-fab" aria-label="Toggle">⊕</label>
  <a href="#" class="ccm-half-i" style="--a: 180deg">A</a>
  <a href="#" class="ccm-half-i" style="--a: 225deg">B</a>
  <a href="#" class="ccm-half-i" style="--a: 270deg">C</a>
  <a href="#" class="ccm-half-i" style="--a: 315deg">D</a>
  <a href="#" class="ccm-half-i" style="--a: 0deg">E</a>
</div>
```

**CSS:**
```css
.ccm-half {
  position: relative;
  width: 220px;
  height: 130px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.ccm-half-fab {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2ecc8a, #00e5ff);
  color: #0a0f0c;
  font-weight: 700;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.4s;
  z-index: 2;
  box-shadow: 0 6px 22px rgba(46, 204, 138, 0.4);
}

.ccm-half input:checked + .ccm-half-fab {
  transform: rotate(180deg);
}

.ccm-half-i {
  position: absolute;
  bottom: 28px;
  left: 50%;
  width: 36px;
  height: 36px;
  margin: -18px;
  border-radius: 50%;
  background: #1f1f2e;
  border: 1.5px solid #2ecc8a;
  color: #2ecc8a;
  font:
    700 12px/36px ui-monospace,
    monospace;
  text-align: center;
  text-decoration: none;
  transform: translate(0, 0) rotate(var(--a)) translate(0) rotate(calc(var(--a) * -1));
  opacity: 0;
  transition:
    transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.3s;
}

.ccm-half input:checked ~ .ccm-half-i {
  transform: translate(0, 0) rotate(var(--a)) translate(80px) rotate(calc(var(--a) * -1));
  opacity: 1;
}

.ccm-half-i:nth-of-type(1) {
  transition-delay: 0.05s;
}

.ccm-half-i:nth-of-type(2) {
  transition-delay: 0.1s;
}

.ccm-half-i:nth-of-type(3) {
  transition-delay: 0.15s;
}

.ccm-half-i:nth-of-type(4) {
  transition-delay: 0.2s;
}

.ccm-half-i:nth-of-type(5) {
  transition-delay: 0.25s;
}
```

### 10. Glass Dome

**Type:** Pure CSS
**Description:** A glass hemisphere with backdrop-blur and an inner highlight; menu items orbit along the dome edge. Items lift on hover. The hero of the dome family.

**HTML:**
```html
<div class="ccm-glass-bg">
  <div class="ccm-glass">
    <div class="ccm-glass-dome"></div>
    <a href="#" class="ccm-glass-i" style="--a: -150deg">⌂</a>
    <a href="#" class="ccm-glass-i" style="--a: -120deg">⌕</a>
    <a href="#" class="ccm-glass-i" style="--a: -90deg">★</a>
    <a href="#" class="ccm-glass-i" style="--a: -60deg">♥</a>
    <a href="#" class="ccm-glass-i" style="--a: -30deg">⚙</a>
  </div>
</div>
```

**CSS:**
```css
.ccm-glass-bg {
  padding: 30px;
  border-radius: 14px;
  background: linear-gradient(135deg, #7c6cff 0%, #ff6c8a 100%);
}

.ccm-glass {
  position: relative;
  width: 200px;
  height: 110px;
}

.ccm-glass-dome {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 110px;
  border-radius: 100px 100px 0 0;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-bottom: none;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 -10px 30px rgba(255, 255, 255, 0.1);
}

.ccm-glass-dome::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 20%;
  right: 50%;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), transparent);
  filter: blur(2px);
}

.ccm-glass-i {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 32px;
  height: 32px;
  margin-left: -16px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transform: rotate(var(--a)) translate(95px) rotate(calc(var(--a) * -1));
  transition:
    transform 0.3s,
    background 0.2s;
  backdrop-filter: blur(6px);
}

.ccm-glass-i:hover {
  background: rgba(255, 255, 255, 0.45);
  transform: rotate(var(--a)) translate(95px) rotate(calc(var(--a) * -1)) scale(1.18)
    translateY(-6px);
}
```

### 11. Holographic Dome

**Type:** Pure CSS
**Description:** A translucent dome with an iridescent rim that rotates continuously via @property-animated conic gradient. The dome itself stays still; only the rim shimmers.

**HTML:**
```html
<div class="ccm-holo">
  <div class="ccm-holo-rim"></div>
  <div class="ccm-holo-dome"></div>
  <a href="#" class="ccm-holo-i" style="--a: -150deg">⌂</a>
  <a href="#" class="ccm-holo-i" style="--a: -120deg">⌕</a>
  <a href="#" class="ccm-holo-i" style="--a: -90deg">★</a>
  <a href="#" class="ccm-holo-i" style="--a: -60deg">♥</a>
  <a href="#" class="ccm-holo-i" style="--a: -30deg">⚙</a>
</div>
```

**CSS:**
```css
.ccm-holo {
  position: relative;
  width: 200px;
  height: 110px;
}

.ccm-holo-rim {
  position: absolute;
  bottom: -2px;
  left: -2px;
  right: -2px;
  height: 114px;
  border-radius: 100px 100px 0 0;
  background: conic-gradient(from var(--ccm-holo-a), #7c6cff, #ff6c8a, #2ecc8a, #00e5ff, #7c6cff);
  animation: ccm-holo-spin 4s linear infinite;
  filter: blur(0.5px);
}

.ccm-holo-dome {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 110px;
  border-radius: 100px 100px 0 0;
  background: rgba(15, 15, 25, 0.7);
  backdrop-filter: blur(8px);
  border-bottom: none;
}

.ccm-holo-i {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 32px;
  height: 32px;
  margin-left: -16px;
  border-radius: 50%;
  background: #15151d;
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #c4b5fd;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transform: rotate(var(--a)) translate(95px) rotate(calc(var(--a) * -1));
  transition:
    transform 0.3s,
    color 0.2s;
}

.ccm-holo-i:hover {
  color: #fff;
  transform: rotate(var(--a)) translate(95px) rotate(calc(var(--a) * -1)) scale(1.2);
}

@media (prefers-reduced-motion: reduce) {
  .ccm-holo-rim,
  .ccm-snow-flakes,
  .ccm-orbit-sat,
  .ccm-orbit-i,
  .ccm-solar-o,
  .ccm-solar-o a,
  .ccm-tri-grp,
  .ccm-vinyl-disc,
  .ccm-bh-disk,
  .ccm-neb-cloud,
  .ccm-neb-i {
    animation: none !important;
  }
}

@keyframes ccm-holo-spin { to { --ccm-holo-a: 360deg; } }

```

### 12. Single Satellite Orbit

**Type:** Pure CSS
**Description:** One satellite continuously orbits the central FAB. Hover the FAB to pause the orbit, click to "lock in" the satellite at its current angle. Pure CSS via :hover paused state.

**HTML:**
```html
<div class="ccm-orbit">
  <div class="ccm-orbit-track"></div>
  <div class="ccm-orbit-sat"><a href="#" class="ccm-orbit-i" aria-label="Item">◆</a></div>
  <a href="#" class="ccm-orbit-c" aria-label="Center">◉</a>
</div>
```

**CSS:**
```css
.ccm-orbit {
  position: relative;
  width: 180px;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ccm-orbit-track {
  position: absolute;
  inset: 20px;
  border-radius: 50%;
  border: 1px dashed rgba(124, 108, 255, 0.3);
}

.ccm-orbit-c {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7c6cff, #a78bfa);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 18px;
  z-index: 2;
  box-shadow: 0 0 0 4px rgba(124, 108, 255, 0.18);
}

.ccm-orbit-sat {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: ccm-orbit-spin 5s linear infinite;
}

.ccm-orbit-i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #1f1f2e;
  color: #c4b5fd;
  text-decoration: none;
  border: 1px solid rgba(124, 108, 255, 0.4);
  transform: translate(70px);
  animation: ccm-orbit-counter 5s linear infinite;
}

.ccm-orbit:hover .ccm-orbit-sat,
.ccm-orbit:hover .ccm-orbit-i {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .ccm-holo-rim,
  .ccm-snow-flakes,
  .ccm-orbit-sat,
  .ccm-orbit-i,
  .ccm-solar-o,
  .ccm-solar-o a,
  .ccm-tri-grp,
  .ccm-vinyl-disc,
  .ccm-bh-disk,
  .ccm-neb-cloud,
  .ccm-neb-i {
    animation: none !important;
  }
}

@keyframes ccm-orbit-spin { to { transform: rotate(360deg); } }

@keyframes ccm-orbit-counter { to { transform: translate(70px) rotate(-360deg); } }

```

### 13. Solar System

**Type:** Pure CSS
**Description:** A central "sun" + 4 "planets" at decreasing orbit radii, each labelled, each orbiting at a different speed (Kepler-style — closer = faster). Real CSS animation, no JS.

**HTML:**
```html
<div class="ccm-solar">
  <a href="#" class="ccm-solar-c" aria-label="Sun">☀</a>
  <div class="ccm-solar-o ccm-solar-o1">
    <span class="ccm-solar-pos"><a href="#" class="ccm-solar-p" aria-label="Mercury">☿</a></span>
  </div>
  <div class="ccm-solar-o ccm-solar-o2">
    <span class="ccm-solar-pos"><a href="#" class="ccm-solar-p" aria-label="Venus">♀</a></span>
  </div>
  <div class="ccm-solar-o ccm-solar-o3">
    <span class="ccm-solar-pos"><a href="#" class="ccm-solar-p" aria-label="Earth">♁</a></span>
  </div>
  <div class="ccm-solar-o ccm-solar-o4">
    <span class="ccm-solar-pos"><a href="#" class="ccm-solar-p" aria-label="Mars">♂</a></span>
  </div>
</div>
```

**CSS:**
```css
.ccm-solar {
  position: relative;
  width: 240px;
  height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ccm-solar-c {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #ffd479, #f5a84a);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.85);
  font-size: 20px;
  text-decoration: none;
  box-shadow: 0 0 24px #f5a84a;
  z-index: 5;
}

.ccm-solar-o {
  position: absolute;
  border-radius: 50%;
  border: 1px dashed rgba(255, 255, 255, 0.08);
  animation: ccm-solar-spin linear infinite;
}

.ccm-solar-o1 {
  inset: 20px;
  animation-duration: 11s;
}

.ccm-solar-o2 {
  inset: 50px;
  animation-duration: 8s;
}

.ccm-solar-o3 {
  inset: 80px;
  animation-duration: 6s;
}

.ccm-solar-o4 {
  inset: 105px;
  animation-duration: 4s;
}

.ccm-solar-pos {
  position: absolute;
  top: 0;
  left: 50%;
  width: 0;
  height: 0;
}

.ccm-solar-p {
  position: absolute;
  top: 0;
  left: 0;
  width: 24px;
  height: 24px;
  margin: -12px;
  border-radius: 50%;
  background: #1f1f2e;
  color: #c4b5fd;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border: 1px solid rgba(124, 108, 255, 0.4);
  animation: ccm-solar-counter linear infinite;
  z-index: 6;
}

.ccm-solar-o1 .ccm-solar-p {
  animation-duration: 11s;
}

.ccm-solar-o2 .ccm-solar-p {
  animation-duration: 8s;
}

.ccm-solar-o3 .ccm-solar-p {
  animation-duration: 6s;
}

.ccm-solar-o4 .ccm-solar-p {
  animation-duration: 4s;
}

.ccm-solar-p:hover {
  background: #7c6cff;
  color: #fff;
}

.ccm-solar:hover .ccm-solar-o,
.ccm-solar:hover .ccm-solar-p {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .ccm-holo-rim,
  .ccm-snow-flakes,
  .ccm-orbit-sat,
  .ccm-orbit-i,
  .ccm-solar-o,
  .ccm-solar-o a,
  .ccm-tri-grp,
  .ccm-vinyl-disc,
  .ccm-bh-disk,
  .ccm-neb-cloud,
  .ccm-neb-i {
    animation: none !important;
  }
}

@keyframes ccm-solar-spin { to { transform: rotate(360deg); } }

@keyframes ccm-solar-counter { to { transform: rotate(-360deg); } }

```

### 14. Hexagonal Honeycomb

**Type:** Pure CSS
**Description:** Six hexagonal items arranged around a central hex via real geometry (clip-path polygon). Each cell highlights independently. Honeycomb pattern with mathematical precision.

**HTML:**
```html
<div class="ccm-hex">
  <a href="#" class="ccm-hex-c" aria-label="Center">◆</a>
  <a href="#" class="ccm-hex-i" style="--a: -90deg" aria-label="N">N</a>
  <a href="#" class="ccm-hex-i" style="--a: -30deg" aria-label="NE">NE</a>
  <a href="#" class="ccm-hex-i" style="--a: 30deg" aria-label="SE">SE</a>
  <a href="#" class="ccm-hex-i" style="--a: 90deg" aria-label="S">S</a>
  <a href="#" class="ccm-hex-i" style="--a: 150deg" aria-label="SW">SW</a>
  <a href="#" class="ccm-hex-i" style="--a: 210deg" aria-label="NW">NW</a>
</div>
```

**CSS:**
```css
.ccm-hex {
  position: relative;
  width: 200px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ccm-hex-c,
.ccm-hex-i {
  width: 50px;
  height: 58px;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font:
    700 11px/1 system-ui,
    sans-serif;
  text-decoration: none;
  transition:
    transform 0.2s,
    background 0.2s;
}

.ccm-hex-c {
  background: linear-gradient(135deg, #7c6cff, #a78bfa);
  color: #fff;
  position: relative;
  z-index: 2;
}

.ccm-hex-i {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -29px -25px;
  background: #1f1f2e;
  color: #c4b5fd;
  transform: rotate(var(--a)) translate(64px) rotate(calc(var(--a) * -1));
}

.ccm-hex-i:hover,
.ccm-hex-i:focus-visible {
  background: #2a2a3e;
  color: #fff;
  transform: rotate(var(--a)) translate(64px) rotate(calc(var(--a) * -1)) scale(1.1);
}
```

### 15. Rotating Triangle Trio

**Type:** Pure CSS
**Description:** Three triangle items rotate together in a trio formation. Hover any triangle to lift it forward. The whole group rotates slowly on idle for visual interest.

**HTML:**
```html
<div class="ccm-tri">
  <div class="ccm-tri-grp">
    <a href="#" class="ccm-tri-i" style="--a: -90deg">A</a>
    <a href="#" class="ccm-tri-i" style="--a: 30deg">B</a>
    <a href="#" class="ccm-tri-i" style="--a: 150deg">C</a>
  </div>
  <span class="ccm-tri-c" aria-hidden="true">◯</span>
</div>
```

**CSS:**
```css
.ccm-tri {
  position: relative;
  width: 180px;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ccm-tri-grp {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: ccm-tri-spin 16s linear infinite;
}

.ccm-tri-i {
  position: absolute;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #ff6c8a, #f5a84a);
  color: #fff;
  font:
    700 14px/1 system-ui,
    sans-serif;
  text-decoration: none;
  clip-path: polygon(50% 5%, 95% 95%, 5% 95%);
  transform: rotate(var(--a)) translate(60px);
  transition: transform 0.3s;
}

.ccm-tri-i:hover {
  transform: rotate(var(--a)) translate(60px) scale(1.2);
  filter: drop-shadow(0 4px 12px rgba(255, 108, 138, 0.5));
  z-index: 2;
}

.ccm-tri-c {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #1f1f2e;
  border: 2px solid #7c6cff;
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .ccm-holo-rim,
  .ccm-snow-flakes,
  .ccm-orbit-sat,
  .ccm-orbit-i,
  .ccm-solar-o,
  .ccm-solar-o a,
  .ccm-tri-grp,
  .ccm-vinyl-disc,
  .ccm-bh-disk,
  .ccm-neb-cloud,
  .ccm-neb-i {
    animation: none !important;
  }
}

@keyframes ccm-tri-spin { to { transform: rotate(360deg); } }

```

### 16. Vinyl Record

**Type:** Pure CSS
**Description:** A spinning vinyl record menu. The disc rotates continuously; menu items sit on the label area. Pause on hover via animation-play-state. Classic music-app metaphor.

**HTML:**
```html
<div class="ccm-vinyl">
  <div class="ccm-vinyl-disc">
    <div class="ccm-vinyl-label">
      <a href="#" class="ccm-vinyl-i" style="--a: -90deg">▶</a>
      <a href="#" class="ccm-vinyl-i" style="--a: 0deg">♫</a>
      <a href="#" class="ccm-vinyl-i" style="--a: 90deg">♪</a>
      <a href="#" class="ccm-vinyl-i" style="--a: 180deg">⏏</a>
    </div>
  </div>
</div>
```

**CSS:**
```css
.ccm-vinyl {
  position: relative;
  width: 200px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ccm-vinyl-disc {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, #1a1a1a 30%, transparent 31%),
    repeating-radial-gradient(circle at center, #0a0a0a 0, #0a0a0a 1px, #1a1a1a 1px, #1a1a1a 3px);
  position: relative;
  animation: ccm-vinyl-spin 8s linear infinite;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.05),
    0 8px 24px rgba(0, 0, 0, 0.5);
}

.ccm-vinyl-disc::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  margin: -4px;
  border-radius: 50%;
  background: #f5a84a;
}

.ccm-vinyl-label {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  margin: -50px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff6c8a, #f5a84a);
}

.ccm-vinyl-i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22px;
  height: 22px;
  margin: -11px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  text-decoration: none;
  transform: rotate(var(--a)) translate(28px) rotate(calc(var(--a) * -1));
}

.ccm-vinyl-i:hover {
  background: rgba(0, 0, 0, 0.7);
}

.ccm-vinyl:hover .ccm-vinyl-disc {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .ccm-holo-rim,
  .ccm-snow-flakes,
  .ccm-orbit-sat,
  .ccm-orbit-i,
  .ccm-solar-o,
  .ccm-solar-o a,
  .ccm-tri-grp,
  .ccm-vinyl-disc,
  .ccm-bh-disk,
  .ccm-neb-cloud,
  .ccm-neb-i {
    animation: none !important;
  }
}

@keyframes ccm-vinyl-spin { to { transform: rotate(360deg); } }

```

### 17. Compass Rose

**Type:** Pure CSS
**Description:** A nautical compass rose with N/E/S/W labels and a needle that points at the active direction. Hover any direction to rotate the needle smoothly via :has().

**HTML:**
```html
<div class="ccm-compass">
  <input type="radio" name="ccm-compass" id="ccm-compass-n" hidden checked />
  <input type="radio" name="ccm-compass" id="ccm-compass-e" hidden />
  <input type="radio" name="ccm-compass" id="ccm-compass-s" hidden />
  <input type="radio" name="ccm-compass" id="ccm-compass-w" hidden />
  <div class="ccm-compass-face"></div>
  <div class="ccm-compass-needle" aria-hidden="true"></div>
  <label for="ccm-compass-n" class="ccm-compass-i" style="--a: 0deg">N</label>
  <label for="ccm-compass-e" class="ccm-compass-i" style="--a: 90deg">E</label>
  <label for="ccm-compass-s" class="ccm-compass-i" style="--a: 180deg">S</label>
  <label for="ccm-compass-w" class="ccm-compass-i" style="--a: 270deg">W</label>
</div>
```

**CSS:**
```css
.ccm-compass {
  position: relative;
  width: 190px;
  height: 190px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ccm-compass-face {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center, #2a2a3e, #15151d);
  border: 2px solid rgba(212, 175, 55, 0.5);
  box-shadow:
    inset 0 0 24px rgba(212, 175, 55, 0.2),
    0 4px 16px rgba(0, 0, 0, 0.4);
}

.ccm-compass-needle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 70px;
  margin: -35px -2px;
  background: linear-gradient(180deg, #ff3d6e 0 50%, #d4af37 50% 100%);
  transform-origin: center;
  transform: rotate(0deg);
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  border-radius: 2px;
}

.ccm-compass:has(#ccm-compass-n:checked) .ccm-compass-needle {
  transform: rotate(0deg);
}

.ccm-compass:has(#ccm-compass-e:checked) .ccm-compass-needle {
  transform: rotate(90deg);
}

.ccm-compass:has(#ccm-compass-s:checked) .ccm-compass-needle {
  transform: rotate(180deg);
}

.ccm-compass:has(#ccm-compass-w:checked) .ccm-compass-needle {
  transform: rotate(270deg);
}

.ccm-compass-i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 28px;
  height: 28px;
  margin: -14px;
  border-radius: 50%;
  background: rgba(212, 175, 55, 0.18);
  color: #ffd479;
  font:
    700 12px/28px ui-monospace,
    monospace;
  text-align: center;
  cursor: pointer;
  border: 1px solid rgba(212, 175, 55, 0.4);
  transform: rotate(var(--a)) translate(80px) rotate(calc(var(--a) * -1));
  transition:
    background 0.2s,
    color 0.2s,
    transform 0.2s;
}

.ccm-compass-i:hover {
  background: rgba(212, 175, 55, 0.4);
  color: #fff;
}
```

### 18. Iris Aperture

**Type:** Pure CSS
**Description:** A camera-lens iris with 6 blades. On hover the blades "stop down" via clip-path + rotation, revealing menu items around the exposed diaphragm.

**HTML:**
```html
<div class="ccm-iris">
  <div class="ccm-iris-blade" style="--a: 0deg"></div>
  <div class="ccm-iris-blade" style="--a: 60deg"></div>
  <div class="ccm-iris-blade" style="--a: 120deg"></div>
  <div class="ccm-iris-blade" style="--a: 180deg"></div>
  <div class="ccm-iris-blade" style="--a: 240deg"></div>
  <div class="ccm-iris-blade" style="--a: 300deg"></div>
  <a href="#" class="ccm-iris-i" style="--a: -90deg">◐</a>
  <a href="#" class="ccm-iris-i" style="--a: -30deg">◑</a>
  <a href="#" class="ccm-iris-i" style="--a: 30deg">◒</a>
  <a href="#" class="ccm-iris-i" style="--a: 90deg">◓</a>
  <a href="#" class="ccm-iris-i" style="--a: 150deg">◉</a>
  <a href="#" class="ccm-iris-i" style="--a: 210deg">○</a>
</div>
```

**CSS:**
```css
.ccm-iris {
  position: relative;
  width: 200px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: radial-gradient(circle at center, #0a0a14 30%, #15151d);
  border: 4px solid #2a2a3e;
}

.ccm-iris-blade {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  margin: -50px;
  background: linear-gradient(135deg, #2a2a3e, #15151d);
  clip-path: polygon(50% 0%, 100% 50%, 50% 50%);
  transform: rotate(var(--a)) translateY(-30px);
  transform-origin: center;
  transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}

.ccm-iris:hover .ccm-iris-blade {
  transform: rotate(calc(var(--a) + 30deg)) translateY(-50px);
}

.ccm-iris-i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 28px;
  height: 28px;
  margin: -14px;
  border-radius: 50%;
  background: #1f1f2e;
  color: #00e5ff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border: 1px solid rgba(0, 229, 255, 0.4);
  transform: rotate(var(--a)) translate(70px) rotate(calc(var(--a) * -1));
  opacity: 0;
  transition: opacity 0.4s ease 0.25s;
  z-index: 2;
}

.ccm-iris:hover .ccm-iris-i {
  opacity: 1;
}

.ccm-iris-i:hover {
  background: #00e5ff;
  color: #0a0a14;
}
```

### 19. Black Hole

**Type:** Pure CSS
**Description:** Items orbit a glowing accretion-disk singularity at all times. On hover the disk pulses brighter and items lift outward slightly — a gravitational "release". Items stay clickable throughout.

**HTML:**
```html
<div class="ccm-bh">
  <div class="ccm-bh-disk" aria-hidden="true"></div>
  <div class="ccm-bh-core" aria-hidden="true"></div>
  <a href="#" class="ccm-bh-i" style="--a: -90deg" aria-label="Item A">A</a>
  <a href="#" class="ccm-bh-i" style="--a: -30deg" aria-label="Item B">B</a>
  <a href="#" class="ccm-bh-i" style="--a: 30deg" aria-label="Item C">C</a>
  <a href="#" class="ccm-bh-i" style="--a: 90deg" aria-label="Item D">D</a>
  <a href="#" class="ccm-bh-i" style="--a: 150deg" aria-label="Item E">E</a>
  <a href="#" class="ccm-bh-i" style="--a: 210deg" aria-label="Item F">F</a>
</div>
```

**CSS:**
```css
.ccm-bh {
  position: relative;
  width: 200px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ccm-bh-disk {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 110px;
  height: 110px;
  margin: -55px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, #d4af37, #ff6c8a, #7c6cff, #d4af37);
  filter: blur(6px);
  animation: ccm-bh-spin 8s linear infinite;
  transition: filter 0.4s;
  z-index: 1;
}

.ccm-bh:hover .ccm-bh-disk {
  filter: blur(4px) brightness(1.3);
}

.ccm-bh-core {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 56px;
  height: 56px;
  margin: -28px;
  border-radius: 50%;
  background: #000;
  box-shadow: 0 0 30px 8px rgba(0, 0, 0, 0.7);
  z-index: 2;
}

.ccm-bh-i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 30px;
  margin: -15px;
  border-radius: 50%;
  background: #1f1f2e;
  color: #ffd479;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font:
    700 12px/1 ui-monospace,
    monospace;
  text-decoration: none;
  border: 1px solid rgba(212, 175, 55, 0.5);
  transform: rotate(var(--a)) translate(80px) rotate(calc(var(--a) * -1));
  transition:
    transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
    background 0.2s,
    color 0.2s,
    box-shadow 0.3s;
  z-index: 3;
}

.ccm-bh:hover .ccm-bh-i {
  transform: rotate(var(--a)) translate(92px) rotate(calc(var(--a) * -1));
  box-shadow: 0 0 12px rgba(212, 175, 55, 0.45);
}

.ccm-bh-i:hover,
.ccm-bh-i:focus-visible {
  background: #ffd479;
  color: #0a0a14;
  transform: rotate(var(--a)) translate(96px) rotate(calc(var(--a) * -1)) scale(1.2);
  z-index: 4;
}

@media (prefers-reduced-motion: reduce) {
  .ccm-holo-rim,
  .ccm-snow-flakes,
  .ccm-orbit-sat,
  .ccm-orbit-i,
  .ccm-solar-o,
  .ccm-solar-o a,
  .ccm-tri-grp,
  .ccm-vinyl-disc,
  .ccm-bh-disk,
  .ccm-neb-cloud,
  .ccm-neb-i {
    animation: none !important;
  }
}

@keyframes ccm-bh-spin { to { transform: rotate(360deg); } }

```

### 20. Chronometer

**Type:** Pure CSS
**Description:** An analog watch face with menu items at hour positions. The second-hand sweeps continuously; click any hour position to "set" the menu (hand snaps to that hour).

**HTML:**
```html
<div class="ccm-chrono">
  <input type="radio" name="ccm-chrono" id="ccm-chrono-3" hidden checked />
  <input type="radio" name="ccm-chrono" id="ccm-chrono-6" hidden />
  <input type="radio" name="ccm-chrono" id="ccm-chrono-9" hidden />
  <input type="radio" name="ccm-chrono" id="ccm-chrono-12" hidden />
  <div class="ccm-chrono-face"></div>
  <div class="ccm-chrono-hand" aria-hidden="true"></div>
  <label for="ccm-chrono-12" class="ccm-chrono-i" style="--a: 0deg" aria-label="12">12</label>
  <label for="ccm-chrono-3" class="ccm-chrono-i" style="--a: 90deg" aria-label="3">3</label>
  <label for="ccm-chrono-6" class="ccm-chrono-i" style="--a: 180deg" aria-label="6">6</label>
  <label for="ccm-chrono-9" class="ccm-chrono-i" style="--a: 270deg" aria-label="9">9</label>
</div>
```

**CSS:**
```css
.ccm-chrono {
  position: relative;
  width: 190px;
  height: 190px;
  display: flex;
  align-items: center;
  justify-content: center;
  --hand: 90deg;
}

.ccm-chrono-face {
  width: 170px;
  height: 170px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #f5f5f5, #d8d8d8);
  border: 3px solid #2a2a3e;
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.15),
    0 4px 12px rgba(0, 0, 0, 0.4);
}

.ccm-chrono-hand {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3px;
  height: 60px;
  margin-left: -1.5px;
  background: #2a2a3e;
  border-radius: 1.5px;
  transform-origin: top center;
  transform: rotate(var(--hand));
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ccm-chrono-hand::after {
  content: "";
  position: absolute;
  bottom: -3px;
  left: -2px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ff3d6e;
}

.ccm-chrono:has(#ccm-chrono-3:checked) {
  --hand: -90deg;
}

.ccm-chrono:has(#ccm-chrono-6:checked) {
  --hand: 0deg;
}

.ccm-chrono:has(#ccm-chrono-9:checked) {
  --hand: 90deg;
}

.ccm-chrono:has(#ccm-chrono-12:checked) {
  --hand: 180deg;
}

.ccm-chrono-i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 28px;
  height: 28px;
  margin: -14px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.05);
  color: #2a2a3e;
  font:
    700 13px/28px Georgia,
    serif;
  text-align: center;
  cursor: pointer;
  transform: rotate(var(--a)) translate(70px) rotate(calc(var(--a) * -1));
  transition:
    background 0.2s,
    color 0.2s;
}

.ccm-chrono-i:hover {
  background: rgba(255, 61, 110, 0.15);
  color: #ff3d6e;
}
```

### 21. Nebula Cloud

**Type:** Pure CSS
**Description:** Items float in a soft glowing nebula cloud with no fixed grid positions. Each item has a subtle drift animation; hovering pulls it forward and brightens the surrounding glow.

**HTML:**
```html
<div class="ccm-neb">
  <div class="ccm-neb-cloud"></div>
  <a href="#" class="ccm-neb-i" style="--x: -50px; --y: -30px; --d: 0s">★</a>
  <a href="#" class="ccm-neb-i" style="--x: 30px; --y: -40px; --d: 1s">✦</a>
  <a href="#" class="ccm-neb-i" style="--x: 60px; --y: 10px; --d: 2s">✧</a>
  <a href="#" class="ccm-neb-i" style="--x: 0px; --y: 30px; --d: 1.5s">◆</a>
  <a href="#" class="ccm-neb-i" style="--x: -60px; --y: 20px; --d: 0.5s">⬢</a>
</div>
```

**CSS:**
```css
.ccm-neb {
  position: relative;
  width: 220px;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ccm-neb-cloud {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 50% at 30% 40%, rgba(124, 108, 255, 0.45), transparent 70%),
    radial-gradient(50% 40% at 70% 60%, rgba(255, 108, 138, 0.4), transparent 70%),
    radial-gradient(45% 35% at 50% 30%, rgba(46, 184, 138, 0.3), transparent 70%);
  filter: blur(10px);
  animation: ccm-neb-drift 10s ease-in-out infinite alternate;
}

.ccm-neb-i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 36px;
  height: 36px;
  margin: -18px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transform: translate(var(--x), var(--y));
  animation: ccm-neb-float 4s ease-in-out var(--d) infinite alternate;
  transition:
    transform 0.3s,
    background 0.2s,
    box-shadow 0.3s;
  z-index: 2;
}

.ccm-neb-i:hover {
  background: rgba(255, 255, 255, 0.25);
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.4);
  transform: translate(var(--x), var(--y)) scale(1.3);
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .ccm-holo-rim,
  .ccm-snow-flakes,
  .ccm-orbit-sat,
  .ccm-orbit-i,
  .ccm-solar-o,
  .ccm-solar-o a,
  .ccm-tri-grp,
  .ccm-vinyl-disc,
  .ccm-bh-disk,
  .ccm-neb-cloud,
  .ccm-neb-i {
    animation: none !important;
  }
}

@keyframes ccm-neb-drift { 0% { transform: translate(0,0) scale(1); } 100% { transform: translate(8px, -6px) scale(1.05); } }

@keyframes ccm-neb-float { to { transform: translate(calc(var(--x) + 4px), calc(var(--y) - 4px)); } }

```

---
## 18 CSS Close Buttons

URL: https://codefronts.com/components/css-close-buttons/
Description: 18 hand-coded CSS close buttons — rotate, magnetic cross, liquid pop, glitch, ink ripple, hold-to-confirm, origami crease and more. Pure CSS, drop-in ready.
Demo count: 18

### 01. Origami Crease

**Type:** Pure CSS
**Description:** The X is rendered as two thin paper-fold creases — on hover the button collapses inward via clip-path like an origami fold, leaving a tight diamond that vanishes.

**HTML:**
```html
<button class="ccb-origami" aria-label="Close"><span></span><span></span></button>
```

**CSS:**
```css
.ccb-origami {
  width: 40px; height: 40px;
  border: none;
  background: linear-gradient(135deg, #f0eeff 0%, #e8e4ff 50%, #d4ccff 51%, #c4b8ff 100%);
  position: relative; cursor: pointer;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  transition: clip-path 0.45s cubic-bezier(0.65,0,0.35,1), transform 0.45s;
  box-shadow: 0 2px 6px rgba(60,40,140,0.2), inset -1px -1px 0 rgba(0,0,0,0.04);
}
.ccb-origami span {
  position: absolute; top: 50%; left: 50%;
  width: 18px; height: 1.5px;
  background: #1a1a2e; border-radius: 1px;
  box-shadow: 0 0.5px 0 rgba(255,255,255,0.6);
}
.ccb-origami span:nth-child(1) { transform: translate(-50%,-50%) rotate(45deg); }
.ccb-origami span:nth-child(2) { transform: translate(-50%,-50%) rotate(-45deg); }
.ccb-origami:hover {
  clip-path: polygon(50% 12%, 88% 50%, 50% 88%, 12% 50%);
  transform: rotate(45deg) scale(0.9);
}
.ccb-origami:active {
  clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
  transform: rotate(90deg) scale(0.6);
}
```

### 02. Lock Tumble

**Type:** CSS + JS
**Description:** A padlock chrome with a shackle that tumbles open on click — the X aligns into the lock body as it unlocks. Premium choice for "remove from saved" and "unlock to dismiss" flows.

**HTML:**
```html
<button class="ccb-lock" aria-label="Unlock and close">
  <span class="ccb-lock-shackle"></span
  ><span class="ccb-lock-body"
    ><span class="ccb-lock-x1"></span><span class="ccb-lock-x2"></span
  ></span>
</button>
```

**CSS:**
```css
.ccb-lock {
  width: 40px; height: 48px;
  border: none; background: transparent;
  position: relative; cursor: pointer;
  padding: 0;
}
.ccb-lock-shackle {
  position: absolute; top: 4px; left: 50%;
  width: 20px; height: 18px;
  border: 2.5px solid #f5a623;
  border-bottom: none;
  border-radius: 10px 10px 0 0;
  transform: translateX(-50%);
  transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1), border-color 0.3s;
  transform-origin: bottom right;
}
.ccb-lock-body {
  position: absolute; bottom: 0; left: 50%;
  width: 30px; height: 26px;
  background: #f5a623;
  border-radius: 5px;
  transform: translateX(-50%);
  transition: background 0.3s;
}
.ccb-lock-x1, .ccb-lock-x2 {
  position: absolute; top: 50%; left: 50%;
  width: 12px; height: 2px;
  background: #1a1a2e; border-radius: 1px;
  transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
.ccb-lock-x1 { transform: translate(-50%,-50%) rotate(45deg); }
.ccb-lock-x2 { transform: translate(-50%,-50%) rotate(-45deg); }
.ccb-lock.is-open .ccb-lock-shackle {
  transform: translateX(-50%) rotate(40deg) translate(4px,-2px);
  border-color: #2ecc8a;
}
.ccb-lock.is-open .ccb-lock-body { background: #2ecc8a; }
.ccb-lock.is-open .ccb-lock-x1 { transform: translate(-50%,-50%) rotate(0deg)  scaleX(1.1); }
.ccb-lock.is-open .ccb-lock-x2 { transform: translate(-50%,-50%) rotate(90deg) scaleX(1.1); }
.ccb-lock:hover .ccb-lock-shackle { border-color: #fbbf24; }
```

**JS:**
```js
document.querySelectorAll('.ccb-lock').forEach(function(btn) {
  btn.addEventListener('click', function() {
    btn.classList.toggle('is-open');
  });
});
```

### 03. Rotate Out

**Type:** Pure CSS
**Description:** A timeless close button — the X rotates 90° and the chrome scales up subtly on hover. The benchmark every dismiss button is measured against.

**HTML:**
```html
<button class="ccb-rotate" aria-label="Close"><span></span><span></span></button>
```

**CSS:**
```css
.ccb-rotate {
  width: 36px; height: 36px;
  border: none; border-radius: 50%;
  background: rgba(255,255,255,0.06);
  position: relative; cursor: pointer;
  transition: background 0.2s, transform 0.3s;
}
.ccb-rotate span {
  position: absolute; top: 50%; left: 50%;
  width: 16px; height: 2px;
  background: #f0eeff; border-radius: 2px;
  transform-origin: center;
}
.ccb-rotate span:nth-child(1) { transform: translate(-50%,-50%) rotate(45deg); }
.ccb-rotate span:nth-child(2) { transform: translate(-50%,-50%) rotate(-45deg); }
.ccb-rotate:hover {
  background: rgba(255,108,138,0.18);
  transform: rotate(90deg) scale(1.08);
}
.ccb-rotate:hover span { background: #ff6c8a; }
```

### 04. Magnetic Cross

**Type:** Pure CSS
**Description:** Two stubby horizontal bars sit apart at rest — on hover they magnetically pull toward each other and snap into a perfect X. Hyper-clean micro-interaction.

**HTML:**
```html
<button class="ccb-magnet" aria-label="Close"><span></span><span></span></button>
```

**CSS:**
```css
.ccb-magnet {
  width: 38px; height: 38px;
  border: 1px solid rgba(124,108,255,0.3);
  border-radius: 8px;
  background: #17171f;
  position: relative; cursor: pointer;
  transition: border-color 0.25s, background 0.25s;
}
.ccb-magnet span {
  position: absolute; top: 50%; left: 50%;
  width: 6px; height: 2px;
  background: #7c6cff; border-radius: 2px;
  transition: width 0.25s ease, transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
.ccb-magnet span:nth-child(1) { transform: translate(-130%,-50%) rotate(0deg); }
.ccb-magnet span:nth-child(2) { transform: translate(30%,-50%)   rotate(0deg); }
.ccb-magnet:hover { border-color: #7c6cff; background: rgba(124,108,255,0.08); }
.ccb-magnet:hover span { width: 16px; }
.ccb-magnet:hover span:nth-child(1) { transform: translate(-50%,-50%) rotate(45deg); }
.ccb-magnet:hover span:nth-child(2) { transform: translate(-50%,-50%) rotate(-45deg); }
```

### 05. Liquid Pop

**Type:** Pure CSS
**Description:** The circular blob morphs into a soft squashed pill on hover, then springs back releasing a tighter X. Feels rubbery and alive.

**HTML:**
```html
<button class="ccb-liquid" aria-label="Close"><span></span><span></span></button>
```

**CSS:**
```css
.ccb-liquid {
  width: 38px; height: 38px;
  border: none; border-radius: 50%;
  background: linear-gradient(135deg, #7c6cff, #a78bfa);
  position: relative; cursor: pointer;
  transition: border-radius 0.4s cubic-bezier(0.68,-0.55,0.27,1.55), transform 0.4s cubic-bezier(0.68,-0.55,0.27,1.55);
}
.ccb-liquid span {
  position: absolute; top: 50%; left: 50%;
  width: 14px; height: 2px;
  background: #fff; border-radius: 2px;
  transition: transform 0.35s cubic-bezier(0.68,-0.55,0.27,1.55);
}
.ccb-liquid span:nth-child(1) { transform: translate(-50%,-50%) rotate(45deg); }
.ccb-liquid span:nth-child(2) { transform: translate(-50%,-50%) rotate(-45deg); }
.ccb-liquid:hover { border-radius: 30% 70% 70% 30% / 50% 50% 50% 50%; transform: scale(0.92); }
.ccb-liquid:hover span:nth-child(1) { transform: translate(-50%,-50%) rotate(135deg) scaleX(1.15); }
.ccb-liquid:hover span:nth-child(2) { transform: translate(-50%,-50%) rotate(-135deg) scaleX(1.15); }
```

### 06. Glitch Cross

**Type:** Pure CSS
**Description:** RGB-split glitch shudders across the X every few seconds — a constant micro-twitch that screams sci-fi UI panel.

**HTML:**
```html
<button class="ccb-glitch" aria-label="Close"><span class="ccb-g-x">✕</span></button>
```

**CSS:**
```css
.ccb-glitch {
  width: 38px; height: 38px;
  border: 1px solid rgba(46,204,138,0.3);
  background: #0c0c12;
  font-size: 16px; font-weight: 700;
  cursor: pointer; position: relative;
  color: #2ecc8a;
}
.ccb-g-x { position: relative; z-index: 1; }
.ccb-glitch::before, .ccb-glitch::after {
  content: '✕';
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 700;
}
.ccb-glitch::before { color: #ff6c8a; clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%); animation: ccb-gl-t 2.4s infinite steps(2); }
.ccb-glitch::after  { color: #7c6cff; clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%); animation: ccb-gl-b 2.4s infinite steps(2); }
.ccb-glitch:hover::before, .ccb-glitch:hover::after { animation-duration: 0.3s; }
@keyframes ccb-gl-t { 0%,90% { transform: translateX(0); } 92% { transform: translateX(-3px); } 94% { transform: translateX(3px); } 100% { transform: translateX(0); } }
@keyframes ccb-gl-b { 0%,90% { transform: translateX(0); } 92% { transform: translateX(3px);  } 94% { transform: translateX(-3px); } 100% { transform: translateX(0); } }

@media (prefers-reduced-motion: reduce) {
  .ccb-glitch,
  .ccb-glitch * {
    animation: none !important;
  }
}

```

### 07. Trash Compactor

**Type:** CSS + JS
**Description:** Click and the entire button squashes vertically like a trash compactor crushing it into nothing. A satisfying physical metaphor for dismissal.

**HTML:**
```html
<button class="ccb-compact" aria-label="Close"><span></span><span></span></button>
```

**CSS:**
```css
.ccb-compact {
  width: 40px; height: 40px;
  border: none; border-radius: 8px;
  background: linear-gradient(180deg, #2a2a3e, #1a1a28);
  box-shadow: 0 4px 12px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.06);
  position: relative; cursor: pointer;
  transition: transform 0.35s cubic-bezier(0.55,0,0.45,1), opacity 0.35s;
  transform-origin: center bottom;
}
.ccb-compact span {
  position: absolute; top: 50%; left: 50%;
  width: 16px; height: 2px;
  background: #f0eeff; border-radius: 2px;
}
.ccb-compact span:nth-child(1) { transform: translate(-50%,-50%) rotate(45deg); }
.ccb-compact span:nth-child(2) { transform: translate(-50%,-50%) rotate(-45deg); }
.ccb-compact.is-crushed { transform: scaleY(0.08) scaleX(1.3); opacity: 0; }
```

**JS:**
```js
document.querySelectorAll('.ccb-compact').forEach(function(btn) {
  btn.addEventListener('click', function() {
    btn.classList.add('is-crushed');
    setTimeout(function() { btn.classList.remove('is-crushed'); }, 800);
  });
});
```

### 08. Inkwell Ripple

**Type:** CSS + JS
**Description:** Click triggers a dark ink drop that ripples outward and swallows the X for a moment. The X re-emerges when the ink drains.

**HTML:**
```html
<button class="ccb-ink" aria-label="Close"><span></span><span></span></button>
```

**CSS:**
```css
.ccb-ink {
  width: 40px; height: 40px;
  border: none; border-radius: 50%;
  background: #f0eeff;
  position: relative; cursor: pointer;
  overflow: hidden;
}
.ccb-ink span {
  position: absolute; top: 50%; left: 50%;
  width: 16px; height: 2px;
  background: #1a1a28; border-radius: 2px;
  z-index: 2;
  transition: background 0.3s;
}
.ccb-ink span:nth-child(1) { transform: translate(-50%,-50%) rotate(45deg); }
.ccb-ink span:nth-child(2) { transform: translate(-50%,-50%) rotate(-45deg); }
.ccb-ink-drop {
  position: absolute; top: 50%; left: 50%;
  width: 8px; height: 8px;
  background: #1a1a28; border-radius: 50%;
  transform: translate(-50%,-50%) scale(0);
  z-index: 1; pointer-events: none;
}
.ccb-ink.is-poured .ccb-ink-drop { animation: ccb-ink-pour 0.9s ease-out forwards; }
.ccb-ink.is-poured span { background: #f0eeff; }
@keyframes ccb-ink-pour {
  0%   { transform: translate(-50%,-50%) scale(0); }
  40%  { transform: translate(-50%,-50%) scale(8); }
  60%  { transform: translate(-50%,-50%) scale(8); }
  100% { transform: translate(-50%,-50%) scale(0); }
}

@media (prefers-reduced-motion: reduce) {
  .ccb-ink,
  .ccb-ink * {
    animation: none !important;
  }
}

```

**JS:**
```js
document.querySelectorAll('.ccb-ink').forEach(function(btn) {
  btn.addEventListener('click', function() {
    if (btn.classList.contains('is-poured')) return;
    var drop = document.createElement('span');
    drop.className = 'ccb-ink-drop';
    btn.appendChild(drop);
    btn.classList.add('is-poured');
    setTimeout(function() {
      btn.classList.remove('is-poured');
      drop.remove();
    }, 900);
  });
});
```

### 09. Particle Burst

**Type:** CSS + JS
**Description:** On click, eight small dots fan out radially from the centre and fade — the X dissolves into particles. CSS-driven, fully animated.

**HTML:**
```html
<button class="ccb-burst" aria-label="Close">
  <span class="ccb-burst-x"></span><span class="ccb-burst-x"></span>
</button>
```

**CSS:**
```css
.ccb-burst {
  width: 40px; height: 40px;
  border: none; border-radius: 50%;
  background: #ff6c8a;
  box-shadow: 0 4px 18px rgba(255,108,138,0.4);
  position: relative; cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}
.ccb-burst:hover { transform: scale(1.08); box-shadow: 0 6px 24px rgba(255,108,138,0.55); }
.ccb-burst-x {
  position: absolute; top: 50%; left: 50%;
  width: 16px; height: 2px;
  background: #fff; border-radius: 2px;
  transition: opacity 0.15s;
}
.ccb-burst-x:nth-child(1) { transform: translate(-50%,-50%) rotate(45deg); }
.ccb-burst-x:nth-child(2) { transform: translate(-50%,-50%) rotate(-45deg); }
.ccb-burst.is-burst .ccb-burst-x { opacity: 0; }
.ccb-burst-particle {
  position: absolute; top: 50%; left: 50%;
  width: 5px; height: 5px;
  background: #fff; border-radius: 50%;
  pointer-events: none;
  animation: ccb-particle 0.7s ease-out forwards;
}
@keyframes ccb-particle {
  0%   { transform: translate(-50%,-50%) rotate(var(--a)) translateX(0)    scale(1); opacity: 1; }
  100% { transform: translate(-50%,-50%) rotate(var(--a)) translateX(28px) scale(0); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ccb-burst,
  .ccb-burst * {
    animation: none !important;
  }
}

```

**JS:**
```js
document.querySelectorAll('.ccb-burst').forEach(function(btn) {
  btn.addEventListener('click', function() {
    if (btn.classList.contains('is-burst')) return;
    btn.classList.add('is-burst');
    for (var i = 0; i < 8; i++) {
      var p = document.createElement('span');
      p.className = 'ccb-burst-particle';
      p.style.setProperty('--a', (i * 45) + 'deg');
      btn.appendChild(p);
      (function(node) { setTimeout(function() { node.remove(); }, 700); })(p);
    }
    setTimeout(function() { btn.classList.remove('is-burst'); }, 700);
  });
});
```

### 10. Snap Cross

**Type:** Pure CSS
**Description:** Two diagonal bars fly in from off-button and snap together with an overshoot bounce on first paint. Perfect for things that just appeared.

**HTML:**
```html
<button class="ccb-snap" aria-label="Close"><span></span><span></span></button>
```

**CSS:**
```css
.ccb-snap {
  width: 38px; height: 38px;
  border: 1px solid rgba(245,166,35,0.3);
  border-radius: 8px;
  background: rgba(245,166,35,0.12);
  position: relative; cursor: pointer; overflow: hidden;
  transition: background 0.2s;
}
.ccb-snap:hover { background: rgba(245,166,35,0.22); }
.ccb-snap span {
  position: absolute; top: 50%; left: 50%;
  width: 16px; height: 2px;
  background: #f5a623; border-radius: 2px;
  animation: ccb-snap-tl 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}
.ccb-snap span:nth-child(1) { animation-name: ccb-snap-tl; }
.ccb-snap span:nth-child(2) { animation-name: ccb-snap-tr; animation-delay: 0.05s; }
@keyframes ccb-snap-tl {
  0%       { transform: translate(-300%,-300%) rotate(45deg); opacity: 0; }
  60%,100% { transform: translate(-50%,-50%)   rotate(45deg); opacity: 1; }
}
@keyframes ccb-snap-tr {
  0%       { transform: translate(200%,-300%)  rotate(-45deg); opacity: 0; }
  60%,100% { transform: translate(-50%,-50%)   rotate(-45deg); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .ccb-snap,
  .ccb-snap * {
    animation: none !important;
  }
}

```

### 11. Neon Etch

**Type:** Pure CSS
**Description:** An outlined neon X sits inside a transparent ring with a slow breathing glow — built for dark dashboards and admin panels.

**HTML:**
```html
<button class="ccb-neon" aria-label="Close"><span></span><span></span></button>
```

**CSS:**
```css
.ccb-neon {
  width: 40px; height: 40px;
  border: 1.5px solid #2ecc8a;
  border-radius: 50%;
  background: transparent;
  box-shadow: 0 0 8px rgba(46,204,138,0.35), inset 0 0 8px rgba(46,204,138,0.15);
  position: relative; cursor: pointer;
  animation: ccb-neon-breathe 2.4s ease-in-out infinite;
  transition: transform 0.2s;
}
.ccb-neon:hover { transform: scale(1.1); }
.ccb-neon span {
  position: absolute; top: 50%; left: 50%;
  width: 16px; height: 2px;
  background: #2ecc8a;
  border-radius: 2px;
  box-shadow: 0 0 6px rgba(46,204,138,0.7);
}
.ccb-neon span:nth-child(1) { transform: translate(-50%,-50%) rotate(45deg); }
.ccb-neon span:nth-child(2) { transform: translate(-50%,-50%) rotate(-45deg); }
@keyframes ccb-neon-breathe {
  0%,100% { box-shadow: 0 0 8px  rgba(46,204,138,0.35), inset 0 0 8px  rgba(46,204,138,0.15); }
  50%      { box-shadow: 0 0 18px rgba(46,204,138,0.7),  inset 0 0 14px rgba(46,204,138,0.3); }
}

@media (prefers-reduced-motion: reduce) {
  .ccb-neon,
  .ccb-neon * {
    animation: none !important;
  }
}

```

### 12. Ribbon Tag

**Type:** Pure CSS
**Description:** Looks like a removable label/sticker — the X is integrated into a tag-shaped chrome with a notched left edge. Perfect for filter chips.

**HTML:**
```html
<button class="ccb-tag" aria-label="Remove tag">React<span class="ccb-tag-x"></span></button>
```

**CSS:**
```css
.ccb-tag {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px 7px 18px;
  border: none;
  background: rgba(124,108,255,0.15);
  color: #a78bfa;
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  clip-path: polygon(8px 0, 100% 0, 100% 100%, 8px 100%, 0 50%);
  transition: background 0.2s, color 0.2s;
}
.ccb-tag:hover { background: rgba(124,108,255,0.3); color: #fff; }
.ccb-tag-x {
  position: relative;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  display: inline-block;
  transition: background 0.2s;
}
.ccb-tag-x::before, .ccb-tag-x::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 7px; height: 1.5px;
  background: currentColor; border-radius: 1px;
}
.ccb-tag-x::before { transform: translate(-50%,-50%) rotate(45deg); }
.ccb-tag-x::after  { transform: translate(-50%,-50%) rotate(-45deg); }
.ccb-tag:hover .ccb-tag-x { background: rgba(255,255,255,0.3); }
```

### 13. Fold Away

**Type:** Pure CSS
**Description:** On hover the button physically folds away on its Y-axis like a closing book — 3D rotateY with perspective for a tactile dismissal.

**HTML:**
```html
<button class="ccb-fold" aria-label="Close"><span></span><span></span></button>
```

**CSS:**
```css
.ccb-fold {
  width: 40px; height: 40px;
  border: none; border-radius: 8px;
  background: linear-gradient(135deg, #7c6cff, #ff6c8a);
  position: relative; cursor: pointer;
  perspective: 200px;
  transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(0.65,0,0.35,1);
}
.ccb-fold span {
  position: absolute; top: 50%; left: 50%;
  width: 16px; height: 2px;
  background: #fff; border-radius: 2px;
  backface-visibility: hidden;
}
.ccb-fold span:nth-child(1) { transform: translate(-50%,-50%) rotate(45deg); }
.ccb-fold span:nth-child(2) { transform: translate(-50%,-50%) rotate(-45deg); }
.ccb-fold:hover  { transform: rotateY(75deg); }
.ccb-fold:active { transform: rotateY(180deg); }
```

### 14. Hold to Confirm

**Type:** CSS + JS
**Description:** A safety net for destructive actions — press and hold for 800ms while the ring fills clockwise, release early to cancel. Releases on full ring.

**HTML:**
```html
<button class="ccb-hold" aria-label="Hold to close">
  <svg viewBox="0 0 40 40" class="ccb-hold-ring"><circle cx="20" cy="20" r="18" /></svg><span></span
  ><span></span>
</button>
```

**CSS:**
```css
.ccb-hold {
  width: 40px; height: 40px;
  border: none; border-radius: 50%;
  background: rgba(255,108,138,0.12);
  position: relative; cursor: pointer;
  transition: background 0.2s;
}
.ccb-hold:hover { background: rgba(255,108,138,0.2); }
.ccb-hold-ring {
  position: absolute; inset: 0; width: 100%; height: 100%;
  transform: rotate(-90deg); pointer-events: none;
}
.ccb-hold-ring circle {
  fill: none; stroke: #ff6c8a; stroke-width: 2;
  stroke-dasharray: 113; stroke-dashoffset: 113;
  transition: stroke-dashoffset 0.05s linear;
}
.ccb-hold.is-holding .ccb-hold-ring circle {
  transition: stroke-dashoffset 0.8s linear;
  stroke-dashoffset: 0;
}
.ccb-hold span {
  position: absolute; top: 50%; left: 50%;
  width: 14px; height: 2px;
  background: #ff6c8a; border-radius: 2px;
}
.ccb-hold span:nth-child(2) { transform: translate(-50%,-50%) rotate(45deg); }
.ccb-hold span:nth-child(3) { transform: translate(-50%,-50%) rotate(-45deg); }
.ccb-hold.is-confirmed { background: rgba(46,204,138,0.25); transform: scale(1.1); }
.ccb-hold.is-confirmed span { background: #2ecc8a; }
.ccb-hold.is-confirmed .ccb-hold-ring circle { stroke: #2ecc8a; }
```

**JS:**
```js
document.querySelectorAll('.ccb-hold').forEach(function(btn) {
  var timer;
  function start() {
    btn.classList.add('is-holding');
    timer = setTimeout(function() {
      btn.classList.remove('is-holding');
      btn.classList.add('is-confirmed');
      setTimeout(function() { btn.classList.remove('is-confirmed'); }, 600);
    }, 800);
  }
  function cancel() {
    clearTimeout(timer);
    btn.classList.remove('is-holding');
  }
  btn.addEventListener('mousedown', start);
  btn.addEventListener('touchstart', start, { passive: true });
  btn.addEventListener('mouseup',    cancel);
  btn.addEventListener('mouseleave', cancel);
  btn.addEventListener('touchend',   cancel);
});
```

### 15. Toast Dismiss

**Type:** CSS + JS
**Description:** A fully-fledged toast notification with an X — clicking slides the toast off-canvas to the right while fading, the way a real production toast behaves.

**HTML:**
```html
<div class="ccb-toast">
  <span class="ccb-toast-dot"></span><span class="ccb-toast-msg">Saved successfully</span
  ><button class="ccb-toast-x" aria-label="Dismiss"><span></span><span></span></button>
</div>
```

**CSS:**
```css
.ccb-toast {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 8px 10px 14px;
  border-radius: 10px;
  background: #1a1a28;
  border: 1px solid rgba(46,204,138,0.25);
  color: #f0eeff; font-size: 13px; font-weight: 500;
  box-shadow: 0 6px 20px rgba(0,0,0,0.4);
  transition: transform 0.45s cubic-bezier(0.55,0,0.45,1), opacity 0.45s;
}
.ccb-toast.is-out { transform: translateX(120%); opacity: 0; }
.ccb-toast-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #2ecc8a; box-shadow: 0 0 8px rgba(46,204,138,0.5);
}
.ccb-toast-msg { white-space: nowrap; }
.ccb-toast-x {
  width: 22px; height: 22px;
  border: none; border-radius: 6px;
  background: transparent;
  position: relative; cursor: pointer;
  transition: background 0.2s;
}
.ccb-toast-x:hover { background: rgba(255,255,255,0.08); }
.ccb-toast-x span {
  position: absolute; top: 50%; left: 50%;
  width: 10px; height: 1.5px;
  background: #6b6987; border-radius: 1px;
  transition: background 0.2s;
}
.ccb-toast-x:hover span { background: #f0eeff; }
.ccb-toast-x span:nth-child(1) { transform: translate(-50%,-50%) rotate(45deg); }
.ccb-toast-x span:nth-child(2) { transform: translate(-50%,-50%) rotate(-45deg); }
```

**JS:**
```js
document.querySelectorAll('.ccb-toast').forEach(function(toast) {
  var x = toast.querySelector('.ccb-toast-x');
  if (!x) return;
  x.addEventListener('click', function() {
    toast.classList.add('is-out');
    setTimeout(function() { toast.classList.remove('is-out'); }, 1400);
  });
});
```

### 16. Modal Corner

**Type:** Pure CSS
**Description:** A larger absolute-positioned corner X — the kind you put on lightboxes and image galleries. Hover leaves a soft purple trail behind the cursor.

**HTML:**
```html
<button class="ccb-corner" aria-label="Close modal"><span></span><span></span></button>
```

**CSS:**
```css
.ccb-corner {
  width: 48px; height: 48px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  position: relative; cursor: pointer; overflow: hidden;
  transition: background 0.25s, border-color 0.25s;
}
.ccb-corner::before {
  content: ''; position: absolute; inset: -50%;
  background: radial-gradient(circle at center, rgba(124,108,255,0.4) 0%, transparent 60%);
  opacity: 0; transition: opacity 0.3s;
}
.ccb-corner:hover { background: rgba(255,255,255,0.1); border-color: rgba(124,108,255,0.4); }
.ccb-corner:hover::before { opacity: 1; }
.ccb-corner span {
  position: absolute; top: 50%; left: 50%;
  width: 18px; height: 2px;
  background: #f0eeff; border-radius: 2px;
  z-index: 1;
  transition: background 0.25s, transform 0.3s;
}
.ccb-corner span:nth-child(1) { transform: translate(-50%,-50%) rotate(45deg); }
.ccb-corner span:nth-child(2) { transform: translate(-50%,-50%) rotate(-45deg); }
.ccb-corner:hover span { background: #fff; }
.ccb-corner:hover span:nth-child(1) { transform: translate(-50%,-50%) rotate(135deg); }
.ccb-corner:hover span:nth-child(2) { transform: translate(-50%,-50%) rotate(-135deg); }
```

### 17. Brutalist Stamp

**Type:** Pure CSS
**Description:** A bold offset-shadow stamp button straight from the brutalist playbook — hard edges, monospace label "DISMISS", press collapses into the shadow.

**HTML:**
```html
<button class="ccb-brutalist" aria-label="Dismiss">
  <span class="ccb-brutalist-x"></span>DISMISS
</button>
```

**CSS:**
```css
.ccb-brutalist {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 16px 10px 12px;
  border: 2px solid #f0eeff;
  border-radius: 0;
  background: #f0eeff;
  color: #111118;
  font-family: monospace; font-size: 12px; font-weight: 800;
  letter-spacing: 0.12em;
  cursor: pointer;
  box-shadow: 5px 5px 0 #ff6c8a;
  transition: transform 0.1s, box-shadow 0.1s;
}
.ccb-brutalist:hover  { transform: translate(-1px,-1px); box-shadow: 6px 6px 0 #ff6c8a; }
.ccb-brutalist:active { transform: translate(5px,5px);   box-shadow: 0 0 0 #ff6c8a; }
.ccb-brutalist-x {
  position: relative;
  width: 14px; height: 14px;
  display: inline-block;
}
.ccb-brutalist-x::before, .ccb-brutalist-x::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 14px; height: 2.5px;
  background: #111118;
}
.ccb-brutalist-x::before { transform: translate(-50%,-50%) rotate(45deg); }
.ccb-brutalist-x::after  { transform: translate(-50%,-50%) rotate(-45deg); }
```

### 18. Galaxy Vortex

**Type:** Pure CSS
**Description:** A conic-gradient vortex swirls slowly behind the X at rest, then accelerates dramatically on hover — the ultimate premium "this is special" close button.

**HTML:**
```html
<button class="ccb-vortex" aria-label="Close"><span></span><span></span></button>
```

**CSS:**
```css
.ccb-vortex {
  width: 44px; height: 44px;
  border: none; border-radius: 50%;
  background: #0c0c12;
  position: relative; cursor: pointer; overflow: hidden;
  isolation: isolate;
}
.ccb-vortex::before {
  content: ''; position: absolute; inset: -25%;
  background: conic-gradient(from 0deg, #7c6cff, #ff6c8a, #f5a623, #2ecc8a, #06b6d4, #7c6cff);
  animation: ccb-vortex-spin 6s linear infinite;
  z-index: -2;
}
.ccb-vortex::after {
  content: ''; position: absolute; inset: 2px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #1a1a28, #0c0c12 70%);
  z-index: -1;
}
.ccb-vortex:hover::before { animation-duration: 1.2s; }
.ccb-vortex span {
  position: absolute; top: 50%; left: 50%;
  width: 18px; height: 2px;
  background: #fff; border-radius: 2px;
  box-shadow: 0 0 8px rgba(255,255,255,0.6);
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
.ccb-vortex span:nth-child(1) { transform: translate(-50%,-50%) rotate(45deg); }
.ccb-vortex span:nth-child(2) { transform: translate(-50%,-50%) rotate(-45deg); }
.ccb-vortex:hover span:nth-child(1) { transform: translate(-50%,-50%) rotate(135deg) scale(1.1); }
.ccb-vortex:hover span:nth-child(2) { transform: translate(-50%,-50%) rotate(-135deg) scale(1.1); }
@keyframes ccb-vortex-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .ccb-vortex,
  .ccb-vortex * {
    animation: none !important;
  }
}

```

---
## 12 CSS Code Blocks

URL: https://codefronts.com/snippets/css-code-blocks/
Description: Twelve hand-coded CSS code block patterns covering every developer surface: minimalist dark and light modes, a Mac terminal CSS code block with traffic-light chrome, a CSS code block with copy button, a CSS code block with line numbers driven by counter-increment, a mobile-responsive overflow / word-wrap pair, neon glow, a glassmorphism code block, inline <code> pill styling, neumorphic embedded, split-pane code plus live preview, and a pure-CSS expandable wrapper. Accessible, mobile-first, scoped per-demo classes, MIT-licensed.
Demo count: 12

### 01. Minimalist Dark Mode Code Box

**Type:** Pure CSS
**Description:** A clean, high-contrast dark code container on a deep navy gradient with a glowing left-accent border, JetBrains Mono type, subtle line numbers, and a muted meta bar carrying a colored language tag. Best for documentation hero blocks, blog post code samples, marketing pages, and any dark-themed dev site that needs a single focal code reference.

**HTML:**
```html
<section class="ccb-mdm" aria-label="Minimalist dark mode code box demo">
  <div class="ccb-mdm__card">
    <div class="ccb-mdm__meta">
      <span class="ccb-mdm__dot" aria-hidden="true"></span> session.ts
      <span class="ccb-mdm__lang">TypeScript</span>
    </div>
    <pre class="ccb-mdm__pre"><code><span class="ccb-mdm__ln">1</span><span class="ccb-mdm__c">// resolve an active session token</span>
<span class="ccb-mdm__ln">2</span><span class="ccb-mdm__k">export async function</span> <span class="ccb-mdm__f">getSession</span>(id: <span class="ccb-mdm__k">string</span>) {
<span class="ccb-mdm__ln">3</span>  <span class="ccb-mdm__k">const</span> token = <span class="ccb-mdm__k">await</span> <span class="ccb-mdm__f">cache</span>.<span class="ccb-mdm__f">read</span>(<span class="ccb-mdm__s">`sess:${id}`</span>);
<span class="ccb-mdm__ln">4</span>  <span class="ccb-mdm__k">if</span> (!token) <span class="ccb-mdm__k">return</span> <span class="ccb-mdm__n">null</span>;
<span class="ccb-mdm__ln">5</span>  <span class="ccb-mdm__k">return</span> { id, token, ttl: <span class="ccb-mdm__n">3600</span> };
<span class="ccb-mdm__ln">6</span>}</code></pre>
  </div>
</section>
```

**CSS:**
```css
/* ─── 01 Minimalist Dark Mode Code Box ──────── */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=Sora:wght@400;600;800&display=swap');

.ccb-mdm {
  --ccb-mdm-bg: #0b0f1a;
  --ccb-mdm-panel: #0f172a;
  --ccb-mdm-panel-2: #111a30;
  --ccb-mdm-ink: #e2e8f0;
  --ccb-mdm-muted: #64748b;
  --ccb-mdm-accent: #38bdf8;
  --ccb-mdm-line: rgba(148,163,184,.08);

  width: 100%;
  min-height: 320px;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(900px 500px at 85% -10%, rgba(56,189,248,.10), transparent 60%),
    radial-gradient(700px 400px at 0% 110%, rgba(129,140,248,.08), transparent 55%),
    var(--ccb-mdm-bg);
  color: var(--ccb-mdm-ink);
  font-family: 'Sora', sans-serif;
  padding: 36px 22px;
  box-sizing: border-box;
}
.ccb-mdm *, .ccb-mdm *::before, .ccb-mdm *::after { box-sizing: border-box; }

.ccb-mdm__card {
  position: relative;
  width: 100%; max-width: 620px;
  background: linear-gradient(180deg, var(--ccb-mdm-panel), var(--ccb-mdm-panel-2));
  border: 1px solid var(--ccb-mdm-line);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 30px 80px -30px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.03);
}
.ccb-mdm__card::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, var(--ccb-mdm-accent), #818cf8);
  box-shadow: 0 0 24px rgba(56,189,248,.6);
}
.ccb-mdm__meta {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 22px 12px 24px;
  border-bottom: 1px solid var(--ccb-mdm-line);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ccb-mdm-muted);
}
.ccb-mdm__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ccb-mdm-accent);
  box-shadow: 0 0 10px var(--ccb-mdm-accent);
}
.ccb-mdm__lang { margin-left: auto; color: var(--ccb-mdm-accent); font-weight: 700; }
.ccb-mdm__pre {
  margin: 0; padding: 20px 24px 24px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13.5px; line-height: 1.85;
  overflow-x: auto;
  color: #cbd5e1;
}
.ccb-mdm__pre code { display: block; white-space: pre; }
.ccb-mdm__ln  { color: #334155; user-select: none; display: inline-block; width: 2.2em; text-align: right; margin-right: 1.4em; }
.ccb-mdm__k   { color: #c084fc; }
.ccb-mdm__f   { color: #38bdf8; }
.ccb-mdm__s   { color: #34d399; }
.ccb-mdm__c   { color: #475569; font-style: italic; }
.ccb-mdm__n   { color: #fbbf24; }
.ccb-mdm__pre::-webkit-scrollbar       { height: 8px; }
.ccb-mdm__pre::-webkit-scrollbar-thumb { background: rgba(148,163,184,.2); border-radius: 8px; }
```

### 02. Mac-Style Window Container

**Type:** Pure CSS
**Description:** A floating macOS-style window with the canonical red / yellow / green traffic-light controls and a filename in the title bar, sitting on a soft pastel gradient with a 3D tilt that straightens on hover. Best for product hero sections, landing-page demos, slide thumbnails, and any place a code sample needs to feel like a real app surface instead of a flat block.

**HTML:**
```html
<section class="ccb-mac" aria-label="Mac-style window code block demo">
  <div class="ccb-mac__scene">
    <div class="ccb-mac__window">
      <div class="ccb-mac__titlebar">
        <div class="ccb-mac__traffic" aria-hidden="true">
          <span class="ccb-mac__red"></span>
          <span class="ccb-mac__yellow"></span>
          <span class="ccb-mac__green"></span>
        </div>
        <div class="ccb-mac__filename">App.jsx — codefronts</div>
      </div>
      <pre class="ccb-mac__pre"><code><span class="ccb-mac__c">// floating window component</span>
<span class="ccb-mac__k">import</span> { useState } <span class="ccb-mac__k">from</span> <span class="ccb-mac__s">'react'</span>;

<span class="ccb-mac__k">export default function</span> <span class="ccb-mac__f">App</span>() {
  <span class="ccb-mac__k">const</span> [open, setOpen] = <span class="ccb-mac__f">useState</span>(<span class="ccb-mac__t">true</span>);
  <span class="ccb-mac__k">return</span> open &amp;&amp; <span class="ccb-mac__f">&lt;Panel</span> title=<span class="ccb-mac__s">"Terminal"</span> <span class="ccb-mac__f">/&gt;</span>;
}</code></pre>
    </div>
  </div>
</section>
```

**CSS:**
```css
/* ─── 02 Mac-Style Window Container ──────── */
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&family=Outfit:wght@400;600;700&display=swap');

.ccb-mac {
  width: 100%;
  min-height: 320px;
  font-family: 'Outfit', sans-serif;
  background: linear-gradient(135deg, #fbe6c8 0%, #f5b1b1 35%, #c7a6f0 70%, #9ad7f0 100%);
  display: flex; align-items: center; justify-content: center;
  padding: 40px 24px;
  box-sizing: border-box;
}
.ccb-mac *, .ccb-mac *::before, .ccb-mac *::after { box-sizing: border-box; }

.ccb-mac__scene { width: 100%; max-width: 600px; perspective: 1600px; }
.ccb-mac__window {
  background: #1d1f27;
  border-radius: 14px;
  overflow: hidden;
  box-shadow:
    0 2px 0 rgba(255,255,255,.06) inset,
    0 40px 70px -24px rgba(76,29,99,.55),
    0 12px 24px -12px rgba(0,0,0,.45);
  transform: rotateX(6deg) rotateZ(-.4deg);
  transition: transform .5s cubic-bezier(.2,.8,.2,1);
}
.ccb-mac__window:hover { transform: rotateX(0deg) rotateZ(0deg) translateY(-4px); }
.ccb-mac__titlebar {
  display: flex; align-items: center; gap: 8px;
  height: 42px; padding: 0 16px;
  background: linear-gradient(180deg, #33363f, #282b33);
  border-bottom: 1px solid rgba(0,0,0,.4);
}
.ccb-mac__traffic { display: flex; gap: 9px; }
.ccb-mac__traffic span {
  width: 13px; height: 13px; border-radius: 50%;
  box-shadow: inset 0 1px 1px rgba(255,255,255,.4);
}
.ccb-mac__red    { background: #ff5f57; }
.ccb-mac__yellow { background: #febc2e; }
.ccb-mac__green  { background: #28c840; }
.ccb-mac__filename {
  margin: 0 auto;
  font-family: 'Fira Code', monospace;
  font-size: 13px; color: #aeb3c2; letter-spacing: .02em;
  display: flex; align-items: center; gap: 8px;
}
.ccb-mac__filename::before {
  content: ''; width: 14px; height: 14px; border-radius: 3px;
  background: linear-gradient(135deg, #61dafb, #3b82f6);
}
.ccb-mac__pre {
  margin: 0; padding: 22px 24px 26px;
  font-family: 'Fira Code', monospace;
  font-size: 13.5px; line-height: 1.85; color: #dfe3ee;
  overflow-x: auto;
  background: #1d1f27;
}
.ccb-mac__k { color: #ff79c6; }
.ccb-mac__f { color: #8be9fd; }
.ccb-mac__s { color: #f1fa8c; }
.ccb-mac__c { color: #6272a4; font-style: italic; }
.ccb-mac__t { color: #bd93f9; }
.ccb-mac__pre::-webkit-scrollbar       { height: 8px; }
.ccb-mac__pre::-webkit-scrollbar-thumb { background: #3a3d48; border-radius: 8px; }

@media (prefers-reduced-motion: reduce) {
  .ccb-mac__window { transition: none; transform: none; }
  .ccb-mac__window:hover { transform: none; }
}
```

### 03. Code Block with Copy to Clipboard Button

**Type:** Light JS
**Description:** A teal-accented dark code block using <code>position: relative</code> on the container and <code>position: absolute</code> on a copy button that is hidden by default and fades in on hover, with a working <code>navigator.clipboard.writeText</code> action and a "Copied!" confirmation state. Best for documentation pages, package install snippets, CLI command references, and any tutorial where a one-click copy is the primary reader action.

**HTML:**
```html
<section class="ccb-cpy" aria-label="Copy to clipboard code block demo">
  <div class="ccb-cpy__block">
    <div class="ccb-cpy__bar">install <span class="ccb-cpy__badge">bash</span></div>
    <button class="ccb-cpy__copy" type="button" data-ccb-cpy="btn" aria-label="Copy code to clipboard">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
        <rect x="9" y="9" width="11" height="11" rx="2"/>
        <path d="M5 15V5a2 2 0 0 1 2-2h10"/>
      </svg>
      <span data-ccb-cpy="txt">Copy</span>
    </button>
    <pre class="ccb-cpy__pre" data-ccb-cpy="code"><code><span class="ccb-cpy__c"># add the codefronts CLI</span>
<span class="ccb-cpy__f">npm</span> install -g <span class="ccb-cpy__s">@codefronts/cli</span>
<span class="ccb-cpy__f">codefronts</span> init --template <span class="ccb-cpy__s">"snippet"</span>
<span class="ccb-cpy__f">codefronts</span> build <span class="ccb-cpy__k">&amp;&amp;</span> codefronts deploy</code></pre>
  </div>
</section>
```

**CSS:**
```css
/* ─── 03 Code Block with Copy to Clipboard Button ──────── */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Space+Grotesk:wght@400;600;700&display=swap');

.ccb-cpy {
  --ccb-cpy-bg: #10131a;
  --ccb-cpy-panel: #171b24;
  --ccb-cpy-ink: #e7ecf3;
  --ccb-cpy-muted: #7b8494;
  --ccb-cpy-accent: #5eead4;
  --ccb-cpy-accent-2: #2dd4bf;

  width: 100%;
  min-height: 320px;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(800px 460px at 110% 0%, rgba(45,212,191,.12), transparent 55%),
    var(--ccb-cpy-bg);
  color: var(--ccb-cpy-ink);
  font-family: 'Space Grotesk', sans-serif;
  padding: 36px 24px;
  box-sizing: border-box;
}
.ccb-cpy *, .ccb-cpy *::before, .ccb-cpy *::after { box-sizing: border-box; }

.ccb-cpy__block {
  position: relative;
  width: 100%; max-width: 600px;
  background: var(--ccb-cpy-panel);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 14px;
  box-shadow: 0 24px 60px -28px rgba(0,0,0,.8);
}
.ccb-cpy__bar {
  display: flex; align-items: center;
  padding: 12px 18px;
  border-bottom: 1px solid rgba(255,255,255,.05);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12.5px; color: var(--ccb-cpy-muted);
  letter-spacing: .05em;
}
.ccb-cpy__badge {
  margin-left: auto;
  color: var(--ccb-cpy-accent);
  border: 1px solid rgba(94,234,212,.3);
  padding: 3px 10px; border-radius: 999px; font-size: 11px;
}
.ccb-cpy__copy {
  position: absolute; top: 50px; right: 16px;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: 9px;
  background: rgba(45,212,191,.12);
  color: var(--ccb-cpy-accent);
  border: 1px solid rgba(94,234,212,.28);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px; cursor: pointer;
  opacity: 0; transform: translateY(-4px);
  transition: opacity .25s ease, transform .25s ease, background .2s;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.ccb-cpy__block:hover .ccb-cpy__copy,
.ccb-cpy__copy:focus-visible              { opacity: 1; transform: translateY(0); }
.ccb-cpy__copy:hover                      { background: rgba(45,212,191,.22); }
.ccb-cpy__copy:focus-visible              { outline: 2px solid var(--ccb-cpy-accent); outline-offset: 3px; }
.ccb-cpy__copy.is-done                    { background: var(--ccb-cpy-accent-2); color: #06231e; border-color: var(--ccb-cpy-accent-2); }
.ccb-cpy__copy svg                        { width: 14px; height: 14px; }
.ccb-cpy__pre {
  margin: 0; padding: 22px 22px 24px;
  position: relative;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13.5px; line-height: 1.85;
  overflow-x: auto; color: #cdd6e3;
}
.ccb-cpy__k { color: #c792ea; }
.ccb-cpy__f { color: #82aaff; }
.ccb-cpy__s { color: #c3e88d; }
.ccb-cpy__c { color: #546178; font-style: italic; }
.ccb-cpy__pre::-webkit-scrollbar       { height: 8px; }
.ccb-cpy__pre::-webkit-scrollbar-thumb { background: #2a2f3a; border-radius: 8px; }

@media (prefers-reduced-motion: reduce) {
  .ccb-cpy__copy { transition: none; }
}
```

**JS:**
```js
(() => {
  const root = document.querySelector('.ccb-cpy');
  if (!root) return;
  const btn  = root.querySelector('[data-ccb-cpy="btn"]');
  const txt  = root.querySelector('[data-ccb-cpy="txt"]');
  const code = root.querySelector('[data-ccb-cpy="code"]');
  if (!btn || !txt || !code) return;
  btn.addEventListener('click', async () => {
    const raw = code.innerText;
    try { await navigator.clipboard.writeText(raw); } catch (e) { /* permission denied */ }
    btn.classList.add('is-done');
    txt.textContent = 'Copied!';
    setTimeout(() => {
      btn.classList.remove('is-done');
      txt.textContent = 'Copy';
    }, 1600);
  });
})();
```

### 04. Code Container with Line Numbers and Filename Header

**Type:** Pure CSS
**Description:** A GitHub-dark inspired code container with editor-style filename tabs (<code>index.html</code> / <code>styles.css</code>) and a grid gutter that draws its line numbers from <code>counter-increment</code> in CSS — the numbers never get copied with the code, because they exist only as generated content in the gutter pseudo-element. Best for tutorial walk-throughs, multi-file documentation, before/after refactors, and any post where you reference specific line numbers in prose.

**HTML:**
```html
<section class="ccb-lnh" aria-label="Line numbers and filename header demo">
  <div class="ccb-lnh__file">
    <div class="ccb-lnh__tabs">
      <div class="ccb-lnh__tab"><span class="ccb-lnh__ico ccb-lnh__ico--html" aria-hidden="true"></span>index.html</div>
      <div class="ccb-lnh__tab ccb-lnh__tab--active"><span class="ccb-lnh__ico ccb-lnh__ico--css" aria-hidden="true"></span>styles.css</div>
    </div>
    <div class="ccb-lnh__codegrid ccb-lnh__pad">
      <div class="ccb-lnh__row"><code><span class="ccb-lnh__c">/* card layout tokens */</span></code></div>
      <div class="ccb-lnh__row"><code><span class="ccb-lnh__p">.card</span> {</code></div>
      <div class="ccb-lnh__row"><code>  <span class="ccb-lnh__k">display</span>: <span class="ccb-lnh__f">grid</span>;</code></div>
      <div class="ccb-lnh__row"><code>  <span class="ccb-lnh__k">gap</span>: <span class="ccb-lnh__s">1.25rem</span>;</code></div>
      <div class="ccb-lnh__row"><code>  <span class="ccb-lnh__k">padding</span>: <span class="ccb-lnh__s">clamp(1rem, 3vw, 2rem)</span>;</code></div>
      <div class="ccb-lnh__row"><code>  <span class="ccb-lnh__k">border-radius</span>: <span class="ccb-lnh__s">16px</span>;</code></div>
      <div class="ccb-lnh__row"><code>}</code></div>
    </div>
  </div>
</section>
```

**CSS:**
```css
/* ─── 04 Code Container with Line Numbers and Filename Header ──────── */
@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@400;500;600&family=DM+Sans:wght@400;500;700&display=swap');

.ccb-lnh {
  --ccb-lnh-bg: #0d1117;
  --ccb-lnh-panel: #0f141d;
  --ccb-lnh-header: #161b25;
  --ccb-lnh-ink: #d7dee9;
  --ccb-lnh-muted: #8a93a2;
  --ccb-lnh-accent: #f78166;
  --ccb-lnh-gutter: #1a212d;
  --ccb-lnh-gutter-ink: #4b5566;

  width: 100%;
  min-height: 320px;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(700px 380px at 0% 0%, rgba(247,129,102,.08), transparent 55%),
    var(--ccb-lnh-bg);
  color: var(--ccb-lnh-ink);
  font-family: 'DM Sans', sans-serif;
  padding: 36px 22px;
  box-sizing: border-box;
}
.ccb-lnh *, .ccb-lnh *::before, .ccb-lnh *::after { box-sizing: border-box; }

.ccb-lnh__file {
  width: 100%; max-width: 620px;
  background: var(--ccb-lnh-panel);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 30px 70px -32px rgba(0,0,0,.85);
}
.ccb-lnh__tabs {
  display: flex; align-items: center; gap: 2px;
  background: var(--ccb-lnh-header); padding: 10px 12px 0;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.ccb-lnh__tab {
  font-family: 'Source Code Pro', monospace;
  font-size: 12.5px;
  padding: 9px 16px; border-radius: 8px 8px 0 0;
  color: var(--ccb-lnh-muted);
  display: flex; align-items: center; gap: 8px;
}
.ccb-lnh__tab--active {
  background: var(--ccb-lnh-panel);
  color: var(--ccb-lnh-ink);
  border-top: 2px solid var(--ccb-lnh-accent);
}
.ccb-lnh__ico { width: 10px; height: 10px; border-radius: 2px; }
.ccb-lnh__ico--html { background: #e34c26; }
.ccb-lnh__ico--css  { background: #2965f1; }

.ccb-lnh__codegrid {
  counter-reset: ccblnh-line;
  font-family: 'Source Code Pro', monospace;
  font-size: 13.5px; line-height: 1.9;
  overflow-x: auto;
}
.ccb-lnh__row { display: grid; grid-template-columns: 3.4em 1fr; }
.ccb-lnh__row::before {
  counter-increment: ccblnh-line; content: counter(ccblnh-line);
  color: var(--ccb-lnh-gutter-ink); background: var(--ccb-lnh-gutter);
  text-align: right; padding: 0 14px 0 0;
  user-select: none;
  border-right: 1px solid rgba(255,255,255,.04);
}
.ccb-lnh__row code { padding: 0 18px; white-space: pre; overflow-x: auto; color: #cdd6e2; }
.ccb-lnh__pad { padding: 14px 0 18px; }

.ccb-lnh__k { color: #ff7b72; }
.ccb-lnh__f { color: #d2a8ff; }
.ccb-lnh__s { color: #a5d6ff; }
.ccb-lnh__p { color: #79c0ff; }
.ccb-lnh__c { color: #6e7681; font-style: italic; }
```

### 05. Horizontal Scroll & Word-Wrap Handling (Mobile Responsive)

**Type:** Pure CSS
**Description:** Two stacked code blocks comparing approaches: one with <code>overflow-x: auto</code> (clean gradient scrollbar, single line stays on one row) versus <code>white-space: pre-wrap</code> (graceful wrapping for long URLs and identifiers). Both capped at <code>max-width: 100%</code> for mobile safety. Best for documentation that shows long API endpoints, file paths, package names, or hash strings where the reader needs to choose which trade-off fits their layout.

**HTML:**
```html
<section class="ccb-rsp" aria-label="Horizontal scroll and word-wrap comparison demo">
  <div class="ccb-rsp__wrap">

    <div class="ccb-rsp__block ccb-rsp__scroll">
      <div class="ccb-rsp__head">overflow-x: auto <span class="ccb-rsp__pill">scroll</span></div>
      <pre class="ccb-rsp__pre"><code><span class="ccb-rsp__c">// long line stays on one row → scrollbar appears</span>
<span class="ccb-rsp__k">const</span> endpoint = <span class="ccb-rsp__s">"https://api.codefronts.com/v2/snippets?category=css&amp;sort=popular&amp;limit=50&amp;include=author"</span>;</code></pre>
    </div>

    <div class="ccb-rsp__block ccb-rsp__wrapmode">
      <div class="ccb-rsp__head">white-space: pre-wrap <span class="ccb-rsp__pill">wrap</span></div>
      <pre class="ccb-rsp__pre"><code><span class="ccb-rsp__c">// same line wraps gracefully on narrow screens</span>
<span class="ccb-rsp__k">const</span> endpoint = <span class="ccb-rsp__s">"https://api.codefronts.com/v2/snippets?category=css&amp;sort=popular&amp;limit=50&amp;include=author"</span>;</code></pre>
    </div>

  </div>
</section>
```

**CSS:**
```css
/* ─── 05 Horizontal Scroll & Word-Wrap Handling ──────── */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500;600&family=Manrope:wght@400;600;800&display=swap');

.ccb-rsp {
  --ccb-rsp-bg: #0e1216;
  --ccb-rsp-panel: #151b21;
  --ccb-rsp-ink: #e3e9ee;
  --ccb-rsp-muted: #7d8893;
  --ccb-rsp-accent: #fbbf24;
  --ccb-rsp-line: rgba(255,255,255,.06);

  width: 100%;
  min-height: 360px;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(680px 400px at 100% 100%, rgba(251,191,36,.08), transparent 55%),
    var(--ccb-rsp-bg);
  color: var(--ccb-rsp-ink);
  font-family: 'Manrope', sans-serif;
  padding: 32px 22px;
  box-sizing: border-box;
}
.ccb-rsp *, .ccb-rsp *::before, .ccb-rsp *::after { box-sizing: border-box; }

.ccb-rsp__wrap { width: 100%; max-width: 580px; display: grid; gap: 18px; }
.ccb-rsp__block {
  background: var(--ccb-rsp-panel);
  border: 1px solid var(--ccb-rsp-line);
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 24px 56px -30px rgba(0,0,0,.8);
}
.ccb-rsp__head {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 18px;
  border-bottom: 1px solid var(--ccb-rsp-line);
  font-family: 'Roboto Mono', monospace;
  font-size: 12px; color: var(--ccb-rsp-muted); letter-spacing: .05em;
}
.ccb-rsp__pill {
  margin-left: auto; font-size: 11px;
  color: var(--ccb-rsp-accent);
  border: 1px solid rgba(251,191,36,.3);
  padding: 3px 10px; border-radius: 999px;
}
.ccb-rsp__pre {
  margin: 0; padding: 18px 20px;
  font-family: 'Roboto Mono', monospace;
  font-size: 13px; line-height: 1.75;
  color: #cbd5e0; max-width: 100%;
}
.ccb-rsp__scroll .ccb-rsp__pre   { overflow-x: auto; white-space: pre; }
.ccb-rsp__wrapmode .ccb-rsp__pre { white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; }
.ccb-rsp__scroll .ccb-rsp__pre::-webkit-scrollbar       { height: 9px; }
.ccb-rsp__scroll .ccb-rsp__pre::-webkit-scrollbar-track { background: rgba(255,255,255,.03); }
.ccb-rsp__scroll .ccb-rsp__pre::-webkit-scrollbar-thumb { background: linear-gradient(90deg, var(--ccb-rsp-accent), #f59e0b); border-radius: 9px; }

.ccb-rsp__k { color: #c792ea; }
.ccb-rsp__s { color: #c3e88d; }
.ccb-rsp__c { color: #5a6573; font-style: italic; }
```

### 06. Glow-Effect & Neon Tech Code Block

**Type:** Pure CSS
**Description:** A cyberpunk-style code block on a faint grid background with a frosted <code>backdrop-filter: blur</code> panel, neon cyan / magenta / lime borders, and a pulsing animated glow that shifts the <code>box-shadow</code> color between cyan and magenta on a 3.4-second loop. <code>text-shadow</code> syntax accents make the code itself glow. Best for hackathon landing pages, gaming or AI product hero sections, retro-futurist portfolio sites, and any place where the code block needs to feel like a sci-fi terminal readout.

**HTML:**
```html
<section class="ccb-neo" aria-label="Neon tech code block demo">
  <div class="ccb-neo__panel">
    <div class="ccb-neo__scan">
      <span class="ccb-neo__blip" aria-hidden="true"></span> sys.core // online
      <span class="ccb-neo__id">0xCF-77</span>
    </div>
    <pre class="ccb-neo__pre"><code><span class="ccb-neo__c">// boot the grid runtime</span>
<span class="ccb-neo__k">fn</span> <span class="ccb-neo__f">main</span>() -&gt; Result&lt;()&gt; {
    <span class="ccb-neo__k">let</span> grid = Grid::<span class="ccb-neo__f">connect</span>(<span class="ccb-neo__s">"neon://core"</span>)?;
    grid.<span class="ccb-neo__f">pulse</span>(<span class="ccb-neo__n">144</span>).<span class="ccb-neo__f">await</span>;
    <span class="ccb-neo__k">Ok</span>(())
}</code></pre>
  </div>
</section>
```

**CSS:**
```css
/* ─── 06 Glow-Effect & Neon Tech Code Block ──────── */
@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Orbitron:wght@500;700;900&display=swap');

.ccb-neo {
  --ccb-neo-cyan:    #22d3ee;
  --ccb-neo-magenta: #f0f;
  --ccb-neo-lime:    #a3ff12;

  width: 100%;
  min-height: 320px;
  background: #05060a;
  background-image:
    linear-gradient(rgba(34,211,238,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34,211,238,.05) 1px, transparent 1px),
    radial-gradient(900px 500px at 50% -10%, rgba(255,0,255,.12), transparent 60%);
  background-size: 42px 42px, 42px 42px, 100% 100%;
  color: #e6f7ff;
  font-family: 'Orbitron', sans-serif;
  display: flex; align-items: center; justify-content: center;
  padding: 40px 22px;
  box-sizing: border-box;
}
.ccb-neo *, .ccb-neo *::before, .ccb-neo *::after { box-sizing: border-box; }

.ccb-neo__panel {
  position: relative;
  width: 100%; max-width: 580px;
  background: rgba(8,12,20,.55);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(34,211,238,.5);
  border-radius: 14px;
  box-shadow:
    0 0 18px rgba(34,211,238,.35),
    0 0 50px rgba(34,211,238,.18),
    inset 0 0 24px rgba(34,211,238,.06);
  overflow: hidden;
  animation: ccb-neo-pulse 3.4s ease-in-out infinite;
}
@keyframes ccb-neo-pulse {
  0%, 100% {
    box-shadow:
      0 0 18px rgba(34,211,238,.35),
      0 0 50px rgba(34,211,238,.18),
      inset 0 0 24px rgba(34,211,238,.06);
  }
  50% {
    box-shadow:
      0 0 26px rgba(255,0,255,.45),
      0 0 64px rgba(255,0,255,.22),
      inset 0 0 28px rgba(255,0,255,.08);
  }
}
.ccb-neo__scan {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid rgba(34,211,238,.25);
  font-size: 11px; letter-spacing: .32em; text-transform: uppercase;
  color: var(--ccb-neo-cyan); text-shadow: 0 0 8px var(--ccb-neo-cyan);
}
.ccb-neo__blip {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--ccb-neo-lime);
  box-shadow: 0 0 12px var(--ccb-neo-lime);
}
.ccb-neo__id {
  margin-left: auto; color: var(--ccb-neo-magenta);
  text-shadow: 0 0 8px var(--ccb-neo-magenta);
}
.ccb-neo__pre {
  margin: 0; padding: 22px 22px 26px;
  font-family: 'Share Tech Mono', monospace;
  font-size: 14px; line-height: 1.95;
  color: #cdfaff; overflow-x: auto;
  text-shadow: 0 0 6px rgba(34,211,238,.4);
}
.ccb-neo__k { color: var(--ccb-neo-magenta); text-shadow: 0 0 8px var(--ccb-neo-magenta); }
.ccb-neo__f { color: var(--ccb-neo-cyan);    text-shadow: 0 0 8px var(--ccb-neo-cyan); }
.ccb-neo__s { color: var(--ccb-neo-lime);    text-shadow: 0 0 8px var(--ccb-neo-lime); }
.ccb-neo__c { color: #5b7488; text-shadow: none; font-style: italic; }
.ccb-neo__n { color: #ffb86c; text-shadow: 0 0 8px rgba(255,184,108,.6); }
.ccb-neo__pre::-webkit-scrollbar       { height: 8px; }
.ccb-neo__pre::-webkit-scrollbar-thumb { background: var(--ccb-neo-cyan); border-radius: 8px; box-shadow: 0 0 10px var(--ccb-neo-cyan); }

@media (prefers-reduced-motion: reduce) {
  .ccb-neo__panel { animation: none; }
}
```

### 07. Glassmorphism Code Terminal

**Type:** Pure CSS
**Description:** A frosted-glass terminal floating over a vibrant multi-color radial-gradient backdrop with blurred orbs scattered behind it. Uses <code>backdrop-filter: blur(22px) saturate(160%)</code> with <code>rgba()</code> transparency, a thin translucent white border, and layered inset highlights so the text stays legible over the busy backdrop. Best for AI product splash pages, design-tool marketing sites, summer / festival campaign chrome, and any context where the surrounding palette is louder than the code itself.

**HTML:**
```html
<section class="ccb-gls" aria-label="Glassmorphism code terminal demo">
  <div class="ccb-gls__wrap">
    <div class="ccb-gls__panel">
      <div class="ccb-gls__topbar">
        <div class="ccb-gls__dots" aria-hidden="true"><span></span><span></span><span></span></div>
        <span class="ccb-gls__label">~/codefronts — zsh</span>
      </div>
      <pre class="ccb-gls__pre"><code><span class="ccb-gls__c"># spin up the dev preview</span>
<span class="ccb-gls__f">$</span> pnpm dev --port <span class="ccb-gls__n">3000</span>
<span class="ccb-gls__c"># ✔ ready in 412ms</span>
<span class="ccb-gls__f">$</span> open <span class="ccb-gls__s">"http://localhost:3000"</span>
<span class="ccb-gls__k">→</span> watching <span class="ccb-gls__n">128</span> modules for changes</code></pre>
    </div>
  </div>
</section>
```

**CSS:**
```css
/* ─── 07 Glassmorphism Code Terminal ──────── */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Plus+Jakarta+Sans:wght@400;600;800&display=swap');

.ccb-gls {
  position: relative;
  width: 100%;
  min-height: 380px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  background:
    radial-gradient(circle at 15% 20%, #ff6ec4 0%, transparent 40%),
    radial-gradient(circle at 85% 30%, #7873f5 0%, transparent 45%),
    radial-gradient(circle at 50% 90%, #42e695 0%, transparent 50%),
    linear-gradient(135deg, #1a1c4b, #2d1b4e);
  display: flex; align-items: center; justify-content: center;
  padding: 40px 24px;
  overflow: hidden;
  box-sizing: border-box;
}
.ccb-gls *, .ccb-gls *::before, .ccb-gls *::after { box-sizing: border-box; }

/* floating orbs scoped to the wrapper, NOT body — required so
   multiple gallery demos can coexist on one page */
.ccb-gls::before, .ccb-gls::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(8px);
  z-index: 0;
  pointer-events: none;
}
.ccb-gls::before { width: 130px; height: 130px; background: rgba(255,255,255,.18); top: 14%; right: 16%; }
.ccb-gls::after  { width: 76px;  height: 76px;  background: rgba(66,230,149,.40); bottom: 18%; left: 14%; }

.ccb-gls__wrap { width: 100%; max-width: 580px; position: relative; z-index: 1; }
.ccb-gls__panel {
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 20px;
  box-shadow:
    0 24px 70px -20px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.3),
    inset 0 -1px 0 rgba(255,255,255,.06);
  overflow: hidden;
}
.ccb-gls__topbar {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.ccb-gls__dots { display: flex; gap: 8px; }
.ccb-gls__dots span {
  width: 12px; height: 12px; border-radius: 50%;
  background: rgba(255,255,255,.45);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.2);
}
.ccb-gls__label {
  margin-left: auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; color: rgba(255,255,255,.85); letter-spacing: .06em;
}
.ccb-gls__pre {
  margin: 0; padding: 22px 22px 26px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13.5px; line-height: 1.9;
  color: #f4f4ff; overflow-x: auto;
  text-shadow: 0 1px 6px rgba(0,0,0,.3);
}
.ccb-gls__k { color: #ffd6f5; }
.ccb-gls__f { color: #aef9ff; }
.ccb-gls__s { color: #d4ffb0; }
.ccb-gls__c { color: rgba(255,255,255,.5); font-style: italic; }
.ccb-gls__n { color: #ffe39a; }
.ccb-gls__pre::-webkit-scrollbar       { height: 8px; }
.ccb-gls__pre::-webkit-scrollbar-thumb { background: rgba(255,255,255,.3); border-radius: 8px; }
```

### 08. Inline Code Snippet Pill Styling

**Type:** Pure CSS
**Description:** Editorial article styling on cream textured paper showing standalone <code>&lt;code&gt;</code> pills woven into serif prose — tiny <code>2px 8px</code> padding, full pill <code>border-radius: 999px</code>, color variants (green / blue / orange), and <code>vertical-align: middle</code> so the line-height never breaks around them. Best for long-form technical articles, design system documentation, blog posts mixing prose and short identifiers, and any reading surface where inline code references need to feel typographically settled, not jarring.

**HTML:**
```html
<section class="ccb-inl" aria-label="Inline code pill styling demo">
  <div class="ccb-inl__prose">
    <p class="ccb-inl__lead">When you set <code class="ccb-inl__c">display: grid</code> on a container, every direct child becomes a grid item. Use <code class="ccb-inl__c ccb-inl__c--blue">gap</code> instead of margins to space them, and reach for <code class="ccb-inl__c">minmax()</code> when columns need to flex.</p>
    <p>Avoid setting a fixed <code class="ccb-inl__c ccb-inl__c--warn">height</code> on the wrapper — let the content define it. If you must clamp it, pair <code class="ccb-inl__c">max-height</code> with <code class="ccb-inl__c">overflow: auto</code> so nothing gets visually clipped <em class="ccb-inl__em">without a scroll affordance</em>.</p>
    <p>Finally, run <code class="ccb-inl__c ccb-inl__c--blue">npm run build</code> and confirm the <code class="ccb-inl__c">line-height</code> stays uniform — the pill should never push a line taller than its neighbors.</p>
  </div>
</section>
```

**CSS:**
```css
/* ─── 08 Inline Code Snippet Pill Styling ──────── */
@import url('https://fonts.googleapis.com/css2?family=Spline+Sans+Mono:wght@500;600&family=Newsreader:ital,opsz,wght@0,18..72,400;0,18..72,500;1,18..72,400&display=swap');

.ccb-inl {
  --ccb-inl-paper: #fcfbf7;
  --ccb-inl-ink: #23201c;
  --ccb-inl-muted: #6b6459;
  --ccb-inl-pill-bg: #eef0e8;
  --ccb-inl-pill-ink: #3f6b3a;
  --ccb-inl-accent: #b4532a;

  width: 100%;
  min-height: 360px;
  background: var(--ccb-inl-paper);
  background-image: radial-gradient(circle at 1px 1px, rgba(0,0,0,.04) 1px, transparent 0);
  background-size: 22px 22px;
  color: var(--ccb-inl-ink);
  font-family: 'Newsreader', Georgia, serif;
  display: flex; align-items: center; justify-content: center;
  padding: 40px 24px;
  box-sizing: border-box;
}
.ccb-inl *, .ccb-inl *::before, .ccb-inl *::after { box-sizing: border-box; }

.ccb-inl__prose {
  max-width: 540px;
  font-size: 18px; line-height: 1.85; letter-spacing: .005em;
}
.ccb-inl__prose p { margin-bottom: 1.2em; }
.ccb-inl__prose p:last-child { margin-bottom: 0; }

.ccb-inl__c {
  font-family: 'Spline Sans Mono', monospace;
  font-size: .82em; font-weight: 600;
  background: var(--ccb-inl-pill-bg);
  color: var(--ccb-inl-pill-ink);
  padding: 2px 8px; border-radius: 999px;
  vertical-align: middle;
  border: 1px solid rgba(0,0,0,.05);
  white-space: nowrap;
}
.ccb-inl__c--warn { background: #f7e9e1; color: var(--ccb-inl-accent); }
.ccb-inl__c--blue { background: #e6eef7; color: #2d5d8a; }
.ccb-inl__em { color: var(--ccb-inl-muted); }
.ccb-inl__lead::first-letter {
  font-size: 3.2em; float: left; line-height: .8;
  padding: 6px 10px 0 0;
  color: var(--ccb-inl-accent); font-weight: 500;
}
```

### 09. Neumorphic Embedded Code Box

**Type:** Pure CSS
**Description:** A soft-UI card on a matched gray canvas where the code box uses dual <code>box-shadow: inset</code> (one light highlight, one dark shadow) to look recessed into the surface, with a raised outer card and a pressed-in icon badge for the tactile look. Best for design-tool dashboards, settings panels embedded inside documentation, calm productivity apps, and any place a code reference needs to feel like part of the surrounding UI rather than a hard rectangle dropped on top.

**HTML:**
```html
<section class="ccb-nmp" aria-label="Neumorphic embedded code box demo">
  <div class="ccb-nmp__card">
    <div class="ccb-nmp__row">
      <div class="ccb-nmp__badge" aria-hidden="true">{ }</div>
      <div>
        <div class="ccb-nmp__title">useToggle</div>
        <div class="ccb-nmp__sub">hooks/useToggle.js</div>
      </div>
    </div>
    <div class="ccb-nmp__embed">
      <pre class="ccb-nmp__pre"><code><span class="ccb-nmp__c">// soft, tactile state hook</span>
<span class="ccb-nmp__k">export const</span> <span class="ccb-nmp__f">useToggle</span> = (init = <span class="ccb-nmp__s">false</span>) =&gt; {
  <span class="ccb-nmp__k">const</span> [on, set] = <span class="ccb-nmp__f">useState</span>(init);
  <span class="ccb-nmp__k">return</span> [on, () =&gt; <span class="ccb-nmp__f">set</span>(v =&gt; !v)];
};</code></pre>
    </div>
  </div>
</section>
```

**CSS:**
```css
/* ─── 09 Neumorphic Embedded Code Box ──────── */
@import url('https://fonts.googleapis.com/css2?family=Azeret+Mono:wght@400;500;600&family=Quicksand:wght@400;500;700&display=swap');

.ccb-nmp {
  --ccb-nmp-bg: #e4e8ef;
  --ccb-nmp-ink: #56627a;
  --ccb-nmp-muted: #9aa3b6;
  --ccb-nmp-accent: #7b8cde;
  --ccb-nmp-light: #ffffff;
  --ccb-nmp-dark: #bcc4d4;

  width: 100%;
  min-height: 320px;
  background: var(--ccb-nmp-bg);
  color: var(--ccb-nmp-ink);
  font-family: 'Quicksand', sans-serif;
  display: flex; align-items: center; justify-content: center;
  padding: 36px 24px;
  box-sizing: border-box;
}
.ccb-nmp *, .ccb-nmp *::before, .ccb-nmp *::after { box-sizing: border-box; }

.ccb-nmp__card {
  width: 100%; max-width: 560px;
  background: var(--ccb-nmp-bg);
  border-radius: 28px;
  padding: 26px;
  box-shadow:
    -10px -10px 24px var(--ccb-nmp-light),
     12px 12px 28px var(--ccb-nmp-dark);
}
.ccb-nmp__row { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.ccb-nmp__badge {
  width: 46px; height: 46px; border-radius: 14px;
  background: var(--ccb-nmp-bg);
  display: flex; align-items: center; justify-content: center;
  box-shadow:
    inset 3px 3px 7px var(--ccb-nmp-dark),
    inset -3px -3px 7px var(--ccb-nmp-light);
  color: var(--ccb-nmp-accent);
  font-weight: 700; font-family: 'Azeret Mono', monospace;
}
.ccb-nmp__title { font-weight: 700; font-size: 15px; }
.ccb-nmp__sub   { font-size: 12.5px; color: var(--ccb-nmp-muted); font-family: 'Azeret Mono', monospace; }

.ccb-nmp__embed {
  background: var(--ccb-nmp-bg);
  border-radius: 18px;
  box-shadow:
    inset 6px 6px 14px var(--ccb-nmp-dark),
    inset -6px -6px 14px var(--ccb-nmp-light);
  padding: 20px 22px;
}
.ccb-nmp__pre {
  margin: 0;
  font-family: 'Azeret Mono', monospace;
  font-size: 13px; line-height: 1.9;
  color: #5b6680; overflow-x: auto;
}
.ccb-nmp__k { color: #8c6fd6; }
.ccb-nmp__f { color: #5a8ad6; }
.ccb-nmp__s { color: #5aa07a; }
.ccb-nmp__c { color: #a7afc0; font-style: italic; }
.ccb-nmp__pre::-webkit-scrollbar       { height: 7px; }
.ccb-nmp__pre::-webkit-scrollbar-thumb { background: var(--ccb-nmp-dark); border-radius: 7px; }
```

### 10. Split-Pane Code + Live Preview Container

**Type:** Pure CSS
**Description:** A two-pane CSS Grid card: the left pane renders a live interactive gradient button (with working hover lift + press feedback), the right pane shows the styled <code>&lt;pre&gt;&lt;code&gt;</code> source that produced it. Collapses to a stacked layout on mobile. Best for documentation tutorials, design-system component reference pages, MDX-driven docs sites, and any teaching context where reading the code is half the story and seeing it run is the other half.

**HTML:**
```html
<section class="ccb-spl" aria-label="Split-pane code and live preview demo">
  <div class="ccb-spl__wrap">
    <div class="ccb-spl__split">
      <div class="ccb-spl__preview">
        <button class="ccb-spl__demo-btn" type="button">Get Started →</button>
      </div>
      <div class="ccb-spl__codepane">
        <div class="ccb-spl__codehead">Result + Source <span class="ccb-spl__tag">.demo-btn</span></div>
        <pre class="ccb-spl__pre"><code><span class="ccb-spl__p">.demo-btn</span> {
  <span class="ccb-spl__k">background</span>: <span class="ccb-spl__s">linear-gradient(135deg,#7c5cff,#b16cff)</span>;
  <span class="ccb-spl__k">padding</span>: <span class="ccb-spl__s">14px 30px</span>;
  <span class="ccb-spl__k">border-radius</span>: <span class="ccb-spl__s">12px</span>;
  <span class="ccb-spl__k">box-shadow</span>: <span class="ccb-spl__s">0 10px 30px -8px rgba(124,92,255,.7)</span>;
}</code></pre>
      </div>
    </div>
  </div>
</section>
```

**CSS:**
```css
/* ─── 10 Split-Pane Code + Live Preview Container ──────── */
@import url('https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500;600&family=Geist:wght@400;500;700&display=swap');

.ccb-spl {
  --ccb-spl-bg: #0f1115;
  --ccb-spl-code-bg: #15181f;
  --ccb-spl-preview-bg: #1b1f29;
  --ccb-spl-ink: #e6e9ef;
  --ccb-spl-muted: #828b9c;
  --ccb-spl-accent: #7c5cff;
  --ccb-spl-line: rgba(255,255,255,.07);

  width: 100%;
  min-height: 320px;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(700px 400px at 100% 0%, rgba(124,92,255,.12), transparent 55%),
    var(--ccb-spl-bg);
  color: var(--ccb-spl-ink);
  font-family: 'Geist', 'Segoe UI', sans-serif;
  padding: 36px 22px;
  box-sizing: border-box;
}
.ccb-spl *, .ccb-spl *::before, .ccb-spl *::after { box-sizing: border-box; }

.ccb-spl__wrap { width: 100%; max-width: 700px; }
.ccb-spl__split {
  display: grid; grid-template-columns: 1fr 1fr;
  background: var(--ccb-spl-code-bg);
  border: 1px solid var(--ccb-spl-line);
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 30px 70px -32px rgba(0,0,0,.85);
}
@media (max-width: 680px) {
  .ccb-spl__split   { grid-template-columns: 1fr; }
  .ccb-spl__preview { border-right: none; border-bottom: 1px solid var(--ccb-spl-line); }
}

.ccb-spl__preview {
  background:
    radial-gradient(circle at 30% 20%, rgba(124,92,255,.18), transparent 60%),
    var(--ccb-spl-preview-bg);
  display: flex; align-items: center; justify-content: center;
  padding: 36px 22px;
  border-right: 1px solid var(--ccb-spl-line);
}
.ccb-spl__demo-btn {
  font-family: 'Geist', sans-serif; font-weight: 600; font-size: 15px;
  color: #fff; border: none; cursor: pointer;
  padding: 14px 30px; border-radius: 12px;
  background: linear-gradient(135deg, #7c5cff, #b16cff);
  box-shadow: 0 10px 30px -8px rgba(124,92,255,.7);
  transition: transform .2s, box-shadow .2s;
}
.ccb-spl__demo-btn:hover  { transform: translateY(-3px); box-shadow: 0 16px 40px -8px rgba(124,92,255,.9); }
.ccb-spl__demo-btn:active { transform: translateY(0); }
.ccb-spl__demo-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.ccb-spl__codepane { display: flex; flex-direction: column; }
.ccb-spl__codehead {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 18px;
  border-bottom: 1px solid var(--ccb-spl-line);
  font-family: 'Geist Mono', monospace;
  font-size: 12px; color: var(--ccb-spl-muted); letter-spacing: .05em;
}
.ccb-spl__tag { margin-left: auto; color: var(--ccb-spl-accent); }
.ccb-spl__pre {
  margin: 0; padding: 20px 20px; flex: 1;
  font-family: 'Geist Mono', monospace;
  font-size: 12.5px; line-height: 1.85;
  color: #cdd4e0; overflow-x: auto;
}
.ccb-spl__k { color: #c4b5fd; }
.ccb-spl__p { color: #7dd3fc; }
.ccb-spl__s { color: #86efac; }
.ccb-spl__pre::-webkit-scrollbar       { height: 8px; }
.ccb-spl__pre::-webkit-scrollbar-thumb { background: #2a2f3a; border-radius: 8px; }

@media (prefers-reduced-motion: reduce) {
  .ccb-spl__demo-btn { transition: none; }
}
```

### 11. Minimalist Light Mode / Editorial Theme

**Type:** Pure CSS
**Description:** A bright Stripe-style docs aesthetic — crisp <code>#f8fafc</code> background, white panel, elegant Fraunces headings, and gentle indigo / green / orange syntax accents tuned for daylight readability. Filename + language pill on a soft header strip. Best for product docs, API reference sites, marketing pages targeting designers who want the page to feel calm, and any audience reading on bright screens during the day.

**HTML:**
```html
<section class="ccb-lgt" aria-label="Minimalist light mode editorial code block demo">
  <div class="ccb-lgt__wrap">
    <div class="ccb-lgt__block">
      <div class="ccb-lgt__head">
        <span class="ccb-lgt__name">checkout.js</span>
        <span class="ccb-lgt__lang">JavaScript</span>
      </div>
      <pre class="ccb-lgt__pre"><code><span class="ccb-lgt__c">// create a payment session</span>
<span class="ccb-lgt__k">const</span> session = <span class="ccb-lgt__k">await</span> stripe.checkout.sessions.<span class="ccb-lgt__f">create</span>({
  mode: <span class="ccb-lgt__s">'payment'</span>,
  line_items: [{ price: <span class="ccb-lgt__s">'price_1Nx'</span>, quantity: <span class="ccb-lgt__n">1</span> }],
  success_url: <span class="ccb-lgt__s">'https://codefronts.com/done'</span>,
});</code></pre>
    </div>
  </div>
</section>
```

**CSS:**
```css
/* ─── 11 Minimalist Light Mode / Editorial Theme ──────── */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,800&display=swap');

.ccb-lgt {
  --ccb-lgt-paper: #f8fafc;
  --ccb-lgt-panel: #ffffff;
  --ccb-lgt-ink: #1f2933;
  --ccb-lgt-muted: #697586;
  --ccb-lgt-line: #e7ecf2;
  --ccb-lgt-accent: #635bff;
  --ccb-lgt-green: #0a7c5a;
  --ccb-lgt-orange: #c2410c;

  width: 100%;
  min-height: 320px;
  background: var(--ccb-lgt-paper);
  color: var(--ccb-lgt-ink);
  font-family: 'Fraunces', Georgia, serif;
  display: flex; align-items: center; justify-content: center;
  padding: 36px 22px;
  box-sizing: border-box;
}
.ccb-lgt *, .ccb-lgt *::before, .ccb-lgt *::after { box-sizing: border-box; }

.ccb-lgt__wrap { width: 100%; max-width: 600px; }
.ccb-lgt__block {
  background: var(--ccb-lgt-panel);
  border: 1px solid var(--ccb-lgt-line);
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 12px 28px -16px rgba(16,24,40,.18);
}
.ccb-lgt__head {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--ccb-lgt-line);
  background: #fcfdfe;
}
.ccb-lgt__name { font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: var(--ccb-lgt-muted); font-weight: 500; }
.ccb-lgt__lang {
  margin-left: auto;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px; color: var(--ccb-lgt-accent);
  background: #eef0ff;
  padding: 3px 10px; border-radius: 6px; font-weight: 600;
}
.ccb-lgt__pre {
  margin: 0; padding: 20px 20px 24px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px; line-height: 1.8;
  color: #334155; overflow-x: auto;
}
.ccb-lgt__k { color: var(--ccb-lgt-accent); }
.ccb-lgt__f { color: #0b69c7; }
.ccb-lgt__s { color: var(--ccb-lgt-green); }
.ccb-lgt__n { color: var(--ccb-lgt-orange); }
.ccb-lgt__c { color: #9aa5b1; font-style: italic; }
.ccb-lgt__pre::-webkit-scrollbar       { height: 8px; }
.ccb-lgt__pre::-webkit-scrollbar-thumb { background: #dde3ea; border-radius: 8px; }
```

### 12. Expandable / Collapsible Code Wrapper

**Type:** Pure CSS
**Description:** A long code snippet capped with <code>max-height</code> + <code>overflow: hidden</code> and a <code>linear-gradient(transparent, bg)</code> fade mask at the bottom hinting at more content. A pure-CSS checkbox hack drives the smooth "Show more / Show less" toggle and rotating chevron — no JavaScript required. Best for documentation pages with long source listings, FAQ answers that embed code, blog posts where the snippet is reference material rather than the focus, and any place a long block of code would otherwise dominate the page above the fold.

**HTML:**
```html
<section class="ccb-exp" aria-label="Expandable collapsible code wrapper demo">
  <div class="ccb-exp__wrap">
    <div class="ccb-exp__block">
      <div class="ccb-exp__head">utils/animate.js <span class="ccb-exp__lines">142 lines</span></div>
      <input type="checkbox" id="ccb-exp-toggle" class="ccb-exp__toggle" aria-label="Expand or collapse code">
      <div class="ccb-exp__codewrap">
        <pre class="ccb-exp__pre"><code><span class="ccb-exp__c">// easing + tween helpers</span>
<span class="ccb-exp__k">export const</span> <span class="ccb-exp__f">easeOutCubic</span> = t =&gt; <span class="ccb-exp__n">1</span> - Math.<span class="ccb-exp__f">pow</span>(<span class="ccb-exp__n">1</span> - t, <span class="ccb-exp__n">3</span>);
<span class="ccb-exp__k">export const</span> <span class="ccb-exp__f">easeInOut</span> = t =&gt; t &lt; .5
  ? <span class="ccb-exp__n">4</span> * t * t * t
  : <span class="ccb-exp__n">1</span> - Math.<span class="ccb-exp__f">pow</span>(-<span class="ccb-exp__n">2</span> * t + <span class="ccb-exp__n">2</span>, <span class="ccb-exp__n">3</span>) / <span class="ccb-exp__n">2</span>;

<span class="ccb-exp__k">export function</span> <span class="ccb-exp__f">tween</span>({ from, to, duration, onUpdate }) {
  <span class="ccb-exp__k">const</span> start = performance.<span class="ccb-exp__f">now</span>();
  <span class="ccb-exp__k">function</span> <span class="ccb-exp__f">frame</span>(now) {
    <span class="ccb-exp__k">const</span> p = Math.<span class="ccb-exp__f">min</span>((now - start) / duration, <span class="ccb-exp__n">1</span>);
    <span class="ccb-exp__f">onUpdate</span>(from + (to - from) * <span class="ccb-exp__f">easeOutCubic</span>(p));
    <span class="ccb-exp__k">if</span> (p &lt; <span class="ccb-exp__n">1</span>) <span class="ccb-exp__f">requestAnimationFrame</span>(frame);
  }
  <span class="ccb-exp__f">requestAnimationFrame</span>(frame);
}

<span class="ccb-exp__k">export function</span> <span class="ccb-exp__f">stagger</span>(items, delay = <span class="ccb-exp__n">60</span>) {
  items.<span class="ccb-exp__f">forEach</span>((el, i) =&gt; {
    el.style.<span class="ccb-exp__p">animationDelay</span> = <span class="ccb-exp__s">`${i * delay}ms`</span>;
  });
}</code></pre>
        <div class="ccb-exp__fade" aria-hidden="true"></div>
      </div>
      <label for="ccb-exp-toggle" class="ccb-exp__btn"><span class="ccb-exp__more">Show more</span><span class="ccb-exp__less">Show less</span></label>
    </div>
  </div>
</section>
```

**CSS:**
```css
/* ─── 12 Expandable / Collapsible Code Wrapper ──────── */
@import url('https://fonts.googleapis.com/css2?family=Martian+Mono:wght@400;500;600&family=Space+Grotesk:wght@400;600;700&display=swap');

.ccb-exp {
  --ccb-exp-bg: #0c0e13;
  --ccb-exp-panel: #13161d;
  --ccb-exp-ink: #dfe4ec;
  --ccb-exp-muted: #79828f;
  --ccb-exp-accent: #34d399;
  --ccb-exp-line: rgba(255,255,255,.06);

  width: 100%;
  min-height: 360px;
  background:
    radial-gradient(640px 360px at 0% 0%, rgba(52,211,153,.09), transparent 55%),
    var(--ccb-exp-bg);
  color: var(--ccb-exp-ink);
  font-family: 'Space Grotesk', sans-serif;
  display: flex; align-items: center; justify-content: center;
  padding: 36px 22px;
  box-sizing: border-box;
}
.ccb-exp *, .ccb-exp *::before, .ccb-exp *::after { box-sizing: border-box; }

.ccb-exp__wrap { width: 100%; max-width: 600px; }
.ccb-exp__block {
  background: var(--ccb-exp-panel);
  border: 1px solid var(--ccb-exp-line);
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 24px 60px -30px rgba(0,0,0,.85);
}
.ccb-exp__head {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--ccb-exp-line);
  font-family: 'Martian Mono', monospace;
  font-size: 11.5px; color: var(--ccb-exp-muted); letter-spacing: .04em;
}
.ccb-exp__lines { margin-left: auto; color: var(--ccb-exp-accent); }

.ccb-exp__toggle { display: none; }
.ccb-exp__codewrap { position: relative; }
.ccb-exp__pre {
  margin: 0; padding: 20px 20px;
  font-family: 'Martian Mono', monospace;
  font-size: 12px; line-height: 1.95;
  color: #cbd3df; overflow: hidden;
  max-height: 170px;
  transition: max-height .45s cubic-bezier(.4,0,.2,1);
}
.ccb-exp__toggle:checked ~ .ccb-exp__codewrap .ccb-exp__pre { max-height: 1200px; }

.ccb-exp__fade {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 80px;
  pointer-events: none;
  background: linear-gradient(transparent, var(--ccb-exp-panel));
  transition: opacity .3s;
}
.ccb-exp__toggle:checked ~ .ccb-exp__codewrap .ccb-exp__fade { opacity: 0; }

.ccb-exp__btn {
  display: block; width: 100%; text-align: center; cursor: pointer;
  padding: 13px;
  font-family: 'Martian Mono', monospace;
  font-size: 11.5px; letter-spacing: .08em;
  color: var(--ccb-exp-accent);
  background: rgba(52,211,153,.06);
  border-top: 1px solid var(--ccb-exp-line);
  user-select: none;
  transition: background .2s;
}
.ccb-exp__btn:hover { background: rgba(52,211,153,.12); }
.ccb-exp__btn .ccb-exp__more { display: inline; }
.ccb-exp__btn .ccb-exp__less { display: none; }
.ccb-exp__toggle:checked ~ .ccb-exp__btn .ccb-exp__more { display: none; }
.ccb-exp__toggle:checked ~ .ccb-exp__btn .ccb-exp__less { display: inline; }
.ccb-exp__btn::after {
  content: ' \25BE';
  display: inline-block;
  transition: transform .3s;
}
.ccb-exp__toggle:checked ~ .ccb-exp__btn::after { transform: rotate(180deg); }
.ccb-exp__toggle:focus-visible ~ .ccb-exp__btn { outline: 2px solid var(--ccb-exp-accent); outline-offset: -3px; }

.ccb-exp__k { color: #c792ea; }
.ccb-exp__f { color: #82aaff; }
.ccb-exp__s { color: #c3e88d; }
.ccb-exp__c { color: #586173; font-style: italic; }
.ccb-exp__p { color: #7dd3fc; }
.ccb-exp__n { color: #ffb86c; }
.ccb-exp__pre::-webkit-scrollbar       { height: 8px; }
.ccb-exp__pre::-webkit-scrollbar-thumb { background: #262b34; border-radius: 8px; }

@media (prefers-reduced-motion: reduce) {
  .ccb-exp__pre, .ccb-exp__fade, .ccb-exp__btn::after, .ccb-exp__btn { transition: none; }
}
```

---
## 6 CSS Countdown Timers

URL: https://codefronts.com/snippets/css-countdown-timers/
Description: Six hand-coded CSS countdown timer patterns for the conversion surfaces real products need — ecommerce flash sales, site-wide sticky announcement bars, shopping cart expiration alerts, coming-soon launches, circular SVG progress rings, and retro flip-clock timers. Accessible aria-live markup, prefers-reduced-motion fallbacks, scoped per-demo classes, MIT-licensed.
Demo count: 6

### 01. E-Commerce Flash Sales & Product Pages

**Type:** CSS + JS
**Description:** A bold, high-contrast product card with a brutalist offset shadow and split-panel box-style D/H/M/S clock. Pulsing "flash sale ends in" indicator, strikethrough pricing, discount badge, and a stock-scarcity line built to drive urgency-based conversions. Best for limited-edition drops, daily deals, daily-deal email landing pages, and product detail pages where the deadline is the headline.

**HTML:**
```html
<section class="cdt-fls" aria-label="Flash sale countdown timer demo">
  <div class="cdt-fls__card">
    <div class="cdt-fls__badge">SALE</div>
    <div class="cdt-fls__img-zone"><span>AERO·9</span></div>
    <div class="cdt-fls__info">
      <div class="cdt-fls__cat">Limited Drop · Footwear</div>
      <h2 class="cdt-fls__title">Aero 9 Carbon Runner</h2>
      <div class="cdt-fls__price-row">
        <span class="cdt-fls__price">$89</span>
        <span class="cdt-fls__was">$179</span>
        <span class="cdt-fls__off">-50%</span>
      </div>
      <div class="cdt-fls__urgency"><span class="cdt-fls__pulse" aria-hidden="true"></span> Flash sale ends in</div>
      <div class="cdt-fls__timer" role="timer" aria-live="polite" aria-atomic="true">
        <div class="cdt-fls__seg"><span class="cdt-fls__num" data-cdt-fls="d">00</span><span class="cdt-fls__lab">Days</span></div>
        <div class="cdt-fls__seg"><span class="cdt-fls__num" data-cdt-fls="h">00</span><span class="cdt-fls__lab">Hours</span></div>
        <div class="cdt-fls__seg"><span class="cdt-fls__num" data-cdt-fls="m">00</span><span class="cdt-fls__lab">Mins</span></div>
        <div class="cdt-fls__seg"><span class="cdt-fls__num" data-cdt-fls="s">00</span><span class="cdt-fls__lab">Secs</span></div>
      </div>
      <button class="cdt-fls__buy" type="button">Grab It Now</button>
      <p class="cdt-fls__stock">Only <b>12 pairs</b> left at this price</p>
    </div>
  </div>
</section>
```

**CSS:**
```css
/* ─── 01 Flash Sale — brutalist product card ─────────────── */
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Space+Mono:wght@400;700&display=swap');

.cdt-fls {
  --cdt-fls-ink: #0a0a0a;
  --cdt-fls-paper: #f4f1ea;
  --cdt-fls-flame: #ff3b14;
  --cdt-fls-gold: #ffcf3a;

  position: relative;
  width: 100%;
  min-height: 520px;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,59,20,0.08), transparent 40%),
    var(--cdt-fls-paper);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Space Mono', monospace;
  padding: 40px 20px;
  box-sizing: border-box;
  overflow: hidden;
}
.cdt-fls *, .cdt-fls *::before, .cdt-fls *::after { box-sizing: border-box; margin: 0; padding: 0; }

.cdt-fls__card {
  background: var(--cdt-fls-ink); color: var(--cdt-fls-paper);
  width: 100%; max-width: 460px;
  border-radius: 4px;
  box-shadow: 14px 14px 0 var(--cdt-fls-flame);
  position: relative; overflow: hidden;
}
.cdt-fls__card::before {
  content: ''; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.02) 0 2px, transparent 2px 6px);
  pointer-events: none;
}
.cdt-fls__badge {
  position: absolute; top: 22px; right: -42px;
  background: var(--cdt-fls-flame); color: #fff;
  font-family: 'Archivo Black', sans-serif;
  font-size: 12px; letter-spacing: 2px;
  padding: 8px 50px; transform: rotate(45deg); z-index: 3;
}
.cdt-fls__img-zone {
  height: 180px;
  background: linear-gradient(135deg, #2a2a2a, #111), var(--cdt-fls-ink);
  display: flex; align-items: center; justify-content: center;
  border-bottom: 3px solid var(--cdt-fls-flame);
}
.cdt-fls__img-zone span {
  font-family: 'Archivo Black', sans-serif;
  font-size: 56px; color: var(--cdt-fls-flame);
  opacity: 0.85; text-shadow: 4px 4px 0 rgba(0,0,0,0.5);
  transform: rotate(-6deg);
}
.cdt-fls__info { padding: 24px 28px 30px; position: relative; z-index: 2; }
.cdt-fls__cat { font-size: 11px; letter-spacing: 4px; color: var(--cdt-fls-gold); text-transform: uppercase; }
.cdt-fls__title {
  font-family: 'Archivo Black', sans-serif;
  font-size: 26px; line-height: 1.05; margin: 8px 0 14px; text-transform: uppercase;
  color: var(--cdt-fls-paper);
}
.cdt-fls__price-row { display: flex; align-items: baseline; gap: 12px; margin-bottom: 22px; }
.cdt-fls__price { font-family: 'Archivo Black', sans-serif; font-size: 32px; color: var(--cdt-fls-flame); }
.cdt-fls__was { font-size: 16px; color: #777; text-decoration: line-through; }
.cdt-fls__off {
  margin-left: auto;
  background: var(--cdt-fls-gold); color: var(--cdt-fls-ink);
  font-weight: 700; padding: 4px 10px; font-size: 13px;
}
.cdt-fls__urgency {
  font-size: 12px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--cdt-fls-flame); margin-bottom: 10px;
  display: flex; align-items: center; gap: 8px;
}
.cdt-fls__pulse {
  width: 9px; height: 9px; border-radius: 50%; background: var(--cdt-fls-flame);
  animation: cdt-fls-blip 1s infinite;
}
@keyframes cdt-fls-blip {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(255,59,20,.6); }
  50%      { opacity: 0.4; box-shadow: 0 0 0 8px rgba(255,59,20,0); }
}
.cdt-fls__timer { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 22px; }
.cdt-fls__seg {
  background: var(--cdt-fls-paper); color: var(--cdt-fls-ink);
  border-radius: 3px; padding: 12px 4px 6px;
  text-align: center; position: relative; overflow: hidden;
}
.cdt-fls__seg::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 50%;
  background: rgba(0,0,0,0.04);
}
.cdt-fls__num {
  font-family: 'Archivo Black', sans-serif;
  font-size: 30px; line-height: 1; position: relative; z-index: 1;
  display: block;
}
.cdt-fls__lab {
  font-size: 9px; letter-spacing: 2px; text-transform: uppercase;
  color: #888; margin-top: 6px; display: block;
}
.cdt-fls__buy {
  width: 100%;
  background: var(--cdt-fls-flame); color: #fff;
  border: none; padding: 16px;
  font-family: 'Archivo Black', sans-serif;
  font-size: 15px; letter-spacing: 2px; text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.15s, background 0.2s;
}
.cdt-fls__buy:hover  { background: var(--cdt-fls-gold); color: var(--cdt-fls-ink); transform: translateY(-2px); }
.cdt-fls__buy:active { transform: translateY(0); }
.cdt-fls__buy:focus-visible { outline: 2px solid var(--cdt-fls-gold); outline-offset: 3px; }
.cdt-fls__stock { text-align: center; font-size: 11px; color: #999; margin-top: 12px; letter-spacing: 1px; }
.cdt-fls__stock b { color: var(--cdt-fls-gold); }

@media (prefers-reduced-motion: reduce) {
  .cdt-fls__pulse, .cdt-fls__buy { animation: none; transition: none; }
}
```

**JS:**
```js
(() => {
  const root = document.querySelector('.cdt-fls');
  if (!root) return;
  const target = Date.now() + (1*86400 + 7*3600 + 42*60 + 18) * 1000;
  const pad = (n) => String(n).padStart(2, '0');
  const els = {
    d: root.querySelector('[data-cdt-fls="d"]'),
    h: root.querySelector('[data-cdt-fls="h"]'),
    m: root.querySelector('[data-cdt-fls="m"]'),
    s: root.querySelector('[data-cdt-fls="s"]'),
  };
  function tick() {
    const diff = Math.max(0, target - Date.now());
    els.d.textContent = pad(Math.floor(diff / 86400000));
    els.h.textContent = pad(Math.floor(diff % 86400000 / 3600000));
    els.m.textContent = pad(Math.floor(diff % 3600000 / 60000));
    els.s.textContent = pad(Math.floor(diff % 60000 / 1000));
  }
  tick();
  setInterval(tick, 1000);
})();
```

### 02. Website Sticky Announcement Bars (Site-Wide)

**Type:** CSS + JS
**Description:** An ultra-thin, flexbox-aligned strip pinned to the top of the viewport, broadcasting a free-shipping deadline. Compact monospace clock with blinking colon separators, inline CTA pill, and a faux scrollable page so you can see it stay fixed. Best for site-wide promo bars, shipping cutoff alerts, holiday campaign chrome, and any persistent deadline that should never scroll away.

**HTML:**
```html
<section class="cdt-stk" aria-label="Sticky announcement bar countdown demo">
  <div class="cdt-stk__announce">
    <div class="cdt-stk__inner">
      <span class="cdt-stk__ship-icon" aria-hidden="true">
        <svg viewBox="0 0 24 24"><path d="M3 13V6a1 1 0 0 1 1-1h11v8H3zm13 0V8h3l3 3v2h-1a2 2 0 1 0-4 0h-1zm-9 4a2 2 0 1 1 0-.001zM18 17a2 2 0 1 1 0-.001z"/></svg>
      </span>
      <span class="cdt-stk__msg">🎉 <span class="cdt-stk__hl">FREE express shipping</span> on all orders — ends midnight!</span>
      <span class="cdt-stk__divider" aria-hidden="true"></span>
      <div class="cdt-stk__countdown" role="timer" aria-live="polite" aria-atomic="true">
        <span class="cdt-stk__lbl">Ends in</span>
        <span class="cdt-stk__unit" data-cdt-stk="h">05</span>
        <span class="cdt-stk__sep" aria-hidden="true">:</span>
        <span class="cdt-stk__unit" data-cdt-stk="m">00</span>
        <span class="cdt-stk__sep" aria-hidden="true">:</span>
        <span class="cdt-stk__unit" data-cdt-stk="s">00</span>
      </div>
      <a href="#" class="cdt-stk__cta-link">Shop Now</a>
    </div>
  </div>

  <div class="cdt-stk__page">
    <h2 class="cdt-stk__h2">Your storefront content</h2>
    <p class="cdt-stk__p">The announcement strip above stays pinned to the top of the section as visitors scroll. It is built with a flexbox-aligned inline layout, a compact monospace clock, and clean translucent borders that flow naturally with a site header.</p>
    <div class="cdt-stk__ghost"></div><div class="cdt-stk__ghost"></div><div class="cdt-stk__ghost cdt-stk__ghost--s"></div>
    <p class="cdt-stk__p">Scroll this card to confirm the bar remains fixed. The blinking colon separators reinforce that the deadline is live and ticking.</p>
    <div class="cdt-stk__ghost"></div><div class="cdt-stk__ghost"></div><div class="cdt-stk__ghost"></div><div class="cdt-stk__ghost cdt-stk__ghost--s"></div>
    <p class="cdt-stk__hint">↑ The bar stays put while you scroll ↑</p>
  </div>
</section>
```

**CSS:**
```css
/* ─── 02 Sticky Announcement Bar — site-wide countdown ──────── */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700&family=DM+Mono:wght@500&display=swap');

.cdt-stk {
  --cdt-stk-bar-bg: #0d1b2a;
  --cdt-stk-accent: #4ee1a0;
  --cdt-stk-accent-2: #7cc6fe;
  --cdt-stk-text: #eef4f8;

  position: relative;
  width: 100%;
  height: 560px;
  background: linear-gradient(180deg, #c7d4dc 0%, #9fb2bd 100%);
  font-family: 'Sora', sans-serif;
  display: flex; flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
}
.cdt-stk *, .cdt-stk *::before, .cdt-stk *::after { box-sizing: border-box; margin: 0; padding: 0; }

.cdt-stk__announce {
  position: sticky; top: 0; z-index: 100;
  width: 100%;
  background: var(--cdt-stk-bar-bg);
  background-image:
    radial-gradient(circle at 15% 50%, rgba(78,225,160,0.18), transparent 35%),
    radial-gradient(circle at 85% 50%, rgba(124,198,254,0.15), transparent 35%);
  color: var(--cdt-stk-text);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 4px 24px rgba(13,27,42,0.25);
}
.cdt-stk__inner {
  max-width: 1180px; margin: 0 auto;
  padding: 11px 22px;
  display: flex; align-items: center; gap: 16px;
  flex-wrap: wrap; justify-content: center;
}
.cdt-stk__ship-icon {
  width: 22px; height: 22px; border-radius: 50%;
  background: linear-gradient(135deg, var(--cdt-stk-accent), var(--cdt-stk-accent-2));
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; box-shadow: 0 0 14px rgba(78,225,160,0.5);
}
.cdt-stk__ship-icon svg { width: 13px; height: 13px; fill: var(--cdt-stk-bar-bg); }
.cdt-stk__msg { font-size: 14px; font-weight: 600; letter-spacing: 0.2px; }
.cdt-stk__hl  { color: var(--cdt-stk-accent); }
.cdt-stk__divider { width: 1px; height: 18px; background: rgba(255,255,255,0.15); }
.cdt-stk__countdown {
  display: flex; align-items: center; gap: 6px;
  font-family: 'DM Mono', monospace;
}
.cdt-stk__lbl {
  font-family: 'Sora', sans-serif;
  font-size: 12px; opacity: 0.65; margin-right: 4px; letter-spacing: 0.5px;
}
.cdt-stk__unit {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px; padding: 4px 8px;
  font-size: 14px; font-weight: 500;
  min-width: 30px; text-align: center; color: var(--cdt-stk-text);
}
.cdt-stk__sep {
  color: var(--cdt-stk-accent); font-weight: 700;
  animation: cdt-stk-flick 1s steps(1) infinite;
}
@keyframes cdt-stk-flick { 50% { opacity: 0.25; } }
.cdt-stk__cta-link {
  font-size: 13px; font-weight: 700;
  color: var(--cdt-stk-bar-bg); background: var(--cdt-stk-accent);
  padding: 7px 16px; border-radius: 20px;
  text-decoration: none; white-space: nowrap;
  transition: transform 0.15s, box-shadow 0.2s;
}
.cdt-stk__cta-link:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(78,225,160,0.4); }
.cdt-stk__cta-link:focus-visible { outline: 2px solid var(--cdt-stk-bar-bg); outline-offset: 2px; }

.cdt-stk__page { flex: 1; padding: 60px 24px; max-width: 760px; margin: 0 auto; color: #2b3a44; }
.cdt-stk__h2   { font-size: 22px; margin-bottom: 14px; font-weight: 700; color: #1c2a33; }
.cdt-stk__p    { line-height: 1.8; margin-bottom: 16px; opacity: 0.8; font-size: 14px; }
.cdt-stk__ghost { height: 12px; background: rgba(43,58,68,0.12); border-radius: 6px; margin-bottom: 10px; }
.cdt-stk__ghost--s { width: 60%; }
.cdt-stk__hint  { text-align: center; font-size: 12px; opacity: 0.55; margin-top: 30px; }

@media (max-width: 600px) {
  .cdt-stk__divider { display: none; }
  .cdt-stk__inner   { gap: 10px; padding: 10px 14px; }
  .cdt-stk__msg     { font-size: 12.5px; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .cdt-stk__sep, .cdt-stk__cta-link { animation: none; transition: none; }
}
```

**JS:**
```js
(() => {
  const root = document.querySelector('.cdt-stk');
  if (!root) return;
  const target = Date.now() + (5*3600 + 12*60 + 47) * 1000;
  const pad = (n) => String(n).padStart(2, '0');
  const h = root.querySelector('[data-cdt-stk="h"]');
  const m = root.querySelector('[data-cdt-stk="m"]');
  const s = root.querySelector('[data-cdt-stk="s"]');
  function tick() {
    const diff = Math.max(0, target - Date.now());
    h.textContent = pad(Math.floor(diff / 3600000));
    m.textContent = pad(Math.floor(diff % 3600000 / 60000));
    s.textContent = pad(Math.floor(diff % 60000 / 1000));
  }
  tick();
  setInterval(tick, 1000);
})();
```

### 03. Shopping Cart Expiration Timers

**Type:** CSS + JS
**Description:** A compact cart widget with a reserved-items alert, "Your cart is reserved for 04:59" MM:SS clock, blinking colon, and a draining progress sliver that shifts to red in the final 30 seconds — purpose-built to combat cart abandonment. Best for checkout flows, BOPIS reservations, ticket holds, limited-stock carts where a deadline is the conversion lever.

**HTML:**
```html
<section class="cdt-crt" aria-label="Cart expiration countdown timer demo">
  <div class="cdt-crt__cart">
    <div class="cdt-crt__reserve">
      <span class="cdt-crt__lock" aria-hidden="true">
        <svg viewBox="0 0 24 24"><path d="M12 1a5 5 0 0 0-5 5v3H6a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-9a2 2 0 0 0-2-2h-1V6a5 5 0 0 0-5-5zm-3 8V6a3 3 0 1 1 6 0v3H9z"/></svg>
      </span>
      <div class="cdt-crt__reserve-text">
        <p>Your cart is reserved for</p>
        <div class="cdt-crt__clock" role="timer" aria-live="polite" aria-atomic="true">
          <span data-cdt-crt="m">04</span><span class="cdt-crt__colon" aria-hidden="true">:</span><span data-cdt-crt="s">59</span>
        </div>
      </div>
    </div>
    <div class="cdt-crt__bar-track"><div class="cdt-crt__bar-fill" data-cdt-crt="bar"></div></div>

    <div class="cdt-crt__items">
      <div class="cdt-crt__row">
        <div class="cdt-crt__thumb cdt-crt__t1" aria-hidden="true">🎧</div>
        <div class="cdt-crt__meta"><h3>Studio Wireless Headphones</h3><span>Matte Black · Qty 1</span></div>
        <div class="cdt-crt__price">$129</div>
      </div>
      <div class="cdt-crt__row">
        <div class="cdt-crt__thumb cdt-crt__t2" aria-hidden="true">⌚</div>
        <div class="cdt-crt__meta"><h3>Pulse Fitness Watch</h3><span>Slate · Qty 1</span></div>
        <div class="cdt-crt__price">$89</div>
      </div>
    </div>

    <div class="cdt-crt__summary">
      <div class="cdt-crt__line"><span>Subtotal</span><span>$218.00</span></div>
      <div class="cdt-crt__line"><span>Shipping</span><span>Free</span></div>
      <div class="cdt-crt__total"><span>Total</span><span>$218.00</span></div>
      <button class="cdt-crt__checkout" type="button">Complete Checkout</button>
      <p class="cdt-crt__reassure">⚡ Hurry — items release back to stock when the timer ends</p>
    </div>
  </div>
</section>
```

**CSS:**
```css
/* ─── 03 Cart Expiration Timer — reservation hold UX ───────── */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&family=Roboto+Mono:wght@600&display=swap');

.cdt-crt {
  --cdt-crt-bg: #faf7f2;
  --cdt-crt-card: #ffffff;
  --cdt-crt-ink: #211c1a;
  --cdt-crt-muted: #8a807a;
  --cdt-crt-alert: #e8552d;
  --cdt-crt-alert-soft: #fef0eb;
  --cdt-crt-line: #efe9e1;

  position: relative;
  width: 100%;
  min-height: 520px;
  background: var(--cdt-crt-bg);
  background-image: radial-gradient(circle at 90% 0%, rgba(232,85,45,0.05), transparent 40%);
  font-family: 'Plus Jakarta Sans', sans-serif;
  display: flex; align-items: center; justify-content: center;
  padding: 36px 18px;
  color: var(--cdt-crt-ink);
  box-sizing: border-box;
  overflow: hidden;
}
.cdt-crt *, .cdt-crt *::before, .cdt-crt *::after { box-sizing: border-box; margin: 0; padding: 0; }

.cdt-crt__cart {
  background: var(--cdt-crt-card);
  width: 100%; max-width: 420px;
  border-radius: 20px;
  border: 1px solid var(--cdt-crt-line);
  box-shadow: 0 30px 60px -28px rgba(33,28,26,0.3);
  overflow: hidden;
}
.cdt-crt__reserve {
  background: var(--cdt-crt-alert-soft);
  border-bottom: 1px solid #f6ddd4;
  padding: 16px 22px;
  display: flex; align-items: center; gap: 13px;
}
.cdt-crt__lock {
  width: 34px; height: 34px; flex-shrink: 0;
  background: var(--cdt-crt-alert);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 14px -4px rgba(232,85,45,0.6);
}
.cdt-crt__lock svg { width: 16px; height: 16px; fill: #fff; }
.cdt-crt__reserve-text { flex: 1; }
.cdt-crt__reserve-text p { font-size: 12.5px; color: var(--cdt-crt-muted); font-weight: 600; }
.cdt-crt__clock {
  font-family: 'Roboto Mono', monospace;
  font-size: 22px; font-weight: 600;
  color: var(--cdt-crt-alert); letter-spacing: 1px;
  margin-top: 1px;
}
.cdt-crt__colon { animation: cdt-crt-blink 1s steps(1) infinite; }
@keyframes cdt-crt-blink { 50% { opacity: 0; } }

.cdt-crt__bar-track { height: 4px; background: #f3e7e1; }
.cdt-crt__bar-fill {
  height: 100%; width: 100%;
  background: linear-gradient(90deg, var(--cdt-crt-alert), #f6915f);
  transition: width 1s linear, background 0.3s;
}

.cdt-crt__items { padding: 8px 22px 4px; }
.cdt-crt__row {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 0; border-bottom: 1px solid var(--cdt-crt-line);
}
.cdt-crt__row:last-child { border-bottom: none; }
.cdt-crt__thumb {
  width: 56px; height: 56px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 24px;
}
.cdt-crt__t1 { background: #eaf2ff; }
.cdt-crt__t2 { background: #fff1e8; }
.cdt-crt__meta { flex: 1; }
.cdt-crt__meta h3 { font-size: 14px; font-weight: 700; }
.cdt-crt__meta span { font-size: 12px; color: var(--cdt-crt-muted); font-weight: 600; }
.cdt-crt__price { font-weight: 800; font-size: 15px; }

.cdt-crt__summary { padding: 18px 22px 22px; background: #fdfbf8; border-top: 1px solid var(--cdt-crt-line); }
.cdt-crt__line {
  display: flex; justify-content: space-between;
  font-size: 13px; color: var(--cdt-crt-muted); font-weight: 600; margin-bottom: 8px;
}
.cdt-crt__total {
  display: flex; justify-content: space-between;
  font-size: 18px; font-weight: 800; margin: 12px 0 18px;
}
.cdt-crt__checkout {
  width: 100%; border: none;
  background: var(--cdt-crt-ink); color: #fff;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700; font-size: 15px;
  padding: 16px; border-radius: 14px; cursor: pointer;
  transition: transform 0.15s, background 0.2s;
}
.cdt-crt__checkout:hover { background: var(--cdt-crt-alert); transform: translateY(-2px); }
.cdt-crt__checkout:focus-visible { outline: 2px solid var(--cdt-crt-alert); outline-offset: 3px; }
.cdt-crt__reassure { text-align: center; font-size: 11px; color: var(--cdt-crt-muted); margin-top: 12px; font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .cdt-crt__colon, .cdt-crt__bar-fill, .cdt-crt__checkout { animation: none; transition: none; }
}
```

**JS:**
```js
(() => {
  const root = document.querySelector('.cdt-crt');
  if (!root) return;
  const DURATION = 5 * 60;
  let remaining = 4 * 60 + 59;
  const pad = (n) => String(n).padStart(2, '0');
  const mEl  = root.querySelector('[data-cdt-crt="m"]');
  const sEl  = root.querySelector('[data-cdt-crt="s"]');
  const bar  = root.querySelector('[data-cdt-crt="bar"]');
  function tick() {
    mEl.textContent = pad(Math.floor(remaining / 60));
    sEl.textContent = pad(remaining % 60);
    bar.style.width = (remaining / DURATION * 100) + '%';
    if (remaining <= 30) bar.style.background = '#c0392b';
    if (remaining > 0) remaining--;
  }
  tick();
  setInterval(tick, 1000);
})();
```

### 04. "Coming Soon" & Product Launch Landing Pages

**Type:** CSS + JS
**Description:** A full-screen hero with animated aurora blobs, grain overlay, and four glassmorphism cards as the visual focal point. Gradient display typography, live status pip, and an email "Notify Me" capture for building launch anticipation. Best for unreleased product teasers, app pre-launch pages, event registration funnels, and waitlist capture flows.

**HTML:**
```html
<section class="cdt-coa" aria-label="Coming soon launch countdown demo">
  <div class="cdt-coa__aurora" aria-hidden="true">
    <span class="cdt-coa__b1"></span>
    <span class="cdt-coa__b2"></span>
    <span class="cdt-coa__b3"></span>
  </div>
  <div class="cdt-coa__wrap">
    <span class="cdt-coa__tag"><span class="cdt-coa__dot" aria-hidden="true"></span>Launching Soon</span>
    <h1 class="cdt-coa__h1">Something<br>extraordinary<br>is coming.</h1>
    <p class="cdt-coa__sub">We're putting the final touches on the next generation of our platform. Be the first to experience it the moment we go live.</p>

    <div class="cdt-coa__timer" role="timer" aria-live="polite" aria-atomic="true">
      <div class="cdt-coa__card"><span class="cdt-coa__num" data-cdt-coa="d">00</span><span class="cdt-coa__lab">Days</span></div>
      <div class="cdt-coa__card"><span class="cdt-coa__num" data-cdt-coa="h">00</span><span class="cdt-coa__lab">Hours</span></div>
      <div class="cdt-coa__card"><span class="cdt-coa__num" data-cdt-coa="m">00</span><span class="cdt-coa__lab">Minutes</span></div>
      <div class="cdt-coa__card"><span class="cdt-coa__num" data-cdt-coa="s">00</span><span class="cdt-coa__lab">Seconds</span></div>
    </div>

    <form class="cdt-coa__notify" onsubmit="event.preventDefault()">
      <input type="email" placeholder="you@email.com" aria-label="Email">
      <button type="submit">Notify Me</button>
    </form>
  </div>
</section>
```

**CSS:**
```css
/* ─── 04 Coming Soon — glassmorphism aurora launch ─────────── */
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@600;700;800&family=Outfit:wght@300;400;500&display=swap');

.cdt-coa {
  --cdt-coa-bg: #07060f;
  --cdt-coa-glass: rgba(255,255,255,0.06);
  --cdt-coa-glass-line: rgba(255,255,255,0.14);
  --cdt-coa-text: #f3f0ff;
  --cdt-coa-muted: #a39fc4;
  --cdt-coa-glow1: #8b5cff;
  --cdt-coa-glow2: #2de2c6;

  position: relative;
  width: 100%;
  min-height: 600px;
  background: var(--cdt-coa-bg);
  font-family: 'Outfit', sans-serif;
  color: var(--cdt-coa-text);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  padding: 40px 30px;
  box-sizing: border-box;
}
.cdt-coa *, .cdt-coa *::before, .cdt-coa *::after { box-sizing: border-box; margin: 0; padding: 0; }

.cdt-coa__aurora { position: absolute; inset: -20%; z-index: 0; filter: blur(90px); opacity: 0.7; }
.cdt-coa__aurora span { position: absolute; border-radius: 50%; mix-blend-mode: screen; }
.cdt-coa__b1 { width: 50%; height: 50%; background: var(--cdt-coa-glow1); top: -10%; left: -5%; animation: cdt-coa-float1 14s ease-in-out infinite; }
.cdt-coa__b2 { width: 45%; height: 45%; background: var(--cdt-coa-glow2); bottom: -15%; right: -5%; animation: cdt-coa-float2 18s ease-in-out infinite; }
.cdt-coa__b3 { width: 30%; height: 30%; background: #ff5db1; top: 40%; left: 50%; animation: cdt-coa-float1 22s ease-in-out infinite reverse; }
@keyframes cdt-coa-float1 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(8%, 12%) scale(1.15); } }
@keyframes cdt-coa-float2 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-10%, -8%) scale(1.1); } }

.cdt-coa__wrap { position: relative; z-index: 2; text-align: center; max-width: 760px; }

.cdt-coa__tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; letter-spacing: 3px; text-transform: uppercase;
  color: var(--cdt-coa-muted);
  border: 1px solid var(--cdt-coa-glass-line);
  background: var(--cdt-coa-glass);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  padding: 8px 18px; border-radius: 30px; margin-bottom: 22px;
}
.cdt-coa__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--cdt-coa-glow2); box-shadow: 0 0 10px var(--cdt-coa-glow2);
  animation: cdt-coa-ping 1.6s infinite;
}
@keyframes cdt-coa-ping { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

.cdt-coa__h1 {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: clamp(34px, 6vw, 64px);
  line-height: 0.95; letter-spacing: -2px;
  margin-bottom: 16px;
  background: linear-gradient(120deg, #fff 30%, #c4b5ff 60%, var(--cdt-coa-glow2));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.cdt-coa__sub {
  font-weight: 300; font-size: clamp(14px, 1.8vw, 17px);
  color: var(--cdt-coa-muted);
  max-width: 520px; margin: 0 auto 36px; line-height: 1.6;
}

.cdt-coa__timer { display: flex; justify-content: center; gap: 14px; margin-bottom: 36px; flex-wrap: wrap; }
.cdt-coa__card {
  background: var(--cdt-coa-glass);
  border: 1px solid var(--cdt-coa-glass-line);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border-radius: 22px;
  padding: 22px 8px 16px; width: 110px;
  position: relative;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 24px 50px -20px rgba(0,0,0,0.6);
  overflow: hidden;
}
.cdt-coa__card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
}
.cdt-coa__num {
  font-family: 'Syne', sans-serif;
  font-weight: 700; font-size: 44px; line-height: 1;
  text-shadow: 0 0 24px rgba(139,92,255,0.5);
  display: block;
}
.cdt-coa__lab {
  display: block; margin-top: 10px;
  font-size: 10px; letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--cdt-coa-muted);
}

.cdt-coa__notify {
  display: inline-flex;
  background: var(--cdt-coa-glass);
  border: 1px solid var(--cdt-coa-glass-line);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-radius: 40px; padding: 6px 6px 6px 22px;
  align-items: center; gap: 12px;
}
.cdt-coa__notify input {
  background: transparent; border: none; outline: none;
  color: var(--cdt-coa-text); font-family: 'Outfit', sans-serif;
  font-size: 15px; width: 200px;
}
.cdt-coa__notify input::placeholder { color: var(--cdt-coa-muted); }
.cdt-coa__notify button {
  border: none; cursor: pointer;
  background: linear-gradient(120deg, var(--cdt-coa-glow1), var(--cdt-coa-glow2));
  color: #07060f; font-weight: 600; font-family: 'Outfit', sans-serif;
  font-size: 14px; padding: 12px 24px; border-radius: 34px;
  transition: transform 0.15s, box-shadow 0.2s;
}
.cdt-coa__notify button:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(139,92,255,0.5); }
.cdt-coa__notify button:focus-visible { outline: 2px solid var(--cdt-coa-glow2); outline-offset: 2px; }

@media (max-width: 560px) {
  .cdt-coa__card { width: 70px; padding: 18px 4px 12px; }
  .cdt-coa__num  { font-size: 30px; }
  .cdt-coa__notify input { width: 130px; }
}
@media (prefers-reduced-motion: reduce) {
  .cdt-coa__aurora span, .cdt-coa__dot, .cdt-coa__notify button { animation: none; transition: none; }
}
```

**JS:**
```js
(() => {
  const root = document.querySelector('.cdt-coa');
  if (!root) return;
  const target = Date.now() + (18*86400 + 6*3600 + 31*60 + 9) * 1000;
  const pad = (n) => String(n).padStart(2, '0');
  const els = {
    d: root.querySelector('[data-cdt-coa="d"]'),
    h: root.querySelector('[data-cdt-coa="h"]'),
    m: root.querySelector('[data-cdt-coa="m"]'),
    s: root.querySelector('[data-cdt-coa="s"]'),
  };
  function tick() {
    const diff = Math.max(0, target - Date.now());
    els.d.textContent = pad(Math.floor(diff / 86400000));
    els.h.textContent = pad(Math.floor(diff % 86400000 / 3600000));
    els.m.textContent = pad(Math.floor(diff % 3600000 / 60000));
    els.s.textContent = pad(Math.floor(diff % 60000 / 1000));
  }
  tick();
  setInterval(tick, 1000);
})();
```

### 05. Circular Progress & Activity Timers (SaaS/Fitness/EdTech)

**Type:** CSS + JS
**Description:** A radial SVG ring using stroke-dasharray/stroke-dashoffset that smoothly drains as time runs out, color-shifting green → amber → red. Framed as a quiz timer with center digits, live status, and pause/resume/reset controls. Best for SaaS onboarding step timers, fitness app interval rounds, EdTech quiz countdowns, and webinar pre-roll holds.

**HTML:**
```html
<section class="cdt-cir" aria-label="Circular progress countdown timer demo">
  <div class="cdt-cir__panel">
    <div class="cdt-cir__quiz-label">Section 2 of 4</div>
    <div class="cdt-cir__quiz-title">Algebra Aptitude Quiz</div>

    <div class="cdt-cir__ring-wrap">
      <svg viewBox="0 0 240 240" aria-hidden="true">
        <circle class="cdt-cir__ring-bg" cx="120" cy="120" r="106"/>
        <circle class="cdt-cir__ring-fg" data-cdt-cir="ring" cx="120" cy="120" r="106"/>
      </svg>
      <div class="cdt-cir__ring-center" role="timer" aria-live="polite" aria-atomic="true">
        <div class="cdt-cir__time" data-cdt-cir="time">02:00</div>
        <div class="cdt-cir__cap">Remaining</div>
      </div>
    </div>

    <div class="cdt-cir__status" data-cdt-cir="status">
      <span class="cdt-cir__pip" aria-hidden="true"></span>
      <span data-cdt-cir="statusTxt">Time is running</span>
    </div>

    <div class="cdt-cir__controls">
      <button data-cdt-cir="reset" type="button">Reset</button>
      <button data-cdt-cir="toggle" type="button" class="cdt-cir__primary">Pause</button>
    </div>
  </div>
</section>
```

**CSS:**
```css
/* ─── 05 Circular Progress Timer — SVG ring drain ──────────── */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700;800&family=JetBrains+Mono:wght@600;700&display=swap');

.cdt-cir {
  --cdt-cir-bg: #0f1419;
  --cdt-cir-panel: #161d26;
  --cdt-cir-panel-line: #232c38;
  --cdt-cir-text: #e8eef4;
  --cdt-cir-muted: #7c8a9a;
  --cdt-cir-ring-bg: #232c38;
  --cdt-cir-green: #34d399;
  --cdt-cir-amber: #fbbf24;
  --cdt-cir-red: #f87171;

  position: relative;
  width: 100%;
  min-height: 560px;
  background: var(--cdt-cir-bg);
  background-image: radial-gradient(circle at 50% 0%, rgba(52,211,153,0.06), transparent 50%);
  font-family: 'Sora', sans-serif;
  color: var(--cdt-cir-text);
  display: flex; align-items: center; justify-content: center;
  padding: 36px 20px;
  box-sizing: border-box;
  overflow: hidden;
}
.cdt-cir *, .cdt-cir *::before, .cdt-cir *::after { box-sizing: border-box; margin: 0; padding: 0; }

.cdt-cir__panel {
  background: var(--cdt-cir-panel);
  border: 1px solid var(--cdt-cir-panel-line);
  border-radius: 28px;
  padding: 36px 36px 32px;
  width: 100%; max-width: 380px;
  text-align: center;
  box-shadow: 0 40px 80px -40px rgba(0,0,0,0.8);
}
.cdt-cir__quiz-label {
  font-size: 12px; letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--cdt-cir-muted); margin-bottom: 6px; font-weight: 600;
}
.cdt-cir__quiz-title { font-size: 18px; font-weight: 700; margin-bottom: 26px; }

.cdt-cir__ring-wrap { position: relative; width: 220px; height: 220px; margin: 0 auto 26px; }
.cdt-cir__ring-wrap svg { transform: rotate(-90deg); width: 100%; height: 100%; }
.cdt-cir__ring-bg { fill: none; stroke: var(--cdt-cir-ring-bg); stroke-width: 14; }
.cdt-cir__ring-fg {
  fill: none; stroke: var(--cdt-cir-green); stroke-width: 14; stroke-linecap: round;
  transition: stroke-dashoffset 1s linear, stroke 0.4s ease;
  filter: drop-shadow(0 0 8px rgba(52,211,153,0.5));
}

.cdt-cir__ring-center {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
.cdt-cir__time {
  font-family: 'JetBrains Mono', monospace;
  font-size: 52px; font-weight: 700; line-height: 1; letter-spacing: -1px;
}
.cdt-cir__cap {
  font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--cdt-cir-muted); margin-top: 8px;
}

.cdt-cir__status {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600;
  padding: 7px 16px; border-radius: 20px;
  background: rgba(52,211,153,0.12); color: var(--cdt-cir-green);
  margin-bottom: 24px; transition: all 0.4s;
}
.cdt-cir__pip {
  width: 8px; height: 8px; border-radius: 50%; background: currentColor;
  animation: cdt-cir-blip 1.2s infinite;
}
@keyframes cdt-cir-blip { 50% { opacity: 0.3; } }

.cdt-cir__controls { display: flex; gap: 10px; }
.cdt-cir__controls button {
  flex: 1;
  font-family: 'Sora', sans-serif; font-weight: 600; font-size: 14px;
  padding: 12px; border-radius: 14px; cursor: pointer;
  border: 1px solid var(--cdt-cir-panel-line);
  background: transparent; color: var(--cdt-cir-text);
  transition: background 0.2s, transform 0.15s, border-color 0.2s;
}
.cdt-cir__controls button:hover         { background: var(--cdt-cir-panel-line); transform: translateY(-1px); }
.cdt-cir__controls button:focus-visible { outline: 2px solid var(--cdt-cir-green); outline-offset: 2px; }
.cdt-cir__primary {
  background: var(--cdt-cir-green) !important;
  color: #07120d !important;
  border-color: var(--cdt-cir-green) !important;
}
.cdt-cir__primary:hover { background: #2bbd86 !important; }

@media (prefers-reduced-motion: reduce) {
  .cdt-cir__ring-fg, .cdt-cir__pip, .cdt-cir__controls button { transition: none; animation: none; }
}
```

**JS:**
```js
(() => {
  const root = document.querySelector('.cdt-cir');
  if (!root) return;
  const R = 106;
  const CIRC = 2 * Math.PI * R;
  const ring      = root.querySelector('[data-cdt-cir="ring"]');
  const timeEl    = root.querySelector('[data-cdt-cir="time"]');
  const statusEl  = root.querySelector('[data-cdt-cir="status"]');
  const statusTxt = root.querySelector('[data-cdt-cir="statusTxt"]');
  const toggleBtn = root.querySelector('[data-cdt-cir="toggle"]');
  const resetBtn  = root.querySelector('[data-cdt-cir="reset"]');
  ring.style.strokeDasharray = CIRC;

  const TOTAL = 120;
  let remaining = TOTAL;
  let running   = true;
  const pad = (n) => String(n).padStart(2, '0');

  function color() {
    const frac = remaining / TOTAL;
    if (frac > 0.5) return '#34d399';
    if (frac > 0.2) return '#fbbf24';
    return '#f87171';
  }

  function render() {
    timeEl.textContent = pad(Math.floor(remaining / 60)) + ':' + pad(remaining % 60);
    ring.style.strokeDashoffset = CIRC * (1 - remaining / TOTAL);
    const c = color();
    ring.style.stroke = c;
    ring.style.filter = 'drop-shadow(0 0 8px ' + c + ')';
    statusEl.style.background = c + '20';
    statusEl.style.color = c;
    if (remaining <= 0) {
      statusTxt.textContent = "Time's up!";
      running = false;
      toggleBtn.textContent = 'Start';
    }
  }

  function loop() {
    if (running && remaining > 0) {
      remaining--;
      render();
    }
  }

  toggleBtn.onclick = () => {
    if (remaining <= 0) remaining = TOTAL;
    running = !running;
    toggleBtn.textContent = running ? 'Pause' : 'Resume';
    statusTxt.textContent = running ? 'Time is running' : 'Paused';
  };
  resetBtn.onclick = () => {
    remaining = TOTAL;
    running = true;
    toggleBtn.textContent = 'Pause';
    statusTxt.textContent = 'Time is running';
    render();
  };

  render();
  setInterval(loop, 1000);
})();
```

### 06. Retro Flip-Clock Timers

**Type:** CSS + JS
**Description:** A classic airport split-flap board using 3D CSS transforms and perspective for mechanical flip motion. Two-digit flaps per unit, glowing amber accents, pulsing colons, and a film-grain ambiance for premium, event-style branding. Best for premium product launches, gallery openings, festival countdowns, and anywhere the deadline itself deserves to be the visual centerpiece.

**HTML:**
```html
<section class="cdt-flp" aria-label="Retro flip-clock countdown timer demo">
  <div class="cdt-flp__marquee">Departure In</div>

  <div class="cdt-flp__clock" role="timer" aria-live="off" aria-atomic="true">
    <div class="cdt-flp__group">
      <div class="cdt-flp__digits">
        <div class="cdt-flp__flap" data-cdt-flp="d0"></div>
        <div class="cdt-flp__flap" data-cdt-flp="d1"></div>
      </div>
      <span class="cdt-flp__glabel">Days</span>
    </div>
    <span class="cdt-flp__colon" aria-hidden="true">:</span>
    <div class="cdt-flp__group">
      <div class="cdt-flp__digits">
        <div class="cdt-flp__flap" data-cdt-flp="h0"></div>
        <div class="cdt-flp__flap" data-cdt-flp="h1"></div>
      </div>
      <span class="cdt-flp__glabel">Hours</span>
    </div>
    <span class="cdt-flp__colon" aria-hidden="true">:</span>
    <div class="cdt-flp__group">
      <div class="cdt-flp__digits">
        <div class="cdt-flp__flap" data-cdt-flp="m0"></div>
        <div class="cdt-flp__flap" data-cdt-flp="m1"></div>
      </div>
      <span class="cdt-flp__glabel">Minutes</span>
    </div>
    <span class="cdt-flp__colon" aria-hidden="true">:</span>
    <div class="cdt-flp__group">
      <div class="cdt-flp__digits">
        <div class="cdt-flp__flap" data-cdt-flp="s0"></div>
        <div class="cdt-flp__flap" data-cdt-flp="s1"></div>
      </div>
      <span class="cdt-flp__glabel">Seconds</span>
    </div>
  </div>
</section>
```

**CSS:**
```css
/* ─── 06 Retro Flip Clock — 3D split-flap mechanism ────────── */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Oswald:wght@300;400;500&display=swap');

.cdt-flp {
  --cdt-flp-bg: #1a1410;
  --cdt-flp-flap: #181818;
  --cdt-flp-flap-line: #000;
  --cdt-flp-digit: #f5f0e6;
  --cdt-flp-accent: #e6b450;
  --cdt-flp-label: #8c7a5c;

  position: relative;
  width: 100%;
  min-height: 520px;
  background:
    radial-gradient(circle at 50% 20%, rgba(230,180,80,0.10), transparent 55%),
    repeating-linear-gradient(0deg, rgba(0,0,0,0.15) 0 2px, transparent 2px 4px),
    var(--cdt-flp-bg);
  font-family: 'Oswald', sans-serif;
  color: var(--cdt-flp-digit);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 40px 20px;
  box-sizing: border-box;
  overflow: hidden;
}
.cdt-flp *, .cdt-flp *::before, .cdt-flp *::after { box-sizing: border-box; margin: 0; padding: 0; }

.cdt-flp__marquee {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(20px, 3vw, 30px);
  letter-spacing: 6px; color: var(--cdt-flp-accent);
  margin-bottom: 30px;
  text-shadow: 0 2px 12px rgba(230,180,80,0.4);
}

.cdt-flp__clock { display: flex; align-items: center; gap: 10px; }
.cdt-flp__group { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.cdt-flp__digits { display: flex; gap: 5px; }
.cdt-flp__glabel {
  font-size: 11px; letter-spacing: 4px; text-transform: uppercase;
  color: var(--cdt-flp-label); font-weight: 400;
}

.cdt-flp__flap {
  position: relative;
  width: 56px; height: 80px;
  perspective: 320px;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 60px; line-height: 80px; text-align: center;
}
.cdt-flp__flap .cdt-flp__card {
  position: absolute; left: 0; right: 0;
  height: 40px; overflow: hidden;
  background: var(--cdt-flp-flap);
  box-shadow: inset 0 0 14px rgba(0,0,0,0.6);
}
.cdt-flp__flap .cdt-flp__top {
  top: 0; border-radius: 7px 7px 0 0;
  border-bottom: 1px solid var(--cdt-flp-flap-line);
  align-items: flex-end;
}
.cdt-flp__flap .cdt-flp__top span { display: block; }
.cdt-flp__flap .cdt-flp__bottom {
  bottom: 0; border-radius: 0 0 7px 7px; line-height: 0;
}
.cdt-flp__flap .cdt-flp__bottom span { display: block; line-height: 80px; margin-top: -40px; }

.cdt-flp__flap .cdt-flp__flip-top,
.cdt-flp__flap .cdt-flp__flip-bottom {
  position: absolute; left: 0; right: 0;
  height: 40px; overflow: hidden;
  background: var(--cdt-flp-flap);
  backface-visibility: hidden;
}
.cdt-flp__flap .cdt-flp__flip-top {
  top: 0; border-radius: 7px 7px 0 0;
  border-bottom: 1px solid var(--cdt-flp-flap-line);
  transform-origin: bottom;
  box-shadow: inset 0 0 14px rgba(0,0,0,0.6);
}
.cdt-flp__flap .cdt-flp__flip-bottom {
  bottom: 0; border-radius: 0 0 7px 7px; line-height: 0;
  transform-origin: top; transform: rotateX(90deg);
  box-shadow: inset 0 0 14px rgba(0,0,0,0.6);
}
.cdt-flp__flap .cdt-flp__flip-bottom span { display: block; line-height: 80px; margin-top: -40px; }

.cdt-flp__flap.cdt-flp--go .cdt-flp__flip-top    { animation: cdt-flp-flip-top    0.3s ease-in forwards; }
.cdt-flp__flap.cdt-flp--go .cdt-flp__flip-bottom { animation: cdt-flp-flip-bottom 0.3s 0.3s ease-out forwards; }
@keyframes cdt-flp-flip-top    { 0% { transform: rotateX(0); }    100% { transform: rotateX(-90deg); } }
@keyframes cdt-flp-flip-bottom { 0% { transform: rotateX(90deg); } 100% { transform: rotateX(0); } }

.cdt-flp__flap::after {
  content: ''; position: absolute; left: 0; right: 0; top: 50%;
  height: 2px; background: rgba(0,0,0,0.55);
  transform: translateY(-1px); z-index: 5;
}

.cdt-flp__colon {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 48px; color: var(--cdt-flp-accent);
  align-self: flex-start; margin-top: 8px;
  animation: cdt-flp-pulse 1s steps(1) infinite;
}
@keyframes cdt-flp-pulse { 50% { opacity: 0.25; } }

@media (max-width: 560px) {
  .cdt-flp__flap { width: 38px; height: 56px; font-size: 42px; line-height: 56px; }
  .cdt-flp__flap .cdt-flp__card,
  .cdt-flp__flap .cdt-flp__flip-top,
  .cdt-flp__flap .cdt-flp__flip-bottom { height: 28px; }
  .cdt-flp__flap .cdt-flp__bottom span,
  .cdt-flp__flap .cdt-flp__flip-bottom span { line-height: 56px; margin-top: -28px; }
  .cdt-flp__colon { font-size: 34px; }
  .cdt-flp__clock { gap: 6px; }
  .cdt-flp__digits { gap: 3px; }
}
@media (prefers-reduced-motion: reduce) {
  .cdt-flp__flap.cdt-flp--go .cdt-flp__flip-top,
  .cdt-flp__flap.cdt-flp--go .cdt-flp__flip-bottom,
  .cdt-flp__colon { animation: none; }
}
```

**JS:**
```js
(() => {
  const root = document.querySelector('.cdt-flp');
  if (!root) return;
  function buildFlap(el, val) {
    el.dataset.val = val;
    el.innerHTML =
      '<div class="cdt-flp__card cdt-flp__top"><span>' + val + '</span></div>' +
      '<div class="cdt-flp__card cdt-flp__bottom"><span>' + val + '</span></div>' +
      '<div class="cdt-flp__flip-top"><span>' + val + '</span></div>' +
      '<div class="cdt-flp__flip-bottom"><span>' + val + '</span></div>';
  }
  function setFlap(el, next) {
    const cur = el.dataset.val;
    if (cur === next) return;
    const top        = el.querySelector('.cdt-flp__top span');
    const bottom     = el.querySelector('.cdt-flp__bottom span');
    const flipTop    = el.querySelector('.cdt-flp__flip-top span');
    const flipBottom = el.querySelector('.cdt-flp__flip-bottom span');
    flipTop.textContent    = cur;
    flipBottom.textContent = next;
    bottom.textContent     = next;
    top.textContent        = cur;
    el.classList.remove('cdt-flp--go');
    void el.offsetWidth;
    el.classList.add('cdt-flp--go');
    setTimeout(() => {
      top.textContent = next;
      el.dataset.val = next;
    }, 600);
  }
  const flaps = {
    d0: root.querySelector('[data-cdt-flp="d0"]'), d1: root.querySelector('[data-cdt-flp="d1"]'),
    h0: root.querySelector('[data-cdt-flp="h0"]'), h1: root.querySelector('[data-cdt-flp="h1"]'),
    m0: root.querySelector('[data-cdt-flp="m0"]'), m1: root.querySelector('[data-cdt-flp="m1"]'),
    s0: root.querySelector('[data-cdt-flp="s0"]'), s1: root.querySelector('[data-cdt-flp="s1"]'),
  };
  Object.values(flaps).forEach((f) => buildFlap(f, '0'));
  const target = Date.now() + (3*86400 + 14*3600 + 25*60 + 50) * 1000;
  const pad = (n) => String(n).padStart(2, '0');
  function render() {
    const diff = Math.max(0, target - Date.now());
    const d = pad(Math.floor(diff / 86400000));
    const h = pad(Math.floor(diff % 86400000 / 3600000));
    const m = pad(Math.floor(diff % 3600000 / 60000));
    const s = pad(Math.floor(diff % 60000 / 1000));
    setFlap(flaps.d0, d[0]); setFlap(flaps.d1, d[1]);
    setFlap(flaps.h0, h[0]); setFlap(flaps.h1, h[1]);
    setFlap(flaps.m0, m[0]); setFlap(flaps.m1, m[1]);
    setFlap(flaps.s0, s[0]); setFlap(flaps.s1, s[1]);
  }
  render();
  setInterval(render, 1000);
})();
```

---
## 12 CSS Dark Mode UI Patterns

URL: https://codefronts.com/design-styles/css-dark-mode-ui/
Description: 12 free CSS dark-mode UI patterns — OLED true-black, single-accent surfaces, layered slate, and emissive glow effects with copy-paste HTML and CSS.
Demo count: 12

### 01. OLED Card

**Type:** Pure CSS
**Description:** True-black background that switches off OLED pixels entirely — paired with a single accent stroke for the active element.

**HTML:**
```html
<div class="dm-oled-bg">
  <article class="dm-oled">
    <span class="dm-oled__tag">NEW</span>
    <h3 class="dm-oled__title">Battery saver</h3>
    <p class="dm-oled__body">Pure-black surfaces save up to 60% on OLED screens.</p>
    <button class="dm-oled__btn">Learn more →</button>
  </article>
</div>
```

**CSS:**
```css
.dm-oled-bg { padding: 28px; border-radius: 16px; background: #000; }
.dm-oled {
  background: #000;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 18px 20px;
  color: #ededed;
}
.dm-oled__tag {
  display: inline-block;
  background: transparent;
  color: #4ade80;
  border: 1px solid #4ade80;
  padding: 2px 8px; border-radius: 4px;
  font: 700 9px ui-monospace, monospace;
  letter-spacing: 0.12em;
  margin-bottom: 12px;
}
.dm-oled__title { margin: 0 0 6px; font: 700 16px/1.2 system-ui, sans-serif; color: #fff; }
.dm-oled__body  { margin: 0 0 14px; font: 12px/1.55 system-ui, sans-serif; color: rgba(255, 255, 255, 0.55); }
.dm-oled__btn {
  background: none; border: none;
  color: #4ade80; padding: 0;
  font: 600 12px system-ui, sans-serif; cursor: pointer;
  transition: color 0.2s;
}
.dm-oled__btn:hover { color: #86efac; }
```

### 02. Stealth Panel

**Type:** Pure CSS
**Description:** Surfaces hide behind a near-black background — only the active control reveals itself with a hairline stroke.

**HTML:**
```html
<div class="dm-stealth-bg">
  <div class="dm-stealth">
    <div class="dm-stealth__row">
      <span class="dm-stealth__lbl">Status</span>
      <span class="dm-stealth__val dm-stealth__val--ok">OPERATIONAL</span>
    </div>
    <div class="dm-stealth__row">
      <span class="dm-stealth__lbl">Latency</span>
      <span class="dm-stealth__val">42 ms</span>
    </div>
    <div class="dm-stealth__row">
      <span class="dm-stealth__lbl">Region</span>
      <span class="dm-stealth__val">us-east-1</span>
    </div>
  </div>
</div>
```

**CSS:**
```css
.dm-stealth-bg { padding: 28px; border-radius: 16px; background: #050505; }
.dm-stealth {
  background: #050505;
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 10px;
  padding: 8px;
}
.dm-stealth__row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 12px;
  border-radius: 6px;
  transition: background 0.15s;
}
.dm-stealth__row:hover {
  background: rgba(255, 255, 255, 0.03);
}
.dm-stealth__row + .dm-stealth__row { border-top: 1px solid rgba(255, 255, 255, 0.04); }
.dm-stealth__lbl {
  font: 500 11px ui-monospace, monospace;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.08em; text-transform: uppercase;
}
.dm-stealth__val {
  font: 600 12px ui-monospace, monospace;
  color: rgba(255, 255, 255, 0.85);
}
.dm-stealth__val--ok { color: #4ade80; }
```

### 03. Inkwell Modal

**Type:** Pure CSS
**Description:** Deep-black dialog with a single warm-amber rim — the kind of confirmation modal that whispers instead of shouting.

**HTML:**
```html
<div class="dm-ink-bg">
  <div class="dm-ink">
    <div class="dm-ink__icon">!</div>
    <h3 class="dm-ink__title">Save your work?</h3>
    <p class="dm-ink__body">Unsaved changes will be lost when you close.</p>
    <div class="dm-ink__row">
      <button class="dm-ink__btn">Discard</button>
      <button class="dm-ink__btn dm-ink__btn--primary">Save</button>
    </div>
  </div>
</div>
```

**CSS:**
```css
.dm-ink-bg { padding: 28px; border-radius: 16px; background: #0a0905; }
.dm-ink {
  background: #000;
  border: 1px solid #d4a017;
  border-radius: 12px;
  padding: 18px 20px;
  text-align: center;
  box-shadow: 0 0 0 1px rgba(212, 160, 23, 0.25), 0 8px 32px rgba(212, 160, 23, 0.1);
}
.dm-ink__icon {
  width: 36px; height: 36px;
  margin: 0 auto 12px;
  border: 1.5px solid #d4a017;
  border-radius: 50%;
  display: grid; place-items: center;
  font: 800 18px ui-serif, Georgia;
  color: #d4a017;
}
.dm-ink__title { margin: 0 0 6px; font: 700 14px system-ui, sans-serif; color: #fff; }
.dm-ink__body  { margin: 0 0 16px; font: 12px/1.55 system-ui, sans-serif; color: rgba(255, 255, 255, 0.55); }
.dm-ink__row { display: flex; gap: 8px; justify-content: center; }
.dm-ink__btn {
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 7px 16px; border-radius: 7px;
  font: 600 11px system-ui, sans-serif; cursor: pointer;
  transition: all 0.18s;
}
.dm-ink__btn:hover { color: #fff; border-color: rgba(255, 255, 255, 0.35); }
.dm-ink__btn--primary {
  background: #d4a017; color: #000; border-color: #d4a017;
}
.dm-ink__btn--primary:hover { background: #f5b818; border-color: #f5b818; }
```

### 04. Cyber Terminal

**Type:** Pure CSS
**Description:** Phosphor-green CRT terminal aesthetic — text and chrome share one accent color, suggesting a coherent technical voice.

**HTML:**
```html
<div class="dm-cyber-bg">
  <div class="dm-cyber">
    <div class="dm-cyber__head">
      <span class="dm-cyber__dot"></span>
      <span>node-01.codefronts.io</span>
    </div>
    <div class="dm-cyber__body">
      <div class="dm-cyber__line"><span class="dm-cyber__prompt">$</span> deploy --env=prod</div>
      <div class="dm-cyber__line">→ Build complete in 8.42s</div>
      <div class="dm-cyber__line">→ 158 pages · 0 errors</div>
      <div class="dm-cyber__line">
        <span class="dm-cyber__prompt">$</span> <span class="dm-cyber__cur">█</span>
      </div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.dm-cyber-bg { padding: 22px; border-radius: 16px; background: #020a05; }
.dm-cyber {
  background: #020a05;
  border: 1px solid rgba(74, 222, 128, 0.25);
  border-radius: 8px;
  font-family: ui-monospace, "JetBrains Mono", monospace;
  color: #4ade80;
  overflow: hidden;
}
.dm-cyber__head {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  background: rgba(74, 222, 128, 0.06);
  border-bottom: 1px solid rgba(74, 222, 128, 0.15);
  font-size: 11px;
  color: rgba(74, 222, 128, 0.7);
}
.dm-cyber__dot {
  width: 6px; height: 6px;
  background: #4ade80;
  border-radius: 50%;
  box-shadow: 0 0 8px #4ade80;
}
.dm-cyber__body { padding: 12px 14px; font-size: 11.5px; line-height: 1.7; }
.dm-cyber__line { color: rgba(74, 222, 128, 0.85); }
.dm-cyber__prompt { color: #86efac; font-weight: 700; margin-right: 4px; }
.dm-cyber__cur { animation: dm-cyber-blink 0.8s steps(2) infinite; }
@keyframes dm-cyber-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .dm-cyber__cur { animation: none; } }
```

### 05. Mocha Workstation

**Type:** Pure CSS
**Description:** Warm coffee-tone dark mode — espresso brown surfaces with cream highlights for a cozy reading-app aesthetic.

**HTML:**
```html
<div class="dm-mocha-bg">
  <article class="dm-mocha">
    <div class="dm-mocha__meta">FEATURED · 4 MIN READ</div>
    <h3 class="dm-mocha__title">The art of restraint</h3>
    <p class="dm-mocha__body">
      In the long view, less surface area means fewer maintenance burdens. Choose carefully what you
      build.
    </p>
    <div class="dm-mocha__author">
      <span class="dm-mocha__avatar">M</span>
      <span>Marcus Rivera</span>
    </div>
  </article>
</div>
```

**CSS:**
```css
.dm-mocha-bg { padding: 28px; border-radius: 16px; background: #1c1410; }
.dm-mocha {
  background: #2a1f18;
  border: 1px solid #3d2c20;
  border-radius: 10px;
  padding: 18px 22px;
  color: #f5e6d3;
}
.dm-mocha__meta {
  font: 700 10px ui-monospace, monospace;
  color: #c9a961;
  letter-spacing: 0.12em;
  margin-bottom: 10px;
}
.dm-mocha__title { margin: 0 0 8px; font: 700 16px/1.3 ui-serif, Georgia; color: #fff8ed; }
.dm-mocha__body  { margin: 0 0 14px; font: 12.5px/1.65 ui-serif, Georgia; color: #d6c4ab; font-style: italic; }
.dm-mocha__author {
  display: flex; align-items: center; gap: 8px;
  font: 600 11px system-ui, sans-serif;
  color: #c9a961;
  padding-top: 12px;
  border-top: 1px solid #3d2c20;
}
.dm-mocha__avatar {
  width: 22px; height: 22px;
  background: #c9a961;
  color: #1c1410;
  border-radius: 50%;
  display: grid; place-items: center;
  font: 700 11px system-ui, sans-serif;
}
```

### 06. Forest Dim

**Type:** Pure CSS
**Description:** Deep evergreen surfaces with sage accents — a calmer alternative to violet/cyan dark modes for reading-heavy interfaces.

**HTML:**
```html
<div class="dm-forest-bg">
  <div class="dm-forest">
    <div class="dm-forest__row">
      <span class="dm-forest__icon">◉</span>
      <div class="dm-forest__body">
        <b>Garden updates</b>
        <span>3 plants ready to harvest</span>
      </div>
    </div>
    <div class="dm-forest__row">
      <span class="dm-forest__icon">◐</span>
      <div class="dm-forest__body">
        <b>Soil moisture</b>
        <span>Below threshold — water soon</span>
      </div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.dm-forest-bg { padding: 24px; border-radius: 16px; background: #0a1612; }
.dm-forest {
  background: #0e1f1a;
  border: 1px solid #1a3329;
  border-radius: 10px;
  padding: 6px;
}
.dm-forest__row {
  display: flex; gap: 12px; align-items: center;
  padding: 12px 14px;
  border-radius: 7px;
  transition: background 0.18s;
}
.dm-forest__row:hover { background: rgba(143, 179, 163, 0.07); }
.dm-forest__row + .dm-forest__row { border-top: 1px solid #1a3329; margin-top: 4px; padding-top: 16px; }
.dm-forest__icon {
  width: 28px; height: 28px;
  background: rgba(143, 179, 163, 0.12);
  color: #8fb3a3;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 13px;
  flex-shrink: 0;
}
.dm-forest__body { display: flex; flex-direction: column; gap: 2px; }
.dm-forest__body b    { font: 600 12px system-ui, sans-serif; color: #d6e6dd; }
.dm-forest__body span { font: 11px system-ui, sans-serif; color: #8fb3a3; }
```

### 07. Slate Stack

**Type:** Pure CSS
**Description:** Three slate tones layered to create depth without color — useful for dashboard chrome where data is the only color.

**HTML:**
```html
<div class="dm-slate-bg">
  <div class="dm-slate">
    <div class="dm-slate__head">
      <span class="dm-slate__title">Quarterly revenue</span>
      <span class="dm-slate__pill">Q1 2026</span>
    </div>
    <div class="dm-slate__num">$248,392</div>
    <div class="dm-slate__delta">+18.4% from last quarter</div>
  </div>
</div>
```

**CSS:**
```css
.dm-slate-bg { padding: 24px; border-radius: 16px; background: #0f172a; }
.dm-slate {
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 10px;
  padding: 18px 20px;
  color: #f1f5f9;
}
.dm-slate__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.dm-slate__title {
  font: 600 12px system-ui, sans-serif;
  color: #94a3b8;
  letter-spacing: 0.04em;
}
.dm-slate__pill {
  background: #334155;
  color: #cbd5e1;
  padding: 3px 10px; border-radius: 12px;
  font: 600 10px ui-monospace, monospace;
}
.dm-slate__num {
  font: 800 26px/1 system-ui, sans-serif;
  color: #fff;
  margin-bottom: 6px;
  letter-spacing: -0.02em;
}
.dm-slate__delta {
  font: 600 11px system-ui, sans-serif;
  color: #4ade80;
}
```

### 08. Carbon Shelves

**Type:** Pure CSS
**Description:** List rows shelving against a darker rail — alternating row depth without alternating colors keeps long lists scannable.

**HTML:**
```html
<div class="dm-carbon-bg">
  <div class="dm-carbon">
    <div class="dm-carbon__row">
      <span class="dm-carbon__name">api/auth.ts</span>
      <span class="dm-carbon__meta">2.4 KB · 3 min ago</span>
    </div>
    <div class="dm-carbon__row">
      <span class="dm-carbon__name">api/session.ts</span>
      <span class="dm-carbon__meta">1.8 KB · 7 min ago</span>
    </div>
    <div class="dm-carbon__row">
      <span class="dm-carbon__name">api/users.ts</span>
      <span class="dm-carbon__meta">4.1 KB · 14 min ago</span>
    </div>
    <div class="dm-carbon__row">
      <span class="dm-carbon__name">db/schema.sql</span>
      <span class="dm-carbon__meta">12.3 KB · 1 hour ago</span>
    </div>
  </div>
</div>
```

**CSS:**
```css
.dm-carbon-bg { padding: 22px; border-radius: 16px; background: #0a0a10; }
.dm-carbon {
  background: #14141c;
  border: 1px solid #1f1f2e;
  border-radius: 8px;
  overflow: hidden;
}
.dm-carbon__row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 11px 16px;
  background: #14141c;
  transition: background 0.15s;
}
.dm-carbon__row + .dm-carbon__row { border-top: 1px solid #1f1f2e; }
.dm-carbon__row:nth-child(even) { background: #181822; }
.dm-carbon__row:hover { background: #1f1f2e; }
.dm-carbon__name {
  font: 600 12px ui-monospace, monospace;
  color: #e2e8f0;
}
.dm-carbon__meta {
  font: 500 10.5px ui-monospace, monospace;
  color: #6b7080;
  letter-spacing: 0.02em;
}
```

### 09. Onyx Ladder

**Type:** Pure CSS
**Description:** Vertical step indicator on a series of dark surfaces — each completed step glows gently, future steps stay quiet.

**HTML:**
```html
<div class="dm-onyx-bg">
  <ol class="dm-onyx">
    <li class="dm-onyx__step dm-onyx__step--done">
      <span class="dm-onyx__dot"></span>
      <div><b>Account created</b><small>10:42 AM</small></div>
    </li>
    <li class="dm-onyx__step dm-onyx__step--done">
      <span class="dm-onyx__dot"></span>
      <div><b>Email verified</b><small>10:44 AM</small></div>
    </li>
    <li class="dm-onyx__step dm-onyx__step--active">
      <span class="dm-onyx__dot"></span>
      <div><b>Profile setup</b><small>In progress</small></div>
    </li>
    <li class="dm-onyx__step">
      <span class="dm-onyx__dot"></span>
      <div><b>Workspace ready</b><small>Pending</small></div>
    </li>
  </ol>
</div>
```

**CSS:**
```css
.dm-onyx-bg { padding: 24px; border-radius: 16px; background: #0a0a14; }
.dm-onyx {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 0;
  background: #14141f;
  border: 1px solid #1f1f30;
  border-radius: 10px;
  overflow: hidden;
}
.dm-onyx__step {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 16px;
  border-left: 2px solid transparent;
}
.dm-onyx__step + .dm-onyx__step { border-top: 1px solid #1f1f30; }
.dm-onyx__step b     { display: block; font: 600 12px system-ui, sans-serif; color: #cbd5e1; }
.dm-onyx__step small { font: 500 10px ui-monospace, monospace; color: #6b7080; }
.dm-onyx__dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #2a2a3d;
  flex-shrink: 0;
}
.dm-onyx__step--done .dm-onyx__dot { background: #6366f1; }
.dm-onyx__step--done b { color: #fff; }
.dm-onyx__step--active {
  background: rgba(99, 102, 241, 0.06);
  border-left-color: #6366f1;
}
.dm-onyx__step--active .dm-onyx__dot {
  background: #818cf8;
  box-shadow: 0 0 0 4px rgba(129, 140, 248, 0.15);
}
.dm-onyx__step--active b { color: #c7d2fe; }
```

### 10. Phosphor Card

**Type:** Pure CSS
**Description:** Card with a glowing accent line on its left edge — the kind of "now playing" highlight that draws the eye in dark dashboards.

**HTML:**
```html
<div class="dm-phos-bg">
  <article class="dm-phos">
    <div class="dm-phos__top">
      <span class="dm-phos__live">● LIVE</span>
      <span class="dm-phos__count">2,341 watching</span>
    </div>
    <h3 class="dm-phos__title">React Server Components Deep Dive</h3>
    <p class="dm-phos__body">A walk through the boundaries between server and client.</p>
  </article>
</div>
```

**CSS:**
```css
.dm-phos-bg { padding: 28px; border-radius: 16px; background: #0a0a14; }
.dm-phos {
  position: relative;
  background: #14141f;
  border: 1px solid #1f1f30;
  border-radius: 10px;
  padding: 16px 20px 16px 22px;
  overflow: hidden;
}
.dm-phos::before {
  content: '';
  position: absolute; left: 0; top: 12px; bottom: 12px;
  width: 3px;
  background: #ec4899;
  border-radius: 0 2px 2px 0;
  box-shadow: 0 0 14px #ec4899, 0 0 32px rgba(236, 72, 153, 0.4);
}
.dm-phos__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.dm-phos__live {
  font: 700 10px ui-monospace, monospace;
  color: #ec4899;
  letter-spacing: 0.12em;
}
.dm-phos__count {
  font: 500 10px ui-monospace, monospace;
  color: #6b7080;
}
.dm-phos__title { margin: 0 0 6px; font: 700 14px/1.3 system-ui, sans-serif; color: #fff; }
.dm-phos__body  { margin: 0; font: 12px/1.55 system-ui, sans-serif; color: #94a3b8; }
```

### 11. Aurora Dim

**Type:** Pure CSS
**Description:** Dark surface with a soft drifting aurora glow underneath — the aurora is heavily blurred so it never competes with content.

**HTML:**
```html
<div class="dm-aurora-bg">
  <div class="dm-aurora">
    <div class="dm-aurora__icon">◈</div>
    <div class="dm-aurora__body">
      <b>Premium activated</b>
      <span>Welcome to Aurora Pass.</span>
    </div>
  </div>
</div>
```

**CSS:**
```css
.dm-aurora-bg {
  position: relative; padding: 32px;
  border-radius: 16px; overflow: hidden;
  background: #0a0a14;
}
.dm-aurora-bg::before {
  content: '';
  position: absolute; inset: -20%;
  background:
    radial-gradient(ellipse at 30% 30%, rgba(139, 92, 246, 0.4), transparent 50%),
    radial-gradient(ellipse at 70% 70%, rgba(236, 72, 153, 0.3), transparent 50%);
  filter: blur(32px);
  pointer-events: none;
}
.dm-aurora {
  position: relative;
  background: #14141f;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 14px 18px;
  display: flex; align-items: center; gap: 14px;
}
.dm-aurora__icon {
  width: 38px; height: 38px;
  background: linear-gradient(135deg, #8b5cf6, #ec4899);
  border-radius: 10px;
  display: grid; place-items: center;
  color: #fff;
  font-size: 16px;
  flex-shrink: 0;
  box-shadow: 0 0 16px rgba(139, 92, 246, 0.5);
}
.dm-aurora__body { display: flex; flex-direction: column; gap: 3px; }
.dm-aurora__body b    { font: 700 13px system-ui, sans-serif; color: #fff; }
.dm-aurora__body span { font: 12px system-ui, sans-serif; color: #94a3b8; }
```

### 12. Ember Pulse

**Type:** Pure CSS
**Description:** Notification badge with a warm orange glow that subtly breathes — designed for low-priority but persistent alerts.

**HTML:**
```html
<div class="dm-ember-bg">
  <div class="dm-ember">
    <div class="dm-ember__icon">
      <span class="dm-ember__pulse"></span>
      <span class="dm-ember__core"></span>
    </div>
    <div class="dm-ember__body">
      <b>Build attention needed</b>
      <span>3 warnings · 0 errors · last run 2m ago</span>
    </div>
    <button class="dm-ember__btn">Review →</button>
  </div>
</div>
```

**CSS:**
```css
.dm-ember-bg { padding: 28px; border-radius: 16px; background: #0a0a10; }
.dm-ember {
  background: #14141c;
  border: 1px solid rgba(245, 158, 11, 0.15);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex; align-items: center; gap: 14px;
}
.dm-ember__icon {
  position: relative;
  width: 36px; height: 36px;
  flex-shrink: 0;
  display: grid; place-items: center;
}
.dm-ember__core {
  width: 12px; height: 12px;
  background: #f59e0b;
  border-radius: 50%;
  box-shadow: 0 0 12px #f59e0b, 0 0 24px rgba(245, 158, 11, 0.5);
  z-index: 2;
}
.dm-ember__pulse {
  position: absolute; inset: 0;
  background: radial-gradient(circle, rgba(245, 158, 11, 0.5), transparent 70%);
  border-radius: 50%;
  animation: dm-ember-breath 2.5s ease-in-out infinite;
}
@keyframes dm-ember-breath {
  0%, 100% { transform: scale(0.8); opacity: 0.4; }
  50%      { transform: scale(1.1); opacity: 0.8; }
}
.dm-ember__body { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dm-ember__body b    { font: 600 12px system-ui, sans-serif; color: #f5f5f5; }
.dm-ember__body span { font: 11px ui-monospace, monospace; color: #6b7080; }
.dm-ember__btn {
  background: transparent;
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.3);
  padding: 6px 12px; border-radius: 6px;
  font: 600 11px system-ui, sans-serif; cursor: pointer;
  flex-shrink: 0;
  transition: background 0.18s, border-color 0.18s;
}
.dm-ember__btn:hover { background: rgba(245, 158, 11, 0.12); border-color: rgba(245, 158, 11, 0.55); }
@media (prefers-reduced-motion: reduce) { .dm-ember__pulse { animation: none; } }
```

---
## 18 CSS Divider Collections

URL: https://codefronts.com/snippets/css-dividers/
Description: 18 hand-coded CSS section-divider collections across eighteen design languages — editorial, brutalist, art deco, cyber, scientific, fantasy, retro, newspaper, playful, music, festive, corporate, sketch and more — 54 animated divider variants, each on its intended background.
Demo count: 18

### 01. Editorial Dividers

**Type:** Pure CSS
**Description:** Three animated literary section breaks — rules that grow from the centre, a slab that slams in from the left, and a label that fades up into place.

**HTML:**
```html
<div class="div-editorial-surface">
  <p class="div-editorial-text">The light in August arrives differently than in other months — slanting through windows at an angle that makes dust particles visible.</p>
  <div class="div-editorial-v1" role="separator"><em>· · ·</em></div>
  <p class="div-editorial-text">She had learned to read weather the way her grandmother did — not from forecasts but from the quality of morning silence.</p>
  <div class="div-editorial-v2" role="separator"><i></i><i></i></div>
  <p class="div-editorial-text">Memory operates on its own calendar — a smell, a slant of afternoon light, and suddenly it is fifteen years ago.</p>
  <div class="div-editorial-v3" role="separator"><span>continued overleaf</span></div>
  <p class="div-editorial-text">The village had grown slowly, the way most things of permanence grow: without announcement, without knowing itself.</p>
</div>
```

**CSS:**
```css
@keyframes div-ed-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes div-ed-rot  { from { transform: scale(0) rotate(-210deg); opacity: 0; } to { transform: scale(1) rotate(0); opacity: 1; } }
@keyframes div-ed-fade { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
@keyframes div-ed-slam { from { transform: translateX(-110%); } to { transform: translateX(0); } }
.div-editorial-surface {
  background: #f4efe7;
  padding: 36px 40px;
  border-radius: 12px;
}
.div-editorial-text {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 15px;
  line-height: 1.88;
  color: #3c3830;
  margin: 0;
}
/* v1 — rules grow from centre, mark rotates in */
.div-editorial-v1 {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 32px 0;
}
.div-editorial-v1::before,
.div-editorial-v1::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #b5ad9e;
  animation: div-ed-grow 0.9s cubic-bezier(.16,1,.3,1) both;
}
.div-editorial-v1::before { transform-origin: right; }
.div-editorial-v1::after  { transform-origin: left; animation-delay: 0.05s; }
.div-editorial-v1 em {
  font-family: Georgia, serif;
  font-style: normal;
  font-size: 18px;
  letter-spacing: 0.6em;
  color: #928878;
  padding-right: 0.4em;
  animation: div-ed-rot 0.7s cubic-bezier(.34,1.56,.64,1) 0.72s both;
}
/* v2 — bold rule slams in, hairline grows under it */
.div-editorial-v2 { margin: 32px 0; overflow: hidden; }
.div-editorial-v2 i:nth-child(1) {
  display: block;
  height: 4px;
  background: #2c2820;
  animation: div-ed-slam 0.65s cubic-bezier(.18,0,.05,1) 0.18s both;
}
.div-editorial-v2 i:nth-child(2) {
  display: block;
  height: 1px;
  margin-top: 4px;
  background: #c0b8a8;
  transform-origin: left;
  animation: div-ed-grow 0.7s cubic-bezier(.16,1,.3,1) 0.5s both;
}
/* v3 — rules grow from centre, label fades up */
.div-editorial-v3 {
  display: flex;
  align-items: center;
  gap: 22px;
  margin: 32px 0;
}
.div-editorial-v3::before,
.div-editorial-v3::after {
  content: '';
  flex: 1;
  height: 0.5px;
  animation: div-ed-grow 0.8s cubic-bezier(.16,1,.3,1) 0.3s both;
}
.div-editorial-v3::before { background: linear-gradient(to right, transparent, #a09888); transform-origin: right; }
.div-editorial-v3::after  { background: linear-gradient(to left, transparent, #a09888); transform-origin: left; animation-delay: 0.35s; }
.div-editorial-v3 span {
  flex-shrink: 0;
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: #857b6e;
  white-space: nowrap;
  animation: div-ed-fade 0.5s ease 0.82s both;
}
@media (prefers-reduced-motion: reduce) {
  .div-editorial-v1::before, .div-editorial-v1::after, .div-editorial-v1 em,
  .div-editorial-v2 i, .div-editorial-v3::before, .div-editorial-v3::after,
  .div-editorial-v3 span { animation: none; }
}
```

### 02. Brutalist Dividers

**Type:** Pure CSS
**Description:** Three raw breaks that arrive with force — a slab slamming in from the left, a hatch band wiping into view, and color blocks popping up in sequence.

**HTML:**
```html
<div class="div-brutalist-surface">
  <p class="div-brutalist-text">CONTEMPORARY ART FOUNDATION — ANNUAL REPORT 2024. Total acquisitions: 847. Public programs attended: 12,400.</p>
  <div class="div-brutalist-v1" role="separator"></div>
  <p class="div-brutalist-text">The question of what constitutes public space has never been more contested — streets, plazas, parks, all subject to restriction.</p>
  <div class="div-brutalist-v2" role="separator"></div>
  <p class="div-brutalist-text">Architecture is political. Every building encodes a value system — a vision of who belongs and who does not.</p>
  <div class="div-brutalist-v3" role="separator">
    <span></span><span></span><span></span><span></span><span></span>
  </div>
  <p class="div-brutalist-text">WE BUILD. WE DEMOLISH. WE BUILD AGAIN. The city is its own argument — perpetually unresolved.</p>
</div>
```

**CSS:**
```css
@keyframes div-bru-slam { from { transform: translateX(-110%); } to { transform: translateX(0); } }
@keyframes div-bru-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0% 0 0); } }
@keyframes div-bru-pop  { 0% { transform: scaleY(0); opacity: 0; } 65% { transform: scaleY(1.15); opacity: 1; } 100% { transform: scaleY(1); opacity: 1; } }
.div-brutalist-surface {
  background: #ffffff;
  padding: 36px 40px;
  border-radius: 12px;
}
.div-brutalist-text {
  font-family: "Courier New", Courier, monospace;
  font-size: 13px;
  line-height: 1.78;
  color: #111111;
  margin: 0;
}
/* v1 — solid slab slams in */
.div-brutalist-v1 {
  position: relative;
  height: 18px;
  margin: 32px 0;
  background: #111111;
  animation: div-bru-slam 0.52s cubic-bezier(.18,0,.04,1) 0.1s both;
}
.div-brutalist-v1::after {
  content: '///';
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-family: "Courier New", monospace;
  font-size: 9px;
  letter-spacing: 5px;
  color: #ffffff;
}
/* v2 — diagonal hatch wipes in */
.div-brutalist-v2 {
  position: relative;
  height: 22px;
  margin: 32px 0;
  animation: div-bru-wipe 0.72s cubic-bezier(.16,1,.3,1) 0.22s both;
}
.div-brutalist-v2::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    -60deg,
    #111111 0, #111111 3px,
    transparent 3px, transparent 11px
  );
}
.div-brutalist-v2::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    #ffffff 0, transparent 40px,
    transparent calc(100% - 40px), #ffffff 100%
  );
}
/* v3 — color blocks pop up in sequence */
.div-brutalist-v3 {
  display: flex;
  gap: 2px;
  height: 10px;
  margin: 32px 0;
}
.div-brutalist-v3 span {
  transform-origin: bottom;
  animation: div-bru-pop 0.42s cubic-bezier(.34,1.56,.64,1) both;
}
.div-brutalist-v3 span:nth-child(1) { flex: 4; background: #111111; animation-delay: 0.26s; }
.div-brutalist-v3 span:nth-child(2) { flex: 1; background: #e6351f; animation-delay: 0.36s; }
.div-brutalist-v3 span:nth-child(3) { flex: 2; background: #111111; animation-delay: 0.42s; }
.div-brutalist-v3 span:nth-child(4) { flex: 1; background: #f2c12e; animation-delay: 0.48s; }
.div-brutalist-v3 span:nth-child(5) { flex: 4; background: #111111; animation-delay: 0.53s; }
@media (prefers-reduced-motion: reduce) {
  .div-brutalist-v1, .div-brutalist-v2, .div-brutalist-v3 span { animation: none; }
}
```

### 03. Art Deco Dividers

**Type:** Pure CSS
**Description:** Three gilded breaks — gold lines that draw themselves toward a diamond, a shimmering micro-diamond band, and a chevron fan that springs into place.

**HTML:**
```html
<div class="div-deco-surface">
  <p class="div-deco-text">The Grand Palais reopened its gilded doors in the autumn of 1922, its iron-and-glass vault catching the afternoon light.</p>
  <div class="div-deco-v1" role="separator">
    <svg viewBox="0 0 476 24" fill="none" aria-hidden="true">
      <line class="div-deco-l div-deco-ll1" x1="198" y1="11" x2="0" y2="11" stroke="#c9a84c" stroke-width="1.5"/>
      <line class="div-deco-l div-deco-ll2" x1="186" y1="15" x2="12" y2="15" stroke="#c9a84c" stroke-width=".5" opacity=".42"/>
      <polygon class="div-deco-gem" points="238,3 251,12 238,21 225,12" stroke="#c9a84c" stroke-width="1.5" fill="#0d1018"/>
      <line class="div-deco-l div-deco-rl1" x1="278" y1="11" x2="476" y2="11" stroke="#c9a84c" stroke-width="1.5"/>
      <line class="div-deco-l div-deco-rl2" x1="290" y1="15" x2="464" y2="15" stroke="#c9a84c" stroke-width=".5" opacity=".42"/>
    </svg>
  </div>
  <p class="div-deco-text">She wore a dress the colour of champagne with a hem that ended precisely at the knee — scandalous only three years prior.</p>
  <div class="div-deco-v2" role="separator"></div>
  <p class="div-deco-text">The jazz arrived from New Orleans by way of Harlem, crossing the Atlantic in the trunks of musicians.</p>
  <div class="div-deco-v3" role="separator"><span class="div-deco-fan">▴▴▴</span></div>
  <p class="div-deco-text">Everything gleamed in those years — chrome fittings, lacquered surfaces, pomaded hair in the lamplight.</p>
</div>
```

**CSS:**
```css
@keyframes div-deco-draw { to { stroke-dashoffset: 0; } }
@keyframes div-deco-gem  { from { opacity: 0; transform: scale(0) rotate(-180deg); } to { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes div-deco-fade { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
@keyframes div-deco-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes div-deco-fan  { from { transform: scale(0) rotate(-100deg); opacity: 0; } to { transform: scale(1) rotate(0); opacity: 1; } }
@keyframes div-deco-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.div-deco-surface {
  background: #0d1018;
  padding: 36px 40px;
  border-radius: 12px;
}
.div-deco-text {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 15px;
  line-height: 1.88;
  color: #a0988a;
  margin: 0;
}
/* v1 — gold lines draw toward a diamond */
.div-deco-v1 { margin: 32px 0; }
.div-deco-v1 svg { display: block; width: 100%; height: 24px; }
.div-deco-l { animation: div-deco-draw 0.88s cubic-bezier(.16,1,.3,1) both; }
.div-deco-ll1 { stroke-dasharray: 198; stroke-dashoffset: 198; }
.div-deco-ll2 { stroke-dasharray: 174; stroke-dashoffset: 174; animation-delay: 0.09s; }
.div-deco-rl1 { stroke-dasharray: 198; stroke-dashoffset: 198; animation-delay: 0.04s; }
.div-deco-rl2 { stroke-dasharray: 174; stroke-dashoffset: 174; animation-delay: 0.13s; }
.div-deco-gem {
  transform-box: fill-box;
  transform-origin: center;
  animation: div-deco-gem 0.52s cubic-bezier(.34,1.56,.64,1) 0.73s both;
}
/* v2 — micro-diamond band with a shimmer sweep */
.div-deco-v2 {
  position: relative;
  margin: 32px 0;
  animation: div-deco-fade 0.55s ease 0.18s both;
}
.div-deco-v2::before {
  content: '';
  display: block;
  height: 6px;
  border-top: 1px solid #c9a84c;
  border-bottom: 1px solid #c9a84c;
}
.div-deco-v2::after {
  content: '◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  overflow: hidden;
  white-space: nowrap;
  text-align: center;
  font-size: 6px;
  letter-spacing: 2px;
  background: linear-gradient(90deg, rgba(201,168,76,.1) 0%, rgba(201,168,76,.9) 42%, rgba(255,220,140,1) 50%, rgba(201,168,76,.9) 58%, rgba(201,168,76,.1) 100%);
  background-size: 300% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: div-deco-shimmer 2.8s linear infinite;
}
/* v3 — chevron fan springs in between growing lines */
.div-deco-v3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 32px 0;
}
.div-deco-v3::before,
.div-deco-v3::after {
  content: '';
  flex: 1;
  height: 1px;
  animation: div-deco-grow 0.7s cubic-bezier(.16,1,.3,1) 0.48s both;
}
.div-deco-v3::before { background: linear-gradient(to right, transparent, #c9a84c); transform-origin: right; }
.div-deco-v3::after  { background: linear-gradient(to left, transparent, #c9a84c); transform-origin: left; animation-delay: 0.52s; }
.div-deco-fan {
  flex-shrink: 0;
  font-size: 10px;
  letter-spacing: 2px;
  color: #c9a84c;
  animation: div-deco-fan 0.6s cubic-bezier(.34,1.56,.64,1) 0.1s both;
}
@media (prefers-reduced-motion: reduce) {
  .div-deco-l { animation: none; stroke-dashoffset: 0; }
  .div-deco-gem, .div-deco-v2, .div-deco-v3::before, .div-deco-v3::after, .div-deco-fan { animation: none; }
  .div-deco-v2::after { animation: none; }
}
```

### 04. Organic Dividers

**Type:** Pure CSS
**Description:** Three nature-drawn breaks — SVG waves that draw stroke by stroke, leaf pods that spring open, and a scallop edge that fills as its outline traces.

**HTML:**
```html
<div class="div-organic-surface">
  <p class="div-organic-text">In the understory of the beech forest, an entire civilization of fungi connects root system to root system.</p>
  <div class="div-organic-v1" role="separator">
    <svg viewBox="0 0 476 28" fill="none" preserveAspectRatio="none" aria-hidden="true">
      <path class="div-organic-w1" d="M0 14 C29 6 59 6 89 14 C119 22 149 22 179 14 C209 6 238 6 268 14 C298 22 328 22 358 14 C388 6 418 6 447 14 C461 18 469 20 476 14" stroke="#7a9070" stroke-width="1.5"/>
      <path class="div-organic-w2" d="M0 20 C29 12 59 12 89 20 C119 28 149 28 179 20 C209 12 238 12 268 20 C298 28 328 28 358 20 C388 12 418 12 447 20 C461 24 469 25 476 20" stroke="#9aaa88" stroke-width=".7" opacity=".5"/>
    </svg>
  </div>
  <p class="div-organic-text">Rain arrives not as individual drops but as a shift in atmospheric attention — the trees lean, the birds fall silent.</p>
  <div class="div-organic-v2" role="separator">
    <span class="div-organic-pods"><i></i><i></i><i></i></span>
  </div>
  <p class="div-organic-text">Seeds travel improbable distances — a dandelion's parachute can carry its cargo fourteen kilometres.</p>
  <div class="div-organic-v3" role="separator">
    <svg viewBox="0 0 476 18" fill="none" preserveAspectRatio="none" aria-hidden="true">
      <path class="div-organic-sf" d="M0 18 Q11.9 8 23.8 18 Q35.7 8 47.6 18 Q59.5 8 71.4 18 Q83.3 8 95.2 18 Q107.1 8 119 18 Q130.9 8 142.8 18 Q154.7 8 166.6 18 Q178.5 8 190.4 18 Q202.3 8 214.2 18 Q226.1 8 238 18 Q249.9 8 261.8 18 Q273.7 8 285.6 18 Q297.5 8 309.4 18 Q321.3 8 333.2 18 Q345.1 8 357 18 Q368.9 8 380.8 18 Q392.7 8 404.6 18 Q416.5 8 428.4 18 Q440.3 8 452.2 18 Q464.1 8 476 18" fill="rgba(122,144,112,0.16)"/>
      <path class="div-organic-ss" d="M0 18 Q11.9 8 23.8 18 Q35.7 8 47.6 18 Q59.5 8 71.4 18 Q83.3 8 95.2 18 Q107.1 8 119 18 Q130.9 8 142.8 18 Q154.7 8 166.6 18 Q178.5 8 190.4 18 Q202.3 8 214.2 18 Q226.1 8 238 18 Q249.9 8 261.8 18 Q273.7 8 285.6 18 Q297.5 8 309.4 18 Q321.3 8 333.2 18 Q345.1 8 357 18 Q368.9 8 380.8 18 Q392.7 8 404.6 18 Q416.5 8 428.4 18 Q440.3 8 452.2 18 Q464.1 8 476 18" stroke="#7a9070" stroke-width="1"/>
    </svg>
  </div>
  <p class="div-organic-text">The forest is not silent — it is thinking at a frequency we have not learned to hear.</p>
</div>
```

**CSS:**
```css
@keyframes div-org-draw { to { stroke-dashoffset: 0; } }
@keyframes div-org-leaf { from { transform: rotate(45deg) scale(0); } 70% { transform: rotate(45deg) scale(1.2); } to { transform: rotate(45deg) scale(1); } }
@keyframes div-org-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes div-org-fadein { to { opacity: 1; } }
.div-organic-surface {
  background: #eaede6;
  padding: 36px 40px;
  border-radius: 12px;
}
.div-organic-text {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 15px;
  line-height: 1.88;
  color: #3d4438;
  margin: 0;
}
/* v1 — dual SVG waves draw in */
.div-organic-v1 { margin: 32px 0; }
.div-organic-v1 svg { display: block; width: 100%; height: 28px; }
.div-organic-w1,
.div-organic-w2 {
  stroke-dasharray: 1350;
  stroke-dashoffset: 1350;
  animation: div-org-draw 1.4s cubic-bezier(.16,1,.3,1) both;
}
.div-organic-w2 { animation-delay: 0.16s; }
/* v2 — rotated leaf pods spring open */
.div-organic-v2 {
  display: flex;
  align-items: center;
  margin: 32px 0;
}
.div-organic-v2::before,
.div-organic-v2::after {
  content: '';
  flex: 1;
  height: 0.5px;
  background: #7a8c70;
  animation: div-org-grow 0.8s cubic-bezier(.16,1,.3,1) 0.48s both;
}
.div-organic-v2::before { transform-origin: right; }
.div-organic-v2::after  { transform-origin: left; animation-delay: 0.53s; }
.div-organic-pods {
  display: flex;
  align-items: center;
  padding: 0 16px;
}
.div-organic-pods i {
  display: block;
  border-radius: 50% 0;
  animation: div-org-leaf 0.52s cubic-bezier(.34,1.56,.64,1) both;
}
.div-organic-pods i:nth-child(1) { width: 7px; height: 7px; background: rgba(106,140,96,.55); animation-delay: 0.17s; }
.div-organic-pods i:nth-child(2) { width: 10px; height: 10px; margin: 0 5px; background: #4a7040; animation-delay: 0.07s; }
.div-organic-pods i:nth-child(3) { width: 7px; height: 7px; background: rgba(106,140,96,.55); animation-delay: 0.25s; }
/* v3 — scallop outline traces, fill fades in */
.div-organic-v3 { margin: 32px 0; }
.div-organic-v3 svg { display: block; width: 100%; height: 18px; }
.div-organic-sf {
  opacity: 0;
  animation: div-org-fadein 0.65s ease 0.95s both;
}
.div-organic-ss {
  stroke-dasharray: 1300;
  stroke-dashoffset: 1300;
  animation: div-org-draw 1.25s cubic-bezier(.16,1,.3,1) 0.14s both;
}
@media (prefers-reduced-motion: reduce) {
  .div-organic-w1, .div-organic-w2, .div-organic-ss { animation: none; stroke-dashoffset: 0; }
  .div-organic-sf { animation: none; opacity: 1; }
  .div-organic-v2::before, .div-organic-v2::after, .div-organic-pods i { animation: none; }
  .div-organic-pods i { transform: rotate(45deg); }
}
```

### 05. Cyber Dividers

**Type:** Pure CSS
**Description:** Three terminal-styled breaks — a beam scanning a track, a dot-matrix grid with a pulse bar growing across it, and a system tag that types itself in.

**HTML:**
```html
<div class="div-cyber-surface">
  <p class="div-cyber-text">&gt; ESTABLISHING SECURE CHANNEL... [OK]<br>&gt; SESSION_ID: 0x7FA3-C891-02BE</p>
  <div class="div-cyber-v1" role="separator"></div>
  <p class="div-cyber-text">The attack surface of a modern data center is not its perimeter — that concept is meaningless now.</p>
  <div class="div-cyber-v2" role="separator"><span class="div-cyber-bar"></span></div>
  <p class="div-cyber-text">&gt; ANOMALY DETECTED: 847 req/sec from 10.0.14.x<br>&gt; AUTO-THROTTLE: ENGAGED</p>
  <div class="div-cyber-v3" role="separator"><span class="div-cyber-tag">[ SYSTEM NOMINAL ]</span></div>
  <p class="div-cyber-text">Cryptography is applied mathematics in service of trust — the implementations are where the problems live.</p>
</div>
```

**CSS:**
```css
@keyframes div-cy-beam { from { left: -22%; } to { left: 122%; } }
@keyframes div-cy-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes div-cy-type { from { max-width: 0; opacity: 0; } 1% { opacity: 1; } to { max-width: 220px; opacity: 1; } }
@keyframes div-cy-glitch { 0%,87%,100% { transform: none; } 88% { transform: translateX(3px); } 89% { transform: translateX(-2px); } 90% { transform: none; } 94% { transform: translateX(1px); } 95% { transform: none; } }
.div-cyber-surface {
  background: #060a0f;
  padding: 36px 40px;
  border-radius: 12px;
}
.div-cyber-text {
  font-family: "Courier New", Courier, monospace;
  font-size: 12.5px;
  line-height: 1.78;
  color: #2a5848;
  margin: 0;
}
/* v1 — scanning beam over a faint track */
.div-cyber-v1 {
  position: relative;
  height: 2px;
  margin: 38px 0;
  background: rgba(0, 245, 200, 0.1);
  overflow: visible;
}
.div-cyber-v1::before {
  content: '';
  position: absolute;
  top: -5px;
  left: -22%;
  width: 22%;
  height: 12px;
  background: linear-gradient(90deg, transparent, rgba(0,245,200,0.95), transparent);
  animation: div-cy-beam 2.1s linear infinite;
}
.div-cyber-v1::after {
  content: '// 0x4F2A·C8';
  position: absolute;
  right: 0;
  top: -15px;
  font-family: "Courier New", monospace;
  font-size: 8.5px;
  letter-spacing: 0.08em;
  color: rgba(0, 245, 200, 0.35);
}
/* v2 — dot-matrix grid, pulse bar grows across */
.div-cyber-v2 {
  position: relative;
  height: 20px;
  margin: 38px 0;
  display: flex;
  align-items: center;
}
.div-cyber-v2::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, rgba(0,245,200,0.5) 1px, transparent 1px) 0 0 / 12px 20px;
}
.div-cyber-bar {
  position: absolute;
  left: 0;
  right: 0;
  top: 8px;
  height: 4px;
  background: linear-gradient(90deg, transparent, rgba(0,245,200,0.3), transparent);
  transform-origin: center;
  animation: div-cy-grow 0.85s cubic-bezier(.16,1,.3,1) 0.44s both;
}
/* v3 — system tag types itself in, then glitches */
.div-cyber-v3 {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 38px 0;
}
.div-cyber-v3::before,
.div-cyber-v3::after {
  content: '';
  flex: 1;
  height: 1px;
  animation: div-cy-grow 0.6s ease 0.68s both;
}
.div-cyber-v3::before { background: linear-gradient(90deg, rgba(0,245,200,.04), rgba(0,245,200,.4)); transform-origin: right; }
.div-cyber-v3::after  { background: linear-gradient(270deg, rgba(0,245,200,.04), rgba(0,245,200,.4)); transform-origin: left; animation-delay: 0.73s; }
.div-cyber-tag {
  flex-shrink: 0;
  font-family: "Courier New", monospace;
  font-size: 9.5px;
  letter-spacing: 0.2em;
  color: rgba(0, 245, 200, 0.8);
  white-space: nowrap;
  overflow: hidden;
  max-width: 0;
  opacity: 0;
  animation: div-cy-type 0.65s steps(17,end) 0.14s forwards,
             div-cy-glitch 5s ease 2.2s infinite;
}
@media (prefers-reduced-motion: reduce) {
  .div-cyber-v1::before { animation: none; left: calc(50% - 11%); }
  .div-cyber-bar, .div-cyber-v3::before, .div-cyber-v3::after { animation: none; }
  .div-cyber-tag { animation: none; max-width: 220px; opacity: 1; }
}
```

### 06. Luxury Dividers

**Type:** Pure CSS
**Description:** Three restrained gold breaks — a hairline that draws open then shimmers, three pearls dropping into place, and a double rule that separates with a quiet breath.

**HTML:**
```html
<div class="div-luxury-surface">
  <p class="div-luxury-text">The maison has existed in its current form since eighteen forty-two, though its predecessor occupied the same address for three decades prior.</p>
  <div class="div-luxury-v1" role="separator"></div>
  <p class="div-luxury-text">Each piece requires between sixty and two hundred hours of work. The stitching is invisible — this is not an accident.</p>
  <div class="div-luxury-v2" role="separator"><span class="div-luxury-dots"><i></i><i></i><i></i></span></div>
  <p class="div-luxury-text">Materials are sourced according to a protocol established in eighteen ninety-one and revised only once.</p>
  <div class="div-luxury-v3" role="separator"><i></i><i></i></div>
  <p class="div-luxury-text">There is no waiting list. There is a conversation, and then there is time — the object arrives when it is ready.</p>
</div>
```

**CSS:**
```css
@keyframes div-lux-open { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes div-lux-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes div-lux-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes div-lux-drop { from { transform: scale(0) translateY(-8px); opacity: 0; } 60% { transform: scale(1.25) translateY(0); opacity: 1; } to { transform: scale(1) translateY(0); opacity: 1; } }
@keyframes div-lux-up   { from { opacity: 0; transform: translateY(2.5px); } to { opacity: 1; transform: translateY(0); } }
@keyframes div-lux-down { from { opacity: 0; transform: translateY(-2.5px); } to { opacity: 1; transform: translateY(0); } }
.div-luxury-surface {
  background: #171310;
  padding: 36px 40px;
  border-radius: 12px;
}
.div-luxury-text {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 15px;
  line-height: 1.95;
  letter-spacing: 0.02em;
  color: #988e70;
  margin: 0;
}
/* v1 — hairline draws open, then shimmers */
.div-luxury-v1 {
  height: 1px;
  margin: 34px 0;
  transform: scaleX(0);
  transform-origin: center;
  background: linear-gradient(90deg, transparent, #d4af76 20%, #f5e4b0 50%, #d4af76 80%, transparent);
  background-size: 200% auto;
  animation: div-lux-open 0.95s cubic-bezier(.16,1,.3,1) 0.1s forwards,
             div-lux-shimmer 3s linear 1.15s infinite;
}
/* v2 — three pearls drop in between vanishing flanks */
.div-luxury-v2 {
  display: flex;
  align-items: center;
  margin: 34px 0;
}
.div-luxury-v2::before,
.div-luxury-v2::after {
  content: '';
  flex: 1;
  height: 0.5px;
  background: rgba(212, 175, 118, 0.22);
  animation: div-lux-grow 0.8s cubic-bezier(.16,1,.3,1) 0.42s both;
}
.div-luxury-v2::before { transform-origin: right; }
.div-luxury-v2::after  { transform-origin: left; animation-delay: 0.47s; }
.div-luxury-dots {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 20px;
}
.div-luxury-dots i {
  display: block;
  border-radius: 50%;
  background: #d4af76;
  animation: div-lux-drop 0.52s cubic-bezier(.34,1.56,.64,1) both;
}
.div-luxury-dots i:nth-child(1) { width: 3px; height: 3px; background: rgba(212,175,118,.48); animation-delay: 0.07s; }
.div-luxury-dots i:nth-child(2) { width: 6px; height: 6px; animation-delay: 0.18s; }
.div-luxury-dots i:nth-child(3) { width: 3px; height: 3px; background: rgba(212,175,118,.48); animation-delay: 0.28s; }
/* v3 — double rule separates with a quiet breath */
.div-luxury-v3 {
  position: relative;
  height: 5px;
  margin: 34px 0;
}
.div-luxury-v3 i:nth-child(1) {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 0.5px;
  background: linear-gradient(90deg, transparent, rgba(212,175,118,.65), transparent);
  animation: div-lux-up 0.75s cubic-bezier(.16,1,.3,1) 0.28s both;
}
.div-luxury-v3 i:nth-child(2) {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0.5px;
  background: linear-gradient(90deg, transparent, rgba(212,175,118,.32), transparent);
  animation: div-lux-down 0.75s cubic-bezier(.16,1,.3,1) 0.28s both;
}
@media (prefers-reduced-motion: reduce) {
  .div-luxury-v1 { animation: none; transform: scaleX(1); }
  .div-luxury-v2::before, .div-luxury-v2::after, .div-luxury-dots i,
  .div-luxury-v3 i { animation: none; }
}
```

### 07. Scientific Dividers

**Type:** Pure CSS
**Description:** Three precise, instrument-styled breaks — a measurement ruler with a section marker, a connection-node line, and a flip-in chapter label between calibrated rules.

**HTML:**
```html
<div class="div-sci-surface">
  <p class="div-sci-text">Fluorescence microscopy revealed distinct subcellular compartmentalization. Statistical significance was assessed across three independent biological replicates (n=847).</p>
  <div class="div-sci-v1" role="separator">
    <span class="div-sci-ticks"></span>
    <span class="div-sci-rbar"></span>
    <span class="div-sci-rlbl">§ 2.4</span>
  </div>
  <p class="div-sci-text">Protein complex formation was confirmed via co-immunoprecipitation followed by tandem mass spectrometry, with peak thresholds set at 3σ above baseline.</p>
  <div class="div-sci-v2" role="separator">
    <span class="div-sci-dline"></span>
    <span class="div-sci-ddots"><i></i><i></i><i></i><i></i><i></i></span>
  </div>
  <p class="div-sci-text">Temperature-dependent conformational changes were observed across all conditions, with a thermal denaturation midpoint of 68.4°C (±0.7).</p>
  <div class="div-sci-v3" role="separator">
    <span class="div-sci-rule"></span>
    <b>§ 3.1 — RESULTS</b>
    <span class="div-sci-rule"></span>
  </div>
  <p class="div-sci-text">Gene expression profiles were analyzed across 12 developmental timepoints; hierarchical clustering revealed three distinct expression modules.</p>
</div>
```

**CSS:**
```css
@keyframes div-sci-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes div-sci-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes div-sci-dot  { from { transform: scale(0); } 65% { transform: scale(1.3); } to { transform: scale(1); } }
@keyframes div-sci-flip { from { transform: perspective(300px) rotateX(90deg); opacity: 0; } to { transform: perspective(300px) rotateX(0); opacity: 1; } }
@keyframes div-sci-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0% 0 0); } }
.div-sci-surface {
  background: #f5f7fb;
  padding: 36px 40px;
  border-radius: 12px;
}
.div-sci-text {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 14px;
  line-height: 1.78;
  color: #1e2533;
  margin: 0;
}
/* v1 — measurement ruler with a section marker */
.div-sci-v1 {
  position: relative;
  height: 26px;
  margin: 32px 0;
}
.div-sci-ticks {
  position: absolute;
  bottom: 8px;
  left: 0;
  right: 0;
  height: 18px;
  /* major tick every 64px, minor every 16px — pure-CSS ruler */
  background:
    repeating-linear-gradient(to right, #3060b8 0 1.5px, transparent 1.5px 64px),
    repeating-linear-gradient(to right, rgba(48,96,184,0.35) 0 1px, transparent 1px 16px);
  background-size: 100% 18px, 100% 7px;
  background-position: bottom, bottom;
  background-repeat: repeat-x;
  transform-origin: left;
  animation: div-sci-wipe 0.9s cubic-bezier(.16,1,.3,1) both;
}
.div-sci-rbar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1.5px;
  background: #3060b8;
  transform-origin: left;
  animation: div-sci-grow 0.8s cubic-bezier(.16,1,.3,1) 0.56s both;
}
.div-sci-rlbl {
  position: absolute;
  right: 0;
  bottom: 7px;
  font-family: "Courier New", monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: #3060b8;
  animation: div-sci-fade 0.4s ease 0.96s both;
}
/* v2 — connection-node line */
.div-sci-v2 {
  position: relative;
  height: 14px;
  margin: 32px 0;
}
.div-sci-dline {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: #dde4f0;
  transform-origin: left;
  animation: div-sci-grow 0.6s ease 0.08s both;
}
.div-sci-ddots {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.div-sci-ddots i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1.5px solid #3060b8;
  background: #f5f7fb;
  animation: div-sci-dot 0.4s cubic-bezier(.34,1.56,.64,1) both;
}
.div-sci-ddots i:nth-child(1) { animation-delay: 0.28s; }
.div-sci-ddots i:nth-child(2) { animation-delay: 0.4s; }
.div-sci-ddots i:nth-child(3) { animation-delay: 0.52s; border-color: #c8361a; background: #fff8f6; }
.div-sci-ddots i:nth-child(4) { animation-delay: 0.64s; }
.div-sci-ddots i:nth-child(5) { animation-delay: 0.76s; }
/* v3 — flip-in chapter label */
.div-sci-v3 {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 32px 0;
}
.div-sci-rule {
  flex: 1;
  height: 4px;
  border-top: 1px solid #dde4f0;
  border-bottom: 1px solid #c8d4ec;
  animation: div-sci-grow 0.7s cubic-bezier(.16,1,.3,1) 0.4s both;
}
.div-sci-v3 .div-sci-rule:first-child { transform-origin: right; }
.div-sci-v3 .div-sci-rule:last-child  { transform-origin: left; animation-delay: 0.45s; }
.div-sci-v3 b {
  flex-shrink: 0;
  font-family: "Courier New", monospace;
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.14em;
  color: #3060b8;
  white-space: nowrap;
  animation: div-sci-flip 0.5s cubic-bezier(.34,1.56,.64,1) 0.1s both;
}
@media (prefers-reduced-motion: reduce) {
  .div-sci-ticks, .div-sci-rbar, .div-sci-rlbl, .div-sci-dline,
  .div-sci-ddots i, .div-sci-rule, .div-sci-v3 b { animation: none; }
}
```

### 08. Romantic Dividers

**Type:** Pure CSS
**Description:** Three soft, hand-drawn breaks — a flowering vine that draws itself leaf by leaf, a petal ornament, and a trio of diamonds set between blush rules.

**HTML:**
```html
<div class="div-rom-surface">
  <p class="div-rom-text">They had met, improbably, at a florist's shop on a Tuesday morning in November — he returning peonies that had died too quickly.</p>
  <div class="div-rom-v1" role="separator">
    <svg viewBox="0 0 476 32" fill="none" aria-hidden="true">
      <path class="div-rom-vine div-rom-lv" d="M238 16 C221 9 200 7 179 12 C158 17 137 12 116 16 C95 20 74 15 53 19 C36 22 20 19 0 22" stroke="#c4826a" stroke-width="1.2"/>
      <path class="div-rom-vine div-rom-rv" d="M238 16 C255 9 276 7 297 12 C318 17 339 12 360 16 C381 20 402 15 423 19 C440 22 456 19 476 22" stroke="#c4826a" stroke-width="1.2"/>
      <ellipse cx="179" cy="12" rx="3.5" ry="5.5" transform="rotate(-35 179 12)" fill="#c4826a" class="div-rom-lf" style="--ld:.64s"/>
      <ellipse cx="116" cy="16" rx="3" ry="5" transform="rotate(-20 116 16)" fill="#c4826a" class="div-rom-lf" style="--ld:.74s"/>
      <ellipse cx="53" cy="19" rx="2.8" ry="4.5" transform="rotate(-12 53 19)" fill="#c4826a" class="div-rom-lf" style="--ld:.84s"/>
      <ellipse cx="297" cy="12" rx="3.5" ry="5.5" transform="rotate(35 297 12)" fill="#c4826a" class="div-rom-lf" style="--ld:.68s"/>
      <ellipse cx="360" cy="16" rx="3" ry="5" transform="rotate(20 360 16)" fill="#c4826a" class="div-rom-lf" style="--ld:.78s"/>
      <ellipse cx="423" cy="19" rx="2.8" ry="4.5" transform="rotate(12 423 19)" fill="#c4826a" class="div-rom-lf" style="--ld:.88s"/>
      <circle cx="238" cy="16" r="4.5" fill="#c4826a" class="div-rom-lf" style="--ld:.1s"/>
      <circle cx="238" cy="16" r="7" fill="none" stroke="#c4826a" stroke-width=".8" opacity=".4" class="div-rom-lf" style="--ld:.22s"/>
    </svg>
  </div>
  <p class="div-rom-text">The invitation had arrived on heavy cream stock, hand-addressed in ink the colour of dried roses.</p>
  <div class="div-rom-v2" role="separator">
    <span class="div-rom-petal div-rom-p1">❀</span>
    <span class="div-rom-petal div-rom-p2">❦</span>
    <span class="div-rom-petal div-rom-p3">❀</span>
  </div>
  <p class="div-rom-text">In the old country, weddings lasted three days and left everyone changed — not just the couple but the witnesses too.</p>
  <div class="div-rom-v3" role="separator">
    <span class="div-rom-gems"><i></i><i></i><i></i></span>
  </div>
  <p class="div-rom-text">The flowers were white roses mixed with ranunculus and a single stem of something she couldn't name.</p>
</div>
```

**CSS:**
```css
@keyframes div-rom-draw { to { stroke-dashoffset: 0; } }
@keyframes div-rom-leaf { to { opacity: 1; } }
@keyframes div-rom-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes div-rom-pop  { from { transform: scale(0); } 55% { transform: scale(1.25); } to { transform: scale(1); } }
@keyframes div-rom-gem  { from { transform: rotate(45deg) scale(0); } 65% { transform: rotate(45deg) scale(1.3); } to { transform: rotate(45deg) scale(1); } }
.div-rom-surface {
  background: #fdf5ed;
  padding: 36px 40px;
  border-radius: 12px;
}
.div-rom-text {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 15px;
  line-height: 1.92;
  color: #4a3728;
  margin: 0;
}
/* v1 — flowering vine draws itself */
.div-rom-v1 { margin: 32px 0; }
.div-rom-v1 svg { display: block; width: 100%; height: 32px; }
.div-rom-vine {
  stroke-dasharray: 320;
  stroke-dashoffset: 320;
  animation: div-rom-draw 1.25s cubic-bezier(.16,1,.3,1) both;
}
.div-rom-rv { animation-delay: 0.05s; }
.div-rom-lf {
  opacity: 0;
  animation: div-rom-leaf 0.35s ease both;
  animation-delay: var(--ld, 0.65s);
}
/* v2 — petal ornament */
.div-rom-v2 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 32px 0;
  position: relative;
}
.div-rom-v2::before,
.div-rom-v2::after {
  content: '';
  position: absolute;
  top: 50%;
  width: calc(50% - 40px);
  height: 0.5px;
  animation: div-rom-grow 0.8s cubic-bezier(.16,1,.3,1) 0.42s both;
}
.div-rom-v2::before { left: 0;  background: linear-gradient(to right, transparent, #c4826a); transform-origin: right; }
.div-rom-v2::after  { right: 0; background: linear-gradient(to left, transparent, #c4826a);  transform-origin: left; animation-delay: 0.47s; }
.div-rom-petal {
  color: #c4826a;
  animation: div-rom-pop 0.52s cubic-bezier(.34,1.56,.64,1) both;
}
.div-rom-p1 { font-size: 9px;  animation-delay: 0.08s; }
.div-rom-p2 { font-size: 15px; animation-delay: 0.17s; }
.div-rom-p3 { font-size: 9px;  animation-delay: 0.25s; }
/* v3 — three diamonds between blush rules */
.div-rom-v3 {
  display: flex;
  align-items: center;
  margin: 32px 0;
}
.div-rom-v3::before,
.div-rom-v3::after {
  content: '';
  flex: 1;
  height: 0.5px;
  background: #d4a898;
  animation: div-rom-grow 0.8s cubic-bezier(.16,1,.3,1) 0.4s both;
}
.div-rom-v3::before { transform-origin: right; }
.div-rom-v3::after  { transform-origin: left; animation-delay: 0.45s; }
.div-rom-gems {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 16px;
}
.div-rom-gems i {
  display: block;
  width: 7px;
  height: 7px;
  background: #c4826a;
  animation: div-rom-gem 0.45s cubic-bezier(.34,1.56,.64,1) both;
}
.div-rom-gems i:nth-child(1) { animation-delay: 0.17s; }
.div-rom-gems i:nth-child(2) { width: 11px; height: 11px; animation-delay: 0.08s; }
.div-rom-gems i:nth-child(3) { animation-delay: 0.24s; }
@media (prefers-reduced-motion: reduce) {
  .div-rom-vine { animation: none; stroke-dashoffset: 0; }
  .div-rom-lf { animation: none; opacity: 1; }
  .div-rom-v2::before, .div-rom-v2::after, .div-rom-petal,
  .div-rom-v3::before, .div-rom-v3::after { animation: none; }
  .div-rom-gems i { animation: none; transform: rotate(45deg); }
}
```

### 09. Fashion Dividers

**Type:** Pure CSS
**Description:** Three editorial runway breaks — a slamming black look-number bar, a letter-spaced caption between rules, and a burn-in collection tag.

**HTML:**
```html
<div class="div-fashion-surface">
  <p class="div-fashion-text">The collection arrives in silence. No music, no commentary — just footsteps on polished concrete and the soft percussion of fabric.</p>
  <div class="div-fashion-v1" role="separator"><span>— 14 —</span></div>
  <p class="div-fashion-text">She believes silhouette is the only truth a garment can tell. Everything else — colour, texture — is opinion.</p>
  <div class="div-fashion-v2" role="separator">
    <span class="div-fashion-u"></span>
    <span class="div-fashion-cap">FEATURE</span>
    <span class="div-fashion-d"></span>
  </div>
  <p class="div-fashion-text">The atelier occupies four floors of a building that has stood on this street since 1891. The lift still requires an operator.</p>
  <div class="div-fashion-v3" role="separator">COLLECTION · AUTUMN · 2025</div>
  <p class="div-fashion-text">Fit is the argument. A jacket that fits correctly doesn't announce itself — it becomes invisible.</p>
</div>
```

**CSS:**
```css
@keyframes div-fa-slam   { from { transform: translateX(-110%); } to { transform: translateX(0); } }
@keyframes div-fa-grow   { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes div-fa-spread { from { letter-spacing: -0.2em; opacity: 0; } to { letter-spacing: 0.35em; opacity: 1; } }
@keyframes div-fa-burn   { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0% 0); } }
.div-fashion-surface {
  background: #ffffff;
  padding: 36px 40px;
  border-radius: 12px;
}
.div-fashion-text {
  font-family: system-ui, -apple-system, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.72;
  letter-spacing: 0.01em;
  color: #000000;
  margin: 0;
}
/* v1 — slamming look-number bar */
.div-fashion-v1 {
  margin: 32px 0;
  overflow: hidden;
}
.div-fashion-v1 span {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 20px;
  padding-right: 16px;
  background: #000000;
  font-family: system-ui, sans-serif;
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.3em;
  color: #ffffff;
  animation: div-fa-slam 0.5s cubic-bezier(.18,0,.04,1) 0.1s both;
}
/* v2 — letter-spaced caption between rules */
.div-fashion-v2 { margin: 32px 0; }
.div-fashion-u {
  display: block;
  height: 2px;
  background: #000000;
  transform-origin: left;
  animation: div-fa-grow 0.58s cubic-bezier(.18,0,.04,1) both;
}
.div-fashion-d {
  display: block;
  height: 1px;
  background: #000000;
  transform-origin: left;
  animation: div-fa-grow 0.58s cubic-bezier(.18,0,.04,1) 0.35s both;
}
.div-fashion-cap {
  display: flex;
  justify-content: center;
  margin: 7px 0;
  overflow: hidden;
  font-family: system-ui, sans-serif;
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.35em;
  color: #000000;
  animation: div-fa-spread 0.6s cubic-bezier(.16,1,.3,1) 0.18s both;
}
/* v3 — burn-in collection tag */
.div-fashion-v3 {
  margin: 32px 0;
  padding: 7px 0;
  border-top: 1.5px solid #000000;
  border-bottom: 1.5px solid #000000;
  font-family: system-ui, sans-serif;
  font-size: 8.5px;
  letter-spacing: 0.38em;
  text-align: center;
  color: #777777;
  animation: div-fa-burn 0.55s cubic-bezier(.16,1,.3,1) 0.15s both;
}
@media (prefers-reduced-motion: reduce) {
  .div-fashion-v1 span, .div-fashion-u, .div-fashion-d,
  .div-fashion-cap, .div-fashion-v3 { animation: none; }
}
```

### 10. Fantasy Dividers

**Type:** Pure CSS
**Description:** Three arcane breaks — a row of runes glowing into life, gold lines that draw toward a diamond sigil, and a wiping chain rule.

**HTML:**
```html
<div class="div-fantasy-surface">
  <p class="div-fantasy-text">Before the age of reason came the age of inscription — when words were not merely spoken but carved into stone and oak.</p>
  <div class="div-fantasy-v1" role="separator">
    <span class="div-fantasy-runes">
      <span>ᚠ</span><span>ᚨ</span><span>ᚷ</span><span>ᛁ</span><span>ᛟ</span>
      <span class="div-fantasy-rsep">◆</span>
      <span>ᛗ</span><span>ᚱ</span><span>ᛞ</span><span>ᛚ</span><span>ᚾ</span>
    </span>
    <span class="div-fantasy-bar"></span>
  </div>
  <p class="div-fantasy-text">The tome had been sealed with a wax impression bearing an insignia no living archivist could identify.</p>
  <div class="div-fantasy-v2" role="separator">
    <svg viewBox="0 0 476 24" fill="none" aria-hidden="true">
      <line class="div-fantasy-l div-fantasy-l1" x1="214" y1="12" x2="0" y2="12" stroke="#c4841c" stroke-width="1"/>
      <line class="div-fantasy-l div-fantasy-l2" x1="200" y1="8" x2="14" y2="8" stroke="#c4841c" stroke-width=".5" opacity=".35"/>
      <polygon class="div-fantasy-sigil" points="238,4 248,12 238,20 228,12" stroke="#c4841c" stroke-width="1.5" fill="#17140e"/>
      <line class="div-fantasy-l div-fantasy-r1" x1="262" y1="12" x2="476" y2="12" stroke="#c4841c" stroke-width="1"/>
      <line class="div-fantasy-l div-fantasy-r2" x1="276" y1="8" x2="462" y2="8" stroke="#c4841c" stroke-width=".5" opacity=".35"/>
    </svg>
  </div>
  <p class="div-fantasy-text">Every ward the elder cast required a physical anchor — a mark burned into wood, pressed into clay, scratched into the threshold.</p>
  <div class="div-fantasy-v3" role="separator">
    <span class="div-fantasy-chain">⛓⛓⛓⛓⛓⛓⛓⛓⛓⛓⛓⛓⛓⛓⛓⛓⛓⛓⛓⛓⛓⛓⛓⛓⛓⛓</span>
  </div>
  <p class="div-fantasy-text">The knight had ridden three days without water before arriving at the garrison well — only to find it sealed with a sigil.</p>
</div>
```

**CSS:**
```css
@keyframes div-fan-glow  { 0% { opacity: 0; } 35% { opacity: 1; color: #ffe07a; } 100% { opacity: 1; color: #c4841c; } }
@keyframes div-fan-grow  { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes div-fan-draw  { to { stroke-dashoffset: 0; } }
@keyframes div-fan-sigil { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } }
@keyframes div-fan-wipe  { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0% 0 0); } }
.div-fantasy-surface {
  background: #17140e;
  padding: 36px 40px;
  border-radius: 12px;
}
.div-fantasy-text {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 15px;
  line-height: 1.88;
  color: #c9ba9a;
  margin: 0;
}
/* v1 — runes glow into life */
.div-fantasy-v1 { margin: 32px 0; }
.div-fantasy-runes {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 9px;
}
.div-fantasy-runes > span {
  font-family: Georgia, serif;
  font-size: 12px;
  color: #c4841c;
  animation: div-fan-glow 0.5s ease both;
}
.div-fantasy-runes > span:nth-child(1) { animation-delay: 0.05s; }
.div-fantasy-runes > span:nth-child(2) { animation-delay: 0.13s; }
.div-fantasy-runes > span:nth-child(3) { animation-delay: 0.21s; }
.div-fantasy-runes > span:nth-child(4) { animation-delay: 0.29s; }
.div-fantasy-runes > span:nth-child(5) { animation-delay: 0.37s; }
.div-fantasy-runes > span:nth-child(6) { animation-delay: 0.45s; font-size: 7px; }
.div-fantasy-runes > span:nth-child(7) { animation-delay: 0.53s; }
.div-fantasy-runes > span:nth-child(8) { animation-delay: 0.61s; }
.div-fantasy-runes > span:nth-child(9) { animation-delay: 0.69s; }
.div-fantasy-runes > span:nth-child(10) { animation-delay: 0.77s; }
.div-fantasy-runes > span:nth-child(11) { animation-delay: 0.85s; }
.div-fantasy-bar {
  display: block;
  height: 0.5px;
  background: linear-gradient(90deg, transparent, #c4841c 30%, #c4841c 70%, transparent);
  transform-origin: center;
  animation: div-fan-grow 0.8s cubic-bezier(.16,1,.3,1) 0.9s both;
}
/* v2 — gold lines draw toward a sigil */
.div-fantasy-v2 { margin: 32px 0; }
.div-fantasy-v2 svg { display: block; width: 100%; height: 24px; }
.div-fantasy-l { animation: div-fan-draw 0.9s cubic-bezier(.16,1,.3,1) both; }
.div-fantasy-l1 { stroke-dasharray: 214; stroke-dashoffset: 214; }
.div-fantasy-l2 { stroke-dasharray: 186; stroke-dashoffset: 186; animation-delay: 0.09s; }
.div-fantasy-r1 { stroke-dasharray: 214; stroke-dashoffset: 214; animation-delay: 0.04s; }
.div-fantasy-r2 { stroke-dasharray: 186; stroke-dashoffset: 186; animation-delay: 0.13s; }
.div-fantasy-sigil {
  transform-box: fill-box;
  transform-origin: center;
  animation: div-fan-sigil 0.52s cubic-bezier(.34,1.56,.64,1) 0.75s both;
}
/* v3 — wiping chain rule */
.div-fantasy-v3 {
  margin: 32px 0;
  overflow: hidden;
}
.div-fantasy-chain {
  display: block;
  font-family: "Courier New", monospace;
  font-size: 10px;
  letter-spacing: 2px;
  color: #c4841c;
  opacity: 0.7;
  white-space: nowrap;
  overflow: hidden;
  animation: div-fan-wipe 0.85s cubic-bezier(.16,1,.3,1) 0.15s both;
}
@media (prefers-reduced-motion: reduce) {
  .div-fantasy-runes > span { animation: none; opacity: 1; }
  .div-fantasy-bar, .div-fantasy-sigil, .div-fantasy-chain { animation: none; }
  .div-fantasy-l { animation: none; stroke-dashoffset: 0; }
}
```

### 11. Minimal Dividers

**Type:** Pure CSS
**Description:** Three quiet, restrained breaks — a hairline that draws slowly open, three dots fading in one by one, and a section mark between fine rules.

**HTML:**
```html
<div class="div-minimal-surface">
  <p class="div-minimal-text">The studio was empty when she arrived — not empty between occupants, but empty in the original sense, before anything had been placed there.</p>
  <div class="div-minimal-v1" role="separator"></div>
  <p class="div-minimal-text">Restraint is not the same as emptiness. The most demanding discipline in any art is knowing what to remove.</p>
  <div class="div-minimal-v2" role="separator"><span></span><span></span><span></span></div>
  <p class="div-minimal-text">He worked slowly. The longer he looked at something, the more it revealed, and the less quickly he could move on.</p>
  <div class="div-minimal-v3" role="separator">
    <span class="div-minimal-rule"></span>
    <em>§</em>
    <span class="div-minimal-rule"></span>
  </div>
  <p class="div-minimal-text">The typeface had been designed in 1932 for a publication that ran for eleven issues before the war interrupted everything.</p>
</div>
```

**CSS:**
```css
@keyframes div-mn-open { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes div-mn-fade { from { opacity: 0; } to { opacity: 1; } }
.div-minimal-surface {
  background: #f9f8f6;
  padding: 36px 40px;
  border-radius: 12px;
}
.div-minimal-text {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.9;
  color: #3a3834;
  margin: 0;
}
/* v1 — hairline draws slowly open */
.div-minimal-v1 {
  height: 0.5px;
  margin: 34px 0;
  background: #cac7c2;
  transform: scaleX(0);
  transform-origin: center;
  animation: div-mn-open 1.8s cubic-bezier(.16,1,.3,1) 0.1s both;
}
/* v2 — three dots fade in one by one */
.div-minimal-v2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 34px 0;
  padding: 0 22%;
}
.div-minimal-v2 span {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #9a9690;
  animation: div-mn-fade 0.7s ease both;
}
.div-minimal-v2 span:nth-child(1) { animation-delay: 0.2s; }
.div-minimal-v2 span:nth-child(2) { animation-delay: 0.65s; }
.div-minimal-v2 span:nth-child(3) { animation-delay: 1.1s; }
/* v3 — section mark between fine rules */
.div-minimal-v3 {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 34px 0;
}
.div-minimal-rule {
  flex: 1;
  height: 0.5px;
  background: #cac7c2;
  transform: scaleX(0);
  animation: div-mn-open 1.2s cubic-bezier(.16,1,.3,1) 0.3s both;
}
.div-minimal-v3 .div-minimal-rule:first-child { transform-origin: right; }
.div-minimal-v3 .div-minimal-rule:last-child  { transform-origin: left; animation-delay: 0.35s; }
.div-minimal-v3 em {
  flex-shrink: 0;
  font-family: Georgia, serif;
  font-style: normal;
  font-size: 12px;
  color: #b0ada8;
  white-space: nowrap;
  animation: div-mn-fade 0.9s ease 0.9s both;
}
@media (prefers-reduced-motion: reduce) {
  .div-minimal-v1, .div-minimal-rule { animation: none; transform: scaleX(1); }
  .div-minimal-v2 span, .div-minimal-v3 em { animation: none; opacity: 1; }
}
```

### 12. Retro Dividers

**Type:** Pure CSS
**Description:** Three nostalgic breaks — a starburst whose rays draw outward, a slamming two-tone diner rule, and a perforated ticket-stub edge.

**HTML:**
```html
<div class="div-retro-surface">
  <p class="div-retro-text">The diner on Route 9 had been open since 1952 and showed no signs of reconsidering. The menu hadn't changed in thirty years.</p>
  <div class="div-retro-v1" role="separator">
    <svg viewBox="0 0 476 44" fill="none" aria-hidden="true">
      <line class="div-retro-fl" x1="221" y1="22" x2="0" y2="22" stroke="#d4601a" stroke-width="1"/>
      <line class="div-retro-fr" x1="255" y1="22" x2="476" y2="22" stroke="#d4601a" stroke-width="1"/>
      <g class="div-retro-rays" stroke="#d4601a" stroke-width="1.5">
        <line x1="238" y1="13" x2="238" y2="3"/>
        <line x1="241.4" y1="13.7" x2="245.3" y2="4.4"/>
        <line x1="244.4" y1="15.6" x2="251.3" y2="8.7"/>
        <line x1="246.3" y1="18.6" x2="255.6" y2="14.7"/>
        <line x1="247" y1="22" x2="257" y2="22"/>
        <line x1="246.3" y1="25.4" x2="255.6" y2="29.3"/>
        <line x1="244.4" y1="28.4" x2="251.3" y2="35.3"/>
        <line x1="241.4" y1="30.3" x2="245.3" y2="39.6"/>
        <line x1="238" y1="31" x2="238" y2="41"/>
        <line x1="234.6" y1="30.3" x2="230.7" y2="39.6"/>
        <line x1="231.6" y1="28.4" x2="224.7" y2="35.3"/>
        <line x1="229.7" y1="25.4" x2="220.4" y2="29.3"/>
        <line x1="229" y1="22" x2="219" y2="22"/>
        <line x1="229.7" y1="18.6" x2="220.4" y2="14.7"/>
        <line x1="231.6" y1="15.6" x2="224.7" y2="8.7"/>
        <line x1="234.6" y1="13.7" x2="230.7" y2="4.4"/>
      </g>
      <circle class="div-retro-circ" cx="238" cy="22" r="5" fill="#d4601a"/>
    </svg>
  </div>
  <p class="div-retro-text">Neon signs don't flicker by accident — the gas inside reacts to alternating current with a rhythm that feels almost biological.</p>
  <div class="div-retro-v2" role="separator">
    <span class="div-retro-t"></span>
    <span class="div-retro-b"></span>
  </div>
  <p class="div-retro-text">The booth was upholstered in vinyl the colour of oxblood — a colour whose name nobody used but everyone recognized.</p>
  <div class="div-retro-v3" role="separator"></div>
  <p class="div-retro-text">The jukebox held 200 selections. He had played B-7 every visit since 1971 without wondering why.</p>
</div>
```

**CSS:**
```css
@keyframes div-rt-ray  { to { stroke-dashoffset: 0; } }
@keyframes div-rt-dot  { from { transform: scale(0); } 65% { transform: scale(1.3); } to { transform: scale(1); } }
@keyframes div-rt-draw { to { stroke-dashoffset: 0; } }
@keyframes div-rt-slam { from { transform: translateX(-110%); } to { transform: translateX(0); } }
@keyframes div-rt-fade { from { opacity: 0; } to { opacity: 1; } }
.div-retro-surface {
  background: #231509;
  padding: 36px 40px;
  border-radius: 12px;
}
.div-retro-text {
  font-family: "Courier New", Courier, monospace;
  font-size: 12.5px;
  line-height: 1.82;
  letter-spacing: 0.03em;
  color: #e0c87a;
  margin: 0;
}
/* v1 — starburst rays draw outward */
.div-retro-v1 { margin: 32px 0; }
.div-retro-v1 svg { display: block; width: 100%; height: 44px; overflow: visible; }
.div-retro-rays line {
  stroke-dasharray: 11;
  stroke-dashoffset: 11;
  animation: div-rt-ray 0.22s ease both;
}
.div-retro-rays line:nth-child(1)  { animation-delay: 0.08s; }
.div-retro-rays line:nth-child(2)  { animation-delay: 0.12s; }
.div-retro-rays line:nth-child(3)  { animation-delay: 0.17s; }
.div-retro-rays line:nth-child(4)  { animation-delay: 0.21s; }
.div-retro-rays line:nth-child(5)  { animation-delay: 0.26s; }
.div-retro-rays line:nth-child(6)  { animation-delay: 0.30s; }
.div-retro-rays line:nth-child(7)  { animation-delay: 0.35s; }
.div-retro-rays line:nth-child(8)  { animation-delay: 0.39s; }
.div-retro-rays line:nth-child(9)  { animation-delay: 0.44s; }
.div-retro-rays line:nth-child(10) { animation-delay: 0.48s; }
.div-retro-rays line:nth-child(11) { animation-delay: 0.53s; }
.div-retro-rays line:nth-child(12) { animation-delay: 0.57s; }
.div-retro-rays line:nth-child(13) { animation-delay: 0.62s; }
.div-retro-rays line:nth-child(14) { animation-delay: 0.66s; }
.div-retro-rays line:nth-child(15) { animation-delay: 0.71s; }
.div-retro-rays line:nth-child(16) { animation-delay: 0.75s; }
.div-retro-circ {
  transform-box: fill-box;
  transform-origin: center;
  animation: div-rt-dot 0.4s cubic-bezier(.34,1.56,.64,1) 0.85s both;
}
.div-retro-fl,
.div-retro-fr {
  stroke-dasharray: 221;
  stroke-dashoffset: 221;
  animation: div-rt-draw 0.72s cubic-bezier(.16,1,.3,1) 0.98s both;
}
.div-retro-fr { animation-delay: 1.02s; }
/* v2 — slamming two-tone diner rule */
.div-retro-v2 {
  margin: 32px 0;
  overflow: hidden;
}
.div-retro-t {
  display: block;
  height: 5px;
  background: #d4601a;
  animation: div-rt-slam 0.5s cubic-bezier(.18,0,.04,1) 0.1s both;
}
.div-retro-b {
  display: block;
  height: 1px;
  margin-top: 3px;
  background: #e0c87a;
  opacity: 0.45;
  animation: div-rt-slam 0.5s cubic-bezier(.18,0,.04,1) 0.28s both;
}
/* v3 — perforated ticket-stub edge */
.div-retro-v3 {
  height: 4px;
  margin: 32px 0;
  background: radial-gradient(circle, #d4601a 2px, transparent 2px);
  background-size: 14.875px 4px;
  background-repeat: repeat-x;
  background-position: center;
  animation: div-rt-fade 0.6s ease 0.2s both;
}
@media (prefers-reduced-motion: reduce) {
  .div-retro-rays line, .div-retro-fl, .div-retro-fr { animation: none; stroke-dashoffset: 0; }
  .div-retro-circ, .div-retro-t, .div-retro-b, .div-retro-v3 { animation: none; }
}
```

### 13. Newspaper Dividers

**Type:** Pure CSS
**Description:** Three broadsheet-print breaks — a thick-thin masthead rule, a starred jump-line break, and a column-end colophon dash.

**HTML:**
```html
<div class="div-news-surface">
  <p class="div-news-text">The morning edition carried news of the harbour expansion on its front page, set in a headline type the paper had used, unchanged, since nineteen thirty-eight.</p>
  <div class="div-news-v1" role="separator"><i></i><i></i></div>
  <p class="div-news-text">Continued reporting suggested the council vote would be closer than the early projections implied — three members had not yet declared a position.</p>
  <div class="div-news-v2" role="separator"><span>★ ★ ★</span></div>
  <p class="div-news-text">In the arts section, a review of the season's first concert ran two columns, praising the strings and saying little, pointedly, of the brass.</p>
  <div class="div-news-v3" role="separator"><span>— 30 —</span></div>
  <p class="div-news-text">The weather, the almanac noted, would turn by the weekend; readers along the coast were advised to expect the first hard frost of the year.</p>
</div>
```

**CSS:**
```css
@keyframes div-news-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes div-news-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.div-news-surface {
  background: #f3efe6;
  padding: 36px 40px;
  border-radius: 12px;
}
.div-news-text {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 15px;
  line-height: 1.82;
  color: #2a2620;
  margin: 0;
}
/* v1 — thick-thin masthead rule */
.div-news-v1 { margin: 30px 0; }
.div-news-v1 i {
  display: block;
  transform-origin: left;
  animation: div-news-grow 0.7s cubic-bezier(.18,0,.05,1) both;
}
.div-news-v1 i:nth-child(1) { height: 3px; background: #2a2620; }
.div-news-v1 i:nth-child(2) { height: 1px; margin-top: 3px; background: #2a2620; animation-delay: 0.22s; }
/* v2 — starred jump-line break */
.div-news-v2 {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 30px 0;
}
.div-news-v2::before,
.div-news-v2::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #8a8270;
  animation: div-news-grow 0.7s cubic-bezier(.16,1,.3,1) 0.1s both;
}
.div-news-v2::before { transform-origin: right; }
.div-news-v2::after  { transform-origin: left; animation-delay: 0.14s; }
.div-news-v2 span {
  flex-shrink: 0;
  font-size: 9px;
  letter-spacing: 0.4em;
  color: #6a6252;
  animation: div-news-fade 0.5s ease 0.5s both;
}
/* v3 — column-end colophon dash ("-30-" = end of story) */
.div-news-v3 {
  display: flex;
  justify-content: center;
  margin: 30px 0;
}
.div-news-v3 span {
  font-family: Georgia, serif;
  font-size: 12px;
  letter-spacing: 0.2em;
  color: #6a6252;
  padding: 4px 0;
  border-top: 1px solid #c4bca8;
  border-bottom: 1px solid #c4bca8;
  animation: div-news-fade 0.55s ease 0.15s both;
}
@media (prefers-reduced-motion: reduce) {
  .div-news-v1 i, .div-news-v2::before, .div-news-v2::after,
  .div-news-v2 span, .div-news-v3 span { animation: none; }
}
```

### 14. Playful Dividers

**Type:** Pure CSS
**Description:** Three bright, friendly breaks — a bouncing crayon squiggle, a row of popping shapes, and a dashed cut-here line with scissors.

**HTML:**
```html
<div class="div-playful-surface">
  <p class="div-playful-text">The classroom hamster had escaped again — third time this term — and the search had become, for the children, the most educational event of the week.</p>
  <div class="div-playful-v1" role="separator">
    <svg viewBox="0 0 476 22" fill="none" aria-hidden="true">
      <path class="div-playful-squiggle" d="M0 11 Q24 -3 48 11 Q72 25 96 11 Q120 -3 144 11 Q168 25 192 11 Q216 -3 240 11 Q264 25 288 11 Q312 -3 336 11 Q360 25 384 11 Q408 -3 432 11 Q456 25 476 11" stroke="#ff7a3d" stroke-width="3.5" stroke-linecap="round"/>
    </svg>
  </div>
  <p class="div-playful-text">Every desk had been lifted, every backpack unzipped, and a map of the room drawn on the whiteboard with a hopeful X marked near the radiator.</p>
  <div class="div-playful-v2" role="separator">
    <span class="div-playful-shapes"><i class="div-playful-c"></i><i class="div-playful-t"></i><i class="div-playful-s"></i><i class="div-playful-t"></i><i class="div-playful-c"></i></span>
  </div>
  <p class="div-playful-text">He was found, eventually, asleep inside a shoebox lined with cotton wool — a habitat, the children insisted, that he had clearly chosen on purpose.</p>
  <div class="div-playful-v3" role="separator"><span class="div-playful-scissors">✂</span></div>
  <p class="div-playful-text">A certificate was drawn up, decorated with stickers, and taped above his cage: Most Adventurous Class Pet, awarded by unanimous and very loud vote.</p>
</div>
```

**CSS:**
```css
@keyframes div-play-draw  { to { stroke-dashoffset: 0; } }
@keyframes div-play-pop   { from { transform: scale(0); } 60% { transform: scale(1.35); } to { transform: scale(1); } }
@keyframes div-play-grow  { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes div-play-slide { from { transform: translateX(-12px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
.div-playful-surface {
  background: #fff4dc;
  padding: 36px 40px;
  border-radius: 12px;
}
.div-playful-text {
  font-family: "Trebuchet MS", Verdana, sans-serif;
  font-size: 14px;
  line-height: 1.8;
  color: #4a3a22;
  margin: 0;
}
/* v1 — bouncing crayon squiggle */
.div-playful-v1 { margin: 30px 0; }
.div-playful-v1 svg { display: block; width: 100%; height: 22px; overflow: visible; }
.div-playful-squiggle {
  stroke-dasharray: 760;
  stroke-dashoffset: 760;
  animation: div-play-draw 1.1s cubic-bezier(.16,1,.3,1) both;
}
/* v2 — row of popping shapes */
.div-playful-v2 {
  display: flex;
  align-items: center;
  margin: 30px 0;
}
.div-playful-v2::before,
.div-playful-v2::after {
  content: '';
  flex: 1;
  height: 2px;
  border-radius: 2px;
  background: #ffd089;
  animation: div-play-grow 0.6s cubic-bezier(.16,1,.3,1) 0.4s both;
}
.div-playful-v2::before { transform-origin: right; }
.div-playful-v2::after  { transform-origin: left; animation-delay: 0.45s; }
.div-playful-shapes {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
}
.div-playful-shapes i {
  display: block;
  animation: div-play-pop 0.42s cubic-bezier(.34,1.56,.64,1) both;
}
.div-playful-c { width: 11px; height: 11px; border-radius: 50%; background: #ff7a3d; animation-delay: 0.1s; }
.div-playful-t { width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 11px solid #3db4c4; animation-delay: 0.2s; }
.div-playful-s { width: 12px; height: 12px; background: #ffc23d; clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); animation-delay: 0.3s; }
.div-playful-shapes i:nth-child(4) { animation-delay: 0.4s; }
.div-playful-shapes i:nth-child(5) { animation-delay: 0.5s; }
/* v3 — dashed cut-here line with scissors */
.div-playful-v3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 30px 0;
}
.div-playful-v3::before,
.div-playful-v3::after {
  content: '';
  flex: 1;
  height: 2px;
  background: repeating-linear-gradient(to right, #c4906a 0 7px, transparent 7px 13px);
  animation: div-play-grow 0.7s cubic-bezier(.16,1,.3,1) 0.2s both;
}
.div-playful-v3::before { transform-origin: right; }
.div-playful-v3::after  { transform-origin: left; animation-delay: 0.24s; }
.div-playful-scissors {
  flex-shrink: 0;
  font-size: 16px;
  color: #c4906a;
  animation: div-play-slide 0.5s cubic-bezier(.34,1.56,.64,1) 0.55s both;
}
@media (prefers-reduced-motion: reduce) {
  .div-playful-squiggle { animation: none; stroke-dashoffset: 0; }
  .div-playful-v2::before, .div-playful-v2::after, .div-playful-shapes i,
  .div-playful-v3::before, .div-playful-v3::after, .div-playful-scissors { animation: none; }
}
```

### 15. Music Dividers

**Type:** Pure CSS
**Description:** Three sound-themed breaks — rising equalizer bars, a waveform pulse line, and a concentric vinyl-groove rule.

**HTML:**
```html
<div class="div-music-surface">
  <p class="div-music-text">The record opens with eleven seconds of room tone — the sound of the studio itself, breathing, before the first note is allowed to arrive.</p>
  <div class="div-music-v1" role="separator">
    <span class="div-music-eq"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span>
  </div>
  <p class="div-music-text">Side two was recorded live in a single take, the engineer refusing to stop the tape even when the bassist's string broke four bars from the end.</p>
  <div class="div-music-v2" role="separator">
    <svg viewBox="0 0 476 24" fill="none" preserveAspectRatio="none" aria-hidden="true">
      <path class="div-music-wave" d="M0 12 L40 12 L52 4 L64 20 L76 8 L88 16 L100 12 L150 12 L162 2 L174 22 L186 6 L198 18 L210 12 L280 12 L292 5 L304 19 L316 9 L328 15 L340 12 L410 12 L422 3 L434 21 L446 7 L458 17 L476 12" stroke="#15d18a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
    </svg>
  </div>
  <p class="div-music-text">The mastering took longer than the recording — six weeks spent moving a single frequency band a fraction of a decibel, listening, then moving it back.</p>
  <div class="div-music-v3" role="separator"><span class="div-music-vinyl"></span></div>
  <p class="div-music-text">When the test pressing arrived, the band listened to it in a parked car, because the car was where, the singer said, music was actually heard.</p>
</div>
```

**CSS:**
```css
@keyframes div-mus-rise { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes div-mus-draw { to { stroke-dashoffset: 0; } }
@keyframes div-mus-spin { from { transform: scale(0) rotate(-90deg); opacity: 0; } to { transform: scale(1) rotate(0); opacity: 1; } }
.div-music-surface {
  background: #0e1014;
  padding: 36px 40px;
  border-radius: 12px;
}
.div-music-text {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 14px;
  line-height: 1.82;
  color: #8a93a0;
  margin: 0;
}
/* v1 — rising equalizer bars */
.div-music-v1 { margin: 32px 0; }
.div-music-eq {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  height: 26px;
}
.div-music-eq i {
  flex: 1;
  margin: 0 1.5px;
  border-radius: 1.5px;
  background: linear-gradient(to top, #15d18a, #15d18a 60%, rgba(21,209,138,0.35));
  transform-origin: bottom;
  animation: div-mus-rise 0.5s cubic-bezier(.34,1.56,.64,1) both;
}
.div-music-eq i:nth-child(odd)  { height: 60%; }
.div-music-eq i:nth-child(even) { height: 100%; }
.div-music-eq i:nth-child(3n)   { height: 38%; }
.div-music-eq i:nth-child(1)  { animation-delay: 0.04s; }
.div-music-eq i:nth-child(2)  { animation-delay: 0.08s; }
.div-music-eq i:nth-child(3)  { animation-delay: 0.12s; }
.div-music-eq i:nth-child(4)  { animation-delay: 0.16s; }
.div-music-eq i:nth-child(5)  { animation-delay: 0.20s; }
.div-music-eq i:nth-child(6)  { animation-delay: 0.24s; }
.div-music-eq i:nth-child(7)  { animation-delay: 0.28s; }
.div-music-eq i:nth-child(8)  { animation-delay: 0.32s; }
.div-music-eq i:nth-child(9)  { animation-delay: 0.36s; }
.div-music-eq i:nth-child(10) { animation-delay: 0.40s; }
.div-music-eq i:nth-child(11) { animation-delay: 0.44s; }
.div-music-eq i:nth-child(12) { animation-delay: 0.48s; }
.div-music-eq i:nth-child(n+13) { animation-delay: 0.52s; }
/* v2 — waveform pulse line */
.div-music-v2 { margin: 32px 0; }
.div-music-v2 svg { display: block; width: 100%; height: 24px; }
.div-music-wave {
  stroke-dasharray: 900;
  stroke-dashoffset: 900;
  animation: div-mus-draw 1.2s cubic-bezier(.16,1,.3,1) both;
}
/* v3 — concentric vinyl-groove rule */
.div-music-v3 {
  display: flex;
  align-items: center;
  margin: 32px 0;
}
.div-music-v3::before,
.div-music-v3::after {
  content: '';
  flex: 1;
  height: 4px;
  /* concentric grooves rendered as repeating lines */
  background: repeating-linear-gradient(to bottom, rgba(21,209,138,0.4) 0 1px, transparent 1px 2px);
}
.div-music-vinyl {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin: 0 14px;
  border-radius: 50%;
  background: radial-gradient(circle, #15d18a 0 3px, #0e1014 3px 4px, #15d18a 4px 5px, #0e1014 5px 6px, #15d18a 6px 7px, #0e1014 7px 8px);
  animation: div-mus-spin 0.55s cubic-bezier(.34,1.56,.64,1) 0.3s both;
}
@media (prefers-reduced-motion: reduce) {
  .div-music-eq i { animation: none; }
  .div-music-wave { animation: none; stroke-dashoffset: 0; }
  .div-music-vinyl { animation: none; }
}
```

### 16. Festive Dividers

**Type:** Pure CSS
**Description:** Three celebration breaks — a string of fairy lights, a confetti-scatter band, and a garland swag with hanging baubles.

**HTML:**
```html
<div class="div-festive-surface">
  <p class="div-festive-text">The hall had been decorated since dawn — every banister wound with greenery, every windowsill crowded with candles waiting, unlit, for the evening.</p>
  <div class="div-festive-v1" role="separator">
    <span class="div-festive-wire"></span>
    <span class="div-festive-lights"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span>
  </div>
  <p class="div-festive-text">By six o'clock the first guests had arrived, stamping snow from their boots, and the quiet house became, all at once, impossibly loud and warm.</p>
  <div class="div-festive-v2" role="separator"></div>
  <p class="div-festive-text">There was a long table, and then a longer one added end to end, and still the children ate standing up because that, apparently, was more fun.</p>
  <div class="div-festive-v3" role="separator">
    <svg viewBox="0 0 476 26" fill="none" aria-hidden="true">
      <path class="div-festive-swag" d="M0 3 Q119 34 238 3 Q357 34 476 3" stroke="#2f9e5e" stroke-width="3" stroke-linecap="round"/>
      <circle class="div-festive-bauble div-festive-b1" cx="119" cy="19" r="4.5" fill="#e0455a"/>
      <circle class="div-festive-bauble div-festive-b2" cx="238" cy="22" r="5" fill="#e8b53d"/>
      <circle class="div-festive-bauble div-festive-b3" cx="357" cy="19" r="4.5" fill="#e0455a"/>
    </svg>
  </div>
  <p class="div-festive-text">When the candles were finally lit, someone turned off the lamps, and for a moment nobody spoke — the whole room held inside that small, gold light.</p>
</div>
```

**CSS:**
```css
@keyframes div-fes-grow  { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes div-fes-glow  { from { transform: scale(0); opacity: 0; } 60% { transform: scale(1.3); } to { transform: scale(1); opacity: 1; } }
@keyframes div-fes-fall  { from { transform: translateY(-10px) rotate(0); opacity: 0; } to { transform: translateY(0) rotate(var(--r,0deg)); opacity: 1; } }
@keyframes div-fes-draw  { to { stroke-dashoffset: 0; } }
@keyframes div-fes-drop  { from { transform: scale(0) translateY(-6px); } 60% { transform: scale(1.25) translateY(0); } to { transform: scale(1) translateY(0); } }
.div-festive-surface {
  background: #0f2418;
  padding: 36px 40px;
  border-radius: 12px;
}
.div-festive-text {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 15px;
  line-height: 1.85;
  color: #b8c4b0;
  margin: 0;
}
/* v1 — string of fairy lights */
.div-festive-v1 {
  position: relative;
  height: 16px;
  margin: 32px 0;
}
.div-festive-wire {
  position: absolute;
  top: 4px;
  left: 0;
  right: 0;
  height: 1px;
  background: #3a5a44;
  transform-origin: left;
  animation: div-fes-grow 0.7s cubic-bezier(.16,1,.3,1) both;
}
.div-festive-lights {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.div-festive-lights i {
  width: 8px;
  height: 11px;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  margin-top: 4px;
  transform-origin: top;
  animation: div-fes-glow 0.4s cubic-bezier(.34,1.56,.64,1) both;
}
.div-festive-lights i:nth-child(4n+1) { background: #e8b53d; box-shadow: 0 0 7px rgba(232,181,61,0.7); }
.div-festive-lights i:nth-child(4n+2) { background: #e0455a; box-shadow: 0 0 7px rgba(224,69,90,0.7); }
.div-festive-lights i:nth-child(4n+3) { background: #4fb8d4; box-shadow: 0 0 7px rgba(79,184,212,0.7); }
.div-festive-lights i:nth-child(4n)   { background: #5fc77a; box-shadow: 0 0 7px rgba(95,199,122,0.7); }
.div-festive-lights i:nth-child(1)  { animation-delay: 0.4s; }
.div-festive-lights i:nth-child(2)  { animation-delay: 0.46s; }
.div-festive-lights i:nth-child(3)  { animation-delay: 0.52s; }
.div-festive-lights i:nth-child(4)  { animation-delay: 0.58s; }
.div-festive-lights i:nth-child(5)  { animation-delay: 0.64s; }
.div-festive-lights i:nth-child(6)  { animation-delay: 0.70s; }
.div-festive-lights i:nth-child(7)  { animation-delay: 0.76s; }
.div-festive-lights i:nth-child(8)  { animation-delay: 0.82s; }
.div-festive-lights i:nth-child(9)  { animation-delay: 0.88s; }
.div-festive-lights i:nth-child(10) { animation-delay: 0.94s; }
.div-festive-lights i:nth-child(11) { animation-delay: 1.00s; }
.div-festive-lights i:nth-child(12) { animation-delay: 1.06s; }
/* v2 — confetti-scatter band */
.div-festive-v2 {
  height: 18px;
  margin: 32px 0;
  background:
    radial-gradient(circle, #e8b53d 1.5px, transparent 2px) 0 2px / 26px 18px,
    radial-gradient(circle, #e0455a 1.5px, transparent 2px) 13px 11px / 26px 18px,
    radial-gradient(circle, #4fb8d4 1.5px, transparent 2px) 7px 14px / 19px 18px,
    radial-gradient(circle, #5fc77a 1.5px, transparent 2px) 19px 4px / 23px 18px;
  background-repeat: repeat-x;
  transform-origin: center;
  animation: div-fes-grow 0.85s cubic-bezier(.16,1,.3,1) 0.1s both;
}
/* v3 — garland swag with hanging baubles */
.div-festive-v3 { margin: 32px 0; }
.div-festive-v3 svg { display: block; width: 100%; height: 26px; }
.div-festive-swag {
  stroke-dasharray: 540;
  stroke-dashoffset: 540;
  animation: div-fes-draw 1s cubic-bezier(.16,1,.3,1) both;
}
.div-festive-bauble {
  transform-box: fill-box;
  transform-origin: center top;
  animation: div-fes-drop 0.5s cubic-bezier(.34,1.56,.64,1) both;
}
.div-festive-b1 { animation-delay: 0.78s; }
.div-festive-b2 { animation-delay: 0.9s; }
.div-festive-b3 { animation-delay: 1.02s; }
@media (prefers-reduced-motion: reduce) {
  .div-festive-wire, .div-festive-lights i, .div-festive-v2 { animation: none; }
  .div-festive-swag { animation: none; stroke-dashoffset: 0; }
  .div-festive-bauble { animation: none; }
}
```

### 17. Corporate Dividers

**Type:** Pure CSS
**Description:** Three clean dashboard breaks — a filling progress-segment bar, a chevron breadcrumb rule, and a KPI tick-marker line.

**HTML:**
```html
<div class="div-corp-surface">
  <p class="div-corp-text">Quarterly performance exceeded forecast across three of four operating regions, with the strongest growth recorded in the enterprise services segment.</p>
  <div class="div-corp-v1" role="separator">
    <span class="div-corp-seg"></span><span class="div-corp-seg"></span><span class="div-corp-seg"></span><span class="div-corp-seg"></span><span class="div-corp-seg"></span>
  </div>
  <p class="div-corp-text">Customer retention held steady at ninety-four percent, while average contract value rose six points against the prior reporting period.</p>
  <div class="div-corp-v2" role="separator">
    <span class="div-corp-chev"></span><span class="div-corp-chev"></span><span class="div-corp-chev"></span>
  </div>
  <p class="div-corp-text">Operating margin improved as infrastructure costs were consolidated onto a single platform, retiring four legacy systems ahead of schedule.</p>
  <div class="div-corp-v3" role="separator">
    <span class="div-corp-track"></span>
    <span class="div-corp-marker"></span>
  </div>
  <p class="div-corp-text">Guidance for the coming year remains measured: the leadership team expects continued momentum, tempered by ongoing macroeconomic uncertainty.</p>
</div>
```

**CSS:**
```css
@keyframes div-corp-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes div-corp-pop  { from { transform: scale(0); } 60% { transform: scale(1.25); } to { transform: scale(1); } }
@keyframes div-corp-slide { from { transform: translateX(-8px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
.div-corp-surface {
  background: #1b2230;
  padding: 36px 40px;
  border-radius: 12px;
}
.div-corp-text {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 14px;
  line-height: 1.78;
  color: #8e98a8;
  margin: 0;
}
/* v1 — filling progress-segment bar */
.div-corp-v1 {
  display: flex;
  gap: 3px;
  height: 6px;
  margin: 30px 0;
}
.div-corp-seg {
  flex: 1;
  border-radius: 2px;
  background: #4f8cff;
  transform-origin: left;
  animation: div-corp-fill 0.4s cubic-bezier(.16,1,.3,1) both;
}
.div-corp-seg:nth-child(1) { animation-delay: 0.1s; }
.div-corp-seg:nth-child(2) { animation-delay: 0.22s; }
.div-corp-seg:nth-child(3) { animation-delay: 0.34s; }
.div-corp-seg:nth-child(4) { animation-delay: 0.46s; background: #3a4356; }
.div-corp-seg:nth-child(5) { animation-delay: 0.58s; background: #3a4356; }
/* v2 — chevron breadcrumb rule */
.div-corp-v2 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 30px 0;
}
.div-corp-v2::before,
.div-corp-v2::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #3a4356;
}
.div-corp-chev {
  width: 7px;
  height: 7px;
  border-top: 2px solid #4f8cff;
  border-right: 2px solid #4f8cff;
  transform: rotate(45deg);
  animation: div-corp-slide 0.4s cubic-bezier(.34,1.56,.64,1) both;
}
.div-corp-chev:nth-child(2) { animation-delay: 0.12s; }
.div-corp-chev:nth-child(3) { animation-delay: 0.24s; }
.div-corp-chev:nth-child(4) { animation-delay: 0.36s; }
/* v3 — KPI tick-marker line */
.div-corp-v3 {
  position: relative;
  height: 14px;
  margin: 30px 0;
}
.div-corp-track {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  border-radius: 2px;
  background:
    linear-gradient(#3a4356, #3a4356) 0 0 / 100% 100%,
    repeating-linear-gradient(to right, #5a6578 0 1px, transparent 1px 25%);
  transform-origin: left;
  animation: div-corp-fill 0.7s cubic-bezier(.16,1,.3,1) both;
}
.div-corp-marker {
  position: absolute;
  top: 50%;
  left: 68%;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #4f8cff;
  border: 2px solid #1b2230;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 3px rgba(79,140,255,0.25);
  animation: div-corp-pop 0.45s cubic-bezier(.34,1.56,.64,1) 0.7s both;
}
@media (prefers-reduced-motion: reduce) {
  .div-corp-seg, .div-corp-chev, .div-corp-track, .div-corp-marker { animation: none; }
}
```

### 18. Sketch Dividers

**Type:** Pure CSS
**Description:** Three hand-drawn breaks — a wobbly marker line, a doodled arrow, and a highlighter swipe — each imperfect by design.

**HTML:**
```html
<div class="div-sketch-surface">
  <p class="div-sketch-text">The notebook had been with her for nine years and four countries — its cover softened, its spine cracked, every page carrying some half-finished thought.</p>
  <div class="div-sketch-v1" role="separator">
    <svg viewBox="0 0 476 14" fill="none" preserveAspectRatio="none" aria-hidden="true">
      <path class="div-sketch-line" d="M2 8 C40 4 78 11 116 7 C154 3 192 10 230 6 C268 3 306 11 344 7 C382 4 420 10 458 7 C465 6 470 8 474 7" stroke="#2b2b2b" stroke-width="2.5" stroke-linecap="round"/>
    </svg>
  </div>
  <p class="div-sketch-text">She wrote in pencil, always — not from caution but from a belief that ideas should remain provisional, should keep the option of being wrong.</p>
  <div class="div-sketch-v2" role="separator">
    <svg viewBox="0 0 476 18" fill="none" aria-hidden="true">
      <path class="div-sketch-arrow" d="M6 9 C90 5 180 13 270 8 C330 5 390 11 446 9" stroke="#2b2b2b" stroke-width="2.5" stroke-linecap="round"/>
      <path class="div-sketch-head" d="M446 9 L434 3 M446 9 L434 15" stroke="#2b2b2b" stroke-width="2.5" stroke-linecap="round"/>
    </svg>
  </div>
  <p class="div-sketch-text">The best pages were the messiest — arrows looping back on themselves, words crossed out and rewritten, a coffee ring framing one stubborn paragraph.</p>
  <div class="div-sketch-v3" role="separator"><span class="div-sketch-swipe">section two</span></div>
  <p class="div-sketch-text">When the notebook was full she did not buy a matching one. The next was different on purpose — a new object should not pretend to be the old.</p>
</div>
```

**CSS:**
```css
@keyframes div-sk-draw  { to { stroke-dashoffset: 0; } }
@keyframes div-sk-swipe { from { background-size: 0% 62%; } to { background-size: 100% 62%; } }
@keyframes div-sk-fade  { from { opacity: 0; } to { opacity: 1; } }
.div-sketch-surface {
  background: #faf8f3;
  padding: 36px 40px;
  border-radius: 12px;
}
.div-sketch-text {
  font-family: "Comic Sans MS", "Segoe Print", "Bradley Hand", cursive;
  font-size: 14px;
  line-height: 1.85;
  color: #3a3a3a;
  margin: 0;
}
/* v1 — wobbly hand-drawn line */
.div-sketch-v1 { margin: 30px 0; }
.div-sketch-v1 svg { display: block; width: 100%; height: 14px; }
.div-sketch-line {
  stroke-dasharray: 500;
  stroke-dashoffset: 500;
  animation: div-sk-draw 0.95s cubic-bezier(.16,1,.3,1) both;
}
/* v2 — doodled arrow */
.div-sketch-v2 { margin: 30px 0; }
.div-sketch-v2 svg { display: block; width: 100%; height: 18px; }
.div-sketch-arrow {
  stroke-dasharray: 480;
  stroke-dashoffset: 480;
  animation: div-sk-draw 0.85s cubic-bezier(.16,1,.3,1) both;
}
.div-sketch-head {
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
  animation: div-sk-draw 0.25s ease 0.82s both;
}
/* v3 — highlighter swipe under a label */
.div-sketch-v3 {
  display: flex;
  justify-content: center;
  margin: 30px 0;
}
.div-sketch-swipe {
  font-family: "Comic Sans MS", "Segoe Print", cursive;
  font-size: 13px;
  color: #3a3a3a;
  padding: 2px 10px;
  background-image: linear-gradient(rgba(255,221,87,0.85), rgba(255,221,87,0.85));
  background-repeat: no-repeat;
  background-position: 0 78%;
  background-size: 0% 62%;
  animation: div-sk-swipe 0.7s cubic-bezier(.16,1,.3,1) 0.2s both;
}
@media (prefers-reduced-motion: reduce) {
  .div-sketch-line, .div-sketch-arrow, .div-sketch-head { animation: none; stroke-dashoffset: 0; }
  .div-sketch-swipe { animation: none; background-size: 100% 62%; }
}
```

---
## 22 CSS Dropdown Menu Designs

URL: https://codefronts.com/navigation/css-dropdown-menus/
Description: 22 hand-coded CSS dropdown menu designs with live demos — slide-down fade, clip-path curtain reveal, 3D perspective flip, elastic bounce spring, glassmorphism float panel, stagger children reveal, mega-menu grid, underline nav fade, native details/summary, checkbox-hack mobile nav, nested multi-level flyout, icon sidebar flyout, split-screen mega-menu, segmented pill nav, color swatch picker, right-click context menu, keyboard-accessible roving tabindex, stagger blur entrance, command palette search, autocomplete suggestion, click-outside close, and multi-select chip. 15 pure CSS + 7 with a tiny vanilla JS snippet — no framework. WCAG 2.2 aria-expanded + aria-haspopup + focus management, prefers-reduced-motion honoured, MIT licensed.
Demo count: 22

### 01. Slide-Down Fade Dropdown

**Type:** Pure CSS
**Description:** Classic navigation dropdown that slides down and fades in on hover using max-height and opacity transitions on a CSS-only nav.

**HTML:**
```html
<div class="dd-01">
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
  <nav class="dd-01__nav">
    <div class="dd-01__item">
      <a href="#" class="dd-01__trigger">Products <span class="dd-01__caret">▾</span></a>
      <ul class="dd-01__panel">
        <li><a href="#"><span class="dd-01__icon">&#9670;</span> Design System</a></li>
        <li><a href="#"><span class="dd-01__icon">&#9670;</span> Component Library</a></li>
        <li><a href="#"><span class="dd-01__icon">&#9670;</span> Icon Pack</a></li>
        <li><a href="#"><span class="dd-01__icon">&#9670;</span> Templates</a></li>
      </ul>
    </div>
    <div class="dd-01__item">
      <a href="#" class="dd-01__trigger">Solutions <span class="dd-01__caret">▾</span></a>
      <ul class="dd-01__panel">
        <li><a href="#"><span class="dd-01__icon">&#9670;</span> For Startups</a></li>
        <li><a href="#"><span class="dd-01__icon">&#9670;</span> For Enterprise</a></li>
        <li><a href="#"><span class="dd-01__icon">&#9670;</span> For Agencies</a></li>
      </ul>
    </div>
    <div class="dd-01__item">
      <a href="#" class="dd-01__trigger">Resources <span class="dd-01__caret">▾</span></a>
      <ul class="dd-01__panel">
        <li><a href="#"><span class="dd-01__icon">&#9670;</span> Documentation</a></li>
        <li><a href="#"><span class="dd-01__icon">&#9670;</span> Blog</a></li>
        <li><a href="#"><span class="dd-01__icon">&#9670;</span> Community</a></li>
        <li><a href="#"><span class="dd-01__icon">&#9670;</span> Changelog</a></li>
      </ul>
    </div>
    <a href="#" class="dd-01__cta">Get Started</a>
  </nav>
</div>
```

**CSS:**
```css
.dd-01, .dd-01 *, .dd-01 *::before, .dd-01 *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
.dd-01 ::selection { background: #6366f1; color: #fff; }

.dd-01 {
  --brand: #6366f1;
  --brand-dark: #4f46e5;
  --surface: #ffffff;
  --border: #e5e7eb;
  --text: #111827;
  --muted: #6b7280;
  --hover-bg: #f5f3ff;
  --shadow: 0 10px 40px rgba(99,102,241,.15);
  font-family: 'Inter', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 340px;
  background: linear-gradient(135deg, #f0f4ff 0%, #faf5ff 100%);
  padding: 40px 20px;
}

.dd-01__nav {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 8px 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
  position: relative;
  z-index: 100;
}

.dd-01__item {
  position: relative;
}
.dd-01__item::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  height: 8px;
  /* hover-bridge: invisible strip below the trigger covering
     the visible gap before the panel. Lives on .__item (not
     the panel, which has overflow:hidden / pointer-events:
     none in its closed state) so the parent :hover stays
     active while the cursor traverses the gap. */
}

.dd-01__trigger {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 14px;
  color: var(--text);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  border-radius: 8px;
  transition: background 0.18s, color 0.18s;
  white-space: nowrap;
}
.dd-01__trigger:hover { background: var(--hover-bg); color: var(--brand); }

.dd-01__caret {
  font-size: 12px;
  display: inline-block;
  transition: transform 0.25s ease;
  color: var(--muted);
  line-height: 1;
  margin-top: 1px;
}
.dd-01__item:hover .dd-01__caret { transform: rotate(180deg); color: var(--brand); }

/* ── dropdown panel ── */
.dd-01__panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 200px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  list-style: none;
  padding: 6px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition:
    max-height 0.35s ease,
    opacity 0.22s ease 0.05s,
    transform 0.28s ease;
}
.dd-01__item:hover .dd-01__panel {
  max-height: 320px;
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.dd-01__panel li a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--text);
  font-size: 13.5px;
  font-weight: 450;
  transition: background 0.15s, color 0.15s;
}
.dd-01__panel li a:hover {
  background: var(--hover-bg);
  color: var(--brand);
}

.dd-01__icon {
  font-size: 7px;
  color: var(--brand);
  opacity: 0.6;
}

.dd-01__cta {
  margin-left: 8px;
  padding: 8px 18px;
  background: var(--brand);
  color: #fff;
  border-radius: 8px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  transition: background 0.18s, transform 0.15s;
}
.dd-01__cta:hover { background: var(--brand-dark); transform: translateY(-1px); }

@media (prefers-reduced-motion: reduce) {
  .dd-01__panel, .dd-01__caret, .dd-01__trigger, .dd-01__cta { transition: none; }
}
```

### 02. Clip-Path Curtain Reveal Dropdown

**Type:** Pure CSS
**Description:** A dramatic curtain-wipe dropdown where the panel is revealed by animating a clip-path polygon from a collapsed top strip to full height.

**HTML:**
```html
<div class="dd-02">
  <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&display=swap" rel="stylesheet">
  <nav class="dd-02__nav">
    <a href="#" class="dd-02__logo">Vertex</a>
    <div class="dd-02__items">
      <div class="dd-02__item">
        <button class="dd-02__trigger">Company ▾</button>
        <div class="dd-02__panel">
          <div class="dd-02__grid">
            <a href="#" class="dd-02__link">
              <span class="dd-02__badge">&#127959;</span>
              <span>About Us</span>
            </a>
            <a href="#" class="dd-02__link">
              <span class="dd-02__badge">&#128101;</span>
              <span>Careers</span>
            </a>
            <a href="#" class="dd-02__link">
              <span class="dd-02__badge">&#128240;</span>
              <span>Press</span>
            </a>
            <a href="#" class="dd-02__link">
              <span class="dd-02__badge">&#128205;</span>
              <span>Locations</span>
            </a>
          </div>
        </div>
      </div>
      <div class="dd-02__item">
        <button class="dd-02__trigger">Platform ▾</button>
        <div class="dd-02__panel">
          <div class="dd-02__grid">
            <a href="#" class="dd-02__link"><span class="dd-02__badge">&#9889;</span><span>Analytics</span></a>
            <a href="#" class="dd-02__link"><span class="dd-02__badge">&#128202;</span><span>Reporting</span></a>
            <a href="#" class="dd-02__link"><span class="dd-02__badge">&#128736;</span><span>Integrations</span></a>
            <a href="#" class="dd-02__link"><span class="dd-02__badge">&#128274;</span><span>Security</span></a>
          </div>
        </div>
      </div>
      <div class="dd-02__item">
        <button class="dd-02__trigger">Developers ▾</button>
        <div class="dd-02__panel">
          <div class="dd-02__grid">
            <a href="#" class="dd-02__link"><span class="dd-02__badge">&#128196;</span><span>API Docs</span></a>
            <a href="#" class="dd-02__link"><span class="dd-02__badge">&#129520;</span><span>SDKs</span></a>
            <a href="#" class="dd-02__link"><span class="dd-02__badge">&#127381;</span><span>Status</span></a>
          </div>
        </div>
      </div>
    </div>
  </nav>
</div>
```

**CSS:**
```css
.dd-02, .dd-02 *, .dd-02 *::before, .dd-02 *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
.dd-02 ::selection { background: #f97316; color: #fff; }

.dd-02 {
  --brand: #f97316;
  --surface: #fff;
  --text: #1c1917;
  --muted: #78716c;
  --border: #e7e5e4;
  --hover: #fff7ed;
  font-family: 'DM Sans', sans-serif;
  min-height: 360px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 32px 20px;
  background: linear-gradient(160deg, #fff7ed 0%, #fef3c7 100%);
}

.dd-02__nav {
  display: flex;
  align-items: center;
  gap: 32px;
  background: var(--surface);
  border-bottom: 2px solid var(--border);
  padding: 14px 28px;
  width: 100%;
  max-width: 720px;
  border-radius: 12px;
  box-shadow: 0 2px 16px rgba(0,0,0,.06);
  position: relative;
  z-index: 100;
}

.dd-02__logo {
  font-size: 18px;
  font-weight: 700;
  color: var(--brand);
  text-decoration: none;
  letter-spacing: -0.5px;
  margin-right: auto;
}

.dd-02__items {
  display: flex;
  gap: 4px;
}

.dd-02__item { position: relative; }
.dd-02__item::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  height: 10px;
  /* hover-bridge: invisible strip below the trigger covering
     the visible gap before the panel. Lives on .__item (not
     the panel, which has overflow:hidden / pointer-events:
     none in its closed state) so the parent :hover stays
     active while the cursor traverses the gap. */
}

.dd-02__trigger {
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  border-radius: 8px;
  transition: background 0.15s, color 0.15s;
  font-family: inherit;
}
.dd-02__trigger:hover, .dd-02__item:hover .dd-02__trigger {
  background: var(--hover);
  color: var(--brand);
}

/* clip-path curtain panel */
.dd-02__panel {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 220px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 16px 48px rgba(0,0,0,.12);
  overflow: hidden;
  clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
  opacity: 0;
  pointer-events: none;
  transition:
    clip-path 0.38s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.2s ease;
}
.dd-02__item:hover .dd-02__panel {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  opacity: 1;
  pointer-events: auto;
}

.dd-02__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 8px;
}

.dd-02__link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--text);
  font-size: 13.5px;
  font-weight: 500;
  transition: background 0.15s;
}
.dd-02__link:hover { background: var(--hover); color: var(--brand); }

.dd-02__badge {
  font-size: 16px;
  line-height: 1;
}

@media (prefers-reduced-motion: reduce) {
  .dd-02__panel { transition: none; }
}
```

### 03. 3D Perspective Flip Dropdown

**Type:** Pure CSS
**Description:** A dropdown panel that folds open from the top edge using rotateX perspective, simulating a physical lid being lifted.

**HTML:**
```html
<div class="dd-03">
  <link href="https://fonts.googleapis.com/css2?family=Syne:wght@500;600;700&display=swap" rel="stylesheet">
  <nav class="dd-03__nav">
    <span class="dd-03__brand">NOVA</span>
    <div class="dd-03__items">
      <div class="dd-03__item">
        <a href="#" class="dd-03__trigger">Work</a>
        <div class="dd-03__perspective">
          <div class="dd-03__panel">
            <a href="#" class="dd-03__link">Case Studies</a>
            <a href="#" class="dd-03__link">Branding</a>
            <a href="#" class="dd-03__link">Motion</a>
            <a href="#" class="dd-03__link">Web Design</a>
          </div>
        </div>
      </div>
      <div class="dd-03__item">
        <a href="#" class="dd-03__trigger">Services</a>
        <div class="dd-03__perspective">
          <div class="dd-03__panel">
            <a href="#" class="dd-03__link">Strategy</a>
            <a href="#" class="dd-03__link">Design</a>
            <a href="#" class="dd-03__link">Development</a>
          </div>
        </div>
      </div>
      <div class="dd-03__item">
        <a href="#" class="dd-03__trigger">Studio</a>
        <div class="dd-03__perspective">
          <div class="dd-03__panel">
            <a href="#" class="dd-03__link">About</a>
            <a href="#" class="dd-03__link">Team</a>
            <a href="#" class="dd-03__link">Culture</a>
          </div>
        </div>
      </div>
    </div>
  </nav>
</div>
```

**CSS:**
```css
.dd-03, .dd-03 *, .dd-03 *::before, .dd-03 *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
.dd-03 ::selection { background: #0f172a; color: #e2e8f0; }

.dd-03 {
  --ink: #0f172a;
  --surface: #f8fafc;
  --panel: #ffffff;
  --accent: #6366f1;
  --muted: #64748b;
  --border: #e2e8f0;
  font-family: 'Syne', sans-serif;
  min-height: 360px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 32px 20px;
  background: linear-gradient(135deg, #f1f5f9 0%, #e0e7ff 100%);
}

.dd-03__nav {
  display: flex;
  align-items: center;
  gap: 40px;
  background: var(--ink);
  padding: 16px 32px;
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(15,23,42,.25);
  position: relative;
  z-index: 100;
}

.dd-03__brand {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 3px;
  margin-right: auto;
}

.dd-03__items {
  display: flex;
  gap: 4px;
}

.dd-03__item { position: relative; }
/* hover-bridge: invisible strip below the trigger covering the visible
   10px gap before the 3D perspective container (which has
   pointer-events:none in its closed state, so its own ::before bridge
   doesn't catch hover). */
.dd-03__item::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  height: 10px;
}

.dd-03__trigger {
  display: block;
  padding: 8px 16px;
  color: rgba(255,255,255,0.75);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.5px;
  border-radius: 8px;
  transition: color 0.15s, background 0.15s;
}
.dd-03__trigger:hover, .dd-03__item:hover .dd-03__trigger {
  color: #fff;
  background: rgba(255,255,255,0.1);
}

/* 3D perspective container */
.dd-03__perspective {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  perspective: 800px;
  transform-style: preserve-3d;
  pointer-events: none;
}
.dd-03__perspective::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: -10px;
  height: 10px;
  /* invisible hover-bridge — keeps :hover active while
     the cursor traverses the visible gap between trigger
     and panel. */
}
.dd-03__item:hover .dd-03__perspective { pointer-events: auto; }

.dd-03__panel {
  background: var(--panel);
  border-radius: 12px;
  border: 1px solid var(--border);
  box-shadow: 0 20px 60px rgba(15,23,42,.2);
  min-width: 180px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  transform: rotateX(-90deg);
  transform-origin: top center;
  opacity: 0;
  transition:
    transform 0.42s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.22s ease;
}
.dd-03__item:hover .dd-03__panel {
  transform: rotateX(0deg);
  opacity: 1;
}

.dd-03__link {
  display: block;
  padding: 10px 14px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
  transition: background 0.15s, color 0.15s;
}
.dd-03__link:hover { background: #eef2ff; color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .dd-03__panel { transition: none; }
}
```

### 04. Elastic Bounce Dropdown

**Type:** Pure CSS
**Description:** A playful dropdown that springs open with an elastic overshoot using a carefully tuned cubic-bezier on scaleY, giving it a bouncy physical feel.

**HTML:**
```html
<div class="dd-04">
  <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
  <nav class="dd-04__nav">
    <span class="dd-04__brand">&#9670; Bounce</span>
    <div class="dd-04__items">
      <div class="dd-04__item">
        <a href="#" class="dd-04__trigger">Explore ▾</a>
        <div class="dd-04__panel">
          <a href="#" class="dd-04__link">&#127775; Featured</a>
          <a href="#" class="dd-04__link">&#128293; Trending</a>
          <a href="#" class="dd-04__link">&#128640; New Arrivals</a>
          <a href="#" class="dd-04__link">&#127942; Top Rated</a>
          <div class="dd-04__divider"></div>
          <a href="#" class="dd-04__link dd-04__link--cta">View All &#8594;</a>
        </div>
      </div>
      <div class="dd-04__item">
        <a href="#" class="dd-04__trigger">Learn ▾</a>
        <div class="dd-04__panel">
          <a href="#" class="dd-04__link">&#128218; Tutorials</a>
          <a href="#" class="dd-04__link">&#127916; Video Courses</a>
          <a href="#" class="dd-04__link">&#127881; Workshops</a>
        </div>
      </div>
      <div class="dd-04__item">
        <a href="#" class="dd-04__trigger">Connect ▾</a>
        <div class="dd-04__panel">
          <a href="#" class="dd-04__link">&#128172; Community</a>
          <a href="#" class="dd-04__link">&#128101; Forum</a>
          <a href="#" class="dd-04__link">&#128236; Newsletter</a>
        </div>
      </div>
    </div>
  </nav>
</div>
```

**CSS:**
```css
.dd-04, .dd-04 *, .dd-04 *::before, .dd-04 *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
.dd-04 ::selection { background: #ec4899; color: #fff; }

.dd-04 {
  --brand: #ec4899;
  --brand-light: #fdf2f8;
  --surface: #fff;
  --text: #1e1b4b;
  --muted: #6b7280;
  --border: #f3f4f6;
  font-family: 'Plus Jakarta Sans', sans-serif;
  min-height: 360px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 32px 20px;
  background: linear-gradient(135deg, #fdf2f8 0%, #fce7f3 50%, #ede9fe 100%);
}

.dd-04__nav {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border-radius: 100px;
  padding: 8px 8px 8px 24px;
  box-shadow: 0 4px 24px rgba(236,72,153,.15), 0 1px 4px rgba(0,0,0,.05);
  position: relative;
  z-index: 100;
}

.dd-04__brand {
  font-size: 16px;
  font-weight: 700;
  color: var(--brand);
  margin-right: 8px;
  letter-spacing: -0.3px;
}

.dd-04__items { display: flex; gap: 2px; }
.dd-04__item { position: relative; }
.dd-04__item::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  height: 10px;
  /* hover-bridge: invisible strip below the trigger covering
     the visible gap before the panel. Lives on .__item (not
     the panel, which has overflow:hidden / pointer-events:
     none in its closed state) so the parent :hover stays
     active while the cursor traverses the gap. */
}

.dd-04__trigger {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 16px;
  border-radius: 100px;
  color: var(--text);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  transition: background 0.15s, color 0.15s;
}
.dd-04__trigger:hover, .dd-04__item:hover .dd-04__trigger {
  background: var(--brand-light);
  color: var(--brand);
}

/* elastic bounce panel */
.dd-04__panel {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) scaleY(0);
  transform-origin: top center;
  min-width: 190px;
  background: var(--surface);
  border: 1px solid rgba(236,72,153,.12);
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(236,72,153,.18), 0 2px 8px rgba(0,0,0,.05);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  pointer-events: none;
  opacity: 0;
  transition:
    transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.18s ease;
}
.dd-04__item:hover .dd-04__panel {
  transform: translateX(-50%) scaleY(1);
  opacity: 1;
  pointer-events: auto;
}

.dd-04__link {
  display: block;
  padding: 10px 14px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--text);
  font-size: 13.5px;
  font-weight: 500;
  transition: background 0.15s, color 0.15s;
}
.dd-04__link:hover { background: var(--brand-light); color: var(--brand); }

.dd-04__link--cta {
  color: var(--brand);
  font-weight: 700;
}

.dd-04__divider {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}

@media (prefers-reduced-motion: reduce) {
  .dd-04__panel { transition: none; }
}
```

### 05. Glassmorphism Float Panel Dropdown

**Type:** Pure CSS
**Description:** A frosted-glass dropdown panel that floats above a vivid gradient background using backdrop-filter blur and translucent borders.

**HTML:**
```html
<div class="dd-05">
  <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&display=swap" rel="stylesheet">
  <div class="dd-05__bg">
    <div class="dd-05__orb dd-05__orb--1"></div>
    <div class="dd-05__orb dd-05__orb--2"></div>
    <div class="dd-05__orb dd-05__orb--3"></div>
    <nav class="dd-05__nav">
      <span class="dd-05__brand">Aura</span>
      <div class="dd-05__items">
        <div class="dd-05__item">
          <a href="#" class="dd-05__trigger">Features ▾</a>
          <div class="dd-05__panel">
            <a href="#" class="dd-05__link">&#127775; AI Insights</a>
            <a href="#" class="dd-05__link">&#128202; Live Dashboard</a>
            <a href="#" class="dd-05__link">&#128274; Zero Trust Security</a>
            <a href="#" class="dd-05__link">&#9889; Real-time Sync</a>
          </div>
        </div>
        <div class="dd-05__item">
          <a href="#" class="dd-05__trigger">Pricing ▾</a>
          <div class="dd-05__panel">
            <a href="#" class="dd-05__link">&#127381; Free Plan</a>
            <a href="#" class="dd-05__link">&#128640; Pro Plan</a>
            <a href="#" class="dd-05__link">&#127959; Enterprise</a>
          </div>
        </div>
        <div class="dd-05__item">
          <a href="#" class="dd-05__trigger">About ▾</a>
          <div class="dd-05__panel">
            <a href="#" class="dd-05__link">&#128101; Our Team</a>
            <a href="#" class="dd-05__link">&#127759; Mission</a>
            <a href="#" class="dd-05__link">&#128240; Press Kit</a>
          </div>
        </div>
      </div>
    </nav>
  </div>
</div>
```

**CSS:**
```css
.dd-05, .dd-05 *, .dd-05 *::before, .dd-05 *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
.dd-05 ::selection { background: rgba(255,255,255,.4); color: #fff; }

.dd-05 {
  font-family: 'Outfit', sans-serif;
  min-height: 380px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.dd-05__bg {
  position: relative;
  width: 100%;
  min-height: 380px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 40%, #f093fb 100%);
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 32px 20px;
}

.dd-05__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.5;
}
.dd-05__orb--1 { width: 300px; height: 300px; background: #f093fb; top: -100px; left: -80px; }
.dd-05__orb--2 { width: 250px; height: 250px; background: #4facfe; bottom: -80px; right: 0; }
.dd-05__orb--3 { width: 200px; height: 200px; background: #f5af19; top: 40%; left: 40%; }

.dd-05__nav {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.15);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 100px;
  padding: 8px 8px 8px 24px;
  box-shadow: 0 8px 32px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.4);
}

.dd-05__brand {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.3px;
  margin-right: 8px;
}

.dd-05__items { display: flex; gap: 2px; }
.dd-05__item { position: relative; }
.dd-05__item::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  height: 12px;
  /* hover-bridge: invisible strip below the trigger covering
     the visible gap before the panel. Lives on .__item (not
     the panel, which has overflow:hidden / pointer-events:
     none in its closed state) so the parent :hover stays
     active while the cursor traverses the gap. */
}

.dd-05__trigger {
  display: block;
  padding: 8px 16px;
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  border-radius: 100px;
  transition: background 0.18s, color 0.18s;
}
.dd-05__trigger:hover, .dd-05__item:hover .dd-05__trigger {
  background: rgba(255,255,255,0.2);
  color: #fff;
}

/* glassmorphism panel */
.dd-05__panel {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(-12px);
  min-width: 210px;
  background: rgba(255,255,255,0.18);
  -webkit-backdrop-filter: blur(24px) saturate(200%);
  backdrop-filter: blur(24px) saturate(200%);
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 16px;
  box-shadow:
    0 16px 48px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.5),
    inset 0 -1px 0 rgba(255,255,255,.1);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.25s ease,
    transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}
.dd-05__item:hover .dd-05__panel {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.dd-05__link {
  display: block;
  padding: 10px 14px;
  border-radius: 10px;
  text-decoration: none;
  color: rgba(255,255,255,0.9);
  font-size: 13.5px;
  font-weight: 500;
  transition: background 0.15s;
}
.dd-05__link:hover { background: rgba(255,255,255,0.2); color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .dd-05__panel { transition: none; }
}
```

### 06. Stagger Children Reveal Dropdown

**Type:** Pure CSS
**Description:** Each menu item cascades in one-by-one with staggered animation-delay values applied via nth-child, creating a flowing sequential reveal.

**HTML:**
```html
<div class="dd-06">
  <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&display=swap" rel="stylesheet">
  <nav class="dd-06__nav">
    <span class="dd-06__brand">&#9670; Flow</span>
    <div class="dd-06__items">
      <div class="dd-06__item">
        <a href="#" class="dd-06__trigger">
          <span>Products</span>
          <span class="dd-06__arrow">▾</span>
        </a>
        <div class="dd-06__panel">
          <a href="#" class="dd-06__link" style="--i:0"><span class="dd-06__dot" style="--c:#6366f1"></span>Design Tokens</a>
          <a href="#" class="dd-06__link" style="--i:1"><span class="dd-06__dot" style="--c:#ec4899"></span>Component Kit</a>
          <a href="#" class="dd-06__link" style="--i:2"><span class="dd-06__dot" style="--c:#f59e0b"></span>Icon Library</a>
          <a href="#" class="dd-06__link" style="--i:3"><span class="dd-06__dot" style="--c:#10b981"></span>Figma Plugin</a>
          <a href="#" class="dd-06__link" style="--i:4"><span class="dd-06__dot" style="--c:#3b82f6"></span>CLI Tools</a>
        </div>
      </div>
      <div class="dd-06__item">
        <a href="#" class="dd-06__trigger">
          <span>Use Cases</span>
          <span class="dd-06__arrow">▾</span>
        </a>
        <div class="dd-06__panel">
          <a href="#" class="dd-06__link" style="--i:0"><span class="dd-06__dot" style="--c:#8b5cf6"></span>Startups</a>
          <a href="#" class="dd-06__link" style="--i:1"><span class="dd-06__dot" style="--c:#06b6d4"></span>Agencies</a>
          <a href="#" class="dd-06__link" style="--i:2"><span class="dd-06__dot" style="--c:#f97316"></span>Freelancers</a>
          <a href="#" class="dd-06__link" style="--i:3"><span class="dd-06__dot" style="--c:#14b8a6"></span>Enterprise</a>
        </div>
      </div>
      <div class="dd-06__item">
        <a href="#" class="dd-06__trigger">
          <span>Company</span>
          <span class="dd-06__arrow">▾</span>
        </a>
        <div class="dd-06__panel">
          <a href="#" class="dd-06__link" style="--i:0"><span class="dd-06__dot" style="--c:#ef4444"></span>About</a>
          <a href="#" class="dd-06__link" style="--i:1"><span class="dd-06__dot" style="--c:#a855f7"></span>Blog</a>
          <a href="#" class="dd-06__link" style="--i:2"><span class="dd-06__dot" style="--c:#0ea5e9"></span>Careers</a>
        </div>
      </div>
    </div>
  </nav>
</div>
```

**CSS:**
```css
.dd-06, .dd-06 *, .dd-06 *::before, .dd-06 *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
.dd-06 ::selection { background: #6366f1; color: #fff; }

.dd-06 {
  --surface: #fff;
  --text: #1e293b;
  --border: #f1f5f9;
  --hover: #f8fafc;
  font-family: 'Nunito', sans-serif;
  min-height: 360px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 32px 20px;
  background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 50%, #f0f9ff 100%);
}

.dd-06__nav {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--surface);
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 10px 10px 10px 20px;
  box-shadow: 0 4px 20px rgba(0,0,0,.06);
  position: relative;
  z-index: 100;
}

.dd-06__brand {
  font-size: 17px;
  font-weight: 800;
  color: #6366f1;
  margin-right: 12px;
  letter-spacing: -0.3px;
}

.dd-06__items { display: flex; gap: 2px; }
.dd-06__item { position: relative; }
.dd-06__item::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  height: 10px;
  /* hover-bridge: invisible strip below the trigger covering
     the visible gap before the panel. Lives on .__item (not
     the panel, which has overflow:hidden / pointer-events:
     none in its closed state) so the parent :hover stays
     active while the cursor traverses the gap. */
}

.dd-06__trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 10px;
  color: var(--text);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  transition: background 0.15s, color 0.15s;
}
.dd-06__trigger:hover, .dd-06__item:hover .dd-06__trigger {
  background: #eef2ff;
  color: #6366f1;
}

.dd-06__arrow {
  font-size: 12px;
  transition: transform 0.22s ease;
  color: #94a3b8;
}
.dd-06__item:hover .dd-06__arrow { transform: rotate(180deg); color: #6366f1; }

/* panel */
.dd-06__panel {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 200px;
  background: var(--surface);
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,.10);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}
.dd-06__item:hover .dd-06__panel {
  opacity: 1;
  pointer-events: auto;
}

/* stagger children */
@keyframes dd-06-slide-in {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: translateX(0); }
}

.dd-06__link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--text);
  font-size: 13.5px;
  font-weight: 600;
  opacity: 0;
  transition: background 0.15s;
}
.dd-06__item:hover .dd-06__link {
  animation: dd-06-slide-in 0.32s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: calc(var(--i) * 60ms);
}
.dd-06__link:hover { background: var(--hover); }

.dd-06__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c, #6366f1);
  flex-shrink: 0;
}

@media (prefers-reduced-motion: reduce) {
  .dd-06__link { animation: none; opacity: 1; }
  .dd-06__panel { transition: none; }
}
```

### 07. Mega Menu Grid Dropdown

**Type:** Pure CSS
**Description:** A full-width mega menu that spans the entire nav bar and organizes links into a multi-column CSS Grid layout with section headings and featured content.

**HTML:**
```html
<div class="dd-07">
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
  <div class="dd-07__wrapper">
    <nav class="dd-07__nav">
      <span class="dd-07__brand">Prism</span>
      <div class="dd-07__items">
        <a href="#" class="dd-07__simple">Home</a>
        <div class="dd-07__item">
          <a href="#" class="dd-07__trigger">Platform ▾</a>
          <div class="dd-07__mega">
            <div class="dd-07__col">
              <p class="dd-07__heading">Core</p>
              <a href="#" class="dd-07__link">&#128202; Analytics</a>
              <a href="#" class="dd-07__link">&#128736; Integrations</a>
              <a href="#" class="dd-07__link">&#127381; Automations</a>
              <a href="#" class="dd-07__link">&#128274; Security</a>
            </div>
            <div class="dd-07__col">
              <p class="dd-07__heading">Growth</p>
              <a href="#" class="dd-07__link">&#128184; Revenue Ops</a>
              <a href="#" class="dd-07__link">&#127775; Marketing Suite</a>
              <a href="#" class="dd-07__link">&#128101; CRM</a>
              <a href="#" class="dd-07__link">&#128172; Support Hub</a>
            </div>
            <div class="dd-07__col">
              <p class="dd-07__heading">Infra</p>
              <a href="#" class="dd-07__link">&#9928; Edge CDN</a>
              <a href="#" class="dd-07__link">&#128190; Storage</a>
              <a href="#" class="dd-07__link">&#9881; Config</a>
              <a href="#" class="dd-07__link">&#128203; Logs</a>
            </div>
            <div class="dd-07__featured">
              <p class="dd-07__heading">What's New</p>
              <div class="dd-07__card">
                <span class="dd-07__new">NEW</span>
                <p class="dd-07__card-title">AI Copilot</p>
                <p class="dd-07__card-desc">Intelligent workflow automation powered by large language models.</p>
                <a href="#" class="dd-07__card-link">Learn more &#8594;</a>
              </div>
            </div>
          </div>
        </div>
        <a href="#" class="dd-07__simple">Pricing</a>
        <a href="#" class="dd-07__simple">Docs</a>
      </div>
      <a href="#" class="dd-07__cta">Sign Up Free</a>
    </nav>
  </div>
</div>
```

**CSS:**
```css
.dd-07, .dd-07 *, .dd-07 *::before, .dd-07 *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
.dd-07 ::selection { background: #0ea5e9; color: #fff; }

.dd-07 {
  --brand: #0ea5e9;
  --surface: #fff;
  --text: #0f172a;
  --muted: #64748b;
  --border: #e2e8f0;
  --hover: #f0f9ff;
  font-family: 'Inter', sans-serif;
  min-height: 380px;
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.dd-07__wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 32px 20px 0;
}

.dd-07__nav {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px 10px 10px 20px;
  box-shadow: 0 2px 16px rgba(0,0,0,.06);
  width: 100%;
  max-width: 780px;
  z-index: 100;
}

.dd-07__brand {
  font-size: 18px;
  font-weight: 700;
  color: var(--brand);
  margin-right: 8px;
  letter-spacing: -0.5px;
}

.dd-07__items {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
}

.dd-07__simple {
  padding: 8px 14px;
  color: var(--text);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  border-radius: 8px;
  transition: background 0.15s, color 0.15s;
}
.dd-07__simple:hover { background: var(--hover); color: var(--brand); }

.dd-07__item { position: relative; }
/* hover-bridge: invisible strip below the trigger covering the 12px gap. */
.dd-07__item::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  height: 12px;
}

.dd-07__trigger {
  display: block;
  padding: 8px 14px;
  color: var(--text);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  border-radius: 8px;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.dd-07__trigger:hover, .dd-07__item:hover .dd-07__trigger {
  background: var(--hover);
  color: var(--brand);
}

/* mega panel */
.dd-07__mega {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  width: 620px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,.12);
  padding: 24px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1.4fr;
  gap: 24px;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.24s ease,
    transform 0.3s cubic-bezier(0.16,1,0.3,1);
}
.dd-07__mega::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: -12px;
  height: 12px;
  /* invisible hover-bridge — keeps :hover active while
     the cursor traverses the visible gap between trigger
     and panel. */
}
.dd-07__item:hover .dd-07__mega {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.dd-07__heading {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.dd-07__col {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dd-07__link {
  display: block;
  padding: 7px 8px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  transition: background 0.15s, color 0.15s;
}
.dd-07__link:hover { background: var(--hover); color: var(--brand); }

.dd-07__featured { display: flex; flex-direction: column; gap: 8px; }

.dd-07__card {
  background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
  border: 1px solid #bae6fd;
  border-radius: 12px;
  padding: 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dd-07__new {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--brand);
  background: #e0f2fe;
  padding: 2px 6px;
  border-radius: 4px;
  align-self: flex-start;
}

.dd-07__card-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}

.dd-07__card-desc {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}

.dd-07__card-link {
  font-size: 12px;
  font-weight: 600;
  color: var(--brand);
  text-decoration: none;
  margin-top: auto;
  transition: gap 0.15s;
}

.dd-07__cta {
  margin-left: auto;
  padding: 8px 18px;
  background: var(--brand);
  color: #fff;
  border-radius: 8px;
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  transition: opacity 0.15s;
}
.dd-07__cta:hover { opacity: 0.88; }

@media (prefers-reduced-motion: reduce) {
  .dd-07__mega { transition: none; }
}
```

### 08. Underline Nav Fade Panel Dropdown

**Type:** Pure CSS
**Description:** An editorial navigation style where a scaleX underline sweeps under the active trigger and a clean panel fades in below with category links.

**HTML:**
```html
<div class="dd-08">
  <link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,wght@0,400;0,600;1,400&family=Inter:wght@400;500&display=swap" rel="stylesheet">
  <nav class="dd-08__nav">
    <a href="#" class="dd-08__brand">The&nbsp;<em>Edit</em></a>
    <div class="dd-08__items">
      <div class="dd-08__item" style="--accent:#d97706">
        <a href="#" class="dd-08__trigger">Collections</a>
        <div class="dd-08__panel">
          <div class="dd-08__col">
            <a href="#" class="dd-08__link">Spring 2025</a>
            <a href="#" class="dd-08__link">Essentials</a>
            <a href="#" class="dd-08__link">Archive</a>
          </div>
          <div class="dd-08__col">
            <a href="#" class="dd-08__link">Collaborations</a>
            <a href="#" class="dd-08__link">Limited Editions</a>
            <a href="#" class="dd-08__link">Lookbook</a>
          </div>
        </div>
      </div>
      <div class="dd-08__item" style="--accent:#059669">
        <a href="#" class="dd-08__trigger">Stories</a>
        <div class="dd-08__panel">
          <div class="dd-08__col">
            <a href="#" class="dd-08__link">Feature Articles</a>
            <a href="#" class="dd-08__link">Interviews</a>
            <a href="#" class="dd-08__link">Profiles</a>
          </div>
          <div class="dd-08__col">
            <a href="#" class="dd-08__link">Photography</a>
            <a href="#" class="dd-08__link">Film</a>
          </div>
        </div>
      </div>
      <div class="dd-08__item" style="--accent:#7c3aed">
        <a href="#" class="dd-08__trigger">Studio</a>
        <div class="dd-08__panel">
          <div class="dd-08__col">
            <a href="#" class="dd-08__link">About Us</a>
            <a href="#" class="dd-08__link">Process</a>
            <a href="#" class="dd-08__link">Careers</a>
          </div>
        </div>
      </div>
    </div>
  </nav>
</div>
```

**CSS:**
```css
.dd-08, .dd-08 *, .dd-08 *::before, .dd-08 *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
.dd-08 ::selection { background: #1e293b; color: #f8fafc; }

.dd-08 {
  --text: #1e293b;
  --muted: #64748b;
  --surface: #fff;
  --border: #e2e8f0;
  font-family: 'Inter', sans-serif;
  min-height: 360px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 32px 20px;
  background: #fafaf8;
}

.dd-08__nav {
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--surface);
  border-bottom: 2px solid var(--border);
  width: 100%;
  max-width: 680px;
  padding: 0 24px;
  position: relative;
  z-index: 100;
}

.dd-08__brand {
  font-family: 'Fraunces', serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  padding: 18px 0;
  margin-right: 32px;
  letter-spacing: -0.5px;
}
.dd-08__brand em { font-style: italic; color: #d97706; }

.dd-08__items { display: flex; gap: 0; }
.dd-08__item { position: relative; }
.dd-08__item::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  height: 2px;
  /* hover-bridge: invisible strip below the trigger covering
     the visible gap before the panel. Lives on .__item (not
     the panel, which has overflow:hidden / pointer-events:
     none in its closed state) so the parent :hover stays
     active while the cursor traverses the gap. */
}

.dd-08__trigger {
  display: block;
  padding: 18px 16px;
  color: var(--muted);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  position: relative;
  transition: color 0.18s;
}
/* scaleX underline */
.dd-08__trigger::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 16px;
  right: 16px;
  height: 2px;
  background: var(--accent, var(--text));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.24s ease-out;
  border-radius: 1px;
}
.dd-08__item:hover .dd-08__trigger {
  color: var(--text);
}
.dd-08__item:hover .dd-08__trigger::after { transform: scaleX(1); }

/* panel */
.dd-08__panel {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 12px 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,.08);
  padding: 20px 24px;
  display: flex;
  gap: 32px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.22s ease, visibility 0s linear 0.22s;
}
.dd-08__item:hover .dd-08__panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.22s ease, visibility 0s linear 0s;
}

.dd-08__col {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 140px;
}

.dd-08__link {
  display: block;
  padding: 6px 0;
  color: var(--muted);
  text-decoration: none;
  font-family: 'Fraunces', serif;
  font-size: 15px;
  font-weight: 400;
  transition: color 0.15s;
  border-bottom: 1px solid transparent;
}
.dd-08__link:hover { color: var(--text); border-bottom-color: var(--accent, var(--text)); }

@media (prefers-reduced-motion: reduce) {
  .dd-08__panel, .dd-08__trigger::after { transition: none; }
}
```

### 09. Details Summary Native Dropdown

**Type:** Pure CSS
**Description:** A fully CSS-only dropdown built on the native HTML details/summary element, styled with custom markers and animated with the [open] attribute selector.

**HTML:**
```html
<div class="dd-09">
  <link href="https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,600;1,400&family=Source+Sans+3:wght@400;500;600&display=swap" rel="stylesheet">
  <div class="dd-09__layout">
    <nav class="dd-09__nav">
      <details class="dd-09__details">
        <summary class="dd-09__summary">
          <span class="dd-09__label">Discover</span>
          <span class="dd-09__arrow"></span>
        </summary>
        <div class="dd-09__panel">
          <a href="#" class="dd-09__link">Destinations</a>
          <a href="#" class="dd-09__link">Experiences</a>
          <a href="#" class="dd-09__link">Collections</a>
          <a href="#" class="dd-09__link">Guides</a>
        </div>
      </details>

      <details class="dd-09__details">
        <summary class="dd-09__summary">
          <span class="dd-09__label">Plan</span>
          <span class="dd-09__arrow"></span>
        </summary>
        <div class="dd-09__panel">
          <a href="#" class="dd-09__link">Trip Builder</a>
          <a href="#" class="dd-09__link">Booking</a>
          <a href="#" class="dd-09__link">Itineraries</a>
        </div>
      </details>

      <details class="dd-09__details">
        <summary class="dd-09__summary">
          <span class="dd-09__label">Journal</span>
          <span class="dd-09__arrow"></span>
        </summary>
        <div class="dd-09__panel">
          <a href="#" class="dd-09__link">Stories</a>
          <a href="#" class="dd-09__link">Photography</a>
          <a href="#" class="dd-09__link">Reviews</a>
        </div>
      </details>
    </nav>
    <p class="dd-09__hint">Click any nav item to toggle</p>
  </div>
</div>
```

**CSS:**
```css
.dd-09, .dd-09 *, .dd-09 *::before, .dd-09 *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
.dd-09 ::selection { background: #92400e; color: #fffbeb; }

.dd-09 {
  --brand: #b45309;
  --surface: #fffbeb;
  --panel: #fff;
  --text: #1c1917;
  --muted: #78716c;
  --border: #e7e5e4;
  --hover: #fef3c7;
  font-family: 'Source Sans 3', sans-serif;
  min-height: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, #fffbeb 0%, #fef3c7 100%);
  padding: 40px 20px;
}

.dd-09__layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
  max-width: 640px;
}

.dd-09__nav {
  display: flex;
  gap: 12px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px;
  box-shadow: 0 4px 16px rgba(0,0,0,.06);
  width: 100%;
  justify-content: center;
}

.dd-09__details {
  position: relative;
  flex: 1;
  max-width: 180px;
}

/* hide default marker */
.dd-09__details > summary { list-style: none; }
.dd-09__details > summary::-webkit-details-marker { display: none; }
.dd-09__details > summary::marker { display: none; }

.dd-09__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-radius: 8px;
  cursor: pointer;
  user-select: none;
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  transition: background 0.15s, color 0.15s;
  gap: 8px;
}
.dd-09__summary:hover { background: var(--hover); color: var(--brand); }
.dd-09__details[open] .dd-09__summary {
  background: var(--hover);
  color: var(--brand);
}

.dd-09__label { font-family: 'Lora', serif; font-size: 15px; }

.dd-09__arrow {
  width: 16px;
  height: 16px;
  position: relative;
  flex-shrink: 0;
  overflow: hidden;
}
.dd-09__arrow::before, .dd-09__arrow::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 7px;
  height: 1.5px;
  background: currentColor;
  transition: transform 0.22s ease;
}
.dd-09__arrow::before { left: 3px;  transform: translateY(-50%) rotate(45deg);  transform-origin: center; }
.dd-09__arrow::after  { right: 3px; transform: translateY(-50%) rotate(-45deg); transform-origin: center; }
.dd-09__details[open] .dd-09__arrow::before { transform: translateY(-50%) rotate(-45deg); }
.dd-09__details[open] .dd-09__arrow::after  { transform: translateY(-50%) rotate(45deg); }

.dd-09__panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: 100%;
  min-width: 160px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.10);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.34s ease, opacity 0.22s ease;
  z-index: 10;
}
.dd-09__details[open] .dd-09__panel {
  max-height: 400px;
  opacity: 1;
}

.dd-09__link {
  display: block;
  padding: 9px 12px;
  border-radius: 7px;
  text-decoration: none;
  color: var(--text);
  font-size: 13.5px;
  font-weight: 500;
  font-family: 'Lora', serif;
  transition: background 0.15s, color 0.15s;
}
.dd-09__link:hover { background: var(--hover); color: var(--brand); }

.dd-09__hint {
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
}

@media (prefers-reduced-motion: reduce) {
  .dd-09__panel, .dd-09__arrow::before, .dd-09__arrow::after,
  .dd-09__summary { transition: none; }
}
```

### 10. Checkbox Hack Mobile Nav Dropdown

**Type:** Pure CSS
**Description:** A pure CSS hamburger-to-X mobile nav using the checkbox hack — an invisible input toggled by a label drives the entire menu open/close state.

**HTML:**
```html
<div class="dd-10">
  <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
  <input type="checkbox" id="dd-10-toggle" class="dd-10__input">
  <header class="dd-10__header">
    <a href="#" class="dd-10__brand">Forge</a>
    <label for="dd-10-toggle" class="dd-10__hamburger" aria-label="Toggle menu">
      <span></span>
      <span></span>
      <span></span>
    </label>
  </header>
  <nav class="dd-10__menu" role="navigation" aria-label="Main navigation">
    <a href="#" class="dd-10__link">Work</a>
    <a href="#" class="dd-10__link">Services</a>
    <a href="#" class="dd-10__link">About</a>
    <a href="#" class="dd-10__link">Journal</a>
    <a href="#" class="dd-10__link dd-10__link--cta">Start a Project</a>
  </nav>
</div>
```

**CSS:**
```css
.dd-10, .dd-10 *, .dd-10 *::before, .dd-10 *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
.dd-10 ::selection { background: #111827; color: #f9fafb; }

.dd-10 {
  --ink: #111827;
  --surface: #fff;
  --accent: #f59e0b;
  --border: #f3f4f6;
  font-family: 'Space Grotesk', sans-serif;
  min-height: 380px;
  display: flex;
  flex-direction: column;
  background: linear-gradient(160deg, #fff 0%, #f9fafb 100%);
  max-width: 440px;
  margin: 0 auto;
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0,0,0,.08);
}

/* hidden checkbox */
.dd-10__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.dd-10__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  position: relative;
  z-index: 10;
}

.dd-10__brand {
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -0.5px;
}

.dd-10__hamburger {
  width: 40px;
  height: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.15s;
  padding: 8px;
}
.dd-10__hamburger:hover { background: #f9fafb; }

.dd-10__hamburger span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.2s ease;
  transform-origin: center;
}

/* checked: hamburger → X */
.dd-10__input:checked ~ .dd-10__header .dd-10__hamburger span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.dd-10__input:checked ~ .dd-10__header .dd-10__hamburger span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.dd-10__input:checked ~ .dd-10__header .dd-10__hamburger span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* menu panel */
.dd-10__menu {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition:
    max-height 0.38s ease,
    opacity 0.25s ease;
}
.dd-10__input:checked ~ .dd-10__menu {
  max-height: 400px;
  opacity: 1;
}

.dd-10__link {
  display: block;
  padding: 18px 24px;
  color: var(--ink);
  text-decoration: none;
  font-size: 22px;
  font-weight: 700;
  border-bottom: 1px solid var(--border);
  letter-spacing: -0.5px;
  transition: color 0.15s, padding-left 0.2s ease;
}
.dd-10__link:hover { color: var(--accent); padding-left: 32px; }

.dd-10__link--cta {
  color: var(--accent);
  font-size: 15px;
  letter-spacing: 0;
  font-weight: 600;
  border-bottom: none;
  padding: 20px 24px;
}
.dd-10__link--cta:hover { color: #d97706; padding-left: 32px; }

@media (prefers-reduced-motion: reduce) {
  .dd-10__menu, .dd-10__hamburger span, .dd-10__link { transition: none; }
}
```

### 11. Nested Multi-Level Dropdown

**Type:** Pure CSS
**Description:** A three-level deep nested dropdown where each submenu flies out to the right of its parent item, triggered purely by CSS hover on sibling selectors.

**HTML:**
```html
<div class="dd-11">
  <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&display=swap" rel="stylesheet">
  <nav class="dd-11__nav">
    <ul class="dd-11__list dd-11__list--root">
      <li class="dd-11__item">
        <a href="#" class="dd-11__link">Home</a>
      </li>
      <li class="dd-11__item dd-11__item--has-sub">
        <a href="#" class="dd-11__link">Products</a>
        <ul class="dd-11__sub">
          <li class="dd-11__item dd-11__item--has-sub">
            <a href="#" class="dd-11__link">Software</a>
            <ul class="dd-11__sub">
              <li class="dd-11__item"><a href="#" class="dd-11__link">Web App</a></li>
              <li class="dd-11__item"><a href="#" class="dd-11__link">Desktop</a></li>
              <li class="dd-11__item"><a href="#" class="dd-11__link">Mobile</a></li>
            </ul>
          </li>
          <li class="dd-11__item dd-11__item--has-sub">
            <a href="#" class="dd-11__link">Hardware</a>
            <ul class="dd-11__sub">
              <li class="dd-11__item"><a href="#" class="dd-11__link">Devices</a></li>
              <li class="dd-11__item"><a href="#" class="dd-11__link">Accessories</a></li>
            </ul>
          </li>
          <li class="dd-11__item"><a href="#" class="dd-11__link">Services</a></li>
        </ul>
      </li>
      <li class="dd-11__item dd-11__item--has-sub">
        <a href="#" class="dd-11__link">Company</a>
        <ul class="dd-11__sub">
          <li class="dd-11__item"><a href="#" class="dd-11__link">About</a></li>
          <li class="dd-11__item"><a href="#" class="dd-11__link">Careers</a></li>
          <li class="dd-11__item dd-11__item--has-sub">
            <a href="#" class="dd-11__link">Press</a>
            <ul class="dd-11__sub">
              <li class="dd-11__item"><a href="#" class="dd-11__link">News</a></li>
              <li class="dd-11__item"><a href="#" class="dd-11__link">Media Kit</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li class="dd-11__item"><a href="#" class="dd-11__link">Contact</a></li>
    </ul>
  </nav>
</div>
```

**CSS:**
```css
.dd-11, .dd-11 *, .dd-11 *::before, .dd-11 *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
.dd-11 ::selection { background: #1d4ed8; color: #eff6ff; }

.dd-11 {
  --brand: #1d4ed8;
  --surface: #fff;
  --text: #1e293b;
  --muted: #64748b;
  --border: #e2e8f0;
  --hover: #eff6ff;
  font-family: 'Manrope', sans-serif;
  min-height: 380px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 32px 20px;
  background: linear-gradient(135deg, #eff6ff 0%, #e0e7ff 100%);
}

.dd-11__nav {
  position: relative;
  z-index: 100;
}

.dd-11__list {
  list-style: none;
  display: flex;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 6px;
  gap: 2px;
  box-shadow: 0 4px 20px rgba(0,0,0,.07);
}

.dd-11__list--root > .dd-11__item { position: relative; }

/* submenus */
.dd-11__sub {
  list-style: none;
  position: absolute;
  top: 0;
  left: 100%;
  min-width: 170px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,.12);
  padding: 5px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  opacity: 0;
  pointer-events: none;
  transform: translateX(4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 10;
}
/* Hover bridges — must be on the .dd-11__item (the :hover target),
   NOT on .dd-11__sub because the sub has pointer-events:none at rest
   so its ::before is unreachable. Nested items extend their right
   edge by an invisible strip covering the gap to the submenu. */
.dd-11__item { position: relative; }
.dd-11__item:not(.dd-11__list--root > .dd-11__item)::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: 100%;
  width: 10px;
}
/* Root-level items drop submenus DOWNWARD, so bridge goes BELOW. */
.dd-11__list--root > .dd-11__item::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  height: 8px;
}

/* first level drops down */
.dd-11__list--root > .dd-11__item > .dd-11__sub {
  top: calc(100% + 8px);
  left: 0;
  transform: translateY(-4px);
}
.dd-11__list--root > .dd-11__item:hover > .dd-11__sub {
  transform: translateY(0);
}

.dd-11__item:hover > .dd-11__sub {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}
.dd-11__list--root > .dd-11__item:hover > .dd-11__sub {
  opacity: 1;
  pointer-events: auto;
}

.dd-11__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 14px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--text);
  font-size: 13.5px;
  font-weight: 500;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
  gap: 8px;
}
.dd-11__link:hover { background: var(--hover); color: var(--brand); }

/* nested indicator arrow */
.dd-11__item--has-sub > .dd-11__link::after {
  content: '›';
  font-size: 14px;
  font-weight: 400;
  color: var(--muted);
  margin-left: auto;
}
/* root level items use down arrow */
.dd-11__list--root > .dd-11__item--has-sub > .dd-11__link::after {
  content: '⌄';
  font-size: 11px;
}

.dd-11__list--root .dd-11__link {
  font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
  .dd-11__sub { transition: none; }
}
```

### 12. Icon Sidebar Flyout Dropdown

**Type:** Pure CSS
**Description:** A compact icon-only rail navigation where hovering each icon causes a labeled flyout panel to slide in from the right — a common pattern for collapsed sidebars.

**HTML:**
```html
<div class="dd-12">
  <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&display=swap" rel="stylesheet">
  <div class="dd-12__app">
    <aside class="dd-12__rail">
      <div class="dd-12__brand-icon">&#9670;</div>

      <div class="dd-12__item">
        <div class="dd-12__icon-wrap">
          <span class="dd-12__icon">&#127968;</span>
        </div>
        <div class="dd-12__flyout">
          <p class="dd-12__fly-title">Dashboard</p>
          <div class="dd-12__fly-divider"></div>
          <a href="#" class="dd-12__fly-link">Overview</a>
          <a href="#" class="dd-12__fly-link">Analytics</a>
          <a href="#" class="dd-12__fly-link">Reports</a>
        </div>
      </div>

      <div class="dd-12__item">
        <div class="dd-12__icon-wrap">
          <span class="dd-12__icon">&#128203;</span>
        </div>
        <div class="dd-12__flyout">
          <p class="dd-12__fly-title">Projects</p>
          <div class="dd-12__fly-divider"></div>
          <a href="#" class="dd-12__fly-link">All Projects</a>
          <a href="#" class="dd-12__fly-link">Active</a>
          <a href="#" class="dd-12__fly-link">Archived</a>
        </div>
      </div>

      <div class="dd-12__item">
        <div class="dd-12__icon-wrap">
          <span class="dd-12__icon">&#128172;</span>
        </div>
        <div class="dd-12__flyout">
          <p class="dd-12__fly-title">Messages</p>
          <div class="dd-12__fly-divider"></div>
          <a href="#" class="dd-12__fly-link">Inbox</a>
          <a href="#" class="dd-12__fly-link">Sent</a>
          <a href="#" class="dd-12__fly-link">Drafts</a>
        </div>
      </div>

      <div class="dd-12__item">
        <div class="dd-12__icon-wrap">
          <span class="dd-12__icon">&#9881;</span>
        </div>
        <div class="dd-12__flyout">
          <p class="dd-12__fly-title">Settings</p>
          <div class="dd-12__fly-divider"></div>
          <a href="#" class="dd-12__fly-link">Profile</a>
          <a href="#" class="dd-12__fly-link">Security</a>
          <a href="#" class="dd-12__fly-link">Billing</a>
        </div>
      </div>
    </aside>
    <main class="dd-12__main">
      <p class="dd-12__hint">Hover the icons &#8592;</p>
    </main>
  </div>
</div>
```

**CSS:**
```css
.dd-12, .dd-12 *, .dd-12 *::before, .dd-12 *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
.dd-12 ::selection { background: #7c3aed; color: #ede9fe; }

.dd-12 {
  --accent: #7c3aed;
  --surface: #fff;
  --rail-bg: #fafafa;
  --text: #1e1b4b;
  --muted: #6b7280;
  --border: #ede9fe;
  --hover-icon: #f5f3ff;
  font-family: 'IBM Plex Sans', sans-serif;
  min-height: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
  padding: 40px 20px;
}

.dd-12__app {
  display: flex;
  height: 300px;
  width: 100%;
  max-width: 560px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: visible;
  box-shadow: 0 8px 32px rgba(124,58,237,.12);
}

.dd-12__rail {
  width: 60px;
  background: var(--rail-bg);
  border-right: 1px solid var(--border);
  border-radius: 16px 0 0 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px 0;
  gap: 4px;
  flex-shrink: 0;
  position: relative;
  z-index: 10;
  overflow: visible;
}

.dd-12__brand-icon {
  font-size: 18px;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 16px;
}

.dd-12__item {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
}
/* hover-bridge: invisible strip on the right of the icon-rail item
   covering the 8px gap to the flyout panel. Lives on .__item (not
   .__flyout, which has pointer-events:none at rest). */
.dd-12__item::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: 100%;
  width: 8px;
}

.dd-12__icon-wrap {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s;
}
.dd-12__item:hover .dd-12__icon-wrap {
  background: var(--hover-icon);
}

.dd-12__icon { font-size: 18px; }

/* flyout panel */
.dd-12__flyout {
  position: absolute;
  left: calc(100% + 8px);
  top: -4px;
  min-width: 170px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(124,58,237,.15);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-8px);
  transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.16,1,0.3,1);
  z-index: 20;
}
.dd-12__item:hover .dd-12__flyout {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}
.dd-12__fly-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  padding: 0 4px 4px;
}

.dd-12__fly-divider {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}

.dd-12__fly-link {
  display: block;
  padding: 7px 10px;
  border-radius: 7px;
  text-decoration: none;
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  transition: background 0.12s, color 0.12s;
}
.dd-12__fly-link:hover { background: var(--hover-icon); color: var(--accent); }

.dd-12__main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dd-12__hint {
  color: var(--muted);
  font-size: 13px;
  font-style: italic;
}

@media (prefers-reduced-motion: reduce) {
  .dd-12__flyout { transition: none; }
}
```

### 13. Split-Screen Mega Menu Dropdown

**Type:** Pure CSS
**Description:** A full-width two-column mega menu with a rich image panel on the left and categorized links on the right, revealing with a smooth fade-up transition.

**HTML:**
```html
<div class="dd-13">
  <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
  <div class="dd-13__wrap">
    <nav class="dd-13__nav">
      <a href="#" class="dd-13__brand">Meridian</a>
      <div class="dd-13__items">
        <div class="dd-13__item">
          <a href="#" class="dd-13__trigger">Collections ▾</a>
          <div class="dd-13__mega">
            <div class="dd-13__visual">
              <p class="dd-13__vis-label">Season Highlight</p>
              <p class="dd-13__vis-title">Summer Capsule 2025</p>
              <p class="dd-13__vis-sub">Refined essentials for the modern wardrobe.</p>
              <a href="#" class="dd-13__vis-cta">Explore Now &#8594;</a>
            </div>
            <div class="dd-13__links">
              <div class="dd-13__group">
                <p class="dd-13__group-heading">Women</p>
                <a href="#" class="dd-13__link">Ready to Wear</a>
                <a href="#" class="dd-13__link">Accessories</a>
                <a href="#" class="dd-13__link">Footwear</a>
              </div>
              <div class="dd-13__group">
                <p class="dd-13__group-heading">Men</p>
                <a href="#" class="dd-13__link">Tailoring</a>
                <a href="#" class="dd-13__link">Casual</a>
                <a href="#" class="dd-13__link">Sport</a>
              </div>
            </div>
          </div>
        </div>
        <div class="dd-13__item">
          <a href="#" class="dd-13__trigger">Stories ▾</a>
          <div class="dd-13__mega">
            <div class="dd-13__visual" style="background: linear-gradient(145deg, #065f46 0%, #047857 50%, #10b981 100%)">
              <p class="dd-13__vis-label">From the Journal</p>
              <p class="dd-13__vis-title">The Art of Slow Fashion</p>
              <p class="dd-13__vis-sub">Conscious design for the discerning eye.</p>
              <a href="#" class="dd-13__vis-cta">Read Story &#8594;</a>
            </div>
            <div class="dd-13__links">
              <div class="dd-13__group">
                <p class="dd-13__group-heading">Editorials</p>
                <a href="#" class="dd-13__link">Photography</a>
                <a href="#" class="dd-13__link">Film</a>
                <a href="#" class="dd-13__link">Interviews</a>
              </div>
              <div class="dd-13__group">
                <p class="dd-13__group-heading">Craft</p>
                <a href="#" class="dd-13__link">Materials</a>
                <a href="#" class="dd-13__link">Atelier</a>
              </div>
            </div>
          </div>
        </div>
        <a href="#" class="dd-13__plain">World</a>
        <a href="#" class="dd-13__plain">Services</a>
      </div>
    </nav>
  </div>
</div>
```

**CSS:**
```css
.dd-13, .dd-13 *, .dd-13 *::before, .dd-13 *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
.dd-13 ::selection { background: #1e293b; color: #f8fafc; }

.dd-13 {
  --text: #1e293b;
  --muted: #64748b;
  --surface: #fff;
  --border: #e2e8f0;
  font-family: 'Inter', sans-serif;
  min-height: 400px;
  background: #f8f7f4;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.dd-13__wrap {
  width: 100%;
  padding: 32px 20px 0;
  display: flex;
  justify-content: center;
}

.dd-13__nav {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  width: 100%;
  max-width: 720px;
  padding: 0 20px;
  position: relative;
  z-index: 100;
  border-radius: 12px 12px 0 0;
  box-shadow: 0 2px 12px rgba(0,0,0,.05);
}

.dd-13__brand {
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
  letter-spacing: -0.3px;
  padding: 16px 0;
  margin-right: 24px;
}

.dd-13__items {
  display: flex;
  align-items: center;
  gap: 0;
  margin-left: auto;
}

.dd-13__item { position: relative; }

.dd-13__trigger, .dd-13__plain {
  display: block;
  padding: 18px 14px;
  color: var(--muted);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.03em;
  transition: color 0.15s;
}
.dd-13__trigger:hover, .dd-13__item:hover .dd-13__trigger,
.dd-13__plain:hover { color: var(--text); }

/* mega panel */
.dd-13__mega {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-10px);
  width: 580px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 16px 16px;
  box-shadow: 0 24px 60px rgba(0,0,0,.13);
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.26s ease,
    transform 0.32s cubic-bezier(0.16,1,0.3,1);
}
.dd-13__item:hover .dd-13__mega {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.dd-13__visual {
  background: linear-gradient(145deg, #1e293b 0%, #334155 50%, #475569 100%);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 220px;
}

.dd-13__vis-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
}

.dd-13__vis-title {
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  color: #fff;
  font-weight: 700;
  line-height: 1.25;
}

.dd-13__vis-sub {
  font-size: 12.5px;
  color: rgba(255,255,255,0.65);
  line-height: 1.5;
  margin-top: 4px;
  flex: 1;
}

.dd-13__vis-cta {
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
  margin-top: 8px;
  transition: color 0.15s;
}
.dd-13__vis-cta:hover { color: #fff; }

.dd-13__links {
  padding: 24px 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.dd-13__group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dd-13__group-heading {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}

.dd-13__link {
  display: block;
  padding: 5px 0;
  color: var(--text);
  text-decoration: none;
  font-size: 13px;
  font-weight: 450;
  transition: color 0.15s;
}
.dd-13__link:hover { color: #0ea5e9; }

@media (prefers-reduced-motion: reduce) {
  .dd-13__mega { transition: none; }
}
```

### 14. Segmented Pill Nav Dropdown

**Type:** Pure CSS
**Description:** A pill-shaped navigation bar with a sliding background highlight that follows focus between segments, each revealing its own dropdown panel below.

**HTML:**
```html
<div class="dd-14">
  <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
  <div class="dd-14__scene">
    <nav class="dd-14__rail">
      <div class="dd-14__seg">
        <button class="dd-14__pill">&#127968; Home</button>
        <div class="dd-14__drop">
          <a href="#" class="dd-14__link">Dashboard</a>
          <a href="#" class="dd-14__link">Overview</a>
          <a href="#" class="dd-14__link">Widgets</a>
        </div>
      </div>
      <div class="dd-14__seg">
        <button class="dd-14__pill">&#128202; Analytics</button>
        <div class="dd-14__drop">
          <a href="#" class="dd-14__link">Traffic</a>
          <a href="#" class="dd-14__link">Conversions</a>
          <a href="#" class="dd-14__link">Funnels</a>
          <a href="#" class="dd-14__link">Cohorts</a>
        </div>
      </div>
      <div class="dd-14__seg">
        <button class="dd-14__pill">&#128101; Audience</button>
        <div class="dd-14__drop">
          <a href="#" class="dd-14__link">Segments</a>
          <a href="#" class="dd-14__link">Profiles</a>
          <a href="#" class="dd-14__link">Behaviour</a>
        </div>
      </div>
      <div class="dd-14__seg">
        <button class="dd-14__pill">&#9881; Settings</button>
        <div class="dd-14__drop">
          <a href="#" class="dd-14__link">General</a>
          <a href="#" class="dd-14__link">Integrations</a>
          <a href="#" class="dd-14__link">Billing</a>
        </div>
      </div>
    </nav>
  </div>
</div>
```

**CSS:**
```css
.dd-14, .dd-14 *, .dd-14 *::before, .dd-14 *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
.dd-14 ::selection { background: #0f172a; color: #f8fafc; }

.dd-14 {
  --trough: #f1f5f9;
  --pill-bg: #fff;
  --text: #0f172a;
  --muted: #64748b;
  --accent: #6366f1;
  --border: #e2e8f0;
  --shadow: 0 2px 8px rgba(0,0,0,.08);
  font-family: 'DM Sans', sans-serif;
  min-height: 360px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 36px 20px;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}

.dd-14__scene {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
  position: relative;
  z-index: 100;
}

.dd-14__rail {
  display: flex;
  gap: 4px;
  background: var(--trough);
  border-radius: 100px;
  padding: 4px;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.08);
}

.dd-14__seg { position: relative; }
/* hover-bridge: invisible strip below the pill covering the 10px gap. */
.dd-14__seg::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  height: 10px;
}

.dd-14__pill {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  border: none;
  border-radius: 100px;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--muted);
  transition: background 0.18s, color 0.18s, box-shadow 0.18s;
  white-space: nowrap;
  position: relative;
}
.dd-14__pill:hover,
.dd-14__seg:hover .dd-14__pill {
  background: var(--pill-bg);
  color: var(--text);
  box-shadow: var(--shadow);
}

/* dropdown */
.dd-14__drop {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 160px;
  background: var(--pill-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 12px 36px rgba(0,0,0,.12);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.26s cubic-bezier(0.16,1,0.3,1);
}
.dd-14__seg:hover .dd-14__drop {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
/* Hover bridge — keeps :hover active while cursor crosses the 10px
   visible gap between the pill trigger and the dropdown panel. */
.dd-14__drop::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: -10px;
  height: 10px;
}

.dd-14__link {
  display: block;
  padding: 9px 13px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--text);
  font-size: 13.5px;
  font-weight: 500;
  transition: background 0.14s, color 0.14s;
}
.dd-14__link:hover { background: #eef2ff; color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .dd-14__drop, .dd-14__pill { transition: none; }
}
```

### 15. Color Swatch Picker Dropdown

**Type:** Pure CSS
**Description:** A color palette dropdown that reveals a grid of color swatches on hover, with a tooltip label appearing on individual swatch hover using CSS only.

**HTML:**
```html
<div class="dd-15">
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
  <div class="dd-15__scene">
    <div class="dd-15__control">
      <div class="dd-15__item">
        <button class="dd-15__trigger" style="--current:#6366f1">
          <span class="dd-15__swatch-dot"></span>
          <span>Color</span>
          <span class="dd-15__chevron">▾</span>
        </button>
        <div class="dd-15__panel">
          <p class="dd-15__panel-title">Choose a Color</p>
          <div class="dd-15__grid">
            <div class="dd-15__sw" style="--sw:#ef4444" data-name="Red"></div>
            <div class="dd-15__sw" style="--sw:#f97316" data-name="Orange"></div>
            <div class="dd-15__sw" style="--sw:#f59e0b" data-name="Amber"></div>
            <div class="dd-15__sw" style="--sw:#eab308" data-name="Yellow"></div>
            <div class="dd-15__sw" style="--sw:#84cc16" data-name="Lime"></div>
            <div class="dd-15__sw" style="--sw:#22c55e" data-name="Green"></div>
            <div class="dd-15__sw" style="--sw:#10b981" data-name="Emerald"></div>
            <div class="dd-15__sw" style="--sw:#14b8a6" data-name="Teal"></div>
            <div class="dd-15__sw" style="--sw:#06b6d4" data-name="Cyan"></div>
            <div class="dd-15__sw" style="--sw:#0ea5e9" data-name="Sky"></div>
            <div class="dd-15__sw" style="--sw:#3b82f6" data-name="Blue"></div>
            <div class="dd-15__sw" style="--sw:#6366f1" data-name="Indigo"></div>
            <div class="dd-15__sw" style="--sw:#8b5cf6" data-name="Violet"></div>
            <div class="dd-15__sw" style="--sw:#a855f7" data-name="Purple"></div>
            <div class="dd-15__sw" style="--sw:#d946ef" data-name="Fuchsia"></div>
            <div class="dd-15__sw" style="--sw:#ec4899" data-name="Pink"></div>
            <div class="dd-15__sw" style="--sw:#f43f5e" data-name="Rose"></div>
            <div class="dd-15__sw" style="--sw:#64748b" data-name="Slate"></div>
          </div>
        </div>
      </div>
    </div>
    <p class="dd-15__label">Hover the button to pick a palette color</p>
  </div>
</div>
```

**CSS:**
```css
.dd-15, .dd-15 *, .dd-15 *::before, .dd-15 *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
.dd-15 ::selection { background: #6366f1; color: #fff; }

.dd-15 {
  --surface: #fff;
  --border: #e2e8f0;
  --text: #0f172a;
  --muted: #64748b;
  font-family: 'Inter', sans-serif;
  min-height: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #fafafa 0%, #f4f4f5 100%);
  padding: 40px 20px;
}

.dd-15__scene {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.dd-15__control { position: relative; z-index: 100; }
.dd-15__item { position: relative; }
.dd-15__item::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  height: 10px;
  /* hover-bridge: invisible strip below the trigger covering
     the visible gap before the panel. Lives on .__item (not
     the panel, which has overflow:hidden / pointer-events:
     none in its closed state) so the parent :hover stays
     active while the cursor traverses the gap. */
}

.dd-15__trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  box-shadow: 0 1px 4px rgba(0,0,0,.05);
  transition: box-shadow 0.15s, border-color 0.15s;
}
.dd-15__trigger:hover, .dd-15__item:hover .dd-15__trigger {
  box-shadow: 0 4px 16px rgba(0,0,0,.1);
  border-color: #c7d2fe;
}

.dd-15__swatch-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--current, #6366f1);
  border: 2px solid rgba(255,255,255,0.8);
  box-shadow: 0 0 0 1px rgba(0,0,0,.12);
  flex-shrink: 0;
}

.dd-15__chevron {
  font-size: 11px;
  color: var(--muted);
  transition: transform 0.2s;
}
.dd-15__item:hover .dd-15__chevron { transform: rotate(180deg); }

/* panel */
.dd-15__panel {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  width: 220px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,.12);
  padding: 14px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.28s cubic-bezier(0.16,1,0.3,1);
}
.dd-15__item:hover .dd-15__panel {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.dd-15__panel-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 10px;
}

.dd-15__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
}

.dd-15__sw {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: var(--sw, #ccc);
  cursor: pointer;
  position: relative;
  transition: transform 0.15s, box-shadow 0.15s;
  box-shadow: 0 1px 3px rgba(0,0,0,.15);
}
.dd-15__sw:hover {
  transform: scale(1.22);
  box-shadow: 0 4px 10px rgba(0,0,0,.2);
  z-index: 2;
}

/* CSS tooltip via attr() */
.dd-15__sw::after {
  content: attr(data-name);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: #0f172a;
  color: #fff;
  font-size: 10px;
  font-weight: 500;
  padding: 3px 7px;
  border-radius: 5px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease 0.1s;
}
.dd-15__sw:hover::after { opacity: 1; }

.dd-15__label {
  font-size: 12.5px;
  color: var(--muted);
  font-style: italic;
}

@media (prefers-reduced-motion: reduce) {
  .dd-15__panel, .dd-15__sw, .dd-15__sw::after,
  .dd-15__chevron { transition: none; }
}
```

### 16. Context Menu Right-Click Dropdown

**Type:** CSS + JS
**Description:** A custom right-click context menu that appears at the exact cursor position on contextmenu event, with smooth CSS entrance animation and click-outside dismissal.

**HTML:**
```html
<div class="dd-16">
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
  <div class="dd-16__zone" id="dd-16-zone">
    <div class="dd-16__hint">
      <span class="dd-16__hint-icon">&#128432;</span>
      <p>Right-click anywhere in this area</p>
    </div>
    <div class="dd-16__file" id="dd-16-file">
      <span>&#128196;</span>
      <span>document.pdf</span>
    </div>
  </div>
  <ul class="dd-16__menu" id="dd-16-menu" role="menu">
    <li class="dd-16__item"><span class="dd-16__icon">&#128196;</span> Open</li>
    <li class="dd-16__item"><span class="dd-16__icon">&#128065;</span> Preview</li>
    <li class="dd-16__sep"></li>
    <li class="dd-16__item"><span class="dd-16__icon">&#128461;</span> Copy</li>
    <li class="dd-16__item"><span class="dd-16__icon">&#9999;</span> Rename</li>
    <li class="dd-16__item"><span class="dd-16__icon">&#128279;</span> Copy Link</li>
    <li class="dd-16__sep"></li>
    <li class="dd-16__item dd-16__item--danger"><span class="dd-16__icon">&#128465;</span> Delete</li>
  </ul>
</div>
```

**CSS:**
```css
.dd-16, .dd-16 *, .dd-16 *::before, .dd-16 *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
.dd-16 ::selection { background: #0ea5e9; color: #fff; }

.dd-16 {
  --surface: #fff;
  --border: #e5e7eb;
  --text: #111827;
  --muted: #6b7280;
  --danger: #ef4444;
  --accent: #0ea5e9;
  --hover: #f0f9ff;
  font-family: 'Inter', sans-serif;
  min-height: 360px;
  position: relative;
  background: linear-gradient(135deg, #f8fafc 0%, #e0f2fe 100%);
  user-select: none;
}

.dd-16__zone {
  width: 100%;
  height: 360px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  cursor: context-menu;
  border: 2px dashed #bae6fd;
  border-radius: 16px;
}

.dd-16__hint {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 500;
}
.dd-16__hint-icon { font-size: 28px; }

.dd-16__file {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 18px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  transition: box-shadow 0.15s;
}
.dd-16__file:hover { box-shadow: 0 4px 16px rgba(0,0,0,.1); }

/* context menu */
.dd-16__menu {
  position: fixed;
  min-width: 190px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0,0,0,.16), 0 2px 8px rgba(0,0,0,.08);
  padding: 6px;
  list-style: none;
  z-index: 9999;
  opacity: 0;
  transform: scale(0.92);
  transform-origin: top left;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.22s cubic-bezier(0.16,1,0.3,1);
}
.dd-16__menu.is-open {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

.dd-16__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 7px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.dd-16__item:hover { background: var(--hover); color: var(--accent); }
.dd-16__item--danger { color: var(--danger); }
.dd-16__item--danger:hover { background: #fef2f2; color: var(--danger); }

.dd-16__icon { font-size: 14px; width: 18px; text-align: center; }

.dd-16__sep {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}

@media (prefers-reduced-motion: reduce) {
  .dd-16__menu { transition: none; }
}
```

**JS:**
```js
(function() {
  const zone = document.getElementById('dd-16-zone');
  const menu = document.getElementById('dd-16-menu');
  if (!zone || !menu) return;

  function openMenu(x, y) {
    menu.classList.add('is-open');
    // position with viewport clamping
    const mw = menu.offsetWidth || 200;
    const mh = menu.offsetHeight || 240;
    const cx = Math.min(x, window.innerWidth - mw - 8);
    const cy = Math.min(y, window.innerHeight - mh - 8);
    menu.style.left = cx + 'px';
    menu.style.top  = cy + 'px';
  }

  function closeMenu() {
    menu.classList.remove('is-open');
  }

  zone.addEventListener('contextmenu', function(e) {
    e.preventDefault();
    closeMenu();
    // small delay so scale origin resets
    requestAnimationFrame(() => openMenu(e.clientX, e.clientY));
  });

  document.addEventListener('click', function(e) {
    if (!menu.contains(e.target)) closeMenu();
  });

  document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') closeMenu();
  });

  // item click closes menu
  menu.querySelectorAll('.dd-16__item').forEach(function(item) {
    item.addEventListener('click', closeMenu);
  });
})();
```

### 17. Keyboard Accessible Dropdown

**Type:** CSS + JS
**Description:** A fully ARIA-compliant dropdown with keyboard navigation: arrow keys move focus between items, Escape closes the menu, and Enter activates links.

**HTML:**
```html
<div class="dd-17">
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
  <div class="dd-17__scene">
    <div class="dd-17__hint-row">
      <span class="dd-17__badge">&#9654; Keyboard</span>
      <span class="dd-17__tip">Try: Enter, &#8593;&#8595;, Escape</span>
    </div>
    <div class="dd-17__wrap">
      <button
        class="dd-17__trigger"
        id="dd-17-btn"
        aria-haspopup="true"
        aria-expanded="false"
        aria-controls="dd-17-menu"
      >
        <span>My Account</span>
        <span class="dd-17__avatar">JD</span>
      </button>
      <ul
        class="dd-17__menu"
        id="dd-17-menu"
        role="menu"
        aria-labelledby="dd-17-btn"
        aria-hidden="true"
      >
        <li role="none"><a href="#" class="dd-17__item" role="menuitem" tabindex="-1">&#128100; Profile</a></li>
        <li role="none"><a href="#" class="dd-17__item" role="menuitem" tabindex="-1">&#9881; Settings</a></li>
        <li role="none"><a href="#" class="dd-17__item" role="menuitem" tabindex="-1">&#128178; Billing</a></li>
        <li role="none"><a href="#" class="dd-17__item" role="menuitem" tabindex="-1">&#127381; Upgrade</a></li>
        <li class="dd-17__sep" role="separator"></li>
        <li role="none"><a href="#" class="dd-17__item dd-17__item--danger" role="menuitem" tabindex="-1">&#128275; Sign Out</a></li>
      </ul>
    </div>
    <p class="dd-17__a11y-note">Fully ARIA-compliant — works with screen readers</p>
  </div>
</div>
```

**CSS:**
```css
.dd-17, .dd-17 *, .dd-17 *::before, .dd-17 *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
.dd-17 ::selection { background: #059669; color: #ecfdf5; }

.dd-17 {
  --brand: #059669;
  --surface: #fff;
  --text: #111827;
  --muted: #6b7280;
  --border: #e5e7eb;
  --hover: #f0fdf4;
  --danger: #ef4444;
  font-family: 'Inter', sans-serif;
  min-height: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
  padding: 40px 20px;
}

.dd-17__scene {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  position: relative;
  z-index: 100;
}

.dd-17__hint-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.dd-17__badge {
  background: #d1fae5;
  color: var(--brand);
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 100px;
  letter-spacing: 0.04em;
}

.dd-17__tip {
  font-size: 12.5px;
  color: var(--muted);
}

.dd-17__wrap { position: relative; }

.dd-17__trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px 10px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  box-shadow: 0 1px 4px rgba(0,0,0,.05);
  transition: box-shadow 0.15s, border-color 0.15s;
}
.dd-17__trigger:hover { box-shadow: 0 4px 16px rgba(0,0,0,.10); border-color: #6ee7b7; }
.dd-17__trigger:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
.dd-17__trigger[aria-expanded="true"] {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(5,150,105,.12);
}

.dd-17__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.04em;
}

.dd-17__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 200px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0,0,0,.12);
  padding: 6px;
  list-style: none;
  opacity: 0;
  transform: translateY(-8px) scale(0.97);
  transform-origin: top right;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.24s cubic-bezier(0.16,1,0.3,1);
}
.dd-17__menu[aria-hidden="false"] {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.dd-17__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--text);
  font-size: 13.5px;
  font-weight: 500;
  transition: background 0.12s, color 0.12s;
}
.dd-17__item:hover,
.dd-17__item:focus-visible {
  background: var(--hover);
  color: var(--brand);
  outline: none;
}
.dd-17__item--danger { color: var(--danger); }
.dd-17__item--danger:hover,
.dd-17__item--danger:focus-visible { background: #fef2f2; color: var(--danger); }

.dd-17__sep { height: 1px; background: var(--border); margin: 4px 0; }

.dd-17__a11y-note {
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
}

@media (prefers-reduced-motion: reduce) {
  .dd-17__menu { transition: none; }
}
```

**JS:**
```js
(function() {
  const btn  = document.getElementById('dd-17-btn');
  const menu = document.getElementById('dd-17-menu');
  if (!btn || !menu) return;

  const getItems = () =>
    Array.from(menu.querySelectorAll('[role="menuitem"]'));

  function openMenu() {
    btn.setAttribute('aria-expanded', 'true');
    menu.setAttribute('aria-hidden', 'false');
    const items = getItems();
    if (items.length) items[0].focus();
  }

  function closeMenu(returnFocus) {
    btn.setAttribute('aria-expanded', 'false');
    menu.setAttribute('aria-hidden', 'true');
    if (returnFocus) btn.focus();
  }

  function isOpen() {
    return btn.getAttribute('aria-expanded') === 'true';
  }

  btn.addEventListener('click', function() {
    isOpen() ? closeMenu(false) : openMenu();
  });

  menu.addEventListener('keydown', function(e) {
    const items = getItems();
    const idx   = items.indexOf(document.activeElement);

    if (e.key === 'ArrowDown') {
      e.preventDefault();
      items[(idx + 1) % items.length].focus();
    } else if (e.key === 'ArrowUp') {
      e.preventDefault();
      items[(idx - 1 + items.length) % items.length].focus();
    } else if (e.key === 'Home') {
      e.preventDefault();
      items[0].focus();
    } else if (e.key === 'End') {
      e.preventDefault();
      items[items.length - 1].focus();
    } else if (e.key === 'Escape') {
      closeMenu(true);
    } else if (e.key === 'Tab') {
      closeMenu(false);
    }
  });

  btn.addEventListener('keydown', function(e) {
    if ((e.key === 'Enter' || e.key === ' ') && !isOpen()) {
      e.preventDefault();
      openMenu();
    } else if (e.key === 'Escape' && isOpen()) {
      closeMenu(false);
    }
  });

  document.addEventListener('mousedown', function(e) {
    if (!btn.contains(e.target) && !menu.contains(e.target)) {
      closeMenu(false);
    }
  });
})();
```

### 18. Stagger Blur Entrance Dropdown

**Type:** CSS + JS
**Description:** A JS-toggled dropdown where each menu item blurs in from a frosted state, with per-item transition delays applied programmatically for a cinematic cascade.

**HTML:**
```html
<div class="dd-18">
  <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
  <div class="dd-18__scene">
    <nav class="dd-18__nav">
      <span class="dd-18__brand">Specter</span>
      <div class="dd-18__group" id="dd-18-group">
        <button class="dd-18__trigger" id="dd-18-btn" aria-expanded="false">
          Menu
          <span class="dd-18__dot" id="dd-18-dot"></span>
        </button>
        <div class="dd-18__panel" id="dd-18-panel">
          <a href="#" class="dd-18__item">&#128640; Launch</a>
          <a href="#" class="dd-18__item">&#127775; Discover</a>
          <a href="#" class="dd-18__item">&#128202; Metrics</a>
          <a href="#" class="dd-18__item">&#128172; Community</a>
          <a href="#" class="dd-18__item">&#128274; Security</a>
          <div class="dd-18__sep"></div>
          <a href="#" class="dd-18__item dd-18__item--em">&#9889; Upgrade</a>
        </div>
      </div>
    </nav>
  </div>
</div>
```

**CSS:**
```css
.dd-18, .dd-18 *, .dd-18 *::before, .dd-18 *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
.dd-18 ::selection { background: #7c3aed; color: #ede9fe; }

.dd-18 {
  --brand: #7c3aed;
  --surface: #fff;
  --text: #18181b;
  --muted: #71717a;
  --border: #e4e4e7;
  --hover: #f5f3ff;
  font-family: 'Space Grotesk', sans-serif;
  min-height: 380px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 36px 20px;
  background: linear-gradient(135deg, #faf5ff 0%, #ede9fe 100%);
}

.dd-18__scene {
  width: 100%;
  max-width: 480px;
  position: relative;
  z-index: 100;
}

.dd-18__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px 16px;
  box-shadow: 0 4px 20px rgba(124,58,237,.1);
}

.dd-18__brand {
  font-size: 18px;
  font-weight: 700;
  color: var(--brand);
  letter-spacing: -0.5px;
}

.dd-18__group { position: relative; }

.dd-18__trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  background: var(--brand);
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  transition: opacity 0.15s;
}
.dd-18__trigger:hover { opacity: 0.9; }
.dd-18__trigger[aria-expanded="true"] { opacity: 0.85; }

.dd-18__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #a78bfa;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.dd-18__trigger[aria-expanded="true"] .dd-18__dot {
  transform: scale(1.5);
  background: #c4b5fd;
}

.dd-18__panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 200px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(124,58,237,.18);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.dd-18__panel.is-open {
  opacity: 1;
  pointer-events: auto;
}

.dd-18__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 13px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--text);
  font-size: 13.5px;
  font-weight: 500;
  opacity: 0;
  filter: blur(6px);
  transform: translateY(6px);
  transition: opacity 0.3s ease, filter 0.3s ease, transform 0.3s ease, background 0.12s;
}
.dd-18__panel.is-open .dd-18__item {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}
.dd-18__item:hover { background: var(--hover); }
.dd-18__item--em { color: var(--brand); font-weight: 700; }
.dd-18__sep { height: 1px; background: var(--border); margin: 4px 0; }

@media (prefers-reduced-motion: reduce) {
  .dd-18__item, .dd-18__panel { transition: none; filter: none; }
  .dd-18__panel.is-open .dd-18__item { opacity: 1; filter: none; transform: none; }
}
```

**JS:**
```js
(function() {
  var btn   = document.getElementById('dd-18-btn');
  var panel = document.getElementById('dd-18-panel');
  if (!btn || !panel) return;
  var items = Array.from(panel.querySelectorAll('.dd-18__item'));

  items.forEach(function(el, i) { el.dataset.delay = i * 55; });

  function openPanel() {
    panel.classList.add('is-open');
    btn.setAttribute('aria-expanded', 'true');
    items.forEach(function(el) { el.style.transitionDelay = el.dataset.delay + 'ms'; });
  }

  function closePanel() {
    items.forEach(function(el) { el.style.transitionDelay = '0ms'; });
    panel.classList.remove('is-open');
    btn.setAttribute('aria-expanded', 'false');
  }

  btn.addEventListener('click', function(e) {
    e.stopPropagation();
    panel.classList.contains('is-open') ? closePanel() : openPanel();
  });
  document.addEventListener('click', function(e) {
    if (!panel.contains(e.target) && e.target !== btn) closePanel();
  });
  document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') closePanel();
  });
})();
```

### 19. Command Palette Search Dropdown

**Type:** CSS + JS
**Description:** A Spotlight/Linear-style command palette that filters a list of commands in real time as you type, with keyboard navigation and highlighted match text.

**HTML:**
```html
<div class="dd-19">
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
  <div class="dd-19__scene">
    <button class="dd-19__open-btn" id="dd-19-open">
      <span>&#128269;</span> Search commands
      <kbd class="dd-19__kbd">&#8984;K</kbd>
    </button>
    <div class="dd-19__backdrop" id="dd-19-backdrop"></div>
    <div class="dd-19__palette" id="dd-19-palette" role="dialog" aria-modal="true" aria-label="Command palette">
      <div class="dd-19__search-row">
        <span class="dd-19__search-icon">&#128269;</span>
        <input class="dd-19__input" id="dd-19-input" type="text" placeholder="Search commands…" autocomplete="off">
        <button class="dd-19__esc-btn" id="dd-19-close">ESC</button>
      </div>
      <ul class="dd-19__list" id="dd-19-list" role="listbox">
        <li class="dd-19__group-label">Quick Actions</li>
        <li class="dd-19__cmd" data-label="New Document" role="option"><span class="dd-19__ci">&#128196;</span><span class="dd-19__ct">New Document</span><kbd class="dd-19__kbd">&#8984;N</kbd></li>
        <li class="dd-19__cmd" data-label="Open File" role="option"><span class="dd-19__ci">&#128193;</span><span class="dd-19__ct">Open File</span><kbd class="dd-19__kbd">&#8984;O</kbd></li>
        <li class="dd-19__cmd" data-label="Save Project" role="option"><span class="dd-19__ci">&#128190;</span><span class="dd-19__ct">Save Project</span><kbd class="dd-19__kbd">&#8984;S</kbd></li>
        <li class="dd-19__group-label">Navigation</li>
        <li class="dd-19__cmd" data-label="Go to Dashboard" role="option"><span class="dd-19__ci">&#127968;</span><span class="dd-19__ct">Go to Dashboard</span></li>
        <li class="dd-19__cmd" data-label="Go to Settings" role="option"><span class="dd-19__ci">&#9881;</span><span class="dd-19__ct">Go to Settings</span></li>
        <li class="dd-19__cmd" data-label="Go to Analytics" role="option"><span class="dd-19__ci">&#128202;</span><span class="dd-19__ct">Go to Analytics</span></li>
        <li class="dd-19__group-label">Theme</li>
        <li class="dd-19__cmd" data-label="Toggle Dark Mode" role="option"><span class="dd-19__ci">&#127769;</span><span class="dd-19__ct">Toggle Dark Mode</span></li>
        <li class="dd-19__cmd" data-label="Toggle Compact View" role="option"><span class="dd-19__ci">&#128262;</span><span class="dd-19__ct">Toggle Compact View</span></li>
      </ul>
      <div class="dd-19__footer">
        <span>&#8593;&#8595; navigate</span>
        <span>&#9166; select</span>
        <span>esc close</span>
      </div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.dd-19, .dd-19 *, .dd-19 *::before, .dd-19 *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
.dd-19 ::selection { background: #6366f1; color: #fff; }

.dd-19 {
  --brand: #6366f1;
  --surface: #fff;
  --text: #111827;
  --muted: #6b7280;
  --border: #e5e7eb;
  --hover: #f5f3ff;
  font-family: 'Inter', sans-serif;
  min-height: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
  padding: 40px 20px;
  position: relative;
}

.dd-19__scene {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
  max-width: 520px;
  position: relative;
}

.dd-19__open-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  transition: box-shadow 0.15s, border-color 0.15s;
}
.dd-19__open-btn:hover { box-shadow: 0 4px 16px rgba(99,102,241,.15); border-color: #c7d2fe; color: var(--text); }

.dd-19__kbd {
  background: #f3f4f6;
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 2px 6px;
  font-size: 11px;
  font-family: inherit;
  color: var(--muted);
  margin-left: 4px;
}

.dd-19__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(2px);
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.dd-19__backdrop.is-open { opacity: 1; pointer-events: auto; }

.dd-19__palette {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.95);
  width: min(520px, 90vw);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 24px 80px rgba(0,0,0,.25);
  z-index: 201;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.24s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}
.dd-19__palette.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

.dd-19__search-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}

.dd-19__search-icon { font-size: 16px; color: var(--muted); flex-shrink: 0; }

.dd-19__input {
  flex: 1;
  border: none;
  outline: none;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  background: transparent;
}
.dd-19__input::placeholder { color: var(--muted); font-weight: 400; }

.dd-19__esc-btn {
  background: #f3f4f6;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  color: var(--muted);
  font-family: inherit;
  transition: background 0.12s;
}
.dd-19__esc-btn:hover { background: #e5e7eb; }

.dd-19__list {
  list-style: none;
  max-height: 260px;
  overflow-y: auto;
  padding: 6px;
}

.dd-19__group-label {
  padding: 8px 12px 4px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.dd-19__cmd {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.1s;
}
.dd-19__cmd:hover, .dd-19__cmd.is-focused { background: var(--hover); }

.dd-19__ci { font-size: 15px; width: 20px; text-align: center; flex-shrink: 0; }
.dd-19__ct { font-size: 14px; font-weight: 500; color: var(--text); flex: 1; }
.dd-19__ct mark { background: #c7d2fe; color: var(--brand); border-radius: 2px; font-weight: 700; }

.dd-19__footer {
  display: flex;
  gap: 16px;
  padding: 10px 16px;
  border-top: 1px solid var(--border);
  background: #fafafa;
  font-size: 11px;
  color: var(--muted);
  font-weight: 500;
}

@media (prefers-reduced-motion: reduce) {
  .dd-19__palette, .dd-19__backdrop { transition: none; }
}
```

**JS:**
```js
(function() {
  var openBtn  = document.getElementById('dd-19-open');
  var closeBtn = document.getElementById('dd-19-close');
  var palette  = document.getElementById('dd-19-palette');
  var backdrop = document.getElementById('dd-19-backdrop');
  var input    = document.getElementById('dd-19-input');
  var list     = document.getElementById('dd-19-list');
  if (!openBtn || !palette) return;

  function getCmds() {
    return Array.from(list.querySelectorAll('.dd-19__cmd')).filter(function(el) {
      return el.style.display !== 'none';
    });
  }

  function openPalette() {
    palette.classList.add('is-open');
    backdrop.classList.add('is-open');
    setTimeout(function() { input.focus(); }, 50);
  }

  function closePalette() {
    palette.classList.remove('is-open');
    backdrop.classList.remove('is-open');
    input.value = '';
    filterCmds('');
  }

  function filterCmds(query) {
    var q = query.toLowerCase().trim();
    list.querySelectorAll('.dd-19__cmd').forEach(function(cmd) {
      var label = cmd.dataset.label || '';
      var ct = cmd.querySelector('.dd-19__ct');
      cmd.classList.remove('is-focused');
      if (!q) { cmd.style.display = ''; if (ct) ct.textContent = label; return; }
      if (label.toLowerCase().includes(q)) {
        cmd.style.display = '';
        if (ct) {
          var idx = label.toLowerCase().indexOf(q);
          ct.innerHTML = label.slice(0, idx) + '<mark>' + label.slice(idx, idx + q.length) + '</mark>' + label.slice(idx + q.length);
        }
      } else { cmd.style.display = 'none'; }
    });
    var visible = getCmds();
    if (visible.length) visible[0].classList.add('is-focused');
  }

  openBtn.addEventListener('click', openPalette);
  closeBtn.addEventListener('click', closePalette);
  backdrop.addEventListener('click', closePalette);
  input.addEventListener('input', function() { filterCmds(input.value); });

  document.addEventListener('keydown', function(e) {
    if (!palette.classList.contains('is-open')) return;
    var cmds = getCmds();
    var focused = list.querySelector('.dd-19__cmd.is-focused');
    var idx = focused ? cmds.indexOf(focused) : -1;
    if (e.key === 'Escape') { closePalette(); }
    else if (e.key === 'ArrowDown') {
      e.preventDefault();
      if (cmds.length) { cmds.forEach(function(c) { c.classList.remove('is-focused'); }); cmds[(idx + 1) % cmds.length].classList.add('is-focused'); }
    } else if (e.key === 'ArrowUp') {
      e.preventDefault();
      if (cmds.length) { cmds.forEach(function(c) { c.classList.remove('is-focused'); }); cmds[(idx - 1 + cmds.length) % cmds.length].classList.add('is-focused'); }
    } else if (e.key === 'Enter' && focused) { closePalette(); }
  });
})();
```

### 20. Autocomplete Suggestion Dropdown

**Type:** CSS + JS
**Description:** A live autocomplete input that filters a dataset and shows a suggestion dropdown as you type, with keyboard selection and highlighted match prefix.

**HTML:**
```html
<div class="dd-20">
  <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&display=swap" rel="stylesheet">
  <div class="dd-20__card">
    <p class="dd-20__title">&#127758; Where to?</p>
    <p class="dd-20__sub">Search for a destination</p>
    <div class="dd-20__field" id="dd-20-field">
      <span class="dd-20__field-icon">&#128269;</span>
      <input class="dd-20__input" id="dd-20-input" type="text" placeholder="Type a city or country…" autocomplete="off">
      <button class="dd-20__clear" id="dd-20-clear" aria-label="Clear">&#215;</button>
    </div>
    <ul class="dd-20__list" id="dd-20-list" role="listbox"></ul>
    <p class="dd-20__hint" id="dd-20-hint">Try: "Tok", "Par", "Bar"</p>
  </div>
</div>
```

**CSS:**
```css
.dd-20, .dd-20 *, .dd-20 *::before, .dd-20 *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
.dd-20 ::selection { background: #0ea5e9; color: #fff; }

.dd-20 {
  --brand: #0ea5e9;
  --surface: #fff;
  --text: #0f172a;
  --muted: #64748b;
  --border: #e2e8f0;
  --hover: #f0f9ff;
  font-family: 'DM Sans', sans-serif;
  min-height: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, #f0f9ff 0%, #bae6fd 100%);
  padding: 40px 20px;
}

.dd-20__card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 28px 24px;
  width: 100%;
  max-width: 380px;
  box-shadow: 0 8px 40px rgba(14,165,233,.15);
  position: relative;
}

.dd-20__title { font-size: 20px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.dd-20__sub { font-size: 13px; color: var(--muted); margin-bottom: 18px; }

.dd-20__field {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 2px solid var(--border);
  border-radius: 12px;
  padding: 10px 14px;
  transition: border-color 0.18s, box-shadow 0.18s;
}
.dd-20__field:focus-within {
  border-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(14,165,233,.12);
}

.dd-20__field-icon { font-size: 16px; color: var(--muted); flex-shrink: 0; }

.dd-20__input {
  flex: 1;
  border: none;
  outline: none;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  background: transparent;
}
.dd-20__input::placeholder { color: #94a3b8; font-weight: 400; }

.dd-20__clear {
  background: none;
  border: none;
  font-size: 18px;
  color: var(--muted);
  cursor: pointer;
  line-height: 1;
  opacity: 0;
  transition: opacity 0.15s;
}
.dd-20__clear.is-visible { opacity: 1; }
.dd-20__clear:hover { color: var(--text); }

.dd-20__list {
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  margin-top: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,.10);
  transition: max-height 0.3s ease, opacity 0.2s ease;
}
.dd-20__list.is-open { max-height: 280px; opacity: 1; overflow-y: auto; }

.dd-20__list li {
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: background 0.12s;
}
.dd-20__list li:hover, .dd-20__list li.is-active { background: var(--hover); color: var(--brand); }
.dd-20__list li strong { color: var(--brand); font-weight: 700; }

.dd-20__hint { margin-top: 12px; font-size: 12px; color: var(--muted); text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .dd-20__list, .dd-20__field { transition: none; }
}
```

**JS:**
```js
(function() {
  var data = [
    'Tokyo','Paris','Barcelona','Kyoto','Nairobi','Madrid',
    'New York','Rio de Janeiro','Sydney','Rome','Oslo','Cairo',
    'Toronto','Mexico City','Lisbon','Amsterdam','Doha','Shanghai',
    'Dublin','Bergen','Porto','Nicosia','Singapore','Berlin'
  ];
  var flags = ['&#127470;&#127481;','&#127467;&#127479;','&#127463;&#127462;','&#127472;&#127486;','&#127472;&#127466;','&#127466;&#127480;',
    '&#127482;&#127480;','&#127463;&#127479;','&#127462;&#127482;','&#127470;&#127481;','&#127475;&#127476;','&#127466;&#127468;',
    '&#127464;&#127462;','&#127474;&#127485;','&#127477;&#127481;','&#127475;&#127473;','&#127478;&#127462;','&#127464;&#127475;',
    '&#127470;&#127466;','&#127475;&#127476;','&#127477;&#127481;','&#127464;&#127486;','&#127480;&#127468;','&#127465;&#127466;'];

  var input    = document.getElementById('dd-20-input');
  var list     = document.getElementById('dd-20-list');
  var clearBtn = document.getElementById('dd-20-clear');
  var hint     = document.getElementById('dd-20-hint');
  if (!input || !list) return;
  var activeIdx = -1;

  function getItems() { return Array.from(list.querySelectorAll('li[data-idx]')); }

  function render(query) {
    var q = query.trim().toLowerCase();
    list.innerHTML = '';
    activeIdx = -1;
    if (!q) {
      list.classList.remove('is-open');
      hint && (hint.style.display = '');
      clearBtn.classList.remove('is-visible');
      return;
    }
    clearBtn.classList.add('is-visible');
    if (hint) hint.style.display = 'none';
    var matched = data.filter(function(d) { return d.toLowerCase().includes(q); });
    if (!matched.length) {
      var li = document.createElement('li');
      li.style.color = '#94a3b8'; li.style.cursor = 'default';
      li.textContent = 'No destinations found';
      list.appendChild(li);
    } else {
      matched.slice(0, 8).forEach(function(city) {
        var li = document.createElement('li');
        var origIdx = data.indexOf(city);
        var flag = flags[origIdx] || '&#127758;';
        var lc = city.toLowerCase();
        var start = lc.indexOf(q);
        var highlighted = start > -1
          ? city.slice(0, start) + '<strong>' + city.slice(start, start + q.length) + '</strong>' + city.slice(start + q.length)
          : city;
        li.innerHTML = '<span>' + flag + '</span><span>' + highlighted + '</span>';
        li.dataset.idx = origIdx;
        li.addEventListener('mousedown', function() {
          input.value = city;
          list.classList.remove('is-open');
          clearBtn.classList.add('is-visible');
          if (hint) hint.style.display = 'none';
        });
        list.appendChild(li);
      });
    }
    list.classList.add('is-open');
  }

  input.addEventListener('input', function() { render(input.value); });
  input.addEventListener('keydown', function(e) {
    var items = getItems();
    if (e.key === 'ArrowDown') { e.preventDefault(); activeIdx = (activeIdx + 1) % items.length; }
    else if (e.key === 'ArrowUp') { e.preventDefault(); activeIdx = (activeIdx - 1 + items.length) % items.length; }
    else if (e.key === 'Enter' && activeIdx > -1) { items[activeIdx].dispatchEvent(new Event('mousedown')); return; }
    else if (e.key === 'Escape') { list.classList.remove('is-open'); return; }
    items.forEach(function(li, i) { li.classList.toggle('is-active', i === activeIdx); });
  });
  clearBtn.addEventListener('click', function() { input.value = ''; render(''); input.focus(); });
  document.addEventListener('click', function(e) {
    if (!e.target.closest('#dd-20-field') && !list.contains(e.target)) list.classList.remove('is-open');
  });
})();
```

### 21. Tab Panel Dropdown

**Type:** CSS + JS
**Description:** A dropdown that contains a full tabbed interface inside it, letting users switch between content panels without leaving the nav.

**HTML:**
```html
<div class="dd-21">
  <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
  <nav class="dd-21__nav">
    <span class="dd-21__brand">&#9672; Mosaic</span>
    <div class="dd-21__items">
      <div class="dd-21__item">
        <button class="dd-21__trigger" id="dd-21-btn" aria-expanded="false">
          Explore ▾
        </button>
        <div class="dd-21__drop" id="dd-21-drop">
          <div class="dd-21__tabs" role="tablist" aria-label="Explore sections">
            <button class="dd-21__tab is-active" role="tab" aria-selected="true" data-panel="dd-21-p1">Popular</button>
            <button class="dd-21__tab" role="tab" aria-selected="false" data-panel="dd-21-p2">New</button>
            <button class="dd-21__tab" role="tab" aria-selected="false" data-panel="dd-21-p3">Topics</button>
          </div>
          <div class="dd-21__panels">
            <div class="dd-21__panel" id="dd-21-p1" role="tabpanel">
              <a href="#" class="dd-21__plink">&#128293; Most Visited</a>
              <a href="#" class="dd-21__plink">&#127775; Editor Picks</a>
              <a href="#" class="dd-21__plink">&#128202; Trending Now</a>
              <a href="#" class="dd-21__plink">&#127942; All-Time Best</a>
            </div>
            <div class="dd-21__panel is-hidden" id="dd-21-p2" role="tabpanel">
              <a href="#" class="dd-21__plink">&#128640; Just Launched</a>
              <a href="#" class="dd-21__plink">&#128336; This Week</a>
              <a href="#" class="dd-21__plink">&#128197; This Month</a>
              <a href="#" class="dd-21__plink">&#127381; Coming Soon</a>
            </div>
            <div class="dd-21__panel is-hidden" id="dd-21-p3" role="tabpanel">
              <a href="#" class="dd-21__plink">&#127775; Design</a>
              <a href="#" class="dd-21__plink">&#128187; Engineering</a>
              <a href="#" class="dd-21__plink">&#128640; Product</a>
              <a href="#" class="dd-21__plink">&#128218; Business</a>
            </div>
          </div>
        </div>
      </div>
      <a href="#" class="dd-21__plain">Pricing</a>
      <a href="#" class="dd-21__plain">Blog</a>
    </div>
  </nav>
</div>
```

**CSS:**
```css
.dd-21, .dd-21 *, .dd-21 *::before, .dd-21 *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
.dd-21 ::selection { background: #10b981; color: #fff; }

.dd-21 {
  --brand: #10b981;
  --surface: #fff;
  --text: #064e3b;
  --muted: #6b7280;
  --border: #d1fae5;
  --hover: #ecfdf5;
  font-family: 'Plus Jakarta Sans', sans-serif;
  min-height: 380px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 32px 20px;
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
}

.dd-21__nav {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px 10px 10px 20px;
  box-shadow: 0 4px 24px rgba(16,185,129,.12);
  position: relative;
  z-index: 100;
  width: 100%;
  max-width: 600px;
}

.dd-21__brand { font-size: 17px; font-weight: 700; color: var(--brand); margin-right: 12px; }
.dd-21__items { display: flex; align-items: center; gap: 4px; }
.dd-21__item { position: relative; }

.dd-21__trigger {
  padding: 8px 14px;
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  border-radius: 8px;
  transition: background 0.15s;
}
.dd-21__trigger:hover { background: var(--hover); }
.dd-21__trigger[aria-expanded="true"] { background: var(--hover); color: var(--brand); }

.dd-21__plain {
  padding: 8px 14px;
  color: var(--muted);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  border-radius: 8px;
  transition: background 0.15s, color 0.15s;
}
.dd-21__plain:hover { background: var(--hover); color: var(--text); }

.dd-21__drop {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  width: 260px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(16,185,129,.14);
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity 0.22s ease, transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
.dd-21__drop.is-open { opacity: 1; pointer-events: auto; transform: translateY(0); }

.dd-21__tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  padding: 6px 6px 0;
  gap: 2px;
}

.dd-21__tab {
  flex: 1;
  padding: 8px 6px;
  border: none;
  border-radius: 8px 8px 0 0;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  transition: color 0.15s, background 0.15s;
  position: relative;
  bottom: -1px;
}
.dd-21__tab:hover { color: var(--text); background: #f0fdf4; }
.dd-21__tab.is-active { color: var(--brand); border-bottom-color: var(--brand); background: #f0fdf4; }

.dd-21__panels { padding: 6px; min-height: 140px; }
.dd-21__panel { display: flex; flex-direction: column; gap: 2px; }
.dd-21__panel.is-hidden { display: none; }

@keyframes dd-21-fadein {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.dd-21__panel:not(.is-hidden) { animation: dd-21-fadein 0.22s ease; }

.dd-21__plink {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 9px;
  text-decoration: none;
  color: var(--text);
  font-size: 13.5px;
  font-weight: 500;
  transition: background 0.12s;
}
.dd-21__plink:hover { background: var(--hover); color: var(--brand); }

@media (prefers-reduced-motion: reduce) {
  .dd-21__drop, .dd-21__tab, .dd-21__panel { transition: none; animation: none; }
}
```

**JS:**
```js
(function() {
  var btn  = document.getElementById('dd-21-btn');
  var drop = document.getElementById('dd-21-drop');
  if (!btn || !drop) return;
  var tabs   = Array.from(drop.querySelectorAll('.dd-21__tab'));
  var panels = Array.from(drop.querySelectorAll('.dd-21__panel'));

  function activateTab(tab) {
    tabs.forEach(function(t) { t.classList.remove('is-active'); t.setAttribute('aria-selected', 'false'); });
    panels.forEach(function(p) { p.classList.add('is-hidden'); });
    tab.classList.add('is-active');
    tab.setAttribute('aria-selected', 'true');
    var target = document.getElementById(tab.dataset.panel);
    if (target) target.classList.remove('is-hidden');
  }

  tabs.forEach(function(tab) { tab.addEventListener('click', function() { activateTab(tab); }); });

  btn.addEventListener('click', function(e) {
    e.stopPropagation();
    var open = drop.classList.toggle('is-open');
    btn.setAttribute('aria-expanded', open ? 'true' : 'false');
  });

  document.addEventListener('click', function(e) {
    if (!drop.contains(e.target) && e.target !== btn) {
      drop.classList.remove('is-open');
      btn.setAttribute('aria-expanded', 'false');
    }
  });

  document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') { drop.classList.remove('is-open'); btn.setAttribute('aria-expanded', 'false'); }
  });
})();
```

### 22. Custom Animated Select Dropdown

**Type:** CSS + JS
**Description:** A fully custom replacement for the native HTML select element, with animated option reveal, keyboard support, and a value display that updates on selection.

**HTML:**
```html
<div class="dd-22">
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
  <div class="dd-22__card">
    <p class="dd-22__title">Choose your plan</p>
    <p class="dd-22__sub">Select the option that fits your needs</p>

    <!-- native select (hidden, for form) -->
    <select id="dd-22-native" aria-hidden="true" tabindex="-1" style="position:absolute;opacity:0;pointer-events:none;width:0;height:0">
      <option value="">Select a plan…</option>
      <option value="free">Free — $0/month</option>
      <option value="pro">Pro — $12/month</option>
      <option value="team">Team — $39/month</option>
      <option value="enterprise">Enterprise — Custom</option>
    </select>

    <!-- custom select -->
    <div class="dd-22__select" id="dd-22-select">
      <button
        class="dd-22__btn"
        id="dd-22-btn"
        aria-haspopup="listbox"
        aria-expanded="false"
        aria-labelledby="dd-22-val"
      >
        <span class="dd-22__val" id="dd-22-val">Select a plan…</span>
        <span class="dd-22__chevron" id="dd-22-chevron">▾</span>
      </button>
      <ul
        class="dd-22__list"
        id="dd-22-list"
        role="listbox"
        aria-label="Plan options"
      >
        <li class="dd-22__opt" role="option" aria-selected="false" data-value="free">
          <span class="dd-22__opt-name">&#127381; Free</span>
          <span class="dd-22__opt-price">$0/month</span>
        </li>
        <li class="dd-22__opt" role="option" aria-selected="false" data-value="pro">
          <span class="dd-22__opt-name">&#128640; Pro</span>
          <span class="dd-22__opt-price">$12/month</span>
        </li>
        <li class="dd-22__opt" role="option" aria-selected="false" data-value="team">
          <span class="dd-22__opt-name">&#128101; Team</span>
          <span class="dd-22__opt-price">$39/month</span>
        </li>
        <li class="dd-22__opt dd-22__opt--featured" role="option" aria-selected="false" data-value="enterprise">
          <span class="dd-22__opt-name">&#127959; Enterprise</span>
          <span class="dd-22__opt-price">Custom</span>
        </li>
      </ul>
    </div>

    <button class="dd-22__submit" id="dd-22-submit">Continue &#8594;</button>
    <p class="dd-22__status" id="dd-22-status">No plan selected</p>
  </div>
</div>
```

**CSS:**
```css
.dd-22, .dd-22 *, .dd-22 *::before, .dd-22 *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
.dd-22 ::selection { background: #f59e0b; color: #fff; }

.dd-22 {
  --brand: #f59e0b;
  --brand-dark: #d97706;
  --surface: #fff;
  --text: #1c1917;
  --muted: #78716c;
  --border: #e7e5e4;
  --hover: #fffbeb;
  --selected: #fef3c7;
  font-family: 'Inter', sans-serif;
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 60%, #fde68a 100%);
  padding: 40px 20px;
}

.dd-22__card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 28px 24px;
  width: 100%;
  max-width: 360px;
  box-shadow: 0 8px 40px rgba(245,158,11,.15);
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
}

.dd-22__title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.3px;
}
.dd-22__sub { font-size: 13px; color: var(--muted); margin-top: -8px; }

/* custom select wrapper */
.dd-22__select { position: relative; z-index: 100; }

.dd-22__btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 16px;
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--muted);
  text-align: left;
  transition: border-color 0.18s, box-shadow 0.18s;
}
.dd-22__btn:hover { border-color: var(--brand); }
.dd-22__btn[aria-expanded="true"] {
  border-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(245,158,11,.14);
  color: var(--text);
}
.dd-22__btn.has-value { color: var(--text); font-weight: 600; }

.dd-22__chevron {
  font-size: 14px;
  color: var(--muted);
  display: inline-block;
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
  flex-shrink: 0;
}
.dd-22__btn[aria-expanded="true"] .dd-22__chevron { transform: rotate(180deg); }

/* option list */
.dd-22__list {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(245,158,11,.18), 0 2px 8px rgba(0,0,0,.06);
  list-style: none;
  padding: 6px;
  transform: scaleY(0);
  transform-origin: top center;
  opacity: 0;
  pointer-events: none;
  transition:
    transform 0.38s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.2s ease;
}
.dd-22__list.is-open {
  transform: scaleY(1);
  opacity: 1;
  pointer-events: auto;
}

/* stagger options */
.dd-22__opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 14px;
  border-radius: 9px;
  cursor: pointer;
  opacity: 0;
  transform: translateY(4px);
  transition:
    opacity 0.28s ease,
    transform 0.28s ease,
    background 0.12s;
}
.dd-22__list.is-open .dd-22__opt { opacity: 1; transform: translateY(0); }
.dd-22__list.is-open .dd-22__opt:nth-child(1) { transition-delay: 0.04s; }
.dd-22__list.is-open .dd-22__opt:nth-child(2) { transition-delay: 0.09s; }
.dd-22__list.is-open .dd-22__opt:nth-child(3) { transition-delay: 0.14s; }
.dd-22__list.is-open .dd-22__opt:nth-child(4) { transition-delay: 0.19s; }

.dd-22__opt:hover { background: var(--hover); }
.dd-22__opt.is-selected { background: var(--selected); }
.dd-22__opt.is-highlighted { background: var(--hover); outline: 2px solid var(--brand); outline-offset: -2px; }

.dd-22__opt--featured {
  border: 1px dashed var(--brand);
  margin-top: 4px;
}
.dd-22__opt--featured:hover { background: var(--selected); }

.dd-22__opt-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
}
.dd-22__opt-price {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--muted);
}

/* selected tick */
.dd-22__opt.is-selected .dd-22__opt-name::after {
  content: '✓';
  color: var(--brand);
  font-size: 13px;
  font-weight: 700;
}

/* submit button */
.dd-22__submit {
  width: 100%;
  padding: 12px;
  background: var(--brand);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
  margin-top: 4px;
}
.dd-22__submit:hover { background: var(--brand-dark); transform: translateY(-1px); }
.dd-22__submit:active { transform: translateY(0); }

.dd-22__status {
  text-align: center;
  font-size: 12.5px;
  color: var(--muted);
  font-style: italic;
  min-height: 18px;
}

@media (prefers-reduced-motion: reduce) {
  .dd-22__list, .dd-22__opt, .dd-22__chevron, .dd-22__submit { transition: none; }
}
```

**JS:**
```js
(function() {
  const btn      = document.getElementById('dd-22-btn');
  const list     = document.getElementById('dd-22-list');
  const valSpan  = document.getElementById('dd-22-val');
  const native   = document.getElementById('dd-22-native');
  const submitBtn = document.getElementById('dd-22-submit');
  const status   = document.getElementById('dd-22-status');
  if (!btn || !list || !native) return;

  const opts = Array.from(list.querySelectorAll('.dd-22__opt'));
  let activeIdx = -1;

  /* ── open / close ── */
  function openList() {
    list.classList.add('is-open');
    btn.setAttribute('aria-expanded', 'true');
    // highlight currently selected
    const selIdx = opts.findIndex(function(o) { return o.classList.contains('is-selected'); });
    setHighlight(selIdx > -1 ? selIdx : 0);
  }

  function closeList() {
    list.classList.remove('is-open');
    btn.setAttribute('aria-expanded', 'false');
    activeIdx = -1;
    opts.forEach(function(o) { o.classList.remove('is-highlighted'); });
  }

  function isOpen() { return list.classList.contains('is-open'); }

  /* ── highlight (keyboard focus) ── */
  function setHighlight(idx) {
    opts.forEach(function(o) { o.classList.remove('is-highlighted'); });
    if (idx < 0 || idx >= opts.length) return;
    opts[idx].classList.add('is-highlighted');
    opts[idx].scrollIntoView({ block: 'nearest' });
    activeIdx = idx;
  }

  /* ── select option ── */
  function selectOpt(opt) {
    opts.forEach(function(o) {
      o.classList.remove('is-selected');
      o.setAttribute('aria-selected', 'false');
    });
    opt.classList.add('is-selected');
    opt.setAttribute('aria-selected', 'true');

    const value = opt.dataset.value;
    const name  = opt.querySelector('.dd-22__opt-name').textContent.trim();
    const price = opt.querySelector('.dd-22__opt-price').textContent.trim();

    valSpan.textContent = name + ' — ' + price;
    btn.classList.add('has-value');
    native.value = value;
    native.dispatchEvent(new Event('change', { bubbles: true }));
    status.textContent = 'Selected: ' + name + ' (' + price + ')';
    closeList();
    btn.focus();
  }

  /* ── events ── */
  btn.addEventListener('click', function(e) {
    e.stopPropagation();
    isOpen() ? closeList() : openList();
  });

  opts.forEach(function(opt, i) {
    opt.addEventListener('click', function() { selectOpt(opt); });
    opt.addEventListener('mousemove', function() { setHighlight(i); });
  });

  btn.addEventListener('keydown', function(e) {
    if (e.key === 'ArrowDown' || e.key === 'Enter' || e.key === ' ') {
      e.preventDefault();
      if (!isOpen()) openList();
    }
  });

  list.addEventListener('keydown', function(e) {
    if (e.key === 'ArrowDown') {
      e.preventDefault();
      setHighlight((activeIdx + 1) % opts.length);
    } else if (e.key === 'ArrowUp') {
      e.preventDefault();
      setHighlight((activeIdx - 1 + opts.length) % opts.length);
    } else if (e.key === 'Enter' || e.key === ' ') {
      e.preventDefault();
      if (activeIdx > -1) selectOpt(opts[activeIdx]);
    } else if (e.key === 'Escape' || e.key === 'Tab') {
      closeList();
      btn.focus();
    }
  });

  // make list focusable for keyboard relay
  list.setAttribute('tabindex', '-1');
  btn.addEventListener('keydown', function(e) {
    if (isOpen() && (e.key === 'ArrowDown' || e.key === 'ArrowUp')) {
      e.preventDefault();
      list.focus();
      setHighlight(e.key === 'ArrowDown' ? 0 : opts.length - 1);
    }
  });

  document.addEventListener('click', function(e) {
    if (!btn.contains(e.target) && !list.contains(e.target)) closeList();
  });

  document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape' && isOpen()) { closeList(); btn.focus(); }
  });

  submitBtn && submitBtn.addEventListener('click', function() {
    if (!native.value) {
      status.textContent = '⚠ Please select a plan first.';
      btn.style.borderColor = '#ef4444';
      setTimeout(function() { btn.style.borderColor = ''; }, 1500);
    } else {
      status.textContent = '✓ Proceeding with ' + valSpan.textContent;
    }
  });
})();
```

---
## 16 CSS Fade In Animation Designs

URL: https://codefronts.com/motion/css-fade-in-animation/
Description: 16 hand-coded CSS fade-in animations with live demos — pure-opacity hero fade with staggered delays, clip-path inset reveal, blur defocus, staggered grid cascade, scroll-triggered IntersectionObserver reveal, directional slide-fade up, scale-up zoom-in, scale-down zoom-in, rotateX perspective tilt, word-by-word split, skew sweep, radial clip-path mask reveal, greyscale-to-color saturate, rotateY flip card, glitch flash multi-step, and cascade letter drop. 13 pure CSS + 3 with a tiny vanilla JS snippet — no framework. animation-fill-mode forwards, prefers-reduced-motion honoured, MIT licensed.
Demo count: 16

### 01. Pure Opacity Hero Fade

**Type:** Pure CSS
**Description:** A layered hero section where eyebrow, heading, paragraph, CTA buttons, and indicator dots each fade in sequentially using staggered animation-delay on a single opacity keyframe.

**HTML:**
```html
<div class="fi-01">
  <div class="fi-01__inner">
    <div class="fi-01__eyebrow">Design System v3.0</div>
    <h1 class="fi-01__heading">Build <span>Beautiful</span><br>Interfaces Fast</h1>
    <p class="fi-01__sub">A production-ready design system with 200+ components, dark mode, and accessibility built in.</p>
    <div class="fi-01__cta">
      <button class="fi-01__btn fi-01__btn--primary">Get Started</button>
      <button class="fi-01__btn fi-01__btn--ghost">View Docs</button>
    </div>
    <div class="fi-01__dots">
      <div class="fi-01__dot"></div>
      <div class="fi-01__dot"></div>
      <div class="fi-01__dot"></div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.fi-01{
  --bg:#0a0a12;--accent:#6c63ff;--text:#f0eeff;--sub:#9d97c8;
  --dur:1.2s;--ease:cubic-bezier(.16,1,.3,1);
  font-family:'DM Sans',sans-serif;
  min-height:320px;border-radius:20px;
  display:flex;align-items:center;justify-content:center;
  padding:40px;overflow:hidden;position:relative;
}
.fi-01::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 60% 50% at 50% 0%,rgba(108,99,255,.18),transparent);
  pointer-events:none;
}
.fi-01 *,.fi-01 *::before,.fi-01 *::after{box-sizing:border-box;margin:0;padding:0}
.fi-01 ::selection{background:var(--accent);color:#fff}

.fi-01__inner{text-align:center;position:relative;z-index:1}
.fi-01__eyebrow{
  font-size:.75rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent);margin-bottom:20px;
  opacity:0;animation:fi-01-fade var(--dur) var(--ease) .1s forwards;
}
.fi-01__heading{
  font-family:'Syne',sans-serif;font-size:clamp(2rem,5vw,3.2rem);font-weight:800;
  color:var(--text);line-height:1.1;margin-bottom:16px;
  opacity:0;animation:fi-01-fade var(--dur) var(--ease) .35s forwards;
}
.fi-01__heading span{
  background:linear-gradient(135deg,#6c63ff,#a78bfa);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.fi-01__sub{
  font-size:1rem;color:var(--sub);line-height:1.6;max-width:440px;margin:0 auto 28px;
  opacity:0;animation:fi-01-fade var(--dur) var(--ease) .55s forwards;
}
.fi-01__cta{
  display:inline-flex;gap:12px;align-items:center;
  opacity:0;animation:fi-01-fade var(--dur) var(--ease) .75s forwards;
}
.fi-01__btn{
  padding:12px 28px;border-radius:10px;font-size:.95rem;font-weight:500;cursor:pointer;
  border:none;transition:transform .2s,box-shadow .2s;
}
.fi-01__btn:hover{transform:translateY(-2px)}
.fi-01__btn--primary{
  background:var(--accent);color:#fff;
  box-shadow:0 8px 24px rgba(108,99,255,.35);
}
.fi-01__btn--primary:hover{box-shadow:0 12px 32px rgba(108,99,255,.5)}
.fi-01__btn--ghost{
  background:rgba(108,99,255,.1);color:var(--text);
  border:1px solid rgba(108,99,255,.3);
}
.fi-01__dots{
  display:flex;gap:8px;justify-content:center;margin-top:24px;
  opacity:0;animation:fi-01-fade var(--dur) var(--ease) .95s forwards;
}
.fi-01__dot{width:6px;height:6px;border-radius:50%;background:var(--accent);opacity:.3}
.fi-01__dot:nth-child(2){opacity:.6}
.fi-01__dot:nth-child(3){opacity:1}

@keyframes fi-01-fade{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){
  .fi-01 *{animation:none!important;opacity:1!important}
}
```

### 02. Clip-Path Inset Reveal

**Type:** Pure CSS
**Description:** A cyberpunk status panel that sweeps into view from left using clip-path: inset(0 100% 0 0 round 16px) animated to inset(0 0% 0 0), revealing content like a shutter opening.

**HTML:**
```html
<div class="fi-02">
  <div class="fi-02__panel">
    <span class="fi-02__label">System Status</span>
    <div class="fi-02__title">Neural Core<br>Online</div>
    <div class="fi-02__bar"></div>
    <p class="fi-02__desc">All subsystems operational. Processing at peak efficiency with zero latency degradation.</p>
    <div class="fi-02__stats">
      <div class="fi-02__stat"><span>99.9%</span><small>Uptime</small></div>
      <div class="fi-02__stat"><span>0.4ms</span><small>Latency</small></div>
      <div class="fi-02__stat"><span>4.2TB</span><small>Processed</small></div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.fi-02{
  --bg:#06060f;--neon:#00ffe0;--neon2:#ff006e;--text:#e0fff9;
  font-family:'Inter',sans-serif;
  min-height:320px;border-radius:20px;
  display:grid;place-items:center;
  padding:40px;overflow:hidden;position:relative;
}
.fi-02 *,.fi-02 *::before,.fi-02 *::after{box-sizing:border-box;margin:0;padding:0}
.fi-02 ::selection{background:var(--neon);color:#000}

/* clip-path reveal: inset(0 100% 0 0) → inset(0 0% 0 0) */
.fi-02__panel{
  background:linear-gradient(135deg,rgba(0,255,224,.06),rgba(255,0,110,.06));
  border:1px solid rgba(0,255,224,.2);
  border-radius:16px;padding:32px 40px;
  text-align:center;max-width:500px;
  clip-path:inset(0 100% 0 0 round 16px);
  animation:fi-02-clip-reveal .9s cubic-bezier(.77,0,.18,1) .2s forwards;
}
.fi-02__label{
  font-size:.7rem;letter-spacing:.25em;text-transform:uppercase;
  color:var(--neon);margin-bottom:16px;display:block;
}
.fi-02__title{
  font-family:'Orbitron',monospace;font-size:clamp(1.6rem,4vw,2.4rem);
  font-weight:900;color:var(--text);margin-bottom:12px;
  text-shadow:0 0 20px rgba(0,255,224,.4);
}
.fi-02__bar{
  height:3px;background:linear-gradient(90deg,var(--neon),var(--neon2));
  border-radius:2px;margin:16px 0;
}
.fi-02__desc{font-size:.9rem;color:rgba(224,255,249,.6);line-height:1.6}
.fi-02__stats{
  display:flex;gap:24px;justify-content:center;margin-top:24px;
}
.fi-02__stat span{display:block;font-family:'Orbitron',monospace;font-size:1.4rem;font-weight:700;color:var(--neon)}
.fi-02__stat small{font-size:.7rem;color:rgba(224,255,249,.5);text-transform:uppercase;letter-spacing:.1em}

@keyframes fi-02-clip-reveal{
  to{clip-path:inset(0 0% 0 0 round 16px)}
}
@media(prefers-reduced-motion:reduce){
  .fi-02 *{animation:none!important;clip-path:none!important}
}
```

### 03. Blur Defocus Fade

**Type:** Pure CSS
**Description:** A feature card that emerges from a dreamlike haze using filter: blur(20px) combined with opacity: 0, animating to sharp focus — the cinematographic rack-focus in pure CSS.

**HTML:**
```html
<div class="fi-03">
  <div class="fi-03__card">
    <div class="fi-03__icon">✦</div>
    <h2 class="fi-03__title">Blur-to-Focus Reveal</h2>
    <p class="fi-03__sub">Elements emerge from a dreamlike haze into sharp clarity using CSS <code>filter: blur()</code> combined with opacity — the cinematographic focus pull, in pure CSS.</p>
    <div class="fi-03__tags">
      <span class="fi-03__tag">filter: blur()</span>
      <span class="fi-03__tag">opacity fade</span>
      <span class="fi-03__tag">Pure CSS</span>
    </div>
  </div>
</div>
```

**CSS:**
```css
.fi-03{
  --bg:#0d0f1a;--purple:#a855f7;--pink:#ec4899;--text:#f8f0ff;
  font-family:'Plus Jakarta Sans',sans-serif;
  min-height:320px;border-radius:20px;
  display:grid;place-items:center;
  padding:40px;overflow:hidden;
}
.fi-03 *,.fi-03 *::before,.fi-03 *::after{box-sizing:border-box;margin:0;padding:0}
.fi-03 ::selection{background:var(--purple);color:#fff}

/* blur fade: filter:blur(20px) opacity:0 → blur(0) opacity:1 */
.fi-03__card{
  background:linear-gradient(135deg,rgba(168,85,247,.1),rgba(236,72,153,.08));
  border:1px solid rgba(168,85,247,.25);border-radius:20px;
  padding:36px;max-width:480px;text-align:center;
  opacity:0;filter:blur(20px);
  animation:fi-03-blur-in 1s cubic-bezier(.4,0,.2,1) .15s forwards;
}
.fi-03__icon{
  width:64px;height:64px;border-radius:18px;
  background:linear-gradient(135deg,var(--purple),var(--pink));
  display:grid;place-items:center;font-size:1.8rem;
  margin:0 auto 20px;
  box-shadow:0 8px 32px rgba(168,85,247,.4);
}
.fi-03__title{
  font-size:clamp(1.4rem,3vw,2rem);font-weight:800;color:var(--text);
  margin-bottom:10px;
}
.fi-03__sub{
  font-size:.9rem;color:rgba(248,240,255,.55);line-height:1.6;margin-bottom:24px;
}
.fi-03__tags{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.fi-03__tag{
  padding:5px 14px;border-radius:20px;font-size:.75rem;font-weight:700;
  background:rgba(168,85,247,.15);color:var(--purple);
  border:1px solid rgba(168,85,247,.2);
}
.fi-03__tag:nth-child(2){background:rgba(236,72,153,.15);color:var(--pink);border-color:rgba(236,72,153,.2)}
.fi-03__tag:nth-child(3){background:rgba(168,85,247,.1);color:rgba(248,240,255,.7);border-color:rgba(255,255,255,.1)}

@keyframes fi-03-blur-in{
  to{opacity:1;filter:blur(0)}
}
@media(prefers-reduced-motion:reduce){
  .fi-03__card{animation:none;opacity:1;filter:none}
}
```

### 04. Staggered Grid Card Fade

**Type:** Pure CSS
**Description:** A dashboard metrics grid where six stat cards stagger into view with nth-child animation-delay offsets, each sliding up from translateY(16px) to its resting position.

**HTML:**
```html
<div class="fi-04">
  <div class="fi-04__label">Dashboard Metrics</div>
  <div class="fi-04__grid">
    <div class="fi-04__card">
      <div class="fi-04__num">$84K</div>
      <div class="fi-04__metric">Revenue</div>
      <div class="fi-04__bar-bg"><div class="fi-04__bar"></div></div>
    </div>
    <div class="fi-04__card">
      <div class="fi-04__num">12.4K</div>
      <div class="fi-04__metric">Users</div>
      <div class="fi-04__bar-bg"><div class="fi-04__bar"></div></div>
    </div>
    <div class="fi-04__card">
      <div class="fi-04__num">91%</div>
      <div class="fi-04__metric">Uptime</div>
      <div class="fi-04__bar-bg"><div class="fi-04__bar"></div></div>
    </div>
    <div class="fi-04__card">
      <div class="fi-04__num">3.2s</div>
      <div class="fi-04__metric">Avg Load</div>
      <div class="fi-04__bar-bg"><div class="fi-04__bar"></div></div>
    </div>
    <div class="fi-04__card">
      <div class="fi-04__num">73%</div>
      <div class="fi-04__metric">Retention</div>
      <div class="fi-04__bar-bg"><div class="fi-04__bar"></div></div>
    </div>
    <div class="fi-04__card">
      <div class="fi-04__num">4.2★</div>
      <div class="fi-04__metric">Rating</div>
      <div class="fi-04__bar-bg"><div class="fi-04__bar"></div></div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.fi-04{
  --bg:#0c0e16;--c1:#f97316;--c2:#ef4444;--c3:#a855f7;--c4:#3b82f6;
  --c5:#10b981;--c6:#f59e0b;--text:#f5f5f0;
  font-family:'DM Sans',sans-serif;
  min-height:340px;border-radius:20px;
  padding:32px;overflow:hidden;
}
.fi-04 *,.fi-04 *::before,.fi-04 *::after{box-sizing:border-box;margin:0;padding:0}
.fi-04 ::selection{background:#f97316;color:#000}

.fi-04__label{
  font-family:'Syne',sans-serif;font-size:.75rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:rgba(245,245,240,.4);
  margin-bottom:20px;
}
.fi-04__grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(130px,1fr));
  gap:14px;
}
.fi-04__card{
  border-radius:14px;padding:20px 16px;
  opacity:0;transform:translateY(16px);
  animation:fi-04-stagger .6s cubic-bezier(.16,1,.3,1) forwards;
}
.fi-04__card:nth-child(1){--delay:.05s;background:linear-gradient(135deg,rgba(249,115,22,.15),rgba(239,68,68,.08));border:1px solid rgba(249,115,22,.25)}
.fi-04__card:nth-child(2){--delay:.12s;background:linear-gradient(135deg,rgba(168,85,247,.15),rgba(99,102,241,.08));border:1px solid rgba(168,85,247,.25)}
.fi-04__card:nth-child(3){--delay:.19s;background:linear-gradient(135deg,rgba(59,130,246,.15),rgba(6,182,212,.08));border:1px solid rgba(59,130,246,.25)}
.fi-04__card:nth-child(4){--delay:.26s;background:linear-gradient(135deg,rgba(16,185,129,.15),rgba(5,150,105,.08));border:1px solid rgba(16,185,129,.25)}
.fi-04__card:nth-child(5){--delay:.33s;background:linear-gradient(135deg,rgba(245,158,11,.15),rgba(234,179,8,.08));border:1px solid rgba(245,158,11,.25)}
.fi-04__card:nth-child(6){--delay:.40s;background:linear-gradient(135deg,rgba(239,68,68,.15),rgba(236,72,153,.08));border:1px solid rgba(239,68,68,.25)}
.fi-04__card{animation-delay:var(--delay)}
.fi-04__num{
  font-family:'Syne',sans-serif;font-size:1.6rem;font-weight:800;
  line-height:1;margin-bottom:4px;
}
.fi-04__card:nth-child(1) .fi-04__num{color:var(--c1)}
.fi-04__card:nth-child(2) .fi-04__num{color:var(--c3)}
.fi-04__card:nth-child(3) .fi-04__num{color:var(--c4)}
.fi-04__card:nth-child(4) .fi-04__num{color:var(--c5)}
.fi-04__card:nth-child(5) .fi-04__num{color:var(--c6)}
.fi-04__card:nth-child(6) .fi-04__num{color:var(--c2)}
.fi-04__metric{font-size:.72rem;color:rgba(245,245,240,.5);letter-spacing:.05em;text-transform:uppercase;margin-bottom:12px}
.fi-04__bar-bg{height:4px;background:rgba(255,255,255,.07);border-radius:2px}
.fi-04__bar{height:4px;border-radius:2px;transition:width .6s cubic-bezier(.16,1,.3,1)}
.fi-04__card:nth-child(1) .fi-04__bar{background:var(--c1);width:84%}
.fi-04__card:nth-child(2) .fi-04__bar{background:var(--c3);width:67%}
.fi-04__card:nth-child(3) .fi-04__bar{background:var(--c4);width:91%}
.fi-04__card:nth-child(4) .fi-04__bar{background:var(--c5);width:55%}
.fi-04__card:nth-child(5) .fi-04__bar{background:var(--c6);width:73%}
.fi-04__card:nth-child(6) .fi-04__bar{background:var(--c2);width:42%}

@keyframes fi-04-stagger{to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){
  .fi-04 *{animation:none!important;opacity:1!important;transform:none!important}
}
```

### 05. Scroll-Triggered Observer Fade

**Type:** CSS + JS
**Description:** An activity feed list where items observe viewport entry via IntersectionObserver and acquire a .fi-05--visible class, triggering CSS transitions to slide and fade in staggered.

**HTML:**
```html
<div class="fi-05" id="fi-05-root">
  <div class="fi-05__title">Activity Feed</div>
  <div class="fi-05__items">
    <div class="fi-05__item"><div class="fi-05__dot"></div><div class="fi-05__body"><div class="fi-05__name">Deployment successful</div><div class="fi-05__meta">production · 2 min ago</div></div><span class="fi-05__badge">Live</span></div>
    <div class="fi-05__item"><div class="fi-05__dot"></div><div class="fi-05__body"><div class="fi-05__name">Pull request merged</div><div class="fi-05__meta">feature/auth · 14 min ago</div></div><span class="fi-05__badge">Done</span></div>
    <div class="fi-05__item"><div class="fi-05__dot"></div><div class="fi-05__body"><div class="fi-05__name">Build failed on main</div><div class="fi-05__meta">CI pipeline · 1 hr ago</div></div><span class="fi-05__badge">Error</span></div>
    <div class="fi-05__item"><div class="fi-05__dot"></div><div class="fi-05__body"><div class="fi-05__name">New user signup spike</div><div class="fi-05__meta">analytics · 3 hr ago</div></div><span class="fi-05__badge">Alert</span></div>
    <div class="fi-05__item"><div class="fi-05__dot"></div><div class="fi-05__body"><div class="fi-05__name">Database backup complete</div><div class="fi-05__meta">storage · 6 hr ago</div></div><span class="fi-05__badge">Done</span></div>
  </div>
</div>
```

**CSS:**
```css
.fi-05{
  --bg:#0b1120;--sky:#38bdf8;--emerald:#34d399;--rose:#fb7185;--text:#f0f9ff;
  font-family:'Inter',sans-serif;
  min-height:360px;border-radius:20px;
  padding:32px;overflow:hidden;
}
.fi-05 *,.fi-05 *::before,.fi-05 *::after{box-sizing:border-box;margin:0;padding:0}
.fi-05 ::selection{background:var(--sky);color:#000}

.fi-05__title{
  font-size:.75rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  color:rgba(240,249,255,.35);margin-bottom:24px;
}
.fi-05__items{display:flex;flex-direction:column;gap:14px}
/* Items start hidden; JS adds .fi-05--visible via IntersectionObserver */
.fi-05__item{
  display:flex;gap:16px;align-items:center;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);
  border-radius:12px;padding:16px 20px;
  opacity:0;transform:translateX(-24px);
  transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1);
}
.fi-05__item.fi-05--visible{opacity:1;transform:translateX(0)}
.fi-05__item:hover{background:rgba(255,255,255,.06);border-color:rgba(56,189,248,.2)}
.fi-05__dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.fi-05__item:nth-child(1) .fi-05__dot{background:var(--sky);box-shadow:0 0 8px rgba(56,189,248,.5)}
.fi-05__item:nth-child(2) .fi-05__dot{background:var(--emerald);box-shadow:0 0 8px rgba(52,211,153,.5)}
.fi-05__item:nth-child(3) .fi-05__dot{background:var(--rose);box-shadow:0 0 8px rgba(251,113,133,.5)}
.fi-05__item:nth-child(4) .fi-05__dot{background:var(--sky);box-shadow:0 0 8px rgba(56,189,248,.5)}
.fi-05__item:nth-child(5) .fi-05__dot{background:var(--emerald);box-shadow:0 0 8px rgba(52,211,153,.5)}
.fi-05__body{flex:1}
.fi-05__name{font-size:.9rem;font-weight:600;color:var(--text);margin-bottom:3px}
.fi-05__meta{font-size:.75rem;color:rgba(240,249,255,.4)}
.fi-05__badge{
  font-size:.68rem;font-weight:700;padding:3px 10px;border-radius:8px;
}
.fi-05__item:nth-child(1) .fi-05__badge{background:rgba(56,189,248,.15);color:var(--sky)}
.fi-05__item:nth-child(2) .fi-05__badge{background:rgba(52,211,153,.15);color:var(--emerald)}
.fi-05__item:nth-child(3) .fi-05__badge{background:rgba(251,113,133,.15);color:var(--rose)}
.fi-05__item:nth-child(4) .fi-05__badge{background:rgba(56,189,248,.15);color:var(--sky)}
.fi-05__item:nth-child(5) .fi-05__badge{background:rgba(52,211,153,.15);color:var(--emerald)}

@media(prefers-reduced-motion:reduce){
  .fi-05__item{transition:none;opacity:1;transform:none}
}
```

**JS:**
```js
(function(){
  const items = document.querySelectorAll('#fi-05-root .fi-05__item');
  const obs = new IntersectionObserver((entries)=>{
    entries.forEach(e=>{
      if(e.isIntersecting){
        const el = e.target;
        const idx = [...items].indexOf(el);
        setTimeout(()=>el.classList.add('fi-05--visible'), idx * 100);
        obs.unobserve(el);
      }
    });
  },{threshold:0.2});
  items.forEach(el=>obs.observe(el));
})();
```

### 06. Directional Slide-Fade Up

**Type:** Pure CSS
**Description:** A two-column feature section where the text block slides up from below while card items follow with sequential translateY(30px → 0) + opacity delays for a rising-content effect.

**HTML:**
```html
<div class="fi-06">
  <div class="fi-06__left">
    <div class="fi-06__eyebrow">Premium Features</div>
    <h2 class="fi-06__heading">Everything you need to ship faster</h2>
    <p class="fi-06__body">Components slide into view from below as the page loads, creating a sense of content rising to meet the reader — directional fade with translateY.</p>
    <a href="#" class="fi-06__link">Explore features →</a>
  </div>
  <div class="fi-06__right">
    <div class="fi-06__card">
      <div class="fi-06__icon">⚡</div>
      <div><div class="fi-06__cname">Lightning Build</div><div class="fi-06__cmeta">Zero-config bundling</div></div>
    </div>
    <div class="fi-06__card">
      <div class="fi-06__icon">🎨</div>
      <div><div class="fi-06__cname">Design Tokens</div><div class="fi-06__cmeta">CSS custom properties</div></div>
    </div>
    <div class="fi-06__card">
      <div class="fi-06__icon">🔒</div>
      <div><div class="fi-06__cname">Auth Built-in</div><div class="fi-06__cmeta">JWT + OAuth 2.0</div></div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.fi-06{
  --bg:#0e0a1a;--violet:#7c3aed;--indigo:#4f46e5;--text:#ede9fe;
  font-family:'DM Sans',sans-serif;
  min-height:340px;border-radius:20px;
  padding:40px;overflow:hidden;
  display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:center;
}
.fi-06 *,.fi-06 *::before,.fi-06 *::after{box-sizing:border-box;margin:0;padding:0}
.fi-06 ::selection{background:var(--violet);color:#fff}

/* slide-fade from below: translateY(40px) opacity:0 → Y(0) opacity:1 */
.fi-06__left{
  opacity:0;transform:translateY(40px);
  animation:fi-06-up .8s cubic-bezier(.16,1,.3,1) .1s forwards;
}
.fi-06__eyebrow{
  font-size:.7rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:var(--violet);margin-bottom:14px;
}
.fi-06__heading{
  font-family:'Syne',sans-serif;font-size:clamp(1.6rem,3vw,2.4rem);
  font-weight:800;color:var(--text);line-height:1.15;margin-bottom:14px;
}
.fi-06__body{font-size:.9rem;color:rgba(237,233,254,.5);line-height:1.7;margin-bottom:20px}
.fi-06__link{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.85rem;font-weight:600;color:var(--violet);
  text-decoration:none;border-bottom:1px solid rgba(124,58,237,.3);
  padding-bottom:2px;transition:border-color .2s;
}
.fi-06__link:hover{border-color:var(--violet)}

.fi-06__right{display:flex;flex-direction:column;gap:12px}
.fi-06__card{
  background:linear-gradient(135deg,rgba(124,58,237,.1),rgba(79,70,229,.06));
  border:1px solid rgba(124,58,237,.2);border-radius:12px;padding:16px 20px;
  display:flex;gap:14px;align-items:center;
  opacity:0;transform:translateY(30px);
}
.fi-06__card:nth-child(1){animation:fi-06-up .7s cubic-bezier(.16,1,.3,1) .3s forwards}
.fi-06__card:nth-child(2){animation:fi-06-up .7s cubic-bezier(.16,1,.3,1) .45s forwards}
.fi-06__card:nth-child(3){animation:fi-06-up .7s cubic-bezier(.16,1,.3,1) .6s forwards}
.fi-06__icon{
  width:40px;height:40px;border-radius:10px;
  background:rgba(124,58,237,.2);
  display:grid;place-items:center;font-size:1.1rem;flex-shrink:0;
}
.fi-06__cname{font-size:.88rem;font-weight:700;color:var(--text);margin-bottom:2px}
.fi-06__cmeta{font-size:.72rem;color:rgba(237,233,254,.4)}

@keyframes fi-06-up{to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){
  .fi-06 *{animation:none!important;opacity:1!important;transform:none!important}
}
```

### 07. Scale-Up Zoom In Fade

**Type:** Pure CSS
**Description:** Four metric stat cards pop into view from scale(0.5) using a spring cubic-bezier(.34,1.56,.64,1) overshoot curve — a satisfying organic scale-up growth entrance.

**HTML:**
```html
<div class="fi-07">
  <div class="fi-07__card">
    <div class="fi-07__num">2.4B</div>
    <div class="fi-07__label">Requests</div>
    <div class="fi-07__ring"></div>
  </div>
  <div class="fi-07__card">
    <div class="fi-07__num">99.9</div>
    <div class="fi-07__label">Uptime %</div>
    <div class="fi-07__ring"></div>
  </div>
  <div class="fi-07__card">
    <div class="fi-07__num">0.4ms</div>
    <div class="fi-07__label">Latency</div>
    <div class="fi-07__ring"></div>
  </div>
  <div class="fi-07__card">
    <div class="fi-07__num">140+</div>
    <div class="fi-07__label">Countries</div>
    <div class="fi-07__ring"></div>
  </div>
</div>
```

**CSS:**
```css
.fi-07{
  --bg:#060d0d;--teal:#2dd4bf;--cyan:#06b6d4;--text:#f0fdfa;
  font-family:'Inter',sans-serif;
  min-height:340px;border-radius:20px;
  display:flex;align-items:center;justify-content:center;gap:24px;flex-wrap:wrap;
  padding:40px;overflow:hidden;
}
.fi-07 *,.fi-07 *::before,.fi-07 *::after{box-sizing:border-box;margin:0;padding:0}
.fi-07 ::selection{background:var(--teal);color:#000}

/* scale-up fade: scale(.5) opacity:0 → scale(1) opacity:1 */
.fi-07__card{
  width:140px;border-radius:16px;padding:24px 16px;text-align:center;
  opacity:0;transform:scale(.5);
  animation:fi-07-zoom-in .6s cubic-bezier(.34,1.56,.64,1) forwards;
}
.fi-07__card:nth-child(1){--d:.05s;background:linear-gradient(135deg,rgba(45,212,191,.15),rgba(6,182,212,.08));border:1px solid rgba(45,212,191,.3)}
.fi-07__card:nth-child(2){--d:.18s;background:linear-gradient(135deg,rgba(6,182,212,.15),rgba(59,130,246,.08));border:1px solid rgba(6,182,212,.3)}
.fi-07__card:nth-child(3){--d:.31s;background:linear-gradient(135deg,rgba(45,212,191,.12),rgba(52,211,153,.08));border:1px solid rgba(45,212,191,.25)}
.fi-07__card:nth-child(4){--d:.44s;background:linear-gradient(135deg,rgba(6,182,212,.12),rgba(14,165,233,.08));border:1px solid rgba(6,182,212,.25)}
.fi-07__card{animation-delay:var(--d)}
.fi-07__card:hover{transform:scale(1.04)!important;transition:transform .2s}

.fi-07__num{
  font-family:'Orbitron',monospace;
  font-size:2rem;font-weight:900;
  background:linear-gradient(135deg,var(--teal),var(--cyan));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  line-height:1;margin-bottom:6px;
}
.fi-07__label{font-size:.68rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:rgba(240,253,250,.45);margin-bottom:12px}
.fi-07__ring{
  width:40px;height:40px;border-radius:50%;
  border:3px solid rgba(45,212,191,.15);
  border-top-color:var(--teal);
  margin:0 auto;
}

@keyframes fi-07-zoom-in{to{opacity:1;transform:scale(1)}}
@media(prefers-reduced-motion:reduce){
  .fi-07 *{animation:none!important;opacity:1!important;transform:scale(1)!important}
}
```

### 08. Scale-Down Zoom In Fade

**Type:** Pure CSS
**Description:** A premium hero that fades in from scale(1.4), shrinking to normal — a dramatic 'punch out' cinematic entrance where content arrives oversized then settles into place.

**HTML:**
```html
<div class="fi-08">
  <div class="fi-08__hero">
    <span class="fi-08__crown">👑</span>
    <h1 class="fi-08__title">Scale-Down<br><em>Entrance</em></h1>
    <p class="fi-08__sub">Content arrives oversized and shrinks to fit — a cinematic "punch out" effect using scale(1.4) → scale(1) with opacity.</p>
    <div class="fi-08__ribbon">
      <div class="fi-08__ritem">Premium</div>
      <div class="fi-08__ritem">Exclusive</div>
      <div class="fi-08__ritem">Gold Tier</div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.fi-08{
  --bg:#100c1e;--gold:#f59e0b;--amber:#d97706;--text:#fffbeb;
  font-family:'DM Sans',sans-serif;
  min-height:340px;border-radius:20px;
  display:grid;place-items:center;
  padding:40px;overflow:hidden;position:relative;
}
.fi-08::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle 300px at 50% 50%,rgba(245,158,11,.07),transparent);
}
.fi-08 *,.fi-08 *::before,.fi-08 *::after{box-sizing:border-box;margin:0;padding:0}
.fi-08 ::selection{background:var(--gold);color:#000}

/* scale-down fade: scale(1.4) opacity:0 → scale(1) opacity:1 — dramatic zoom-in from large */
.fi-08__hero{
  text-align:center;position:relative;z-index:1;
  opacity:0;transform:scale(1.4);
  animation:fi-08-zoom-in .9s cubic-bezier(.25,.46,.45,.94) .1s forwards;
}
.fi-08__crown{font-size:3rem;margin-bottom:12px;display:block}
.fi-08__title{
  font-family:'Syne',sans-serif;font-size:clamp(2rem,5vw,3.5rem);font-weight:800;
  color:var(--text);line-height:1;margin-bottom:8px;
}
.fi-08__title em{
  font-style:normal;
  background:linear-gradient(90deg,var(--gold),var(--amber));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.fi-08__sub{
  font-size:1rem;color:rgba(255,251,235,.5);margin:16px 0 28px;max-width:360px;
  margin-left:auto;margin-right:auto;line-height:1.6;
}
.fi-08__ribbon{
  display:inline-flex;gap:20px;align-items:center;
  background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.25);
  border-radius:40px;padding:10px 24px;
}
.fi-08__ritem{font-size:.8rem;font-weight:600;color:var(--gold);display:flex;gap:6px;align-items:center}
.fi-08__ritem::before{content:'✦';font-size:.6rem;opacity:.7}
.fi-08__ritem + .fi-08__ritem{border-left:1px solid rgba(245,158,11,.2);padding-left:20px}

@keyframes fi-08-zoom-in{to{opacity:1;transform:scale(1)}}
@media(prefers-reduced-motion:reduce){
  .fi-08 *{animation:none!important;opacity:1!important;transform:scale(1)!important}
}
```

### 09. RotateX Perspective Tilt Fade

**Type:** Pure CSS
**Description:** Three feature tiles tumble forward into position via perspective(800px) rotateX(60deg → 0) with staggered delays, creating a card-dealing 3D tilt-down entrance.

**HTML:**
```html
<div class="fi-09">
  <div class="fi-09__tile">
    <div class="fi-09__icon">🌐</div>
    <div class="fi-09__name">Web Platform</div>
    <div class="fi-09__desc">Cards tumble into place with a 3D perspective rotation on the X axis.</div>
    <div class="fi-09__tag">rotateX</div>
  </div>
  <div class="fi-09__tile">
    <div class="fi-09__icon">📐</div>
    <div class="fi-09__name">Perspective</div>
    <div class="fi-09__desc">CSS perspective() gives depth, making 2D elements feel truly spatial.</div>
    <div class="fi-09__tag">perspective</div>
  </div>
  <div class="fi-09__tile">
    <div class="fi-09__icon">✨</div>
    <div class="fi-09__name">Depth Fade</div>
    <div class="fi-09__desc">Combined with opacity, the tilt creates a cinematic camera-drop entrance.</div>
    <div class="fi-09__tag">3D fade</div>
  </div>
</div>
```

**CSS:**
```css
.fi-09{
  --bg:#0c0d1a;--blue:#3b82f6;--indigo:#6366f1;--text:#eff6ff;
  font-family:'Inter',sans-serif;
  min-height:360px;border-radius:20px;
  display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;
  padding:40px;overflow:hidden;
  perspective:1000px;
}
.fi-09 *,.fi-09 *::before,.fi-09 *::after{box-sizing:border-box;margin:0;padding:0}
.fi-09 ::selection{background:var(--blue);color:#fff}

/* rotateX perspective fade: rotateX(60deg) opacity:0 → rotateX(0) opacity:1 */
.fi-09__tile{
  width:160px;min-height:180px;border-radius:14px;padding:24px 18px;
  display:flex;flex-direction:column;gap:10px;
  opacity:0;transform:perspective(800px) rotateX(60deg) translateY(20px);
  animation:fi-09-flip-in .7s cubic-bezier(.16,1,.3,1) forwards;
}
.fi-09__tile:nth-child(1){--d:.05s;background:linear-gradient(160deg,rgba(59,130,246,.18),rgba(99,102,241,.1));border:1px solid rgba(59,130,246,.3)}
.fi-09__tile:nth-child(2){--d:.2s;background:linear-gradient(160deg,rgba(99,102,241,.18),rgba(139,92,246,.1));border:1px solid rgba(99,102,241,.3)}
.fi-09__tile:nth-child(3){--d:.35s;background:linear-gradient(160deg,rgba(139,92,246,.18),rgba(167,139,250,.1));border:1px solid rgba(139,92,246,.3)}
.fi-09__tile{animation-delay:var(--d)}
.fi-09__tile:hover{transform:perspective(800px) rotateX(-4deg) translateY(-4px)!important;transition:transform .3s}

.fi-09__icon{font-size:2rem}
.fi-09__name{font-family:'Syne',sans-serif;font-size:.95rem;font-weight:700;color:var(--text)}
.fi-09__desc{font-size:.75rem;color:rgba(239,246,255,.45);line-height:1.5;flex:1}
.fi-09__tag{
  font-size:.65rem;font-weight:600;padding:3px 8px;border-radius:6px;
  background:rgba(59,130,246,.15);color:var(--blue);align-self:flex-start;
}
.fi-09__tile:nth-child(2) .fi-09__tag{background:rgba(99,102,241,.15);color:#818cf8}
.fi-09__tile:nth-child(3) .fi-09__tag{background:rgba(139,92,246,.15);color:#a78bfa}

@keyframes fi-09-flip-in{
  to{opacity:1;transform:perspective(800px) rotateX(0deg) translateY(0)}
}
@media(prefers-reduced-motion:reduce){
  .fi-09 *{animation:none!important;opacity:1!important;transform:none!important}
}
```

### 10. Word-by-Word Split Fade

**Type:** CSS + JS
**Description:** A headline is split word-by-word into spans via JavaScript, each assigned an animation-delay, creating a sequential typewriter-style word cascade with translateY spring bounce.

**HTML:**
```html
<div class="fi-10" id="fi-10-root">
  <div class="fi-10__output">
    <div class="fi-10__label" id="fi-10-label">Word-by-word fade</div>
    <div class="fi-10__text" id="fi-10-text">Words appear one by one creating a cinematic reading experience</div>
    <div class="fi-10__sub" id="fi-10-sub">JavaScript splits text into spans, staggering animation-delay per word index.</div>
    <div class="fi-10__replay" id="fi-10-replay">↺ Replay</div>
  </div>
</div>
```

**CSS:**
```css
.fi-10{
  --bg:#0a0f0a;--green:#4ade80;--lime:#a3e635;--text:#f0fdf4;
  font-family:'Plus Jakarta Sans',sans-serif;
  min-height:320px;border-radius:20px;
  display:grid;place-items:center;
  padding:40px;overflow:hidden;
}
.fi-10 *,.fi-10 *::before,.fi-10 *::after{box-sizing:border-box;margin:0;padding:0}
.fi-10 ::selection{background:var(--green);color:#000}

.fi-10__output{text-align:center;max-width:560px}
.fi-10__label{
  font-size:.7rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--green);margin-bottom:20px;opacity:0;
  animation:fi-10-word-fade .5s ease forwards .1s;
}
.fi-10__text{
  font-size:clamp(1.4rem,3.5vw,2.2rem);font-weight:800;line-height:1.4;
  color:var(--text);margin-bottom:24px;
}
/* JS injects spans; each span animates individually */
.fi-10__word{
  display:inline-block;margin-right:.3em;
  opacity:0;transform:translateY(12px);
  animation:fi-10-word-up .5s cubic-bezier(.16,1,.3,1) forwards;
}
.fi-10__sub{
  font-size:.9rem;color:rgba(240,253,244,.45);line-height:1.6;
  opacity:0;animation:fi-10-word-fade .5s ease forwards;
}
.fi-10__replay{
  margin-top:20px;display:inline-block;
  font-size:.75rem;font-weight:600;color:var(--green);cursor:pointer;
  border:1px solid rgba(74,222,128,.2);border-radius:20px;padding:6px 16px;
  background:rgba(74,222,128,.08);transition:background .2s;
}
.fi-10__replay:hover{background:rgba(74,222,128,.15)}

@keyframes fi-10-word-up{to{opacity:1;transform:translateY(0)}}
@keyframes fi-10-word-fade{to{opacity:1}}
@media(prefers-reduced-motion:reduce){
  .fi-10 *{animation:none!important;opacity:1!important;transform:none!important}
}
```

**JS:**
```js
(function(){
  const textEl = document.getElementById('fi-10-text');
  const subEl  = document.getElementById('fi-10-sub');
  const replay = document.getElementById('fi-10-replay');
  const BASE_DELAY = 0.3;
  const STEP = 0.09;

  function splitAndAnimate(el, startDelay){
    const words = el.textContent.trim().split(/\s+/);
    el.innerHTML = '';
    words.forEach((w,i)=>{
      const span = document.createElement('span');
      span.className='fi-10__word';
      span.textContent = w;
      span.style.animationDelay = (startDelay + i * STEP)+'s';
      el.appendChild(span);
    });
    return startDelay + words.length * STEP;
  }

  function run(){
    const subDelay = splitAndAnimate(textEl, BASE_DELAY);
    subEl.style.animationDelay = (subDelay + 0.1)+'s';
    subEl.style.animation='none';
    void subEl.offsetWidth;
    subEl.style.animation='fi-10-word-fade .5s ease forwards';
  }

  run();

  replay.addEventListener('click',()=>{
    // Reset and re-animate
    textEl.querySelectorAll('.fi-10__word').forEach(s=>{
      s.style.animation='none';
      void s.offsetWidth;
      s.style.animation='fi-10-word-up .5s cubic-bezier(.16,1,.3,1) forwards';
    });
    subEl.style.animation='none';
    void subEl.offsetWidth;
    subEl.style.animation='fi-10-word-fade .5s ease forwards';
  });
})();
```

### 11. Skew Sweep Fade

**Type:** Pure CSS
**Description:** Three stat panels slice into frame from the left using skewX(15deg) + translateX(-40px) → skewX(0) — a momentum-carrying diagonal sweep entrance.

**HTML:**
```html
<div class="fi-11">
  <div class="fi-11__block">
    <div class="fi-11__num">847K</div>
    <div class="fi-11__stat">Monthly Views</div>
    <div class="fi-11__divider"></div>
    <div class="fi-11__desc">Panels slice into view from the left with a momentum-carrying skew.</div>
  </div>
  <div class="fi-11__block">
    <div class="fi-11__num">12.3K</div>
    <div class="fi-11__stat">Subscribers</div>
    <div class="fi-11__divider"></div>
    <div class="fi-11__desc">skewX(15deg) creates a dynamic diagonal entry effect.</div>
  </div>
  <div class="fi-11__block">
    <div class="fi-11__num">98%</div>
    <div class="fi-11__stat">Satisfaction</div>
    <div class="fi-11__divider"></div>
    <div class="fi-11__desc">Combined with translateX for a satisfying sweeping entrance.</div>
  </div>
</div>
```

**CSS:**
```css
.fi-11{
  --bg:#0f0a14;--rose:#f43f5e;--pink:#ec4899;--text:#fff1f2;
  font-family:'DM Sans',sans-serif;
  min-height:340px;border-radius:20px;
  display:flex;align-items:center;justify-content:center;gap:20px;flex-wrap:wrap;
  padding:40px;overflow:hidden;
}
.fi-11 *,.fi-11 *::before,.fi-11 *::after{box-sizing:border-box;margin:0;padding:0}
.fi-11 ::selection{background:var(--rose);color:#fff}

/* skew + fade: skewX(15deg) translateX(-40px) opacity:0 → skewX(0) translateX(0) opacity:1 */
.fi-11__block{
  border-radius:14px;padding:28px 24px;flex:1;min-width:160px;max-width:200px;
  opacity:0;transform:skewX(15deg) translateX(-40px);
  animation:fi-11-skew-in .7s cubic-bezier(.16,1,.3,1) forwards;
}
.fi-11__block:nth-child(1){--d:.05s;background:linear-gradient(135deg,rgba(244,63,94,.18),rgba(236,72,153,.08));border:1px solid rgba(244,63,94,.25)}
.fi-11__block:nth-child(2){--d:.2s;background:linear-gradient(135deg,rgba(236,72,153,.18),rgba(168,85,247,.08));border:1px solid rgba(236,72,153,.25)}
.fi-11__block:nth-child(3){--d:.35s;background:linear-gradient(135deg,rgba(168,85,247,.18),rgba(99,102,241,.08));border:1px solid rgba(168,85,247,.25)}
.fi-11__block{animation-delay:var(--d)}
.fi-11__block:hover{transform:skewX(0) translateX(0) scale(1.03)!important;transition:transform .25s}

.fi-11__num{
  font-family:'Syne',sans-serif;font-size:2.2rem;font-weight:800;
  line-height:1;margin-bottom:4px;
}
.fi-11__block:nth-child(1) .fi-11__num{color:var(--rose)}
.fi-11__block:nth-child(2) .fi-11__num{color:var(--pink)}
.fi-11__block:nth-child(3) .fi-11__num{color:#a78bfa}
.fi-11__stat{font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,241,242,.45);margin-bottom:14px}
.fi-11__divider{height:1px;background:rgba(255,255,255,.08);margin-bottom:12px}
.fi-11__desc{font-size:.78rem;color:rgba(255,241,242,.55);line-height:1.5}

@keyframes fi-11-skew-in{
  to{opacity:1;transform:skewX(0deg) translateX(0)}
}
@media(prefers-reduced-motion:reduce){
  .fi-11 *{animation:none!important;opacity:1!important;transform:none!important}
}
```

### 12. Radial Clip-Path Mask Reveal

**Type:** Pure CSS
**Description:** A feature panel expands outward from the centre using clip-path: circle(0% → 100%) — a portal-opening radial mask reveal radiating from a single focal point.

**HTML:**
```html
<div class="fi-12">
  <div class="fi-12__wrap">
    <div class="fi-12__glow"></div>
    <div class="fi-12__panel">
      <span class="fi-12__emoji">🌀</span>
      <h2 class="fi-12__title">Radial Mask Reveal</h2>
      <p class="fi-12__sub">Content expands outward from a central point using <code>clip-path: circle()</code> — like a portal opening or a spotlight growing to full brightness.</p>
      <div class="fi-12__orbs">
        <div class="fi-12__orb">clip-path</div>
        <div class="fi-12__orb">circle()</div>
        <div class="fi-12__orb">radial reveal</div>
      </div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.fi-12{
  --bg:#07080e;--sky:#0ea5e9;--cobalt:#1d4ed8;--text:#f0f9ff;
  font-family:'Inter',sans-serif;
  min-height:340px;border-radius:20px;
  display:grid;place-items:center;
  padding:40px;overflow:hidden;
}
.fi-12 *,.fi-12 *::before,.fi-12 *::after{box-sizing:border-box;margin:0;padding:0}
.fi-12 ::selection{background:var(--sky);color:#000}

/* radial clip-path mask reveal: circle(0%) → circle(100%) */
.fi-12__wrap{position:relative;max-width:480px;width:100%}
.fi-12__panel{
  background:linear-gradient(135deg,rgba(14,165,233,.12),rgba(29,78,216,.08));
  border:1px solid rgba(14,165,233,.25);border-radius:20px;
  padding:36px;text-align:center;
  clip-path:circle(0% at 50% 50%);
  animation:fi-12-radial-reveal 1s cubic-bezier(.4,0,.2,1) .15s forwards;
}
.fi-12__glow{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:200px;height:200px;border-radius:50%;
  background:radial-gradient(circle,rgba(14,165,233,.15),transparent 70%);
  pointer-events:none;
}
.fi-12__emoji{font-size:2.5rem;display:block;margin-bottom:16px}
.fi-12__title{
  font-family:'Syne',sans-serif;font-size:clamp(1.4rem,3vw,2rem);
  font-weight:800;color:var(--text);margin-bottom:10px;
}
.fi-12__sub{font-size:.9rem;color:rgba(240,249,255,.5);line-height:1.6;margin-bottom:24px}
.fi-12__orbs{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.fi-12__orb{
  padding:6px 14px;border-radius:20px;font-size:.72rem;font-weight:600;
  background:rgba(14,165,233,.12);border:1px solid rgba(14,165,233,.2);color:var(--sky);
}

@keyframes fi-12-radial-reveal{to{clip-path:circle(100% at 50% 50%)}}
@media(prefers-reduced-motion:reduce){
  .fi-12__panel{animation:none;clip-path:none}
}
```

### 13. Greyscale to Color Saturate Fade

**Type:** Pure CSS
**Description:** Three profile cards transition from filter: saturate(0) brightness(0.7) to full color, creating a greyscale-to-vivid reveal with cascading animation delays.

**HTML:**
```html
<div class="fi-13">
  <div class="fi-13__photo">
    <div class="fi-13__dot"></div>
    <div class="fi-13__overlay">
      <div class="fi-13__pname">Alex Chen</div>
      <div class="fi-13__prole">Lead Designer</div>
    </div>
  </div>
  <div class="fi-13__photo">
    <div class="fi-13__dot"></div>
    <div class="fi-13__overlay">
      <div class="fi-13__pname">Mia Torres</div>
      <div class="fi-13__prole">Engineering Lead</div>
    </div>
  </div>
  <div class="fi-13__photo">
    <div class="fi-13__dot"></div>
    <div class="fi-13__overlay">
      <div class="fi-13__pname">Sam Osei</div>
      <div class="fi-13__prole">Product Manager</div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.fi-13{
  --bg:#111;--text:#fafafa;
  font-family:'Plus Jakarta Sans',sans-serif;
  min-height:340px;border-radius:20px;
  display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;
  padding:40px;overflow:hidden;
}
.fi-13 *,.fi-13 *::before,.fi-13 *::after{box-sizing:border-box;margin:0;padding:0}
.fi-13 ::selection{background:#888;color:#fff}

/* Greyscale → color: filter:saturate(0) opacity:0 → saturate(1) opacity:1 */
.fi-13__photo{
  position:relative;border-radius:16px;overflow:hidden;
  flex:1;min-width:140px;max-width:170px;aspect-ratio:3/4;
  opacity:0;filter:saturate(0) brightness(.7);
  animation:fi-13-color-in 1s ease-out forwards;
  cursor:pointer;
}
.fi-13__photo:nth-child(1){--d:.1s}
.fi-13__photo:nth-child(2){--d:.3s}
.fi-13__photo:nth-child(3){--d:.5s}
.fi-13__photo{animation-delay:var(--d)}
.fi-13__photo:hover{filter:saturate(1.2) brightness(1.05)!important;transform:scale(1.03);transition:all .3s}

/* Colorful gradient "photos" */
.fi-13__photo:nth-child(1){background:linear-gradient(160deg,#f97316,#ec4899,#8b5cf6)}
.fi-13__photo:nth-child(2){background:linear-gradient(160deg,#06b6d4,#3b82f6,#a855f7)}
.fi-13__photo:nth-child(3){background:linear-gradient(160deg,#10b981,#14b8a6,#0ea5e9)}

.fi-13__overlay{
  position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.7) 0%,transparent 60%);
  display:flex;flex-direction:column;justify-content:flex-end;padding:16px;
}
.fi-13__pname{font-size:.85rem;font-weight:700;color:#fff;margin-bottom:3px}
.fi-13__prole{font-size:.7rem;color:rgba(255,255,255,.6)}
.fi-13__dot{
  position:absolute;top:14px;right:14px;
  width:8px;height:8px;border-radius:50%;background:#4ade80;
  box-shadow:0 0 6px #4ade80;
}

@keyframes fi-13-color-in{to{opacity:1;filter:saturate(1) brightness(1)}}
@media(prefers-reduced-motion:reduce){
  .fi-13 *{animation:none!important;opacity:1!important;filter:none!important}
}
```

### 14. RotateY Flip Card Fade

**Type:** Pure CSS
**Description:** Three feature cards flip into view from the side via perspective(800px) rotateY(90deg → 0), fanning in sequence like a hand of cards being dealt face-up.

**HTML:**
```html
<div class="fi-14">
  <div class="fi-14__card">
    <div class="fi-14__emoji">🎭</div>
    <div class="fi-14__name">UI Craft</div>
    <div class="fi-14__role">Design System</div>
    <div class="fi-14__divider"></div>
    <div class="fi-14__detail">Cards flip into view from the side using rotateY.</div>
  </div>
  <div class="fi-14__card">
    <div class="fi-14__emoji">⚙️</div>
    <div class="fi-14__name">Dev Tools</div>
    <div class="fi-14__role">Engineering</div>
    <div class="fi-14__divider"></div>
    <div class="fi-14__detail">Each card delays 170ms, creating a fan-in sequence.</div>
  </div>
  <div class="fi-14__card">
    <div class="fi-14__emoji">🚀</div>
    <div class="fi-14__name">Launchpad</div>
    <div class="fi-14__role">Products</div>
    <div class="fi-14__divider"></div>
    <div class="fi-14__detail">Hover reveals a subtle counter-tilt for depth feedback.</div>
  </div>
</div>
```

**CSS:**
```css
.fi-14{
  --bg:#0c0814;--purple:#9333ea;--violet:#7c3aed;--text:#faf5ff;
  font-family:'Inter',sans-serif;
  min-height:360px;border-radius:20px;
  display:flex;align-items:center;justify-content:center;gap:20px;flex-wrap:wrap;
  padding:40px;overflow:hidden;
  perspective:1200px;
}
.fi-14 *,.fi-14 *::before,.fi-14 *::after{box-sizing:border-box;margin:0;padding:0}
.fi-14 ::selection{background:var(--purple);color:#fff}

/* flip card: rotateY(90deg) opacity:0 → rotateY(0) opacity:1 */
.fi-14__card{
  width:160px;min-height:200px;border-radius:16px;padding:24px 18px;
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;
  opacity:0;transform:perspective(800px) rotateY(90deg);
  animation:fi-14-flip-reveal .65s cubic-bezier(.16,1,.3,1) forwards;
  cursor:pointer;transition:box-shadow .2s;
}
.fi-14__card:nth-child(1){--d:.05s;background:linear-gradient(160deg,rgba(147,51,234,.2),rgba(79,70,229,.1));border:1px solid rgba(147,51,234,.3)}
.fi-14__card:nth-child(2){--d:.22s;background:linear-gradient(160deg,rgba(79,70,229,.2),rgba(59,130,246,.1));border:1px solid rgba(79,70,229,.3)}
.fi-14__card:nth-child(3){--d:.39s;background:linear-gradient(160deg,rgba(236,72,153,.2),rgba(147,51,234,.1));border:1px solid rgba(236,72,153,.3)}
.fi-14__card{animation-delay:var(--d)}
.fi-14__card:hover{box-shadow:0 16px 48px rgba(147,51,234,.3);transform:perspective(800px) rotateY(-5deg) translateY(-4px)!important;transition:all .3s}

.fi-14__emoji{font-size:2rem}
.fi-14__name{font-family:'Syne',sans-serif;font-size:.95rem;font-weight:800;color:var(--text)}
.fi-14__role{font-size:.72rem;color:rgba(250,245,255,.45);margin-bottom:8px}
.fi-14__divider{width:32px;height:1px;background:rgba(255,255,255,.12)}
.fi-14__detail{font-size:.72rem;color:rgba(250,245,255,.55);line-height:1.5}

@keyframes fi-14-flip-reveal{
  to{opacity:1;transform:perspective(800px) rotateY(0deg)}
}
@media(prefers-reduced-motion:reduce){
  .fi-14 *{animation:none!important;opacity:1!important;transform:none!important}
}
```

### 15. Glitch Flash Multi-Step Fade

**Type:** Pure CSS
**Description:** A terminal-style display where the headline stutters into existence through a multi-step opacity flicker keyframe with micro translateX jitter, simulating a signal locking on.

**HTML:**
```html
<div class="fi-15">
  <div class="fi-15__screen">
    <span class="fi-15__line">BOOT SEQUENCE INITIATED...</span>
    <span class="fi-15__line">LOADING KERNEL MODULES...</span>
    <span class="fi-15__line">SIGNAL ACQUIRED. RENDERING...</span>
    <div class="fi-15__glitch-text" data-text="GLITCH FADE">GLITCH FADE</div>
    <div class="fi-15__sub">MULTI-STEP OPACITY FLICKER TECHNIQUE<span class="fi-15__cursor"></span></div>
  </div>
</div>
```

**CSS:**
```css
.fi-15{
  --bg:#050505;--red:#ff2244;--white:#f8f8f8;--dim:#888;
  font-family:'Orbitron',monospace;
  min-height:340px;border-radius:20px;
  display:grid;place-items:center;
  padding:40px;overflow:hidden;position:relative;
}
.fi-15 *,.fi-15 *::before,.fi-15 *::after{box-sizing:border-box;margin:0;padding:0}
.fi-15 ::selection{background:var(--red);color:#fff}

/* glitch-flash fade: multi-step opacity flicker + slight translateX jitter */
.fi-15__screen{text-align:center;position:relative}
.fi-15__line{
  display:block;
  font-family:'Share Tech Mono',monospace;
  font-size:.7rem;letter-spacing:.15em;color:var(--dim);
  margin-bottom:8px;
  opacity:0;animation:fi-15-static .1s steps(1) forwards;
}
.fi-15__line:nth-child(1){animation-delay:.1s}
.fi-15__line:nth-child(2){animation-delay:.2s}
.fi-15__line:nth-child(3){animation-delay:.3s}

.fi-15__glitch-text{
  font-size:clamp(2rem,6vw,4rem);font-weight:900;
  color:var(--white);position:relative;display:inline-block;
  animation:fi-15-glitch-in 1.2s steps(1) .4s forwards;opacity:0;
}
.fi-15__glitch-text::before,.fi-15__glitch-text::after{
  content:attr(data-text);position:absolute;inset:0;
}
.fi-15__glitch-text::before{
  color:var(--red);
  animation:fi-15-ghost-r 1.2s steps(1) .4s forwards;opacity:0;
  clip-path:polygon(0 20%,100% 20%,100% 45%,0 45%);
}
.fi-15__glitch-text::after{
  color:#0ff;
  animation:fi-15-ghost-l 1.2s steps(1) .4s forwards;opacity:0;
  clip-path:polygon(0 55%,100% 55%,100% 80%,0 80%);
}
.fi-15__sub{
  font-size:.65rem;letter-spacing:.2em;color:var(--dim);margin-top:16px;
  opacity:0;animation:fi-15-static .1s steps(1) 1.4s forwards;
}
.fi-15__cursor{
  display:inline-block;width:2px;height:1em;background:var(--red);
  vertical-align:middle;margin-left:4px;
  animation:fi-15-blink .8s steps(1) infinite 1.4s;opacity:0;
}

@keyframes fi-15-glitch-in{
  0%{opacity:0;transform:translateX(-4px)}
  5%{opacity:1;transform:translateX(3px)}
  8%{opacity:0;transform:translateX(-2px)}
  12%{opacity:1;transform:translateX(0)}
  20%{opacity:.3;transform:translateX(2px)}
  22%{opacity:1;transform:translateX(0)}
  35%{opacity:.8;transform:translateX(-1px)}
  40%{opacity:1;transform:translateX(0)}
  100%{opacity:1;transform:translateX(0)}
}
@keyframes fi-15-ghost-r{
  0%{opacity:0}5%{opacity:.8;transform:translateX(4px)}
  8%{opacity:0}20%{opacity:.6;transform:translateX(-3px)}
  22%{opacity:0}35%{opacity:.4;transform:translateX(2px)}
  40%{opacity:0}100%{opacity:0}
}
@keyframes fi-15-ghost-l{
  0%{opacity:0}12%{opacity:.7;transform:translateX(-3px)}
  15%{opacity:0}28%{opacity:.5;transform:translateX(2px)}
  30%{opacity:0}100%{opacity:0}
}
@keyframes fi-15-static{to{opacity:1}}
@keyframes fi-15-blink{0%,100%{opacity:1}50%{opacity:0}}

@media(prefers-reduced-motion:reduce){
  .fi-15 *{animation:none!important;opacity:1!important;transform:none!important}
}
```

### 16. Cascade Letter Drop Fade

**Type:** CSS + JS
**Description:** JavaScript splits a headline character-by-character into spans with staggered animation-delay; each letter drops in from above with a spring bounce, creating a raindrop cascade.

**HTML:**
```html
<div class="fi-16" id="fi-16-root">
  <div>
    <div class="fi-16__label">Letter cascade</div>
    <span class="fi-16__title" id="fi-16-title">Cascade Letters</span>
    <p class="fi-16__sub" id="fi-16-sub" style="animation-delay:1.4s">JavaScript splits every character into a span with a staggered animation-delay, creating a raindrop-style letter cascade.</p>
    <div class="fi-16__row" id="fi-16-row" style="animation-delay:1.7s">
      <span class="fi-16__chip">JS split</span>
      <span class="fi-16__chip">nth-child delay</span>
      <span class="fi-16__chip">spring bounce</span>
    </div>
    <div class="fi-16__replay" id="fi-16-replay" style="animation-delay:1.9s">↺ replay animation</div>
  </div>
</div>
```

**CSS:**
```css
.fi-16{
  --bg:#090b14;--gold:#f59e0b;--amber:#fbbf24;--text:#fffbeb;
  font-family:'DM Sans',sans-serif;
  min-height:340px;border-radius:20px;
  display:grid;place-items:center;
  padding:40px;overflow:hidden;text-align:center;
}
.fi-16 *,.fi-16 *::before,.fi-16 *::after{box-sizing:border-box;margin:0;padding:0}
.fi-16 ::selection{background:var(--gold);color:#000}

.fi-16__label{
  font-size:.7rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,251,235,.35);margin-bottom:20px;
}
.fi-16__title{
  font-family:'Syne',sans-serif;font-size:clamp(1.8rem,4vw,3rem);font-weight:800;
  color:var(--text);line-height:1.2;margin-bottom:16px;display:block;
}
/* JS injects letter spans */
.fi-16__letter{
  display:inline-block;
  opacity:0;transform:translateY(-20px) rotate(-8deg);
  animation:fi-16-letter-drop .5s cubic-bezier(.34,1.56,.64,1) forwards;
}
.fi-16__letter.fi-16--space{margin-right:.35em}

.fi-16__sub{
  font-size:.95rem;color:rgba(255,251,235,.45);line-height:1.6;max-width:400px;
  margin-bottom:28px;opacity:0;animation:fi-16-fade-up .6s ease forwards;
}
.fi-16__row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;opacity:0;animation:fi-16-fade-up .5s ease forwards}

.fi-16__chip{
  padding:7px 16px;border-radius:20px;font-size:.75rem;font-weight:700;
  background:rgba(245,158,11,.12);border:1px solid rgba(245,158,11,.25);color:var(--gold);
  transition:background .2s,transform .2s;cursor:default;
}
.fi-16__chip:hover{background:rgba(245,158,11,.22);transform:translateY(-2px)}
.fi-16__replay{
  margin-top:18px;display:inline-block;font-size:.72rem;font-weight:600;
  color:rgba(255,251,235,.35);cursor:pointer;border-bottom:1px dashed rgba(255,255,255,.15);
  padding-bottom:2px;transition:color .2s;
  opacity:0;animation:fi-16-fade-up .5s ease forwards;
}
.fi-16__replay:hover{color:var(--gold)}

@keyframes fi-16-letter-drop{to{opacity:1;transform:translateY(0) rotate(0deg)}}
@keyframes fi-16-fade-up{to{opacity:1}}

@media(prefers-reduced-motion:reduce){
  .fi-16 *{animation:none!important;opacity:1!important;transform:none!important}
}
```

**JS:**
```js
(function(){
  const titleEl = document.getElementById('fi-16-title');
  const replay  = document.getElementById('fi-16-replay');
  const STEP = 0.05;

  function animate(){
    const text = 'Cascade Letters';
    titleEl.innerHTML = '';
    [...text].forEach((ch, i)=>{
      const span = document.createElement('span');
      span.className = 'fi-16__letter' + (ch === ' ' ? ' fi-16--space' : '');
      span.textContent = ch === ' ' ? '\u00a0' : ch;
      span.style.animationDelay = (0.1 + i * STEP)+'s';
      titleEl.appendChild(span);
    });
  }

  animate();

  replay.addEventListener('click',()=>{
    titleEl.querySelectorAll('.fi-16__letter').forEach(s=>{
      s.style.animation='none';void s.offsetWidth;
      s.style.animation='fi-16-letter-drop .5s cubic-bezier(.34,1.56,.64,1) forwards';
    });
  });
})();
```

---
## 10 CSS Feature Sections

URL: https://codefronts.com/layouts/css-feature-sections/
Description: 10 hand-coded CSS feature section templates covering the patterns landing pages actually need in 2026 — icon grid with stats strip, Apple-style bento grid layout, dark glassmorphism with animated blobs, scroll-reveal alternating rows, developer SDK with syntax-highlighted code preview, side-by-side comparison table with pricing cards, full SaaS hero with mesh-gradient + social proof, 3D mousemove tilt cards, parchment-cream floating phone mockup, and Linear-style product roadmap timeline. 7 of 10 demos are 100% pure CSS — drop into any stack. The 3 JS-enhanced demos (scroll-reveal, 3D tilt, timeline-glow) degrade gracefully if JavaScript is disabled. Every demo respects prefers-reduced-motion, uses scoped .fsNN__* class names so multiple can coexist, and ships MIT-licensed.
Demo count: 10

### 01. CSS Feature Section with Icon Grid

**Type:** Pure CSS
**Description:** A dark-mode icon-grid platform feature section — six cards on a `#09090f` background, each with a coloured icon badge, per-card radial glow on hover, and a stats strip with 99.99% uptime, 300+ nodes, and <30s deploy time. Syne display + Inter body.

**HTML:**
```html
<section class="fs01">
  <div class="fs01__inner">
    <div class="fs01__eyebrow">Platform capabilities</div>
    <h2 class="fs01__headline">Everything you need to<br><span>ship faster</span></h2>
    <p class="fs01__sub">A complete toolkit for modern teams. Automate the repetitive, focus on what matters, and deploy with confidence — every single time.</p>

    <div class="fs01__grid">
      <div class="fs01__card">
        <div class="fs01__icon-wrap">⚡</div>
        <div class="fs01__card-title">Instant Deployments</div>
        <div class="fs01__card-body">Push to main and go live in under 30 seconds. Zero-downtime rollouts with automatic health checks built in.</div>
        <span class="fs01__card-tag">Infrastructure</span>
      </div>
      <div class="fs01__card">
        <div class="fs01__icon-wrap">🛡️</div>
        <div class="fs01__card-title">Edge Security</div>
        <div class="fs01__card-body">DDoS protection, WAF rules, and bot mitigation run at the network edge — before traffic ever reaches your app.</div>
        <span class="fs01__card-tag">Security</span>
      </div>
      <div class="fs01__card">
        <div class="fs01__icon-wrap">📊</div>
        <div class="fs01__card-title">Real-Time Analytics</div>
        <div class="fs01__card-body">P99 latencies, error budgets, and user flows surface automatically. No instrumentation required on your end.</div>
        <span class="fs01__card-tag">Observability</span>
      </div>
      <div class="fs01__card">
        <div class="fs01__icon-wrap">🔁</div>
        <div class="fs01__card-title">Smart Rollbacks</div>
        <div class="fs01__card-body">Detect regressions automatically and roll back to the last stable release — database migrations included.</div>
        <span class="fs01__card-tag">Reliability</span>
      </div>
      <div class="fs01__card">
        <div class="fs01__icon-wrap">🌐</div>
        <div class="fs01__card-title">Global CDN</div>
        <div class="fs01__card-body">Static assets and edge functions served from 300+ PoPs worldwide. Sub-20ms cache hits across six continents.</div>
        <span class="fs01__card-tag">Performance</span>
      </div>
      <div class="fs01__card">
        <div class="fs01__icon-wrap">🤝</div>
        <div class="fs01__card-title">Team Workflows</div>
        <div class="fs01__card-body">Preview environments per pull request, role-based access, and audit logs that satisfy even your strictest compliance team.</div>
        <span class="fs01__card-tag">Collaboration</span>
      </div>
    </div>

    <div class="fs01__bottom">
      <a href="#" class="fs01__cta">Start for free →</a>
      <div class="fs01__stats">
        <div>
          <div class="fs01__stat-num">99.99%</div>
          <div class="fs01__stat-label">Uptime SLA</div>
        </div>
        <div>
          <div class="fs01__stat-num">300+</div>
          <div class="fs01__stat-label">Edge nodes</div>
        </div>
        <div>
          <div class="fs01__stat-num">&lt;30s</div>
          <div class="fs01__stat-label">Deploy time</div>
        </div>
      </div>
    </div>
  </div>
</section>
```

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

.fs01 {
  --bg: #09090f;
  --surface: #111118;
  --border: rgba(255,255,255,0.07);
  --text: #e8e8f0;
  --muted: #6b6b85;
  --accent1: #7c6dfa;
  --accent2: #e05aff;
  --accent3: #00e5c3;
  --card-bg: #13131c;
  font-family: 'Inter', sans-serif;
  background: var(--bg);
  color: var(--text);
  padding: 96px 24px;
  min-height: 100vh;
}

.fs01__inner {
  max-width: 1100px;
  margin: 0 auto;
}

.fs01__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent1);
  background: rgba(124,109,250,0.1);
  border: 1px solid rgba(124,109,250,0.25);
  padding: 6px 14px;
  border-radius: 100px;
  margin-bottom: 28px;
}

.fs01__eyebrow::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent1);
  box-shadow: 0 0 8px var(--accent1);
}

.fs01__headline {
  font-family: 'Syne', sans-serif;
  font-size: clamp(36px, 5vw, 62px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin-bottom: 20px;
  max-width: 680px;
}

.fs01__headline span {
  background: linear-gradient(135deg, var(--accent1), var(--accent2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.fs01__sub {
  font-size: 17px;
  line-height: 1.7;
  color: var(--muted);
  max-width: 520px;
  margin-bottom: 72px;
}

.fs01__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 2px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
}

.fs01__card {
  background: var(--card-bg);
  padding: 36px 32px;
  position: relative;
  transition: background 0.25s;
  cursor: default;
}

.fs01__card::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.3s;
  background: radial-gradient(circle at 50% 0%, rgba(124,109,250,0.08), transparent 70%);
}

.fs01__card:hover { background: #16162000; }
.fs01__card:hover::after { opacity: 1; }

.fs01__icon-wrap {
  width: 48px; height: 48px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
  font-size: 22px;
  position: relative;
  z-index: 1;
}

.fs01__card:nth-child(1) .fs01__icon-wrap { background: rgba(124,109,250,0.15); }
.fs01__card:nth-child(2) .fs01__icon-wrap { background: rgba(224,90,255,0.15); }
.fs01__card:nth-child(3) .fs01__icon-wrap { background: rgba(0,229,195,0.15); }
.fs01__card:nth-child(4) .fs01__icon-wrap { background: rgba(255,160,64,0.15); }
.fs01__card:nth-child(5) .fs01__icon-wrap { background: rgba(255,80,120,0.15); }
.fs01__card:nth-child(6) .fs01__icon-wrap { background: rgba(64,180,255,0.15); }

.fs01__card-title {
  font-family: 'Syne', sans-serif;
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 10px;
  color: #fff;
  position: relative;
  z-index: 1;
}

.fs01__card-body {
  font-size: 14px;
  line-height: 1.65;
  color: var(--muted);
  position: relative;
  z-index: 1;
}

.fs01__card-tag {
  display: inline-block;
  margin-top: 16px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 6px;
  position: relative;
  z-index: 1;
}

.fs01__card:nth-child(1) .fs01__card-tag { color: var(--accent1); background: rgba(124,109,250,0.1); }
.fs01__card:nth-child(2) .fs01__card-tag { color: var(--accent2); background: rgba(224,90,255,0.1); }
.fs01__card:nth-child(3) .fs01__card-tag { color: var(--accent3); background: rgba(0,229,195,0.1); }
.fs01__card:nth-child(4) .fs01__card-tag { color: #ffa040; background: rgba(255,160,64,0.1); }
.fs01__card:nth-child(5) .fs01__card-tag { color: #ff5078; background: rgba(255,80,120,0.1); }
.fs01__card:nth-child(6) .fs01__card-tag { color: #40b4ff; background: rgba(64,180,255,0.1); }

.fs01__bottom {
  margin-top: 64px;
  display: flex;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
}

.fs01__cta {
  display: inline-flex; align-items: center; gap: 10px;
  background: linear-gradient(135deg, var(--accent1), var(--accent2));
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  padding: 14px 28px;
  border-radius: 12px;
  text-decoration: none;
  transition: opacity 0.2s, transform 0.2s;
}

.fs01__cta:hover { opacity: 0.9; transform: translateY(-1px); }

.fs01__stats {
  display: flex; gap: 32px;
}

.fs01__stat-num {
  font-family: 'Syne', sans-serif;
  font-size: 28px;
  font-weight: 800;
  background: linear-gradient(135deg, #fff, var(--muted));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.fs01__stat-label {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}

@media (max-width: 640px) {
  .fs01__grid { grid-template-columns: 1fr; }
  .fs01__bottom { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .fs01__card, .fs01__card::after, .fs01__cta { transition: none; }
}
```

### 02. CSS Bento Grid Features Layout

**Type:** Pure CSS
**Description:** A warm-cream bento-grid layout with five asymmetric CSS Grid cells (dark ink, forest green, white, terracotta, and deep navy) showcasing animated bar meters, a large metric number, and an orbiting dot animation. Fraunces serif + DM Sans.

**HTML:**
```html
<section class="fs02">
  <div class="fs02__inner">
    <div class="fs02__header">
      <div class="fs02__label">Why teams choose us</div>
      <h2 class="fs02__headline">The platform that<br>works <em>beautifully</em> at scale</h2>
    </div>

    <div class="fs02__bento">
      <div class="fs02__cell fs02__cell--a">
        <span class="fs02__cell-tag">Workflow</span>
        <div class="fs02__cell-title">From idea to production in one tool</div>
        <div class="fs02__cell-body">Design, prototype, review, and deploy — without leaving a single workspace. Your entire product lifecycle lives here.</div>
        <div class="fs02__bg-num">01</div>
      </div>

      <div class="fs02__cell fs02__cell--b">
        <span class="fs02__cell-tag">Performance</span>
        <div class="fs02__cell-title">Built for speed without trade-offs</div>
        <div class="fs02__cell-bars fs02__bars">
          <div class="fs02__bar-row">
            <span class="fs02__bar-label">Build time</span>
            <div class="fs02__bar-track"><div class="fs02__bar-fill" style="--w:88%;width:88%;--delay:0s"></div></div>
            <span style="font-size:12px;opacity:.7">88%</span>
          </div>
          <div class="fs02__bar-row">
            <span class="fs02__bar-label">Uptime</span>
            <div class="fs02__bar-track"><div class="fs02__bar-fill" style="--w:99%;width:99%;--delay:.1s"></div></div>
            <span style="font-size:12px;opacity:.7">99%</span>
          </div>
          <div class="fs02__bar-row">
            <span class="fs02__bar-label">Cache hits</span>
            <div class="fs02__bar-track"><div class="fs02__bar-fill" style="--w:76%;width:76%;--delay:.2s"></div></div>
            <span style="font-size:12px;opacity:.7">76%</span>
          </div>
          <div class="fs02__bar-row">
            <span class="fs02__bar-label">Savings</span>
            <div class="fs02__bar-track"><div class="fs02__bar-fill" style="--w:62%;width:62%;--delay:.3s"></div></div>
            <span style="font-size:12px;opacity:.7">62%</span>
          </div>
        </div>
      </div>

      <div class="fs02__cell fs02__cell--c">
        <span class="fs02__cell-tag">Scale</span>
        <div class="fs02__metric">12M</div>
        <div class="fs02__metric-sub">Requests handled per second at peak</div>
        <div class="fs02__cell-body" style="margin-top:12px">Elastic infrastructure that scales automatically without capacity planning.</div>
      </div>

      <div class="fs02__cell fs02__cell--d">
        <span class="fs02__cell-tag">Security</span>
        <div class="fs02__cell-title">Zero-trust by default</div>
        <div class="fs02__cell-body">Every request is authenticated at the edge. SSO, SAML, and hardware key support out of the box.</div>
      </div>

      <div class="fs02__cell fs02__cell--e">
        <span class="fs02__cell-tag">Integrations</span>
        <div class="fs02__cell-title">Connects to your whole stack</div>
        <div class="fs02__cell-body">GitHub, Slack, Datadog, PagerDuty — 200+ integrations and a full API for anything custom.</div>
        <div class="fs02__orbit">
          <div class="fs02__orbit-ring">
            <div class="fs02__orbit-dot"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
```

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

.fs02 {
  --bg: #f5f0e8;
  --ink: #1a1612;
  --muted: #7a7065;
  --card1: #1a1612;
  --card2: #2c5f3c;
  --card3: #fff;
  --card4: #e8623a;
  --card5: #fff;
  --card6: #2a2060;
  --accent: #e8623a;
  font-family: 'DM Sans', sans-serif;
  background: var(--bg);
  color: var(--ink);
  padding: 80px 24px;
  min-height: 100vh;
}

.fs02__inner { max-width: 1100px; margin: 0 auto; }

.fs02__header { margin-bottom: 56px; }

.fs02__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
}

.fs02__headline {
  font-family: 'Fraunces', serif;
  font-size: clamp(38px, 5.5vw, 68px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  max-width: 640px;
}

.fs02__headline em {
  font-style: italic;
  color: var(--accent);
}

.fs02__bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: auto;
  gap: 12px;
}

/* Card base */
.fs02__cell {
  border-radius: 20px;
  padding: 36px;
  position: relative;
  overflow: hidden;
}

.fs02__cell--a {
  grid-column: span 5;
  background: var(--card1);
  color: #f0ece4;
  min-height: 280px;
}
.fs02__cell--b {
  grid-column: span 7;
  background: var(--card2);
  color: #d4eedb;
  min-height: 280px;
}
.fs02__cell--c {
  grid-column: span 4;
  background: var(--card3);
  border: 1.5px solid rgba(0,0,0,0.1);
  min-height: 220px;
}
.fs02__cell--d {
  grid-column: span 4;
  background: var(--card4);
  color: #fff;
  min-height: 220px;
}
.fs02__cell--e {
  grid-column: span 4;
  background: var(--card6);
  color: #c8c4ee;
  min-height: 220px;
}

.fs02__cell-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 100px;
  margin-bottom: 24px;
}

.fs02__cell--a .fs02__cell-tag { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.6); }
.fs02__cell--b .fs02__cell-tag { background: rgba(255,255,255,0.1); color: rgba(212,238,219,0.7); }
.fs02__cell--c .fs02__cell-tag { background: #f0ece4; color: #7a7065; }
.fs02__cell--d .fs02__cell-tag { background: rgba(255,255,255,0.2); color: #fff; }
.fs02__cell--e .fs02__cell-tag { background: rgba(255,255,255,0.1); color: rgba(200,196,238,0.7); }

.fs02__cell-title {
  font-family: 'Fraunces', serif;
  font-size: clamp(22px, 2.5vw, 30px);
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: 12px;
}

.fs02__cell-body {
  font-size: 14px;
  line-height: 1.65;
  opacity: 0.72;
  max-width: 340px;
}

/* Decorative large number */
.fs02__cell--a .fs02__bg-num {
  position: absolute;
  bottom: -20px; right: -10px;
  font-family: 'Fraunces', serif;
  font-size: 140px;
  font-weight: 800;
  color: rgba(255,255,255,0.04);
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

/* Progress bars in cell b */
.fs02__bars { margin-top: 24px; display: flex; flex-direction: column; gap: 12px; }
.fs02__bar-row { display: flex; align-items: center; gap: 12px; }
.fs02__bar-label { font-size: 12px; opacity: 0.7; min-width: 80px; }
.fs02__bar-track {
  flex: 1; height: 6px;
  background: rgba(255,255,255,0.15);
  border-radius: 100px;
  overflow: hidden;
}
.fs02__bar-fill {
  height: 100%;
  background: #5ebd7a;
  border-radius: 100px;
  animation: fs02-grow 1.2s cubic-bezier(.4,0,.2,1) both;
  animation-delay: var(--delay, 0s);
}
@keyframes fs02-grow { from { width: 0 } }

/* Metric in cell c */
.fs02__metric {
  font-family: 'Fraunces', serif;
  font-size: 64px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1;
  margin: 20px 0 8px;
}
.fs02__metric-sub { font-size: 13px; color: var(--muted); }

/* Icon orbit cell e */
.fs02__orbit {
  position: absolute;
  right: 24px; bottom: 24px;
  width: 80px; height: 80px;
}
.fs02__orbit-ring {
  width: 80px; height: 80px;
  border: 1.5px dashed rgba(255,255,255,0.2);
  border-radius: 50%;
  animation: fs02-spin 8s linear infinite;
}
.fs02__orbit-dot {
  position: absolute;
  top: -5px; left: 50%; transform: translateX(-50%);
  width: 10px; height: 10px;
  background: #8b82f0;
  border-radius: 50%;
}
@keyframes fs02-spin { to { transform: rotate(360deg); } }

@media (max-width: 700px) {
  .fs02__cell--a, .fs02__cell--b,
  .fs02__cell--c, .fs02__cell--d, .fs02__cell--e {
    grid-column: span 12;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fs02__bar-fill { animation: none; width: var(--w); }
  .fs02__orbit-ring { animation: none; }
}
```

### 03. CSS Feature Section Dark Glassmorphism

**Type:** Pure CSS
**Description:** Three animated radial-blob ambients behind a six-card frosted-glass grid on deep `#04040a`. Each card has a per-color glow that intensifies on hover, numbered 01–06, with link arrows that widen on hover. Space Grotesk + Space Mono.

**HTML:**
```html
<section class="fs03">
  <div class="fs03__blob fs03__blob--1"></div>
  <div class="fs03__blob fs03__blob--2"></div>
  <div class="fs03__blob fs03__blob--3"></div>

  <div class="fs03__inner">
    <div class="fs03__top">
      <div>
        <div class="fs03__badge">// PLATFORM_FEATURES v2.5</div>
        <h2 class="fs03__headline">Craft experiences<br>that feel <mark>alive</mark></h2>
      </div>
      <p class="fs03__right-text">Six core capabilities designed from the ground up for 2025 product teams. No bolt-ons, no legacy APIs — just clean, powerful primitives that do exactly what they say.</p>
    </div>

    <div class="fs03__grid">
      <div class="fs03__card">
        <div class="fs03__card-glow"></div>
        <div class="fs03__card-num">01 / 06</div>
        <span class="fs03__card-icon">🧠</span>
        <div class="fs03__card-title">AI-Assisted Routing</div>
        <div class="fs03__card-body">Predict user intent and route requests to the optimal compute tier before they complete — reducing latency by up to 60%.</div>
        <a href="#" class="fs03__card-link">Explore →</a>
      </div>
      <div class="fs03__card">
        <div class="fs03__card-glow"></div>
        <div class="fs03__card-num">02 / 06</div>
        <span class="fs03__card-icon">🔐</span>
        <div class="fs03__card-title">Passkey Authentication</div>
        <div class="fs03__card-body">Native WebAuthn support with biometric fallback. Drop password forms entirely — your users deserve better UX.</div>
        <a href="#" class="fs03__card-link">Explore →</a>
      </div>
      <div class="fs03__card">
        <div class="fs03__card-glow"></div>
        <div class="fs03__card-num">03 / 06</div>
        <span class="fs03__card-icon">📡</span>
        <div class="fs03__card-title">Real-Time Sync Engine</div>
        <div class="fs03__card-body">CRDTs under the hood. Collaborative editing, offline-first state, and live cursors with zero config on your part.</div>
        <a href="#" class="fs03__card-link">Explore →</a>
      </div>
      <div class="fs03__card">
        <div class="fs03__card-glow"></div>
        <div class="fs03__card-num">04 / 06</div>
        <span class="fs03__card-icon">⚙️</span>
        <div class="fs03__card-title">Workflow Automation</div>
        <div class="fs03__card-body">Trigger-action pipelines with branching logic, retry policies, and a visual debugger that shows exactly what ran.</div>
        <a href="#" class="fs03__card-link">Explore →</a>
      </div>
      <div class="fs03__card">
        <div class="fs03__card-glow"></div>
        <div class="fs03__card-num">05 / 06</div>
        <span class="fs03__card-icon">📈</span>
        <div class="fs03__card-title">Growth Analytics</div>
        <div class="fs03__card-body">Funnel analysis, cohort retention, and A/B test significance — all computed in-platform with no data leaving your region.</div>
        <a href="#" class="fs03__card-link">Explore →</a>
      </div>
      <div class="fs03__card">
        <div class="fs03__card-glow"></div>
        <div class="fs03__card-num">06 / 06</div>
        <span class="fs03__card-icon">🌍</span>
        <div class="fs03__card-title">Regional Compliance</div>
        <div class="fs03__card-body">GDPR, CCPA, and HIPAA data residency enforced at the storage layer. Compliance reports generated on demand.</div>
        <a href="#" class="fs03__card-link">Explore →</a>
      </div>
    </div>

    <div class="fs03__sep"></div>

    <div class="fs03__bottom">
      <div class="fs03__trust">
        <div class="fs03__dots">
          <div class="fs03__dot"></div>
          <div class="fs03__dot"></div>
          <div class="fs03__dot"></div>
        </div>
        Trusted by 4,200+ product teams globally
      </div>
      <div class="fs03__cta-row">
        <a href="#" class="fs03__btn fs03__btn--ghost">View docs</a>
        <a href="#" class="fs03__btn fs03__btn--primary">Get started free →</a>
      </div>
    </div>
  </div>
</section>
```

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

.fs03 {
  font-family: 'Space Grotesk', sans-serif;
  min-height: 100vh;
  padding: 80px 24px;
  position: relative;
  overflow: hidden;
  background: #04040a;
  color: #e2e0f0;
}

/* Ambient blobs */
.fs03__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  animation: fs03-pulse 8s ease-in-out infinite;
}
.fs03__blob--1 { width: 500px; height: 500px; background: #5b3cf7; opacity: .28; top: -100px; left: -100px; animation-delay: 0s; }
.fs03__blob--2 { width: 400px; height: 400px; background: #c73ef0; opacity: .22; top: 30%; right: -80px; animation-delay: -3s; }
.fs03__blob--3 { width: 350px; height: 350px; background: #1be8c8; opacity: .18; bottom: -60px; left: 30%; animation-delay: -5s; }

@keyframes fs03-pulse {
  0%, 100% { transform: scale(1) translate(0,0); }
  50% { transform: scale(1.12) translate(20px,-20px); }
}

.fs03__inner {
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.fs03__top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: end;
  margin-bottom: 56px;
}

.fs03__badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  color: #1be8c8;
  background: rgba(27,232,200,0.08);
  border: 1px solid rgba(27,232,200,0.2);
  padding: 5px 12px;
  border-radius: 6px;
  margin-bottom: 20px;
  letter-spacing: 0.08em;
}

.fs03__headline {
  font-size: clamp(32px, 4.5vw, 58px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.025em;
}

.fs03__headline mark {
  background: linear-gradient(90deg, #7b5cf7, #c73ef0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.fs03__right-text {
  font-size: 16px;
  line-height: 1.7;
  color: rgba(226,224,240,0.55);
  padding-bottom: 4px;
}

.fs03__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.fs03__card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 18px;
  padding: 32px;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  position: relative;
  overflow: hidden;
  transition: border-color 0.3s, transform 0.3s;
}

.fs03__card:hover {
  border-color: rgba(255,255,255,0.2);
  transform: translateY(-4px);
}

.fs03__card-glow {
  position: absolute;
  width: 180px; height: 180px;
  border-radius: 50%;
  filter: blur(50px);
  pointer-events: none;
  top: -60px; right: -40px;
  opacity: 0.35;
  transition: opacity 0.3s;
}

.fs03__card:hover .fs03__card-glow { opacity: 0.6; }

.fs03__card:nth-child(1) .fs03__card-glow { background: #7b5cf7; }
.fs03__card:nth-child(2) .fs03__card-glow { background: #c73ef0; }
.fs03__card:nth-child(3) .fs03__card-glow { background: #1be8c8; }
.fs03__card:nth-child(4) .fs03__card-glow { background: #f7a03c; }
.fs03__card:nth-child(5) .fs03__card-glow { background: #f74460; }
.fs03__card:nth-child(6) .fs03__card-glow { background: #3cb8f7; }

.fs03__card-num {
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  color: rgba(226,224,240,0.3);
  margin-bottom: 20px;
  letter-spacing: 0.1em;
}

.fs03__card-icon {
  font-size: 32px;
  margin-bottom: 16px;
  display: block;
}

.fs03__card-title {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 10px;
  color: #fff;
}

.fs03__card-body {
  font-size: 14px;
  line-height: 1.65;
  color: rgba(226,224,240,0.5);
}

.fs03__card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 20px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: gap 0.2s;
}

.fs03__card:nth-child(1) .fs03__card-link { color: #9e85f9; }
.fs03__card:nth-child(2) .fs03__card-link { color: #db80f7; }
.fs03__card:nth-child(3) .fs03__card-link { color: #1be8c8; }
.fs03__card:nth-child(4) .fs03__card-link { color: #f7a03c; }
.fs03__card:nth-child(5) .fs03__card-link { color: #f74460; }
.fs03__card:nth-child(6) .fs03__card-link { color: #3cb8f7; }

.fs03__card-link:hover { gap: 10px; }

/* Separator line */
.fs03__sep {
  width: 100%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
  margin: 56px 0;
}

.fs03__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
}

.fs03__trust {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px;
  color: rgba(226,224,240,0.45);
}

.fs03__dots {
  display: flex; gap: 6px;
}
.fs03__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
}
.fs03__dot:nth-child(1) { background: #7b5cf7; }
.fs03__dot:nth-child(2) { background: #c73ef0; }
.fs03__dot:nth-child(3) { background: #1be8c8; }

.fs03__cta-row { display: flex; gap: 12px; }

.fs03__btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14px;
  font-weight: 600;
  padding: 12px 24px;
  border-radius: 10px;
  text-decoration: none;
  transition: transform 0.2s, opacity 0.2s;
  cursor: pointer;
}
.fs03__btn:hover { transform: translateY(-2px); opacity: 0.9; }
.fs03__btn--primary { background: linear-gradient(135deg, #7b5cf7, #c73ef0); color: #fff; }
.fs03__btn--ghost { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); color: #e2e0f0; }

@media (max-width: 768px) {
  .fs03__top { grid-template-columns: 1fr; }
  .fs03__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 500px) {
  .fs03__grid { grid-template-columns: 1fr; }
  .fs03__bottom { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .fs03__blob, .fs03__card, .fs03__card-link { animation: none; transition: none; }
}
```

### 04. CSS Animated Feature Cards Scroll Reveal

**Type:** CSS + JS
**Description:** A clean light-background feature section with four alternating left-right rows that fade-in via IntersectionObserver on scroll. Each row pairs long-form copy and pill tags with an abstract UI mockup illustration. Manrope.

**HTML:**
```html
<section class="fs04">
  <div class="fs04__inner">
    <div class="fs04__head">
      <div class="fs04__kicker">How it works</div>
      <h2 class="fs04__h2">Fewer tools.<br><span>Better results.</span></h2>
      <p class="fs04__desc">Four core capabilities that replace a whole stack of point solutions your team is already paying for.</p>
    </div>

    <div class="fs04__list">
      <div class="fs04__item">
        <div class="fs04__item-content">
          <div class="fs04__item-num">CAPABILITY 01</div>
          <div class="fs04__item-title">Unified data pipeline with zero ETL</div>
          <div class="fs04__item-body">Stream events from any source directly into your warehouse or lakehouse. Schema inference, deduplication, and backfill handled automatically — no pipeline code required.</div>
          <div class="fs04__item-pills">
            <span class="fs04__pill">Firehose</span>
            <span class="fs04__pill">Auto-schema</span>
            <span class="fs04__pill">Backfill</span>
          </div>
        </div>
        <div class="fs04__item-visual fs04__vis--a">
          <div class="fs04__mockup">
            <div class="fs04__mock-bar fs04__mock-bar--accent"></div>
            <div class="fs04__mock-bar fs04__mock-bar--sm"></div>
            <div class="fs04__mock-chart">
              <div class="fs04__mock-bar2" style="height:40%"></div>
              <div class="fs04__mock-bar2" style="height:65%"></div>
              <div class="fs04__mock-bar2" style="height:50%"></div>
              <div class="fs04__mock-bar2" style="height:80%"></div>
              <div class="fs04__mock-bar2" style="height:60%"></div>
              <div class="fs04__mock-bar2" style="height:90%"></div>
              <div class="fs04__mock-bar2" style="height:70%"></div>
            </div>
          </div>
        </div>
      </div>

      <div class="fs04__item">
        <div class="fs04__item-content">
          <div class="fs04__item-num">CAPABILITY 02</div>
          <div class="fs04__item-title">Semantic search across all your content</div>
          <div class="fs04__item-body">Vector embeddings generated for every document, ticket, and message. Natural language queries return results ranked by meaning, not just keywords — in under 100ms.</div>
          <div class="fs04__item-pills">
            <span class="fs04__pill">Vector DB</span>
            <span class="fs04__pill">RAG-ready</span>
            <span class="fs04__pill">&lt;100ms p99</span>
          </div>
        </div>
        <div class="fs04__item-visual fs04__vis--b">
          <div class="fs04__mockup">
            <div class="fs04__mock-bar fs04__mock-bar--accent" style="background: linear-gradient(90deg,#f7a840,#f7d040);width:80%"></div>
            <div class="fs04__mock-bar fs04__mock-bar--lg"></div>
            <div class="fs04__mock-grid">
              <div class="fs04__mock-block fs04__mock-block--c"></div>
              <div class="fs04__mock-block fs04__mock-block--c"></div>
              <div class="fs04__mock-block fs04__mock-block--c"></div>
              <div class="fs04__mock-block fs04__mock-block--c"></div>
            </div>
          </div>
        </div>
      </div>

      <div class="fs04__item">
        <div class="fs04__item-content">
          <div class="fs04__item-num">CAPABILITY 03</div>
          <div class="fs04__item-title">Visual workflow builder, no code needed</div>
          <div class="fs04__item-body">Drag-and-drop automations that talk to your existing APIs. Built-in retry logic, dead-letter queues, and SLA alerts keep processes running without hand-holding.</div>
          <div class="fs04__item-pills">
            <span class="fs04__pill">No-code</span>
            <span class="fs04__pill">API webhooks</span>
            <span class="fs04__pill">SLA alerts</span>
          </div>
        </div>
        <div class="fs04__item-visual fs04__vis--c">
          <div class="fs04__mockup">
            <div class="fs04__mock-bar fs04__mock-bar--accent" style="background:linear-gradient(90deg,#52c97b,#a0eda0);width:50%"></div>
            <div class="fs04__mock-bar fs04__mock-bar--md"></div>
            <div class="fs04__mock-grid">
              <div class="fs04__mock-block fs04__mock-block--d"></div>
              <div class="fs04__mock-block fs04__mock-block--d"></div>
              <div class="fs04__mock-block" style="background:rgba(82,201,123,0.3)"></div>
              <div class="fs04__mock-block"></div>
            </div>
          </div>
        </div>
      </div>

      <div class="fs04__item fs04__last">
        <div class="fs04__item-content">
          <div class="fs04__item-num">CAPABILITY 04</div>
          <div class="fs04__item-title">Role-aware access with fine-grained audit</div>
          <div class="fs04__item-body">Attribute-based permissions that follow your org chart. Every action logged to an immutable audit trail, queryable by time, user, resource, and outcome.</div>
          <div class="fs04__item-pills">
            <span class="fs04__pill">ABAC</span>
            <span class="fs04__pill">Immutable logs</span>
            <span class="fs04__pill">SOC 2 ready</span>
          </div>
        </div>
        <div class="fs04__item-visual fs04__vis--d">
          <div class="fs04__mockup">
            <div class="fs04__mock-bar fs04__mock-bar--accent" style="background:linear-gradient(90deg,#b86cf7,#e49cf7);width:70%"></div>
            <div class="fs04__mock-bar fs04__mock-bar--sm"></div>
            <div class="fs04__mock-grid">
              <div class="fs04__mock-block fs04__mock-block--b"></div>
              <div class="fs04__mock-block fs04__mock-block--b"></div>
              <div class="fs04__mock-block"></div>
              <div class="fs04__mock-block fs04__mock-block--b"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
```

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

.fs04 {
  --bg: #fafafa;
  --ink: #111;
  --muted: #777;
  --line: #e8e8e8;
  font-family: 'Manrope', sans-serif;
  background: var(--bg);
  color: var(--ink);
  padding: 100px 24px;
}

.fs04__inner { max-width: 1060px; margin: 0 auto; }

.fs04__head {
  text-align: center;
  margin-bottom: 80px;
}

.fs04__kicker {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 16px;
}

.fs04__h2 {
  font-size: clamp(34px, 5vw, 60px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.07;
  margin-bottom: 18px;
}

.fs04__h2 span {
  position: relative;
  display: inline-block;
}

.fs04__h2 span::after {
  content: '';
  position: absolute;
  left: 0; bottom: 4px;
  width: 100%; height: 8px;
  background: #ffe045;
  z-index: -1;
  border-radius: 2px;
}

.fs04__desc {
  font-size: 17px;
  color: var(--muted);
  max-width: 500px;
  margin: 0 auto;
  line-height: 1.7;
}

/* Cards list — alternating layout */
.fs04__list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.fs04__item {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--line);
  padding: 64px 0;
  align-items: center;
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s cubic-bezier(.4,0,.2,1), transform 0.7s cubic-bezier(.4,0,.2,1);
}

.fs04__item.fs04--visible {
  opacity: 1;
  transform: none;
}

.fs04__item:nth-child(even) .fs04__item-visual { order: -1; }

.fs04__item-content { padding: 0 48px 0 0; }
.fs04__item:nth-child(even) .fs04__item-content { padding: 0 0 0 48px; }

.fs04__item-num {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin-bottom: 20px;
}

.fs04__item-title {
  font-size: clamp(22px, 2.5vw, 32px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: 16px;
}

.fs04__item-body {
  font-size: 15px;
  line-height: 1.7;
  color: var(--muted);
  margin-bottom: 24px;
}

.fs04__item-pills {
  display: flex; flex-wrap: wrap; gap: 8px;
}

.fs04__pill {
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 100px;
  background: #f0f0f0;
  color: #444;
}

/* Visual areas */
.fs04__item-visual {
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 4/3;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fs04__vis--a { background: linear-gradient(135deg, #e8f4ff 0%, #d5eaff 100%); }
.fs04__vis--b { background: linear-gradient(135deg, #fff4e0 0%, #ffe8cc 100%); }
.fs04__vis--c { background: linear-gradient(135deg, #f0ffe8 0%, #d8f5cc 100%); }
.fs04__vis--d { background: linear-gradient(135deg, #f8e8ff 0%, #eecefd 100%); }

/* Abstract UI mockup inside each */
.fs04__mockup {
  width: 85%;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.12);
  padding: 20px;
}

.fs04__mock-bar {
  height: 8px;
  border-radius: 4px;
  margin-bottom: 10px;
  background: #eee;
}
.fs04__mock-bar--accent { background: linear-gradient(90deg, #6c8ef7, #9c6cf7); width: 60%; }
.fs04__mock-bar--sm { width: 40%; }
.fs04__mock-bar--md { width: 70%; }
.fs04__mock-bar--lg { width: 90%; }

.fs04__mock-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px;
}
.fs04__mock-block {
  height: 48px;
  border-radius: 8px;
  background: #f5f5f5;
}
.fs04__mock-block--a { background: rgba(108,142,247,0.15); }
.fs04__mock-block--b { background: rgba(156,108,247,0.15); }
.fs04__mock-block--c { background: rgba(247,160,108,0.15); }
.fs04__mock-block--d { background: rgba(108,220,180,0.15); }

.fs04__mock-chart {
  display: flex; align-items: flex-end; gap: 6px; height: 60px; margin-top: 12px;
}
.fs04__mock-bar2 {
  flex: 1; border-radius: 4px 4px 0 0;
  background: linear-gradient(to top, #6c8ef7, #c8d8ff);
}

.fs04__last { border-bottom: 1px solid var(--line); }

@media (max-width: 700px) {
  .fs04__item { grid-template-columns: 1fr; gap: 32px; }
  .fs04__item:nth-child(even) .fs04__item-visual { order: 0; }
  .fs04__item-content, .fs04__item:nth-child(even) .fs04__item-content { padding: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .fs04__item { opacity: 1; transform: none; transition: none; }
}
```

**JS:**
```js
const observer = new IntersectionObserver(entries => {
  entries.forEach(e => {
    if (e.isIntersecting) {
      e.target.classList.add('fs04--visible');
      observer.unobserve(e.target);
    }
  });
}, { threshold: 0.15 });

document.querySelectorAll('.fs04__item').forEach((el, i) => {
  el.style.transitionDelay = `${i * 0.08}s`;
  observer.observe(el);
});
```

### 05. CSS Feature Section with Code Preview

**Type:** Pure CSS
**Description:** A GitHub-dark developer SDK feature section: a tabbed code window with full JetBrains Mono syntax highlighting (keywords, strings, comments, numbers) and a four-column feature-tile grid below. Green “Install” CTA. JetBrains Mono + Inter.

**HTML:**
```html
<section class="fs05">
  <div class="fs05__inner">
    <div class="fs05__top">
      <div>
        <div class="fs05__label">$ npm install @platform/sdk</div>
        <h2 class="fs05__h2">A developer API that<br>gets out of your <em>way</em></h2>
        <p class="fs05__p">Five lines to integrate. Full TypeScript types. Logs you can actually read. Built by engineers who've suffered through every other SDK so you don't have to.</p>
        <div class="fs05__cta-row">
          <a href="#" class="fs05__btn fs05__btn--green">Read the docs</a>
          <a href="#" class="fs05__btn fs05__btn--ghost">View on GitHub</a>
        </div>
      </div>

      <div class="fs05__window">
        <div class="fs05__win-bar">
          <div class="fs05__win-tabs">
            <div class="fs05__tab fs05__tab--active">index.ts</div>
            <div class="fs05__tab">config.json</div>
          </div>
          <div class="fs05__win-dots">
            <div class="fs05__dot"></div>
            <div class="fs05__dot"></div>
            <div class="fs05__dot"></div>
          </div>
        </div>
        <div class="fs05__code">
          <div><span class="fs05__ln">1</span><span class="cm">// Initialize the client with your API key</span></div>
          <div><span class="fs05__ln">2</span><span class="kw">import</span> { <span class="obj">Platform</span> } <span class="kw">from</span> <span class="str">'@platform/sdk'</span>;</div>
          <div><span class="fs05__ln">3</span></div>
          <div><span class="fs05__ln">4</span><span class="kw">const</span> <span class="var">client</span> = <span class="kw">new</span> <span class="fn">Platform</span>({</div>
          <div><span class="fs05__ln">5</span>&nbsp;&nbsp;<span class="prop">apiKey</span>: <span class="var">process</span>.<span class="prop">env</span>.<span class="prop">PLATFORM_KEY</span>,</div>
          <div><span class="fs05__ln">6</span>&nbsp;&nbsp;<span class="prop">region</span>: <span class="str">'us-east-1'</span>,</div>
          <div><span class="fs05__ln">7</span>&nbsp;&nbsp;<span class="prop">retries</span>: <span class="num">3</span>,</div>
          <div><span class="fs05__ln">8</span>});</div>
          <div><span class="fs05__ln">9</span></div>
          <div><span class="fs05__ln">10</span><span class="cm">// Stream events with full TypeScript types</span></div>
          <div><span class="fs05__ln">11</span><span class="kw">const</span> <span class="var">stream</span> = <span class="kw">await</span> <span class="var">client</span>.<span class="fn">events</span>.<span class="fn">stream</span>({</div>
          <div><span class="fs05__ln">12</span>&nbsp;&nbsp;<span class="prop">source</span>: <span class="str">'production'</span>,</div>
          <div><span class="fs05__ln">13</span>&nbsp;&nbsp;<span class="prop">filter</span>: { <span class="prop">type</span>: <span class="str">'purchase'</span> },</div>
          <div><span class="fs05__ln">14</span>});</div>
          <div><span class="fs05__ln">15</span></div>
          <div><span class="fs05__ln">16</span><span class="kw">for await</span> (<span class="kw">const</span> <span class="var">event</span> <span class="kw">of</span> <span class="var">stream</span>) {</div>
          <div><span class="fs05__ln">17</span>&nbsp;&nbsp;<span class="var">console</span>.<span class="fn">log</span>(<span class="var">event</span>.<span class="prop">data</span>); <span class="cm">// fully typed</span></div>
          <div><span class="fs05__ln">18</span>}</div>
        </div>
      </div>
    </div>

    <div class="fs05__features">
      <div class="fs05__feat">
        <div class="fs05__feat-icon">🔷</div>
        <div class="fs05__feat-title">Full TypeScript support</div>
        <div class="fs05__feat-desc">Every method, event, and error is typed. IntelliSense autocompletes your way through the entire API surface.</div>
        <span class="fs05__feat-badge">types: strict</span>
      </div>
      <div class="fs05__feat">
        <div class="fs05__feat-icon">🔄</div>
        <div class="fs05__feat-title">Idempotent retries</div>
        <div class="fs05__feat-desc">Automatic exponential backoff with jitter. Duplicate prevention guaranteed via idempotency keys.</div>
        <span class="fs05__feat-badge">retries: 3</span>
      </div>
      <div class="fs05__feat">
        <div class="fs05__feat-icon">📦</div>
        <div class="fs05__feat-title">Webhook validation</div>
        <div class="fs05__feat-desc">Verify every inbound payload with one helper. HMAC-SHA256 signature checking built into the SDK.</div>
        <span class="fs05__feat-badge">hmac-sha256</span>
      </div>
      <div class="fs05__feat">
        <div class="fs05__feat-icon">🪵</div>
        <div class="fs05__feat-title">Structured logging</div>
        <div class="fs05__feat-desc">JSON logs with trace IDs and request context that pipe directly into Datadog, Grafana, or any OTEL collector.</div>
        <span class="fs05__feat-badge">otel-ready</span>
      </div>
    </div>
  </div>
</section>
```

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

.fs05 {
  --bg: #0d1117;
  --surface: #161b22;
  --border: #30363d;
  --text: #e6edf3;
  --muted: #7d8590;
  --green: #3fb950;
  --blue: #79c0ff;
  --purple: #d2a8ff;
  --orange: #ffa657;
  --red: #ff7b72;
  --yellow: #e3b341;
  font-family: 'Inter', sans-serif;
  background: var(--bg);
  color: var(--text);
  padding: 80px 24px;
  min-height: 100vh;
}

.fs05__inner { max-width: 1100px; margin: 0 auto; }

.fs05__top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  margin-bottom: 80px;
}

.fs05__label {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--green);
  background: rgba(63,185,80,0.1);
  border: 1px solid rgba(63,185,80,0.25);
  padding: 4px 10px;
  border-radius: 6px;
  margin-bottom: 20px;
}

.fs05__h2 {
  font-size: clamp(32px, 4vw, 50px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.025em;
  margin-bottom: 18px;
}

.fs05__h2 em { font-style: normal; color: var(--blue); }

.fs05__p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--muted);
  margin-bottom: 28px;
}

.fs05__cta-row { display: flex; gap: 10px; }

.fs05__btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 20px;
  border-radius: 8px;
  text-decoration: none;
  transition: opacity 0.2s;
}
.fs05__btn:hover { opacity: 0.8; }
.fs05__btn--green { background: var(--green); color: #000; }
.fs05__btn--ghost { background: transparent; border: 1px solid var(--border); color: var(--text); }

/* Code window */
.fs05__window {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0,0,0,0.5);
}

.fs05__win-bar {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0;
  background: #1c2028;
  border-bottom: 1px solid var(--border);
}

.fs05__win-tabs {
  display: flex;
}

.fs05__tab {
  padding: 10px 20px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--muted);
  border-right: 1px solid var(--border);
  cursor: pointer;
}

.fs05__tab--active {
  background: var(--surface);
  color: var(--text);
  border-bottom: 2px solid var(--blue);
  margin-bottom: -1px;
}

.fs05__win-dots {
  margin-left: auto;
  display: flex; gap: 6px;
  padding: 0 16px;
}

.fs05__dot {
  width: 10px; height: 10px; border-radius: 50%;
}
.fs05__dot:nth-child(1) { background: #ff5f57; }
.fs05__dot:nth-child(2) { background: #febc2e; }
.fs05__dot:nth-child(3) { background: #28c840; }

.fs05__code {
  padding: 24px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  line-height: 1.7;
  overflow-x: auto;
}

.fs05__ln { color: #3d444d; user-select: none; margin-right: 20px; }
.kw { color: var(--purple); }
.fn { color: var(--blue); }
.str { color: var(--orange); }
.cm { color: #8b949e; font-style: italic; }
.num { color: var(--green); }
.prop { color: var(--blue); }
.var { color: var(--red); }
.obj { color: var(--yellow); }

/* Feature grid below */
.fs05__features {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}

.fs05__feat {
  background: var(--surface);
  padding: 28px;
  transition: background 0.2s;
}

.fs05__feat:hover { background: #1c2028; }

.fs05__feat-icon {
  width: 36px; height: 36px;
  border-radius: 8px;
  margin-bottom: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
}

.fs05__feat:nth-child(1) .fs05__feat-icon { background: rgba(63,185,80,0.15); }
.fs05__feat:nth-child(2) .fs05__feat-icon { background: rgba(121,192,255,0.15); }
.fs05__feat:nth-child(3) .fs05__feat-icon { background: rgba(210,168,255,0.15); }
.fs05__feat:nth-child(4) .fs05__feat-icon { background: rgba(255,166,87,0.15); }

.fs05__feat-title {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--text);
}

.fs05__feat-desc {
  font-size: 12px;
  line-height: 1.6;
  color: var(--muted);
}

.fs05__feat-badge {
  display: inline-block;
  margin-top: 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 4px;
}

.fs05__feat:nth-child(1) .fs05__feat-badge { background: rgba(63,185,80,0.15); color: var(--green); }
.fs05__feat:nth-child(2) .fs05__feat-badge { background: rgba(121,192,255,0.15); color: var(--blue); }
.fs05__feat:nth-child(3) .fs05__feat-badge { background: rgba(210,168,255,0.15); color: var(--purple); }
.fs05__feat:nth-child(4) .fs05__feat-badge { background: rgba(255,166,87,0.15); color: var(--orange); }

@media (max-width: 800px) {
  .fs05__top { grid-template-columns: 1fr; }
  .fs05__features { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 460px) {
  .fs05__features { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .fs05__btn, .fs05__feat { transition: none; }
}
```

### 06. CSS Feature Comparison Section

**Type:** Pure CSS
**Description:** A side-by-side feature comparison table: “Typical SaaS” vs “Our Platform” with ✓/✕/~ check indicators, a purple recommended column with extra border+shadow, and two pricing cards at the bottom. Cabinet Grotesk + Plus Jakarta Sans.

**HTML:**
```html
<section class="fs06">
  <div class="fs06__inner">
    <div class="fs06__header">
      <div class="fs06__chip">Compare plans</div>
      <h2 class="fs06__h2">Why teams switch<br>to <span>our platform</span></h2>
      <p class="fs06__sub">Side-by-side, the difference is obvious. Here's what you get that the alternatives simply don't offer.</p>
    </div>

    <div class="fs06__tabs">
      <div class="fs06__tab">Features</div>
      <div class="fs06__tab fs06__tab--on">vs Competitors</div>
    </div>

    <div class="fs06__compare">
      <div class="fs06__col fs06__col--them">
        <div class="fs06__col-head">
          <div class="fs06__col-name">Typical SaaS</div>
          <span class="fs06__badge fs06__badge--gray">Others</span>
        </div>
        <div class="fs06__divider"></div>
        <div class="fs06__row"><div class="fs06__check fs06__check--no">✕</div><span class="fs06__row-label">Real-time collaboration</span><span class="fs06__row-note">Add-on only</span></div>
        <div class="fs06__row"><div class="fs06__check fs06__check--part">~</div><span class="fs06__row-label">Custom domain support</span><span class="fs06__row-note">Enterprise tier</span></div>
        <div class="fs06__row"><div class="fs06__check fs06__check--no">✕</div><span class="fs06__row-label">Automated backups</span><span class="fs06__row-note">Manual only</span></div>
        <div class="fs06__row"><div class="fs06__check fs06__check--no">✕</div><span class="fs06__row-label">AI-assisted workflows</span><span class="fs06__row-note">Not available</span></div>
        <div class="fs06__row"><div class="fs06__check fs06__check--part">~</div><span class="fs06__row-label">API rate limits</span><span class="fs06__row-note">1k req/min</span></div>
        <div class="fs06__row"><div class="fs06__check fs06__check--no">✕</div><span class="fs06__row-label">SSO included</span><span class="fs06__row-note">+$150/mo</span></div>
        <div class="fs06__row"><div class="fs06__check fs06__check--no">✕</div><span class="fs06__row-label">SLA uptime guarantee</span><span class="fs06__row-note">Best effort</span></div>
        <div class="fs06__row"><div class="fs06__check fs06__check--part">~</div><span class="fs06__row-label">Audit logs</span><span class="fs06__row-note">30-day only</span></div>
      </div>

      <div class="fs06__col fs06__col--us">
        <div class="fs06__col-head">
          <div class="fs06__col-name">Our Platform</div>
          <span class="fs06__badge fs06__badge--purple">Recommended</span>
        </div>
        <div class="fs06__divider"></div>
        <div class="fs06__row"><div class="fs06__check fs06__check--yes">✓</div><span class="fs06__row-label">Real-time collaboration</span><span class="fs06__row-note">All plans</span></div>
        <div class="fs06__row"><div class="fs06__check fs06__check--yes">✓</div><span class="fs06__row-label">Custom domain support</span><span class="fs06__row-note">All plans</span></div>
        <div class="fs06__row"><div class="fs06__check fs06__check--yes">✓</div><span class="fs06__row-label">Automated backups</span><span class="fs06__row-note">Hourly, 90-day retention</span></div>
        <div class="fs06__row"><div class="fs06__check fs06__check--yes">✓</div><span class="fs06__row-label">AI-assisted workflows</span><span class="fs06__row-note">Built-in</span></div>
        <div class="fs06__row"><div class="fs06__check fs06__check--yes">✓</div><span class="fs06__row-label">API rate limits</span><span class="fs06__row-note">Unlimited</span></div>
        <div class="fs06__row"><div class="fs06__check fs06__check--yes">✓</div><span class="fs06__row-label">SSO included</span><span class="fs06__row-note">Free on all plans</span></div>
        <div class="fs06__row"><div class="fs06__check fs06__check--yes">✓</div><span class="fs06__row-label">SLA uptime guarantee</span><span class="fs06__row-note">99.99% guaranteed</span></div>
        <div class="fs06__row"><div class="fs06__check fs06__check--yes">✓</div><span class="fs06__row-label">Audit logs</span><span class="fs06__row-note">Unlimited retention</span></div>
      </div>
    </div>

    <div class="fs06__price-row">
      <div class="fs06__price-card fs06__price-card--them">
        <div class="fs06__price-num">$249</div>
        <div class="fs06__price-period">per month, typical competitor</div>
        <a href="#" class="fs06__price-btn fs06__price-btn--gray">Learn more</a>
      </div>
      <div class="fs06__price-card fs06__price-card--us">
        <div class="fs06__price-num">$89</div>
        <div class="fs06__price-period">per month, everything included</div>
        <a href="#" class="fs06__price-btn fs06__price-btn--white">Start free trial →</a>
      </div>
    </div>
  </div>
</section>
```

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

.fs06 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  background: #fff;
  color: #111827;
  padding: 100px 24px;
}

.fs06__inner { max-width: 1060px; margin: 0 auto; }

.fs06__header { text-align: center; margin-bottom: 64px; }

.fs06__chip {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6d28d9;
  background: #f3eeff;
  padding: 5px 14px;
  border-radius: 100px;
  margin-bottom: 20px;
}

.fs06__h2 {
  font-family: 'Cabinet Grotesk', sans-serif;
  font-size: clamp(34px, 5vw, 58px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 16px;
}

.fs06__h2 span { color: #6d28d9; }

.fs06__sub {
  font-size: 17px;
  color: #6b7280;
  max-width: 480px;
  margin: 0 auto;
  line-height: 1.65;
}

/* Toggle tabs */
.fs06__tabs {
  display: flex;
  justify-content: center;
  gap: 4px;
  background: #f3f4f6;
  border-radius: 12px;
  padding: 4px;
  max-width: 320px;
  margin: 0 auto 56px;
}

.fs06__tab {
  flex: 1;
  text-align: center;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 9px;
  cursor: pointer;
  color: #6b7280;
  transition: all 0.2s;
  user-select: none;
}

.fs06__tab--on {
  background: #fff;
  color: #111827;
  box-shadow: 0 1px 4px rgba(0,0,0,0.12);
}

/* Two-column comparison */
.fs06__compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}

.fs06__col {
  border-radius: 20px;
  overflow: hidden;
  border: 2px solid transparent;
}

.fs06__col--them {
  background: #f9fafb;
  border-color: #e5e7eb;
}

.fs06__col--us {
  background: #fff;
  border-color: #6d28d9;
  box-shadow: 0 0 0 1px #6d28d9, 0 20px 60px rgba(109,40,217,0.12);
}

.fs06__col-head {
  padding: 28px 28px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.fs06__col-name {
  font-family: 'Cabinet Grotesk', sans-serif;
  font-size: 18px;
  font-weight: 800;
  color: #111827;
}

.fs06__col--them .fs06__col-name { color: #6b7280; }

.fs06__badge {
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 100px;
  letter-spacing: 0.06em;
}

.fs06__badge--purple { background: #f3eeff; color: #6d28d9; }
.fs06__badge--gray { background: #e5e7eb; color: #9ca3af; }

.fs06__divider { height: 1px; background: #e5e7eb; margin: 0 0 4px; }

.fs06__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 28px;
  font-size: 14px;
  color: #374151;
  border-bottom: 1px solid rgba(0,0,0,0.05);
}

.fs06__row:last-child { border-bottom: none; }

.fs06__check {
  width: 20px; height: 20px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px;
  font-weight: 700;
}

.fs06__check--yes { background: #d1fae5; color: #059669; }
.fs06__check--no { background: #f3f4f6; color: #9ca3af; }
.fs06__check--part { background: #fef3c7; color: #d97706; }

.fs06__row-label { flex: 1; }

.fs06__row-note {
  font-size: 12px;
  color: #9ca3af;
}

.fs06__col--us .fs06__row-note { color: #6d28d9; }

/* Pricing footer */
.fs06__price-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 32px;
}

.fs06__price-card {
  border-radius: 16px;
  padding: 28px;
  text-align: center;
}

.fs06__price-card--them {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
}

.fs06__price-card--us {
  background: linear-gradient(135deg, #6d28d9, #9b59f7);
  color: #fff;
}

.fs06__price-num {
  font-family: 'Cabinet Grotesk', sans-serif;
  font-size: 40px;
  font-weight: 800;
  line-height: 1;
}

.fs06__price-card--them .fs06__price-num { color: #9ca3af; }

.fs06__price-period { font-size: 13px; opacity: 0.7; margin: 4px 0 16px; }

.fs06__price-btn {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 24px;
  border-radius: 10px;
  text-decoration: none;
  transition: opacity 0.2s;
}

.fs06__price-btn:hover { opacity: 0.85; }
.fs06__price-btn--gray { background: #e5e7eb; color: #6b7280; }
.fs06__price-btn--white { background: #fff; color: #6d28d9; }

@media (max-width: 640px) {
  .fs06__compare, .fs06__price-row { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .fs06__tab, .fs06__price-btn { transition: none; }
}
```

### 07. CSS SaaS Features Section 2025

**Type:** Pure CSS
**Description:** A full SaaS hero with animated mesh-gradient background, shimmer-gradient headline, live-pulse “Now in beta” ticker, G2/Capterra social proof strip, and three alternating feature rows with abstract stat mockups. Bricolage Grotesque + Inter.

**HTML:**
```html
<section class="fs07">
  <div class="fs07__hero">
    <div class="fs07__hero-mesh"></div>
    <div class="fs07__ticker">
      <div class="fs07__ticker-dot"></div>
      Now in public beta · 2025
    </div>
    <h2 class="fs07__h1">
      The SaaS platform<br>
      <span class="fs07__h1-word fs07__h1-word--gradient">built for what's next</span>
    </h2>
    <p class="fs07__hero-sub">Stop stitching together tools. One platform to collect, analyze, automate, and act — engineered for the pace modern teams actually move at.</p>
    <div class="fs07__cta-group">
      <a href="#" class="fs07__cta fs07__cta--primary">Start your free trial →</a>
      <a href="#" class="fs07__cta fs07__cta--text">See a 3-min demo</a>
    </div>
  </div>

  <div class="fs07__proof">
    <span class="fs07__proof-item">4.9 / 5 on G2</span>
    <span class="fs07__proof-item">4.8 / 5 on Capterra</span>
    <span class="fs07__proof-item">Trusted by 10,000+ teams</span>
  </div>

  <div class="fs07__section">
    <div class="fs07__section-label">Feature highlights</div>
    <h2 class="fs07__section-title">Three things your current stack can't do</h2>

    <div class="fs07__feat-row">
      <div>
        <div class="fs07__feat-eyebrow">Automation</div>
        <div class="fs07__feat-title">Workflows that write themselves from your data</div>
        <div class="fs07__feat-body">Describe the outcome you want in plain English. The platform reads your event schema, maps triggers to actions, and suggests a fully-wired pipeline before you write a single line.</div>
        <ul class="fs07__feat-list">
          <li>Natural language workflow creation</li>
          <li>Auto-detected triggers from your event stream</li>
          <li>One-click deploy to production</li>
        </ul>
      </div>
      <div class="fs07__feat-vis">
        <div class="fs07__vis-card">
          <div class="fs07__vis-bar fs07__vis-bar--1"></div>
          <div class="fs07__vis-bar"></div>
          <div class="fs07__vis-bar" style="width:45%"></div>
          <div class="fs07__vis-stat">
            <div class="fs07__vis-stat-box">
              <div class="fs07__vis-stat-num" style="color:#8b5cf6">94%</div>
              <div class="fs07__vis-stat-lbl">Faster setup</div>
            </div>
            <div class="fs07__vis-stat-box">
              <div class="fs07__vis-stat-num" style="color:#8b5cf6">0</div>
              <div class="fs07__vis-stat-lbl">Lines of code</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="fs07__feat-row">
      <div>
        <div class="fs07__feat-eyebrow">Analytics</div>
        <div class="fs07__feat-title">Answers, not just charts. Ask any question.</div>
        <div class="fs07__feat-body">No SQL. No BI tool. Type your question and get a chart, a number, or a ranked list — backed by the data in your warehouse, rendered in seconds.</div>
        <ul class="fs07__feat-list">
          <li>Natural language querying over your live data</li>
          <li>Drill-down filters surfaced automatically</li>
          <li>Shareable snapshots with one click</li>
        </ul>
      </div>
      <div class="fs07__feat-vis">
        <div class="fs07__vis-card">
          <div class="fs07__vis-bar fs07__vis-bar--2"></div>
          <div class="fs07__vis-bar"></div>
          <div class="fs07__vis-bar" style="width:70%"></div>
          <div class="fs07__vis-stat">
            <div class="fs07__vis-stat-box">
              <div class="fs07__vis-stat-num" style="color:#ec4899">3s</div>
              <div class="fs07__vis-stat-lbl">Query time</div>
            </div>
            <div class="fs07__vis-stat-box">
              <div class="fs07__vis-stat-num" style="color:#ec4899">∞</div>
              <div class="fs07__vis-stat-lbl">Data sources</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="fs07__feat-row">
      <div>
        <div class="fs07__feat-eyebrow">Security</div>
        <div class="fs07__feat-title">Enterprise-grade security without the enterprise price tag</div>
        <div class="fs07__feat-body">SOC 2 Type II certified, GDPR-compliant data residency, and passkey-first authentication. No additional SKUs required for any of it.</div>
        <ul class="fs07__feat-list">
          <li>SOC 2 Type II, HIPAA, ISO 27001</li>
          <li>Hardware key + passkey MFA built-in</li>
          <li>Regional data residency on all plans</li>
        </ul>
      </div>
      <div class="fs07__feat-vis">
        <div class="fs07__vis-card">
          <div class="fs07__vis-bar fs07__vis-bar--3"></div>
          <div class="fs07__vis-bar"></div>
          <div class="fs07__vis-bar" style="width:55%"></div>
          <div class="fs07__vis-stat">
            <div class="fs07__vis-stat-box">
              <div class="fs07__vis-stat-num" style="color:#3b82f6">3</div>
              <div class="fs07__vis-stat-lbl">Certifications</div>
            </div>
            <div class="fs07__vis-stat-box">
              <div class="fs07__vis-stat-num" style="color:#3b82f6">$0</div>
              <div class="fs07__vis-stat-lbl">Add-on cost</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
```

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

.fs07 {
  font-family: 'Inter', sans-serif;
  background: #fff;
  color: #0f0f14;
  overflow: hidden;
}

/* Hero strip */
.fs07__hero {
  position: relative;
  padding: 100px 24px 80px;
  text-align: center;
  overflow: hidden;
}

.fs07__hero-mesh {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 50% at 20% 40%, rgba(139,92,246,0.12) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 60%, rgba(236,72,153,0.1) 0%, transparent 60%),
    radial-gradient(ellipse 50% 60% at 50% 0%, rgba(59,130,246,0.08) 0%, transparent 60%);
  pointer-events: none;
}

.fs07__ticker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: #6b7280;
  border: 1px solid #e5e7eb;
  padding: 6px 16px;
  border-radius: 100px;
  margin-bottom: 32px;
}

.fs07__ticker-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 6px #22c55e;
  animation: fs07-blink 2s ease-in-out infinite;
}

@keyframes fs07-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.fs07__h1 {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: clamp(40px, 6vw, 78px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin-bottom: 24px;
  position: relative;
}

.fs07__h1-word {
  display: inline-block;
  position: relative;
}

.fs07__h1-word--gradient {
  background: linear-gradient(135deg, #8b5cf6, #ec4899, #3b82f6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  background-size: 200%;
  animation: fs07-shift 4s ease-in-out infinite alternate;
}

@keyframes fs07-shift {
  from { background-position: 0% 50%; }
  to { background-position: 100% 50%; }
}

.fs07__hero-sub {
  font-size: 18px;
  color: #6b7280;
  max-width: 520px;
  margin: 0 auto 40px;
  line-height: 1.65;
}

.fs07__cta-group {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.fs07__cta {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 15px;
  font-weight: 600;
  padding: 13px 28px;
  border-radius: 12px;
  text-decoration: none;
  transition: transform 0.2s, box-shadow 0.2s;
}

.fs07__cta:hover { transform: translateY(-2px); }

.fs07__cta--primary {
  background: linear-gradient(135deg, #8b5cf6, #ec4899);
  color: #fff;
  box-shadow: 0 4px 20px rgba(139,92,246,0.35);
}

.fs07__cta--primary:hover {
  box-shadow: 0 8px 30px rgba(139,92,246,0.45);
}

.fs07__cta--text { color: #6b7280; background: none; font-size: 14px; }

/* Social proof strip */
.fs07__proof {
  padding: 20px 24px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
}

.fs07__proof-item {
  font-size: 13px;
  color: #9ca3af;
  display: flex; align-items: center; gap: 6px;
}

.fs07__proof-item::before {
  content: '★★★★★';
  font-size: 11px;
  color: #f59e0b;
}

/* Features section */
.fs07__section {
  padding: 80px 24px;
  max-width: 1100px;
  margin: 0 auto;
}

.fs07__section-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8b5cf6;
  text-align: center;
  margin-bottom: 12px;
}

.fs07__section-title {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: clamp(28px, 4vw, 46px);
  font-weight: 800;
  letter-spacing: -0.02em;
  text-align: center;
  margin-bottom: 56px;
}

/* Alternating feature rows */
.fs07__feat-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  margin-bottom: 80px;
}

.fs07__feat-row:nth-child(even) .fs07__feat-vis { order: -1; }

.fs07__feat-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.fs07__feat-row:nth-child(1) .fs07__feat-eyebrow { color: #8b5cf6; }
.fs07__feat-row:nth-child(2) .fs07__feat-eyebrow { color: #ec4899; }
.fs07__feat-row:nth-child(3) .fs07__feat-eyebrow { color: #3b82f6; }

.fs07__feat-title {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: clamp(22px, 2.5vw, 32px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: 14px;
}

.fs07__feat-body {
  font-size: 15px;
  line-height: 1.7;
  color: #6b7280;
  margin-bottom: 24px;
}

.fs07__feat-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.fs07__feat-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: #374151;
}

.fs07__feat-list li::before {
  content: '→';
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
}

.fs07__feat-row:nth-child(1) .fs07__feat-list li::before { color: #8b5cf6; }
.fs07__feat-row:nth-child(2) .fs07__feat-list li::before { color: #ec4899; }
.fs07__feat-row:nth-child(3) .fs07__feat-list li::before { color: #3b82f6; }

/* Visual areas */
.fs07__feat-vis {
  border-radius: 20px;
  aspect-ratio: 4/3;
  position: relative;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}

.fs07__feat-row:nth-child(1) .fs07__feat-vis { background: linear-gradient(135deg, #f5f0ff, #ede8ff); }
.fs07__feat-row:nth-child(2) .fs07__feat-vis { background: linear-gradient(135deg, #fff0f7, #ffe8f4); }
.fs07__feat-row:nth-child(3) .fs07__feat-vis { background: linear-gradient(135deg, #eff6ff, #dbeafe); }

.fs07__vis-card {
  background: #fff;
  border-radius: 14px;
  padding: 20px;
  width: 82%;
  box-shadow: 0 16px 48px rgba(0,0,0,0.1);
}

.fs07__vis-bar { height: 8px; border-radius: 4px; background: #eee; margin-bottom: 8px; }
.fs07__vis-bar--1 { width: 65%; background: linear-gradient(90deg, #8b5cf6, #c4b5fd); }
.fs07__vis-bar--2 { width: 80%; background: linear-gradient(90deg, #ec4899, #f9a8d4); }
.fs07__vis-bar--3 { width: 55%; background: linear-gradient(90deg, #3b82f6, #93c5fd); }

.fs07__vis-stat {
  display: flex; gap: 12px; margin-top: 16px;
}

.fs07__vis-stat-box {
  flex: 1; padding: 12px; background: #f9fafb; border-radius: 10px; text-align: center;
}

.fs07__vis-stat-num {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 22px;
  font-weight: 800;
}

.fs07__vis-stat-lbl { font-size: 10px; color: #9ca3af; margin-top: 2px; }

@media (max-width: 700px) {
  .fs07__feat-row { grid-template-columns: 1fr; gap: 32px; }
  .fs07__feat-row:nth-child(even) .fs07__feat-vis { order: 0; }
  .fs07__proof { flex-direction: column; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .fs07__ticker-dot, .fs07__h1-word--gradient { animation: none; }
  .fs07__cta { transition: none; }
}
```

### 08. CSS Feature Section 3D Perspective Cards

**Type:** CSS + JS
**Description:** A deep-black 6-card feature section where each card tilts in 3D on mousemove via `rotateX/rotateY`. Per-card colour top-stripe, glow intensifies on hover, ghost number decorations, and metric + arrow footer. Outfit.

**HTML:**
```html
<section class="fs08">
  <div class="fs08__inner">
    <div class="fs08__header">
      <div class="fs08__chip"><span class="fs08__chip-line"></span> Core platform <span class="fs08__chip-line"></span></div>
      <h2 class="fs08__h2">Six pillars of a<br><span>faster product</span></h2>
      <p class="fs08__sub">Each capability was built to remove a specific category of friction. Together they compound into something much harder to replicate.</p>
    </div>

    <div class="fs08__grid" id="fs08grid">
      <div class="fs08__card">
        <div class="fs08__card-glow"></div>
        <div class="fs08__card-num">01</div>
        <span class="fs08__icon">🚀</span>
        <div class="fs08__card-title">Instant Previews</div>
        <div class="fs08__card-body">Every branch gets a shareable URL the moment you push. Stakeholders review in production-identical environments, not screenshots.</div>
        <div class="fs08__card-footer">
          <div>
            <div class="fs08__card-metric">&lt;8s</div>
            <div class="fs08__card-metric-lbl">Preview spin-up</div>
          </div>
          <div class="fs08__arrow">→</div>
        </div>
      </div>

      <div class="fs08__card">
        <div class="fs08__card-glow"></div>
        <div class="fs08__card-num">02</div>
        <span class="fs08__icon">🧩</span>
        <div class="fs08__card-title">Component Library</div>
        <div class="fs08__card-body">A living design system that syncs directly with your code. Designers and developers always reference the same source of truth.</div>
        <div class="fs08__card-footer">
          <div>
            <div class="fs08__card-metric">400+</div>
            <div class="fs08__card-metric-lbl">Base components</div>
          </div>
          <div class="fs08__arrow">→</div>
        </div>
      </div>

      <div class="fs08__card">
        <div class="fs08__card-glow"></div>
        <div class="fs08__card-num">03</div>
        <span class="fs08__icon">♻️</span>
        <div class="fs08__card-title">Zero-Waste CI</div>
        <div class="fs08__card-body">Only re-run tests and builds for code that actually changed. Granular caching cuts your CI spend by up to 70% from day one.</div>
        <div class="fs08__card-footer">
          <div>
            <div class="fs08__card-metric">70%</div>
            <div class="fs08__card-metric-lbl">CI cost reduction</div>
          </div>
          <div class="fs08__arrow">→</div>
        </div>
      </div>

      <div class="fs08__card">
        <div class="fs08__card-glow"></div>
        <div class="fs08__card-num">04</div>
        <span class="fs08__icon">🔮</span>
        <div class="fs08__card-title">Predictive Scaling</div>
        <div class="fs08__card-body">ML-forecasted traffic patterns scale your infra before demand spikes hit — not in response to them. Goodbye cold-start latency.</div>
        <div class="fs08__card-footer">
          <div>
            <div class="fs08__card-metric">0ms</div>
            <div class="fs08__card-metric-lbl">Cold starts</div>
          </div>
          <div class="fs08__arrow">→</div>
        </div>
      </div>

      <div class="fs08__card">
        <div class="fs08__card-glow"></div>
        <div class="fs08__card-num">05</div>
        <span class="fs08__icon">🗂️</span>
        <div class="fs08__card-title">Unified Observability</div>
        <div class="fs08__card-body">Traces, metrics, and logs correlated in a single view. Follow a user request from client to database with one click — no tab-switching.</div>
        <div class="fs08__card-footer">
          <div>
            <div class="fs08__card-metric">1 view</div>
            <div class="fs08__card-metric-lbl">Full-stack trace</div>
          </div>
          <div class="fs08__arrow">→</div>
        </div>
      </div>

      <div class="fs08__card">
        <div class="fs08__card-glow"></div>
        <div class="fs08__card-num">06</div>
        <span class="fs08__icon">🔑</span>
        <div class="fs08__card-title">Secrets Management</div>
        <div class="fs08__card-body">Environment variables scoped by branch, team, and service. Rotation policies, leak detection, and audit trails built in, not bolted on.</div>
        <div class="fs08__card-footer">
          <div>
            <div class="fs08__card-metric">0 leaks</div>
            <div class="fs08__card-metric-lbl">Guaranteed</div>
          </div>
          <div class="fs08__arrow">→</div>
        </div>
      </div>
    </div>
  </div>
</section>
```

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

.fs08 {
  font-family: 'Outfit', sans-serif;
  background: #08080f;
  color: #f0eeff;
  padding: 100px 24px;
  overflow: hidden;
  min-height: 100vh;
}

.fs08__inner { max-width: 1060px; margin: 0 auto; }

.fs08__header { text-align: center; margin-bottom: 72px; }

.fs08__chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #a78bfa;
  margin-bottom: 20px;
}

.fs08__chip-line { width: 24px; height: 1px; background: #a78bfa; }

.fs08__h2 {
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.07;
  margin-bottom: 18px;
}

.fs08__h2 span {
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(167,139,250,0.6);
}

.fs08__sub {
  font-size: 17px;
  color: rgba(240,238,255,0.45);
  max-width: 480px;
  margin: 0 auto;
  line-height: 1.65;
}

/* 3D card grid */
.fs08__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  perspective: 1200px;
}

.fs08__card {
  position: relative;
  border-radius: 20px;
  padding: 36px 28px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.4s cubic-bezier(.23,1,.32,1), box-shadow 0.4s;
  transform-style: preserve-3d;
  background: #12121e;
  border: 1px solid rgba(255,255,255,0.07);
}

.fs08__card:hover {
  box-shadow: 0 32px 80px rgba(0,0,0,0.5);
}

/* Color stripe on top */
.fs08__card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: 20px 20px 0 0;
}

.fs08__card:nth-child(1)::before { background: linear-gradient(90deg, #7c3aed, #a78bfa); }
.fs08__card:nth-child(2)::before { background: linear-gradient(90deg, #db2777, #f9a8d4); }
.fs08__card:nth-child(3)::before { background: linear-gradient(90deg, #059669, #6ee7b7); }
.fs08__card:nth-child(4)::before { background: linear-gradient(90deg, #d97706, #fde68a); }
.fs08__card:nth-child(5)::before { background: linear-gradient(90deg, #0284c7, #7dd3fc); }
.fs08__card:nth-child(6)::before { background: linear-gradient(90deg, #be123c, #fda4af); }

/* Glow behind card content */
.fs08__card-glow {
  position: absolute;
  width: 200px; height: 200px;
  border-radius: 50%;
  filter: blur(60px);
  bottom: -80px; right: -60px;
  opacity: 0.2;
  transition: opacity 0.4s;
  pointer-events: none;
}

.fs08__card:hover .fs08__card-glow { opacity: 0.4; }

.fs08__card:nth-child(1) .fs08__card-glow { background: #7c3aed; }
.fs08__card:nth-child(2) .fs08__card-glow { background: #db2777; }
.fs08__card:nth-child(3) .fs08__card-glow { background: #059669; }
.fs08__card:nth-child(4) .fs08__card-glow { background: #d97706; }
.fs08__card:nth-child(5) .fs08__card-glow { background: #0284c7; }
.fs08__card:nth-child(6) .fs08__card-glow { background: #be123c; }

.fs08__card-num {
  font-size: 48px;
  font-weight: 800;
  opacity: 0.06;
  position: absolute;
  top: 16px; right: 20px;
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

.fs08__icon {
  font-size: 30px;
  margin-bottom: 20px;
  display: block;
  position: relative;
  z-index: 1;
}

.fs08__card-title {
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 12px;
  color: #fff;
  letter-spacing: -0.01em;
  position: relative;
  z-index: 1;
}

.fs08__card-body {
  font-size: 14px;
  line-height: 1.65;
  color: rgba(240,238,255,0.5);
  position: relative;
  z-index: 1;
}

.fs08__card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 24px;
  position: relative;
  z-index: 1;
}

.fs08__card-metric {
  font-size: 22px;
  font-weight: 800;
}

.fs08__card:nth-child(1) .fs08__card-metric { color: #a78bfa; }
.fs08__card:nth-child(2) .fs08__card-metric { color: #f9a8d4; }
.fs08__card:nth-child(3) .fs08__card-metric { color: #6ee7b7; }
.fs08__card:nth-child(4) .fs08__card-metric { color: #fde68a; }
.fs08__card:nth-child(5) .fs08__card-metric { color: #7dd3fc; }
.fs08__card:nth-child(6) .fs08__card-metric { color: #fda4af; }

.fs08__card-metric-lbl {
  font-size: 11px;
  color: rgba(240,238,255,0.3);
  margin-top: 2px;
}

.fs08__arrow {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.12);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  color: rgba(255,255,255,0.4);
  transition: border-color 0.2s, color 0.2s;
}

.fs08__card:hover .fs08__arrow {
  border-color: rgba(255,255,255,0.3);
  color: #fff;
}

@media (max-width: 768px) {
  .fs08__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 500px) {
  .fs08__grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .fs08__card { transition: none; }
}
```

**JS:**
```js
// 3D tilt on hover
const cards = document.querySelectorAll('.fs08__card');
cards.forEach(card => {
  card.addEventListener('mousemove', e => {
    const rect = card.getBoundingClientRect();
    const x = (e.clientX - rect.left) / rect.width - 0.5;
    const y = (e.clientY - rect.top) / rect.height - 0.5;
    card.style.transform = `perspective(800px) rotateY(${x * 12}deg) rotateX(${-y * 10}deg) translateZ(10px)`;
  });
  card.addEventListener('mouseleave', () => {
    card.style.transform = '';
  });
});
```

### 09. CSS Feature Section with Floating Mockup

**Type:** Pure CSS
**Description:** Warm parchment background with a CSS-animated floating phone mockup (bob keyframe), two counterphased floating metric cards, a serif italic headline, and a 4-tile bottom grid. Instrument Serif italic + Inter.

**HTML:**
```html
<section class="fs09">
  <div class="fs09__inner">
    <div class="fs09__split">
      <div>
        <div class="fs09__eyebrow">Mobile-first platform</div>
        <h2 class="fs09__h2">Your entire business,<br>in the palm of <em>your hand</em></h2>
        <p class="fs09__body">A native-quality mobile experience for managing your operations, approving requests, and staying on top of what matters — wherever you are.</p>
        <ul class="fs09__list">
          <li><span class="fs09__check">✓</span> Real-time notifications with one-tap approval</li>
          <li><span class="fs09__check">✓</span> Offline-capable sync for low-connectivity environments</li>
          <li><span class="fs09__check">✓</span> Biometric authentication and face unlock support</li>
          <li><span class="fs09__check">✓</span> Available on iOS and Android — same feature parity</li>
        </ul>
        <div class="fs09__cta-row">
          <a href="#" class="fs09__btn-primary">Download the app →</a>
          <a href="#" class="fs09__btn-link">See all features</a>
        </div>
      </div>

      <div class="fs09__mockup-wrap">
        <div class="fs09__float-card fs09__float-card--a">
          <div class="fs09__fc-num">99.9%</div>
          <div class="fs09__fc-label">Offline reliability</div>
        </div>
        <div class="fs09__float-card fs09__float-card--b">
          <div class="fs09__fc-num">4.9★</div>
          <div class="fs09__fc-label">App Store rating</div>
        </div>

        <div class="fs09__phone">
          <div class="fs09__phone-notch"></div>
          <div class="fs09__phone-screen">
            <div class="fs09__phone-bar fs09__phone-bar--accent"></div>
            <div class="fs09__phone-bar fs09__phone-bar--sm"></div>
            <div class="fs09__phone-bar fs09__phone-bar--md" style="margin-top:8px"></div>
            <div class="fs09__phone-cards">
              <div class="fs09__phone-card">
                <div class="fs09__phone-card-top">
                  <div class="fs09__phone-avatar fs09__phone-avatar--a"></div>
                  <div class="fs09__phone-card-line"></div>
                </div>
                <div class="fs09__phone-card-metric">+$12,440</div>
              </div>
              <div class="fs09__phone-card">
                <div class="fs09__phone-card-top">
                  <div class="fs09__phone-avatar fs09__phone-avatar--b"></div>
                  <div class="fs09__phone-card-line"></div>
                </div>
                <div class="fs09__phone-card-metric" style="color:#6d28d9">3 approvals</div>
              </div>
              <div class="fs09__phone-card">
                <div class="fs09__phone-card-top">
                  <div class="fs09__phone-avatar" style="background:linear-gradient(135deg,#059669,#6ee7b7)"></div>
                  <div class="fs09__phone-card-line"></div>
                </div>
                <div class="fs09__phone-card-metric" style="color:#059669">On track ↑</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="fs09__tiles">
      <div class="fs09__tile">
        <div class="fs09__tile-num">i.</div>
        <div class="fs09__tile-title">Push Notifications</div>
        <div class="fs09__tile-desc">Smart alerts that know when to interrupt and when to queue — based on your calendar and work patterns.</div>
      </div>
      <div class="fs09__tile">
        <div class="fs09__tile-num">ii.</div>
        <div class="fs09__tile-title">Offline Mode</div>
        <div class="fs09__tile-desc">Full read and write access when you're on a plane or in a basement. Changes sync the moment you reconnect.</div>
      </div>
      <div class="fs09__tile">
        <div class="fs09__tile-num">iii.</div>
        <div class="fs09__tile-title">Widget Support</div>
        <div class="fs09__tile-desc">Key metrics on your home screen. See today's pipeline, pending approvals, or team pulse without opening the app.</div>
      </div>
      <div class="fs09__tile">
        <div class="fs09__tile-num">iv.</div>
        <div class="fs09__tile-title">Apple Watch / Wear OS</div>
        <div class="fs09__tile-desc">Approve requests, check alerts, and see summaries from your wrist. No phone required for common actions.</div>
      </div>
    </div>
  </div>
</section>
```

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

.fs09 {
  font-family: 'Inter', sans-serif;
  background: #f8f6f1;
  color: #1a1814;
  padding: 96px 24px;
  overflow: hidden;
  min-height: 100vh;
}

.fs09__inner { max-width: 1100px; margin: 0 auto; }

/* Split hero */
.fs09__split {
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: 64px;
  align-items: center;
  margin-bottom: 96px;
}

.fs09__eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #b45309;
  margin-bottom: 20px;
}

.fs09__h2 {
  font-family: 'Instrument Serif', serif;
  font-size: clamp(38px, 5vw, 62px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin-bottom: 20px;
}

.fs09__h2 em {
  font-style: italic;
  color: #b45309;
}

.fs09__body {
  font-size: 16px;
  line-height: 1.75;
  color: #5c5447;
  margin-bottom: 32px;
}

.fs09__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 36px;
}

.fs09__list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  color: #2d2920;
}

.fs09__check {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #fef3c7;
  border: 1.5px solid #f59e0b;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px;
  color: #92400e;
  flex-shrink: 0;
}

.fs09__cta-row { display: flex; gap: 12px; align-items: center; }

.fs09__btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  background: #1a1814;
  color: #f8f6f1;
  font-size: 15px;
  font-weight: 600;
  padding: 13px 26px;
  border-radius: 100px;
  text-decoration: none;
  transition: background 0.2s;
}
.fs09__btn-primary:hover { background: #2d2920; }

.fs09__btn-link {
  font-size: 14px;
  color: #5c5447;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Floating mockup area */
.fs09__mockup-wrap {
  position: relative;
  height: 480px;
}

.fs09__phone {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 260px;
  background: #1a1814;
  border-radius: 36px;
  padding: 16px;
  box-shadow: 0 40px 100px rgba(0,0,0,0.25);
  z-index: 2;
  animation: fs09-float 5s ease-in-out infinite;
}

@keyframes fs09-float {
  0%, 100% { transform: translateY(-50%) translateY(0); }
  50% { transform: translateY(-50%) translateY(-14px); }
}

.fs09__phone-notch {
  width: 80px; height: 22px;
  background: #0a0908;
  border-radius: 100px;
  margin: 0 auto 14px;
}

.fs09__phone-screen {
  background: #fff;
  border-radius: 24px;
  padding: 16px;
  min-height: 340px;
}

.fs09__phone-bar { height: 6px; border-radius: 3px; background: #f0ece4; margin-bottom: 8px; }
.fs09__phone-bar--accent { background: linear-gradient(90deg, #b45309, #f59e0b); width: 70%; }
.fs09__phone-bar--sm { width: 45%; }
.fs09__phone-bar--md { width: 80%; }

.fs09__phone-cards { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.fs09__phone-card {
  background: #fafafa;
  border: 1px solid #e8e4dc;
  border-radius: 10px;
  padding: 10px;
}
.fs09__phone-card-top { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.fs09__phone-avatar { width: 20px; height: 20px; border-radius: 50%; }
.fs09__phone-avatar--a { background: linear-gradient(135deg, #b45309, #f59e0b); }
.fs09__phone-avatar--b { background: linear-gradient(135deg, #6d28d9, #a78bfa); }
.fs09__phone-card-line { height: 5px; flex: 1; border-radius: 3px; background: #e8e4dc; }
.fs09__phone-card-metric {
  font-size: 13px;
  font-weight: 700;
  color: #b45309;
}

/* Floating mini cards */
.fs09__float-card {
  position: absolute;
  background: #fff;
  border-radius: 14px;
  padding: 14px 18px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.12);
  z-index: 3;
  border: 1px solid rgba(0,0,0,0.07);
}

.fs09__float-card--a {
  left: 0; top: 40px;
  animation: fs09-floatA 6s ease-in-out infinite;
}

.fs09__float-card--b {
  left: 60px; bottom: 60px;
  animation: fs09-floatB 7s ease-in-out infinite;
}

@keyframes fs09-floatA {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-10px) rotate(-1deg); }
}

@keyframes fs09-floatB {
  0%, 100% { transform: translateY(0) rotate(1deg); }
  50% { transform: translateY(10px) rotate(2deg); }
}

.fs09__fc-num {
  font-family: 'Instrument Serif', serif;
  font-size: 28px;
  font-weight: 400;
  color: #b45309;
  line-height: 1;
}

.fs09__fc-label { font-size: 11px; color: #9c8f7e; margin-top: 2px; white-space: nowrap; }

/* Feature tiles below */
.fs09__tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  background: #e8e4dc;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid #e8e4dc;
}

.fs09__tile {
  background: #f8f6f1;
  padding: 32px 24px;
  transition: background 0.2s;
}

.fs09__tile:hover { background: #fff; }

.fs09__tile-num {
  font-family: 'Instrument Serif', serif;
  font-size: 14px;
  font-style: italic;
  color: #b45309;
  margin-bottom: 12px;
}

.fs09__tile-title {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 8px;
  color: #1a1814;
}

.fs09__tile-desc {
  font-size: 13px;
  line-height: 1.6;
  color: #7a6e60;
}

@media (max-width: 780px) {
  .fs09__split { grid-template-columns: 1fr; }
  .fs09__mockup-wrap { height: 340px; }
  .fs09__tiles { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
  .fs09__tiles { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .fs09__phone,
  .fs09__float-card--a,
  .fs09__float-card--b { animation: none !important; transform: translateY(-50%) !important; }
  .fs09__float-card--a, .fs09__float-card--b { transform: none !important; }
}
```

### 10. CSS Feature Section Timeline Layout

**Type:** CSS + JS
**Description:** Midnight `#060612` background with a vertical timeline: an animated traveling-glow line, five staggered IntersectionObserver-reveal phase cards with status badges (Live/Active/New/Beta/Coming), JetBrains Mono labels, and per-phase accent colours. Sora + JetBrains Mono.

**HTML:**
```html
<section class="fs10">
  <div class="fs10__inner">
    <div class="fs10__header">
      <div class="fs10__pre">platform_roadmap.json</div>
      <h2 class="fs10__h2">Built in layers.<br><span>Shipped with purpose.</span></h2>
      <p class="fs10__sub">Each capability unlocks the next. Here's how the platform was architected — and what it enables at every stage.</p>
    </div>

    <div class="fs10__timeline">
      <div class="fs10__line-glow"></div>

      <div class="fs10__item">
        <div class="fs10__node"><div class="fs10__node-dot"></div></div>
        <div class="fs10__card">
          <div>
            <div class="fs10__card-meta">
              <span class="fs10__card-phase">PHASE_01</span>
              <span class="fs10__card-status fs10__status--live">Live</span>
            </div>
            <div class="fs10__card-title">Core Event Ingestion</div>
            <div class="fs10__card-body">A durable, ordered event log that accepts data from any language via SDK or HTTP. The foundation everything else builds on — never lossy, never slow.</div>
            <div class="fs10__card-tags">
              <span class="fs10__tag">kafka-compatible</span>
              <span class="fs10__tag">at-least-once</span>
              <span class="fs10__tag">idempotent</span>
            </div>
          </div>
          <div class="fs10__card-right">
            <div class="fs10__metric-big">1B+</div>
            <div class="fs10__metric-lbl">events / day</div>
          </div>
        </div>
      </div>

      <div class="fs10__item">
        <div class="fs10__node"><div class="fs10__node-dot"></div></div>
        <div class="fs10__card">
          <div>
            <div class="fs10__card-meta">
              <span class="fs10__card-phase">PHASE_02</span>
              <span class="fs10__card-status fs10__status--active">Active</span>
            </div>
            <div class="fs10__card-title">Stream Processing Engine</div>
            <div class="fs10__card-body">Stateful transformations, windowed aggregations, and joins run at the edge — milliseconds after events arrive, not hours later in a batch job.</div>
            <div class="fs10__card-tags">
              <span class="fs10__tag">sub-50ms</span>
              <span class="fs10__tag">exactly-once</span>
              <span class="fs10__tag">autoscaling</span>
            </div>
          </div>
          <div class="fs10__card-right">
            <div class="fs10__metric-big">48ms</div>
            <div class="fs10__metric-lbl">p99 latency</div>
          </div>
        </div>
      </div>

      <div class="fs10__item">
        <div class="fs10__node"><div class="fs10__node-dot"></div></div>
        <div class="fs10__card">
          <div>
            <div class="fs10__card-meta">
              <span class="fs10__card-phase">PHASE_03</span>
              <span class="fs10__card-status fs10__status--new">New</span>
            </div>
            <div class="fs10__card-title">Semantic Layer + Query API</div>
            <div class="fs10__card-body">Define your metrics once, query them everywhere. Consistent definitions across dashboards, alerts, and embedded analytics — no more metric drift across teams.</div>
            <div class="fs10__card-tags">
              <span class="fs10__tag">metric-store</span>
              <span class="fs10__tag">rest + graphql</span>
              <span class="fs10__tag">cache-first</span>
            </div>
          </div>
          <div class="fs10__card-right">
            <div class="fs10__metric-big">1 def</div>
            <div class="fs10__metric-lbl">metric source</div>
          </div>
        </div>
      </div>

      <div class="fs10__item">
        <div class="fs10__node"><div class="fs10__node-dot"></div></div>
        <div class="fs10__card">
          <div>
            <div class="fs10__card-meta">
              <span class="fs10__card-phase">PHASE_04</span>
              <span class="fs10__card-status fs10__status--beta">Beta</span>
            </div>
            <div class="fs10__card-title">AI Anomaly Detection</div>
            <div class="fs10__card-body">Unsupervised models trained on your specific traffic fingerprint. Flags statistical outliers and surfaces likely root causes before your on-call engineer wakes up.</div>
            <div class="fs10__card-tags">
              <span class="fs10__tag">zero-config</span>
              <span class="fs10__tag">adaptive baseline</span>
              <span class="fs10__tag">explainable</span>
            </div>
          </div>
          <div class="fs10__card-right">
            <div class="fs10__metric-big">94%</div>
            <div class="fs10__metric-lbl">detection rate</div>
          </div>
        </div>
      </div>

      <div class="fs10__item">
        <div class="fs10__node"><div class="fs10__node-dot"></div></div>
        <div class="fs10__card">
          <div>
            <div class="fs10__card-meta">
              <span class="fs10__card-phase">PHASE_05</span>
              <span class="fs10__card-status fs10__status--soon">Coming Q3</span>
            </div>
            <div class="fs10__card-title">Automated Remediation</div>
            <div class="fs10__card-body">Close the loop between detection and resolution. Pre-approved runbooks execute automatically when a known issue is detected — human approval for anything novel.</div>
            <div class="fs10__card-tags">
              <span class="fs10__tag">runbook-driven</span>
              <span class="fs10__tag">approval gates</span>
              <span class="fs10__tag">full audit trail</span>
            </div>
          </div>
          <div class="fs10__card-right">
            <div class="fs10__metric-big">0</div>
            <div class="fs10__metric-lbl">manual pages</div>
          </div>
        </div>
      </div>
    </div>

    <div class="fs10__cta-wrap">
      <p>All five stages included in every plan. No roadmap upsells.</p>
      <a href="#" class="fs10__btn">Explore the full platform →</a>
    </div>
  </div>
</section>
```

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

.fs10 {
  font-family: 'Sora', sans-serif;
  background: #060612;
  color: #e8e6f4;
  padding: 100px 24px;
  min-height: 100vh;
  overflow: hidden;
}

.fs10__inner { max-width: 900px; margin: 0 auto; }

.fs10__header { text-align: center; margin-bottom: 80px; }

.fs10__pre {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: #64ffda;
  border: 1px solid rgba(100,255,218,0.2);
  background: rgba(100,255,218,0.05);
  padding: 5px 12px;
  border-radius: 6px;
  margin-bottom: 24px;
}

.fs10__h2 {
  font-size: clamp(34px, 5vw, 58px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin-bottom: 18px;
}

.fs10__h2 span {
  background: linear-gradient(135deg, #64ffda, #00b4d8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.fs10__sub {
  font-size: 17px;
  color: rgba(232,230,244,0.45);
  max-width: 460px;
  margin: 0 auto;
  line-height: 1.65;
}

/* Timeline */
.fs10__timeline {
  position: relative;
  padding-left: 60px;
}

/* Vertical line */
.fs10__timeline::before {
  content: '';
  position: absolute;
  left: 20px;
  top: 0; bottom: 0;
  width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(100,255,218,0.3) 10%, rgba(100,255,218,0.3) 90%, transparent);
}

/* Moving glow on the line */
.fs10__line-glow {
  position: absolute;
  left: 16px; top: 0;
  width: 9px;
  height: 80px;
  background: linear-gradient(to bottom, transparent, #64ffda, transparent);
  border-radius: 100px;
  animation: fs10-travel 4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes fs10-travel {
  0% { top: 0; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { top: calc(100% - 80px); opacity: 0; }
}

.fs10__item {
  position: relative;
  padding: 0 0 56px 0;
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity 0.6s cubic-bezier(.4,0,.2,1), transform 0.6s cubic-bezier(.4,0,.2,1);
}

.fs10__item.fs10--visible {
  opacity: 1;
  transform: none;
}

.fs10__item:last-child { padding-bottom: 0; }

/* Timeline node */
.fs10__node {
  position: absolute;
  left: -49px;
  top: 4px;
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(100,255,218,0.3);
  background: #060612;
  display: flex; align-items: center; justify-content: center;
  transition: border-color 0.3s, box-shadow 0.3s;
}

.fs10__item:hover .fs10__node {
  border-color: #64ffda;
  box-shadow: 0 0 12px rgba(100,255,218,0.4);
}

.fs10__node-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(100,255,218,0.4);
  transition: background 0.3s;
}

.fs10__item:hover .fs10__node-dot { background: #64ffda; }

/* Card */
.fs10__card {
  background: #0d0d20;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 18px;
  padding: 28px 32px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: start;
  transition: border-color 0.3s, background 0.3s;
  position: relative;
  overflow: hidden;
}

.fs10__card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  border-radius: 18px 0 0 18px;
  opacity: 0;
  transition: opacity 0.3s;
}

.fs10__item:nth-child(1) .fs10__card::before { background: #64ffda; }
.fs10__item:nth-child(2) .fs10__card::before { background: #00b4d8; }
.fs10__item:nth-child(3) .fs10__card::before { background: #a78bfa; }
.fs10__item:nth-child(4) .fs10__card::before { background: #fb923c; }
.fs10__item:nth-child(5) .fs10__card::before { background: #34d399; }

.fs10__item:hover .fs10__card {
  border-color: rgba(255,255,255,0.14);
  background: #10102a;
}

.fs10__item:hover .fs10__card::before { opacity: 1; }

.fs10__card-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.fs10__card-phase {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: rgba(232,230,244,0.35);
  letter-spacing: 0.08em;
}

.fs10__card-status {
  font-size: 10px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 100px;
}

.fs10__status--live { background: rgba(100,255,218,0.1); color: #64ffda; }
.fs10__status--active { background: rgba(0,180,216,0.1); color: #00b4d8; }
.fs10__status--new { background: rgba(167,139,250,0.1); color: #a78bfa; }
.fs10__status--beta { background: rgba(251,146,60,0.1); color: #fb923c; }
.fs10__status--soon { background: rgba(52,211,153,0.1); color: #34d399; }

.fs10__card-title {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: #fff;
  margin-bottom: 10px;
}

.fs10__card-body {
  font-size: 14px;
  line-height: 1.7;
  color: rgba(232,230,244,0.5);
  margin-bottom: 18px;
}

.fs10__card-tags {
  display: flex; flex-wrap: wrap; gap: 6px;
}

.fs10__tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(255,255,255,0.05);
  color: rgba(232,230,244,0.45);
}

/* Right column: metric */
.fs10__card-right { text-align: right; }

.fs10__metric-big {
  font-size: 36px;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 4px;
}

.fs10__item:nth-child(1) .fs10__metric-big { color: #64ffda; }
.fs10__item:nth-child(2) .fs10__metric-big { color: #00b4d8; }
.fs10__item:nth-child(3) .fs10__metric-big { color: #a78bfa; }
.fs10__item:nth-child(4) .fs10__metric-big { color: #fb923c; }
.fs10__item:nth-child(5) .fs10__metric-big { color: #34d399; }

.fs10__metric-lbl {
  font-size: 11px;
  color: rgba(232,230,244,0.3);
  white-space: nowrap;
}

/* CTA */
.fs10__cta-wrap {
  text-align: center;
  margin-top: 64px;
  padding-top: 48px;
  border-top: 1px solid rgba(255,255,255,0.07);
}

.fs10__cta-wrap p {
  font-size: 16px;
  color: rgba(232,230,244,0.45);
  margin-bottom: 20px;
}

.fs10__btn {
  display: inline-flex; align-items: center; gap: 10px;
  background: rgba(100,255,218,0.1);
  border: 1px solid rgba(100,255,218,0.3);
  color: #64ffda;
  font-family: 'Sora', sans-serif;
  font-size: 15px;
  font-weight: 600;
  padding: 13px 28px;
  border-radius: 100px;
  text-decoration: none;
  transition: background 0.2s, box-shadow 0.2s;
}

.fs10__btn:hover {
  background: rgba(100,255,218,0.18);
  box-shadow: 0 0 24px rgba(100,255,218,0.2);
}

@media (max-width: 600px) {
  .fs10__timeline { padding-left: 40px; }
  .fs10__node { left: -32px; }
  .fs10__card { grid-template-columns: 1fr; }
  .fs10__card-right { text-align: left; display: flex; gap: 12px; align-items: baseline; }
}

@media (prefers-reduced-motion: reduce) {
  .fs10__line-glow { animation: none; }
  .fs10__item { opacity: 1; transform: none; transition: none; }
  .fs10__card, .fs10__node, .fs10__card::before { transition: none; }
}
```

**JS:**
```js
const observer = new IntersectionObserver(entries => {
  entries.forEach(e => {
    if (e.isIntersecting) {
      e.target.classList.add('fs10--visible');
      observer.unobserve(e.target);
    }
  });
}, { threshold: 0.1 });

document.querySelectorAll('.fs10__item').forEach((el, i) => {
  el.style.transitionDelay = `${i * 0.12}s`;
  observer.observe(el);
});
```

---
## 15 CSS Flexbox Layouts

URL: https://codefronts.com/layouts/css-flexbox-layouts/
Description: 15 production-ready CSS flexbox layouts with live demos and copy-paste code — holy grail page shell, responsive card grid, sticky navbar, masonry-style columns, sidebar dashboard, product cards, pricing table, magazine article, sticky footer with min-block-size: 100dvh, centered hero, vertical timeline, chat interface, mosaic gallery, two-column form, and kanban board. Every demo is mobile-first, WCAG-friendly, and works without a build step.
Demo count: 15

### 01. CSS Flexbox Holy Grail Layout

**Type:** Pure CSS
**Description:** A classic holy grail layout — fixed header, footer, left sidebar, right aside, and expanding main column — built entirely with nested flex containers and no CSS Grid.

**HTML:**
```html
<div class="fl-01">
  <div class="fl-01__wrapper">

    <!-- Header -->
    <header class="fl-01__header">
      <div class="fl-01__logo">Holy<span>Grail</span></div>
      <ul class="fl-01__nav">
        <li><a href="#">Docs</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </header>

    <!-- Body Row -->
    <div class="fl-01__body">

      <!-- Left Sidebar -->
      <nav class="fl-01__sidebar">
        <div class="fl-01__sidebar-label">Navigation</div>
        <div class="fl-01__sidebar-item is-active">
          <div class="fl-01__sidebar-icon"></div> Dashboard
        </div>
        <div class="fl-01__sidebar-item">
          <div class="fl-01__sidebar-icon"></div> Analytics
        </div>
        <div class="fl-01__sidebar-item">
          <div class="fl-01__sidebar-icon"></div> Content
        </div>
        <div class="fl-01__sidebar-item">
          <div class="fl-01__sidebar-icon"></div> Settings
        </div>
        <div class="fl-01__sidebar-label" style="margin-top:8px">Library</div>
        <div class="fl-01__sidebar-item">
          <div class="fl-01__sidebar-icon"></div> Media
        </div>
        <div class="fl-01__sidebar-item">
          <div class="fl-01__sidebar-icon"></div> Files
        </div>
      </nav>

      <!-- Main Content -->
      <main class="fl-01__main">
        <div class="fl-01__breadcrumb">Home › Dashboard › <span>Overview</span></div>
        <h1 class="fl-01__main-title">Holy Grail Layout<br>with CSS Flexbox</h1>
        <div class="fl-01__meta">
          <div class="fl-01__tag">Pure CSS</div>
          <span>Header · Sidebar · Content · Aside · Footer</span>
        </div>
        <div class="fl-01__content-body">
          <p>The Holy Grail layout — a full-height page with a header, sticky footer, left sidebar, right aside, and fluid centre — solved the hardest layout problem of the float era. Flexbox reduces it to two nested flex containers: an outer <code>column</code> wrapper and an inner <code>row</code> middle section.</p>
          <p>The outer wrapper uses <code>flex-direction: column</code> and <code>min-height: 100%</code>. The middle row gets <code>flex: 1</code> to fill remaining space, while sidebars use a fixed <code>width</code> with <code>flex-shrink: 0</code> to resist compression.</p>
        </div>
        <div class="fl-01__divider"></div>
        <div class="fl-01__cards">
          <div class="fl-01__card">
            <div class="fl-01__card-label">flex: 1</div>
            <div class="fl-01__card-value">Main</div>
            <div class="fl-01__card-delta">Fills remaining width</div>
          </div>
          <div class="fl-01__card">
            <div class="fl-01__card-label">flex-shrink: 0</div>
            <div class="fl-01__card-value">Sides</div>
            <div class="fl-01__card-delta">Fixed at 180px each</div>
          </div>
          <div class="fl-01__card">
            <div class="fl-01__card-label">flex-direction</div>
            <div class="fl-01__card-value">Column</div>
            <div class="fl-01__card-delta">Header stacks on footer</div>
          </div>
        </div>
      </main>

      <!-- Right Aside -->
      <aside class="fl-01__aside">
        <div class="fl-01__aside-title">Flex Properties</div>
        <div class="fl-01__aside-item">
          <div class="fl-01__aside-name">flex-grow</div>
          <div class="fl-01__aside-sub">Fills free space</div>
          <div class="fl-01__aside-bar-wrap">
            <div class="fl-01__aside-bar" style="width:90%"></div>
          </div>
        </div>
        <div class="fl-01__aside-item">
          <div class="fl-01__aside-name">flex-shrink</div>
          <div class="fl-01__aside-sub">Resists squish</div>
          <div class="fl-01__aside-bar-wrap">
            <div class="fl-01__aside-bar" style="width:60%"></div>
          </div>
        </div>
        <div class="fl-01__aside-item">
          <div class="fl-01__aside-name">flex-basis</div>
          <div class="fl-01__aside-sub">Starting size</div>
          <div class="fl-01__aside-bar-wrap">
            <div class="fl-01__aside-bar" style="width:75%"></div>
          </div>
        </div>
        <div class="fl-01__aside-item">
          <div class="fl-01__aside-name">align-items</div>
          <div class="fl-01__aside-sub">Cross-axis align</div>
          <div class="fl-01__aside-bar-wrap">
            <div class="fl-01__aside-bar" style="width:50%"></div>
          </div>
        </div>
      </aside>

    </div><!-- /.fl-01__body -->

    <!-- Footer -->
    <footer class="fl-01__footer">
      <span>© 2025 HolyGrail Demo · Flexbox</span>
      <ul class="fl-01__footer-links">
        <li><a href="#">Privacy</a></li>
        <li><a href="#">Terms</a></li>
        <li><a href="#">Sitemap</a></li>
      </ul>
    </footer>

  </div>
</div>
```

**CSS:**
```css
.fl-01, .fl-01 *, .fl-01 *::before, .fl-01 *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
.fl-01 ::selection { background: #6c63ff; color: #fff; }

.fl-01 {
  --ink: #1a1a2e;
  --muted: #6b7280;
  --accent: #6c63ff;
  --accent2: #f59e0b;
  --surface: #f8f7ff;
  --border: #e5e3ff;
  --header-bg: #1a1a2e;
  --sidebar-bg: #f0eeff;
  --aside-bg: #fff8ed;
  --content-bg: #ffffff;
  --footer-bg: #1a1a2e;
  font-family: 'Inter', sans-serif;
  background: var(--surface);
  min-height: 500px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--border);
}

/* Holy Grail: column flex on outer, row flex on middle */
.fl-01__wrapper {
  display: flex;
  flex-direction: column;
  min-height: 500px;
}

/* ── Header ── */
.fl-01__header {
  background: var(--header-bg);
  color: #fff;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.fl-01__logo {
  font-family: 'Playfair Display', serif;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
}
.fl-01__logo span { color: var(--accent2); }
.fl-01__nav {
  display: flex;
  gap: 20px;
  list-style: none;
}
.fl-01__nav li a {
  color: rgba(255,255,255,0.7);
  text-decoration: none;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: color 0.2s;
}
.fl-01__nav li a:hover { color: #fff; }

/* ── Middle row: sidebar + main + aside ── */
.fl-01__body {
  display: flex;
  flex: 1;
  min-height: 0;
}

/* ── Left Sidebar ── */
.fl-01__sidebar {
  background: var(--sidebar-bg);
  width: 180px;
  flex-shrink: 0;
  padding: 20px 16px;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.fl-01__sidebar-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 8px 8px 4px;
}
.fl-01__sidebar-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.15s;
}
.fl-01__sidebar-item:hover { background: rgba(108,99,255,0.1); }
.fl-01__sidebar-item.is-active {
  background: var(--accent);
  color: #fff;
}
.fl-01__sidebar-icon {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  background: currentColor;
  opacity: 0.25;
}
.fl-01__sidebar-item.is-active .fl-01__sidebar-icon { opacity: 0.6; background: #fff; }

/* ── Main Content ── */
.fl-01__main {
  flex: 1;
  background: var(--content-bg);
  padding: 24px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.fl-01__breadcrumb {
  font-size: 0.72rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 6px;
}
.fl-01__breadcrumb span { color: var(--ink); font-weight: 600; }
.fl-01__main-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.4rem;
  color: var(--ink);
  line-height: 1.3;
}
.fl-01__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.75rem;
  color: var(--muted);
}
.fl-01__tag {
  background: rgba(108,99,255,0.1);
  color: var(--accent);
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 0.7rem;
}
.fl-01__content-body {
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.7;
}
.fl-01__content-body p + p { margin-top: 10px; }
.fl-01__divider {
  height: 1px;
  background: var(--border);
}
.fl-01__cards {
  display: flex;
  gap: 12px;
}
.fl-01__card {
  flex: 1;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
}
.fl-01__card-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 6px;
}
.fl-01__card-value {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--ink);
}
.fl-01__card-delta {
  font-size: 0.72rem;
  color: #10b981;
  font-weight: 600;
  margin-top: 2px;
}

/* ── Right Aside ── */
.fl-01__aside {
  background: var(--aside-bg);
  width: 180px;
  flex-shrink: 0;
  padding: 20px 16px;
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.fl-01__aside-title {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.fl-01__aside-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px;
  background: #fff;
  border-radius: 8px;
  border: 1px solid #fde68a;
}
.fl-01__aside-name {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink);
}
.fl-01__aside-sub {
  font-size: 0.7rem;
  color: var(--muted);
}
.fl-01__aside-bar-wrap {
  height: 4px;
  background: #fde68a;
  border-radius: 4px;
  overflow: hidden;
  margin-top: 2px;
}
.fl-01__aside-bar {
  height: 100%;
  background: var(--accent2);
  border-radius: 4px;
  animation: fl-01-bar-grow 1.2s ease both;
}
@keyframes fl-01-bar-grow {
  from { width: 0; }
}

/* ── Footer ── */
.fl-01__footer {
  background: var(--footer-bg);
  color: rgba(255,255,255,0.5);
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.72rem;
  flex-shrink: 0;
}
.fl-01__footer-links {
  display: flex;
  gap: 16px;
  list-style: none;
}
.fl-01__footer-links a {
  color: rgba(255,255,255,0.4);
  text-decoration: none;
}
.fl-01__footer-links a:hover { color: #fff; }

/* Label overlay */
.fl-01__zone-label {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: rgba(108,99,255,0.12);
  color: var(--accent);
  padding: 2px 7px;
  border-radius: 4px;
  margin-bottom: 6px;
}

@media (prefers-reduced-motion: reduce) {
  .fl-01__aside-bar { animation: none; }
}
```

### 02. CSS Flexbox Card Grid Layout

**Type:** Pure CSS
**Description:** A responsive flex card grid with a featured wide card and uniform standard cards that wrap automatically — no media queries required for the basic reflow.

**HTML:**
```html
<div class="fl-02">
  <div class="fl-02__header">
    <h1 class="fl-02__title">Flex Card Grid</h1>
  </div>
  <p class="fl-02__subtitle">flex-wrap row layout with featured & standard cards</p>
  <div class="fl-02__filter-tabs">
    <div class="fl-02__tab is-active">All</div>
    <div class="fl-02__tab">Design</div>
    <div class="fl-02__tab">Dev</div>
    <div class="fl-02__tab">Motion</div>
  </div>

  <div class="fl-02__grid">

    <!-- Featured card -->
    <div class="fl-02__card fl-02__card--featured">
      <div class="fl-02__card-thumb">
        <div class="fl-02__card-thumb-bg" style="background: linear-gradient(135deg,#1a0533,#3b0f6e)">
          <div class="fl-02__card-thumb-shape" style="background:#b46fff;width:90px;height:90px"></div>
        </div>
        <div class="fl-02__card-badge" style="background:#ff6b6b">Featured</div>
      </div>
      <div class="fl-02__card-body">
        <div class="fl-02__card-category">Design System</div>
        <div class="fl-02__card-name">Flexbox Grid Patterns for Modern UIs</div>
        <div class="fl-02__card-desc">Master flex-wrap, flex-basis, and gap to build fluid, responsive card grids without a single media query. Featured items use flex: 2 for visual hierarchy.</div>
        <div class="fl-02__card-footer">
          <div class="fl-02__card-price">Free</div>
          <div class="fl-02__card-cta" style="background:#ff6b6b">Read More</div>
        </div>
      </div>
    </div>

    <!-- Card 2 -->
    <div class="fl-02__card">
      <div class="fl-02__card-thumb">
        <div class="fl-02__card-thumb-bg" style="background: linear-gradient(135deg,#003344,#006688)">
          <div class="fl-02__card-thumb-shape" style="background:#4d96ff"></div>
        </div>
        <div class="fl-02__card-badge" style="background:#4d96ff">New</div>
      </div>
      <div class="fl-02__card-body">
        <div class="fl-02__card-category">CSS Layout</div>
        <div class="fl-02__card-name">Auto Sizing with flex-basis</div>
        <div class="fl-02__card-desc">Use <code style="color:#4d96ff">flex: 1 1 200px</code> for columns that grow and wrap naturally.</div>
        <div class="fl-02__card-footer">
          <div class="fl-02__card-price">$12</div>
          <div class="fl-02__card-cta" style="background:#4d96ff">View</div>
        </div>
      </div>
    </div>

    <!-- Card 3 -->
    <div class="fl-02__card">
      <div class="fl-02__card-thumb">
        <div class="fl-02__card-thumb-bg" style="background: linear-gradient(135deg,#001a0d,#004d2a)">
          <div class="fl-02__card-thumb-shape" style="background:#6bcb77"></div>
        </div>
        <div class="fl-02__card-badge" style="background:#6bcb77">Guide</div>
      </div>
      <div class="fl-02__card-body">
        <div class="fl-02__card-category">Performance</div>
        <div class="fl-02__card-name">Gap vs Margin in Flex Rows</div>
        <div class="fl-02__card-desc">The <code style="color:#6bcb77">gap</code> property skips edge gutters. No negative-margin hacks needed.</div>
        <div class="fl-02__card-footer">
          <div class="fl-02__card-price">$8</div>
          <div class="fl-02__card-cta" style="background:#6bcb77">View</div>
        </div>
      </div>
    </div>

    <!-- Card 4 -->
    <div class="fl-02__card">
      <div class="fl-02__card-thumb">
        <div class="fl-02__card-thumb-bg" style="background: linear-gradient(135deg,#1a1000,#4d3500)">
          <div class="fl-02__card-thumb-shape" style="background:#ffd93d"></div>
        </div>
        <div class="fl-02__card-badge" style="background:#ffd93d;color:#1a1000">Pro</div>
      </div>
      <div class="fl-02__card-body">
        <div class="fl-02__card-category">Advanced</div>
        <div class="fl-02__card-name">Order & Reordering Flex Items</div>
        <div class="fl-02__card-desc">The <code style="color:#ffd93d">order</code> property reshuffles DOM order visually, ideal for mobile-first designs.</div>
        <div class="fl-02__card-footer">
          <div class="fl-02__card-price">$15</div>
          <div class="fl-02__card-cta" style="background:#ffd93d;color:#1a1000">View</div>
        </div>
      </div>
    </div>

  </div>
</div>
```

**CSS:**
```css
.fl-02, .fl-02 *, .fl-02 *::before, .fl-02 *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
.fl-02 ::selection { background: #ff6b6b; color: #fff; }

.fl-02 {
  --ink: #1c1c1e;
  --muted: #8e8e93;
  --accent: #ff6b6b;
  --accent2: #ffd93d;
  --green: #6bcb77;
  --blue: #4d96ff;
  --surface: #0f0f13;
  --card: #1c1c24;
  --card-border: rgba(255,255,255,0.07);
  font-family: 'DM Sans', sans-serif;
  background: var(--surface);
  padding: 28px;
  min-height: 500px;
  border-radius: 16px;
}

.fl-02__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 6px;
}
.fl-02__title {
  font-family: 'DM Serif Display', serif;
  font-size: 1.5rem;
  color: #fff;
}
.fl-02__subtitle {
  font-size: 0.78rem;
  color: var(--muted);
  margin-bottom: 20px;
}
.fl-02__filter-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
}
.fl-02__tab {
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  background: var(--card);
  color: var(--muted);
  border: 1px solid var(--card-border);
  transition: all 0.2s;
}
.fl-02__tab.is-active {
  background: var(--accent);
  color: #fff;
  border-color: transparent;
}

/* Card grid: flex-wrap row */
.fl-02__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* Featured: 2/3 width */
.fl-02__card {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  flex: 1 1 calc(33% - 14px);
  min-width: 160px;
  transition: transform 0.2s, box-shadow 0.2s;
  cursor: pointer;
}
.fl-02__card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.4);
}
.fl-02__card--featured {
  flex: 2 1 calc(66% - 7px);
  flex-direction: row;
}

.fl-02__card-thumb {
  height: 120px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.fl-02__card--featured .fl-02__card-thumb {
  width: 200px;
  height: auto;
}
.fl-02__card-thumb-bg {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fl-02__card-thumb-shape {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  opacity: 0.3;
  animation: fl-02-pulse 3s ease-in-out infinite;
}
@keyframes fl-02-pulse {
  0%,100% { transform: scale(1); opacity: 0.3; }
  50% { transform: scale(1.15); opacity: 0.5; }
}
.fl-02__card-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
  color: #fff;
}
.fl-02__card-body {
  padding: 14px;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 6px;
}
.fl-02__card-category {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.fl-02__card-name {
  font-size: 0.92rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
}
.fl-02__card--featured .fl-02__card-name { font-size: 1.1rem; }
.fl-02__card-desc {
  font-size: 0.75rem;
  color: var(--muted);
  line-height: 1.6;
  flex: 1;
}
.fl-02__card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid var(--card-border);
}
.fl-02__card-price {
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
}
.fl-02__card-cta {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 6px;
  color: #fff;
  letter-spacing: 0.04em;
}

@media (prefers-reduced-motion: reduce) {
  .fl-02__card-thumb-shape { animation: none; }
  .fl-02__card { transition: none; }
}
```

### 03. CSS Flexbox Navigation Bar

**Type:** Pure CSS
**Description:** Three navigation bar variants — space-between spread, absolutely centered links with flex spacers, and a pill-style active-highlight nav — all built with flex alignment tricks.

**HTML:**
```html
<div class="fl-03">

  <!-- Variant 1: classic space-between -->
  <div class="fl-03__nav-row">
    <span class="fl-03__nav-tag">space-between</span>
    <nav class="fl-03__nav">
      <div class="fl-03__logo">Flex<em>Nav</em></div>
      <div class="fl-03__spacer"></div>
      <ul class="fl-03__links">
        <li class="fl-03__link is-active">Home</li>
        <li class="fl-03__link">Products <span class="fl-03__link-badge">3</span></li>
        <li class="fl-03__link">Blog</li>
        <li class="fl-03__link">Pricing</li>
      </ul>
      <div class="fl-03__spacer"></div>
      <div class="fl-03__actions">
        <div class="fl-03__icon-btn">🔔</div>
        <button class="fl-03__btn fl-03__btn--ghost">Log in</button>
        <button class="fl-03__btn fl-03__btn--primary">Sign up</button>
        <div class="fl-03__avatar">AK</div>
      </div>
    </nav>
  </div>

  <!-- Variant 2: centered links -->
  <div class="fl-03__nav-row">
    <span class="fl-03__nav-tag fl-03__nav-tag--pink">centered links</span>
    <nav class="fl-03__nav fl-03__nav--centered">
      <div class="fl-03__logo">A<em>.</em></div>
      <ul class="fl-03__links">
        <li class="fl-03__link is-active">Work</li>
        <li class="fl-03__link">About</li>
        <li class="fl-03__link">Journal</li>
        <li class="fl-03__link">Contact</li>
      </ul>
      <div class="fl-03__spacer"></div>
      <div class="fl-03__actions">
        <button class="fl-03__btn fl-03__btn--primary">Hire me</button>
      </div>
    </nav>
  </div>

  <!-- Variant 3: pill nav -->
  <div class="fl-03__nav-row">
    <span class="fl-03__nav-tag">pill nav</span>
    <div class="fl-03__nav--pill">
      <div class="fl-03__pill-wrap">
        <div class="fl-03__pill-logo">Pill<em>UI</em></div>
        <ul class="fl-03__pill-links">
          <li class="fl-03__pill-link is-active">Home</li>
          <li class="fl-03__pill-link">Features</li>
          <li class="fl-03__pill-link">Docs</li>
          <li class="fl-03__pill-link">Community</li>
        </ul>
        <div class="fl-03__spacer"></div>
        <div class="fl-03__pill-cta">Get started →</div>
      </div>
    </div>
  </div>

  <!-- Variant cards -->
  <div class="fl-03__variants">
    <div class="fl-03__variant-card">
      <div class="fl-03__variant-title">Logo Left · Links Center</div>
      <div class="fl-03__variant-code">justify-content: space-between<br>flex: 1 spacers push links</div>
      <div class="fl-03__variant-desc">Two invisible <code>flex: 1</code> spacers flank the link list, centering it between logo and actions.</div>
    </div>
    <div class="fl-03__variant-card">
      <div class="fl-03__variant-title">Absolute Center Trick</div>
      <div class="fl-03__variant-code">position: absolute<br>left: 50%; translateX(-50%)</div>
      <div class="fl-03__variant-desc">Links use absolute positioning on the nav container to achieve pixel-perfect centering independent of logo width.</div>
    </div>
    <div class="fl-03__variant-card">
      <div class="fl-03__variant-title">Pill Nav Pattern</div>
      <div class="fl-03__variant-code">border-radius: 40px<br>align-items: center</div>
      <div class="fl-03__variant-desc">Wrapping the entire flex row in a pill border-radius creates a floating nav aesthetic popular in SaaS landing pages.</div>
    </div>
  </div>

</div>
```

**CSS:**
```css
.fl-03, .fl-03 *, .fl-03 *::before, .fl-03 *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
.fl-03 ::selection { background: #00f5c4; color: #000; }

.fl-03 {
  --bg: #0b0c10;
  --surface: #13151a;
  --border: rgba(255,255,255,0.08);
  --accent: #00f5c4;
  --accent2: #ff5c87;
  --muted: rgba(255,255,255,0.45);
  --text: #fff;
  font-family: 'Syne', sans-serif;
  background: var(--bg);
  padding: 12px 0 20px;
  min-height: 500px;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Variant row — wraps the variant tag + the nav itself.
   Tag sits ABOVE the nav as a non-overlapping caption so it never
   conflicts with the actions group on narrow viewports. */
.fl-03__nav-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 24px 0;
}
.fl-03__nav-tag {
  align-self: flex-start;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: 0.75;
  padding: 2px 8px;
  background: rgba(0,245,196,0.08);
  border: 1px solid rgba(0,245,196,0.2);
  border-radius: 4px;
}
.fl-03__nav-tag--pink {
  color: var(--accent2);
  background: rgba(255,92,135,0.08);
  border-color: rgba(255,92,135,0.2);
}

/* ── Navbar 1: Space-between classic ── */
.fl-03__nav {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0 16px;
  height: 56px;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

/* Logo */
.fl-03__logo {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.03em;
  flex-shrink: 0;
}
.fl-03__logo em { color: var(--accent); font-style: normal; }

/* Nav links group (center or left) */
.fl-03__links {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
}
.fl-03__link {
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  position: relative;
  transition: color 0.2s, background 0.2s;
}
.fl-03__link:hover { color: var(--text); background: rgba(255,255,255,0.06); }
.fl-03__link.is-active { color: var(--text); }
.fl-03__link.is-active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
}
.fl-03__link-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent2);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 800;
  margin-left: 4px;
}

/* Actions group */
.fl-03__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.fl-03__btn {
  padding: 6px 16px;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  font-family: 'Syne', sans-serif;
  cursor: pointer;
  border: none;
  transition: opacity 0.2s, transform 0.15s;
}
.fl-03__btn:hover { opacity: 0.85; transform: translateY(-1px); }
.fl-03__btn--ghost {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
}
.fl-03__btn--ghost:hover { color: var(--text); }
.fl-03__btn--primary {
  background: var(--accent);
  color: #000;
}
.fl-03__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff5c87, #6c63ff);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 800;
  color: #fff;
  cursor: pointer;
  flex-shrink: 0;
}
.fl-03__icon-btn {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--muted);
  font-size: 0.9rem;
  transition: background 0.2s, color 0.2s;
}
.fl-03__icon-btn:hover { background: rgba(255,255,255,0.1); color: var(--text); }

/* Spacer utility */
.fl-03__spacer { flex: 1; }

/* ── Variant descriptor cards ── */
.fl-03__variants {
  display: flex;
  flex: 1;
  padding: 20px 24px;
  gap: 14px;
  flex-wrap: wrap;
  align-content: flex-start;
}
.fl-03__variant-card {
  flex: 1 1 200px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.fl-03__variant-title {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.05em;
}
.fl-03__variant-code {
  font-family: 'Courier New', monospace;
  font-size: 0.72rem;
  color: rgba(255,255,255,0.5);
  background: rgba(255,255,255,0.04);
  padding: 6px 10px;
  border-radius: 6px;
  line-height: 1.7;
}
.fl-03__variant-desc {
  font-size: 0.75rem;
  color: var(--muted);
  line-height: 1.6;
}

/* Nav variant 2: centered links */
.fl-03__nav--centered .fl-03__links {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

/* Nav variant 3: pill style */
.fl-03__nav--pill {
  background: transparent;
  height: auto;
}
.fl-03__pill-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 40px;
  padding: 6px 8px 6px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
}
.fl-03__pill-logo {
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.03em;
  margin-right: 8px;
}
.fl-03__pill-logo em { color: var(--accent2); font-style: normal; }
.fl-03__pill-links {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  flex: 1;
}
.fl-03__pill-link {
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.2s;
}
.fl-03__pill-link:hover { color: var(--text); background: rgba(255,255,255,0.06); }
.fl-03__pill-link.is-active { background: var(--accent2); color: #fff; }
.fl-03__pill-cta {
  padding: 7px 16px;
  border-radius: 20px;
  background: var(--accent);
  color: #000;
  font-size: 0.76rem;
  font-weight: 800;
  cursor: pointer;
  flex-shrink: 0;
  transition: opacity 0.2s;
}
.fl-03__pill-cta:hover { opacity: 0.85; }

/* Responsive defenses: hide low-priority items so the actions group
   fits and nothing overflows. The "centered links" trick relies on the
   absolutely-positioned link group — on narrow viewports it would
   collide with the logo, so re-anchor it inline. */
@media (max-width: 640px) {
  .fl-03__nav-row { padding: 10px 12px 0; }
  .fl-03__nav { padding: 0 10px; }
  .fl-03__icon-btn,
  .fl-03__avatar { display: none; }
  .fl-03__link[data-priority="low"] { display: none; }
  .fl-03__nav--centered .fl-03__links {
    position: static;
    transform: none;
  }
  .fl-03__pill-logo { font-size: 0.8rem; }
  .fl-03__pill-link { padding: 5px 8px; font-size: 0.7rem; }
}
@media (max-width: 480px) {
  .fl-03__btn--ghost { display: none; }
  .fl-03__links .fl-03__link:nth-child(n+3) { display: none; }
  .fl-03__pill-links .fl-03__pill-link:nth-child(n+3) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .fl-03__btn, .fl-03__icon-btn { transition: none; }
}
```

### 04. CSS Flexbox Masonry-Style Layout

**Type:** Pure CSS
**Description:** A multi-column masonry-style card waterfall using <code>flex-direction: column</code> and <code>flex-wrap: wrap</code> with a fixed container height — no JavaScript required.

**HTML:**
```html
<div class="fl-04">
  <div class="fl-04__header">
    <h2 class="fl-04__title">CSS Flexbox Masonry-Style Layout</h2>
    <div class="fl-04__badge">flex-direction: column + flex-wrap</div>
  </div>

  <div class="fl-04__masonry">

    <!-- Col items — varied heights via padding/content -->
    <div class="fl-04__item">
      <div class="fl-04__item-visual" style="height:100px; background:linear-gradient(135deg,#1a0a2e,#4a1a8c)">
        <div class="fl-04__shape" style="width:52px;height:52px;background:#e040fb;opacity:0.7"></div>
      </div>
      <div class="fl-04__item-body">
        <div class="fl-04__item-cat">Layout</div>
        <div class="fl-04__item-title">Column-Wrap Masonry</div>
        <div class="fl-04__item-text">Set <code>flex-direction: column</code> and <code>flex-wrap: wrap</code> with a fixed container height to make items flow into natural columns.</div>
        <div class="fl-04__item-tags">
          <div class="fl-04__tag">flex-wrap</div>
          <div class="fl-04__tag">column</div>
        </div>
      </div>
    </div>

    <div class="fl-04__item">
      <div class="fl-04__item-visual" style="height:70px; background:linear-gradient(135deg,#001a33,#004080)">
        <div class="fl-04__shape" style="width:44px;height:44px;background:#06b6d4;opacity:0.8;border-radius:30% 70% 70% 30%"></div>
      </div>
      <div class="fl-04__item-body">
        <div class="fl-04__item-cat">Sizing</div>
        <div class="fl-04__item-title">Item Width</div>
        <div class="fl-04__item-text">Items need a fixed <code>width</code> (e.g. 33%) — not <code>flex</code> shorthand — so each column stays the same width.</div>
      </div>
    </div>

    <div class="fl-04__item">
      <div class="fl-04__item-visual" style="height:130px; background:linear-gradient(135deg,#1a0500,#4d1a00)">
        <div class="fl-04__shape" style="width:68px;height:68px;background:#f59e0b;opacity:0.8;border-radius:60% 40% 30% 70%"></div>
      </div>
      <div class="fl-04__item-body">
        <div class="fl-04__item-cat">Container</div>
        <div class="fl-04__item-title">The Height Constraint Controls Column Count</div>
        <div class="fl-04__item-text">The container's fixed height determines when items wrap to a new column. Taller height = fewer columns. This is the key insight for this technique.</div>
        <div class="fl-04__item-tags">
          <div class="fl-04__tag">height</div>
          <div class="fl-04__tag">wrap boundary</div>
        </div>
      </div>
    </div>

    <div class="fl-04__item">
      <div class="fl-04__item-visual" style="height:90px; background:linear-gradient(135deg,#001a12,#004d35)">
        <div class="fl-04__shape" style="width:56px;height:56px;background:#10b981;opacity:0.8;border-radius:40% 60% 55% 45%"></div>
      </div>
      <div class="fl-04__item-body">
        <div class="fl-04__item-cat">Gap</div>
        <div class="fl-04__item-title">Gutters with gap</div>
        <div class="fl-04__item-text">The <code>gap</code> shorthand sets row and column gutters uniformly without margin edge-cases.</div>
      </div>
    </div>

    <div class="fl-04__item">
      <div class="fl-04__item-visual" style="height:80px; background:linear-gradient(135deg,#1a0a1a,#4a1a4a)">
        <div class="fl-04__shape" style="width:48px;height:48px;background:#e040fb;opacity:0.7"></div>
      </div>
      <div class="fl-04__item-body">
        <div class="fl-04__item-cat">Caveat</div>
        <div class="fl-04__item-title">Reading Order Is Top-Down</div>
        <div class="fl-04__item-text">Items flow column-first, not row-first. For strict row order, use CSS Grid instead.</div>
      </div>
    </div>

    <div class="fl-04__item">
      <div class="fl-04__item-visual" style="height:110px; background:linear-gradient(135deg,#1a1000,#4d3300)">
        <div class="fl-04__shape" style="width:62px;height:62px;background:#f59e0b;opacity:0.7;border-radius:50% 50% 30% 70%"></div>
      </div>
      <div class="fl-04__item-body">
        <div class="fl-04__item-cat">Responsive</div>
        <div class="fl-04__item-title">Dynamic Column Count via Container Height</div>
        <div class="fl-04__item-text">Use a CSS custom property for container height and update it via JS or @media queries to control how many columns appear at each breakpoint.</div>
        <div class="fl-04__item-tags">
          <div class="fl-04__tag">responsive</div>
          <div class="fl-04__tag">custom props</div>
        </div>
      </div>
    </div>

  </div>
</div>
```

**CSS:**
```css
.fl-04, .fl-04 *, .fl-04 *::before, .fl-04 *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
.fl-04 ::selection { background: #e040fb; color: #fff; }

.fl-04 {
  --bg: #f4f0ff;
  --surface: #fff;
  --ink: #1a0a2e;
  --muted: #8a7fa8;
  --accent: #7c3aed;
  --accent2: #e040fb;
  --accent3: #06b6d4;
  --accent4: #f59e0b;
  --border: rgba(124,58,237,0.12);
  font-family: 'Space Grotesk', sans-serif;
  background: var(--bg);
  padding: 24px;
  border-radius: 16px;
  min-height: 500px;
}

.fl-04__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.fl-04__title {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--ink);
}
.fl-04__badge {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--accent);
  color: #fff;
  padding: 4px 10px;
  border-radius: 20px;
}

/*
  Flexbox masonry: flex-direction column + flex-wrap wrap
  Height of container controls how many items per column.
  Items flow top→bottom then start a new column.
  Defensive overflow:hidden prevents excess columns from bleeding past
  the parent width at narrow viewports — the masonry algorithm doesn't
  shrink column count on its own, it just keeps packing.
*/
.fl-04__masonry {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 12px;
  height: 760px; /* controls column count at desktop width */
  overflow: hidden;
}

.fl-04__item {
  width: calc(33.33% - 8px);
  background: var(--surface);
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border);
  break-inside: avoid;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  transition: transform 0.2s, box-shadow 0.2s;
}
.fl-04__item:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(124,58,237,0.15);
}

.fl-04__item-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.fl-04__item-visual-inner {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fl-04__shape {
  border-radius: 50%;
  animation: fl-04-float 4s ease-in-out infinite;
}
@keyframes fl-04-float {
  0%,100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-6px) rotate(8deg); }
}
.fl-04__item:nth-child(3n+2) .fl-04__shape { animation-delay: -1.5s; }
.fl-04__item:nth-child(3n+3) .fl-04__shape { animation-delay: -3s; }

.fl-04__item-body {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.fl-04__item-cat {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.fl-04__item-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
}
.fl-04__item-text {
  font-size: 0.77rem;
  color: var(--muted);
  line-height: 1.6;
}
.fl-04__item-tags {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.fl-04__tag {
  font-size: 0.65rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 20px;
  background: rgba(124,58,237,0.1);
  color: var(--accent);
}

/* Responsive masonry. The flex-direction:column masonry algorithm
   doesn't auto-reduce column count when items get narrow — we have to
   adjust the container height + item width per breakpoint or items
   keep wrapping into more columns. */
@media (max-width: 760px) {
  .fl-04__masonry { height: 1100px; }
  .fl-04__item { width: calc(50% - 6px); }
}
@media (max-width: 520px) {
  .fl-04__masonry {
    flex-wrap: nowrap;
    height: auto;
    overflow: visible;
  }
  .fl-04__item { width: 100%; }
  .fl-04__header { flex-direction: column; align-items: flex-start; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .fl-04__shape { animation: none; }
  .fl-04__item { transition: none; }
}
```

### 05. CSS Flexbox Sidebar Dashboard Layout

**Type:** Pure CSS
**Description:** A full app-shell dashboard with a fixed-width flex sidebar, collapsible nav groups, top header bar, stat cards row, and a main content area — all wired with flexbox.

**HTML:**
```html
<div class="fl-05">
  <div class="fl-05__shell">

    <!-- Sidebar -->
    <aside class="fl-05__sidebar">
      <div class="fl-05__sidebar-top">
        <div class="fl-05__workspace-icon">F</div>
        <div>
          <div class="fl-05__workspace-name">FlexBoard</div>
          <div class="fl-05__workspace-plan">Pro Plan</div>
        </div>
      </div>
      <nav class="fl-05__sidebar-nav">
        <div class="fl-05__nav-section">Main</div>
        <div class="fl-05__nav-item is-active">
          <div class="fl-05__nav-dot" style="background:#3b82f6"></div>
          Dashboard
        </div>
        <div class="fl-05__nav-item">
          <div class="fl-05__nav-dot" style="background:#8b5cf6"></div>
          Analytics
          <span class="fl-05__nav-count">12</span>
        </div>
        <div class="fl-05__nav-item">
          <div class="fl-05__nav-dot" style="background:#22c55e"></div>
          Projects
        </div>
        <div class="fl-05__nav-item">
          <div class="fl-05__nav-dot" style="background:#f97316"></div>
          Tasks
          <span class="fl-05__nav-count is-hot">3</span>
        </div>
        <div class="fl-05__nav-section">Settings</div>
        <div class="fl-05__nav-item">
          <div class="fl-05__nav-dot" style="background:#7d8590"></div>
          Members
        </div>
        <div class="fl-05__nav-item">
          <div class="fl-05__nav-dot" style="background:#7d8590"></div>
          Billing
        </div>
      </nav>
      <div class="fl-05__sidebar-bottom">
        <div class="fl-05__user-row">
          <div class="fl-05__user-avatar">JD</div>
          <div>
            <div class="fl-05__user-name">Jane Doe</div>
            <div class="fl-05__user-role">Admin</div>
          </div>
        </div>
      </div>
    </aside>

    <!-- Main -->
    <main class="fl-05__main">
      <div class="fl-05__topbar">
        <div class="fl-05__topbar-title">Dashboard Overview</div>
        <div class="fl-05__topbar-action fl-05__topbar-action--ghost">⬇ Export</div>
        <div class="fl-05__topbar-action fl-05__topbar-action--primary">+ New Project</div>
      </div>
      <div class="fl-05__content">
        <div class="fl-05__stats">
          <div class="fl-05__stat">
            <div class="fl-05__stat-label">Total Revenue</div>
            <div class="fl-05__stat-value">$48.2k</div>
            <div class="fl-05__stat-delta up">↑ 12.5% this month</div>
          </div>
          <div class="fl-05__stat">
            <div class="fl-05__stat-label">Active Users</div>
            <div class="fl-05__stat-value">2,841</div>
            <div class="fl-05__stat-delta up">↑ 8.1% this week</div>
          </div>
          <div class="fl-05__stat">
            <div class="fl-05__stat-label">Open Tasks</div>
            <div class="fl-05__stat-value">34</div>
            <div class="fl-05__stat-delta down">↓ 3 from yesterday</div>
          </div>
        </div>

        <div class="fl-05__activity">
          <div class="fl-05__activity-head">
            Recent Activity
            <span class="fl-05__activity-view">View all</span>
          </div>
          <div class="fl-05__activity-row">
            <div class="fl-05__activity-dot" style="background:#22c55e"></div>
            <div class="fl-05__activity-text">Deployment to production succeeded</div>
            <div class="fl-05__activity-time">2m ago</div>
          </div>
          <div class="fl-05__activity-row">
            <div class="fl-05__activity-dot" style="background:#3b82f6"></div>
            <div class="fl-05__activity-text">New member <strong style="color:#e6edf3">@alex</strong> joined the workspace</div>
            <div class="fl-05__activity-time">14m ago</div>
          </div>
          <div class="fl-05__activity-row">
            <div class="fl-05__activity-dot" style="background:#f97316"></div>
            <div class="fl-05__activity-text">Task "CSS Flexbox docs" moved to Review</div>
            <div class="fl-05__activity-time">1h ago</div>
          </div>
          <div class="fl-05__activity-row">
            <div class="fl-05__activity-dot" style="background:#ef4444"></div>
            <div class="fl-05__activity-text">Build #142 failed — check logs</div>
            <div class="fl-05__activity-time">3h ago</div>
          </div>
        </div>
      </div>
    </main>

  </div>
</div>
```

**CSS:**
```css
.fl-05, .fl-05 *, .fl-05 *::before, .fl-05 *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
.fl-05 ::selection { background: #3b82f6; color: #fff; }

.fl-05 {
  --bg: #0d1117;
  --sidebar: #161b22;
  --surface: #1c2128;
  --border: #30363d;
  --accent: #3b82f6;
  --accent2: #8b5cf6;
  --green: #22c55e;
  --orange: #f97316;
  --red: #ef4444;
  --text: #e6edf3;
  --muted: #7d8590;
  font-family: 'Plus Jakarta Sans', sans-serif;
  background: var(--bg);
  border-radius: 16px;
  overflow: hidden;
  min-height: 500px;
}

/* Outer flex row: sidebar + main */
.fl-05__shell {
  display: flex;
  height: 500px;
}

/* ── Sidebar ── */
.fl-05__sidebar {
  width: 220px;
  flex-shrink: 0;
  background: var(--sidebar);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 0;
}
.fl-05__sidebar-top {
  padding: 20px 16px 12px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
}
.fl-05__workspace-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
}
.fl-05__workspace-name {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text);
}
.fl-05__workspace-plan {
  font-size: 0.65rem;
  color: var(--accent);
  font-weight: 600;
}
.fl-05__sidebar-nav {
  flex: 1;
  padding: 12px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
}
.fl-05__nav-section {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 10px 8px 4px;
}
.fl-05__nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--muted);
  transition: all 0.15s;
  position: relative;
}
.fl-05__nav-item:hover { background: rgba(255,255,255,0.06); color: var(--text); }
.fl-05__nav-item.is-active {
  background: rgba(59,130,246,0.15);
  color: var(--accent);
  font-weight: 600;
}
.fl-05__nav-item.is-active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 60%;
  background: var(--accent);
  border-radius: 0 2px 2px 0;
}
.fl-05__nav-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.fl-05__nav-count {
  margin-left: auto;
  font-size: 0.65rem;
  font-weight: 700;
  background: rgba(255,255,255,0.08);
  padding: 1px 6px;
  border-radius: 10px;
  color: var(--muted);
}
.fl-05__nav-count.is-hot { background: var(--red); color: #fff; }
.fl-05__sidebar-bottom {
  padding: 12px 8px;
  border-top: 1px solid var(--border);
}
.fl-05__user-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
}
.fl-05__user-row:hover { background: rgba(255,255,255,0.06); }
.fl-05__user-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f97316, #ef4444);
  font-size: 0.7rem;
  font-weight: 800;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.fl-05__user-name {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text);
}
.fl-05__user-role {
  font-size: 0.65rem;
  color: var(--muted);
}

/* ── Main panel ── */
.fl-05__main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.fl-05__topbar {
  height: 52px;
  background: var(--sidebar);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 20px;
  gap: 12px;
  flex-shrink: 0;
}
.fl-05__topbar-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text);
  flex: 1;
}
.fl-05__topbar-action {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
}
.fl-05__topbar-action--primary {
  background: var(--accent);
  color: #fff;
}
.fl-05__topbar-action--ghost {
  background: rgba(255,255,255,0.06);
  color: var(--muted);
  border: 1px solid var(--border);
}
.fl-05__content {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Stats row */
.fl-05__stats {
  display: flex;
  gap: 12px;
}
.fl-05__stat {
  flex: 1;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
}
.fl-05__stat-label {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 8px;
}
.fl-05__stat-value {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--text);
}
.fl-05__stat-delta {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  font-weight: 600;
  margin-top: 4px;
}
.fl-05__stat-delta.up { color: var(--green); }
.fl-05__stat-delta.down { color: var(--red); }

/* Activity list */
.fl-05__activity {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.fl-05__activity-head {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.fl-05__activity-view {
  font-size: 0.7rem;
  color: var(--accent);
  font-weight: 600;
  cursor: pointer;
}
.fl-05__activity-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(48,54,61,0.5);
}
.fl-05__activity-row:last-child { border-bottom: none; }
.fl-05__activity-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.fl-05__activity-text {
  flex: 1;
  font-size: 0.78rem;
  color: var(--text);
}
.fl-05__activity-time {
  font-size: 0.68rem;
  color: var(--muted);
  flex-shrink: 0;
}

@media (prefers-reduced-motion: reduce) {
  .fl-05__nav-item, .fl-05__user-row { transition: none; }
}
```

### 06. CSS Flexbox Responsive Product Cards

**Type:** Pure CSS
**Description:** An e-commerce product card grid using <code>flex: 1 1 180px</code> with a max-width cap — cards reflow from four columns to one with no JavaScript or media queries.

**HTML:**
```html
<div class="fl-06">
  <div class="fl-06__header">
    <h2 class="fl-06__title">Product Collection</h2>
    <div class="fl-06__sort">Sort: Popular ▾</div>
  </div>
  <p class="fl-06__subtitle">flex: 1 1 180px — naturally wraps to 4, 3, 2, or 1 column at any width</p>

  <div class="fl-06__grid">

    <div class="fl-06__card">
      <div class="fl-06__thumb">
        <div class="fl-06__thumb-bg" style="background:linear-gradient(145deg,#fff1eb,#ffd4ba)">
          <svg class="fl-06__product-shape" width="70" height="70" viewBox="0 0 70 70">
            <ellipse cx="35" cy="40" rx="28" ry="20" fill="#ea580c" opacity="0.15"/>
            <rect x="20" y="12" width="30" height="36" rx="8" fill="#ea580c"/>
            <rect x="26" y="6" width="18" height="12" rx="4" fill="#c2410c"/>
          </svg>
        </div>
        <div class="fl-06__badge" style="background:#ef4444;color:#fff">Sale</div>
        <div class="fl-06__wishlist">♡</div>
      </div>
      <div class="fl-06__body">
        <div class="fl-06__cat">Gear</div>
        <div class="fl-06__name">Thermal Flask Pro</div>
        <div class="fl-06__stars">
          <span class="fl-06__star">★</span><span class="fl-06__star">★</span>
          <span class="fl-06__star">★</span><span class="fl-06__star">★</span>
          <span class="fl-06__star" style="opacity:0.3">★</span>
          <span class="fl-06__rating-count">(241)</span>
        </div>
        <div class="fl-06__footer">
          <div class="fl-06__price">
            <div class="fl-06__price-now">$24</div>
            <div class="fl-06__price-was">$39</div>
          </div>
          <div class="fl-06__add-btn">+</div>
        </div>
      </div>
    </div>

    <div class="fl-06__card">
      <div class="fl-06__thumb">
        <div class="fl-06__thumb-bg" style="background:linear-gradient(145deg,#fef9ec,#fde68a)">
          <svg class="fl-06__product-shape" width="70" height="70" viewBox="0 0 70 70">
            <circle cx="35" cy="35" r="26" fill="#fbbf24" opacity="0.3"/>
            <circle cx="35" cy="35" r="18" fill="#d97706"/>
            <circle cx="35" cy="35" r="8" fill="#fef9ec"/>
          </svg>
        </div>
        <div class="fl-06__badge" style="background:#0ea5e9;color:#fff">New</div>
        <div class="fl-06__wishlist">♡</div>
      </div>
      <div class="fl-06__body">
        <div class="fl-06__cat">Audio</div>
        <div class="fl-06__name">Studio Buds X</div>
        <div class="fl-06__stars">
          <span class="fl-06__star">★</span><span class="fl-06__star">★</span>
          <span class="fl-06__star">★</span><span class="fl-06__star">★</span>
          <span class="fl-06__star">★</span>
          <span class="fl-06__rating-count">(88)</span>
        </div>
        <div class="fl-06__footer">
          <div class="fl-06__price">
            <div class="fl-06__price-now">$89</div>
          </div>
          <div class="fl-06__add-btn">+</div>
        </div>
      </div>
    </div>

    <div class="fl-06__card">
      <div class="fl-06__thumb">
        <div class="fl-06__thumb-bg" style="background:linear-gradient(145deg,#f0fdf4,#bbf7d0)">
          <svg class="fl-06__product-shape" width="70" height="70" viewBox="0 0 70 70">
            <rect x="15" y="20" width="40" height="30" rx="6" fill="#16a34a" opacity="0.2"/>
            <rect x="20" y="15" width="30" height="32" rx="6" fill="#22c55e"/>
            <circle cx="35" cy="42" r="4" fill="#f0fdf4"/>
          </svg>
        </div>
        <div class="fl-06__badge" style="background:#22c55e;color:#fff">Eco</div>
        <div class="fl-06__wishlist">♡</div>
      </div>
      <div class="fl-06__body">
        <div class="fl-06__cat">Home</div>
        <div class="fl-06__name">Bamboo Notebook Set</div>
        <div class="fl-06__stars">
          <span class="fl-06__star">★</span><span class="fl-06__star">★</span>
          <span class="fl-06__star">★</span><span class="fl-06__star">★</span>
          <span class="fl-06__star" style="opacity:0.3">★</span>
          <span class="fl-06__rating-count">(56)</span>
        </div>
        <div class="fl-06__footer">
          <div class="fl-06__price">
            <div class="fl-06__price-now">$18</div>
            <div class="fl-06__price-was">$25</div>
          </div>
          <div class="fl-06__add-btn">+</div>
        </div>
      </div>
    </div>

    <div class="fl-06__card">
      <div class="fl-06__thumb">
        <div class="fl-06__thumb-bg" style="background:linear-gradient(145deg,#fdf4ff,#f5d0fe)">
          <svg class="fl-06__product-shape" width="70" height="70" viewBox="0 0 70 70">
            <rect x="18" y="18" width="34" height="34" rx="10" fill="#a855f7" opacity="0.25"/>
            <rect x="22" y="22" width="26" height="26" rx="8" fill="#7c3aed"/>
            <rect x="29" y="29" width="12" height="12" rx="4" fill="#f5d0fe"/>
          </svg>
        </div>
        <div class="fl-06__wishlist">♡</div>
      </div>
      <div class="fl-06__body">
        <div class="fl-06__cat">Tech</div>
        <div class="fl-06__name">Wireless Charger Pad</div>
        <div class="fl-06__stars">
          <span class="fl-06__star">★</span><span class="fl-06__star">★</span>
          <span class="fl-06__star">★</span><span class="fl-06__star">★</span>
          <span class="fl-06__star">★</span>
          <span class="fl-06__rating-count">(312)</span>
        </div>
        <div class="fl-06__footer">
          <div class="fl-06__price">
            <div class="fl-06__price-now">$42</div>
          </div>
          <div class="fl-06__add-btn" style="background:#7c3aed">+</div>
        </div>
      </div>
    </div>

  </div>
</div>
```

**CSS:**
```css
.fl-06, .fl-06 *, .fl-06 *::before, .fl-06 *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
.fl-06 ::selection { background: #fb923c; color: #fff; }

.fl-06 {
  --bg: #fff8f4;
  --surface: #fff;
  --ink: #1a0a00;
  --muted: #9a7a65;
  --accent: #ea580c;
  --accent2: #fb923c;
  --border: rgba(234,88,12,0.12);
  --star: #fbbf24;
  font-family: 'Outfit', sans-serif;
  background: var(--bg);
  padding: 24px;
  border-radius: 16px;
  min-height: 500px;
}

.fl-06__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.fl-06__title {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--ink);
}
.fl-06__sort {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
}
.fl-06__subtitle {
  font-size: 0.78rem;
  color: var(--muted);
  margin-bottom: 18px;
}

/* Product grid: flex-wrap + flex-basis for fluid columns */
.fl-06__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.fl-06__card {
  flex: 1 1 180px;        /* grow, shrink, min-basis = fluid cols */
  max-width: calc(25% - 11px);  /* max 4 per row */
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}
.fl-06__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 40px rgba(234,88,12,0.12);
}

.fl-06__thumb {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.fl-06__thumb-bg {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fl-06__product-shape {
  transition: transform 0.3s;
}
.fl-06__card:hover .fl-06__product-shape {
  transform: scale(1.08) rotate(3deg);
}
.fl-06__badge {
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 0.62rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.fl-06__wishlist {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  background: rgba(255,255,255,0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  cursor: pointer;
}

.fl-06__body {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
.fl-06__cat {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.fl-06__name {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
}
.fl-06__stars {
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: 0.7rem;
}
.fl-06__star { color: var(--star); }
.fl-06__rating-count {
  font-size: 0.65rem;
  color: var(--muted);
  margin-left: 4px;
}
.fl-06__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.fl-06__price {
  display: flex;
  align-items: baseline;
  gap: 5px;
}
.fl-06__price-now {
  font-size: 1rem;
  font-weight: 800;
  color: var(--accent);
}
.fl-06__price-was {
  font-size: 0.75rem;
  text-decoration: line-through;
  color: var(--muted);
}
.fl-06__add-btn {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
  flex-shrink: 0;
}
.fl-06__add-btn:hover { background: #c2410c; transform: scale(1.1); }

@media (prefers-reduced-motion: reduce) {
  .fl-06__card, .fl-06__product-shape, .fl-06__add-btn { transition: none; }
}
```

### 07. CSS Flexbox Pricing Table Layout

**Type:** Pure CSS
**Description:** A three-tier pricing table with equal-height columns, a scaled featured plan, and flex-driven feature lists — all columns stretch to identical height without JavaScript.

**HTML:**
```html
<div class="fl-07">
  <div class="fl-07__head">
    <div class="fl-07__eyebrow">Pricing</div>
    <h2 class="fl-07__title">Simple, Transparent Plans</h2>
    <div class="fl-07__toggle">
      <span>Monthly</span>
      <div class="fl-07__toggle-pill">Annual</div>
      <span class="fl-07__save-badge">Save 20%</span>
    </div>
  </div>

  <div class="fl-07__plans">

    <!-- Starter -->
    <div class="fl-07__plan">
      <div class="fl-07__plan-tag">Starter</div>
      <div class="fl-07__plan-name">Free</div>
      <div class="fl-07__plan-desc">Perfect for side projects and learning CSS flexbox layouts.</div>
      <div class="fl-07__price-row">
        <div class="fl-07__price-currency">$</div>
        <div class="fl-07__price-value">0</div>
        <div class="fl-07__price-period">/mo</div>
      </div>
      <div class="fl-07__price-annual">No credit card needed</div>
      <button class="fl-07__cta fl-07__cta--outline">Get started free</button>
      <div class="fl-07__divider"></div>
      <div class="fl-07__features">
        <div class="fl-07__feature">
          <div class="fl-07__feature-check">✓</div>3 projects
        </div>
        <div class="fl-07__feature">
          <div class="fl-07__feature-check">✓</div>Basic flex layouts
        </div>
        <div class="fl-07__feature">
          <div class="fl-07__feature-check">✓</div>Community support
        </div>
        <div class="fl-07__feature">
          <div class="fl-07__feature-check fl-07__feature-check--muted">–</div><span style="opacity:0.4">Team collaboration</span>
        </div>
        <div class="fl-07__feature">
          <div class="fl-07__feature-check fl-07__feature-check--muted">–</div><span style="opacity:0.4">Priority export</span>
        </div>
      </div>
    </div>

    <!-- Pro (featured) -->
    <div class="fl-07__plan fl-07__plan--featured">
      <div class="fl-07__plan-tag">Most Popular</div>
      <div class="fl-07__plan-name">Pro</div>
      <div class="fl-07__plan-desc">For professionals who need advanced layouts and team features.</div>
      <div class="fl-07__price-row">
        <div class="fl-07__price-currency">$</div>
        <div class="fl-07__price-value">29</div>
        <div class="fl-07__price-period">/mo</div>
      </div>
      <div class="fl-07__price-annual">Billed $279/yr — save $69</div>
      <button class="fl-07__cta fl-07__cta--primary">Start Pro trial</button>
      <div class="fl-07__divider"></div>
      <div class="fl-07__features">
        <div class="fl-07__feature">
          <div class="fl-07__feature-check">✓</div>Unlimited projects
        </div>
        <div class="fl-07__feature">
          <div class="fl-07__feature-check">✓</div>All flex layout patterns
        </div>
        <div class="fl-07__feature">
          <div class="fl-07__feature-check">✓</div>Priority support
        </div>
        <div class="fl-07__feature">
          <div class="fl-07__feature-check">✓</div>Team collaboration (5 seats)
        </div>
        <div class="fl-07__feature">
          <div class="fl-07__feature-check fl-07__feature-check--muted">–</div><span style="opacity:0.4">White-label export</span>
        </div>
      </div>
    </div>

    <!-- Enterprise -->
    <div class="fl-07__plan">
      <div class="fl-07__plan-tag">Enterprise</div>
      <div class="fl-07__plan-name">Scale</div>
      <div class="fl-07__plan-desc">For large teams building complex flexbox design systems at scale.</div>
      <div class="fl-07__price-row">
        <div class="fl-07__price-currency">$</div>
        <div class="fl-07__price-value">99</div>
        <div class="fl-07__price-period">/mo</div>
      </div>
      <div class="fl-07__price-annual">Billed $950/yr — save $238</div>
      <button class="fl-07__cta fl-07__cta--outline">Contact sales</button>
      <div class="fl-07__divider"></div>
      <div class="fl-07__features">
        <div class="fl-07__feature">
          <div class="fl-07__feature-check">✓</div>Unlimited everything
        </div>
        <div class="fl-07__feature">
          <div class="fl-07__feature-check">✓</div>Custom flex components
        </div>
        <div class="fl-07__feature">
          <div class="fl-07__feature-check">✓</div>Dedicated support
        </div>
        <div class="fl-07__feature">
          <div class="fl-07__feature-check">✓</div>Unlimited team seats
        </div>
        <div class="fl-07__feature">
          <div class="fl-07__feature-check">✓</div>White-label export
        </div>
      </div>
    </div>

  </div>
</div>
```

**CSS:**
```css
.fl-07, .fl-07 *, .fl-07 *::before, .fl-07 *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
.fl-07 ::selection { background: #0ea5e9; color: #fff; }

.fl-07 {
  --bg: #f0f9ff;
  --surface: #fff;
  --ink: #0c1a2e;
  --muted: #64748b;
  --accent: #0ea5e9;
  --accent-dark: #0284c7;
  --featured: #0f172a;
  --border: rgba(14,165,233,0.15);
  --check: #22c55e;
  font-family: 'Nunito', sans-serif;
  background: var(--bg);
  padding: 28px 20px;
  border-radius: 16px;
  min-height: 500px;
}

.fl-07__head {
  text-align: center;
  margin-bottom: 24px;
}
.fl-07__eyebrow {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}
.fl-07__title {
  font-size: 1.4rem;
  font-weight: 900;
  color: var(--ink);
  margin-bottom: 6px;
}
.fl-07__toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(14,165,233,0.08);
  border-radius: 20px;
  padding: 4px 8px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
}
.fl-07__toggle-pill {
  background: var(--accent);
  color: #fff;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 0.72rem;
}
.fl-07__save-badge {
  background: #dcfce7;
  color: #16a34a;
  font-size: 0.65rem;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 6px;
}

/* Pricing row: flex with stretch alignment so cards equal height */
.fl-07__plans {
  display: flex;
  gap: 16px;
  align-items: stretch;
}

.fl-07__plan {
  flex: 1;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 0;
  transition: box-shadow 0.2s;
}
.fl-07__plan:hover { box-shadow: 0 10px 40px rgba(14,165,233,0.1); }

.fl-07__plan--featured {
  background: var(--featured);
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent), 0 20px 60px rgba(14,165,233,0.2);
  position: relative;
  transform: scale(1.03);
  z-index: 1;
}

.fl-07__plan-tag {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
  margin-bottom: 12px;
  align-self: flex-start;
}
.fl-07__plan--featured .fl-07__plan-tag {
  background: var(--accent);
  color: #fff;
}
.fl-07__plan:not(.fl-07__plan--featured) .fl-07__plan-tag {
  background: rgba(14,165,233,0.1);
  color: var(--accent);
}

.fl-07__plan-name {
  font-size: 1rem;
  font-weight: 900;
  color: var(--ink);
  margin-bottom: 4px;
}
.fl-07__plan--featured .fl-07__plan-name { color: #fff; }

.fl-07__plan-desc {
  font-size: 0.75rem;
  color: var(--muted);
  margin-bottom: 16px;
  line-height: 1.5;
}
.fl-07__plan--featured .fl-07__plan-desc { color: rgba(255,255,255,0.55); }

.fl-07__price-row {
  display: flex;
  align-items: baseline;
  gap: 2px;
  margin-bottom: 4px;
}
.fl-07__price-currency {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--ink);
  align-self: flex-start;
  padding-top: 4px;
}
.fl-07__plan--featured .fl-07__price-currency { color: #fff; }
.fl-07__price-value {
  font-size: 2.4rem;
  font-weight: 900;
  color: var(--ink);
  line-height: 1;
}
.fl-07__plan--featured .fl-07__price-value { color: #fff; }
.fl-07__price-period {
  font-size: 0.78rem;
  color: var(--muted);
  padding-bottom: 4px;
}
.fl-07__plan--featured .fl-07__price-period { color: rgba(255,255,255,0.45); }
.fl-07__price-annual {
  font-size: 0.7rem;
  color: var(--muted);
  margin-bottom: 20px;
}
.fl-07__plan--featured .fl-07__price-annual { color: rgba(255,255,255,0.4); }

.fl-07__cta {
  padding: 10px;
  border-radius: 10px;
  font-family: 'Nunito', sans-serif;
  font-size: 0.85rem;
  font-weight: 800;
  cursor: pointer;
  text-align: center;
  margin-bottom: 20px;
  transition: all 0.2s;
  border: none;
}
.fl-07__cta--outline {
  background: transparent;
  border: 2px solid var(--border);
  color: var(--ink);
}
.fl-07__cta--outline:hover { border-color: var(--accent); color: var(--accent); }
.fl-07__cta--primary {
  background: var(--accent);
  color: #fff;
}
.fl-07__cta--primary:hover { background: var(--accent-dark); }

.fl-07__divider {
  height: 1px;
  background: var(--border);
  margin-bottom: 16px;
}
.fl-07__plan--featured .fl-07__divider { background: rgba(255,255,255,0.1); }

.fl-07__features {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.fl-07__feature {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.4;
}
.fl-07__plan--featured .fl-07__feature { color: rgba(255,255,255,0.65); }
.fl-07__feature-check {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(34,197,94,0.15);
  color: var(--check);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  font-weight: 800;
  flex-shrink: 0;
  margin-top: 1px;
}
.fl-07__feature-check--muted {
  background: rgba(100,116,139,0.1);
  color: var(--muted);
}

@media (prefers-reduced-motion: reduce) {
  .fl-07__plan, .fl-07__cta { transition: none; }
}
```

### 08. CSS Flexbox Magazine Article Layout

**Type:** Pure CSS
**Description:** A classic editorial magazine layout with a two-thirds article column, one-third sidebar, drop cap, pull quotes, and a multi-column body text — built with flex and CSS columns.

**HTML:**
```html
<div class="fl-08">
  <div class="fl-08__masthead">
    <div class="fl-08__masthead-name">Flex<em>Mag</em></div>
    <div class="fl-08__masthead-date">June 2025 · Issue 47</div>
  </div>

  <div class="fl-08__category-bar">
    <div class="fl-08__cat-tab is-active">Design</div>
    <div class="fl-08__cat-tab">Technology</div>
    <div class="fl-08__cat-tab">Culture</div>
    <div class="fl-08__cat-tab">Opinion</div>
    <div class="fl-08__cat-tab">Data</div>
  </div>

  <div class="fl-08__body">

    <!-- Article column -->
    <div class="fl-08__article-col">
      <div class="fl-08__kicker">
        <div class="fl-08__kicker-label">Cover Story</div>
        <div class="fl-08__kicker-line"></div>
      </div>
      <h1 class="fl-08__headline">The <em>Flexbox</em> Layout Technique That Changed Everything</h1>
      <div class="fl-08__standfirst">How a single CSS property — <code>flex</code> — replaced decades of float hacks, table tricks, and inline-block nightmares to give designers true layout superpowers.</div>
      <div class="fl-08__byline">
        <div class="fl-08__author-avatar">SR</div>
        <div>
          <div class="fl-08__author-name">Sofia Reyes</div>
          <div class="fl-08__author-role">Senior Design Editor</div>
        </div>
        <div class="fl-08__meta">June 12, 2025<br>8 min read</div>
      </div>
      <div class="fl-08__hero">
        <div class="fl-08__hero-text">flex</div>
        <div class="fl-08__hero-label">Illustration: FlexMag / CSS Visual Studio</div>
      </div>
      <div class="fl-08__body-text fl-08__drop-cap">
        <p>Before flexbox arrived in browsers, building a simple three-column layout with equal-height columns was a multi-hack ordeal — you needed faux backgrounds, table-cell hacks, or JavaScript height equalisers. The magazine layout you are reading now is achieved with two flex containers, two lines of alignment CSS, and nothing else.</p>
        <p>The key insight of flexbox is that it separates the axis of layout from the axis of alignment. The main axis — controlled by <code>flex-direction</code> — decides how items are placed. The cross axis — governed by <code>align-items</code> and <code>align-self</code> — decides how they stretch or anchor within their row or column.</p>
      </div>
    </div>

    <!-- Sidebar -->
    <aside class="fl-08__sidebar">
      <div>
        <div class="fl-08__sidebar-section-title">Related Articles</div>
        <div class="fl-08__related-item">
          <div class="fl-08__related-thumb" style="background:linear-gradient(135deg,#1a0010,#5a0040)">
            <span style="font-size:1.2rem">📐</span>
          </div>
          <div>
            <div class="fl-08__related-title">Grid vs Flexbox: When to Use Each</div>
            <div class="fl-08__related-meta">4 min · Design</div>
          </div>
        </div>
        <div class="fl-08__related-item">
          <div class="fl-08__related-thumb" style="background:linear-gradient(135deg,#001a10,#004d30)">
            <span style="font-size:1.2rem">📱</span>
          </div>
          <div>
            <div class="fl-08__related-title">Responsive Layouts Without Media Queries</div>
            <div class="fl-08__related-meta">6 min · CSS</div>
          </div>
        </div>
        <div class="fl-08__related-item">
          <div class="fl-08__related-thumb" style="background:linear-gradient(135deg,#1a1000,#4d3300)">
            <span style="font-size:1.2rem">⚡</span>
          </div>
          <div>
            <div class="fl-08__related-title">Performance Wins With Modern CSS</div>
            <div class="fl-08__related-meta">5 min · Perf</div>
          </div>
        </div>
      </div>
      <div>
        <div class="fl-08__sidebar-section-title">Topics</div>
        <div class="fl-08__tag-cloud">
          <div class="fl-08__tag">Flexbox</div>
          <div class="fl-08__tag">Layout</div>
          <div class="fl-08__tag">CSS Grid</div>
          <div class="fl-08__tag">Responsive</div>
          <div class="fl-08__tag">Typography</div>
          <div class="fl-08__tag">Design Systems</div>
        </div>
      </div>
    </aside>

  </div>
</div>
```

**CSS:**
```css
.fl-08, .fl-08 *, .fl-08 *::before, .fl-08 *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
.fl-08 ::selection { background: #e11d48; color: #fff; }

.fl-08 {
  --bg: #fffdf9;
  --surface: #fff;
  --ink: #1a1008;
  --muted: #78716c;
  --accent: #e11d48;
  --accent2: #d97706;
  --border: #e8e0d5;
  font-family: 'DM Sans', sans-serif;
  background: var(--bg);
  padding: 0;
  border-radius: 16px;
  overflow: hidden;
  min-height: 500px;
  border: 1px solid var(--border);
}

/* Magazine masthead */
.fl-08__masthead {
  background: var(--ink);
  padding: 14px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.fl-08__masthead-name {
  font-family: 'Fraunces', serif;
  font-size: 1.4rem;
  font-weight: 900;
  color: #fff;
  letter-spacing: -0.02em;
}
.fl-08__masthead-name em { color: var(--accent); font-style: normal; }
.fl-08__masthead-date {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Category banner */
.fl-08__category-bar {
  display: flex;
  align-items: center;
  gap: 0;
  border-bottom: 1px solid var(--border);
  padding: 0 28px;
  overflow-x: auto;
}
.fl-08__cat-tab {
  padding: 8px 14px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}
.fl-08__cat-tab.is-active { color: var(--accent); border-bottom-color: var(--accent); }
.fl-08__cat-tab:hover { color: var(--ink); }

/* Main layout: flex row — body col (2/3) + sidebar (1/3) */
.fl-08__body {
  display: flex;
  min-height: 0;
}

/* Left body: flex column */
.fl-08__article-col {
  flex: 2;
  min-width: 0;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  border-right: 1px solid var(--border);
}
.fl-08__kicker {
  display: flex;
  align-items: center;
  gap: 10px;
}
.fl-08__kicker-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}
.fl-08__kicker-line {
  flex: 1;
  height: 1px;
  background: var(--border);
}
.fl-08__headline {
  font-family: 'Fraunces', serif;
  font-size: 1.7rem;
  font-weight: 900;
  color: var(--ink);
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.fl-08__headline em { color: var(--accent); font-style: italic; }
.fl-08__standfirst {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 0.95rem;
  color: var(--muted);
  line-height: 1.6;
  border-left: 3px solid var(--accent);
  padding-left: 14px;
}
.fl-08__byline {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.fl-08__author-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e11d48, #9f1239);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
}
.fl-08__author-name { font-size: 0.8rem; font-weight: 600; color: var(--ink); }
.fl-08__author-role { font-size: 0.68rem; color: var(--muted); }
.fl-08__meta {
  margin-left: auto;
  font-size: 0.68rem;
  color: var(--muted);
  text-align: right;
}

/* Hero image placeholder */
.fl-08__hero {
  border-radius: 10px;
  overflow: hidden;
  height: 130px;
  background: linear-gradient(135deg, #1a0510, #5a0f2e);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.fl-08__hero-text {
  font-family: 'Fraunces', serif;
  font-size: 2rem;
  font-weight: 900;
  font-style: italic;
  color: rgba(255,255,255,0.12);
  letter-spacing: -0.04em;
  user-select: none;
}
.fl-08__hero-label {
  position: absolute;
  bottom: 10px;
  left: 10px;
  font-size: 0.62rem;
  color: rgba(255,255,255,0.4);
  font-weight: 600;
}

/* Drop cap + body text */
.fl-08__body-text {
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.8;
  columns: 2;
  column-gap: 20px;
}
.fl-08__drop-cap::first-letter {
  font-family: 'Fraunces', serif;
  font-size: 3.2em;
  font-weight: 900;
  color: var(--accent);
  float: left;
  line-height: 0.75;
  margin: 0.08em 0.06em 0 0;
}

/* Right sidebar */
.fl-08__sidebar {
  flex: 1;
  min-width: 0;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.fl-08__sidebar-section-title {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent2);
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.fl-08__related-item {
  display: flex;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.fl-08__related-item:last-child { border-bottom: none; }
.fl-08__related-thumb {
  width: 50px;
  height: 50px;
  border-radius: 6px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fl-08__related-title {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
  margin-bottom: 4px;
}
.fl-08__related-meta {
  font-size: 0.65rem;
  color: var(--muted);
}
.fl-08__tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.fl-08__tag {
  font-size: 0.68rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 4px;
  background: rgba(225,29,72,0.06);
  color: var(--accent);
  cursor: pointer;
  transition: background 0.2s;
}
.fl-08__tag:hover { background: rgba(225,29,72,0.15); }

@media (prefers-reduced-motion: reduce) {
  .fl-08__tag, .fl-08__cat-tab { transition: none; }
}
```

### 09. CSS Flexbox Sticky Footer Layout

**Type:** Pure CSS
**Description:** The definitive flexbox sticky footer pattern — a column flex wrapper with <code>min-height: 100%</code> and <code>flex: 1</code> on the main content pushes the footer to the bottom on any page length.

**HTML:**
```html
<div class="fl-09">
  <div class="fl-09__page">

    <!-- Header -->
    <header class="fl-09__header">
      <div class="fl-09__logo">
        <div class="fl-09__logo-icon">↕</div>
        StickyFoot
      </div>
      <ul class="fl-09__header-nav">
        <li class="fl-09__header-link is-active">Home</li>
        <li class="fl-09__header-link">Docs</li>
        <li class="fl-09__header-link">Examples</li>
        <li class="fl-09__header-link">Blog</li>
      </ul>
    </header>

    <!-- Main — flex: 1 gives it all remaining height -->
    <main class="fl-09__main">

      <!-- Diagram -->
      <div class="fl-09__diagram">
        <div class="fl-09__zone fl-09__zone--header">
          Header <span class="fl-09__zone-code">flex-shrink: 0</span>
        </div>
        <div class="fl-09__zone fl-09__zone--main">
          Main Content <span class="fl-09__zone-code">flex: 1</span>
        </div>
        <div class="fl-09__zone fl-09__zone--footer">
          Footer <span class="fl-09__zone-code">flex-shrink: 0</span>
        </div>
      </div>

      <!-- Explainer -->
      <div class="fl-09__explainer">
        <div class="fl-09__explainer-header">
          <div class="fl-09__explainer-tag">CSS Technique</div>
          <div class="fl-09__explainer-title">Sticky Footer with Flexbox</div>
        </div>
        <div class="fl-09__explainer-body">
          <div class="fl-09__code-block">
<span class="fl-09__code-selector">.page</span> {<br>
  <span class="fl-09__code-prop">  display</span>: <span class="fl-09__code-val">flex</span>;<br>
  <span class="fl-09__code-prop">  flex-direction</span>: <span class="fl-09__code-val">column</span>;<br>
  <span class="fl-09__code-prop">  min-height</span>: <span class="fl-09__code-val">100vh</span>;<br>
}<br>
<span class="fl-09__code-selector">.main</span> { <span class="fl-09__code-prop">flex</span>: <span class="fl-09__code-val">1</span>; } <span class="fl-09__code-comment">/* grows */</span><br>
<span class="fl-09__code-selector">.footer</span> { <span class="fl-09__code-prop">flex-shrink</span>: <span class="fl-09__code-val">0</span>; } <span class="fl-09__code-comment">/* fixed */</span>
          </div>
          <div class="fl-09__explainer-check">
            <div class="fl-09__check-icon">✓</div>
            Footer sticks to the bottom even when content is short — no JS or absolute positioning needed.
          </div>
          <div class="fl-09__explainer-check">
            <div class="fl-09__check-icon">✓</div>
            <code>flex: 1</code> on main is shorthand for <code>flex-grow: 1; flex-shrink: 1; flex-basis: 0</code>, making it absorb all remaining vertical space.
          </div>
        </div>
      </div>

    </main>

    <!-- Footer — flex-shrink: 0 keeps it pinned -->
    <footer class="fl-09__footer">
      <div class="fl-09__footer-top">
        <div>
          <div class="fl-09__footer-brand">StickyFoot</div>
          <div class="fl-09__footer-tagline">Pure CSS sticky footer<br>with flexbox column layout.</div>
        </div>
        <div>
          <div class="fl-09__footer-col-title">Product</div>
          <ul class="fl-09__footer-links">
            <li>Features</li><li>Pricing</li><li>Changelog</li>
          </ul>
        </div>
        <div>
          <div class="fl-09__footer-col-title">Company</div>
          <ul class="fl-09__footer-links">
            <li>About</li><li>Blog</li><li>Careers</li>
          </ul>
        </div>
      </div>
      <div class="fl-09__footer-bottom">
        <span>© 2025 StickyFoot. MIT License.</span>
        <div class="fl-09__footer-socials">
          <div class="fl-09__social-btn">𝕏</div>
          <div class="fl-09__social-btn">in</div>
          <div class="fl-09__social-btn">gh</div>
        </div>
      </div>
    </footer>

  </div>
</div>
```

**CSS:**
```css
.fl-09, .fl-09 *, .fl-09 *::before, .fl-09 *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
.fl-09 ::selection { background: #0891b2; color: #fff; }

.fl-09 {
  --bg: #f0f4f8;
  --surface: #fff;
  --ink: #0f2139;
  --muted: #64748b;
  --accent: #0891b2;
  --accent2: #0e7490;
  --footer-bg: #0f2139;
  --border: #dde4ec;
  --green: #059669;
  font-family: 'Manrope', sans-serif;
  background: var(--bg);
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--border);
}

/*
  STICKY FOOTER TECHNIQUE:
  Outer wrapper = flex column, min-height set.
  Main content = flex: 1 (grows to fill space).
  Footer = flex-shrink: 0 (never collapses).
  This pushes the footer to the bottom even when content is short.
*/
.fl-09__page {
  display: flex;
  flex-direction: column;
  min-height: 500px;
}

/* ── Header ── */
.fl-09__header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 0 28px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.fl-09__logo {
  font-size: 1rem;
  font-weight: 800;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 8px;
}
.fl-09__logo-icon {
  width: 28px;
  height: 28px;
  background: var(--accent);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  color: #fff;
}
.fl-09__header-nav {
  display: flex;
  gap: 4px;
  list-style: none;
}
.fl-09__header-link {
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.15s;
}
.fl-09__header-link:hover { color: var(--ink); background: var(--bg); }
.fl-09__header-link.is-active { color: var(--accent); }

/* ── Main content (grows with flex: 1) ── */
.fl-09__main {
  flex: 1;                /* ← this is the sticky footer magic */
  padding: 36px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
}

/* Technique explainer card */
.fl-09__explainer {
  max-width: 560px;
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
}
.fl-09__explainer-header {
  background: linear-gradient(135deg, #0e4f6e, #0891b2);
  padding: 20px 24px;
}
.fl-09__explainer-tag {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  margin-bottom: 6px;
}
.fl-09__explainer-title {
  font-size: 1.1rem;
  font-weight: 800;
  color: #fff;
}
.fl-09__explainer-body {
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.fl-09__code-block {
  background: #0f2139;
  border-radius: 8px;
  padding: 14px 16px;
  font-family: 'Courier New', monospace;
  font-size: 0.75rem;
  line-height: 1.8;
  color: #94a3b8;
}
.fl-09__code-comment { color: #475569; }
.fl-09__code-prop { color: #7dd3fc; }
.fl-09__code-val { color: #86efac; }
.fl-09__code-selector { color: #c084fc; }
.fl-09__explainer-desc {
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.7;
}
.fl-09__explainer-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.78rem;
  color: var(--ink);
  font-weight: 500;
}
.fl-09__check-icon {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(5,150,105,0.12);
  color: var(--green);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.62rem;
  font-weight: 800;
  flex-shrink: 0;
  margin-top: 1px;
}

/* Diagram showing layout zones */
.fl-09__diagram {
  max-width: 560px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.fl-09__zone {
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 0.72rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.fl-09__zone-code {
  font-family: 'Courier New', monospace;
  font-size: 0.68rem;
  opacity: 0.7;
}
.fl-09__zone--header { background: rgba(8,145,178,0.15); color: var(--accent2); }
.fl-09__zone--main { background: rgba(8,145,178,0.06); color: var(--muted); border: 1px dashed rgba(8,145,178,0.2); flex: 1; min-height: 36px; }
.fl-09__zone--footer { background: rgba(15,33,57,0.08); color: var(--ink); }

/* ── Footer (flex-shrink: 0) ── */
.fl-09__footer {
  background: var(--footer-bg);
  padding: 24px 28px;
  flex-shrink: 0;         /* ← never shrinks; stays at bottom */
}
.fl-09__footer-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 20px;
}
.fl-09__footer-brand {
  font-size: 0.92rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 6px;
}
.fl-09__footer-tagline {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.35);
  line-height: 1.5;
}
.fl-09__footer-col-title {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  margin-bottom: 8px;
}
.fl-09__footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.fl-09__footer-links li {
  font-size: 0.76rem;
  color: rgba(255,255,255,0.5);
  cursor: pointer;
  transition: color 0.15s;
}
.fl-09__footer-links li:hover { color: #fff; }
.fl-09__footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.08);
  font-size: 0.7rem;
  color: rgba(255,255,255,0.3);
}
.fl-09__footer-socials {
  display: flex;
  gap: 8px;
}
.fl-09__social-btn {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: rgba(255,255,255,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  cursor: pointer;
  transition: background 0.15s;
}
.fl-09__social-btn:hover { background: rgba(255,255,255,0.12); }

@media (prefers-reduced-motion: reduce) {
  .fl-09__header-link, .fl-09__footer-links li,
  .fl-09__social-btn { transition: none; }
}
```

### 10. CSS Flexbox Centered Hero Section

**Type:** Pure CSS
**Description:** A full-bleed hero section with perfect flex centering, animated gradient orbs, a headline group, subtext, and a CTA button row — demonstrating multi-axis flex alignment.

**HTML:**
```html
<div class="fl-10">
  <!-- Background effects -->
  <div class="fl-10__bg-orb fl-10__bg-orb--1"></div>
  <div class="fl-10__bg-orb fl-10__bg-orb--2"></div>
  <div class="fl-10__bg-orb fl-10__bg-orb--3"></div>
  <div class="fl-10__noise"></div>

  <!-- Star field -->
  <div class="fl-10__stars">
    <div class="fl-10__star" style="top:8%;left:12%;animation-delay:0s"></div>
    <div class="fl-10__star" style="top:15%;left:78%;animation-delay:-1s"></div>
    <div class="fl-10__star" style="top:72%;left:8%;animation-delay:-0.5s"></div>
    <div class="fl-10__star" style="top:55%;left:92%;animation-delay:-2s"></div>
    <div class="fl-10__star" style="top:88%;left:45%;animation-delay:-1.5s"></div>
    <div class="fl-10__star" style="top:30%;left:55%;animation-delay:-0.8s"></div>
  </div>

  <!-- Hero: flex column, align-items center, justify-content center -->
  <div class="fl-10__hero">
    <div class="fl-10__eyebrow">
      <div class="fl-10__eyebrow-dot"></div>
      CSS Flexbox · Perfect Centering
    </div>

    <h1 class="fl-10__headline">
      Center <span class="fl-10__hl-italic">anything</span> with<br>
      <span class="fl-10__hl-gradient">two lines of CSS</span>
    </h1>

    <p class="fl-10__subhead">
      The oldest CSS challenge — centering an element both horizontally and vertically — solved at last. <code style="color:rgba(255,255,255,0.6)">display: flex</code> + <code style="color:rgba(255,255,255,0.6)">align-items: center</code> + <code style="color:rgba(255,255,255,0.6)">justify-content: center</code>.
    </p>

    <div class="fl-10__ctas">
      <button class="fl-10__cta fl-10__cta--primary">Get started free →</button>
      <button class="fl-10__cta fl-10__cta--ghost">View demos</button>
    </div>

    <div class="fl-10__social-proof">
      <div class="fl-10__avatars">
        <div class="fl-10__avatar" style="background:linear-gradient(135deg,#a855f7,#6d28d9)">A</div>
        <div class="fl-10__avatar" style="background:linear-gradient(135deg,#38bdf8,#0284c7)">B</div>
        <div class="fl-10__avatar" style="background:linear-gradient(135deg,#f472b6,#be185d)">C</div>
        <div class="fl-10__avatar" style="background:linear-gradient(135deg,#34d399,#059669)">D</div>
      </div>
      <div class="fl-10__proof-text"><strong>12,400+</strong> developers using this pattern</div>
    </div>
  </div>

  <div class="fl-10__annotation">
    display: flex;<br>
    flex-direction: column;<br>
    align-items: center;<br>
    justify-content: center;
  </div>
</div>
```

**CSS:**
```css
.fl-10, .fl-10 *, .fl-10 *::before, .fl-10 *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
.fl-10 ::selection { background: #a855f7; color: #fff; }

.fl-10 {
  --bg: #08000f;
  --accent: #a855f7;
  --accent2: #38bdf8;
  --accent3: #f472b6;
  --text: #fff;
  --muted: rgba(255,255,255,0.5);
  font-family: 'Bricolage Grotesque', sans-serif;
  background: var(--bg);
  min-height: 500px;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
}

/* Background glow orbs */
.fl-10__bg-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  animation: fl-10-drift 8s ease-in-out infinite;
}
.fl-10__bg-orb--1 {
  width: 300px; height: 300px;
  background: rgba(168,85,247,0.25);
  top: -80px; left: 30%;
  animation-delay: 0s;
}
.fl-10__bg-orb--2 {
  width: 250px; height: 250px;
  background: rgba(56,189,248,0.15);
  bottom: -60px; right: 20%;
  animation-delay: -4s;
}
.fl-10__bg-orb--3 {
  width: 200px; height: 200px;
  background: rgba(244,114,182,0.15);
  top: 40%; left: 5%;
  animation-delay: -2s;
}
@keyframes fl-10-drift {
  0%,100% { transform: translate(0,0) scale(1); }
  33% { transform: translate(20px,-15px) scale(1.05); }
  66% { transform: translate(-10px,10px) scale(0.98); }
}

/* Grid-noise texture via SVG */
.fl-10__noise {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events: none;
  opacity: 0.5;
}

/* ── THE FLEX CENTERING PATTERN ── */
.fl-10__hero {
  display: flex;
  flex-direction: column;
  align-items: center;        /* horizontal center */
  justify-content: center;    /* vertical center */
  min-height: 500px;
  padding: 48px 24px;
  position: relative;
  z-index: 1;
  text-align: center;
  gap: 24px;
}

.fl-10__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(168,85,247,0.12);
  border: 1px solid rgba(168,85,247,0.25);
  border-radius: 20px;
  padding: 5px 14px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--accent);
}
.fl-10__eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  animation: fl-10-pulse-dot 1.5s ease-in-out infinite;
}
@keyframes fl-10-pulse-dot {
  0%,100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.7); }
}

.fl-10__headline {
  font-size: clamp(1.8rem, 5vw, 3.2rem);
  font-weight: 800;
  color: var(--text);
  line-height: 1.1;
  letter-spacing: -0.03em;
  max-width: 600px;
}
.fl-10__headline .fl-10__hl-italic {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
}
.fl-10__headline .fl-10__hl-gradient {
  background: linear-gradient(90deg, var(--accent2), var(--accent3));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.fl-10__subhead {
  font-size: 0.92rem;
  color: var(--muted);
  line-height: 1.7;
  max-width: 440px;
  font-weight: 400;
}

.fl-10__ctas {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}
.fl-10__cta {
  padding: 11px 24px;
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  font-family: 'Bricolage Grotesque', sans-serif;
  border: none;
  transition: transform 0.2s, box-shadow 0.2s;
}
.fl-10__cta:hover { transform: translateY(-2px); }
.fl-10__cta--primary {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 0 30px rgba(168,85,247,0.3);
}
.fl-10__cta--primary:hover { box-shadow: 0 6px 40px rgba(168,85,247,0.5); }
.fl-10__cta--ghost {
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.7);
  border: 1px solid rgba(255,255,255,0.1);
}
.fl-10__cta--ghost:hover { background: rgba(255,255,255,0.1); color: #fff; }

.fl-10__social-proof {
  display: flex;
  align-items: center;
  gap: 12px;
}
.fl-10__avatars {
  display: flex;
}
.fl-10__avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--bg);
  margin-left: -8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  font-weight: 800;
  color: #fff;
}
.fl-10__avatars .fl-10__avatar:first-child { margin-left: 0; }
.fl-10__proof-text {
  font-size: 0.72rem;
  color: var(--muted);
  font-weight: 500;
}
.fl-10__proof-text strong { color: var(--text); }

/* Flex annotation overlay */
.fl-10__annotation {
  position: absolute;
  bottom: 14px;
  right: 16px;
  font-size: 0.62rem;
  font-family: 'Courier New', monospace;
  color: rgba(168,85,247,0.4);
  text-align: right;
  line-height: 1.8;
  pointer-events: none;
}

/* Responsive stars decoration */
.fl-10__stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.fl-10__star {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: rgba(255,255,255,0.6);
  animation: fl-10-twinkle 3s ease-in-out infinite;
}
@keyframes fl-10-twinkle {
  0%,100% { opacity: 0.6; }
  50% { opacity: 0.1; }
}

@media (prefers-reduced-motion: reduce) {
  .fl-10__bg-orb, .fl-10__eyebrow-dot, .fl-10__star { animation: none; }
  .fl-10__cta { transition: none; }
}
```

### 11. CSS Flexbox Timeline Layout

**Type:** Pure CSS
**Description:** A vertical event timeline where each entry is a flex row — a narrow connector column with a dot and line, and an expanding content card — creating a clean left-rail chronology.

**HTML:**
```html
<div class="fl-11">
  <div class="fl-11__header">
    <div class="fl-11__eyebrow">Flexbox Pattern</div>
    <h2 class="fl-11__title">CSS Flexbox Timeline Layout</h2>
    <p class="fl-11__sub">Each row is a flex container: connector column + content area</p>
  </div>

  <div class="fl-11__timeline">

    <div class="fl-11__event">
      <div class="fl-11__connector">
        <div class="fl-11__dot" style="background:#0284c7">🚀</div>
        <div class="fl-11__line"></div>
      </div>
      <div class="fl-11__content">
        <div class="fl-11__event-meta">
          <div class="fl-11__date">Jan 2024</div>
          <div class="fl-11__event-tag" style="background:#dbeafe;color:#1d4ed8">Launch</div>
        </div>
        <div class="fl-11__event-title">Project Kickoff</div>
        <div class="fl-11__event-desc">Initial CSS Flexbox design system established. Team aligned on layout patterns and naming conventions for all 15 demo types.</div>
        <div class="fl-11__event-card">
          <div class="fl-11__card-row">
            <div class="fl-11__card-icon" style="background:#dbeafe">👥</div>
            <div>
              <div class="fl-11__card-text">Team onboarded</div>
              <div class="fl-11__card-sub">8 contributors</div>
            </div>
            <div class="fl-11__card-value">8 devs</div>
          </div>
        </div>
      </div>
    </div>

    <div class="fl-11__event">
      <div class="fl-11__connector">
        <div class="fl-11__dot" style="background:#d97706">⚡</div>
        <div class="fl-11__line"></div>
      </div>
      <div class="fl-11__content">
        <div class="fl-11__event-meta">
          <div class="fl-11__date">Mar 2024</div>
          <div class="fl-11__event-tag" style="background:#fef3c7;color:#b45309">Milestone</div>
        </div>
        <div class="fl-11__event-title">v1.0 Layout System Released</div>
        <div class="fl-11__event-desc">First stable release of the flexbox layout library. Included holy grail, sidebar dashboard, and card grid patterns.</div>
        <div class="fl-11__event-card">
          <div class="fl-11__card-row">
            <div class="fl-11__card-icon" style="background:#fef3c7">📦</div>
            <div>
              <div class="fl-11__card-text">Components shipped</div>
              <div class="fl-11__card-sub">npm install flexlayout</div>
            </div>
            <div class="fl-11__card-value" style="color:#d97706">24 patterns</div>
          </div>
        </div>
      </div>
    </div>

    <div class="fl-11__today">
      <div class="fl-11__today-line"></div>
      <div class="fl-11__today-label">Today</div>
      <div class="fl-11__today-line"></div>
    </div>

    <div class="fl-11__event">
      <div class="fl-11__connector">
        <div class="fl-11__dot" style="background:#059669">✓</div>
        <div class="fl-11__line"></div>
      </div>
      <div class="fl-11__content">
        <div class="fl-11__event-meta">
          <div class="fl-11__date">Jun 2025</div>
          <div class="fl-11__event-tag" style="background:#d1fae5;color:#065f46">Current</div>
        </div>
        <div class="fl-11__event-title">Flexbox Gallery Collection</div>
        <div class="fl-11__event-desc">15 production-grade CSS Flexbox demos published. Covers every major layout pattern from holy grail to kanban board.</div>
        <div class="fl-11__event-card">
          <div class="fl-11__card-row">
            <div class="fl-11__card-icon" style="background:#d1fae5">🎨</div>
            <div>
              <div class="fl-11__card-text">Demos live</div>
              <div class="fl-11__card-sub">All SEO-targeted</div>
            </div>
            <div class="fl-11__card-value">15 demos</div>
          </div>
        </div>
      </div>
    </div>

    <div class="fl-11__event">
      <div class="fl-11__connector">
        <div class="fl-11__dot" style="background:#7c3aed;opacity:0.5">→</div>
        <div class="fl-11__line"></div>
      </div>
      <div class="fl-11__content">
        <div class="fl-11__event-meta">
          <div class="fl-11__date">Q3 2025</div>
          <div class="fl-11__event-tag" style="background:#ede9fe;color:#5b21b6">Planned</div>
        </div>
        <div class="fl-11__event-title">Grid + Subgrid Expansion</div>
        <div class="fl-11__event-desc" style="opacity:0.6">Next phase: 15 CSS Grid layout demos with subgrid, named areas, and masonry support.</div>
      </div>
    </div>

  </div>
</div>
```

**CSS:**
```css
.fl-11, .fl-11 *, .fl-11 *::before, .fl-11 *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
.fl-11 ::selection { background: #059669; color: #fff; }

.fl-11 {
  --bg: #fafdf9;
  --surface: #fff;
  --ink: #0a1f13;
  --muted: #6b7c74;
  --accent: #059669;
  --accent-light: #d1fae5;
  --accent2: #0284c7;
  --accent3: #d97706;
  --accent4: #7c3aed;
  --timeline-line: #d1fae5;
  --border: #e2f0ea;
  font-family: 'IBM Plex Sans', sans-serif;
  background: var(--bg);
  padding: 28px;
  border-radius: 16px;
  min-height: 500px;
}

.fl-11__header {
  margin-bottom: 28px;
}
.fl-11__eyebrow {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 4px;
}
.fl-11__title {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--ink);
}
.fl-11__sub {
  font-size: 0.78rem;
  color: var(--muted);
  margin-top: 4px;
}

/*
  TIMELINE TECHNIQUE:
  Each event = flex row with:
    - connector column (dot + line): flex-shrink: 0
    - content card: flex: 1
  The vertical line is a ::before pseudo on the connector
  that grows to fill the item height.
*/

.fl-11__timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.fl-11__event {
  display: flex;
  gap: 16px;
  position: relative;
}

/* Connector column */
.fl-11__connector {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: 32px;
}

.fl-11__dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  flex-shrink: 0;
  z-index: 1;
  border: 3px solid var(--bg);
  transition: transform 0.2s;
}
.fl-11__event:hover .fl-11__dot { transform: scale(1.15); }

.fl-11__line {
  flex: 1;
  width: 2px;
  background: var(--timeline-line);
  margin-top: 4px;
  margin-bottom: 0;
  min-height: 16px;
}
.fl-11__event:last-child .fl-11__line { display: none; }

/* Content */
.fl-11__content {
  flex: 1;
  padding-bottom: 24px;
}
.fl-11__event-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.fl-11__date {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.fl-11__event-tag {
  font-size: 0.62rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.fl-11__event-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 4px;
}
.fl-11__event-desc {
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.6;
  margin-bottom: 8px;
}
.fl-11__event-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
}
.fl-11__card-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.78rem;
}
.fl-11__card-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  flex-shrink: 0;
}
.fl-11__card-text { color: var(--ink); font-weight: 500; flex: 1; }
.fl-11__card-sub { font-size: 0.7rem; color: var(--muted); margin-top: 2px; }
.fl-11__card-value { font-weight: 700; color: var(--accent); font-size: 0.82rem; }

/* Today marker */
.fl-11__today {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0 0 0;
}
.fl-11__today-line {
  flex: 1;
  height: 1px;
  background: repeating-linear-gradient(90deg, var(--accent) 0, var(--accent) 5px, transparent 5px, transparent 10px);
}
.fl-11__today-label {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-light);
  padding: 3px 8px;
  border-radius: 4px;
  flex-shrink: 0;
}

@media (prefers-reduced-motion: reduce) {
  .fl-11__dot { transition: none; }
}
```

### 12. CSS Flexbox Chat Interface Layout

**Type:** Pure CSS
**Description:** A messaging UI with a flex-row shell (contacts sidebar + message pane), scrollable message thread with pinned input bar, and live send interaction — all flex-driven.

**HTML:**
```html
<div class="fl-12">
  <div class="fl-12__shell">

    <!-- Contacts -->
    <div class="fl-12__contacts">
      <div class="fl-12__contacts-top">
        <div class="fl-12__app-name">
          <div class="fl-12__app-icon">💬</div>
          FlexChat
        </div>
        <div class="fl-12__search">🔍 Search...</div>
      </div>
      <div class="fl-12__contacts-list">
        <div class="fl-12__contact is-active">
          <div class="fl-12__contact-avatar" style="background:linear-gradient(135deg,#6366f1,#4f46e5)">
            AI<div class="fl-12__contact-online"></div>
          </div>
          <div class="fl-12__contact-info">
            <div class="fl-12__contact-name">Alice Indigo</div>
            <div class="fl-12__contact-preview">flex: 1 is so clean</div>
          </div>
          <div class="fl-12__contact-meta">
            <div class="fl-12__contact-time">now</div>
            <div class="fl-12__unread">2</div>
          </div>
        </div>
        <div class="fl-12__contact">
          <div class="fl-12__contact-avatar" style="background:linear-gradient(135deg,#f43f5e,#be185d)">
            BK
          </div>
          <div class="fl-12__contact-info">
            <div class="fl-12__contact-name">Bob Kira</div>
            <div class="fl-12__contact-preview">checked the PR</div>
          </div>
          <div class="fl-12__contact-meta">
            <div class="fl-12__contact-time">2m</div>
          </div>
        </div>
        <div class="fl-12__contact">
          <div class="fl-12__contact-avatar" style="background:linear-gradient(135deg,#22c55e,#15803d)">
            CW
          </div>
          <div class="fl-12__contact-info">
            <div class="fl-12__contact-name">CSS Weekly</div>
            <div class="fl-12__contact-preview">New issue is out</div>
          </div>
          <div class="fl-12__contact-meta">
            <div class="fl-12__contact-time">1h</div>
          </div>
        </div>
      </div>
    </div>

    <!-- Message pane -->
    <div class="fl-12__pane">
      <div class="fl-12__chat-header">
        <div class="fl-12__chat-avatar">AI</div>
        <div>
          <div class="fl-12__chat-name">Alice Indigo</div>
          <div class="fl-12__chat-status">● Online</div>
        </div>
        <div class="fl-12__spacer"></div>
        <div class="fl-12__header-actions">
          <div class="fl-12__hbtn">📞</div>
          <div class="fl-12__hbtn">🎥</div>
          <div class="fl-12__hbtn">⋯</div>
        </div>
      </div>

      <div class="fl-12__messages">
        <div class="fl-12__date-divider">Today</div>

        <div class="fl-12__msg fl-12__msg--in">
          <div class="fl-12__msg-avatar" style="background:linear-gradient(135deg,#6366f1,#4f46e5)">AI</div>
          <div class="fl-12__msg-body">
            <div class="fl-12__bubble">Hey! Have you tried the new flexbox chat layout demo? The message alignment is all done with flex-direction: row-reverse for outgoing bubbles 😍</div>
            <div class="fl-12__msg-time">10:41</div>
          </div>
        </div>

        <div class="fl-12__msg fl-12__msg--out">
          <div class="fl-12__msg-avatar" style="background:linear-gradient(135deg,#f43f5e,#be185d)">Me</div>
          <div class="fl-12__msg-body">
            <div class="fl-12__bubble">Yes! The trick of using flex: 1 on the messages area and flex-shrink: 0 on the input bar is so elegant</div>
            <div class="fl-12__msg-time">10:42 ✓✓</div>
          </div>
        </div>

        <div class="fl-12__msg fl-12__msg--in">
          <div class="fl-12__msg-avatar" style="background:linear-gradient(135deg,#6366f1,#4f46e5)">AI</div>
          <div class="fl-12__msg-body">
            <div class="fl-12__bubble">Exactly. And the whole outer shell is just display: flex on the row axis — sidebar + pane side by side 💪</div>
            <div class="fl-12__msg-time">10:43</div>
          </div>
        </div>

        <div class="fl-12__typing">
          <div class="fl-12__typing-dot"></div>
          <div class="fl-12__typing-dot"></div>
          <div class="fl-12__typing-dot"></div>
        </div>
      </div>

      <div class="fl-12__input-bar">
        <div class="fl-12__input">Type a message...</div>
        <div class="fl-12__send-btn">→</div>
      </div>
    </div>

  </div>
</div>
```

**CSS:**
```css
.fl-12, .fl-12 *, .fl-12 *::before, .fl-12 *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
.fl-12 ::selection { background: #6366f1; color: #fff; }

.fl-12 {
  --bg: #18181b;
  --sidebar: #111113;
  --surface: #1c1c1f;
  --border: rgba(255,255,255,0.07);
  --accent: #6366f1;
  --accent2: #f43f5e;
  --text: #e4e4e7;
  --muted: #71717a;
  --bubble-in: #27272a;
  --bubble-out: #4f46e5;
  font-family: 'Inter', sans-serif;
  background: var(--bg);
  border-radius: 16px;
  overflow: hidden;
  min-height: 500px;
}

/* Outer flex row: chat list + message pane */
.fl-12__shell {
  display: flex;
  height: 500px;
}

/* ── Contacts sidebar ── */
.fl-12__contacts {
  width: 220px;
  flex-shrink: 0;
  background: var(--sidebar);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
}
.fl-12__contacts-top {
  padding: 14px 14px 8px;
  border-bottom: 1px solid var(--border);
}
.fl-12__app-name {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.fl-12__app-icon {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
}
.fl-12__search {
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 0.75rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.fl-12__contacts-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.fl-12__contact {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
}
.fl-12__contact:hover { background: rgba(255,255,255,0.05); }
.fl-12__contact.is-active { background: rgba(99,102,241,0.15); }
.fl-12__contact-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  position: relative;
}
.fl-12__contact-online {
  position: absolute;
  bottom: 1px;
  right: 1px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  border: 2px solid var(--sidebar);
}
.fl-12__contact-info { flex: 1; min-width: 0; }
.fl-12__contact-name {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fl-12__contact-preview {
  font-size: 0.68rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fl-12__contact-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
}
.fl-12__contact-time { font-size: 0.62rem; color: var(--muted); }
.fl-12__unread {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 0.58rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Message pane ── */
.fl-12__pane {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Chat header */
.fl-12__chat-header {
  height: 52px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 10px;
  flex-shrink: 0;
}
.fl-12__chat-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}
.fl-12__chat-name {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text);
}
.fl-12__chat-status {
  font-size: 0.65rem;
  color: #22c55e;
  font-weight: 500;
}
.fl-12__spacer { flex: 1; }
.fl-12__header-actions {
  display: flex;
  gap: 4px;
}
.fl-12__hbtn {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  background: rgba(255,255,255,0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  cursor: pointer;
  color: var(--muted);
  transition: background 0.15s, color 0.15s;
}
.fl-12__hbtn:hover { background: rgba(255,255,255,0.1); color: var(--text); }

/* Messages area: flex column, flex: 1 */
.fl-12__messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Date divider */
.fl-12__date-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.fl-12__date-divider::before,
.fl-12__date-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* Message row */
.fl-12__msg {
  display: flex;
  gap: 8px;
  max-width: 85%;
}
.fl-12__msg--out {
  flex-direction: row-reverse;  /* bubble right, avatar right */
  align-self: flex-end;
}
.fl-12__msg--in { align-self: flex-start; }

.fl-12__msg-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 700;
  color: #fff;
  align-self: flex-end;
}
.fl-12__msg-body { display: flex; flex-direction: column; gap: 4px; }
.fl-12__msg--out .fl-12__msg-body { align-items: flex-end; }
.fl-12__bubble {
  padding: 9px 13px;
  border-radius: 16px;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--text);
  max-width: 260px;
}
.fl-12__msg--in .fl-12__bubble {
  background: var(--bubble-in);
  border-bottom-left-radius: 4px;
}
.fl-12__msg--out .fl-12__bubble {
  background: var(--bubble-out);
  border-bottom-right-radius: 4px;
}
.fl-12__msg-time {
  font-size: 0.62rem;
  color: var(--muted);
  padding: 0 4px;
}

/* Typing indicator */
.fl-12__typing {
  display: flex;
  gap: 4px;
  padding: 10px 14px;
  background: var(--bubble-in);
  border-radius: 16px;
  border-bottom-left-radius: 4px;
  align-items: center;
  align-self: flex-start;
}
.fl-12__typing-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--muted);
  animation: fl-12-bounce 1.2s ease-in-out infinite;
}
.fl-12__typing-dot:nth-child(2) { animation-delay: 0.2s; }
.fl-12__typing-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes fl-12-bounce {
  0%,80%,100% { transform: translateY(0); opacity: 0.5; }
  40% { transform: translateY(-4px); opacity: 1; }
}

/* Input bar */
.fl-12__input-bar {
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.fl-12__input {
  flex: 1;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 8px 14px;
  font-size: 0.78rem;
  color: var(--muted);
  display: flex;
  align-items: center;
}
.fl-12__send-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s, transform 0.15s;
}
.fl-12__send-btn:hover { background: #4f46e5; transform: scale(1.1); }

@media (prefers-reduced-motion: reduce) {
  .fl-12__typing-dot { animation: none; }
  .fl-12__contact, .fl-12__hbtn, .fl-12__send-btn { transition: none; }
}
```

### 13. CSS Flexbox Mosaic Image Gallery

**Type:** Pure CSS
**Description:** A photo mosaic gallery with three flex columns of varying weights (<code>flex: 2</code>, <code>flex: 1</code>, <code>flex: 1.5</code>) and variable-height tiles, each captioned with a category tag and title — creating an asymmetric editorial grid like Unsplash or Pinterest.

**HTML:**
```html
<div class="fl-13">
  <div class="fl-13__header">
    <div class="fl-13__heading">
      <h2 class="fl-13__title">Editorial Gallery</h2>
      <span class="fl-13__count">126 photos</span>
    </div>
    <div class="fl-13__view-toggle">
      <button type="button" class="fl-13__view-btn is-active" aria-label="Mosaic view" aria-pressed="true">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="7" height="9" rx="1"/><rect x="14" y="3" width="7" height="5" rx="1"/><rect x="14" y="12" width="7" height="9" rx="1"/><rect x="3" y="16" width="7" height="5" rx="1"/></svg>
      </button>
      <button type="button" class="fl-13__view-btn" aria-label="List view" aria-pressed="false">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="4" y1="6" x2="20" y2="6"/><line x1="4" y1="12" x2="20" y2="12"/><line x1="4" y1="18" x2="20" y2="18"/></svg>
      </button>
    </div>
  </div>

  <div class="fl-13__mosaic">

    <!-- Column 1: wide, two rows (short + tall) -->
    <div class="fl-13__col fl-13__col--wide">

      <div class="fl-13__tile fl-13__tile--short" style="--tile-grad:linear-gradient(135deg,#ec4899 0%,#7c3aed 60%,#1e1b4b 100%)">
        <div class="fl-13__tile-bg"></div>
        <div class="fl-13__tile-meta">
          <span class="fl-13__tile-tag">Abstract</span>
          <h3 class="fl-13__tile-title">Magenta Drift</h3>
        </div>
      </div>

      <div class="fl-13__tile fl-13__tile--tall" style="--tile-grad:linear-gradient(160deg,#0ea5e9 0%,#1e40af 55%,#0a1a2e 100%)">
        <div class="fl-13__tile-bg"></div>
        <div class="fl-13__tile-meta">
          <span class="fl-13__tile-tag">Aqua</span>
          <h3 class="fl-13__tile-title">Deep Ocean Study</h3>
          <p class="fl-13__tile-sub">14 images · Editorial</p>
        </div>
      </div>

    </div>

    <!-- Column 2: narrow, two tiles -->
    <div class="fl-13__col fl-13__col--narrow">

      <div class="fl-13__tile fl-13__tile--tall" style="--tile-grad:linear-gradient(160deg,#22c55e 0%,#15803d 55%,#0a1f10 100%)">
        <div class="fl-13__tile-bg"></div>
        <div class="fl-13__tile-meta">
          <span class="fl-13__tile-tag">Organic</span>
          <h3 class="fl-13__tile-title">Green Burst</h3>
        </div>
      </div>

      <div class="fl-13__tile fl-13__tile--short" style="--tile-grad:linear-gradient(135deg,#fbbf24 0%,#f97316 50%,#7c2d12 100%)">
        <div class="fl-13__tile-bg"></div>
        <div class="fl-13__tile-meta">
          <span class="fl-13__tile-tag">Ember</span>
          <h3 class="fl-13__tile-title">Solar Flare</h3>
        </div>
      </div>

    </div>

    <!-- Column 3: mid, two equal tiles -->
    <div class="fl-13__col fl-13__col--mid">

      <div class="fl-13__tile" style="--tile-grad:linear-gradient(135deg,#8b5cf6 0%,#5b21b6 55%,#1e1b4b 100%)">
        <div class="fl-13__tile-bg"></div>
        <div class="fl-13__tile-meta">
          <span class="fl-13__tile-tag">Cosmic</span>
          <h3 class="fl-13__tile-title">Nebula Fragment</h3>
        </div>
      </div>

      <div class="fl-13__tile" style="--tile-grad:linear-gradient(135deg,#f43f5e 0%,#9f1239 55%,#1a0512 100%)">
        <div class="fl-13__tile-bg"></div>
        <div class="fl-13__tile-meta">
          <span class="fl-13__tile-tag">Vermillion</span>
          <h3 class="fl-13__tile-title">Crimson Study</h3>
          <span class="fl-13__tile-more">+ 119 more</span>
        </div>
      </div>

    </div>

  </div>
</div>
```

**CSS:**
```css
.fl-13, .fl-13 *, .fl-13 *::before, .fl-13 *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
.fl-13 ::selection { background: #ec4899; color: #fff; }

.fl-13 {
  --bg: #0c0a0e;
  --surface: #16131a;
  --ink: #fff;
  --muted: rgba(255,255,255,0.55);
  --accent: #ec4899;
  --border: rgba(255,255,255,0.08);
  font-family: 'Barlow', system-ui, sans-serif;
  background: var(--bg);
  padding: 20px;
  border-radius: 16px;
  min-height: 500px;
}

.fl-13__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.fl-13__heading {
  display: flex;
  align-items: baseline;
  gap: 12px;
  min-width: 0;
}
.fl-13__title {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.fl-13__count {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.04em;
}
.fl-13__view-toggle {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.fl-13__view-btn {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--muted);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.fl-13__view-btn:hover { color: var(--ink); background: rgba(255,255,255,0.08); }
.fl-13__view-btn.is-active {
  background: rgba(236,72,153,0.12);
  color: var(--accent);
  border-color: rgba(236,72,153,0.45);
}

/*
  MOSAIC LAYOUT
  Outer container: flex row (3 columns) with proportional flex weights.
  Each column: flex column with two tiles of variable flex weight.
  Result: an asymmetric Pinterest-style grid where the LEFT column
  is widest (flex: 2), the MIDDLE narrowest (flex: 1), and the
  RIGHT in between (flex: 1.5).
*/
.fl-13__mosaic {
  display: flex;
  gap: 12px;
  height: 440px;
}

.fl-13__col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.fl-13__col--wide { flex: 2; }
.fl-13__col--narrow { flex: 1; }
.fl-13__col--mid { flex: 1.5; }

.fl-13__tile {
  flex: 1;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  isolation: isolate;
  background: var(--surface);
}
.fl-13__tile--tall { flex: 1.8; }
.fl-13__tile--short { flex: 1; }

/* The "image": a gradient stand-in for a real photo. In production,
   replace .fl-13__tile-bg with <img src=...> at the same size + an
   object-fit: cover rule. The scale-on-hover effect still works. */
.fl-13__tile-bg {
  position: absolute;
  inset: 0;
  background: var(--tile-grad, linear-gradient(135deg, #6366f1, #1e1b4b));
  transition: transform 0.45s cubic-bezier(0.2, 0.6, 0.2, 1);
  z-index: 0;
}
.fl-13__tile:hover .fl-13__tile-bg { transform: scale(1.05); }

/* Caption scrim — sits above the image, persistent (not hover-only).
   Linear gradient fades the bottom of the image so white text reads
   cleanly without darkening the whole image. */
.fl-13__tile::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 65%;
  background: linear-gradient(to top,
    rgba(0,0,0,0.78) 0%,
    rgba(0,0,0,0.45) 35%,
    transparent 100%);
  z-index: 1;
  pointer-events: none;
}

.fl-13__tile-meta {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  z-index: 2;
  pointer-events: none;
}
.fl-13__tile-tag {
  display: inline-block;
  background: rgba(255,255,255,0.18);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
}
.fl-13__tile-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.fl-13__tile-sub {
  font-size: 0.7rem;
  color: rgba(255,255,255,0.78);
  font-weight: 500;
}
.fl-13__tile-more {
  display: inline-block;
  margin-top: 2px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.25);
  font-size: 0.65rem;
  font-weight: 700;
  color: #fff;
}

/* Smaller tiles need lighter caption so we don't drown the image */
.fl-13__col--narrow .fl-13__tile-title { font-size: 0.78rem; }
.fl-13__col--narrow .fl-13__tile-meta { left: 10px; right: 10px; bottom: 10px; gap: 4px; }

@media (max-width: 720px) {
  .fl-13 { padding: 14px; }
  .fl-13__mosaic { height: 520px; }
}
@media (max-width: 520px) {
  /* Below 520px the three-column row gets too cramped. Stack the
     columns vertically — still a flexbox layout, just flipped axis. */
  .fl-13__mosaic {
    flex-direction: column;
    height: auto;
  }
  .fl-13__col { flex-direction: row; flex: none; min-height: 180px; }
  .fl-13__col--wide .fl-13__tile--tall { flex: 1.6; }
  .fl-13__title { font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .fl-13__tile-bg, .fl-13__view-btn { transition: none; }
  .fl-13__tile:hover .fl-13__tile-bg { transform: none; }
}
```

### 14. CSS Flexbox Form Layout

**Type:** Pure CSS
**Description:** A structured form layout using flex for single-column fields, inline multi-column field rows, and input groups with prefix/suffix addons — all without tables or floats.

**HTML:**
```html
<div class="fl-14">
  <div class="fl-14__card">
    <div class="fl-14__card-header">
      <div class="fl-14__card-eyebrow">Flexbox Form Layout</div>
      <div class="fl-14__card-title">Create Your Account</div>
      <div class="fl-14__card-sub">All field rows and input groups use CSS Flexbox</div>
    </div>

    <div class="fl-14__form">

      <!-- Full-width with prefix -->
      <div class="fl-14__field">
        <label class="fl-14__label">Email address <span class="fl-14__required">*</span></label>
        <div class="fl-14__input-group">
          <div class="fl-14__input-prefix">✉</div>
          <input class="fl-14__input" type="email" placeholder="you@example.com">
        </div>
        <div class="fl-14__hint is-error">Please enter a valid email address</div>
      </div>

      <!-- Two-col row: first + last name -->
      <div class="fl-14__row">
        <div class="fl-14__field">
          <label class="fl-14__label">First name <span class="fl-14__required">*</span></label>
          <input class="fl-14__plain-input" type="text" placeholder="Jane">
        </div>
        <div class="fl-14__field">
          <label class="fl-14__label">Last name</label>
          <input class="fl-14__plain-input" type="text" placeholder="Doe">
        </div>
      </div>

      <!-- Three-col row: country code + phone -->
      <div class="fl-14__field">
        <label class="fl-14__label">Phone number</label>
        <div class="fl-14__row">
          <div class="fl-14__field fl-14__field--narrow">
            <select class="fl-14__select">
              <option>🇺🇸 +1</option>
              <option>🇬🇧 +44</option>
              <option>🇩🇪 +49</option>
            </select>
          </div>
          <div class="fl-14__field fl-14__field--wide">
            <input class="fl-14__plain-input" type="tel" placeholder="(555) 000-0000">
          </div>
        </div>
      </div>

      <!-- Password with suffix -->
      <div class="fl-14__field">
        <label class="fl-14__label">Password <span class="fl-14__required">*</span></label>
        <div class="fl-14__input-group">
          <input class="fl-14__input" type="password" placeholder="Min. 8 characters">
          <div class="fl-14__input-suffix" style="cursor:pointer">👁</div>
        </div>
        <div class="fl-14__hint is-success">✓ Password strength: Strong</div>
      </div>

      <!-- Role select -->
      <div class="fl-14__field">
        <label class="fl-14__label">Role</label>
        <select class="fl-14__select">
          <option>Frontend Developer</option>
          <option>Designer</option>
          <option>Product Manager</option>
          <option>Other</option>
        </select>
      </div>

      <!-- Textarea -->
      <div class="fl-14__field">
        <label class="fl-14__label">Bio</label>
        <textarea class="fl-14__textarea" placeholder="Tell us about yourself..."></textarea>
        <div class="fl-14__hint">0 / 200 characters</div>
      </div>

      <div class="fl-14__divider"></div>

      <!-- Checkboxes: flex column -->
      <div class="fl-14__field">
        <label class="fl-14__label">Preferences</label>
        <div class="fl-14__check-group">
          <div class="fl-14__check-item">
            <div class="fl-14__checkbox is-checked">✓</div>
            <div class="fl-14__check-text">Send me weekly CSS layout tips and pattern updates</div>
          </div>
          <div class="fl-14__check-item">
            <div class="fl-14__checkbox"></div>
            <div class="fl-14__check-text">I agree to the <span style="color:#2563eb;cursor:pointer">Terms of Service</span> and <span style="color:#2563eb;cursor:pointer">Privacy Policy</span></div>
          </div>
        </div>
      </div>

      <!-- Submit row: space-between -->
      <div class="fl-14__submit-row">
        <button class="fl-14__cancel-btn">Cancel</button>
        <div style="display:flex;align-items:center;gap:12px">
          <div class="fl-14__step-indicator">Step <strong>2</strong> of 3</div>
          <button class="fl-14__submit-btn">Continue →</button>
        </div>
      </div>

    </div>
  </div>
</div>
```

**CSS:**
```css
.fl-14, .fl-14 *, .fl-14 *::before, .fl-14 *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
.fl-14 ::selection { background: #2563eb; color: #fff; }

.fl-14 {
  --bg: #f8fafc;
  --surface: #fff;
  --ink: #0f172a;
  --muted: #64748b;
  --accent: #2563eb;
  --accent-light: #dbeafe;
  --border: #cbd5e1;
  --border-focus: #2563eb;
  --error: #ef4444;
  --success: #22c55e;
  font-family: 'Lato', sans-serif;
  background: var(--bg);
  padding: 28px;
  border-radius: 16px;
  min-height: 500px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.fl-14__card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  width: 100%;
  max-width: 560px;
}

.fl-14__card-header {
  background: linear-gradient(135deg, #1e3a5f, #2563eb);
  padding: 20px 24px;
}
.fl-14__card-eyebrow {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin-bottom: 4px;
}
.fl-14__card-title {
  font-size: 1.1rem;
  font-weight: 900;
  color: #fff;
}
.fl-14__card-sub {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.55);
  margin-top: 4px;
}

.fl-14__form {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ── Row patterns ── */
/* Single full-width field */
.fl-14__field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* Two-col row: flex row with gap */
.fl-14__row {
  display: flex;
  gap: 12px;
}
.fl-14__row .fl-14__field { flex: 1; }
.fl-14__row .fl-14__field--narrow { flex: 0 0 100px; }
.fl-14__row .fl-14__field--wide { flex: 2; }

/* Input group: icon + input side by side */
.fl-14__input-group {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.fl-14__input-group:focus-within {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
}
.fl-14__input-prefix {
  background: #f8fafc;
  border-right: 1px solid var(--border);
  padding: 0 10px;
  display: flex;
  align-items: center;
  font-size: 0.78rem;
  color: var(--muted);
  flex-shrink: 0;
  white-space: nowrap;
}
.fl-14__input-suffix {
  background: #f8fafc;
  border-left: 1px solid var(--border);
  padding: 0 10px;
  display: flex;
  align-items: center;
  font-size: 0.78rem;
  color: var(--muted);
  flex-shrink: 0;
}
.fl-14__input {
  flex: 1;
  border: none;
  outline: none;
  padding: 9px 12px;
  font-size: 0.82rem;
  font-family: 'Lato', sans-serif;
  color: var(--ink);
  background: transparent;
  min-width: 0;
}
.fl-14__input::placeholder { color: #94a3b8; }

/* Plain input (no group) */
.fl-14__plain-input {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 0.82rem;
  font-family: 'Lato', sans-serif;
  color: var(--ink);
  outline: none;
  width: 100%;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.fl-14__plain-input:focus {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
}
.fl-14__plain-input::placeholder { color: #94a3b8; }

/* Select */
.fl-14__select {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 0.82rem;
  font-family: 'Lato', sans-serif;
  color: var(--ink);
  outline: none;
  width: 100%;
  background: var(--surface);
  cursor: pointer;
  transition: border-color 0.2s;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2364748b' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}
.fl-14__select:focus { border-color: var(--border-focus); box-shadow: 0 0 0 3px rgba(37,99,235,0.12); }

/* Textarea */
.fl-14__textarea {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 0.82rem;
  font-family: 'Lato', sans-serif;
  color: var(--ink);
  outline: none;
  width: 100%;
  resize: vertical;
  min-height: 80px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.fl-14__textarea:focus {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
}

.fl-14__label {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 4px;
}
.fl-14__required { color: var(--error); }
.fl-14__hint {
  font-size: 0.68rem;
  color: var(--muted);
}
.fl-14__hint.is-error { color: var(--error); }
.fl-14__hint.is-success { color: var(--success); }

/* Checkbox row */
.fl-14__check-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.fl-14__check-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}
.fl-14__checkbox {
  width: 16px;
  height: 16px;
  border: 2px solid var(--border);
  border-radius: 4px;
  flex-shrink: 0;
  margin-top: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, border-color 0.15s;
}
.fl-14__checkbox.is-checked {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 800;
}
.fl-14__check-text {
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.4;
}

/* Divider */
.fl-14__divider {
  height: 1px;
  background: #f1f5f9;
  margin: 4px 0;
}

/* Submit row */
.fl-14__submit-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 4px;
}
.fl-14__submit-btn {
  padding: 10px 24px;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 700;
  font-family: 'Lato', sans-serif;
  border: none;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
  display: flex;
  align-items: center;
  gap: 6px;
}
.fl-14__submit-btn:hover { background: #1d4ed8; transform: translateY(-1px); }
.fl-14__cancel-btn {
  padding: 10px 16px;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 600;
  font-family: 'Lato', sans-serif;
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all 0.15s;
}
.fl-14__cancel-btn:hover { background: #f8fafc; color: var(--ink); }
.fl-14__step-indicator {
  font-size: 0.7rem;
  color: var(--muted);
}
.fl-14__step-indicator strong { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .fl-14__input-group, .fl-14__plain-input,
  .fl-14__select, .fl-14__textarea,
  .fl-14__submit-btn, .fl-14__cancel-btn { transition: none; }
}
```

### 15. CSS Flexbox Kanban Board Layout

**Type:** CSS + JS
**Description:** A dark-themed Kanban board with five status columns, draggable task cards, color-coded priority badges, avatar assignments, and a progress bar — built with a horizontal flex shell.

**HTML:**
```html
<div class="fl-15">

  <!-- Top Bar -->
  <div class="fl-15__topbar">
    <div class="fl-15__logo">
      <div class="fl-15__logo-icon">
        <svg viewBox="0 0 16 16"><rect x="1" y="1" width="6" height="8" rx="1.5"/><rect x="9" y="1" width="6" height="5" rx="1.5"/><rect x="9" y="8" width="6" height="7" rx="1.5"/><rect x="1" y="11" width="6" height="4" rx="1.5"/></svg>
      </div>
      <span class="fl-15__logo-name">Flex<span>Board</span></span>
    </div>
    <span class="fl-15__project">Sprint 14 · Q3 2025</span>
    <div class="fl-15__topbar-actions">
      <div class="fl-15__avatar fl-15__avatar--a">AJ</div>
      <div class="fl-15__avatar fl-15__avatar--b">SK</div>
      <div class="fl-15__avatar fl-15__avatar--c">MR</div>
      <button class="fl-15__btn fl-15__btn--ghost">Filter</button>
      <button class="fl-15__btn fl-15__btn--primary">+ Add Task</button>
    </div>
  </div>

  <!-- Board -->
  <div class="fl-15__board" id="fl-15-board">

    <!-- Backlog -->
    <div class="fl-15__col fl-15__col--backlog">
      <div class="fl-15__col-head">
        <div class="fl-15__col-label">
          <span class="fl-15__col-dot"></span> Backlog
        </div>
        <span class="fl-15__col-count">3</span>
      </div>
      <div class="fl-15__cards">
        <div class="fl-15__card" draggable="true">
          <span class="fl-15__card-tag fl-15__card-tag--ux">UX</span>
          <div class="fl-15__card-title">Redesign onboarding flow for new users</div>
          <div class="fl-15__card-meta">
            <span class="fl-15__card-id">#FL-108</span>
            <div class="fl-15__card-foot">
              <span class="fl-15__card-prio fl-15__card-prio--low">● Low</span>
              <div class="fl-15__card-avatar fl-15__card-avatar--c">MR</div>
            </div>
          </div>
        </div>
        <div class="fl-15__card">
          <span class="fl-15__card-tag fl-15__card-tag--be">Backend</span>
          <div class="fl-15__card-title">Add Redis caching for API responses</div>
          <div class="fl-15__card-meta">
            <span class="fl-15__card-id">#FL-109</span>
            <div class="fl-15__card-foot">
              <span class="fl-15__card-prio fl-15__card-prio--medium">● Med</span>
              <div class="fl-15__card-avatar fl-15__card-avatar--b">SK</div>
            </div>
          </div>
        </div>
        <div class="fl-15__card">
          <span class="fl-15__card-tag fl-15__card-tag--fe">Frontend</span>
          <div class="fl-15__card-title">Implement dark mode toggle</div>
          <div class="fl-15__card-meta">
            <span class="fl-15__card-id">#FL-110</span>
            <div class="fl-15__card-foot">
              <span class="fl-15__card-prio fl-15__card-prio--low">● Low</span>
              <div class="fl-15__card-avatar fl-15__card-avatar--a">AJ</div>
            </div>
          </div>
        </div>
      </div>
      <div class="fl-15__col-add">
        <div class="fl-15__col-add-icon">+</div>
        Add card
      </div>
    </div>

    <!-- To Do -->
    <div class="fl-15__col fl-15__col--todo">
      <div class="fl-15__col-head">
        <div class="fl-15__col-label">
          <span class="fl-15__col-dot"></span> To Do
        </div>
        <span class="fl-15__col-count">3</span>
      </div>
      <div class="fl-15__cards">
        <div class="fl-15__card fl-15__card--highlighted">
          <span class="fl-15__card-tag fl-15__card-tag--fe">Frontend</span>
          <div class="fl-15__card-title">Build flexbox grid component library</div>
          <div class="fl-15__card-meta">
            <span class="fl-15__card-id">#FL-101</span>
            <div class="fl-15__card-foot">
              <span class="fl-15__card-prio fl-15__card-prio--high">● High</span>
              <div class="fl-15__card-avatar fl-15__card-avatar--a">AJ</div>
            </div>
          </div>
        </div>
        <div class="fl-15__card">
          <span class="fl-15__card-tag fl-15__card-tag--be">Backend</span>
          <div class="fl-15__card-title">Migrate auth service to JWT tokens</div>
          <div class="fl-15__card-meta">
            <span class="fl-15__card-id">#FL-102</span>
            <div class="fl-15__card-foot">
              <span class="fl-15__card-prio fl-15__card-prio--high">● High</span>
              <div class="fl-15__card-avatar fl-15__card-avatar--b">SK</div>
            </div>
          </div>
        </div>
        <div class="fl-15__card">
          <span class="fl-15__card-tag fl-15__card-tag--qa">QA</span>
          <div class="fl-15__card-title">Write E2E tests for checkout flow</div>
          <div class="fl-15__card-meta">
            <span class="fl-15__card-id">#FL-103</span>
            <div class="fl-15__card-foot">
              <span class="fl-15__card-prio fl-15__card-prio--medium">● Med</span>
              <div class="fl-15__card-avatar fl-15__card-avatar--c">MR</div>
            </div>
          </div>
        </div>
      </div>
      <div class="fl-15__col-add">
        <div class="fl-15__col-add-icon">+</div>
        Add card
      </div>
    </div>

    <!-- In Progress -->
    <div class="fl-15__col fl-15__col--doing">
      <div class="fl-15__col-head">
        <div class="fl-15__col-label">
          <span class="fl-15__col-dot"></span> In Progress
        </div>
        <span class="fl-15__col-count">3</span>
      </div>
      <div class="fl-15__cards">
        <div class="fl-15__card">
          <span class="fl-15__card-tag fl-15__card-tag--fe">Frontend</span>
          <div class="fl-15__card-title">Implement responsive nav with flex</div>
          <div class="fl-15__card-progress">
            <div class="fl-15__card-progress-fill" style="width: 65%"></div>
          </div>
          <div class="fl-15__card-meta">
            <span class="fl-15__card-id">#FL-104</span>
            <div class="fl-15__card-foot">
              <span class="fl-15__card-prio fl-15__card-prio--high">● High</span>
              <div class="fl-15__card-avatar fl-15__card-avatar--a">AJ</div>
            </div>
          </div>
        </div>
        <div class="fl-15__card">
          <span class="fl-15__card-tag fl-15__card-tag--be">Backend</span>
          <div class="fl-15__card-title">Set up CI/CD pipeline for staging</div>
          <div class="fl-15__card-progress">
            <div class="fl-15__card-progress-fill" style="width: 30%"></div>
          </div>
          <div class="fl-15__card-meta">
            <span class="fl-15__card-id">#FL-105</span>
            <div class="fl-15__card-foot">
              <span class="fl-15__card-prio fl-15__card-prio--medium">● Med</span>
              <div class="fl-15__card-avatar fl-15__card-avatar--b">SK</div>
            </div>
          </div>
        </div>
        <div class="fl-15__card">
          <span class="fl-15__card-tag fl-15__card-tag--bug">Bug</span>
          <div class="fl-15__card-title">Fix overflow scroll on mobile sidebar</div>
          <div class="fl-15__card-progress">
            <div class="fl-15__card-progress-fill" style="width: 80%"></div>
          </div>
          <div class="fl-15__card-meta">
            <span class="fl-15__card-id">#FL-106</span>
            <div class="fl-15__card-foot">
              <span class="fl-15__card-prio fl-15__card-prio--high">● High</span>
              <div class="fl-15__card-avatar fl-15__card-avatar--c">MR</div>
            </div>
          </div>
        </div>
      </div>
      <div class="fl-15__col-add">
        <div class="fl-15__col-add-icon">+</div>
        Add card
      </div>
    </div>

    <!-- Review -->
    <div class="fl-15__col fl-15__col--review">
      <div class="fl-15__col-head">
        <div class="fl-15__col-label">
          <span class="fl-15__col-dot"></span> Review
        </div>
        <span class="fl-15__col-count">2</span>
      </div>
      <div class="fl-15__cards">
        <div class="fl-15__card">
          <span class="fl-15__card-tag fl-15__card-tag--fe">Frontend</span>
          <div class="fl-15__card-title">Pricing table with flex equal heights</div>
          <div class="fl-15__card-meta">
            <span class="fl-15__card-id">#FL-097</span>
            <div class="fl-15__card-foot">
              <span class="fl-15__card-prio fl-15__card-prio--medium">● Med</span>
              <div class="fl-15__card-avatar fl-15__card-avatar--a">AJ</div>
            </div>
          </div>
        </div>
        <div class="fl-15__card">
          <span class="fl-15__card-tag fl-15__card-tag--qa">QA</span>
          <div class="fl-15__card-title">Cross-browser accessibility audit</div>
          <div class="fl-15__card-meta">
            <span class="fl-15__card-id">#FL-098</span>
            <div class="fl-15__card-foot">
              <span class="fl-15__card-prio fl-15__card-prio--low">● Low</span>
              <div class="fl-15__card-avatar fl-15__card-avatar--b">SK</div>
            </div>
          </div>
        </div>
      </div>
      <div class="fl-15__col-add">
        <div class="fl-15__col-add-icon">+</div>
        Add card
      </div>
    </div>

    <!-- Done -->
    <div class="fl-15__col fl-15__col--done">
      <div class="fl-15__col-head">
        <div class="fl-15__col-label">
          <span class="fl-15__col-dot"></span> Done
        </div>
        <span class="fl-15__col-count">2</span>
      </div>
      <div class="fl-15__cards">
        <div class="fl-15__card" style="opacity:0.6">
          <span class="fl-15__card-tag fl-15__card-tag--fe">Frontend</span>
          <div class="fl-15__card-title">Holy grail layout with flex columns</div>
          <div class="fl-15__card-meta">
            <span class="fl-15__card-id">#FL-090</span>
            <div class="fl-15__card-foot">
              <span class="fl-15__card-prio fl-15__card-prio--low">✓ Done</span>
              <div class="fl-15__card-avatar fl-15__card-avatar--c">MR</div>
            </div>
          </div>
        </div>
        <div class="fl-15__card" style="opacity:0.6">
          <span class="fl-15__card-tag fl-15__card-tag--be">Backend</span>
          <div class="fl-15__card-title">Database schema migrations v2.1</div>
          <div class="fl-15__card-meta">
            <span class="fl-15__card-id">#FL-091</span>
            <div class="fl-15__card-foot">
              <span class="fl-15__card-prio fl-15__card-prio--low">✓ Done</span>
              <div class="fl-15__card-avatar fl-15__card-avatar--a">AJ</div>
            </div>
          </div>
        </div>
      </div>
      <div class="fl-15__col-add">
        <div class="fl-15__col-add-icon">+</div>
        Add card
      </div>
    </div>

    <!-- Add Column -->
    <div class="fl-15__col fl-15__col--add">
      <div class="fl-15__col-add-label">
        <span>+</span>
        Add column
      </div>
    </div>

  </div>
</div>

<script>
(function() {
  const board = document.getElementById('fl-15-board');
  if (!board) return;

  let dragCard = null;
  let dragSource = null;

  board.querySelectorAll('.fl-15__card[draggable]').forEach(card => {
    // Enable drag on all cards
    card.setAttribute('draggable', 'true');
  });
  // Enable drag on ALL cards
  board.querySelectorAll('.fl-15__card').forEach(card => {
    card.setAttribute('draggable', 'true');

    card.addEventListener('dragstart', e => {
      dragCard = card;
      dragSource = card.closest('.fl-15__cards');
      setTimeout(() => card.classList.add('is-dragging'), 0);
      e.dataTransfer.effectAllowed = 'move';
    });
    card.addEventListener('dragend', () => {
      card.classList.remove('is-dragging');
      board.querySelectorAll('.fl-15__cards').forEach(z => z.classList.remove('fl-15__drop-zone'));
      dragCard = null;
    });
  });

  board.querySelectorAll('.fl-15__cards').forEach(zone => {
    zone.addEventListener('dragover', e => {
      e.preventDefault();
      e.dataTransfer.dropEffect = 'move';
    });
    zone.addEventListener('drop', e => {
      e.preventDefault();
      if (dragCard && zone !== dragSource) {
        zone.appendChild(dragCard);
        // Update counts
        updateCounts();
      }
    });
  });

  function updateCounts() {
    board.querySelectorAll('.fl-15__col').forEach(col => {
      const count = col.querySelectorAll('.fl-15__card').length;
      const badge = col.querySelector('.fl-15__col-count');
      if (badge) badge.textContent = count;
    });
  }

  // Add card buttons — append a placeholder card
  board.querySelectorAll('.fl-15__col-add').forEach(btn => {
    btn.addEventListener('click', () => {
      const col = btn.closest('.fl-15__col');
      const cardsZone = col.querySelector('.fl-15__cards');
      if (!cardsZone) return;
      const card = document.createElement('div');
      card.className = 'fl-15__card';
      card.setAttribute('draggable', 'true');
      card.innerHTML = `
        <span class="fl-15__card-tag fl-15__card-tag--fe">Frontend</span>
        <div class="fl-15__card-title" contenteditable="true" style="outline:none;border-bottom:1px dashed #6b6b80">New task…</div>
        <div class="fl-15__card-meta">
          <span class="fl-15__card-id">#FL-NEW</span>
        </div>`;
      cardsZone.appendChild(card);
      card.querySelector('[contenteditable]').focus();
      updateCounts();
      // Re-attach drag events
      card.addEventListener('dragstart', e => {
        dragCard = card;
        dragSource = card.closest('.fl-15__cards');
        setTimeout(() => card.classList.add('is-dragging'), 0);
        e.dataTransfer.effectAllowed = 'move';
      });
      card.addEventListener('dragend', () => {
        card.classList.remove('is-dragging');
        dragCard = null;
      });
    });
  });
})();
</script>
```

**CSS:**
```css
.fl-15, .fl-15 *, .fl-15 *::before, .fl-15 *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
.fl-15 ::selection { background: #7c3aed; color: #fff; }

.fl-15 {
  --bg: #0f0f13;
  --panel: #1a1a24;
  --col: #1e1e2a;
  --col-hover: #252533;
  --border: #2e2e40;
  --accent: #7c3aed;
  --accent2: #06b6d4;
  --accent3: #f59e0b;
  --accent4: #10b981;
  --danger: #ef4444;
  --ink: #e8e8f0;
  --muted: #6b6b80;
  --card-bg: #252535;
  --card-hover: #2d2d40;
  font-family: 'DM Sans', sans-serif;
  background: var(--bg);
  min-height: 520px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
}

/* ── Top Bar ── */
.fl-15__topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  gap: 12px;
}
.fl-15__logo {
  display: flex;
  align-items: center;
  gap: 8px;
}
.fl-15__logo-icon {
  width: 28px; height: 28px;
  background: var(--accent);
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
}
.fl-15__logo-icon svg { width: 16px; height: 16px; fill: #fff; }
.fl-15__logo-name {
  font-family: 'Space Mono', monospace;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.fl-15__logo-name span { color: var(--accent); }
.fl-15__project {
  font-size: 0.75rem;
  color: var(--muted);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.fl-15__topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.fl-15__avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  font-size: 0.65rem;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  flex-shrink: 0;
}
.fl-15__avatar--a { background: #7c3aed; }
.fl-15__avatar--b { background: #06b6d4; }
.fl-15__avatar--c { background: #f59e0b; }
.fl-15__btn {
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  font-family: 'DM Sans', sans-serif;
  transition: opacity 0.2s;
}
.fl-15__btn:hover { opacity: 0.85; }
.fl-15__btn--primary {
  background: var(--accent);
  color: #fff;
}
.fl-15__btn--ghost {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
}

/* ── Board ── */
.fl-15__board {
  display: flex;
  flex: 1;
  gap: 10px;
  padding: 14px;
  overflow-x: auto;
  align-items: flex-start;
  min-height: 0;
  position: relative;
}
.fl-15__board::-webkit-scrollbar { height: 6px; }
.fl-15__board::-webkit-scrollbar-track { background: transparent; }
.fl-15__board::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.fl-15__board::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* ── Column ── */
.fl-15__col {
  display: flex;
  flex-direction: column;
  flex: 0 0 192px;
  min-width: 0;
  background: var(--col);
  border-radius: 10px;
  border: 1px solid var(--border);
  overflow: hidden;
}
.fl-15__col-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  flex-shrink: 0;
  border-bottom: 2px solid transparent;
}
.fl-15__col--backlog .fl-15__col-head  { border-color: var(--muted); }
.fl-15__col--todo    .fl-15__col-head  { border-color: var(--accent2); }
.fl-15__col--doing   .fl-15__col-head  { border-color: var(--accent); }
.fl-15__col--review  .fl-15__col-head  { border-color: var(--accent3); }
.fl-15__col--done    .fl-15__col-head  { border-color: var(--accent4); }

.fl-15__col-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.fl-15__col--backlog .fl-15__col-label { color: var(--muted); }
.fl-15__col--todo    .fl-15__col-label { color: var(--accent2); }
.fl-15__col--doing   .fl-15__col-label { color: var(--accent); }
.fl-15__col--review  .fl-15__col-label { color: var(--accent3); }
.fl-15__col--done    .fl-15__col-label { color: var(--accent4); }

.fl-15__col-dot {
  width: 7px; height: 7px; border-radius: 50%;
}
.fl-15__col--backlog .fl-15__col-dot { background: var(--muted); }
.fl-15__col--todo    .fl-15__col-dot { background: var(--accent2); }
.fl-15__col--doing   .fl-15__col-dot { background: var(--accent); }
.fl-15__col--review  .fl-15__col-dot { background: var(--accent3); }
.fl-15__col--done    .fl-15__col-dot { background: var(--accent4); }

.fl-15__col-count {
  font-size: 0.68rem;
  background: var(--border);
  color: var(--muted);
  border-radius: 20px;
  padding: 1px 7px;
  font-weight: 700;
}

/* ── Cards area ── */
.fl-15__cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  flex: 1;
  overflow-y: auto;
  min-height: 80px;
  max-height: 360px;
}
.fl-15__cards::-webkit-scrollbar { width: 3px; }
.fl-15__cards::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

/* ── Card ── */
.fl-15__card {
  background: var(--card-bg);
  border-radius: 7px;
  border: 1px solid var(--border);
  padding: 10px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.fl-15__card:hover {
  background: var(--card-hover);
  border-color: #3a3a50;
  transform: translateY(-1px);
}
.fl-15__card--highlighted {
  border-color: var(--accent);
}
.fl-15__card-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 7px;
  border-radius: 4px;
  align-self: flex-start;
}
.fl-15__card-tag--fe  { background: rgba(124,58,237,0.2); color: #a78bfa; }
.fl-15__card-tag--be  { background: rgba(6,182,212,0.2);  color: #67e8f9; }
.fl-15__card-tag--bug { background: rgba(239,68,68,0.2);  color: #fca5a5; }
.fl-15__card-tag--ux  { background: rgba(245,158,11,0.2); color: #fcd34d; }
.fl-15__card-tag--qa  { background: rgba(16,185,129,0.2); color: #6ee7b7; }

.fl-15__card-title {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.4;
}
.fl-15__card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.fl-15__card-id {
  font-family: 'Space Mono', monospace;
  font-size: 0.6rem;
  color: var(--muted);
}
.fl-15__card-foot {
  display: flex;
  align-items: center;
  gap: 5px;
}
.fl-15__card-prio {
  font-size: 0.6rem;
  font-weight: 600;
}
.fl-15__card-prio--high   { color: var(--danger); }
.fl-15__card-prio--medium { color: var(--accent3); }
.fl-15__card-prio--low    { color: var(--accent4); }

.fl-15__card-avatar {
  width: 18px; height: 18px;
  border-radius: 50%;
  font-size: 0.5rem;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  margin-left: auto;
}
.fl-15__card-avatar--a { background: #7c3aed; }
.fl-15__card-avatar--b { background: #06b6d4; }
.fl-15__card-avatar--c { background: #f59e0b; }

/* ── Progress bar on doing cards ── */
.fl-15__card-progress {
  height: 3px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}
.fl-15__card-progress-fill {
  height: 100%;
  border-radius: 2px;
  background: var(--accent);
  animation: fl-15-pulse 2.5s ease-in-out infinite;
}
@keyframes fl-15-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* ── Add card button ── */
.fl-15__col-add {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  font-size: 0.72rem;
  color: var(--muted);
  cursor: pointer;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  transition: color 0.15s, background 0.15s;
}
.fl-15__col-add:hover {
  color: var(--ink);
  background: var(--col-hover);
}
.fl-15__col-add-icon {
  width: 16px; height: 16px;
  border: 1.5px solid currentColor;
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.9rem;
  line-height: 1;
}

/* ── Add column ── */
.fl-15__col--add {
  flex: 0 0 140px;
  border: 1.5px dashed var(--border);
  background: transparent;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  align-self: stretch;
  min-height: 120px;
}
.fl-15__col--add:hover {
  border-color: var(--accent);
  background: rgba(124,58,237,0.05);
}
.fl-15__col-add-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 500;
}
.fl-15__col-add-label span {
  font-size: 1.2rem;
  line-height: 1;
}

/* ── Drag ghost (visual only) ── */
.fl-15__card.is-dragging {
  opacity: 0.4;
  transform: rotate(2deg) scale(0.97);
}

/* ── Responsive: narrow viewports ── */
@media (max-width: 520px) {
  .fl-15__project { display: none; }
  .fl-15__topbar { padding: 10px 14px; gap: 8px; }
  .fl-15__topbar-actions { gap: 6px; }
  .fl-15__btn--ghost { display: none; }
  .fl-15__avatar { width: 24px; height: 24px; font-size: 0.6rem; }
}
@media (max-width: 380px) {
  .fl-15__avatar { display: none; }
  .fl-15__avatar:last-of-type { display: flex; }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .fl-15__card { transition: none; }
  .fl-15__card-progress-fill { animation: none; }
}
```

**JS:**
```js
(function() {
  const board = document.getElementById('fl-15-board');
  if (!board) return;

  let dragCard = null;
  let dragSource = null;

  board.querySelectorAll('.fl-15__card[draggable]').forEach(card => {
    // Enable drag on all cards
    card.setAttribute('draggable', 'true');
  });
  // Enable drag on ALL cards
  board.querySelectorAll('.fl-15__card').forEach(card => {
    card.setAttribute('draggable', 'true');

    card.addEventListener('dragstart', e => {
      dragCard = card;
      dragSource = card.closest('.fl-15__cards');
      setTimeout(() => card.classList.add('is-dragging'), 0);
      e.dataTransfer.effectAllowed = 'move';
    });
    card.addEventListener('dragend', () => {
      card.classList.remove('is-dragging');
      board.querySelectorAll('.fl-15__cards').forEach(z => z.classList.remove('fl-15__drop-zone'));
      dragCard = null;
    });
  });

  board.querySelectorAll('.fl-15__cards').forEach(zone => {
    zone.addEventListener('dragover', e => {
      e.preventDefault();
      e.dataTransfer.dropEffect = 'move';
    });
    zone.addEventListener('drop', e => {
      e.preventDefault();
      if (dragCard && zone !== dragSource) {
        zone.appendChild(dragCard);
        // Update counts
        updateCounts();
      }
    });
  });

  function updateCounts() {
    board.querySelectorAll('.fl-15__col').forEach(col => {
      const count = col.querySelectorAll('.fl-15__card').length;
      const badge = col.querySelector('.fl-15__col-count');
      if (badge) badge.textContent = count;
    });
  }

  // Add card buttons — append a placeholder card
  board.querySelectorAll('.fl-15__col-add').forEach(btn => {
    btn.addEventListener('click', () => {
      const col = btn.closest('.fl-15__col');
      const cardsZone = col.querySelector('.fl-15__cards');
      if (!cardsZone) return;
      const card = document.createElement('div');
      card.className = 'fl-15__card';
      card.setAttribute('draggable', 'true');
      card.innerHTML = `
        <span class="fl-15__card-tag fl-15__card-tag--fe">Frontend</span>
        <div class="fl-15__card-title" contenteditable="true" style="outline:none;border-bottom:1px dashed #6b6b80">New task…</div>
        <div class="fl-15__card-meta">
          <span class="fl-15__card-id">#FL-NEW</span>
        </div>`;
      cardsZone.appendChild(card);
      card.querySelector('[contenteditable]').focus();
      updateCounts();
      // Re-attach drag events
      card.addEventListener('dragstart', e => {
        dragCard = card;
        dragSource = card.closest('.fl-15__cards');
        setTimeout(() => card.classList.add('is-dragging'), 0);
        e.dataTransfer.effectAllowed = 'move';
      });
      card.addEventListener('dragend', () => {
        card.classList.remove('is-dragging');
        dragCard = null;
      });
    });
  });
})();
```

---
## 32 CSS Floating Action Button Designs

URL: https://codefronts.com/components/css-floating-buttons/
Description: 32 hand-coded CSS floating action button templates covering every FAB pattern production apps actually ship in 2026 — Material Design gradient FAB with ripple, speed dial fan-out menu, morph-expand FAB, scroll-to-top with progress ring, floating chat widget, fan arc menu, squircle FAB, social share FAB, glassmorphism FAB, neon glow, compose+tooltip, draggable FAB, notification bell with badge, floating cart with item counter, magnetic hover FAB, theme toggle, classic plus, pulse ring, morphing FAB, labeled pill, neon cyber, brutalist stamp, loading spinner, drag handle, voice action, premium aurora, quick reply, square modern, and more. All use semantic <button> elements with proper aria-labels, 44×44px minimum tap targets, prefers-reduced-motion support, scoped class names so all 32 coexist on the gallery page, and ship MIT-licensed. 19 are 100% pure CSS — drop into any stack. The 13 JS-enhanced demos use vanilla JavaScript with no library dependencies.
Demo count: 32

### 01. Material Gradient FAB

**Type:** Pure CSS
**Description:** Material Design floating action button with gradient lift, ripple effect, 4 color variants, and 3 sizes including extended pill shape.

**HTML:**
```html
<div class="fb01">
<div class="fb01-stage">
  <div class="fb01-label-block">
    <h1>Material Design<br>Floating Action Button</h1>
    <p>Gradient-lit FAB with specular gloss, deepening shadow lift on hover, and a CSS ripple on press. Three sizes, four color variants, one extended pill.</p>
  </div>

  <div class="fb01-demo-card">
    <!-- size row -->
    <div class="fb01-fab-wrap">
      <button class="fb01-fab fb01-fab--sm" aria-label="Add (small)">
        <div class="fb01-ripple"></div>
        <svg viewBox="0 0 24 24"><path d="M19 11h-6V5h-2v6H5v2h6v6h2v-6h6z"/></svg>
      </button>
      <span>Mini</span>
    </div>

    <div class="fb01-fab-wrap">
      <button class="fb01-fab" aria-label="Add">
        <div class="fb01-ripple"></div>
        <svg viewBox="0 0 24 24"><path d="M19 11h-6V5h-2v6H5v2h6v6h2v-6h6z"/></svg>
      </button>
      <span>Regular</span>
    </div>

    <div class="fb01-fab-wrap">
      <button class="fb01-fab fb01-fab--lg" aria-label="Add (large)">
        <div class="fb01-ripple"></div>
        <svg viewBox="0 0 24 24"><path d="M19 11h-6V5h-2v6H5v2h6v6h2v-6h6z"/></svg>
      </button>
      <span>Large</span>
    </div>

    <div class="fb01-fab-wrap">
      <button class="fb01-fab fb01-fab--extended" aria-label="Compose new">
        <div class="fb01-ripple"></div>
        <svg viewBox="0 0 24 24" style="width:20px;height:20px"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a1 1 0 000-1.41l-2.34-2.34a1 1 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>
        Compose
      </button>
      <span>Extended</span>
    </div>

    <!-- color row -->
    <div class="fb01-fab-wrap">
      <button class="fb01-fab fb01-fab--rose" aria-label="Heart">
        <div class="fb01-ripple"></div>
        <svg viewBox="0 0 24 24"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5A5.5 5.5 0 0112 5.09 5.5 5.5 0 0122 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>
      </button>
      <span>Rose</span>
    </div>

    <div class="fb01-fab-wrap">
      <button class="fb01-fab fb01-fab--emerald" aria-label="Check">
        <div class="fb01-ripple"></div>
        <svg viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z"/></svg>
      </button>
      <span>Emerald</span>
    </div>

    <div class="fb01-fab-wrap">
      <button class="fb01-fab fb01-fab--amber" aria-label="Star">
        <div class="fb01-ripple"></div>
        <svg viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
      </button>
      <span>Amber</span>
    </div>
  </div>

  <dl class="fb01-spec">
    <div class="fb01-spec-item"><dt>Shadow lift</dt><dd>translateY −3px + 4× shadow depth</dd></div>
    <div class="fb01-spec-item"><dt>Gloss source</dt><dd>Radial gradient pseudo-element</dd></div>
    <div class="fb01-spec-item"><dt>Ripple</dt><dd>Pure CSS scale + opacity keyframe</dd></div>
    <div class="fb01-spec-item"><dt>Sizes</dt><dd>40 · 64 · 80px + extended pill</dd></div>
  </dl>
</div>
</div>
```

**CSS:**
```css
.fb01, .fb01 *, .fb01 *::before, .fb01 *::after { box-sizing: border-box; margin: 0; padding: 0; }
.fb01 {
    font-family: 'Inter', sans-serif;
    background: #0f0f13;
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 40px 20px;
    color: #e2e2e8;
  }

  .fb01-stage {
    width: min(680px, 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 64px;
  }

  .fb01-label-block {
    text-align: center;
  }
  .fb01-label-block h1 {
    font-family: 'Syne', sans-serif;
    font-size: clamp(1.8rem, 6vw, 3rem);
    font-weight: 800;
    letter-spacing: -.02em;
    background: linear-gradient(135deg, #a78bfa, #818cf8, #38bdf8);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    line-height: 1.05;
  }
  .fb01-label-block p {
    margin-top: 12px;
    font-size: .95rem;
    color: #71717a;
    max-width: 38ch;
    margin-inline: auto;
    line-height: 1.6;
  }

  /* ── Demo canvas ── */
  .fb01-demo-card {
    width: 100%;
    background: #18181b;
    border: 1px solid #27272a;
    border-radius: 24px;
    padding: 56px 32px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 48px;
    position: relative;
    overflow: hidden;
  }
  .fb01-demo-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 60% 40% at 50% 0%, rgba(129,140,248,.07), transparent);
    pointer-events: none;
  }

  /* ── THE FAB ── */
  .fb01-fab {
    position: relative;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: grid;
    place-items: center;
    outline: none;
    transition:
      transform .22s cubic-bezier(.34,1.56,.64,1),
      box-shadow .22s ease;
    /* gradient background */
    background: linear-gradient(135deg, #818cf8 0%, #a78bfa 50%, #c084fc 100%);
    box-shadow:
      0 4px 16px rgba(129,140,248,.35),
      0 1px 4px rgba(0,0,0,.4),
      inset 0 1px 0 rgba(255,255,255,.18);
  }
  .fb01-fab:hover {
    transform: scale(1.1) translateY(-3px);
    box-shadow:
      0 12px 32px rgba(129,140,248,.55),
      0 4px 8px rgba(0,0,0,.4),
      inset 0 1px 0 rgba(255,255,255,.22);
  }
  .fb01-fab:active {
    transform: scale(.97) translateY(1px);
    box-shadow:
      0 2px 8px rgba(129,140,248,.3),
      0 1px 3px rgba(0,0,0,.4),
      inset 0 1px 0 rgba(255,255,255,.12);
  }
  .fb01-fab::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle at 38% 28%, rgba(255,255,255,.22), transparent 65%);
    pointer-events: none;
  }
  .fb01-fab svg {
    width: 26px;
    height: 26px;
    fill: #fff;
    position: relative;
    z-index: 1;
  }

  /* ── size variants ── */
  .fb01-fab--sm { width: 40px; height: 40px; box-shadow: 0 2px 10px rgba(129,140,248,.3), 0 1px 3px rgba(0,0,0,.4); }
  .fb01-fab--sm svg { width: 18px; height: 18px; }
  .fb01-fab--lg { width: 80px; height: 80px; }
  .fb01-fab--lg svg { width: 34px; height: 34px; }
  .fb01-fab--extended {
    width: auto;
    height: 56px;
    border-radius: 28px;
    padding: 0 24px;
    gap: 10px;
    display: flex;
    align-items: center;
    font-family: 'Inter', sans-serif;
    font-size: .9rem;
    font-weight: 600;
    letter-spacing: .02em;
    color: #fff;
  }
  .fb01-fab--extended::after { border-radius: 28px; }

  /* alternate color variants */
  .fb01-fab--rose {
    background: linear-gradient(135deg, #fb7185, #f43f5e);
    box-shadow: 0 4px 16px rgba(244,63,94,.4), 0 1px 4px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.18);
  }
  .fb01-fab--rose:hover { box-shadow: 0 12px 32px rgba(244,63,94,.55), 0 4px 8px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.22); }

  .fb01-fab--emerald {
    background: linear-gradient(135deg, #34d399, #10b981);
    box-shadow: 0 4px 16px rgba(16,185,129,.4), 0 1px 4px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.18);
  }
  .fb01-fab--emerald:hover { box-shadow: 0 12px 32px rgba(16,185,129,.55), 0 4px 8px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.22); }

  .fb01-fab--amber {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    box-shadow: 0 4px 16px rgba(245,158,11,.4), 0 1px 4px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.18);
  }
  .fb01-fab--amber:hover { box-shadow: 0 12px 32px rgba(245,158,11,.55), 0 4px 8px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.22); }

  /* label under each button */
  .fb01-fab-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }
  .fb01-fab-wrap span {
    font-size: .72rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #52525b;
    font-weight: 500;
  }

  /* ── ripple effect (CSS only) ── */
  .fb01-fab .fb01-ripple {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: rgba(255,255,255,.2);
    transform: scale(0);
    opacity: 0;
  }
  .fb01-fab:active .fb01-ripple {
    animation: fb01-ripple-burst .4s ease-out forwards;
  }
  @keyframes fb01-ripple-burst {
    to { transform: scale(2.2); opacity: 0; }
  }

  /* ── spec callout ── */
  .fb01-spec {
    width: 100%;
    background: #0f0f13;
    border: 1px solid #27272a;
    border-radius: 16px;
    padding: 20px 24px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
  }
  .fb01-spec-item { display: flex; flex-direction: column; gap: 4px; }
  .fb01-spec-item dt { font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: #52525b; }
  .fb01-spec-item dd { font-size: .88rem; font-weight: 500; color: #a1a1aa; }

  @media (prefers-reduced-motion: reduce) {
    .fb01-fab { transition: none; }
    .fb01-fab:active .fb01-ripple { animation: none; }
  }
```

### 02. Speed Dial FAB Menu

**Type:** Pure CSS
**Description:** CSS-only speed dial radial FAB menu using checkbox hack with vertical and horizontal expansion variants.

**HTML:**
```html
<div class="fb02">
<h1>Speed Dial FAB Menu</h1>
<p class="fb02-sub">Pure CSS radial floating action button menu — checkbox hack, zero JavaScript, staggered reveal animation.</p>

<div class="fb02-demos">

  <!-- Demo 1: Vertical speed dial -->
  <div class="fb02-demo-well">
    <span class="fb02-demo-well-label">Vertical · checkbox hack</span>

    <div class="fb02-speed-dial">
      <!-- scrim -->
      <label class="fb02-sd-scrim" for="fb02-sd1"></label>

      <input type="checkbox" class="fb02-sd-check" id="fb02-sd1">

      <div class="fb02-sd-actions">
        <div class="fb02-sd-item">
          <span class="fb02-sd-item-lbl">Share link</span>
          <button class="fb02-sd-btn fb02-sd-btn--share" aria-label="Share">
            <svg viewBox="0 0 24 24"><path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11A3 3 0 0021 5a3 3 0 00-3-3 3 3 0 00-3 3c0 .24.04.47.09.7L8.04 9.81A3 3 0 005 9a3 3 0 00-3 3 3 3 0 003 3 3 3 0 003.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92S19.61 16.08 18 16.08z"/></svg>
          </button>
        </div>
        <div class="fb02-sd-item">
          <span class="fb02-sd-item-lbl">Take photo</span>
          <button class="fb02-sd-btn fb02-sd-btn--camera" aria-label="Camera">
            <svg viewBox="0 0 24 24"><path d="M12 15.2A3.2 3.2 0 018.8 12 3.2 3.2 0 0112 8.8a3.2 3.2 0 013.2 3.2A3.2 3.2 0 0112 15.2m0-8.2a5 5 0 00-5 5 5 5 0 005 5 5 5 0 005-5 5 5 0 00-5-5m6.5-8H5.5A2.5 2.5 0 003 1.5V18a2.5 2.5 0 002.5 2.5h13A2.5 2.5 0 0021 18V1.5A2.5 2.5 0 0018.5-1zM9 3l.83-1H14.2L15 3H9z"/></svg>
          </button>
        </div>
        <div class="fb02-sd-item">
          <span class="fb02-sd-item-lbl">Upload photo</span>
          <button class="fb02-sd-btn fb02-sd-btn--photo" aria-label="Photo">
            <svg viewBox="0 0 24 24"><path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/></svg>
          </button>
        </div>
        <div class="fb02-sd-item">
          <span class="fb02-sd-item-lbl">New document</span>
          <button class="fb02-sd-btn fb02-sd-btn--doc" aria-label="Document">
            <svg viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8l-6-6zm4 18H6V4h7v5h5v11z"/></svg>
          </button>
        </div>
      </div>

      <label class="fb02-sd-trigger" for="fb02-sd1" aria-label="Toggle actions">
        <span class="fb02-icon-wrap">
          <span class="fb02-icon-bar"></span>
        </span>
      </label>
    </div>
  </div>

  <!-- Demo 2: Horizontal speed dial -->
  <div class="fb02-demo-well">
    <span class="fb02-demo-well-label">Horizontal · slide-in</span>

    <div class="fb02-speed-dial fb02-speed-dial--h">
      <input type="checkbox" class="fb02-sd-check fb02-sd-check--h" id="fb02-sd2">

      <div class="fb02-sd-actions fb02-sd-actions--h">
        <div class="fb02-sd-item">
          <button class="fb02-sd-btn fb02-sd-btn--share" aria-label="Share">
            <svg viewBox="0 0 24 24"><path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11A3 3 0 0021 5a3 3 0 00-3-3 3 3 0 00-3 3c0 .24.04.47.09.7L8.04 9.81A3 3 0 005 9a3 3 0 00-3 3 3 3 0 003 3 3 3 0 003.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92S19.61 16.08 18 16.08z"/></svg>
          </button>
          <span class="fb02-sd-item-lbl">Share</span>
        </div>
        <div class="fb02-sd-item">
          <button class="fb02-sd-btn fb02-sd-btn--camera" aria-label="Camera">
            <svg viewBox="0 0 24 24"><path d="M12 15.2A3.2 3.2 0 018.8 12 3.2 3.2 0 0112 8.8a3.2 3.2 0 013.2 3.2A3.2 3.2 0 0112 15.2m0-8.2a5 5 0 00-5 5 5 5 0 005 5 5 5 0 005-5 5 5 0 00-5-5m6.5-8H5.5A2.5 2.5 0 003 1.5V18a2.5 2.5 0 002.5 2.5h13A2.5 2.5 0 0021 18V1.5A2.5 2.5 0 0018.5-1zM9 3l.83-1H14.2L15 3H9z"/></svg>
          </button>
          <span class="fb02-sd-item-lbl">Camera</span>
        </div>
        <div class="fb02-sd-item">
          <button class="fb02-sd-btn fb02-sd-btn--doc" aria-label="Document">
            <svg viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8l-6-6zm4 18H6V4h7v5h5v11z"/></svg>
          </button>
          <span class="fb02-sd-item-lbl">Doc</span>
        </div>
      </div>

      <label class="fb02-sd-trigger fb02-sd-trigger--h" for="fb02-sd2" aria-label="Toggle actions">
        <svg viewBox="0 0 24 24"><path d="M19 11h-6V5h-2v6H5v2h6v6h2v-6h6z"/></svg>
      </label>
    </div>
  </div>

</div>
</div>
```

**CSS:**
```css
.fb02, .fb02 *, .fb02 *::before, .fb02 *::after { box-sizing: border-box; margin: 0; padding: 0; }
.fb02 {
    font-family: 'Space Grotesk', sans-serif;
    background: #09090b;
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 40px 20px;
    color: #e4e4e7;
  }

  h1 {
    font-size: clamp(1.6rem, 5vw, 2.6rem);
    font-weight: 700;
    text-align: center;
    letter-spacing: -.02em;
    color: #fafafa;
    margin-bottom: 8px;
  }
  p.fb02-sub {
    text-align: center;
    color: #52525b;
    font-size: .9rem;
    max-width: 40ch;
    margin: 0 auto 48px;
    line-height: 1.6;
  }

  /* ── page layout ── */
  .fb02-demos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
    width: min(900px, 100%);
  }

  .fb02-demo-well {
    background: #141417;
    border: 1px solid #27272a;
    border-radius: 20px;
    height: 380px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 28px;
  }
  .fb02-demo-well-label {
    position: absolute;
    top: 16px;
    left: 20px;
    font-size: .72rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #3f3f46;
    font-weight: 600;
  }

  /* ── SPEED DIAL (vertical, checkbox hack) ── */
  .fb02-speed-dial {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
  }

  /* hidden checkbox */
  .fb02-sd-check { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }

  /* action items — hidden by default */
  .fb02-sd-actions {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
    pointer-events: none;
  }

  .fb02-sd-item {
    display: flex;
    align-items: center;
    gap: 10px;
    opacity: 0;
    transform: translateY(16px) scale(.85);
    transition: opacity .22s ease, transform .22s cubic-bezier(.34,1.56,.64,1);
    pointer-events: none;
    flex-direction: row-reverse;
  }

  /* labels */
  .fb02-sd-item-lbl {
    font-size: .78rem;
    font-weight: 600;
    color: #a1a1aa;
    background: #1f1f23;
    border: 1px solid #3f3f46;
    border-radius: 6px;
    padding: 4px 10px;
    white-space: nowrap;
  }

  /* mini sub-button */
  .fb02-sd-btn {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: none;
    display: grid;
    place-items: center;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0,0,0,.45);
    transition: transform .15s ease, box-shadow .15s ease;
  }
  .fb02-sd-btn:hover { transform: scale(1.1); }
  .fb02-sd-btn svg { width: 20px; height: 20px; fill: #fff; }

  .fb02-sd-btn--share  { background: linear-gradient(135deg, #6366f1, #8b5cf6); }
  .fb02-sd-btn--camera { background: linear-gradient(135deg, #06b6d4, #0ea5e9); }
  .fb02-sd-btn--photo  { background: linear-gradient(135deg, #f43f5e, #e11d48); }
  .fb02-sd-btn--doc    { background: linear-gradient(135deg, #f59e0b, #d97706); }

  /* staggered reveal when checked */
  .fb02-sd-check:checked ~ .fb02-sd-actions { pointer-events: auto; }
  .fb02-sd-check:checked ~ .fb02-sd-actions .fb02-sd-item:nth-child(1) { opacity: 1; transform: none; transition-delay: .00s; pointer-events: auto; }
  .fb02-sd-check:checked ~ .fb02-sd-actions .fb02-sd-item:nth-child(2) { opacity: 1; transform: none; transition-delay: .06s; pointer-events: auto; }
  .fb02-sd-check:checked ~ .fb02-sd-actions .fb02-sd-item:nth-child(3) { opacity: 1; transform: none; transition-delay: .12s; pointer-events: auto; }
  .fb02-sd-check:checked ~ .fb02-sd-actions .fb02-sd-item:nth-child(4) { opacity: 1; transform: none; transition-delay: .18s; pointer-events: auto; }

  /* main trigger */
  .fb02-sd-trigger {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    border: none;
    cursor: pointer;
    display: grid;
    place-items: center;
    box-shadow: 0 6px 20px rgba(99,102,241,.45), inset 0 1px 0 rgba(255,255,255,.18);
    transition: transform .28s cubic-bezier(.34,1.56,.64,1), box-shadow .22s ease;
    position: relative;
  }
  .fb02-sd-trigger:hover { box-shadow: 0 10px 28px rgba(99,102,241,.6), inset 0 1px 0 rgba(255,255,255,.22); }

  /* plus → × morph */
  .fb02-sd-trigger .fb02-icon-wrap {
    position: relative;
    width: 24px;
    height: 24px;
  }
  .fb02-sd-trigger .fb02-icon-wrap::before,
  .fb02-sd-trigger .fb02-icon-wrap::after {
    content: '';
    position: absolute;
    inset: 50% 0;
    height: 2.5px;
    background: #fff;
    border-radius: 2px;
    margin-top: -1.25px;
    transition: transform .28s cubic-bezier(.34,1.56,.64,1);
  }
  .fb02-sd-trigger .fb02-icon-wrap::before { transform: rotate(0deg); }
  .fb02-sd-trigger .fb02-icon-wrap::after  { transform: rotate(90deg); }

  /* vertical bar of the plus */
  .fb02-sd-trigger .fb02-icon-bar {
    position: absolute;
    top: 0; bottom: 0;
    left: 50%;
    width: 2.5px;
    background: #fff;
    border-radius: 2px;
    margin-left: -1.25px;
    transition: transform .28s cubic-bezier(.34,1.56,.64,1), opacity .2s;
  }

  .fb02-sd-check:checked ~ .fb02-sd-trigger .fb02-icon-wrap::before { transform: rotate(45deg); }
  .fb02-sd-check:checked ~ .fb02-sd-trigger .fb02-icon-wrap::after  { transform: rotate(-45deg); }
  .fb02-sd-check:checked ~ .fb02-sd-trigger .fb02-icon-bar { opacity: 0; }
  .fb02-sd-check:checked ~ .fb02-sd-trigger { transform: rotate(45deg); box-shadow: 0 8px 24px rgba(99,102,241,.5), inset 0 1px 0 rgba(255,255,255,.18); }

  /* overlay scrim (optional) */
  .fb02-sd-scrim {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0);
    pointer-events: none;
    transition: background .3s;
    border-radius: 20px;
  }
  .fb02-sd-check:checked ~ .fb02-sd-scrim { background: rgba(0,0,0,.4); pointer-events: auto; }

  /* ── HORIZONTAL speed dial ── */
  .fb02-speed-dial--h {
    flex-direction: row;
    align-items: center;
  }
  .fb02-speed-dial--h .fb02-sd-actions {
    flex-direction: row;
    margin-bottom: 0;
    margin-right: 14px;
  }
  .fb02-speed-dial--h .fb02-sd-item {
    flex-direction: column;
    gap: 8px;
    transform: translateX(20px) scale(.85);
  }
  .fb02-sd-check--h:checked ~ .fb02-sd-actions--h { pointer-events: auto; }
  .fb02-sd-check--h:checked ~ .fb02-sd-actions--h .fb02-sd-item:nth-child(1) { opacity: 1; transform: none; transition-delay: .00s; pointer-events: auto; }
  .fb02-sd-check--h:checked ~ .fb02-sd-actions--h .fb02-sd-item:nth-child(2) { opacity: 1; transform: none; transition-delay: .07s; pointer-events: auto; }
  .fb02-sd-check--h:checked ~ .fb02-sd-actions--h .fb02-sd-item:nth-child(3) { opacity: 1; transform: none; transition-delay: .14s; pointer-events: auto; }
  .fb02-sd-check--h:checked ~ .fb02-sd-trigger--h { transform: rotate(45deg); }

  .fb02-sd-trigger--h {
    width: 60px; height: 60px; border-radius: 50%;
    background: linear-gradient(135deg, #f43f5e, #fb7185);
    border: none; cursor: pointer; display: grid; place-items: center;
    box-shadow: 0 6px 20px rgba(244,63,94,.4), inset 0 1px 0 rgba(255,255,255,.18);
    transition: transform .28s cubic-bezier(.34,1.56,.64,1);
    flex-shrink: 0;
  }
  .fb02-sd-trigger--h svg { width: 26px; height: 26px; fill: #fff; transition: transform .28s cubic-bezier(.34,1.56,.64,1); }

  @media (prefers-reduced-motion: reduce) {
    .fb02-sd-item, .fb02-sd-trigger, .fb02-sd-trigger--h { transition: none; }
  }
```

### 03. Morph Expand FAB

**Type:** Pure CSS
**Description:** Morphing FAB that expands into an extended pill button on hover, with 4 direction variants and smooth shape transitions.

**HTML:**
```html
<div class="fb03">
<h1>Morphing Floating Action Button</h1>
<p class="fb03-sub">FAB expands to an extended pill on hover — pure CSS width/height transition, no JavaScript. Four morph directions and shapes.</p>

<div class="fb03-grid">

  <div class="fb03-well">
    <span class="fb03-well-tag">Horizontal expand</span>
    <button class="fb03-morph-fab" aria-label="Compose new message">
      <svg class="fb03-m-icon" viewBox="0 0 24 24"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a1 1 0 000-1.41l-2.34-2.34a1 1 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>
      <span class="fb03-m-label">Compose</span>
    </button>
  </div>

  <div class="fb03-well">
    <span class="fb03-well-tag">Green slide reveal</span>
    <button class="fb03-morph-fab fb03-morph-fab--slide" aria-label="Add new item">
      <svg class="fb03-m-icon" viewBox="0 0 24 24"><path d="M19 11h-6V5h-2v6H5v2h6v6h2v-6h6z"/></svg>
      <span class="fb03-m-label">Add item</span>
    </button>
  </div>

  <div class="fb03-well">
    <span class="fb03-well-tag">Square → pill morph</span>
    <button class="fb03-morph-fab fb03-morph-fab--sq" aria-label="Upload files">
      <svg class="fb03-m-icon" viewBox="0 0 24 24"><path d="M9 16h6v-6h4l-7-7-7 7h4v6zm-4 2h14v2H5v-2z"/></svg>
      <span class="fb03-m-label">Upload files</span>
    </button>
  </div>

  <div class="fb03-well">
    <span class="fb03-well-tag">Vertical expand</span>
    <div class="fb03-corner-wrap">
      <button class="fb03-morph-fab fb03-morph-fab--corner" aria-label="Quick actions">
        <svg class="fb03-m-icon" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"/></svg>
        <span class="fb03-m-label">Quick</span>
        <span class="fb03-m-label">Share</span>
        <span class="fb03-m-label">Save</span>
      </button>
    </div>
  </div>

</div>
</div>
```

**CSS:**
```css
.fb03, .fb03 *, .fb03 *::before, .fb03 *::after { box-sizing: border-box; margin: 0; padding: 0; }
.fb03 {
    font-family: 'Inter', sans-serif;
    background: #fafaf9;
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 40px 20px;
    color: #1c1917;
  }

  h1 {
    font-size: clamp(1.6rem, 5vw, 2.4rem);
    font-weight: 700;
    text-align: center;
    letter-spacing: -.025em;
    color: #1c1917;
    margin-bottom: 8px;
  }
  p.fb03-sub {
    text-align: center;
    color: #78716c;
    font-size: .9rem;
    max-width: 42ch;
    margin: 0 auto 52px;
    line-height: 1.6;
  }

  .fb03-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    width: min(860px, 100%);
  }

  .fb03-well {
    background: #fff;
    border: 1px solid #e7e5e4;
    border-radius: 20px;
    height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
  }
  .fb03-well-tag {
    position: absolute;
    top: 14px;
    left: 16px;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #a8a29e;
  }

  /* ── MORPH FAB (pure CSS hover width expand) ── */
  .fb03-morph-fab {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    height: 60px;
    width: 60px;
    border-radius: 30px;
    border: none;
    cursor: pointer;
    overflow: hidden;
    /* gradient */
    background: linear-gradient(135deg, #0ea5e9, #6366f1);
    box-shadow: 0 6px 20px rgba(99,102,241,.35), inset 0 1px 0 rgba(255,255,255,.2);
    transition:
      width .38s cubic-bezier(.4,0,.2,1),
      border-radius .38s cubic-bezier(.4,0,.2,1),
      box-shadow .22s ease,
      gap .38s ease;
    white-space: nowrap;
  }
  .fb03-morph-fab:hover {
    width: 180px;
    border-radius: 16px;
    gap: 10px;
    box-shadow: 0 8px 28px rgba(99,102,241,.45), inset 0 1px 0 rgba(255,255,255,.2);
  }

  .fb03-morph-fab .fb03-m-icon {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    fill: #fff;
    transition: transform .38s cubic-bezier(.4,0,.2,1);
  }
  .fb03-morph-fab:hover .fb03-m-icon { transform: translateX(-2px); }

  .fb03-morph-fab .fb03-m-label {
    font-size: .9rem;
    font-weight: 600;
    color: #fff;
    letter-spacing: .02em;
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-width .3s ease .05s, opacity .25s ease .08s;
  }
  .fb03-morph-fab:hover .fb03-m-label { max-width: 120px; opacity: 1; }

  /* ── variant: pill that slides text in from right ── */
  .fb03-morph-fab--slide {
    background: linear-gradient(135deg, #10b981, #059669);
    box-shadow: 0 6px 20px rgba(16,185,129,.35), inset 0 1px 0 rgba(255,255,255,.2);
  }
  .fb03-morph-fab--slide:hover {
    box-shadow: 0 8px 28px rgba(16,185,129,.45), inset 0 1px 0 rgba(255,255,255,.2);
  }

  /* ── variant: square → pill morph ── */
  .fb03-morph-fab--sq {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: linear-gradient(135deg, #f59e0b, #ef4444);
    box-shadow: 0 6px 20px rgba(239,68,68,.32), inset 0 1px 0 rgba(255,255,255,.2);
    transition:
      width .38s cubic-bezier(.4,0,.2,1),
      height .38s cubic-bezier(.4,0,.2,1),
      border-radius .38s cubic-bezier(.4,0,.2,1),
      box-shadow .22s ease,
      gap .38s ease;
  }
  .fb03-morph-fab--sq:hover {
    width: 200px;
    height: 52px;
    border-radius: 26px;
    gap: 10px;
    box-shadow: 0 8px 28px rgba(239,68,68,.42), inset 0 1px 0 rgba(255,255,255,.2);
  }

  /* ── variant: bottom-right corner FAB that expands ── */
  .fb03-corner-wrap {
    position: absolute;
    bottom: 20px;
    right: 20px;
  }
  .fb03-morph-fab--corner {
    background: linear-gradient(135deg, #8b5cf6, #d946ef);
    box-shadow: 0 6px 20px rgba(139,92,246,.4), inset 0 1px 0 rgba(255,255,255,.2);
    flex-direction: column;
    height: 60px;
    width: 60px;
    border-radius: 30px;
    transition:
      height .38s cubic-bezier(.4,0,.2,1),
      border-radius .38s cubic-bezier(.4,0,.2,1),
      box-shadow .22s ease,
      gap .38s ease;
  }
  .fb03-morph-fab--corner:hover {
    height: 160px;
    border-radius: 20px;
    gap: 8px;
    box-shadow: 0 8px 28px rgba(139,92,246,.5), inset 0 1px 0 rgba(255,255,255,.2);
    width: 60px;
  }
  .fb03-morph-fab--corner .fb03-m-label {
    max-width: none;
    max-height: 0;
    opacity: 0;
    font-size: .75rem;
    overflow: hidden;
    transition: max-height .3s ease .05s, opacity .25s ease .08s;
    writing-mode: horizontal-tb;
    white-space: nowrap;
  }
  .fb03-morph-fab--corner:hover .fb03-m-label { max-height: 60px; opacity: 1; }
  .fb03-morph-fab--corner:hover .fb03-m-icon { transform: none; }

  @media (prefers-reduced-motion: reduce) {
    .fb03-morph-fab, .fb03-morph-fab .fb03-m-label, .fb03-morph-fab .fb03-m-icon { transition: none; }
  }
```

### 04. Scroll-to-Top Progress Ring

**Type:** CSS + JS
**Description:** Scroll-to-top floating button with SVG circular progress ring that tracks scroll depth and fades in via IntersectionObserver.

**HTML:**
```html
<div class="fb04">
<!-- Scroll to top buttons (fixed) -->
<button id="fb04-stt-btn" aria-label="Back to top">
  <!-- progress ring -->
  <svg class="fb04-ring" viewBox="0 0 68 68" aria-hidden="true">
    <circle class="fb04-ring-track" cx="34" cy="34" r="30"/>
    <circle class="fb04-ring-progress" id="fb04-ring-prog" cx="34" cy="34" r="30"/>
  </svg>

  <svg class="fb04-arrow-up" viewBox="0 0 24 24" aria-hidden="true">
    <path d="M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z"/>
  </svg>

  <span class="fb04-pct-label" id="fb04-stt-pct">0%</span>
</button>

<button class="fb04-mini-stt" id="fb04-mini-stt" aria-label="Back to top">
  <svg viewBox="0 0 24 24"><path d="M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z"/></svg>
</button>

<!-- Page content -->
<section class="fb04-hero" id="fb04-top">
  <h1>Scroll down to<br>see the FAB appear</h1>
  <p>A scroll-to-top floating button with an SVG progress ring that tracks your reading position — pure CSS styling, tiny vanilla JS for the scroll math.</p>
  <div class="fb04-scroll-hint">Scroll</div>
</section>

<div class="fb04-content-section">
  <h2>The anatomy of a great scroll-to-top button</h2>
  <p>A scroll-to-top FAB earns its screen space by being invisible until the user has scrolled far enough that returning to the top would be a real chore — typically after 20–30% of page height.</p>
  <p>The progress ring wraps the button and fills as the user scrolls, giving a peripheral readout of reading progress without cluttering the layout with a separate indicator bar.</p>
  <div class="fb04-divider"></div>

  <h2>Design principles at work</h2>
  <p>The button enters with a spring scale-in so it feels physical, not merely functional. On hover it lifts slightly and reveals a percentage tooltip confirming the ring reading. On click, smooth scrolling returns the user to the top.</p>
  <p>Keep the button at least 60px from the edge on mobile to clear thumb-friendly zones. The mini variant in the bottom-left shows a minimal borderless square treatment — useful when the bottom-right is occupied by a chat widget or another FAB.</p>
  <div class="fb04-divider"></div>

  <h2>Implementation notes</h2>
  <p>The SVG ring uses <code>stroke-dasharray</code> and <code>stroke-dashoffset</code> to trace progress. The circumference of the circle (2πr = 2π×30 ≈ 188.5) defines <code>dasharray</code>; the JS maps scroll percentage to dashoffset between 188.5 and 0.</p>
  <p>Visibility is toggled by adding a <code>.visible</code> class via an IntersectionObserver on the hero section, avoiding scroll-event overhead for the show/hide trigger.</p>
  <div class="fb04-divider"></div>

  <h2>Accessibility</h2>
  <p>The button carries an <code>aria-label="Back to top"</code> and an <code>id="fb04-top"</code> anchor on the hero. It is focusable, keyboard-activatable, and hides from the tab order when not visible via <code>pointer-events: none</code> combined with CSS opacity.</p>
  <p>The ring SVG is marked <code>aria-hidden</code> so screen readers skip the decorative progress graphic. A <code>prefers-reduced-motion</code> query degrades the entrance animation to a simple fade.</p>
  <div class="fb04-divider"></div>

  <h2>The compact square variant</h2>
  <p>On the left side you'll see a minimal 44×44px borderless square FAB — same function, half the footprint. It suits content-dense dashboards where a 60px circular FAB with ring would feel heavy. No progress ring, just the arrow — simplicity as a deliberate choice.</p>
</div>
</div>
```

**CSS:**
```css
.fb04, .fb04 *, .fb04 *::before, .fb04 *::after { box-sizing: border-box; margin: 0; padding: 0; }
.fb04 { scroll-behavior: smooth; }

  .fb04 {
    font-family: 'Inter', sans-serif;
    background: #f8f8f5;
    color: #2d2d2d;
    line-height: 1.7;
  }

  /* ── Long scrollable page content ── */
  .fb04-hero {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 60px 24px;
    background: linear-gradient(160deg, #1e1b4b 0%, #312e81 50%, #4f46e5 100%);
    color: #fff;
  }
  .fb04-hero h1 {
    font-family: 'Instrument Serif', serif;
    font-size: clamp(2.4rem, 8vw, 5rem);
    line-height: 1.1;
    margin-bottom: 20px;
    font-style: italic;
  }
  .fb04-hero p {
    font-size: clamp(1rem, 2.5vw, 1.2rem);
    color: rgba(255,255,255,.7);
    max-width: 46ch;
  }
  .fb04-scroll-hint {
    margin-top: 48px;
    font-size: .82rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255,255,255,.45);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    animation: fb04-hint-bob 2s ease-in-out infinite;
  }
  .fb04-scroll-hint::after {
    content: '';
    width: 1.5px;
    height: 40px;
    background: rgba(255,255,255,.3);
    border-radius: 1px;
  }
  @keyframes fb04-hint-bob { 50% { transform: translateY(6px); } }

  .fb04-content-section {
    max-width: 720px;
    margin: 0 auto;
    padding: 80px 24px;
  }
  .fb04-content-section h2 {
    font-family: 'Instrument Serif', serif;
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    margin-bottom: 20px;
    color: #1e1b4b;
    font-style: italic;
  }
  .fb04-content-section p { color: #555; margin-bottom: 18px; }
  .fb04-divider { height: 1px; background: #e5e5e0; margin: 60px 0; }

  /* ── SCROLL TO TOP FAB ── */
  #fb04-stt-btn {
    position: fixed;
    bottom: 32px;
    right: 32px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    background: #1e1b4b;
    color: #fff;
    display: grid;
    place-items: center;
    box-shadow: 0 6px 24px rgba(30,27,75,.4);
    opacity: 0;
    transform: translateY(20px) scale(.85);
    transition: opacity .3s ease, transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .2s ease;
    z-index: 1000;
    /* prevent interaction when hidden */
    pointer-events: none;
  }
  #fb04-stt-btn.fb04-visible {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
  #fb04-stt-btn:hover {
    box-shadow: 0 10px 32px rgba(30,27,75,.55);
    background: #312e81;
  }
  #fb04-stt-btn:active { transform: scale(.95); }

  /* SVG progress ring */
  #fb04-stt-btn svg.fb04-ring {
    position: absolute;
    inset: -4px;
    width: calc(100% + 8px);
    height: calc(100% + 8px);
    transform: rotate(-90deg);
    pointer-events: none;
  }
  #fb04-stt-btn .fb04-ring-track {
    fill: none;
    stroke: rgba(255,255,255,.12);
    stroke-width: 3;
  }
  #fb04-stt-btn .fb04-ring-progress {
    fill: none;
    stroke: #818cf8;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
    transition: stroke-dashoffset .1s linear;
  }

  /* arrow icon */
  #fb04-stt-btn .fb04-arrow-up {
    width: 22px;
    height: 22px;
    fill: #fff;
    position: relative;
    z-index: 1;
    transition: transform .2s ease;
  }
  #fb04-stt-btn:hover .fb04-arrow-up { transform: translateY(-2px); }

  /* percentage label (shows on hover) */
  #fb04-stt-btn .fb04-pct-label {
    position: absolute;
    top: -38px;
    left: 50%;
    transform: translateX(-50%);
    background: #1e1b4b;
    color: #a5b4fc;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .06em;
    padding: 4px 8px;
    border-radius: 6px;
    white-space: nowrap;
    opacity: 0;
    transition: opacity .2s;
    pointer-events: none;
  }
  #fb04-stt-btn:hover .fb04-pct-label { opacity: 1; }

  /* ── alternate compact variant shown in corner ── */
  .fb04-mini-stt {
    position: fixed;
    bottom: 32px;
    left: 32px;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: 1.5px solid #e5e7eb;
    background: #fff;
    cursor: pointer;
    display: grid;
    place-items: center;
    box-shadow: 0 2px 12px rgba(0,0,0,.1);
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .3s ease, transform .3s ease, box-shadow .2s ease;
    pointer-events: none;
    z-index: 999;
  }
  .fb04-mini-stt.fb04-visible { opacity: 1; transform: none; pointer-events: auto; }
  .fb04-mini-stt:hover { box-shadow: 0 6px 20px rgba(0,0,0,.14); }
  .fb04-mini-stt svg { width: 18px; height: 18px; fill: #6366f1; }
```

**JS:**
```js
const btn = document.getElementById('fb04-stt-btn');
  const mini = document.getElementById('fb04-mini-stt');
  const prog = document.getElementById('fb04-ring-prog');
  const pctLabel = document.getElementById('fb04-stt-pct');
  const CIRCUMFERENCE = 2 * Math.PI * 30; // ≈ 188.5

  function update() {
    const scrollTop = window.scrollY;
    const maxScroll = document.documentElement.scrollHeight - window.innerHeight;
    const pct = maxScroll > 0 ? scrollTop / maxScroll : 0;
    const offset = CIRCUMFERENCE * (1 - pct);

    prog.style.strokeDasharray = CIRCUMFERENCE;
    prog.style.strokeDashoffset = offset;
    pctLabel.textContent = Math.round(pct * 100) + '%';

    const show = scrollTop > window.innerHeight * 0.3;
    btn.classList.toggle('fb04-visible', show);
    mini.classList.toggle('fb04-visible', show);
  }

  window.addEventListener('scroll', update, { passive: true });
  update();

  btn.addEventListener('click', () => window.scrollTo({ top: 0, behavior: 'smooth' }));
  mini.addEventListener('click', () => window.scrollTo({ top: 0, behavior: 'smooth' }));
```

### 05. Floating Chat Widget

**Type:** CSS + JS
**Description:** Floating chat widget FAB for WhatsApp and support chat with animated panel, notification badge, and smooth open/close transitions.

**HTML:**
```html
<div class="fb05">
<div class="fb05-page-content">
  <h1>Floating Chat<br>Support Button</h1>
  <p>Click the green WhatsApp-style button in the bottom-right (or the indigo support button bottom-left) to open the live chat panel. Pure CSS panel animation, minimal JS for toggle state.</p>
  <span class="fb05-note">Bottom-right = WhatsApp · Bottom-left = Support chat</span>
</div>

<!-- WhatsApp-style float -->
<div class="fb05-chat-fab" id="fb05-chat-wa">
  <div class="fb05-chat-panel" id="fb05-panel-wa">
    <div class="fb05-cp-header">
      <div class="fb05-agent">
        <div class="fb05-cp-avatar">🧑</div>
        <div class="fb05-cp-info">
          <h3>Mia — Support</h3>
          <span>● Online now</span>
        </div>
      </div>
    </div>
    <div class="fb05-cp-body">
      <div class="fb05-cp-bubble">
        Hi there! 👋 How can I help you today?
      </div>
      <div class="fb05-cp-time">Just now</div>
    </div>
    <div class="fb05-cp-footer">
      <input class="fb05-cp-input" type="text" placeholder="Type a message…">
      <button class="fb05-cp-send" aria-label="Send">
        <svg viewBox="0 0 24 24"><path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/></svg>
      </button>
    </div>
  </div>

  <button class="fb05-chat-trigger" id="fb05-trig-wa" aria-label="Open chat" aria-expanded="false">
    <svg class="fb05-icon-chat" viewBox="0 0 24 24" width="32" height="32" fill="white">
      <path d="M20 2H4a2 2 0 00-2 2v18l4-4h14a2 2 0 002-2V4a2 2 0 00-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z"/>
    </svg>
    <svg class="fb05-icon-close" viewBox="0 0 24 24" width="28" height="28" fill="white">
      <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
    </svg>
    <span class="fb05-chat-badge">1</span>
  </button>
</div>

<!-- Support / indigo float -->
<div class="fb05-chat-fab fb05-chat-fab--indigo" id="fb05-chat-ind">
  <div class="fb05-chat-panel" id="fb05-panel-ind">
    <div class="fb05-cp-header" style="background: linear-gradient(135deg,#6366f1,#4338ca)">
      <div class="fb05-agent">
        <div class="fb05-cp-avatar">🤖</div>
        <div class="fb05-cp-info">
          <h3>AI Assistant</h3>
          <span>Replies instantly</span>
        </div>
      </div>
    </div>
    <div class="fb05-cp-body" style="background:#f0f0ff">
      <div class="fb05-cp-bubble">
        Hello! Ask me anything about our products.
      </div>
      <div class="fb05-cp-time">Just now</div>
    </div>
    <div class="fb05-cp-footer">
      <input class="fb05-cp-input" type="text" placeholder="Ask a question…">
      <button class="fb05-cp-send" aria-label="Send" style="background:#6366f1">
        <svg viewBox="0 0 24 24"><path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/></svg>
      </button>
    </div>
  </div>
  <button class="fb05-chat-trigger fb05-chat-trigger--ind" id="fb05-trig-ind" aria-label="Open AI chat" aria-expanded="false">
    <svg class="fb05-icon-chat" viewBox="0 0 24 24" width="30" height="30" fill="white">
      <path d="M12 3C6.48 3 2 6.92 2 11.7c0 2.65 1.35 5.02 3.5 6.67V21l3.08-1.7A11 11 0 0012 19.4c5.52 0 10-3.92 10-8.7S17.52 3 12 3zm1 11.5h-2v-2h2v2zm0-4h-2V6.5h2V10.5z"/>
    </svg>
    <svg class="fb05-icon-close" viewBox="0 0 24 24" width="28" height="28" fill="white">
      <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
    </svg>
  </button>
</div>
</div>
```

**CSS:**
```css
.fb05, .fb05 *, .fb05 *::before, .fb05 *::after { box-sizing: border-box; margin: 0; padding: 0; }
.fb05 {
    font-family: 'Inter', sans-serif;
    background: #f4f4f0;
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 40px 20px;
    color: #1a1a1a;
  }

  .fb05-page-content {
    text-align: center;
    max-width: 560px;
    padding: 60px 24px;
  }
  .fb05-page-content h1 {
    font-size: clamp(1.8rem, 5vw, 2.8rem);
    font-weight: 700;
    letter-spacing: -.025em;
    line-height: 1.15;
    margin-bottom: 16px;
  }
  .fb05-page-content p {
    color: #64748b;
    line-height: 1.65;
    font-size: .95rem;
  }
  .fb05-page-content .fb05-note {
    display: inline-block;
    margin-top: 24px;
    font-size: .78rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #94a3b8;
    border-top: 1px solid #e2e8f0;
    padding-top: 20px;
  }

  /* ══════════════════════════════
     FLOATING CHAT WIDGET — VARIANT 1: WhatsApp green
  ══════════════════════════════ */
  .fb05-chat-fab {
    position: fixed;
    bottom: 32px;
    right: 32px;
    z-index: 200;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 14px;
  }

  /* chat panel */
  .fb05-chat-panel {
    background: #fff;
    border-radius: 18px;
    width: 300px;
    overflow: hidden;
    box-shadow: 0 8px 40px rgba(0,0,0,.16), 0 2px 8px rgba(0,0,0,.08);
    opacity: 0;
    transform: translateY(12px) scale(.96);
    pointer-events: none;
    transform-origin: bottom right;
    transition: opacity .28s ease, transform .32s cubic-bezier(.34,1.56,.64,1);
  }
  .fb05-chat-panel.fb05-open {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }

  .fb05-cp-header {
    background: linear-gradient(135deg, #25d366, #128c7e);
    padding: 18px 18px 24px;
    color: #fff;
    position: relative;
  }
  .fb05-cp-header .fb05-agent {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .fb05-cp-avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(255,255,255,.25);
    display: grid;
    place-items: center;
    font-size: 22px;
    flex-shrink: 0;
    position: relative;
  }
  .fb05-cp-avatar::after {
    content: '';
    position: absolute;
    bottom: 1px;
    right: 1px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #7fe87f;
    border: 2px solid #128c7e;
  }
  .fb05-cp-info h3 { font-size: .96rem; font-weight: 600; }
  .fb05-cp-info span { font-size: .76rem; opacity: .8; }

  .fb05-cp-body {
    padding: 18px;
    background: #ecfdf5;
    min-height: 100px;
  }
  .fb05-cp-bubble {
    background: #fff;
    border-radius: 0 12px 12px 12px;
    padding: 10px 14px;
    font-size: .85rem;
    line-height: 1.5;
    color: #1a1a1a;
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
    max-width: 90%;
    position: relative;
  }
  .fb05-cp-bubble::before {
    content: '';
    position: absolute;
    top: 0;
    left: -7px;
    border: 7px solid transparent;
    border-top-color: #fff;
    border-right-color: #fff;
  }
  .fb05-cp-time {
    text-align: right;
    font-size: .67rem;
    color: #94a3b8;
    margin-top: 4px;
  }

  .fb05-cp-footer {
    padding: 14px 18px;
    display: flex;
    gap: 8px;
    border-top: 1px solid #f0f0f0;
  }
  .fb05-cp-input {
    flex: 1;
    border: 1.5px solid #e2e8f0;
    border-radius: 24px;
    padding: 9px 16px;
    font-size: .85rem;
    font-family: inherit;
    outline: none;
    background: #f8fafc;
  }
  .fb05-cp-input:focus { border-color: #25d366; }
  .fb05-cp-send {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: none;
    background: #25d366;
    cursor: pointer;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    transition: transform .15s ease, background .15s;
  }
  .fb05-cp-send:hover { background: #22c55e; transform: scale(1.08); }
  .fb05-cp-send svg { width: 17px; height: 17px; fill: #fff; }

  /* trigger button */
  .fb05-chat-trigger {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #25d366, #128c7e);
    box-shadow: 0 6px 24px rgba(37,211,102,.45), inset 0 1px 0 rgba(255,255,255,.2);
    transition: transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .2s ease;
    position: relative;
  }
  .fb05-chat-trigger:hover {
    transform: scale(1.1);
    box-shadow: 0 10px 32px rgba(37,211,102,.6), inset 0 1px 0 rgba(255,255,255,.2);
  }
  .fb05-chat-trigger svg { width: 32px; height: 32px; fill: #fff; }

  /* pulsing ring */
  .fb05-chat-trigger::before {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 2px solid rgba(37,211,102,.5);
    animation: fb05-pulse-ring 2.2s ease-out infinite;
  }
  @keyframes fb05-pulse-ring {
    0% { transform: scale(.9); opacity: .7; }
    70% { transform: scale(1.18); opacity: 0; }
    100% { transform: scale(1.18); opacity: 0; }
  }

  /* notification badge */
  .fb05-chat-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #ef4444;
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    display: grid;
    place-items: center;
    border: 2px solid #f4f4f0;
    animation: fb05-badge-pop .4s cubic-bezier(.34,1.56,.64,1) both;
  }
  @keyframes fb05-badge-pop {
    from { transform: scale(0); }
    to   { transform: scale(1); }
  }

  /* icon morph: chat → X */
  .fb05-chat-trigger .fb05-icon-chat { transition: opacity .2s, transform .2s; }
  .fb05-chat-trigger .fb05-icon-close { position: absolute; opacity: 0; transition: opacity .2s, transform .2s; transform: rotate(-45deg); }
  .fb05-chat-trigger.fb05-open .fb05-icon-chat { opacity: 0; transform: rotate(45deg); }
  .fb05-chat-trigger.fb05-open .fb05-icon-close { opacity: 1; transform: rotate(0deg); }

  /* ══ VARIANT 2: Indigo support ══ */
  .fb05-chat-fab--indigo {
    bottom: 32px;
    left: 32px;
    right: auto;
  }
  .fb05-chat-trigger--ind {
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    box-shadow: 0 6px 24px rgba(99,102,241,.4), inset 0 1px 0 rgba(255,255,255,.2);
  }
  .fb05-chat-trigger--ind::before { border-color: rgba(99,102,241,.45); }
  .fb05-chat-trigger--ind:hover { box-shadow: 0 10px 32px rgba(99,102,241,.55), inset 0 1px 0 rgba(255,255,255,.2); }

  @media (prefers-reduced-motion: reduce) {
    .fb05-chat-trigger::before { animation: none; }
    .fb05-chat-panel, .fb05-chat-trigger { transition: none; }
  }
  @media (max-width: 480px) {
    .fb05-chat-panel { width: calc(100vw - 64px); }
    .fb05-chat-fab--indigo { display: none; }
  }
```

**JS:**
```js
function setupChat(triggerId, panelId) {
    const trig = document.getElementById(triggerId);
    const panel = document.getElementById(panelId);
    let open = false;

    trig.addEventListener('click', () => {
      open = !open;
      trig.classList.toggle('fb05-open', open);
      panel.classList.toggle('fb05-open', open);
      trig.setAttribute('aria-expanded', open);
      // hide badge on first open
      const badge = trig.querySelector('.fb05-chat-badge');
      if (badge && open) badge.style.display = 'none';
    });
  }

  setupChat('fb05-trig-wa', 'fb05-panel-wa');
  setupChat('fb05-trig-ind', 'fb05-panel-ind');
```

### 06. Fan Arc FAB Menu

**Type:** CSS + JS
**Description:** Fan and arc style FAB menu with radial spread using JS angle math, available in two demo layouts.

**HTML:**
```html
<div class="fb06">
<h1>Fan Arc FAB Menu</h1>
<p class="fb06-sub">Radial floating action button menu — actions spread in a configurable arc on click. CSS transitions + a tiny 15-line JS layout engine.</p>

<div class="fb06-demos">

  <!-- Demo 1: Upward fan (90°) -->
  <div class="fb06-well" id="fb06-well1">
    <span class="fb06-well-tag">Upward 90° arc · 5 items</span>

    <div class="fb06-fan-fab" id="fb06-fan1" data-arc="90" data-start="135" data-radius="88">
      <div class="fb06-fan-item fb06-closed" data-index="0">
        <button class="fb06-fan-btn fb06-fan-btn--a" aria-label="Share">
          <svg viewBox="0 0 24 24"><path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11A3 3 0 0021 5a3 3 0 00-3-3 3 3 0 00-3 3c0 .24.04.47.09.7L8.04 9.81A3 3 0 005 9a3 3 0 00-3 3 3 3 0 003 3 3 3 0 003.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92S19.61 16.08 18 16.08z"/></svg>
        </button>
        <span class="fb06-fan-lbl">Share</span>
      </div>
      <div class="fb06-fan-item fb06-closed" data-index="1">
        <button class="fb06-fan-btn fb06-fan-btn--b" aria-label="Camera">
          <svg viewBox="0 0 24 24"><path d="M12 15.2A3.2 3.2 0 018.8 12 3.2 3.2 0 0112 8.8a3.2 3.2 0 013.2 3.2A3.2 3.2 0 0112 15.2M12 7a5 5 0 00-5 5 5 5 0 005 5 5 5 0 005-5 5 5 0 00-5-5m6.5-1H5.5A2.5 2.5 0 003 8.5V19a2.5 2.5 0 002.5 2.5h13A2.5 2.5 0 0021 19V8.5A2.5 2.5 0 0018.5 6zM9 4l.83-1H14.2L15 4H9z"/></svg>
        </button>
        <span class="fb06-fan-lbl">Camera</span>
      </div>
      <div class="fb06-fan-item fb06-closed" data-index="2">
        <button class="fb06-fan-btn fb06-fan-btn--c" aria-label="Bookmark">
          <svg viewBox="0 0 24 24"><path d="M17 3H7a2 2 0 00-2 2v16l7-3 7 3V5a2 2 0 00-2-2z"/></svg>
        </button>
        <span class="fb06-fan-lbl">Bookmark</span>
      </div>
      <div class="fb06-fan-item fb06-closed" data-index="3">
        <button class="fb06-fan-btn fb06-fan-btn--d" aria-label="Favorite">
          <svg viewBox="0 0 24 24"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5A5.5 5.5 0 0112 5.09 5.5 5.5 0 0122 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>
        </button>
        <span class="fb06-fan-lbl">Like</span>
      </div>
      <div class="fb06-fan-item fb06-closed" data-index="4">
        <button class="fb06-fan-btn fb06-fan-btn--e" aria-label="More">
          <svg viewBox="0 0 24 24"><path d="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/></svg>
        </button>
        <span class="fb06-fan-lbl">More</span>
      </div>

      <button class="fb06-fan-trigger" aria-label="Toggle actions" aria-expanded="false">
        <svg viewBox="0 0 24 24"><path d="M19 11h-6V5h-2v6H5v2h6v6h2v-6h6z"/></svg>
      </button>
    </div>
  </div>

  <!-- Demo 2: Corner fan (positioned like a real FAB) -->
  <div class="fb06-well fb06-corner-well" id="fb06-well2">
    <span class="fb06-well-tag">Corner placement · 4 items · 120° arc</span>

    <div class="fb06-fan-fab fb06-fan-fab--corner" id="fb06-fan2" data-arc="120" data-start="180" data-radius="90">
      <div class="fb06-fan-item fb06-closed" data-index="0">
        <button class="fb06-fan-btn fb06-fan-btn--a" aria-label="New post">
          <svg viewBox="0 0 24 24"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a1 1 0 000-1.41l-2.34-2.34a1 1 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>
        </button>
        <span class="fb06-fan-lbl">Edit</span>
      </div>
      <div class="fb06-fan-item fb06-closed" data-index="1">
        <button class="fb06-fan-btn fb06-fan-btn--c" aria-label="Attach">
          <svg viewBox="0 0 24 24"><path d="M16.5 6v11.5c0 2.21-1.79 4-4 4s-4-1.79-4-4V5a2.5 2.5 0 015 0v10.5c0 .83-.67 1.5-1.5 1.5s-1.5-.67-1.5-1.5V6H9v9.5a3.5 3.5 0 007 0V5c0-2.76-2.24-5-5-5S6 2.24 6 5v12.5c0 3.87 3.13 7 7 7s7-3.13 7-7V6h-3.5z"/></svg>
        </button>
        <span class="fb06-fan-lbl">Attach</span>
      </div>
      <div class="fb06-fan-item fb06-closed" data-index="2">
        <button class="fb06-fan-btn fb06-fan-btn--b" aria-label="Gallery">
          <svg viewBox="0 0 24 24"><path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/></svg>
        </button>
        <span class="fb06-fan-lbl">Gallery</span>
      </div>
      <div class="fb06-fan-item fb06-closed" data-index="3">
        <button class="fb06-fan-btn fb06-fan-btn--e" aria-label="Location">
          <svg viewBox="0 0 24 24"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5a2.5 2.5 0 010-5 2.5 2.5 0 010 5z"/></svg>
        </button>
        <span class="fb06-fan-lbl">Location</span>
      </div>

      <button class="fb06-fan-trigger" style="background:linear-gradient(135deg,#8b5cf6,#d946ef);box-shadow:0 6px 22px rgba(139,92,246,.45),inset 0 1px 0 rgba(255,255,255,.18)" aria-label="Toggle actions" aria-expanded="false">
        <svg viewBox="0 0 24 24"><path d="M19 11h-6V5h-2v6H5v2h6v6h2v-6h6z"/></svg>
      </button>
    </div>
  </div>

</div>
</div>
```

**CSS:**
```css
.fb06, .fb06 *, .fb06 *::before, .fb06 *::after { box-sizing: border-box; margin: 0; padding: 0; }
.fb06 {
    font-family: 'Plus Jakarta Sans', sans-serif;
    background: #0c0c10;
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 40px 20px;
    color: #e4e4e7;
  }

  h1 {
    font-size: clamp(1.6rem, 5vw, 2.4rem);
    font-weight: 700;
    text-align: center;
    letter-spacing: -.022em;
    margin-bottom: 8px;
  }
  p.fb06-sub {
    text-align: center;
    color: #52525b;
    font-size: .9rem;
    max-width: 42ch;
    margin: 0 auto 60px;
    line-height: 1.6;
  }

  .fb06-demos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 24px;
    width: min(880px, 100%);
  }

  .fb06-well {
    background: #141418;
    border: 1px solid #27272a;
    border-radius: 22px;
    height: 400px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 40px;
  }
  .fb06-well-tag {
    position: absolute;
    top: 16px;
    left: 18px;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #3f3f46;
  }

  /* ══ FAN FAB ══ */
  .fb06-fan-fab {
    position: relative;
    width: 62px;
    height: 62px;
  }

  /* main trigger */
  .fb06-fan-trigger {
    position: relative;
    z-index: 10;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    background: linear-gradient(135deg, #f97316, #ea580c);
    box-shadow: 0 6px 22px rgba(249,115,22,.45), inset 0 1px 0 rgba(255,255,255,.18);
    display: grid;
    place-items: center;
    transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .2s;
  }
  .fb06-fan-trigger:hover { box-shadow: 0 10px 30px rgba(249,115,22,.6), inset 0 1px 0 rgba(255,255,255,.18); }
  .fb06-fan-trigger.fb06-open { transform: rotate(45deg); }
  .fb06-fan-trigger svg { width: 26px; height: 26px; fill: #fff; pointer-events: none; }

  /* action items */
  .fb06-fan-item {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform-origin: center 31px; /* half of 62px = pivot at btn center */
    transition:
      transform .3s cubic-bezier(.34,1.56,.64,1),
      opacity .22s ease;
    opacity: 0;
  }
  /* closed: all stacked under trigger */
  .fb06-fan-item.fb06-closed { transform: translateX(-50%) translateY(0) scale(.5); }
  /* open: spread via CSS custom properties set by JS */
  .fb06-fan-item.fb06-open {
    opacity: 1;
  }

  .fb06-fan-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: grid;
    place-items: center;
    box-shadow: 0 4px 14px rgba(0,0,0,.5);
    transition: transform .15s ease;
    position: relative;
    transform: translateX(-50%);
  }
  .fb06-fan-btn:hover { transform: translateX(-50%) scale(1.15); }
  .fb06-fan-btn svg { width: 20px; height: 20px; fill: #fff; }

  /* label tooltip */
  .fb06-fan-lbl {
    position: absolute;
    right: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    background: #1f1f24;
    border: 1px solid #3f3f46;
    color: #a1a1aa;
    font-size: .72rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 6px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity .15s ease;
  }
  .fb06-fan-btn:hover + .fb06-fan-lbl,
  .fb06-fan-btn:focus + .fb06-fan-lbl { opacity: 1; }

  /* color variants */
  .fb06-fan-btn--a { background: linear-gradient(135deg, #6366f1, #8b5cf6); box-shadow: 0 4px 14px rgba(99,102,241,.5); }
  .fb06-fan-btn--b { background: linear-gradient(135deg, #06b6d4, #0ea5e9); box-shadow: 0 4px 14px rgba(6,182,212,.5); }
  .fb06-fan-btn--c { background: linear-gradient(135deg, #10b981, #059669); box-shadow: 0 4px 14px rgba(16,185,129,.5); }
  .fb06-fan-btn--d { background: linear-gradient(135deg, #f43f5e, #e11d48); box-shadow: 0 4px 14px rgba(244,63,94,.5); }
  .fb06-fan-btn--e { background: linear-gradient(135deg, #f59e0b, #d97706); box-shadow: 0 4px 14px rgba(245,158,11,.5); }

  /* ── Grid of demo variants ── */
  .fb06-corner-well {
    position: relative;
    overflow: hidden;
  }
  .fb06-fan-fab--corner {
    position: absolute;
    bottom: 28px;
    right: 28px;
  }

  @media (prefers-reduced-motion: reduce) {
    .fb06-fan-item, .fb06-fan-trigger { transition: none; }
  }
```

**JS:**
```js
document.querySelectorAll('.fb06-fan-fab').forEach(fab => {
    const arc      = parseFloat(fab.dataset.arc);    // total degrees
    const start    = parseFloat(fab.dataset.start);  // starting angle (deg)
    const radius   = parseFloat(fab.dataset.radius);
    const items    = Array.from(fab.querySelectorAll('.fb06-fan-item'));
    const trigger  = fab.querySelector('.fb06-fan-trigger');
    let isOpen = false;
    const count = items.length;

    function openFan() {
      items.forEach((item, i) => {
        const angleDeg = count > 1
          ? start - (arc / (count - 1)) * i
          : start;
        const rad = angleDeg * Math.PI / 180;
        const x = Math.cos(rad) * radius;
        const y = Math.sin(rad) * radius;
        item.classList.remove('fb06-closed');
        item.classList.add('fb06-open');
        item.style.transitionDelay = (i * 0.04) + 's';
        item.style.transform = `translateX(calc(-50% + ${x}px)) translateY(${-y}px) scale(1)`;
      });
    }

    function closeFan() {
      items.forEach((item, i) => {
        item.classList.remove('fb06-open');
        item.classList.add('fb06-closed');
        item.style.transitionDelay = ((count - 1 - i) * 0.03) + 's';
        item.style.transform = '';
      });
    }

    trigger.addEventListener('click', () => {
      isOpen = !isOpen;
      trigger.classList.toggle('fb06-open', isOpen);
      trigger.setAttribute('aria-expanded', isOpen);
      isOpen ? openFan() : closeFan();
    });
  });
```

### 07. Squircle FAB

**Type:** Pure CSS
**Description:** Apple-style squircle (superellipse) floating action button with clip-path, size scale variants, and iOS home screen simulation.

**HTML:**
```html
<div class="fb07">
<div class="fb07-header">
  <h1>Squircle FAB — <em>2025 Design Trend</em></h1>
  <p>Apple's superellipse icon shape applied to floating action buttons. The rounded square breaks from the ubiquitous circle while staying friendly and modern.</p>
</div>

<div class="fb07-scene">

  <!-- Size progression -->
  <div class="fb07-panel">
    <span class="fb07-panel-title">Size scale — same shape</span>
    <div class="fb07-btn-row" style="align-items:flex-end">
      <button class="fb07-sqfab fb07-sqfab--sm fb07-sqfab--blue" aria-label="Small action">
        <svg width="22" height="22" viewBox="0 0 24 24"><path d="M19 11h-6V5h-2v6H5v2h6v6h2v-6h6z"/></svg>
      </button>
      <button class="fb07-sqfab fb07-sqfab--md fb07-sqfab--blue" aria-label="Medium action">
        <svg width="28" height="28" viewBox="0 0 24 24"><path d="M19 11h-6V5h-2v6H5v2h6v6h2v-6h6z"/></svg>
      </button>
      <button class="fb07-sqfab fb07-sqfab--lg fb07-sqfab--blue" aria-label="Large action">
        <svg width="36" height="36" viewBox="0 0 24 24"><path d="M19 11h-6V5h-2v6H5v2h6v6h2v-6h6z"/></svg>
      </button>
      <button class="fb07-sqfab fb07-sqfab--xl fb07-sqfab--blue" aria-label="XL action">
        <svg width="44" height="44" viewBox="0 0 24 24"><path d="M19 11h-6V5h-2v6H5v2h6v6h2v-6h6z"/></svg>
      </button>
    </div>
    <span class="fb07-panel-title" style="margin-top:8px">Color variants — hover for tilt</span>
    <div class="fb07-btn-row">
      <button class="fb07-sqfab fb07-sqfab--md fb07-sqfab--indigo" aria-label="Indigo">
        <svg width="28" height="28" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
      </button>
      <button class="fb07-sqfab fb07-sqfab--md fb07-sqfab--pink" aria-label="Pink">
        <svg width="28" height="28" viewBox="0 0 24 24"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5A5.5 5.5 0 0112 5.09 5.5 5.5 0 0122 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>
      </button>
      <button class="fb07-sqfab fb07-sqfab--md fb07-sqfab--green" aria-label="Green">
        <svg width="28" height="28" viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z"/></svg>
      </button>
      <button class="fb07-sqfab fb07-sqfab--md fb07-sqfab--dark" aria-label="Dark">
        <svg width="28" height="28" viewBox="0 0 24 24"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a1 1 0 000-1.41l-2.34-2.34a1 1 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>
      </button>
      <button class="fb07-sqfab fb07-sqfab--md fb07-sqfab--glass" aria-label="Glass">
        <svg width="28" height="28" viewBox="0 0 24 24"><path d="M21 15.5a6.5 6.5 0 01-6.5 6.5 6.5 6.5 0 01-6.5-6.5V8h13v7.5zM6 1v6h13V1H6zm11 4H7V3h10v2z"/></svg>
      </button>
    </div>
  </div>

  <!-- iOS home screen simulation -->
  <div class="fb07-panel">
    <span class="fb07-panel-title">iOS-style home screen — squircle icons</span>
    <div class="fb07-ios-screen">
      <div class="fb07-app-icon-wrap">
        <button class="fb07-sqfab fb07-sqfab--md fb07-sqfab--blue" aria-label="Messages">
          <svg width="26" height="26" viewBox="0 0 24 24"><path d="M20 2H4a2 2 0 00-2 2v18l4-4h14a2 2 0 002-2V4a2 2 0 00-2-2z"/></svg>
        </button>
        <span class="fb07-app-name">Messages</span>
      </div>
      <div class="fb07-app-icon-wrap">
        <button class="fb07-sqfab fb07-sqfab--md fb07-sqfab--pink" aria-label="Photos">
          <svg width="26" height="26" viewBox="0 0 24 24"><path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/></svg>
        </button>
        <span class="fb07-app-name">Photos</span>
      </div>
      <div class="fb07-app-icon-wrap">
        <button class="fb07-sqfab fb07-sqfab--md fb07-sqfab--green" aria-label="Maps">
          <svg width="26" height="26" viewBox="0 0 24 24"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5A2.5 2.5 0 119.5 9a2.5 2.5 0 012.5 2.5z"/></svg>
        </button>
        <span class="fb07-app-name">Maps</span>
      </div>
      <div class="fb07-app-icon-wrap">
        <button class="fb07-sqfab fb07-sqfab--md fb07-sqfab--indigo" aria-label="Calendar">
          <svg width="26" height="26" viewBox="0 0 24 24"><path d="M19 3h-1V1h-2v2H8V1H6v2H5a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2V5a2 2 0 00-2-2zm0 16H5V8h14v11z"/></svg>
        </button>
        <span class="fb07-app-name">Calendar</span>
      </div>
      <div class="fb07-app-icon-wrap">
        <button class="fb07-sqfab fb07-sqfab--md" style="background:linear-gradient(145deg,#ff9f0a,#ff6b00);box-shadow:0 8px 28px rgba(255,107,0,.38);border-radius:27%" aria-label="Music">
          <svg width="26" height="26" viewBox="0 0 24 24" fill="white"><path d="M12 3v10.55A4 4 0 1014 17V7h4V3h-6z"/></svg>
        </button>
        <span class="fb07-app-name">Music</span>
      </div>
      <div class="fb07-app-icon-wrap">
        <button class="fb07-sqfab fb07-sqfab--md" style="background:linear-gradient(145deg,#30d158,#1ea446);box-shadow:0 8px 28px rgba(30,164,70,.38);border-radius:27%" aria-label="Health">
          <svg width="26" height="26" viewBox="0 0 24 24" fill="white"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5A5.5 5.5 0 0112 5.09 5.5 5.5 0 0122 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>
        </button>
        <span class="fb07-app-name">Health</span>
      </div>
      <div class="fb07-app-icon-wrap">
        <button class="fb07-sqfab fb07-sqfab--md" style="background:linear-gradient(145deg,#64d2ff,#0a84ff);box-shadow:0 8px 28px rgba(10,132,255,.38);border-radius:27%" aria-label="Safari">
          <svg width="26" height="26" viewBox="0 0 24 24" fill="white"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 15H9V8h2v9zm4 0h-2V8h2v9z"/></svg>
        </button>
        <span class="fb07-app-name">Browser</span>
      </div>
      <div class="fb07-app-icon-wrap">
        <button class="fb07-sqfab fb07-sqfab--md fb07-sqfab--dark" aria-label="Settings">
          <svg width="26" height="26" viewBox="0 0 24 24" fill="white"><path d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58a.49.49 0 00.12-.61l-1.92-3.32a.488.488 0 00-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54a.484.484 0 00-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96a.488.488 0 00-.59.22L2.74 8.87a.49.49 0 00.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58a.49.49 0 00-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32a.49.49 0 00-.12-.61l-2.01-1.58zM12 15.6a3.6 3.6 0 110-7.2 3.6 3.6 0 010 7.2z"/></svg>
        </button>
        <span class="fb07-app-name">Settings</span>
      </div>
    </div>
  </div>

</div>
</div>
```

**CSS:**
```css
.fb07, .fb07 *, .fb07 *::before, .fb07 *::after { box-sizing: border-box; margin: 0; padding: 0; }
.fb07 {
    font-family: 'Inter', sans-serif;
    background: #f5f5f7;
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 40px 20px;
    color: #1d1d1f;
  }

  .fb07-header {
    text-align: center;
    margin-bottom: 56px;
  }
  .fb07-header h1 {
    font-size: clamp(1.8rem, 6vw, 3rem);
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1.1;
    color: #1d1d1f;
  }
  .fb07-header h1 em { font-style: italic; color: #6e6e73; }
  .fb07-header p {
    margin-top: 12px;
    color: #6e6e73;
    font-size: .95rem;
    max-width: 44ch;
    margin-inline: auto;
    line-height: 1.6;
  }

  /* ── squircle shape via clip-path (SVG superellipse) ── */
  /* We approximate a squircle with a very high border-radius combined with aspect-ratio */
  .fb07-sqfab {
    position: relative;
    border: none;
    cursor: pointer;
    display: grid;
    place-items: center;
    /* Squircle = border-radius ≈ 28-30% of size */
    border-radius: 29%;
    /* The clip-path gives a tighter squircle than border-radius alone */
    clip-path: path('M60 0 C88 0 120 32 120 60 C120 88 88 120 60 120 C32 120 0 88 0 60 C0 32 32 0 60 0Z');
    width: 120px;
    height: 120px;
    outline: none;
    transition:
      transform .22s cubic-bezier(.34,1.56,.64,1),
      box-shadow .22s ease,
      filter .22s ease;
  }

  /* simpler squircle for smaller sizes using rounded rectangle with 28% radius */
  .fb07-sqfab--sm  { width: 52px;  height: 52px;  border-radius: 26%; clip-path: none; }
  .fb07-sqfab--md  { width: 68px;  height: 68px;  border-radius: 27%; clip-path: none; }
  .fb07-sqfab--lg  { width: 88px;  height: 88px;  border-radius: 28%; clip-path: none; }
  .fb07-sqfab--xl  { width: 110px; height: 110px; border-radius: 29%; clip-path: none; }

  .fb07-sqfab--blue {
    background: linear-gradient(145deg, #007aff, #0055d4);
    box-shadow: 0 8px 28px rgba(0,122,255,.38), inset 0 1px 0 rgba(255,255,255,.22);
  }
  .fb07-sqfab--blue:hover {
    transform: scale(1.07) rotate(-3deg);
    box-shadow: 0 16px 40px rgba(0,122,255,.5), inset 0 1px 0 rgba(255,255,255,.22);
    filter: brightness(1.06);
  }
  .fb07-sqfab--blue:active { transform: scale(.96); }

  .fb07-sqfab--indigo {
    background: linear-gradient(145deg, #5856d6, #4240a8);
    box-shadow: 0 8px 28px rgba(88,86,214,.38), inset 0 1px 0 rgba(255,255,255,.2);
  }
  .fb07-sqfab--indigo:hover {
    transform: scale(1.07) rotate(3deg);
    box-shadow: 0 16px 40px rgba(88,86,214,.5), inset 0 1px 0 rgba(255,255,255,.22);
  }
  .fb07-sqfab--indigo:active { transform: scale(.96); }

  .fb07-sqfab--pink {
    background: linear-gradient(145deg, #ff375f, #d70015);
    box-shadow: 0 8px 28px rgba(255,55,95,.38), inset 0 1px 0 rgba(255,255,255,.2);
  }
  .fb07-sqfab--pink:hover {
    transform: scale(1.07) rotate(-3deg);
    box-shadow: 0 16px 40px rgba(255,55,95,.5), inset 0 1px 0 rgba(255,255,255,.22);
  }
  .fb07-sqfab--pink:active { transform: scale(.96); }

  .fb07-sqfab--green {
    background: linear-gradient(145deg, #34c759, #248a3d);
    box-shadow: 0 8px 28px rgba(52,199,89,.38), inset 0 1px 0 rgba(255,255,255,.2);
  }
  .fb07-sqfab--green:hover {
    transform: scale(1.07) rotate(3deg);
    box-shadow: 0 16px 40px rgba(52,199,89,.5), inset 0 1px 0 rgba(255,255,255,.22);
  }
  .fb07-sqfab--green:active { transform: scale(.96); }

  .fb07-sqfab--dark {
    background: linear-gradient(145deg, #3a3a3c, #1c1c1e);
    box-shadow: 0 8px 28px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.12);
  }
  .fb07-sqfab--dark:hover {
    transform: scale(1.07);
    box-shadow: 0 16px 40px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.14);
  }
  .fb07-sqfab--dark:active { transform: scale(.96); }

  .fb07-sqfab--glass {
    background: rgba(255,255,255,.65);
    backdrop-filter: blur(14px) saturate(180%);
    border: 1px solid rgba(255,255,255,.8);
    box-shadow: 0 8px 28px rgba(0,0,0,.1), inset 0 1px 0 rgba(255,255,255,.9);
  }
  .fb07-sqfab--glass:hover {
    transform: scale(1.07);
    box-shadow: 0 16px 40px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.9);
  }

  .fb07-sqfab svg { fill: #fff; pointer-events: none; }
  .fb07-sqfab--glass svg { fill: #1d1d1f; }

  /* gloss highlight on larger buttons */
  .fb07-sqfab--xl::after, .fb07-sqfab--lg::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 46%;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0));
    pointer-events: none;
  }

  /* ── layout ── */
  .fb07-scene {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    width: min(860px, 100%);
  }

  .fb07-panel {
    background: #fff;
    border-radius: 22px;
    padding: 36px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    box-shadow: 0 2px 20px rgba(0,0,0,.07);
  }
  .fb07-panel-title {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #aeaeb2;
  }

  .fb07-icon-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    justify-items: center;
  }
  .fb07-btn-row {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
  }

  /* iOS-style home screen simulation */
  .fb07-ios-screen {
    background: linear-gradient(145deg, #1a3a8f, #6b21a8);
    border-radius: 22px;
    padding: 28px 20px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    justify-items: center;
  }
  .fb07-app-icon-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
  }
  .fb07-app-name {
    font-size: .65rem;
    color: rgba(255,255,255,.85);
    text-align: center;
    line-height: 1.2;
  }

  @media (max-width: 680px) {
    .fb07-scene { grid-template-columns: 1fr; }
  }
  @media (prefers-reduced-motion: reduce) {
    .fb07-sqfab { transition: none; }
  }
```

### 08. Social Share FAB

**Type:** CSS + JS
**Description:** Floating social share button cluster for X, Facebook, LinkedIn, WhatsApp, and copy link with animated reveal.

**HTML:**
```html
<div class="fb08">
<div class="fb08-article">
  <div class="fb08-art-cover">
    <span class="fb08-art-tag">CSS Design</span>
  </div>

  <div class="fb08-art-body">
    <h2>Building a Floating Share Button Cluster — Pure CSS</h2>
    <p>A stacked share FAB that reveals Twitter/X, Facebook, LinkedIn, WhatsApp and copy-link buttons on click. Checkbox-hack driven with staggered spring transitions and branded icon buttons. Click the purple button →</p>
    <div class="fb08-art-meta">
      <strong>CodeFronts</strong>
      <span>5 min read</span>
      <span>2,400 shares</span>
    </div>
  </div>

  <!-- SHARE FAB -->
  <div class="fb08-share-root">
    <input type="checkbox" class="fb08-sh-check" id="fb08-sh1">

    <div class="fb08-sh-items">
      <!-- X / Twitter -->
      <div class="fb08-sh-item">
        <span class="fb08-sh-lbl">Share on X</span>
        <button class="fb08-sh-btn fb08-sh-btn--x" aria-label="Share on X">
          <svg viewBox="0 0 24 24"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.748l7.73-8.835L1.254 2.25H8.08l4.264 5.638 5.9-5.638zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
        </button>
      </div>
      <!-- Facebook -->
      <div class="fb08-sh-item">
        <span class="fb08-sh-lbl">Share on Facebook</span>
        <button class="fb08-sh-btn fb08-sh-btn--fb" aria-label="Share on Facebook">
          <svg viewBox="0 0 24 24"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>
        </button>
      </div>
      <!-- LinkedIn -->
      <div class="fb08-sh-item">
        <span class="fb08-sh-lbl">Share on LinkedIn</span>
        <button class="fb08-sh-btn fb08-sh-btn--li" aria-label="Share on LinkedIn">
          <svg viewBox="0 0 24 24"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
        </button>
      </div>
      <!-- WhatsApp -->
      <div class="fb08-sh-item">
        <span class="fb08-sh-lbl">Share on WhatsApp</span>
        <button class="fb08-sh-btn fb08-sh-btn--wa" aria-label="Share on WhatsApp">
          <svg viewBox="0 0 24 24"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/></svg>
        </button>
      </div>
      <!-- Copy link -->
      <div class="fb08-sh-item">
        <span class="fb08-sh-lbl">Copy link</span>
        <button class="fb08-sh-btn fb08-sh-btn--link" aria-label="Copy link" id="fb08-copy-btn">
          <svg viewBox="0 0 24 24"><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/></svg>
        </button>
      </div>
    </div>

    <span class="fb08-sh-count">↑ Share</span>

    <label class="fb08-sh-trigger" for="fb08-sh1" aria-label="Share article">
      <svg viewBox="0 0 24 24"><path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11A3 3 0 0021 5a3 3 0 00-3-3 3 3 0 00-3 3c0 .24.04.47.09.7L8.04 9.81A3 3 0 005 9a3 3 0 00-3 3 3 3 0 003 3 3 3 0 003.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92S19.61 16.08 18 16.08z"/></svg>
    </label>
  </div>
</div>
</div>
```

**CSS:**
```css
.fb08, .fb08 *, .fb08 *::before, .fb08 *::after { box-sizing: border-box; margin: 0; padding: 0; }
.fb08 {
    font-family: 'DM Sans', sans-serif;
    background: #111827;
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 40px 20px;
    color: #f3f4f6;
  }

  /* article card mock */
  .fb08-article {
    width: min(660px, 100%);
    background: #1f2937;
    border: 1px solid #374151;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
  }

  .fb08-art-cover {
    height: 220px;
    background: linear-gradient(135deg, #1e3a5f, #2d6a9f, #3b82f6);
    display: flex;
    align-items: flex-end;
    padding: 20px 24px;
    position: relative;
    overflow: hidden;
  }
  .fb08-art-cover::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 70% 60% at 30% 30%, rgba(255,255,255,.08), transparent);
  }
  .fb08-art-tag {
    background: rgba(59,130,246,.85);
    color: #fff;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 6px;
    backdrop-filter: blur(8px);
    position: relative;
    z-index: 1;
  }

  .fb08-art-body {
    padding: 28px 28px 32px;
  }
  .fb08-art-body h2 {
    font-size: clamp(1.3rem, 3vw, 1.8rem);
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 12px;
    letter-spacing: -.01em;
  }
  .fb08-art-body p {
    color: #9ca3af;
    font-size: .9rem;
    line-height: 1.65;
    margin-bottom: 20px;
  }
  .fb08-art-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: .78rem;
    color: #6b7280;
  }
  .fb08-art-meta strong { color: #d1d5db; }
  .fb08-art-meta span::before { content: '·'; margin-right: 14px; }

  /* ── SHARE FAB cluster ── */
  .fb08-share-root {
    position: absolute;
    bottom: 24px;
    right: 24px;
    z-index: 30;
  }

  /* hidden checkbox */
  .fb08-sh-check { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }

  /* social items */
  .fb08-sh-items {
    position: absolute;
    bottom: 0;
    right: 0;
    pointer-events: none;
  }

  .fb08-sh-item {
    position: absolute;
    bottom: 0;
    right: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    opacity: 0;
    transition: opacity .25s ease, transform .3s cubic-bezier(.34,1.56,.64,1);
    pointer-events: none;
  }

  .fb08-sh-lbl {
    font-size: .75rem;
    font-weight: 600;
    color: #f3f4f6;
    background: rgba(0,0,0,.6);
    backdrop-filter: blur(8px);
    padding: 4px 10px;
    border-radius: 6px;
    white-space: nowrap;
    opacity: 0;
    transform: translateX(6px);
    transition: opacity .18s ease, transform .18s ease;
  }

  .fb08-sh-btn {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: grid;
    place-items: center;
    box-shadow: 0 4px 16px rgba(0,0,0,.45);
    transition: transform .15s ease;
    flex-shrink: 0;
  }
  .fb08-sh-btn:hover { transform: scale(1.12); }
  .fb08-sh-btn:hover ~ .fb08-sh-lbl { opacity: 1; transform: none; }
  .fb08-sh-btn svg { width: 20px; height: 20px; fill: #fff; }

  /* brand colors */
  .fb08-sh-btn--x       { background: #000; }
  .fb08-sh-btn--fb      { background: #1877f2; }
  .fb08-sh-btn--li      { background: #0a66c2; }
  .fb08-sh-btn--wa      { background: #25d366; }
  .fb08-sh-btn--link    { background: #374151; }

  /* open state: stagger upward */
  .fb08-sh-check:checked ~ .fb08-sh-items { pointer-events: auto; }

  .fb08-sh-check:checked ~ .fb08-sh-items .fb08-sh-item:nth-child(1) {
    opacity: 1; pointer-events: auto;
    transform: translateY(-58px);
    transition-delay: 0s;
  }
  .fb08-sh-check:checked ~ .fb08-sh-items .fb08-sh-item:nth-child(2) {
    opacity: 1; pointer-events: auto;
    transform: translateY(-112px);
    transition-delay: .05s;
  }
  .fb08-sh-check:checked ~ .fb08-sh-items .fb08-sh-item:nth-child(3) {
    opacity: 1; pointer-events: auto;
    transform: translateY(-166px);
    transition-delay: .10s;
  }
  .fb08-sh-check:checked ~ .fb08-sh-items .fb08-sh-item:nth-child(4) {
    opacity: 1; pointer-events: auto;
    transform: translateY(-220px);
    transition-delay: .15s;
  }
  .fb08-sh-check:checked ~ .fb08-sh-items .fb08-sh-item:nth-child(5) {
    opacity: 1; pointer-events: auto;
    transform: translateY(-274px);
    transition-delay: .20s;
  }

  /* main share trigger */
  .fb08-sh-trigger {
    position: relative;
    z-index: 10;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    cursor: pointer;
    display: grid;
    place-items: center;
    border: none;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    box-shadow: 0 6px 22px rgba(99,102,241,.5), inset 0 1px 0 rgba(255,255,255,.18);
    transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .2s;
  }
  .fb08-sh-trigger:hover { transform: scale(1.08); box-shadow: 0 10px 30px rgba(99,102,241,.65), inset 0 1px 0 rgba(255,255,255,.2); }
  .fb08-sh-trigger svg { width: 22px; height: 22px; fill: #fff; transition: transform .28s cubic-bezier(.34,1.56,.64,1); }
  .fb08-sh-check:checked ~ .fb08-sh-trigger { transform: rotate(45deg); box-shadow: 0 8px 24px rgba(99,102,241,.5); }

  /* count bubble */
  .fb08-sh-count {
    position: absolute;
    top: 0;
    left: 0;
    background: #1f2937;
    border: 2px solid #374151;
    border-radius: 20px;
    padding: 3px 10px;
    font-size: .72rem;
    font-weight: 700;
    color: #9ca3af;
    white-space: nowrap;
    transform: translateX(calc(-100% - 10px)) translateY(50%);
    bottom: auto;
    top: 50%;
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease .25s;
  }
  .fb08-sh-check:checked ~ .fb08-sh-count { opacity: 1; }

  @media (prefers-reduced-motion: reduce) {
    .fb08-sh-item, .fb08-sh-trigger, .fb08-sh-btn { transition: none; }
  }
```

**JS:**
```js
document.getElementById('fb08-copy-btn').addEventListener('click', () => {
    navigator.clipboard?.writeText(location.href).catch(()=>{});
    const btn = document.getElementById('fb08-copy-btn');
    btn.style.background = '#10b981';
    setTimeout(() => { btn.style.background = ''; }, 1500);
  });
```

### 09. Glassmorphism FAB

**Type:** Pure CSS
**Description:** Glassmorphism floating action button with backdrop-filter blur, tinted color variants, animated background blobs, and pill shape.

**HTML:**
```html
<div class="fb09">
<div class="fb09-blob fb09-blob--a"></div>
<div class="fb09-blob fb09-blob--b"></div>
<div class="fb09-blob fb09-blob--c"></div>

<div class="fb09-scene">
  <h1>Glassmorphism FAB</h1>
  <p class="fb09-sub">Frosted glass floating action buttons — backdrop-filter blur with layered inset highlights, tinted variants and pill forms on a vivid gradient backdrop.</p>

  <div class="fb09-grid">
    <!-- neutral glass -->
    <div class="fb09-card">
      <span class="fb09-card-lbl">Clear glass</span>
      <button class="fb09-glass-fab fb09-glass-fab--circle" aria-label="Add">
        <svg viewBox="0 0 24 24"><path d="M19 11h-6V5h-2v6H5v2h6v6h2v-6h6z"/></svg>
      </button>
    </div>

    <!-- blue tinted -->
    <div class="fb09-card">
      <span class="fb09-card-lbl">Blue tint</span>
      <button class="fb09-glass-fab fb09-glass-fab--circle fb09-glass-fab--blue" aria-label="Share">
        <svg viewBox="0 0 24 24"><path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11A3 3 0 0021 5a3 3 0 00-3-3 3 3 0 00-3 3c0 .24.04.47.09.7L8.04 9.81A3 3 0 005 9a3 3 0 00-3 3 3 3 0 003 3 3 3 0 003.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92S19.61 16.08 18 16.08z"/></svg>
      </button>
    </div>

    <!-- rose tinted -->
    <div class="fb09-card">
      <span class="fb09-card-lbl">Rose tint</span>
      <button class="fb09-glass-fab fb09-glass-fab--circle fb09-glass-fab--rose" aria-label="Like">
        <svg viewBox="0 0 24 24"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5A5.5 5.5 0 0112 5.09 5.5 5.5 0 0122 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>
      </button>
    </div>

    <!-- cyan square -->
    <div class="fb09-card">
      <span class="fb09-card-lbl">Cyan square</span>
      <button class="fb09-glass-fab fb09-glass-fab--sq fb09-glass-fab--cyan" aria-label="Camera">
        <svg viewBox="0 0 24 24"><path d="M12 15.2A3.2 3.2 0 018.8 12 3.2 3.2 0 0112 8.8a3.2 3.2 0 013.2 3.2A3.2 3.2 0 0112 15.2M12 7a5 5 0 00-5 5 5 5 0 005 5 5 5 0 005-5 5 5 0 00-5-5m6.5-1H5.5A2.5 2.5 0 003 8.5V19a2.5 2.5 0 002.5 2.5h13A2.5 2.5 0 0021 19V8.5A2.5 2.5 0 0018.5 6zM9 4l.83-1H14.2L15 4H9z"/></svg>
      </button>
    </div>

    <!-- blue square -->
    <div class="fb09-card">
      <span class="fb09-card-lbl">Blue square</span>
      <button class="fb09-glass-fab fb09-glass-fab--sq fb09-glass-fab--blue" aria-label="Edit">
        <svg viewBox="0 0 24 24"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a1 1 0 000-1.41l-2.34-2.34a1 1 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>
      </button>
    </div>

    <!-- neutral square -->
    <div class="fb09-card">
      <span class="fb09-card-lbl">Clear square</span>
      <button class="fb09-glass-fab fb09-glass-fab--sq" aria-label="Settings">
        <svg viewBox="0 0 24 24"><path d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58a.49.49 0 00.12-.61l-1.92-3.32a.488.488 0 00-.59-.22l-2.39.96a7.2 7.2 0 00-1.62-.94l-.36-2.54a.484.484 0 00-.48-.41h-3.84a.484.484 0 00-.47.41l-.36 2.54a7.2 7.2 0 00-1.62.94l-2.39-.96a.488.488 0 00-.59.22L2.74 8.87a.49.49 0 00.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58a.49.49 0 00-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32a.49.49 0 00-.12-.61l-2.01-1.58zM12 15.6a3.6 3.6 0 110-7.2 3.6 3.6 0 010 7.2z"/></svg>
      </button>
    </div>
  </div>

  <!-- pill row -->
  <div class="fb09-pill-row">
    <button class="fb09-glass-fab fb09-glass-fab--pill" aria-label="Compose">
      <svg viewBox="0 0 24 24"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a1 1 0 000-1.41l-2.34-2.34a1 1 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>
      Compose
    </button>
    <button class="fb09-glass-fab fb09-glass-fab--pill fb09-glass-fab--blue" aria-label="New project">
      <svg viewBox="0 0 24 24"><path d="M19 11h-6V5h-2v6H5v2h6v6h2v-6h6z"/></svg>
      New project
    </button>
    <button class="fb09-glass-fab fb09-glass-fab--pill fb09-glass-fab--rose" aria-label="Save">
      <svg viewBox="0 0 24 24"><path d="M17 3H5a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2V7l-4-4zm-5 16a3 3 0 110-6 3 3 0 010 6zm3-10H5V5h10v4z"/></svg>
      Save
    </button>
  </div>
</div>
</div>
```

**CSS:**
```css
.fb09, .fb09 *, .fb09 *::before, .fb09 *::after { box-sizing: border-box; margin: 0; padding: 0; }
.fb09 {
    font-family: 'Inter', sans-serif;
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 40px 20px;
    /* rich gradient background so glass blur is visible */
    background:
      radial-gradient(ellipse 70% 55% at 25% 20%, #4f46e5, transparent),
      radial-gradient(ellipse 60% 50% at 75% 80%, #ec4899, transparent),
      radial-gradient(ellipse 60% 60% at 75% 20%, #0ea5e9, transparent),
      #0f0a1e;
    color: #fff;
    position: relative;
    overflow: hidden;
  }

  /* decorative blobs behind everything */
  .fb09-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    pointer-events: none;
    animation: fb09-float-blob 8s ease-in-out infinite;
  }
  .fb09-blob--a { width: 340px; height: 340px; background: rgba(99,102,241,.35); top: -80px; left: -80px; animation-delay: 0s; }
  .fb09-blob--b { width: 280px; height: 280px; background: rgba(236,72,153,.3);  bottom: -60px; right: -60px; animation-delay: -4s; }
  .fb09-blob--c { width: 220px; height: 220px; background: rgba(14,165,233,.25); top: 40%; left: 60%; animation-delay: -2s; }
  @keyframes fb09-float-blob {
    0%,100% { transform: translate(0,0); }
    50%      { transform: translate(20px, 15px); }
  }

  h1 {
    font-size: clamp(1.6rem, 5vw, 2.6rem);
    font-weight: 700;
    text-align: center;
    letter-spacing: -.025em;
    margin-bottom: 10px;
    position: relative;
    z-index: 2;
  }
  p.fb09-sub {
    text-align: center;
    color: rgba(255,255,255,.55);
    font-size: .9rem;
    max-width: 44ch;
    margin: 0 auto 52px;
    line-height: 1.6;
    position: relative;
    z-index: 2;
  }

  /* ── GLASS FAB mixins ── */
  .fb09-glass-fab {
    border: none;
    cursor: pointer;
    display: grid;
    place-items: center;
    position: relative;
    outline: none;
    /* glass core */
    background: rgba(255,255,255,.12);
    backdrop-filter: blur(18px) saturate(180%);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    border: 1px solid rgba(255,255,255,.22);
    box-shadow:
      0 8px 32px rgba(0,0,0,.3),
      inset 0 1px 0 rgba(255,255,255,.35),
      inset 0 -1px 0 rgba(255,255,255,.08);
    transition:
      transform .22s cubic-bezier(.34,1.56,.64,1),
      box-shadow .22s ease,
      background .22s ease;
  }
  .fb09-glass-fab:hover {
    background: rgba(255,255,255,.18);
    transform: scale(1.08) translateY(-2px);
    box-shadow:
      0 16px 48px rgba(0,0,0,.4),
      inset 0 1px 0 rgba(255,255,255,.4),
      inset 0 -1px 0 rgba(255,255,255,.1);
  }
  .fb09-glass-fab:active {
    transform: scale(.97);
    box-shadow:
      0 4px 16px rgba(0,0,0,.3),
      inset 0 1px 0 rgba(255,255,255,.3);
  }
  .fb09-glass-fab::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 48%;
    background: linear-gradient(180deg, rgba(255,255,255,.22), transparent);
    pointer-events: none;
    border-radius: inherit;
  }
  .fb09-glass-fab svg { fill: #fff; position: relative; z-index: 1; }

  /* circle */
  .fb09-glass-fab--circle { width: 64px; height: 64px; border-radius: 50%; }
  .fb09-glass-fab--circle::after { border-radius: 50% 50% 0 0; }
  .fb09-glass-fab--circle svg { width: 26px; height: 26px; }

  /* pill */
  .fb09-glass-fab--pill {
    height: 54px;
    padding: 0 28px;
    border-radius: 27px;
    gap: 10px;
    display: flex;
    align-items: center;
    font-family: 'Inter', sans-serif;
    font-size: .9rem;
    font-weight: 600;
    color: #fff;
    letter-spacing: .01em;
  }
  .fb09-glass-fab--pill::after { border-radius: 27px 27px 0 0; }
  .fb09-glass-fab--pill svg { width: 20px; height: 20px; }

  /* square */
  .fb09-glass-fab--sq { width: 64px; height: 64px; border-radius: 18px; }
  .fb09-glass-fab--sq::after { border-radius: 18px 18px 0 0; }
  .fb09-glass-fab--sq svg { width: 26px; height: 26px; }

  /* tinted variants */
  .fb09-glass-fab--blue {
    background: rgba(99,102,241,.28);
    border-color: rgba(129,140,248,.4);
    box-shadow: 0 8px 32px rgba(99,102,241,.35), inset 0 1px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(255,255,255,.06);
  }
  .fb09-glass-fab--blue:hover { background: rgba(99,102,241,.4); box-shadow: 0 16px 48px rgba(99,102,241,.5), inset 0 1px 0 rgba(255,255,255,.35); }

  .fb09-glass-fab--rose {
    background: rgba(236,72,153,.28);
    border-color: rgba(251,113,133,.4);
    box-shadow: 0 8px 32px rgba(236,72,153,.35), inset 0 1px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(255,255,255,.06);
  }
  .fb09-glass-fab--rose:hover { background: rgba(236,72,153,.42); box-shadow: 0 16px 48px rgba(236,72,153,.5), inset 0 1px 0 rgba(255,255,255,.35); }

  .fb09-glass-fab--cyan {
    background: rgba(6,182,212,.25);
    border-color: rgba(34,211,238,.4);
    box-shadow: 0 8px 32px rgba(6,182,212,.35), inset 0 1px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(255,255,255,.06);
  }
  .fb09-glass-fab--cyan:hover { background: rgba(6,182,212,.4); box-shadow: 0 16px 48px rgba(6,182,212,.5), inset 0 1px 0 rgba(255,255,255,.35); }

  /* ── layout ── */
  .fb09-scene { position: relative; z-index: 2; width: min(760px, 100%); }

  .fb09-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 24px;
  }
  .fb09-card {
    background: rgba(255,255,255,.06);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 20px;
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }
  .fb09-card-lbl {
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255,255,255,.4);
  }

  .fb09-pill-row {
    background: rgba(255,255,255,.06);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 20px;
    padding: 28px 24px;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
    align-items: center;
  }

  @media (max-width: 560px) {
    .fb09-grid { grid-template-columns: 1fr 1fr; }
  }
  @media (prefers-reduced-motion: reduce) {
    .fb09-blob { animation: none; }
    .fb09-glass-fab { transition: none; }
  }
```

### 10. Neon Glow FAB

**Type:** Pure CSS
**Description:** Neon glow floating button for dark cyberpunk UIs with animated border glow, scan-line overlay, and Orbitron display font.

**HTML:**
```html
<div class="fb10">
<h1>Neon Glow FAB</h1>
<p class="fb10-sub">Cyberpunk dark UI floating action buttons — border glow, pulsing ring, fill and outline variants. Hover to intensify.</p>

<div class="fb10-scene">

  <!-- outline glow row -->
  <div class="fb10-cluster">
    <span class="fb10-cluster-title">Outline glow</span>

    <button class="fb10-nfab fb10-nfab--circle fb10-nfab--violet fb10-nfab--scanline" aria-label="Add">
      <svg viewBox="0 0 24 24"><path d="M19 11h-6V5h-2v6H5v2h6v6h2v-6h6z"/></svg>
    </button>
    <button class="fb10-nfab fb10-nfab--circle fb10-nfab--cyan fb10-nfab--scanline" aria-label="Share">
      <svg viewBox="0 0 24 24"><path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11A3 3 0 0021 5a3 3 0 00-3-3 3 3 0 00-3 3c0 .24.04.47.09.7L8.04 9.81A3 3 0 005 9a3 3 0 00-3 3 3 3 0 003 3 3 3 0 003.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92S19.61 16.08 18 16.08z"/></svg>
    </button>
    <button class="fb10-nfab fb10-nfab--circle fb10-nfab--magenta fb10-nfab--scanline" aria-label="Like">
      <svg viewBox="0 0 24 24"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5A5.5 5.5 0 0112 5.09 5.5 5.5 0 0122 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>
    </button>
    <button class="fb10-nfab fb10-nfab--circle fb10-nfab--green fb10-nfab--scanline" aria-label="Check">
      <svg viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z"/></svg>
    </button>
    <button class="fb10-nfab fb10-nfab--circle fb10-nfab--amber fb10-nfab--scanline" aria-label="Star">
      <svg viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
    </button>
  </div>

  <!-- filled + pills -->
  <div class="fb10-cluster">
    <span class="fb10-cluster-title">Filled · extended pill</span>

    <button class="fb10-nfab fb10-nfab--circle fb10-nfab--filled-violet fb10-nfab--scanline" aria-label="Upload">
      <svg viewBox="0 0 24 24" width="26" height="26" fill="white"><path d="M9 16h6v-6h4l-7-7-7 7h4v6zm-4 2h14v2H5v-2z"/></svg>
    </button>

    <button class="fb10-nfab fb10-nfab--pill fb10-nfab--violet fb10-nfab--scanline" aria-label="Initialize">
      <svg viewBox="0 0 24 24"><path d="M19 11h-6V5h-2v6H5v2h6v6h2v-6h6z"/></svg>
      Initialize
    </button>

    <button class="fb10-nfab fb10-nfab--pill fb10-nfab--cyan fb10-nfab--scanline" aria-label="Connect">
      <svg viewBox="0 0 24 24"><path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7a5 5 0 000 10h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4a5 5 0 000-10z"/></svg>
      Connect
    </button>

    <button class="fb10-nfab fb10-nfab--pill fb10-nfab--magenta fb10-nfab--scanline" aria-label="Launch">
      <svg viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5v-9l6 4.5-6 4.5z"/></svg>
      Launch
    </button>
  </div>

</div>
</div>
```

**CSS:**
```css
.fb10, .fb10 *, .fb10 *::before, .fb10 *::after { box-sizing: border-box; margin: 0; padding: 0; }
.fb10 {
    font-family: 'Rajdhani', sans-serif;
    background: #050508;
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 40px 20px;
    color: #c4c4c8;
    position: relative;
    overflow: hidden;
  }

  /* grid lines */
  .fb10::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image:
      linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
  }

  h1 {
    font-family: 'Orbitron', monospace;
    font-size: clamp(1.4rem, 4vw, 2.2rem);
    font-weight: 700;
    text-align: center;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 0 20px rgba(99,102,241,.8), 0 0 60px rgba(99,102,241,.4);
    margin-bottom: 10px;
    position: relative;
    z-index: 2;
  }
  p.fb10-sub {
    text-align: center;
    color: rgba(196,196,200,.5);
    font-size: .92rem;
    max-width: 44ch;
    margin: 0 auto 52px;
    line-height: 1.6;
    z-index: 2;
    position: relative;
  }

  /* ── NEON FAB base ── */
  .fb10-nfab {
    position: relative;
    border: none;
    cursor: pointer;
    display: grid;
    place-items: center;
    outline: none;
    background: transparent;
    transition:
      transform .2s cubic-bezier(.34,1.56,.64,1),
      box-shadow .2s ease,
      filter .2s ease;
  }

  /* neon circle */
  .fb10-nfab--circle {
    width: 66px;
    height: 66px;
    border-radius: 50%;
  }
  .fb10-nfab--circle svg { width: 26px; height: 26px; position: relative; z-index: 1; }

  /* solid dark core + colored border + glow */
  .fb10-nfab--violet {
    background: #0e0c1a;
    border: 2px solid #7c3aed;
    box-shadow: 0 0 16px rgba(124,58,237,.6), 0 0 40px rgba(124,58,237,.25), inset 0 0 14px rgba(124,58,237,.12);
    color: #c4b5fd;
  }
  .fb10-nfab--violet svg { fill: #c4b5fd; }
  .fb10-nfab--violet:hover {
    transform: scale(1.1);
    box-shadow: 0 0 28px rgba(124,58,237,1), 0 0 70px rgba(124,58,237,.5), inset 0 0 20px rgba(124,58,237,.2);
    filter: brightness(1.15);
  }

  .fb10-nfab--cyan {
    background: #021218;
    border: 2px solid #06b6d4;
    box-shadow: 0 0 16px rgba(6,182,212,.6), 0 0 40px rgba(6,182,212,.25), inset 0 0 14px rgba(6,182,212,.12);
    color: #67e8f9;
  }
  .fb10-nfab--cyan svg { fill: #67e8f9; }
  .fb10-nfab--cyan:hover {
    transform: scale(1.1);
    box-shadow: 0 0 28px rgba(6,182,212,1), 0 0 70px rgba(6,182,212,.5), inset 0 0 20px rgba(6,182,212,.2);
    filter: brightness(1.15);
  }

  .fb10-nfab--magenta {
    background: #180812;
    border: 2px solid #d946ef;
    box-shadow: 0 0 16px rgba(217,70,239,.6), 0 0 40px rgba(217,70,239,.25), inset 0 0 14px rgba(217,70,239,.12);
    color: #f0abfc;
  }
  .fb10-nfab--magenta svg { fill: #f0abfc; }
  .fb10-nfab--magenta:hover {
    transform: scale(1.1);
    box-shadow: 0 0 28px rgba(217,70,239,1), 0 0 70px rgba(217,70,239,.5), inset 0 0 20px rgba(217,70,239,.2);
    filter: brightness(1.15);
  }

  .fb10-nfab--green {
    background: #041208;
    border: 2px solid #22c55e;
    box-shadow: 0 0 16px rgba(34,197,94,.6), 0 0 40px rgba(34,197,94,.25), inset 0 0 14px rgba(34,197,94,.12);
    color: #86efac;
  }
  .fb10-nfab--green svg { fill: #86efac; }
  .fb10-nfab--green:hover {
    transform: scale(1.1);
    box-shadow: 0 0 28px rgba(34,197,94,1), 0 0 70px rgba(34,197,94,.5), inset 0 0 20px rgba(34,197,94,.2);
    filter: brightness(1.15);
  }

  .fb10-nfab--amber {
    background: #140e02;
    border: 2px solid #f59e0b;
    box-shadow: 0 0 16px rgba(245,158,11,.6), 0 0 40px rgba(245,158,11,.25), inset 0 0 14px rgba(245,158,11,.12);
    color: #fcd34d;
  }
  .fb10-nfab--amber svg { fill: #fcd34d; }
  .fb10-nfab--amber:hover {
    transform: scale(1.1);
    box-shadow: 0 0 28px rgba(245,158,11,1), 0 0 70px rgba(245,158,11,.5), inset 0 0 20px rgba(245,158,11,.2);
    filter: brightness(1.15);
  }

  /* pulse animation ring */
  .fb10-nfab::before {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: inherit;
    border: 1.5px solid currentColor;
    opacity: 0;
    animation: fb10-neon-pulse 2.8s ease-out infinite;
  }
  @keyframes fb10-neon-pulse {
    0% { transform: scale(.88); opacity: .6; }
    70% { transform: scale(1.22); opacity: 0; }
    100% { transform: scale(1.22); opacity: 0; }
  }

  /* filled neon variants */
  .fb10-nfab--filled-violet {
    background: linear-gradient(135deg, #7c3aed, #5b21b6);
    border: none;
    box-shadow: 0 0 24px rgba(124,58,237,.7), 0 0 60px rgba(124,58,237,.3), inset 0 1px 0 rgba(255,255,255,.15);
  }
  .fb10-nfab--filled-violet svg { fill: #fff; }
  .fb10-nfab--filled-violet:hover {
    transform: scale(1.1);
    box-shadow: 0 0 40px rgba(124,58,237,1), 0 0 90px rgba(124,58,237,.5), inset 0 1px 0 rgba(255,255,255,.2);
  }

  /* extended neon pill */
  .fb10-nfab--pill {
    width: auto;
    height: 54px;
    padding: 0 26px;
    border-radius: 27px;
    gap: 10px;
    display: flex;
    align-items: center;
    font-family: 'Orbitron', monospace;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
  }
  .fb10-nfab--pill svg { width: 18px; height: 18px; }

  /* scanning line animation on hover */
  .fb10-nfab--scanline::after {
    content: '';
    position: absolute;
    left: -100%;
    top: 0;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent);
    border-radius: inherit;
    transform: skewX(-15deg);
    transition: left 0s;
  }
  .fb10-nfab--scanline:hover::after {
    left: 160%;
    transition: left .5s ease;
  }

  /* ── layout ── */
  .fb10-scene { position: relative; z-index: 2; width: min(760px, 100%); }
  .fb10-cluster {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    justify-content: center;
    align-items: center;
    background: rgba(255,255,255,.02);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 24px;
    padding: 40px 32px;
    margin-bottom: 24px;
  }
  .fb10-cluster-title {
    width: 100%;
    text-align: center;
    font-family: 'Orbitron', monospace;
    font-size: .62rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgba(196,196,200,.3);
    margin-bottom: 8px;
  }

  @media (prefers-reduced-motion: reduce) {
    .fb10-nfab, .fb10-nfab::before { animation: none; transition: none; }
    .fb10-nfab--scanline::after { display: none; }
  }
```

### 11. Compose + Tooltip FAB

**Type:** Pure CSS
**Description:** Floating compose button with 3 tooltip styles: left hover tooltip, bottom fade tooltip, and slide-extend label.

**HTML:**
```html
<div class="fb11">
<h1>Floating Compose Button</h1>
<p class="fb11-sub">Three label tooltip styles — hover reveal, bottom fade, and slide-extend. Each pattern for a different layout context.</p>

<div class="fb11-inbox">
  <div class="fb11-inbox-header">
    <h2>Inbox</h2>
    <span>3 unread</span>
  </div>

  <div class="fb11-mail-item fb11-unread">
    <div class="fb11-mail-avatar fb11-av--a">A</div>
    <div class="fb11-mail-info">
      <div class="fb11-mail-from">Alex Chen</div>
      <div class="fb11-mail-subject">Re: Q3 design system updates</div>
      <div class="fb11-mail-preview">Here are the final tokens and component specs...</div>
    </div>
    <div class="fb11-mail-time">9:41 AM</div>
  </div>

  <div class="fb11-mail-item fb11-unread">
    <div class="fb11-mail-avatar fb11-av--b">M</div>
    <div class="fb11-mail-info">
      <div class="fb11-mail-from">Mia Torres</div>
      <div class="fb11-mail-subject">Figma handoff is ready</div>
      <div class="fb11-mail-preview">I've published all the frames, you can access the...</div>
    </div>
    <div class="fb11-mail-time">8:15 AM</div>
  </div>

  <div class="fb11-mail-item fb11-unread">
    <div class="fb11-mail-avatar fb11-av--e">S</div>
    <div class="fb11-mail-info">
      <div class="fb11-mail-from">Sam Rivera</div>
      <div class="fb11-mail-subject">Can we ship the FAB by Friday?</div>
      <div class="fb11-mail-preview">The client loved the tooltip direction, just wants...</div>
    </div>
    <div class="fb11-mail-time">Yesterday</div>
  </div>

  <div class="fb11-mail-item">
    <div class="fb11-mail-avatar fb11-av--c">J</div>
    <div class="fb11-mail-info">
      <div class="fb11-mail-from">Jordan Kim</div>
      <div class="fb11-mail-subject">Weekly standup notes</div>
      <div class="fb11-mail-preview">Attached are the notes from today's call. Key...</div>
    </div>
    <div class="fb11-mail-time">Mon</div>
  </div>

  <div class="fb11-mail-item">
    <div class="fb11-mail-avatar fb11-av--d">L</div>
    <div class="fb11-mail-info">
      <div class="fb11-mail-from">Lisa Park</div>
      <div class="fb11-mail-subject">Invoice #2047 approved</div>
      <div class="fb11-mail-preview">Payment will be processed within 5 business days...</div>
    </div>
    <div class="fb11-mail-time">Sun</div>
  </div>

  <!-- FAB VARIANT 1: tooltip left -->
  <div class="fb11-fab-wrap">
    <button class="fb11-fab-compose" aria-label="Compose new email">
      <svg viewBox="0 0 24 24"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a1 1 0 000-1.41l-2.34-2.34a1 1 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>
      <span class="fb11-badge">3</span>
    </button>
    <span class="fb11-fab-tooltip">Compose email</span>
  </div>
</div>

<!-- Two more variants shown below the inbox -->
<div style="display:flex;gap:48px;margin-top:40px;align-items:flex-end;flex-wrap:wrap;justify-content:center">

  <!-- Variant 2: bottom label -->
  <div class="fb11-fab-wrap fb11-fab-wrap--bottom" style="position:static">
    <button class="fb11-fab-compose fb11-fab-compose--b" style="background:linear-gradient(135deg,#8b5cf6,#7c3aed);box-shadow:0 6px 22px rgba(124,58,237,.4),inset 0 1px 0 rgba(255,255,255,.2)" aria-label="New post">
      <svg viewBox="0 0 24 24"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a1 1 0 000-1.41l-2.34-2.34a1 1 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>
    </button>
    <span class="fb11-fab-lbl-bottom">New post</span>
    <p style="font-size:.72rem;color:#9ca3af;text-align:center;margin-top:4px">Bottom label</p>
  </div>

  <!-- Variant 3: slide extend -->
  <div style="display:flex;align-items:center;flex-direction:column;gap:8px">
    <div class="fb11-fab-wrap fb11-fab-wrap--slide" style="position:static">
      <button class="fb11-fab-compose fb11-fab-compose--slide" style="background:linear-gradient(135deg,#10b981,#059669);box-shadow:0 6px 22px rgba(16,185,129,.4),inset 0 1px 0 rgba(255,255,255,.2)" aria-label="Compose">
        <svg viewBox="0 0 24 24"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a1 1 0 000-1.41l-2.34-2.34a1 1 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>
      </button>
      <span class="fb11-fab-slide-lbl">Compose</span>
    </div>
    <p style="font-size:.72rem;color:#9ca3af;text-align:center">Slide extend ← hover</p>
  </div>

</div>
</div>
```

**CSS:**
```css
.fb11, .fb11 *, .fb11 *::before, .fb11 *::after { box-sizing: border-box; margin: 0; padding: 0; }
.fb11 {
    font-family: 'Inter', sans-serif;
    background: #f9fafb;
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 40px 20px;
    color: #111827;
  }

  h1 {
    font-size: clamp(1.6rem,5vw,2.4rem);
    font-weight: 700;
    text-align: center;
    letter-spacing: -.02em;
    margin-bottom: 8px;
  }
  p.fb11-sub {
    text-align: center;
    color: #6b7280;
    font-size: .9rem;
    max-width: 44ch;
    margin: 0 auto 52px;
    line-height: 1.6;
  }

  /* ── email app mockup ── */
  .fb11-inbox {
    width: min(700px, 100%);
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 4px 32px rgba(0,0,0,.07);
    position: relative;
    min-height: 500px;
  }

  .fb11-inbox-header {
    background: #fff;
    border-bottom: 1px solid #f3f4f6;
    padding: 18px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .fb11-inbox-header h2 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #111827;
  }
  .fb11-inbox-header span {
    font-size: .78rem;
    color: #9ca3af;
  }

  .fb11-mail-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 24px;
    border-bottom: 1px solid #f9fafb;
    cursor: pointer;
    transition: background .12s;
  }
  .fb11-mail-item:hover { background: #f9fafb; }
  .fb11-mail-item.fb11-unread { background: #f0f9ff; border-left: 3px solid #3b82f6; padding-left: 21px; }
  .fb11-mail-avatar {
    width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
    display: grid; place-items: center; font-weight: 700; font-size: .9rem; color: #fff;
  }
  .fb11-av--a { background: linear-gradient(135deg,#6366f1,#8b5cf6); }
  .fb11-av--b { background: linear-gradient(135deg,#06b6d4,#0ea5e9); }
  .fb11-av--c { background: linear-gradient(135deg,#10b981,#059669); }
  .fb11-av--d { background: linear-gradient(135deg,#f59e0b,#d97706); }
  .fb11-av--e { background: linear-gradient(135deg,#f43f5e,#e11d48); }

  .fb11-mail-info { flex: 1; min-width: 0; }
  .fb11-mail-from { font-size: .86rem; font-weight: 600; color: #111827; }
  .fb11-mail-subject { font-size: .82rem; color: #374151; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .fb11-mail-preview { font-size: .78rem; color: #9ca3af; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .fb11-mail-time { font-size: .72rem; color: #9ca3af; flex-shrink: 0; }
  .fb11-unread .fb11-mail-from, .fb11-unread .fb11-mail-subject { color: #1f2937; font-weight: 700; }

  /* ═══════════════════════════
     FAB COMPOSE BUTTON VARIANTS
  ═══════════════════════════ */

  /* ── 1: Tooltip on hover (left side) ── */
  .fb11-fab-wrap {
    position: absolute;
    bottom: 28px;
    right: 28px;
    display: flex;
    align-items: center;
    gap: 0;
  }

  .fb11-fab-tooltip {
    background: #111827;
    color: #fff;
    font-size: .78rem;
    font-weight: 600;
    padding: 7px 14px;
    border-radius: 8px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transform: translateX(8px);
    transition: opacity .2s ease, transform .2s ease;
    position: absolute;
    right: calc(100% + 12px);
    /* arrow */
  }
  .fb11-fab-tooltip::after {
    content: '';
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    border: 5px solid transparent;
    border-left-color: #111827;
  }

  .fb11-fab-compose {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    box-shadow: 0 6px 22px rgba(59,130,246,.4), inset 0 1px 0 rgba(255,255,255,.2);
    transition: transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s ease;
    position: relative;
    z-index: 2;
  }
  .fb11-fab-compose:hover {
    transform: scale(1.1);
    box-shadow: 0 10px 32px rgba(59,130,246,.6), inset 0 1px 0 rgba(255,255,255,.2);
  }
  .fb11-fab-compose:hover + .fb11-fab-tooltip,
  .fb11-fab-compose:focus + .fb11-fab-tooltip {
    opacity: 1;
    transform: none;
  }
  .fb11-fab-compose svg { width: 24px; height: 24px; fill: #fff; }

  /* ── 2: Bottom label that fades in ── */
  .fb11-fab-wrap--bottom {
    flex-direction: column;
    gap: 8px;
    align-items: center;
  }
  .fb11-fab-lbl-bottom {
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .05em;
    color: #6b7280;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity .2s ease, transform .2s ease;
    pointer-events: none;
    order: 2;
  }
  .fb11-fab-compose--b { order: 1; }
  .fb11-fab-compose--b:hover ~ .fb11-fab-lbl-bottom,
  .fb11-fab-compose--b:focus ~ .fb11-fab-lbl-bottom { opacity: 1; transform: none; }

  /* ── 3: Slide-in extended label ── */
  .fb11-fab-wrap--slide {
    flex-direction: row-reverse;
    align-items: center;
    gap: 0;
  }
  .fb11-fab-slide-lbl {
    font-size: .88rem;
    font-weight: 600;
    color: #fff;
    background: #1d4ed8;
    border-radius: 30px 0 0 30px;
    padding: 0 20px 0 18px;
    height: 58px;
    display: flex;
    align-items: center;
    max-width: 0;
    overflow: hidden;
    white-space: nowrap;
    opacity: 0;
    transition: max-width .3s ease, opacity .25s ease, padding .3s ease;
    pointer-events: none;
  }
  .fb11-fab-compose--slide { border-radius: 50%; z-index: 2; flex-shrink: 0; }
  .fb11-fab-compose--slide:hover { border-radius: 0 30px 30px 0; }
  .fb11-fab-compose--slide:hover + .fb11-fab-slide-lbl,
  .fb11-fab-compose--slide:focus + .fb11-fab-slide-lbl {
    max-width: 140px;
    opacity: 1;
  }

  /* ── app corner badges ── */
  .fb11-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #ef4444;
    color: #fff;
    font-size: .6rem;
    font-weight: 700;
    display: grid;
    place-items: center;
    border: 2px solid #fff;
  }

  @media (prefers-reduced-motion: reduce) {
    .fb11-fab-compose, .fb11-fab-tooltip, .fb11-fab-lbl-bottom, .fb11-fab-slide-lbl { transition: none; }
  }
```

### 12. Draggable FAB

**Type:** CSS + JS
**Description:** Fully draggable floating action button with corner snapping, touch and mouse support, particle trail effect, and position indicator.

**HTML:**
```html
<div class="fb12">
<!-- corner snap zones -->
<div class="fb12-snap-zone" id="fb12-sz-tl">TL</div>
<div class="fb12-snap-zone" id="fb12-sz-tr">TR</div>
<div class="fb12-snap-zone" id="fb12-sz-bl">BL</div>
<div class="fb12-snap-zone" id="fb12-sz-br">BR</div>

<div id="fb12-pos-label"></div>

<div class="fb12-page-mock">
  <h1>Draggable<br>Floating Button</h1>
  <p>Grab the indigo FAB and drag it anywhere on screen. It snaps to the nearest corner when released. Touch and mouse supported.</p>

  <div class="fb12-hint-grid">
    <div class="fb12-hint-card">
      <div class="fb12-icon">✋</div>
      <span>Drag anywhere on screen</span>
    </div>
    <div class="fb12-hint-card">
      <div class="fb12-icon">🎯</div>
      <span>Snaps to nearest corner</span>
    </div>
    <div class="fb12-hint-card">
      <div class="fb12-icon">📱</div>
      <span>Touch &amp; mouse support</span>
    </div>
  </div>
</div>

<!-- DRAGGABLE FAB -->
<div id="fb12-drag-fab" role="button" aria-label="Draggable action button" tabindex="0">
  <div class="fb12-drag-btn">
    <svg viewBox="0 0 24 24"><path d="M19 11h-6V5h-2v6H5v2h6v6h2v-6h6z"/></svg>
  </div>
</div>
</div>
```

**CSS:**
```css
.fb12, .fb12 *, .fb12 *::before, .fb12 *::after { box-sizing: border-box; margin: 0; padding: 0; }
.fb12 {
    font-family: 'Inter', sans-serif;
    background: #f1f5f9;
    min-height: 100vh;
    overflow: hidden;
    color: #334155;
    display: grid;
    place-items: center;
    position: relative;
  }

  /* ── page mockup ── */
  .fb12-page-mock {
    width: min(720px, 100%);
    padding: 32px 24px;
    text-align: center;
  }
  .fb12-page-mock h1 {
    font-size: clamp(1.8rem, 5vw, 2.6rem);
    font-weight: 700;
    letter-spacing: -.025em;
    color: #0f172a;
    margin-bottom: 14px;
  }
  .fb12-page-mock p {
    color: #64748b;
    font-size: .95rem;
    line-height: 1.65;
    max-width: 46ch;
    margin: 0 auto 32px;
  }

  .fb12-hint-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    max-width: 480px;
    margin: 0 auto;
  }
  .fb12-hint-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 16px 12px;
    text-align: center;
    box-shadow: 0 1px 4px rgba(0,0,0,.05);
  }
  .fb12-hint-card .fb12-icon { font-size: 1.6rem; margin-bottom: 8px; }
  .fb12-hint-card span { font-size: .76rem; color: #64748b; font-weight: 500; display: block; }

  /* ── DRAGGABLE FAB ── */
  #fb12-drag-fab {
    position: fixed;
    bottom: 32px;
    right: 32px;
    z-index: 1000;
    touch-action: none;
    user-select: none;
    cursor: grab;
  }
  #fb12-drag-fab.fb12-dragging { cursor: grabbing; }

  .fb12-drag-btn {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    border: none;
    display: grid;
    place-items: center;
    box-shadow:
      0 8px 28px rgba(99,102,241,.45),
      inset 0 1px 0 rgba(255,255,255,.2);
    transition: transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s ease;
    pointer-events: none;
    position: relative;
  }
  #fb12-drag-fab:not(.fb12-dragging):hover .fb12-drag-btn {
    transform: scale(1.08);
    box-shadow: 0 12px 36px rgba(99,102,241,.6), inset 0 1px 0 rgba(255,255,255,.2);
  }
  #fb12-drag-fab.fb12-dragging .fb12-drag-btn {
    transform: scale(1.12);
    box-shadow: 0 18px 48px rgba(99,102,241,.55), 0 4px 8px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.2);
    cursor: grabbing;
  }
  .fb12-drag-btn svg { width: 26px; height: 26px; fill: #fff; pointer-events: none; }

  /* drag handle dots */
  .fb12-drag-btn::before {
    content: '⋮⋮';
    position: absolute;
    top: -5px;
    left: 50%;
    transform: translateX(-50%);
    font-size: .6rem;
    color: rgba(255,255,255,.5);
    letter-spacing: 2px;
    pointer-events: none;
  }

  /* ripple trail */
  .fb12-trail {
    position: fixed;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(99,102,241,.35);
    pointer-events: none;
    transform: translate(-50%,-50%);
    animation: fb12-trail-fade .6s ease-out forwards;
    z-index: 999;
  }
  @keyframes fb12-trail-fade {
    0%  { transform: translate(-50%,-50%) scale(1); opacity: .5; }
    100% { transform: translate(-50%,-50%) scale(.1); opacity: 0; }
  }

  /* position indicator */
  #fb12-pos-label {
    position: fixed;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(15,23,42,.85);
    backdrop-filter: blur(8px);
    color: rgba(255,255,255,.7);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .04em;
    padding: 7px 16px;
    border-radius: 20px;
    z-index: 1001;
    font-family: monospace;
    opacity: 0;
    transition: opacity .2s;
  }
  #fb12-pos-label.fb12-visible { opacity: 1; }

  /* snap zones hint (corners) */
  .fb12-snap-zone {
    position: fixed;
    width: 80px;
    height: 80px;
    border: 2px dashed rgba(99,102,241,.2);
    border-radius: 50%;
    pointer-events: none;
    z-index: 998;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .6rem;
    color: rgba(99,102,241,.3);
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    transition: border-color .2s, color .2s;
  }
  .fb12-snap-zone.fb12-active { border-color: rgba(99,102,241,.6); color: rgba(99,102,241,.7); }
  #fb12-sz-tl { top: 16px;    left: 16px; }
  #fb12-sz-tr { top: 16px;    right: 16px; }
  #fb12-sz-bl { bottom: 16px; left: 16px; }
  #fb12-sz-br { bottom: 16px; right: 16px; }

  @media (prefers-reduced-motion: reduce) {
    .fb12-drag-btn { transition: none; }
    .fb12-trail { animation: none; }
  }
```

**JS:**
```js
(function() {
  const fab = document.getElementById('fb12-drag-fab');
  const posLabel = document.getElementById('fb12-pos-label');
  const SNAP = 24; // px from edge
  const TRAIL = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  let isDragging = false, startX, startY, fabX, fabY, lastMoveX, lastMoveY;

  // Set initial position
  fabX = window.innerWidth - fab.offsetWidth - 32;
  fabY = window.innerHeight - fab.offsetHeight - 32;
  setPos(fabX, fabY);

  function setPos(x, y) {
    x = Math.max(SNAP, Math.min(x, window.innerWidth - fab.offsetWidth - SNAP));
    y = Math.max(SNAP, Math.min(y, window.innerHeight - fab.offsetHeight - SNAP));
    fab.style.left = x + 'px';
    fab.style.top  = y + 'px';
    fab.style.right = 'auto';
    fab.style.bottom = 'auto';
    fabX = x; fabY = y;
  }

  function snapToCorner() {
    const cx = fabX + fab.offsetWidth / 2;
    const cy = fabY + fab.offsetHeight / 2;
    const W  = window.innerWidth;
    const H  = window.innerHeight;
    const PAD = 28;
    let tx = cx < W/2 ? PAD : W - fab.offsetWidth - PAD;
    let ty = cy < H/2 ? PAD : H - fab.offsetHeight - PAD;
    // animated spring to corner
    fab.style.transition = 'left .35s cubic-bezier(.34,1.56,.64,1), top .35s cubic-bezier(.34,1.56,.64,1)';
    setPos(tx, ty);
    setTimeout(() => { fab.style.transition = ''; }, 400);
  }

  function spawnTrail(x, y) {
    if (TRAIL) return;
    const dot = document.createElement('div');
    dot.className = 'fb12-trail';
    dot.style.left = x + 'px';
    dot.style.top  = y + 'px';
    document.body.appendChild(dot);
    setTimeout(() => dot.remove(), 700);
  }

  function highlightSnap() {
    const cx = fabX + fab.offsetWidth / 2;
    const cy = fabY + fab.offsetHeight / 2;
    const W = window.innerWidth, H = window.innerHeight;
    const isLeft = cx < W/2, isTop = cy < H/2;
    document.getElementById('fb12-sz-tl').classList.toggle('fb12-active', isLeft && isTop);
    document.getElementById('fb12-sz-tr').classList.toggle('fb12-active', !isLeft && isTop);
    document.getElementById('fb12-sz-bl').classList.toggle('fb12-active', isLeft && !isTop);
    document.getElementById('fb12-sz-br').classList.toggle('fb12-active', !isLeft && !isTop);
  }

  // Mouse
  fab.addEventListener('mousedown', e => {
    e.preventDefault();
    isDragging = true;
    fab.classList.add('fb12-dragging');
    startX = e.clientX - fabX;
    startY = e.clientY - fabY;
    posLabel.classList.add('fb12-visible');
  });

  window.addEventListener('mousemove', e => {
    if (!isDragging) return;
    setPos(e.clientX - startX, e.clientY - startY);
    highlightSnap();
    posLabel.textContent = `x:${Math.round(fabX)} y:${Math.round(fabY)}`;
    if (Math.abs(e.clientX - (lastMoveX||e.clientX)) > 12 || Math.abs(e.clientY - (lastMoveY||e.clientY)) > 12) {
      spawnTrail(e.clientX, e.clientY);
      lastMoveX = e.clientX; lastMoveY = e.clientY;
    }
  });

  window.addEventListener('mouseup', () => {
    if (!isDragging) return;
    isDragging = false;
    fab.classList.remove('fb12-dragging');
    snapToCorner();
    posLabel.classList.remove('fb12-visible');
    document.querySelectorAll('.fb12-snap-zone').forEach(z => z.classList.remove('fb12-active'));
  });

  // Touch
  fab.addEventListener('touchstart', e => {
    const t = e.touches[0];
    isDragging = true;
    fab.classList.add('fb12-dragging');
    startX = t.clientX - fabX;
    startY = t.clientY - fabY;
    posLabel.classList.add('fb12-visible');
  }, { passive: true });

  window.addEventListener('touchmove', e => {
    if (!isDragging) return;
    const t = e.touches[0];
    setPos(t.clientX - startX, t.clientY - startY);
    highlightSnap();
    posLabel.textContent = `x:${Math.round(fabX)} y:${Math.round(fabY)}`;
  }, { passive: true });

  window.addEventListener('touchend', () => {
    if (!isDragging) return;
    isDragging = false;
    fab.classList.remove('fb12-dragging');
    snapToCorner();
    posLabel.classList.remove('fb12-visible');
    document.querySelectorAll('.fb12-snap-zone').forEach(z => z.classList.remove('fb12-active'));
  });
})();
```

### 13. Notification Bell FAB

**Type:** CSS + JS
**Description:** Floating notification bell button with ring animation, multiple badge variants, and an interactive dropdown notification panel.

**HTML:**
```html
<div class="fb13">
<h1>Floating Notification Bell</h1>
<p class="fb13-sub">Animated bell FAB with number badge, pulse ring, and an expandable notification dropdown. Hover any bell to hear it ring.</p>

<div class="fb13-scene">

  <!-- Dark bordered -->
  <div class="fb13-card">
    <span class="fb13-card-tag">Dark bordered</span>
    <button class="fb13-bell-fab fb13-bell-fab--dark" aria-label="Notifications (7 unread)">
      <svg class="fb13-bell-icon" viewBox="0 0 24 24"><path d="M12 22c1.1 0 2-.9 2-2h-4a2 2 0 002 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z"/></svg>
      <span class="fb13-bell-badge fb13-bell-badge--pulse">7</span>
    </button>
    <span style="font-size:.72rem;color:#475569">Hover to ring</span>
  </div>

  <!-- Indigo filled -->
  <div class="fb13-card">
    <span class="fb13-card-tag">Indigo filled</span>
    <button class="fb13-bell-fab fb13-bell-fab--indigo" aria-label="Notifications (3 unread)">
      <svg class="fb13-bell-icon" viewBox="0 0 24 24"><path d="M12 22c1.1 0 2-.9 2-2h-4a2 2 0 002 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z"/></svg>
      <span class="fb13-bell-badge">3</span>
    </button>
  </div>

  <!-- Amber alert -->
  <div class="fb13-card">
    <span class="fb13-card-tag">Amber alert</span>
    <button class="fb13-bell-fab fb13-bell-fab--amber fb13-bell-fab--auto" aria-label="Alerts">
      <svg class="fb13-bell-icon" viewBox="0 0 24 24"><path d="M12 22c1.1 0 2-.9 2-2h-4a2 2 0 002 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z"/></svg>
      <span class="fb13-bell-badge" style="background:#ef4444">!</span>
    </button>
    <span style="font-size:.72rem;color:#475569">Auto-rings</span>
  </div>

  <!-- Dot + muted -->
  <div class="fb13-card">
    <span class="fb13-card-tag">Green dot · muted</span>
    <div style="display:flex;gap:20px;align-items:center">
      <button class="fb13-bell-fab fb13-bell-fab--indigo" style="width:54px;height:54px" aria-label="New notification">
        <svg class="fb13-bell-icon" viewBox="0 0 24 24" style="width:22px;height:22px"><path d="M12 22c1.1 0 2-.9 2-2h-4a2 2 0 002 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z"/></svg>
        <span class="fb13-bell-badge fb13-bell-badge--dot"></span>
      </button>
      <button class="fb13-bell-fab fb13-bell-fab--muted" style="width:54px;height:54px" aria-label="Notifications (none)">
        <svg class="fb13-bell-icon" viewBox="0 0 24 24" style="width:22px;height:22px"><path d="M12 22c1.1 0 2-.9 2-2h-4a2 2 0 002 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z"/></svg>
      </button>
    </div>
  </div>

  <!-- Interactive dropdown -->
  <div class="fb13-card" style="grid-column: span 2" id="fb13-card-dropdown">
    <span class="fb13-card-tag">Interactive dropdown — click the bell</span>
    <div class="fb13-interactive-wrap">
      <button class="fb13-bell-fab fb13-bell-fab--indigo" id="fb13-notif-bell" aria-label="Open notifications" aria-expanded="false">
        <svg class="fb13-bell-icon" viewBox="0 0 24 24"><path d="M12 22c1.1 0 2-.9 2-2h-4a2 2 0 002 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z"/></svg>
        <span class="fb13-bell-badge" id="fb13-notif-count">4</span>
      </button>

      <div class="fb13-notif-panel" id="fb13-notif-panel">
        <div class="fb13-np-header">
          <span>Notifications</span>
          <small id="fb13-mark-read">Mark all read</small>
        </div>
        <div class="fb13-np-item">
          <div class="fb13-np-dot fb13-np-dot--blue"></div>
          <div class="fb13-np-text">
            <strong>Alex Chen</strong> <span>mentioned you in a comment</span>
            <time class="fb13-np-time">2 min ago</time>
          </div>
        </div>
        <div class="fb13-np-item">
          <div class="fb13-np-dot fb13-np-dot--green"></div>
          <div class="fb13-np-text">
            <strong>Deploy succeeded</strong> <span>production · v2.4.1</span>
            <time class="fb13-np-time">14 min ago</time>
          </div>
        </div>
        <div class="fb13-np-item">
          <div class="fb13-np-dot fb13-np-dot--amber"></div>
          <div class="fb13-np-text">
            <strong>Payment received</strong> <span>Invoice #2047 paid</span>
            <time class="fb13-np-time">1 hour ago</time>
          </div>
        </div>
        <div class="fb13-np-item">
          <div class="fb13-np-dot fb13-np-dot--blue"></div>
          <div class="fb13-np-text">
            <strong>Mia Torres</strong> <span>shared a file with you</span>
            <time class="fb13-np-time">3 hours ago</time>
          </div>
        </div>
      </div>
    </div>
  </div>

</div>
</div>
```

**CSS:**
```css
.fb13, .fb13 *, .fb13 *::before, .fb13 *::after { box-sizing: border-box; margin: 0; padding: 0; }
.fb13 {
    font-family: 'Inter', sans-serif;
    background: #0f172a;
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 40px 20px;
    color: #e2e8f0;
  }

  h1 {
    font-size: clamp(1.6rem, 5vw, 2.4rem);
    font-weight: 700;
    text-align: center;
    letter-spacing: -.022em;
    margin-bottom: 8px;
  }
  p.fb13-sub {
    text-align: center;
    color: #475569;
    font-size: .9rem;
    max-width: 44ch;
    margin: 0 auto 52px;
    line-height: 1.6;
  }

  .fb13-scene {
    width: min(780px, 100%);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
  }

  .fb13-card {
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 20px;
    padding: 36px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    position: relative;
    overflow: hidden;
  }
  .fb13-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 80% 60% at 50% -10%, rgba(99,102,241,.06), transparent);
    pointer-events: none;
  }
  .fb13-card-tag {
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #475569;
  }

  /* ── BELL FAB ── */
  .fb13-bell-fab {
    position: relative;
    width: 66px;
    height: 66px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: grid;
    place-items: center;
    outline: none;
    transition: transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .2s;
  }

  /* Variant 1: Classic dark */
  .fb13-bell-fab--dark {
    background: #1e293b;
    border: 1.5px solid #334155;
    box-shadow: 0 4px 16px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06);
  }
  .fb13-bell-fab--dark:hover {
    transform: scale(1.1);
    box-shadow: 0 8px 28px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.08);
    border-color: #4f46e5;
  }

  /* Variant 2: Indigo filled */
  .fb13-bell-fab--indigo {
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    box-shadow: 0 6px 22px rgba(99,102,241,.45), inset 0 1px 0 rgba(255,255,255,.18);
  }
  .fb13-bell-fab--indigo:hover {
    transform: scale(1.1);
    box-shadow: 0 10px 32px rgba(99,102,241,.6), inset 0 1px 0 rgba(255,255,255,.2);
  }

  /* Variant 3: Amber alert */
  .fb13-bell-fab--amber {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    box-shadow: 0 6px 22px rgba(245,158,11,.45), inset 0 1px 0 rgba(255,255,255,.18);
  }
  .fb13-bell-fab--amber:hover {
    transform: scale(1.1);
    box-shadow: 0 10px 32px rgba(245,158,11,.6), inset 0 1px 0 rgba(255,255,255,.2);
  }

  /* Variant 4: Muted (no unread) */
  .fb13-bell-fab--muted {
    background: #1e293b;
    border: 1.5px solid #2d3f55;
    box-shadow: 0 2px 8px rgba(0,0,0,.4);
  }
  .fb13-bell-fab--muted:hover {
    transform: scale(1.08);
    border-color: #64748b;
  }

  /* bell icon */
  .fb13-bell-fab svg.fb13-bell-icon {
    width: 28px;
    height: 28px;
    position: relative;
    z-index: 1;
  }
  .fb13-bell-fab--dark svg.fb13-bell-icon,
  .fb13-bell-fab--muted svg.fb13-bell-icon { fill: #94a3b8; }
  .fb13-bell-fab--indigo svg.fb13-bell-icon,
  .fb13-bell-fab--amber svg.fb13-bell-icon { fill: #fff; }

  /* bell ring animation */
  @keyframes fb13-bell-ring {
    0%   { transform: rotate(0deg); }
    10%  { transform: rotate(12deg); }
    20%  { transform: rotate(-10deg); }
    30%  { transform: rotate(8deg); }
    40%  { transform: rotate(-6deg); }
    50%  { transform: rotate(4deg); }
    60%  { transform: rotate(-2deg); }
    70%  { transform: rotate(0deg); }
    100% { transform: rotate(0deg); }
  }

  .fb13-bell-fab:hover .fb13-bell-icon,
  .fb13-bell-fab:focus .fb13-bell-icon { animation: fb13-bell-ring .6s ease-in-out; }
  .fb13-bell-fab--auto .fb13-bell-icon { animation: fb13-bell-ring 1s ease-in-out 1s infinite; animation-play-state: running; }

  /* notification badge */
  .fb13-bell-badge {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 22px;
    height: 22px;
    border-radius: 11px;
    background: #ef4444;
    color: #fff;
    font-size: .65rem;
    font-weight: 700;
    display: grid;
    place-items: center;
    padding: 0 5px;
    border: 2.5px solid #0f172a;
    z-index: 2;
    transform: translate(4px, -4px);
    animation: fb13-badge-in .4s cubic-bezier(.34,1.56,.64,1) both;
  }
  @keyframes fb13-badge-in {
    from { transform: translate(4px,-4px) scale(0); }
    to   { transform: translate(4px,-4px) scale(1); }
  }

  /* pulsing badge */
  .fb13-bell-badge--pulse { animation: fb13-badge-in .4s cubic-bezier(.34,1.56,.64,1) both, fb13-badge-pulse 2s ease-in-out 1s infinite; }
  @keyframes fb13-badge-pulse {
    0%,100% { box-shadow: 0 0 0 0 rgba(239,68,68,.5); }
    50%      { box-shadow: 0 0 0 6px rgba(239,68,68,0); }
  }

  /* dot badge (no number) */
  .fb13-bell-badge--dot {
    width: 13px;
    height: 13px;
    min-width: 0;
    padding: 0;
    border-radius: 50%;
    background: #22c55e;
  }

  /* notification dropdown panel (for the JS variant) */
  .fb13-notif-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 280px;
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 16px;
    box-shadow: 0 16px 48px rgba(0,0,0,.6);
    overflow: hidden;
    opacity: 0;
    transform: translateY(-8px) scale(.97);
    pointer-events: none;
    transform-origin: top right;
    transition: opacity .25s ease, transform .28s cubic-bezier(.34,1.56,.64,1);
    z-index: 20;
  }
  .fb13-notif-panel.fb13-open { opacity: 1; transform: none; pointer-events: auto; }

  .fb13-np-header {
    padding: 14px 16px;
    border-bottom: 1px solid #334155;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .fb13-np-header span { font-size: .8rem; font-weight: 600; color: #e2e8f0; }
  .fb13-np-header small { font-size: .7rem; color: #6366f1; cursor: pointer; }

  .fb13-np-item {
    padding: 12px 16px;
    border-bottom: 1px solid #1e293b;
    display: flex;
    gap: 10px;
    cursor: pointer;
    transition: background .1s;
  }
  .fb13-np-item:hover { background: #243449; }
  .fb13-np-item:last-child { border: 0; }
  .fb13-np-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 5px; }
  .fb13-np-dot--blue { background: #6366f1; }
  .fb13-np-dot--green { background: #22c55e; }
  .fb13-np-dot--amber { background: #f59e0b; }
  .fb13-np-dot--empty { background: transparent; border: 1px solid #334155; }
  .fb13-np-text { font-size: .78rem; line-height: 1.4; }
  .fb13-np-text strong { color: #e2e8f0; font-weight: 600; }
  .fb13-np-text span { color: #64748b; }
  .fb13-np-time { font-size: .66rem; color: #475569; margin-top: 3px; display: block; }

  /* wrapper for interactive demo */
  .fb13-interactive-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }

  @media (prefers-reduced-motion: reduce) {
    .fb13-bell-fab svg.fb13-bell-icon,
    .fb13-bell-fab--auto .fb13-bell-icon,
    .fb13-bell-badge--pulse { animation: none; }
    .fb13-notif-panel { transition: none; }
  }
```

**JS:**
```js
const bell = document.getElementById('fb13-notif-bell');
  const panel = document.getElementById('fb13-notif-panel');
  const countBadge = document.getElementById('fb13-notif-count');
  const markRead = document.getElementById('fb13-mark-read');
  let open = false;

  bell.addEventListener('click', () => {
    open = !open;
    panel.classList.toggle('fb13-open', open);
    bell.setAttribute('aria-expanded', open);
  });

  document.addEventListener('click', e => {
    if (!bell.contains(e.target) && !panel.contains(e.target)) {
      open = false;
      panel.classList.remove('fb13-open');
      bell.setAttribute('aria-expanded', 'false');
    }
  });

  markRead.addEventListener('click', e => {
    e.stopPropagation();
    countBadge.style.display = 'none';
    document.querySelectorAll('.fb13-np-dot').forEach(d => d.className = 'fb13-np-dot fb13-np-dot--empty');
    markRead.textContent = '✓ All read';
  });
```

### 14. Floating Cart Badge

**Type:** CSS + JS
**Description:** Floating cart button with live badge counter, add-to-cart product grid, animated badge bump, and collapsible cart mini panel.

**HTML:**
```html
<div class="fb14">
<h1>🛒 Floating Cart Button</h1>
<p class="fb14-subtitle">Add items — watch the live badge counter update</p>

<!-- Badge style variants (static demo) -->
<div class="fb14-demo-row">
  <div class="fb14-demo-col">
    <div class="fb14-fab-static fb14-fab-indigo">
      <svg viewBox="0 0 24 24"><path d="M6 2L3 6v14a2 2 0 002 2h14a2 2 0 002-2V6l-3-4z"/><line x1="3" y1="6" x2="21" y2="6"/><path d="M16 10a4 4 0 01-8 0"/></svg>
      <span class="fb14-badge-static fb14-badge-red">3</span>
    </div>
    <div class="fb14-demo-label">Red badge</div>
  </div>
  <div class="fb14-demo-col">
    <div class="fb14-fab-static fb14-fab-emerald">
      <svg viewBox="0 0 24 24"><path d="M6 2L3 6v14a2 2 0 002 2h14a2 2 0 002-2V6l-3-4z"/><line x1="3" y1="6" x2="21" y2="6"/><path d="M16 10a4 4 0 01-8 0"/></svg>
      <span class="fb14-badge-static fb14-badge-green">12</span>
    </div>
    <div class="fb14-demo-label">Green badge</div>
  </div>
  <div class="fb14-demo-col">
    <div class="fb14-fab-static fb14-fab-rose">
      <svg viewBox="0 0 24 24"><path d="M6 2L3 6v14a2 2 0 002 2h14a2 2 0 002-2V6l-3-4z"/><line x1="3" y1="6" x2="21" y2="6"/><path d="M16 10a4 4 0 01-8 0"/></svg>
      <span class="fb14-badge-static fb14-badge-pulse">5</span>
    </div>
    <div class="fb14-demo-label">Pulse ring</div>
  </div>
  <div class="fb14-demo-col">
    <div class="fb14-fab-static fb14-fab-amber">
      <svg viewBox="0 0 24 24"><path d="M6 2L3 6v14a2 2 0 002 2h14a2 2 0 002-2V6l-3-4z"/><line x1="3" y1="6" x2="21" y2="6"/><path d="M16 10a4 4 0 01-8 0"/></svg>
      <span class="fb14-badge-dot"></span>
    </div>
    <div class="fb14-demo-label">Dot only</div>
  </div>
  <div class="fb14-demo-col">
    <div class="fb14-fab-static fb14-fab-indigo" style="border-radius:50%">
      <svg viewBox="0 0 24 24"><path d="M6 2L3 6v14a2 2 0 002 2h14a2 2 0 002-2V6l-3-4z"/><line x1="3" y1="6" x2="21" y2="6"/><path d="M16 10a4 4 0 01-8 0"/></svg>
      <span class="fb14-badge-static fb14-badge-red">99+</span>
    </div>
    <div class="fb14-demo-label">Round + overflow</div>
  </div>
</div>

<!-- Product grid -->
<div class="fb14-product-grid" id="fb14-productGrid"></div>

<!-- Interactive FAB -->
<div class="fb14-fab-cart-wrap" id="fb14-fabWrap">
  <div class="fb14-cart-panel" id="fb14-cartPanel">
    <div class="fb14-cart-panel-header">
      Your Cart
      <button class="fb14-clear-btn" id="fb14-clearBtn">Clear all</button>
    </div>
    <div class="fb14-cart-items-list" id="fb14-cartItemsList">
      <div class="fb14-cart-empty">Your cart is empty</div>
    </div>
    <div class="fb14-cart-panel-footer">
      <div class="fb14-cart-total" id="fb14-cartTotal">Total: $0.00</div>
      <button class="fb14-checkout-btn">Checkout →</button>
    </div>
  </div>
  <button class="fb14-fab-cart" id="fb14-fabCart" aria-label="Open cart">
    <svg viewBox="0 0 24 24"><path d="M6 2L3 6v14a2 2 0 002 2h14a2 2 0 002-2V6l-3-4z"/><line x1="3" y1="6" x2="21" y2="6"/><path d="M16 10a4 4 0 01-8 0"/></svg>
  </button>
  <div class="fb14-cart-badge" id="fb14-cartBadge">0</div>
</div>
</div>
```

**CSS:**
```css
.fb14, .fb14 *, .fb14 *::before, .fb14 *::after { box-sizing: border-box; margin: 0; padding: 0; }
.fb14 {
  font-family: 'DM Sans', sans-serif;
  background: #f0f4f8;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 20px 120px;
  gap: 32px;
}

h1 {
  font-size: 1.4rem;
  font-weight: 700;
  color: #1a202c;
  text-align: center;
  margin-bottom: 4px;
}
p.fb14-subtitle {
  color: #718096;
  font-size: 0.9rem;
  text-align: center;
  margin-bottom: 16px;
}

/* ── Product Grid ── */
.fb14-product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
  width: 100%;
  max-width: 800px;
}

.fb14-product-card {
  background: #fff;
  border-radius: 16px;
  padding: 20px 16px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
  transition: transform .2s, box-shadow .2s;
}
.fb14-product-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0,0,0,.1);
}
.fb14-product-icon {
  font-size: 2.6rem;
  line-height: 1;
}
.fb14-product-name {
  font-size: 0.82rem;
  font-weight: 600;
  color: #2d3748;
  text-align: center;
}
.fb14-product-price {
  font-size: 0.9rem;
  font-weight: 700;
  color: #4f46e5;
}
.fb14-add-btn {
  margin-top: 4px;
  padding: 7px 18px;
  background: #4f46e5;
  color: #fff;
  border: none;
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, transform .1s;
}
.fb14-add-btn:hover { background: #4338ca; }
.fb14-add-btn:active { transform: scale(.95); }

/* ── Cart FAB ── */
.fb14-fab-cart-wrap {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 100;
}

/* The FAB itself */
.fb14-fab-cart {
  position: relative;
  width: 60px;
  height: 60px;
  border-radius: 18px;
  background: #4f46e5;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(79,70,229,.45);
  transition: transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s;
  outline: none;
}
.fb14-fab-cart:hover {
  transform: scale(1.08);
  box-shadow: 0 8px 28px rgba(79,70,229,.55);
}
.fb14-fab-cart:active { transform: scale(.95); }

.fb14-fab-cart svg {
  width: 26px;
  height: 26px;
  stroke: #fff;
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

/* Badge */
.fb14-cart-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  min-width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  border: 2.5px solid #f0f4f8;
  transform: scale(0);
  transition: transform .3s cubic-bezier(.34,1.56,.64,1);
}
.fb14-cart-badge.fb14-visible {
  transform: scale(1);
}
.fb14-cart-badge.fb14-bump {
  animation: fb14-badge-bump .35s cubic-bezier(.34,1.56,.64,1);
}
@keyframes fb14-badge-bump {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.45); }
  100% { transform: scale(1); }
}

/* Ripple burst on add */
.fb14-fab-cart-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 18px;
  background: rgba(79,70,229,.3);
  transform: scale(1);
  opacity: 0;
  pointer-events: none;
}
.fb14-fab-cart-wrap.fb14-ripple::after {
  animation: fb14-cart-ripple .5s ease-out forwards;
}
@keyframes fb14-cart-ripple {
  0%   { transform: scale(1);   opacity: .6; }
  100% { transform: scale(2.2); opacity: 0; }
}

/* Mini panel */
.fb14-cart-panel {
  position: absolute;
  bottom: 72px;
  right: 0;
  width: 260px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,.14);
  overflow: hidden;
  transform-origin: bottom right;
  transform: scale(.85) translateY(12px);
  opacity: 0;
  pointer-events: none;
  transition: transform .25s cubic-bezier(.34,1.4,.64,1), opacity .2s;
}
.fb14-cart-panel.fb14-open {
  transform: scale(1) translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.fb14-cart-panel-header {
  padding: 14px 16px 10px;
  font-size: 0.82rem;
  font-weight: 700;
  color: #1a202c;
  border-bottom: 1px solid #e8edf3;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.fb14-cart-panel-header span { color: #718096; font-weight: 400; }
.fb14-cart-items-list {
  max-height: 200px;
  overflow-y: auto;
  padding: 8px 0;
}
.fb14-cart-item-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  font-size: 0.8rem;
  color: #2d3748;
  animation: fb14-item-slide .25s ease-out;
}
@keyframes fb14-item-slide {
  from { transform: translateX(16px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
.fb14-cart-item-emoji { font-size: 1.2rem; }
.fb14-cart-item-name  { flex: 1; font-weight: 500; }
.fb14-cart-item-qty   {
  background: #eef2ff;
  color: #4f46e5;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.73rem;
}
.fb14-cart-item-price { color: #718096; min-width: 42px; text-align: right; }
.fb14-cart-empty {
  padding: 24px;
  text-align: center;
  color: #a0aec0;
  font-size: 0.82rem;
}
.fb14-cart-panel-footer {
  padding: 12px 16px;
  border-top: 1px solid #e8edf3;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.fb14-cart-total { font-size: 0.85rem; font-weight: 700; color: #1a202c; }
.fb14-checkout-btn {
  padding: 8px 16px;
  background: #4f46e5;
  color: #fff;
  border: none;
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s;
}
.fb14-checkout-btn:hover { background: #4338ca; }
.fb14-clear-btn {
  background: none;
  border: none;
  color: #e53e3e;
  font-size: 0.73rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  padding: 0;
  text-decoration: underline;
}
.fb14-clear-btn:hover { color: #c53030; }

/* ── Item count variants demo row ── */
.fb14-demo-row {
  display: flex;
  gap: 28px;
  align-items: flex-end;
  justify-content: center;
  flex-wrap: wrap;
  padding: 24px 32px;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
  width: 100%;
  max-width: 800px;
}
.fb14-demo-col { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.fb14-demo-label { font-size: 0.72rem; color: #718096; font-weight: 500; }

.fb14-fab-static {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  border: none;
  cursor: default;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fb14-fab-static svg {
  width: 24px; height: 24px;
  stroke: #fff; fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.fb14-fab-indigo  { background: #4f46e5; box-shadow: 0 4px 14px rgba(79,70,229,.4); }
.fb14-fab-emerald { background: #10b981; box-shadow: 0 4px 14px rgba(16,185,129,.4); }
.fb14-fab-rose    { background: #f43f5e; box-shadow: 0 4px 14px rgba(244,63,94,.4); }
.fb14-fab-amber   { background: #f59e0b; box-shadow: 0 4px 14px rgba(245,158,11,.4); }

.fb14-badge-static {
  position: absolute;
  top: -7px; right: -7px;
  min-width: 20px; height: 20px;
  border-radius: 999px;
  color: #fff;
  font-size: 0.67rem;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  padding: 0 4px;
  border: 2px solid #fff;
}
.fb14-badge-red    { background: #ef4444; }
.fb14-badge-green  { background: #22c55e; }
.fb14-badge-pulse  { background: #ef4444; }
.fb14-badge-pulse::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 999px;
  border: 2px solid #ef4444;
  animation: fb14-badge-pulse-ring 1.4s ease-out infinite;
}
@keyframes fb14-badge-pulse-ring {
  0%   { transform: scale(1);   opacity: .7; }
  100% { transform: scale(2.2); opacity: 0; }
}
.fb14-badge-dot {
  position: absolute;
  top: -3px; right: -3px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: #ef4444;
  border: 2px solid #fff;
}

@media (prefers-reduced-motion: reduce) {
  .fb14-cart-badge, .fb14-fab-cart, .fb14-cart-panel, .fb14-add-btn { transition: none; animation: none; }
  .fb14-fab-cart-wrap::after { animation: none !important; }
  .fb14-badge-pulse::before { animation: none; }
}
```

**JS:**
```js
const products = [
  { name: 'Headphones', emoji: '🎧', price: 79.99 },
  { name: 'Sneakers',   emoji: '👟', price: 129.00 },
  { name: 'Backpack',   emoji: '🎒', price: 54.50 },
  { name: 'Watch',      emoji: '⌚', price: 199.00 },
  { name: 'Sunglasses', emoji: '🕶️',  price: 44.00 },
  { name: 'Camera',     emoji: '📷', price: 349.99 },
  { name: 'Jacket',     emoji: '🧥', price: 89.00 },
  { name: 'Notebook',   emoji: '📓', price: 12.99 },
];

const cart = {};

const grid      = document.getElementById('fb14-productGrid');
const badge     = document.getElementById('fb14-cartBadge');
const fabWrap   = document.getElementById('fb14-fabWrap');
const fabCart   = document.getElementById('fb14-fabCart');
const panel     = document.getElementById('fb14-cartPanel');
const itemsList = document.getElementById('fb14-cartItemsList');
const totalEl   = document.getElementById('fb14-cartTotal');
const clearBtn  = document.getElementById('fb14-clearBtn');

// Build product cards
products.forEach((p, i) => {
  const card = document.createElement('div');
  card.className = 'fb14-product-card';
  card.innerHTML = `
    <div class="fb14-product-icon">${p.emoji}</div>
    <div class="fb14-product-name">${p.name}</div>
    <div class="fb14-product-price">$${p.price.toFixed(2)}</div>
    <button class="fb14-add-btn" data-idx="${i}">Add to Cart</button>
  `;
  grid.appendChild(card);
});

grid.addEventListener('click', e => {
  if (!e.target.matches('.fb14-add-btn')) return;
  const p = products[+e.target.dataset.idx];
  const key = p.name;
  cart[key] = cart[key] ? { ...cart[key], qty: cart[key].qty + 1 } : { ...p, qty: 1 };
  updateBadge();
  renderCartPanel();
  triggerRipple();
});

function updateBadge() {
  const total = Object.values(cart).reduce((s, v) => s + v.qty, 0);
  badge.textContent = total > 99 ? '99+' : total;
  if (total > 0) {
    badge.classList.add('fb14-visible');
    badge.classList.remove('fb14-bump');
    requestAnimationFrame(() => badge.classList.add('fb14-bump'));
  } else {
    badge.classList.remove('fb14-visible');
  }
}

function renderCartPanel() {
  const items = Object.values(cart);
  if (!items.length) {
    itemsList.innerHTML = '<div class="fb14-cart-empty">Your cart is empty</div>';
    totalEl.textContent = 'Total: $0.00';
    return;
  }
  itemsList.innerHTML = items.map(it => `
    <div class="fb14-cart-item-row">
      <span class="fb14-cart-item-emoji">${it.emoji}</span>
      <span class="fb14-cart-item-name">${it.name}</span>
      <span class="fb14-cart-item-qty">×${it.qty}</span>
      <span class="fb14-cart-item-price">$${(it.price * it.qty).toFixed(2)}</span>
    </div>
  `).join('');
  const total = items.reduce((s, it) => s + it.price * it.qty, 0);
  totalEl.textContent = `Total: $${total.toFixed(2)}`;
}

function triggerRipple() {
  fabWrap.classList.remove('fb14-ripple');
  requestAnimationFrame(() => fabWrap.classList.add('fb14-ripple'));
}

fabCart.addEventListener('click', () => {
  panel.classList.toggle('fb14-open');
});

clearBtn.addEventListener('click', () => {
  Object.keys(cart).forEach(k => delete cart[k]);
  updateBadge();
  renderCartPanel();
});

document.addEventListener('click', e => {
  if (!fabWrap.contains(e.target)) panel.classList.remove('fb14-open');
});
```

### 15. Magnetic Hover FAB

**Type:** CSS + JS
**Description:** Magnetic hover floating action button using JS mouse tracking and lerp easing — the button pulls toward the cursor within a radius.

**HTML:**
```html
<div class="fb15">
<h1>Magnetic Hover FAB</h1>
<p class="fb15-subtitle">Hover near each button — it pulls toward your cursor</p>

<div class="fb15-demo-grid">

  <!-- Purple circle -->
  <div class="fb15-demo-cell" data-mag>
    <div class="fb15-mag-orbit"></div>
    <button class="fb15-mag-fab fb15-mag-fab-purple" data-mag-btn aria-label="Action">
      <svg viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
    </button>
    <div class="fb15-demo-cell-label">Circle — Purple</div>
    <div class="fb15-cursor-hint">hover me</div>
  </div>

  <!-- Blue circle -->
  <div class="fb15-demo-cell" data-mag>
    <div class="fb15-mag-orbit"></div>
    <button class="fb15-mag-fab fb15-mag-fab-blue" data-mag-btn aria-label="Add">
      <svg viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
    </button>
    <div class="fb15-demo-cell-label">Circle — Blue</div>
    <div class="fb15-cursor-hint">hover me</div>
  </div>

  <!-- Emerald -->
  <div class="fb15-demo-cell" data-mag>
    <div class="fb15-mag-orbit"></div>
    <button class="fb15-mag-fab fb15-mag-fab-emerald" data-mag-btn aria-label="Check">
      <svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg>
    </button>
    <div class="fb15-demo-cell-label">Circle — Emerald</div>
    <div class="fb15-cursor-hint">hover me</div>
  </div>

  <!-- Rose -->
  <div class="fb15-demo-cell" data-mag>
    <div class="fb15-mag-orbit"></div>
    <button class="fb15-mag-fab fb15-mag-fab-rose" data-mag-btn aria-label="Heart">
      <svg viewBox="0 0 24 24"><path d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z"/></svg>
    </button>
    <div class="fb15-demo-cell-label">Circle — Rose</div>
    <div class="fb15-cursor-hint">hover me</div>
  </div>

  <!-- Rounded square -->
  <div class="fb15-demo-cell" data-mag>
    <button class="fb15-mag-fab fb15-mag-fab-square" data-mag-btn aria-label="Star">
      <svg viewBox="0 0 24 24"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
    </button>
    <div class="fb15-demo-cell-label">Rounded Square</div>
    <div class="fb15-cursor-hint">hover me</div>
  </div>

  <!-- Pill -->
  <div class="fb15-demo-cell" data-mag>
    <button class="fb15-mag-fab fb15-mag-fab-pill" data-mag-btn aria-label="Get started">
      <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="16"/><line x1="8" y1="12" x2="16" y2="12"/></svg>
      Get Started
    </button>
    <div class="fb15-demo-cell-label">Pill Button</div>
    <div class="fb15-cursor-hint">hover me</div>
  </div>

</div>

<!-- Attraction zone explainer -->
<div style="max-width:860px;width:100%;display:flex;flex-direction:column;gap:8px;">
  <div style="font-size:.72rem;font-weight:700;color:#475569;text-transform:uppercase;letter-spacing:.06em;">How It Works</div>
</div>

<div class="fb15-explainer">
  <div class="fb15-explainer-col">
    <h3>Magnetic Formula</h3>
    <p>
      On <code>mousemove</code>, compute the cursor offset from the FAB center.
      Multiply by a <code>strength</code> factor (0–0.5) and ease toward that target using linear interpolation (lerp) each animation frame.
      Outside the attraction radius the offset snaps back to 0,0 via <code>spring</code> decay.
    </p>
  </div>
  <div class="fb15-explainer-col">
    <h3>Why it feels good</h3>
    <p>
      The key is <em>not</em> snapping instantly. A lerp factor of ~<code>0.12</code> per frame creates a subtle lag that reads as physical weight.
      Counter-rotating the inner icon by <code>−30%</code> of the translation adds depth without extra DOM elements.
    </p>
  </div>
</div>
</div>
```

**CSS:**
```css
.fb15, .fb15 *, .fb15 *::before, .fb15 *::after { box-sizing: border-box; margin: 0; padding: 0; }
.fb15 {
  font-family: 'Syne', sans-serif;
  background: #0d0d12;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 48px 24px;
  gap: 48px;
  color: #e2e8f0;
}

h1 {
  font-size: 1.5rem;
  font-weight: 800;
  text-align: center;
  background: linear-gradient(135deg, #a78bfa, #60a5fa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
p.fb15-subtitle {
  color: #64748b;
  font-size: 0.85rem;
  text-align: center;
  margin-top: -36px;
}

/* ── Demo Grid ── */
.fb15-demo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 24px;
  width: 100%;
  max-width: 860px;
}

.fb15-demo-cell {
  background: #14141e;
  border: 1px solid #1e1e2e;
  border-radius: 20px;
  padding: 40px 20px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  position: relative;
  overflow: visible;
}

.fb15-demo-cell-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: #475569;
  letter-spacing: .05em;
  text-transform: uppercase;
}

/* ── Magnetic FAB base ── */
.fb15-mag-fab {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  outline: none;
  /* JS sets transform; CSS provides spring fallback */
  transition: transform .08s linear, box-shadow .2s;
  will-change: transform;
}

/* Variant: Purple */
.fb15-mag-fab-purple {
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  box-shadow: 0 6px 24px rgba(124,58,237,.5);
}
.fb15-mag-fab-purple:hover { box-shadow: 0 10px 36px rgba(168,85,247,.6); }

/* Variant: Blue */
.fb15-mag-fab-blue {
  background: linear-gradient(135deg, #2563eb, #38bdf8);
  box-shadow: 0 6px 24px rgba(37,99,235,.5);
}
.fb15-mag-fab-blue:hover { box-shadow: 0 10px 36px rgba(56,189,248,.6); }

/* Variant: Emerald */
.fb15-mag-fab-emerald {
  background: linear-gradient(135deg, #059669, #34d399);
  box-shadow: 0 6px 24px rgba(5,150,105,.5);
}
.fb15-mag-fab-emerald:hover { box-shadow: 0 10px 36px rgba(52,211,153,.6); }

/* Variant: Rose */
.fb15-mag-fab-rose {
  background: linear-gradient(135deg, #e11d48, #fb7185);
  box-shadow: 0 6px 24px rgba(225,29,72,.5);
}
.fb15-mag-fab-rose:hover { box-shadow: 0 10px 36px rgba(251,113,133,.6); }

/* Variant: Square */
.fb15-mag-fab-square {
  border-radius: 20px;
  background: linear-gradient(135deg, #d97706, #fbbf24);
  box-shadow: 0 6px 24px rgba(217,119,6,.5);
}
.fb15-mag-fab-square:hover { box-shadow: 0 10px 36px rgba(251,191,36,.6); }

/* Variant: Pill */
.fb15-mag-fab-pill {
  width: 140px;
  border-radius: 999px;
  background: linear-gradient(135deg, #0f172a, #334155);
  border: 1px solid #475569;
  box-shadow: 0 4px 20px rgba(0,0,0,.4);
  gap: 8px;
  font-size: 0.8rem;
  font-weight: 700;
  color: #e2e8f0;
  letter-spacing: .04em;
}

.fb15-mag-fab svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: #fff;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
  /* The icon counter-rotates slightly for realism */
  transition: transform .08s linear;
}
.fb15-mag-fab-pill svg { width: 20px; height: 20px; }

/* Orbit ring that follows the magnet */
.fb15-mag-orbit {
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 1.5px dashed rgba(255,255,255,.15);
  pointer-events: none;
  transition: opacity .2s;
  opacity: 0;
}
.fb15-demo-cell:hover .fb15-mag-orbit { opacity: 1; }

/* Cursor dot that sticks to FAB area */
.fb15-cursor-hint {
  position: absolute;
  bottom: 10px;
  right: 14px;
  font-size: 0.65rem;
  color: #334155;
  font-weight: 600;
  pointer-events: none;
}

/* ── Attraction zone visualization ── */
.fb15-zone-wrap {
  position: relative;
  width: 220px;
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fb15-zone-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px dashed #1e293b;
}
.fb15-zone-ring-1 { width: 80px;  height: 80px;  border-color: #334155; }
.fb15-zone-ring-2 { width: 130px; height: 130px; border-color: #1e293b; }
.fb15-zone-ring-3 { width: 200px; height: 200px; border-color: #1a1a2a; }
.fb15-zone-label-1, .fb15-zone-label-2, .fb15-zone-label-3 {
  position: absolute;
  font-size: 0.6rem;
  font-weight: 600;
  color: #334155;
  right: 0;
  transform: translateX(50%);
  white-space: nowrap;
}
.fb15-zone-label-1 { top: calc(50% - 40px); }
.fb15-zone-label-2 { top: calc(50% - 65px); }
.fb15-zone-label-3 { top: calc(50% - 100px); }

/* ── Explainer card ── */
.fb15-explainer {
  background: #14141e;
  border: 1px solid #1e1e2e;
  border-radius: 20px;
  padding: 24px 28px;
  max-width: 860px;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.fb15-explainer-col h3 {
  font-size: 0.8rem;
  font-weight: 700;
  color: #a78bfa;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 10px;
}
.fb15-explainer-col p, .fb15-explainer-col code {
  font-size: 0.78rem;
  color: #64748b;
  line-height: 1.7;
  font-family: 'Syne', monospace;
}
.fb15-explainer-col code {
  background: #0d0d12;
  color: #7dd3fc;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.73rem;
}

@media (max-width: 600px) {
  .fb15-demo-grid { grid-template-columns: 1fr 1fr; }
  .fb15-explainer { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .fb15-mag-fab { transition: none !important; }
  .fb15-mag-fab svg { transition: none !important; }
}
```

**JS:**
```js
// Magnetic button logic
const ATTRACT_RADIUS = 90;   // px from center to start pull
const STRENGTH      = 0.38;  // how far it moves (0–1)
const LERP          = 0.12;  // easing per frame
const RELEASE_LERP  = 0.08;  // easing back to center

const buttons = document.querySelectorAll('[data-mag-btn]');

buttons.forEach(btn => {
  let tx = 0, ty = 0;       // target translation
  let cx = 0, cy = 0;       // current (lerped) translation
  let rafId = null;
  let inside = false;

  const cell = btn.closest('[data-mag]');

  function animate() {
    const lerpF = inside ? LERP : RELEASE_LERP;
    cx += (tx - cx) * lerpF;
    cy += (ty - cy) * lerpF;

    btn.style.transform = `translate(${cx.toFixed(2)}px, ${cy.toFixed(2)}px)`;

    // Counter-rotate icon
    const icon = btn.querySelector('svg');
    if (icon) {
      icon.style.transform = `translate(${(-cx * .3).toFixed(2)}px, ${(-cy * .3).toFixed(2)}px)`;
    }

    const stillMoving = Math.abs(tx - cx) > 0.1 || Math.abs(ty - cy) > 0.1;
    if (stillMoving || inside) {
      rafId = requestAnimationFrame(animate);
    } else {
      cx = 0; cy = 0;
      btn.style.transform = '';
      if (icon) icon.style.transform = '';
      rafId = null;
    }
  }

  function onMove(e) {
    const rect = btn.getBoundingClientRect();
    const bx = rect.left + rect.width / 2;
    const by = rect.top  + rect.height / 2;
    const dx = e.clientX - bx;
    const dy = e.clientY - by;
    const dist = Math.hypot(dx, dy);

    if (dist < ATTRACT_RADIUS) {
      inside = true;
      // Falloff: full pull at center, zero at radius edge
      const falloff = 1 - dist / ATTRACT_RADIUS;
      tx = dx * STRENGTH * falloff;
      ty = dy * STRENGTH * falloff;
    } else {
      inside = false;
      tx = 0; ty = 0;
    }

    if (!rafId) rafId = requestAnimationFrame(animate);
  }

  function onLeave() {
    inside = false;
    tx = 0; ty = 0;
    if (!rafId) rafId = requestAnimationFrame(animate);
  }

  // Attach to entire cell for wider detection area
  if (cell) {
    cell.addEventListener('mousemove', onMove);
    cell.addEventListener('mouseleave', onLeave);
  } else {
    btn.addEventListener('mousemove', onMove);
    btn.addEventListener('mouseleave', onLeave);
  }
});

// Respect reduced motion
const mq = window.matchMedia('(prefers-reduced-motion: reduce)');
if (mq.matches) {
  document.querySelectorAll('[data-mag-btn]').forEach(btn => {
    btn.style.transition = 'none';
  });
}
```

### 16. Theme Toggle FAB

**Type:** CSS + JS
**Description:** Floating light/dark mode toggle button with 4 style variants: circle, pill slider, square, and orbit ring — all synced to CSS variables.

**HTML:**
```html
<div class="fb16">
<h1>Floating Theme Toggle</h1>
<p class="fb16-subtitle">Toggle light / dark mode — all 4 styles sync together</p>

<!-- Variant buttons -->
<div class="fb16-variants-row">

  <!-- 1. Circle sun/moon -->
  <div class="fb16-variant-col">
    <button class="fb16-toggle-fab fb16-fab-circle" data-theme-toggle aria-label="Toggle theme">
      <div class="fb16-fab-circle-inner">
        <svg class="fb16-icon-sun" viewBox="0 0 24 24">
          <circle cx="12" cy="12" r="5"/>
          <line x1="12" y1="1" x2="12" y2="3"/>
          <line x1="12" y1="21" x2="12" y2="23"/>
          <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/>
          <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/>
          <line x1="1" y1="12" x2="3" y2="12"/>
          <line x1="21" y1="12" x2="23" y2="12"/>
          <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/>
          <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>
        </svg>
        <svg class="fb16-icon-moon" viewBox="0 0 24 24">
          <path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/>
        </svg>
      </div>
    </button>
    <div class="fb16-variant-label">Circle</div>
  </div>

  <!-- 2. Pill -->
  <div class="fb16-variant-col">
    <button class="fb16-toggle-fab fb16-fab-pill-toggle" data-theme-toggle aria-label="Toggle theme">
      <div class="fb16-fab-pill-knob">
        <svg class="fb16-knob-sun" viewBox="0 0 24 24">
          <circle cx="12" cy="12" r="5"/>
          <line x1="12" y1="1" x2="12" y2="3"/>
          <line x1="12" y1="21" x2="12" y2="23"/>
          <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/>
          <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/>
          <line x1="1" y1="12" x2="3" y2="12"/>
          <line x1="21" y1="12" x2="23" y2="12"/>
          <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/>
          <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>
        </svg>
        <svg class="fb16-knob-moon" viewBox="0 0 24 24">
          <path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/>
        </svg>
      </div>
    </button>
    <div class="fb16-variant-label">Pill Slider</div>
  </div>

  <!-- 3. Square emoji -->
  <div class="fb16-variant-col">
    <button class="fb16-toggle-fab fb16-fab-square-toggle" data-theme-toggle aria-label="Toggle theme">
      <span class="fb16-fab-square-icon" id="fb16-squareIcon">☀️</span>
    </button>
    <div class="fb16-variant-label">Square</div>
  </div>

  <!-- 4. Orbit ring -->
  <div class="fb16-variant-col">
    <button class="fb16-toggle-fab fb16-fab-orbit" data-theme-toggle aria-label="Toggle theme">
      <div class="fb16-fab-orbit-ring"></div>
      <div class="fb16-fab-orbit-mask">
        <svg class="fb16-orbit-sun" viewBox="0 0 24 24">
          <circle cx="12" cy="12" r="5"/>
          <line x1="12" y1="1" x2="12" y2="3"/>
          <line x1="12" y1="21" x2="12" y2="23"/>
          <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/>
          <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/>
          <line x1="1" y1="12" x2="3" y2="12"/>
          <line x1="21" y1="12" x2="23" y2="12"/>
          <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/>
          <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>
        </svg>
        <svg class="fb16-orbit-moon" viewBox="0 0 24 24">
          <path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/>
        </svg>
      </div>
    </button>
    <div class="fb16-variant-label">Orbit Ring</div>
  </div>

</div>

<!-- Live preview card -->
<div class="fb16-preview-card">
  <div class="fb16-preview-card-header">
    <div class="fb16-avatar"></div>
    <div class="fb16-card-meta">
      <h3>Design System Preview</h3>
      <p>See how your UI adapts to the active theme</p>
    </div>
  </div>
  <div class="fb16-preview-body">
    This card updates its background, text, borders, and accent colors instantly as you toggle. Every token is a CSS variable — a single <code style="font-family:monospace;font-size:.8em;background:var(--surface-2);padding:1px 5px;border-radius:3px;color:var(--accent)">data-theme</code> attribute on the root element switches the entire design.
  </div>
  <div class="fb16-preview-tags">
    <span class="fb16-tag">Light Mode</span>
    <span class="fb16-tag">Dark Mode</span>
    <span class="fb16-tag">CSS Tokens</span>
    <span class="fb16-tag">FAB Toggle</span>
  </div>
  <div class="fb16-theme-indicator">
    <div class="fb16-mode-dot"></div>
    <span id="fb16-modeLabel">Light Mode Active</span>
  </div>
</div>

<!-- Fixed FAB (actual page toggle) -->
<div class="fb16-fab-fixed-wrap">
  <button class="fb16-fab-fixed" id="fb16-fabFixed" data-theme-toggle aria-label="Toggle theme">
    <div class="fb16-fab-fixed-burst"></div>
    <svg class="fb16-icon-sun" viewBox="0 0 24 24">
      <circle cx="12" cy="12" r="5"/>
      <line x1="12" y1="1" x2="12" y2="3"/>
      <line x1="12" y1="21" x2="12" y2="23"/>
      <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/>
      <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/>
      <line x1="1" y1="12" x2="3" y2="12"/>
      <line x1="21" y1="12" x2="23" y2="12"/>
      <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/>
      <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>
    </svg>
    <svg class="fb16-icon-moon" viewBox="0 0 24 24">
      <path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/>
    </svg>
  </button>
</div>
</div>
```

**CSS:**
```css
.fb16, .fb16 *, .fb16 *::before, .fb16 *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* ── Theme tokens ── */
:root {
  --bg:         #f5f7fa;
  --surface:    #ffffff;
  --surface-2:  #eef1f6;
  --text:       #1a202c;
  --text-2:     #718096;
  --border:     #e2e8f0;
  --shadow:     rgba(0,0,0,.08);
  --accent:     #4f46e5;
  --accent-2:   #a78bfa;

  --fab-bg:     #1a1a2e;
  --fab-icon:   #f6e05e;

  --toggle-dur: .5s;
}
[data-theme="dark"] {
  --bg:         #0d0d14;
  --surface:    #14141f;
  --surface-2:  #1e1e2e;
  --text:       #e2e8f0;
  --text-2:     #64748b;
  --border:     #1e293b;
  --shadow:     rgba(0,0,0,.35);
  --accent:     #a78bfa;
  --accent-2:   #4f46e5;

  --fab-bg:     #fef9c3;
  --fab-icon:   #1a1a2e;
}

.fb16 { transition: background var(--toggle-dur) ease; }

.fb16 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  background: var(--bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 48px 24px 120px;
  gap: 32px;
  color: var(--text);
  transition: background var(--toggle-dur) ease, color var(--toggle-dur) ease;
}

h1 {
  font-size: 1.5rem;
  font-weight: 800;
  text-align: center;
  color: var(--text);
  transition: color var(--toggle-dur);
}
p.fb16-subtitle {
  font-size: 0.85rem;
  color: var(--text-2);
  text-align: center;
  margin-top: -24px;
  transition: color var(--toggle-dur);
}

/* ── Variants row ── */
.fb16-variants-row {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
}
.fb16-variant-col { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.fb16-variant-label {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: .06em;
  transition: color var(--toggle-dur);
}

/* ── Toggle FAB shared ── */
.fb16-toggle-fab {
  position: relative;
  cursor: pointer;
  border: none;
  outline: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s;
}
.fb16-toggle-fab:hover { transform: scale(1.1); }
.fb16-toggle-fab:active { transform: scale(.93); }

/* Style 1: Circle with animated sun/moon swap */
.fb16-fab-circle {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--fab-bg);
  box-shadow: 0 4px 18px var(--shadow);
  transition: background var(--toggle-dur), box-shadow .2s, transform .2s;
  overflow: hidden;
}
.fb16-fab-circle-inner {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fb16-icon-sun, .fb16-icon-moon {
  position: absolute;
  width: 24px;
  height: 24px;
  stroke: var(--fab-icon);
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: opacity var(--toggle-dur), transform var(--toggle-dur), stroke var(--toggle-dur);
}
/* Light mode: show sun, hide moon */
.fb16-icon-sun  { opacity: 1; transform: rotate(0deg) scale(1); }
.fb16-icon-moon { opacity: 0; transform: rotate(90deg) scale(.6); }
[data-theme="dark"] .fb16-icon-sun  { opacity: 0; transform: rotate(-90deg) scale(.6); }
[data-theme="dark"] .fb16-icon-moon { opacity: 1; transform: rotate(0deg) scale(1); }

/* Style 2: Pill toggle (iOS-style slider) */
.fb16-fab-pill-toggle {
  width: 64px;
  height: 34px;
  border-radius: 999px;
  background: #e2e8f0;
  position: relative;
  padding: 0;
  transition: background var(--toggle-dur);
  box-shadow: inset 0 1px 3px rgba(0,0,0,.15);
}
[data-theme="dark"] .fb16-fab-pill-toggle { background: #7c3aed; }

.fb16-fab-pill-knob {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.2);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--toggle-dur) cubic-bezier(.34,1.3,.64,1);
}
[data-theme="dark"] .fb16-fab-pill-knob { transform: translateX(30px); }

.fb16-fab-pill-knob svg {
  width: 14px; height: 14px;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke var(--toggle-dur), opacity var(--toggle-dur);
}
.fb16-knob-sun  { stroke: #f59e0b; }
.fb16-knob-moon { stroke: #7c3aed; position: absolute; opacity: 0; }
[data-theme="dark"] .fb16-knob-sun  { opacity: 0; }
[data-theme="dark"] .fb16-knob-moon { opacity: 1; }

/* Style 3: Square with morph icon */
.fb16-fab-square-toggle {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  box-shadow: 0 2px 12px var(--shadow);
  transition: background var(--toggle-dur), border-color var(--toggle-dur), box-shadow .2s, transform .2s;
}
.fb16-fab-square-icon {
  font-size: 1.4rem;
  line-height: 1;
  display: block;
  transition: transform var(--toggle-dur), filter var(--toggle-dur);
}
[data-theme="dark"] .fb16-fab-square-icon { transform: rotate(360deg); }

/* Style 4: Gradient orbit ring */
.fb16-fab-orbit {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: var(--surface);
  position: relative;
  box-shadow: 0 4px 18px var(--shadow);
  transition: background var(--toggle-dur), box-shadow .2s, transform .2s;
}
.fb16-fab-orbit-ring {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, #f59e0b, #a78bfa, #38bdf8, #f59e0b);
  z-index: -1;
  transition: opacity var(--toggle-dur);
  opacity: .7;
  animation: fb16-orbit-spin 4s linear infinite;
}
[data-theme="dark"] .fb16-fab-orbit-ring { opacity: 1; }
@keyframes fb16-orbit-spin { to { transform: rotate(360deg); } }

.fb16-fab-orbit-mask {
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--toggle-dur);
}
.fb16-orbit-sun, .fb16-orbit-moon {
  position: absolute;
  width: 26px; height: 26px;
  stroke: var(--text);
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: opacity var(--toggle-dur), transform var(--toggle-dur), stroke var(--toggle-dur);
}
.fb16-orbit-sun  { opacity: 1; transform: scale(1); }
.fb16-orbit-moon { opacity: 0; transform: scale(.5) rotate(45deg); }
[data-theme="dark"] .fb16-orbit-sun  { opacity: 0; transform: scale(.5) rotate(-45deg); }
[data-theme="dark"] .fb16-orbit-moon { opacity: 1; transform: scale(1) rotate(0deg); }

/* ── Live preview card ── */
.fb16-preview-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 28px 32px;
  max-width: 500px;
  width: 100%;
  box-shadow: 0 4px 24px var(--shadow);
  transition: background var(--toggle-dur), border-color var(--toggle-dur), box-shadow var(--toggle-dur);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.fb16-preview-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
}
.fb16-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  transition: background var(--toggle-dur);
}
.fb16-card-meta h3 {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text);
  transition: color var(--toggle-dur);
}
.fb16-card-meta p {
  font-size: 0.75rem;
  color: var(--text-2);
  transition: color var(--toggle-dur);
}
.fb16-preview-body {
  font-size: 0.82rem;
  color: var(--text-2);
  line-height: 1.75;
  transition: color var(--toggle-dur);
}
.fb16-preview-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.fb16-tag {
  padding: 4px 12px;
  background: var(--surface-2);
  border-radius: 999px;
  font-size: 0.73rem;
  font-weight: 600;
  color: var(--accent);
  transition: background var(--toggle-dur), color var(--toggle-dur);
}
.fb16-theme-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-2);
  transition: color var(--toggle-dur);
}
.fb16-mode-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  transition: background var(--toggle-dur);
}

/* ── Fixed FAB (bottom-right) ── */
.fb16-fab-fixed-wrap {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 200;
}
.fb16-fab-fixed {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--fab-bg);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 24px var(--shadow);
  transition: background var(--toggle-dur), transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s;
  outline: none;
  overflow: hidden;
}
.fb16-fab-fixed:hover { transform: scale(1.1); }
.fb16-fab-fixed:active { transform: scale(.93); }

.fb16-fab-fixed .fb16-icon-sun  { stroke: var(--fab-icon); }
.fb16-fab-fixed .fb16-icon-moon { stroke: var(--fab-icon); }

/* Burst overlay on toggle */
.fb16-fab-fixed-burst {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--fab-bg);
  transform: scale(1);
  opacity: 0;
  pointer-events: none;
}
.fb16-fab-fixed.fb16-bursting .fb16-fab-fixed-burst {
  animation: fb16-burst-out .5s ease-out forwards;
}
@keyframes fb16-burst-out {
  0%   { transform: scale(1);   opacity: .5; }
  100% { transform: scale(4);   opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  }
```

**JS:**
```js
const root      = document.documentElement;
const squareIcon = document.getElementById('fb16-squareIcon');
const modeLabel  = document.getElementById('fb16-modeLabel');
const fabFixed   = document.getElementById('fb16-fabFixed');

function applyTheme(theme) {
  root.setAttribute('data-theme', theme);
  squareIcon.textContent = theme === 'dark' ? '🌙' : '☀️';
  modeLabel.textContent  = theme === 'dark' ? 'Dark Mode Active' : 'Light Mode Active';
  try { localStorage.setItem('fab-theme', theme); } catch(_) {}
}

function toggle() {
  const next = root.getAttribute('data-theme') === 'dark' ? 'light' : 'dark';
  applyTheme(next);
  // Burst on the fixed FAB
  fabFixed.classList.remove('fb16-bursting');
  requestAnimationFrame(() => fabFixed.classList.add('fb16-bursting'));
}

// All toggle buttons trigger the same theme change
document.querySelectorAll('[data-theme-toggle]').forEach(btn => {
  btn.addEventListener('click', toggle);
});

// Restore saved preference
try {
  const saved = localStorage.getItem('fab-theme');
  if (saved) applyTheme(saved);
} catch(_) {}

// Respect OS preference if no saved value
const osDark = window.matchMedia('(prefers-color-scheme: dark)');
try {
  if (!localStorage.getItem('fab-theme') && osDark.matches) applyTheme('dark');
} catch(_) {
  if (osDark.matches) applyTheme('dark');
}
```

### 17. Classic Plus

**Type:** Pure CSS
**Description:** The benchmark FAB — a solid gradient circle with a + icon that lifts on hover with a deepening shadow. The pattern every Material design system reaches for first.

**HTML:**
```html
<button type="button" class="cfb-classic" aria-label="Create new">
  <svg viewBox="0 0 24 24" aria-hidden="true">
    <line x1="12" y1="5" x2="12" y2="19" />
    <line x1="5" y1="12" x2="19" y2="12" />
  </svg>
</button>
```

**CSS:**
```css
.cfb-classic {
  width: 56px; height: 56px;
  border: 0; border-radius: 50%;
  background: linear-gradient(135deg, #7c6cff, #a78bfa);
  color: #fff;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 16px rgba(124,108,255,0.35);
  transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.25s, filter 0.2s;
}
.cfb-classic:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(124,108,255,0.5);
  filter: brightness(1.05);
}
.cfb-classic:active { transform: translateY(-1px); }
.cfb-classic:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.cfb-classic svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; }
```

### 18. Speed Dial

**Type:** Pure CSS
**Description:** Hover or focus reveals 3 child actions arcing upward — the classic FAB speed-dial. Keyboard accessible because focus stays within the group via :focus-within.

**HTML:**
```html
<div class="cfb-dial" role="group" aria-label="Quick create">
  <button type="button" class="cfb-dial-main" aria-label="Open quick actions" aria-expanded="false">
    +
  </button>
  <button type="button" class="cfb-dial-c cfb-dial-c1" aria-label="New document">📄</button>
  <button type="button" class="cfb-dial-c cfb-dial-c2" aria-label="New folder">📁</button>
  <button type="button" class="cfb-dial-c cfb-dial-c3" aria-label="Upload file">⬆</button>
</div>
```

**CSS:**
```css
.cfb-dial {
  position: relative;
  width: 56px; height: 56px;
}
.cfb-dial button {
  position: absolute;
  width: 48px; height: 48px;
  border-radius: 50%; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1), background 0.2s, opacity 0.25s;
}
.cfb-dial-main {
  z-index: 2;
  bottom: 0; left: 0;
  background: linear-gradient(135deg, #ff6c8a, #ff9a76);
  color: #fff;
  font: 700 26px/1 system-ui, sans-serif;
  box-shadow: 0 6px 18px rgba(255,108,138,0.4);
}
.cfb-dial:hover .cfb-dial-main,
.cfb-dial:focus-within .cfb-dial-main { transform: rotate(45deg); }
.cfb-dial-c {
  z-index: 1;
  bottom: 0; left: 0;
  background: #1a1a28;
  border: 1px solid rgba(255,255,255,0.1);
  font-size: 16px;
  opacity: 0;
  pointer-events: none;
}
.cfb-dial:hover .cfb-dial-c,
.cfb-dial:focus-within .cfb-dial-c { opacity: 1; pointer-events: auto; }
.cfb-dial:hover .cfb-dial-c1,
.cfb-dial:focus-within .cfb-dial-c1 { transform: translateY(-60px); }
.cfb-dial:hover .cfb-dial-c2,
.cfb-dial:focus-within .cfb-dial-c2 { transform: translate(48px, -42px); }
.cfb-dial:hover .cfb-dial-c3,
.cfb-dial:focus-within .cfb-dial-c3 { transform: translateX(60px); }
.cfb-dial button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
```

### 19. Pulse Ring

**Type:** Pure CSS
**Description:** A continuous concentric pulse ring radiates outward — the attention-getter pattern for "new feature" or "tap me" prompts. Pure CSS via box-shadow keyframes.

**HTML:**
```html
<button type="button" class="cfb-pulse" aria-label="What's new">
  <svg viewBox="0 0 24 24" aria-hidden="true">
    <path d="M12 2v6m0 0a4 4 0 0 0-4 4v3.5L6 17h12l-2-1.5V12a4 4 0 0 0-4-4z" />
    <path d="M9 17a3 3 0 0 0 6 0" />
  </svg>
</button>
```

**CSS:**
```css
.cfb-pulse {
  position: relative;
  width: 52px; height: 52px;
  border: 0; border-radius: 50%;
  background: linear-gradient(135deg, #ff6c8a, #f5a623);
  color: #fff;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(255,108,138,0.4);
}
.cfb-pulse::before, .cfb-pulse::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(255,108,138,0.55);
  animation: cfb-pulse-ring 1.8s ease-out infinite;
}
.cfb-pulse::after { animation-delay: 0.9s; }
@keyframes cfb-pulse-ring {
  0%   { transform: scale(1);    opacity: 1; }
  100% { transform: scale(1.7);  opacity: 0; }
}
.cfb-pulse:hover { filter: brightness(1.08); }
.cfb-pulse:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.cfb-pulse svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

@media (prefers-reduced-motion: reduce) {
  .cfb-pulse,
  .cfb-pulse * {
    animation: none !important;
  }
}

```

### 20. Morphing FAB

**Type:** Pure CSS
**Description:** The circle morphs into a search input on hover — width and border-radius animate together, the icon sliding to the left edge. Premium micro-interaction.

**HTML:**
```html
<form class="cfb-morph" role="search">
  <input type="search" placeholder="Search…" aria-label="Search" />
  <span class="cfb-morph-icon" aria-hidden="true">
    <svg viewBox="0 0 24 24">
      <circle cx="11" cy="11" r="7" />
      <path d="m20 20-3.5-3.5" />
    </svg>
  </span>
</form>
```

**CSS:**
```css
.cfb-morph {
  position: relative;
  display: inline-block;
  height: 52px;
}
.cfb-morph input {
  width: 52px; height: 52px;
  padding: 0 16px 0 48px;
  border: 0; outline: none;
  background: linear-gradient(135deg, #2eb88a, #06b6d4);
  border-radius: 26px;
  color: #fff;
  font: 500 14px/52px system-ui, sans-serif;
  box-shadow: 0 6px 16px rgba(46,184,138,0.35);
  cursor: pointer;
  transition: width 0.4s cubic-bezier(0.65,0,0.35,1), padding 0.4s, background 0.3s;
}
.cfb-morph input::placeholder { color: rgba(255,255,255,0.7); }
.cfb-morph:hover input,
.cfb-morph input:focus { width: 240px; cursor: text; }
.cfb-morph-icon {
  position: absolute; top: 50%; left: 16px;
  transform: translateY(-50%);
  pointer-events: none;
}
.cfb-morph-icon svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; }
```

### 21. Labeled Pill

**Type:** Pure CSS
**Description:** Pill-shape with icon + text label ("+ New project") — wider than a circle, more discoverable for first-time users. Common pattern in modern dashboards.

**HTML:**
```html
<button type="button" class="cfb-pill">
  <svg viewBox="0 0 24 24" aria-hidden="true">
    <line x1="12" y1="5" x2="12" y2="19" />
    <line x1="5" y1="12" x2="19" y2="12" />
  </svg>
  <span>New project</span>
</button>
```

**CSS:**
```css
.cfb-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 22px 14px 18px;
  border: 0; border-radius: 999px;
  background: linear-gradient(135deg, #7c6cff, #ff6c8a);
  color: #fff;
  font: 600 14px/1 system-ui, sans-serif;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(124,108,255,0.35);
  transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.25s, filter 0.2s;
}
.cfb-pill:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(124,108,255,0.45);
  filter: brightness(1.05);
}
.cfb-pill:active { transform: translateY(0); }
.cfb-pill:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.cfb-pill svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; }
```

### 22. Scroll to Top

**Type:** Pure CSS
**Description:** Up-arrow FAB with a subtle bounce on hover — the canonical "back to top" affordance. Keyboard accessible, focus-visible ring, semantic anchor.

**HTML:**
```html
<a href="#top" class="cfb-top" aria-label="Back to top">
  <svg viewBox="0 0 24 24" aria-hidden="true"><polyline points="18 15 12 9 6 15" /></svg>
</a>
```

**CSS:**
```css
.cfb-top {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  background: #1a1a28;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  color: #cbd5e1;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,0.4);
  transition: transform 0.25s, background 0.2s, border-color 0.2s, color 0.2s;
}
.cfb-top:hover {
  transform: translateY(-4px);
  background: rgba(124,108,255,0.12);
  border-color: rgba(124,108,255,0.4);
  color: #a78bfa;
  animation: cfb-top-bounce 0.6s ease-in-out infinite alternate;
}
.cfb-top:focus-visible { outline: 2px solid #7c6cff; outline-offset: 3px; }
.cfb-top svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
@keyframes cfb-top-bounce {
  from { transform: translateY(-4px); }
  to   { transform: translateY(-7px); }
}

@media (prefers-reduced-motion: reduce) {
  .cfb-top,
  .cfb-top * {
    animation: none !important;
  }
}

```

### 23. Neon Cyber

**Type:** Pure CSS
**Description:** Synthwave neon outline FAB that intensifies on hover — perfect for cyberpunk, gaming, and developer-tool aesthetics. Dark backdrop assumed.

**HTML:**
```html
<button type="button" class="cfb-neon" aria-label="Execute">
  <svg viewBox="0 0 24 24" aria-hidden="true"><polygon points="6 4 20 12 6 20 6 4" /></svg>
</button>
```

**CSS:**
```css
.cfb-neon {
  width: 56px; height: 56px;
  border: 1.5px solid #6cffff;
  border-radius: 50%;
  background: rgba(10,0,20,0.85);
  color: #6cffff;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 12px rgba(108,255,255,0.4), inset 0 0 8px rgba(108,255,255,0.15);
  transition: box-shadow 0.25s, color 0.25s, border-color 0.25s, transform 0.2s;
}
.cfb-neon:hover {
  border-color: #ff6cff;
  color: #ff6cff;
  box-shadow: 0 0 24px rgba(255,108,255,0.7), 0 0 48px rgba(255,108,255,0.3), inset 0 0 12px rgba(255,108,255,0.2);
  transform: scale(1.05);
}
.cfb-neon:focus-visible { outline: 2px solid #ff6cff; outline-offset: 4px; }
.cfb-neon svg { width: 22px; height: 22px; fill: currentColor; stroke: currentColor; stroke-width: 1; stroke-linejoin: round; }
```

### 24. Glass FAB

**Type:** Pure CSS
**Description:** Frosted-glass FAB with backdrop blur — sits beautifully over hero images, gradients, and patterned backgrounds. Border softens on hover.

**HTML:**
```html
<div class="cfb-glass-bg">
  <button type="button" class="cfb-glass" aria-label="Quick action">
    <svg viewBox="0 0 24 24" aria-hidden="true">
      <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" />
    </svg>
  </button>
</div>
```

**CSS:**
```css
.cfb-glass-bg {
  display: inline-flex;
  padding: 24px;
  border-radius: 16px;
  background: linear-gradient(135deg, #2a1a4a 0%, #4a2a6a 50%, #ff6c8a 100%);
}
.cfb-glass {
  width: 52px; height: 52px;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: #fff;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  transition: background 0.25s, border-color 0.25s, transform 0.25s;
}
.cfb-glass:hover {
  background: rgba(255,255,255,0.22);
  border-color: rgba(255,255,255,0.45);
  transform: translateY(-2px);
}
.cfb-glass:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.cfb-glass svg { width: 20px; height: 20px; fill: currentColor; }
```

### 25. Brutalist Stamp

**Type:** Pure CSS
**Description:** Hard-edged offset shadow, monospace text, zero radius — the brutalist FAB. Press collapses into the shadow on focus / active for tactile feedback.

**HTML:**
```html
<button type="button" class="cfb-brut">
  <span>NEW</span>
</button>
```

**CSS:**
```css
.cfb-brut {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 16px 22px;
  border: 2.5px solid #1a1a2e;
  background: #f0eeff;
  color: #1a1a2e;
  font: 800 14px/1 'Courier New', monospace;
  letter-spacing: 0.14em;
  cursor: pointer;
  box-shadow: 6px 6px 0 #ff6c8a;
  transition: transform 0.1s, box-shadow 0.1s;
}
.cfb-brut:hover  { transform: translate(-1px,-1px); box-shadow: 7px 7px 0 #ff6c8a; }
.cfb-brut:active,
.cfb-brut:focus-visible { transform: translate(6px,6px); box-shadow: 0 0 0 #ff6c8a; outline: none; }
```

### 26. Notification Badge

**Type:** Pure CSS
**Description:** FAB with a pulsing red badge showing unread count — pure CSS. The badge uses a separate keyframe so the underlying button stays static.

**HTML:**
```html
<button type="button" class="cfb-badge" aria-label="Inbox, 3 unread">
  <svg viewBox="0 0 24 24" aria-hidden="true">
    <path d="M22 2 11 13" />
    <path d="m22 2-7 20-4-9-9-4 20-7z" />
  </svg>
  <span class="cfb-badge-dot" aria-hidden="true">3</span>
</button>
```

**CSS:**
```css
.cfb-badge {
  position: relative;
  width: 52px; height: 52px;
  border: 0; border-radius: 50%;
  background: linear-gradient(135deg, #06b6d4, #0ea5e9);
  color: #fff;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 16px rgba(6,182,212,0.35);
  transition: transform 0.25s, box-shadow 0.25s;
}
.cfb-badge:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(6,182,212,0.5); }
.cfb-badge:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.cfb-badge svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cfb-badge-dot {
  position: absolute; top: -4px; right: -4px;
  min-width: 22px; height: 22px;
  padding: 0 6px; border-radius: 999px;
  background: #ff5d6c;
  color: #fff;
  font: 700 11px/22px 'JetBrains Mono', monospace;
  text-align: center;
  border: 2px solid #111118;
  box-shadow: 0 0 0 0 rgba(255,93,108,0.7);
  animation: cfb-badge-ping 1.6s ease-out infinite;
}
@keyframes cfb-badge-ping {
  0%,100% { box-shadow: 0 0 0 0 rgba(255,93,108,0.6); }
  50%      { box-shadow: 0 0 0 8px rgba(255,93,108,0); }
}

@media (prefers-reduced-motion: reduce) {
  .cfb-badge,
  .cfb-badge * {
    animation: none !important;
  }
}

```

### 27. Loading Spinner

**Type:** CSS + JS
**Description:** Click triggers a loading state — the icon swaps for a spinner, button is disabled, returns to ready after 1.5s. Demonstrates the async-action FAB pattern.

**HTML:**
```html
<button type="button" class="cfb-load" aria-label="Save changes" data-cfb-load>
  <svg class="cfb-load-icon" viewBox="0 0 24 24" aria-hidden="true">
    <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z" />
    <polyline points="17 21 17 13 7 13 7 21" />
    <polyline points="7 3 7 8 15 8" />
  </svg>
  <span class="cfb-load-spin" aria-hidden="true"></span>
</button>
```

**CSS:**
```css
.cfb-load {
  position: relative;
  width: 52px; height: 52px;
  border: 0; border-radius: 50%;
  background: linear-gradient(135deg, #2eb88a, #06b6d4);
  color: #fff;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 16px rgba(46,184,138,0.35);
  transition: transform 0.2s, opacity 0.2s;
}
.cfb-load:hover { transform: translateY(-2px); }
.cfb-load:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.cfb-load:disabled { cursor: wait; opacity: 0.85; }
.cfb-load svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: opacity 0.2s; }
.cfb-load-spin {
  position: absolute; inset: 14px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  opacity: 0;
  animation: cfb-load-rot 0.7s linear infinite;
}
.cfb-load.is-loading .cfb-load-icon { opacity: 0; }
.cfb-load.is-loading .cfb-load-spin { opacity: 1; }
@keyframes cfb-load-rot { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .cfb-load,
  .cfb-load * {
    animation: none !important;
  }
}

```

**JS:**
```js
// Loading FAB — click triggers spinner state, returns to ready after 1.5s
document.querySelectorAll('[data-cfb-load]').forEach(function (btn) {
  btn.addEventListener('click', function () {
    if (btn.classList.contains('is-loading')) return;
    btn.classList.add('is-loading');
    btn.disabled = true;
    setTimeout(function () {
      btn.classList.remove('is-loading');
      btn.disabled = false;
    }, 1500);
  });
});
```

### 28. Drag Handle

**Type:** Pure CSS
**Description:** FAB with a 6-dot grip pattern signaling it\u2019s draggable. cursor: grab (and grabbing on :active) makes the affordance unmistakable.

**HTML:**
```html
<button type="button" class="cfb-drag" aria-label="Drag to reposition">
  <svg viewBox="0 0 24 24" aria-hidden="true">
    <circle cx="9" cy="6" r="1.5" />
    <circle cx="15" cy="6" r="1.5" />
    <circle cx="9" cy="12" r="1.5" />
    <circle cx="15" cy="12" r="1.5" />
    <circle cx="9" cy="18" r="1.5" />
    <circle cx="15" cy="18" r="1.5" />
  </svg>
</button>
```

**CSS:**
```css
.cfb-drag {
  width: 44px; height: 44px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  background: #1a1a28;
  color: #b8b6d4;
  cursor: grab;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.15s;
}
.cfb-drag:hover {
  background: rgba(124,108,255,0.1);
  border-color: rgba(124,108,255,0.4);
  color: #a78bfa;
}
.cfb-drag:active { cursor: grabbing; transform: scale(0.95); }
.cfb-drag:focus-visible { outline: 2px solid #7c6cff; outline-offset: 3px; }
.cfb-drag svg { width: 18px; height: 18px; fill: currentColor; }
```

### 29. Voice Action

**Type:** CSS + JS
**Description:** Mic FAB that toggles a recording state on click — pulses a red halo while "listening". aria-pressed reflects state for screen readers.

**HTML:**
```html
<button
  type="button"
  class="cfb-voice"
  aria-label="Start voice input"
  aria-pressed="false"
  data-cfb-voice
>
  <svg viewBox="0 0 24 24" aria-hidden="true">
    <rect x="9" y="3" width="6" height="11" rx="3" />
    <path d="M5 11a7 7 0 0 0 14 0M12 18v3" />
  </svg>
</button>
```

**CSS:**
```css
.cfb-voice {
  position: relative;
  width: 56px; height: 56px;
  border: 0; border-radius: 50%;
  background: #1a1a28;
  border: 1px solid rgba(255,255,255,0.12);
  color: #a78bfa;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(0,0,0,0.35);
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.cfb-voice:hover { background: #1f1f2e; border-color: rgba(167,139,250,0.4); }
.cfb-voice:focus-visible { outline: 2px solid #7c6cff; outline-offset: 3px; }
.cfb-voice svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.cfb-voice[aria-pressed="true"] {
  background: linear-gradient(135deg, #ff6c8a, #ff5d6c);
  border-color: transparent;
  color: #fff;
}
.cfb-voice[aria-pressed="true"]::before,
.cfb-voice[aria-pressed="true"]::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(255,108,138,0.6);
  animation: cfb-voice-pulse 1.4s ease-out infinite;
}
.cfb-voice[aria-pressed="true"]::after { animation-delay: 0.7s; }
@keyframes cfb-voice-pulse {
  0%   { transform: scale(1);   opacity: 1; }
  100% { transform: scale(1.6); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .cfb-voice,
  .cfb-voice * {
    animation: none !important;
  }
}

```

**JS:**
```js
// Voice FAB — toggle aria-pressed (mock recording state for the demo)
document.querySelectorAll('[data-cfb-voice]').forEach(function (btn) {
  btn.addEventListener('click', function () {
    var on = btn.getAttribute('aria-pressed') === 'true';
    btn.setAttribute('aria-pressed', on ? 'false' : 'true');
    btn.setAttribute('aria-label', on ? 'Start voice input' : 'Stop voice input');
    // Hook real Web Speech API here:
    // const rec = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
  });
});
```

### 30. Premium Aurora

**Type:** Pure CSS
**Description:** A soft aurora gradient drifts gently behind the FAB on a 14s loop — the "this is a premium product" floating button. Gentle motion, no chromatic spin.

**HTML:**
```html
<button type="button" class="cfb-aurora" aria-label="Upgrade">
  <svg viewBox="0 0 24 24" aria-hidden="true">
    <polygon points="12 2 15 8 22 9 17 14 18 21 12 18 6 21 7 14 2 9 9 8 12 2" />
  </svg>
</button>
```

**CSS:**
```css
.cfb-aurora {
  position: relative;
  width: 56px; height: 56px;
  border: 0; border-radius: 50%;
  background: #15151d;
  color: #fff;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 6px 18px rgba(0,0,0,0.5);
}
.cfb-aurora::before {
  content: ''; position: absolute;
  top: -40%; left: -20%;
  width: 140%; height: 220%;
  background:
    radial-gradient(ellipse 60px 50px at 20% 50%, rgba(124,108,255,0.7), transparent 60%),
    radial-gradient(ellipse 50px 40px at 60% 50%, rgba(255,108,138,0.6), transparent 60%),
    radial-gradient(ellipse 60px 50px at 100% 50%, rgba(46,204,138,0.45), transparent 60%);
  filter: blur(8px);
  z-index: -1;
  animation: cfb-aurora-drift 14s ease-in-out infinite;
}
.cfb-aurora:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(124,108,255,0.4); }
.cfb-aurora:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.cfb-aurora svg { width: 22px; height: 22px; fill: currentColor; filter: drop-shadow(0 0 4px rgba(255,255,255,0.4)); }
@keyframes cfb-aurora-drift {
  0%, 100% { transform: translateX(0)    translateY(0); }
  50%       { transform: translateX(-8%) translateY(2%); }
}

@media (prefers-reduced-motion: reduce) {
  .cfb-aurora,
  .cfb-aurora * {
    animation: none !important;
  }
}

```

### 31. Quick Reply

**Type:** Pure CSS
**Description:** Click expands into 4 emoji reactions — the messaging-app reaction picker pattern. Uses :focus-within for keyboard accessibility (focus a reaction without it disappearing).

**HTML:**
```html
<div class="cfb-reply">
  <button
    type="button"
    class="cfb-reply-main"
    aria-label="React with emoji"
    aria-haspopup="true"
    aria-expanded="false"
  >
    <svg viewBox="0 0 24 24" aria-hidden="true">
      <circle cx="12" cy="12" r="10" />
      <path d="M8 14s1.5 2 4 2 4-2 4-2M9 9h.01M15 9h.01" />
    </svg>
  </button>
  <div class="cfb-reply-pop" role="group" aria-label="Reactions">
    <button type="button" aria-label="Like">👍</button>
    <button type="button" aria-label="Love">❤️</button>
    <button type="button" aria-label="Laugh">😂</button>
    <button type="button" aria-label="Celebrate">🎉</button>
  </div>
</div>
```

**CSS:**
```css
.cfb-reply {
  position: relative;
}
.cfb-reply-main {
  width: 48px; height: 48px;
  border: 0; border-radius: 50%;
  background: linear-gradient(135deg, #f5a623, #ff6c8a);
  color: #fff;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(245,166,35,0.35);
  transition: transform 0.2s;
}
.cfb-reply-main:hover { transform: scale(1.05); }
.cfb-reply-main:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.cfb-reply-main svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cfb-reply-pop {
  position: absolute;
  bottom: calc(100% + 10px); left: 50%;
  transform: translateX(-50%) scale(0.6);
  display: flex; gap: 4px;
  padding: 6px;
  background: #1a1a28;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  opacity: 0; pointer-events: none;
  transform-origin: center bottom;
  transition: opacity 0.2s, transform 0.25s cubic-bezier(0.34,1.56,0.64,1);
}
.cfb-reply:hover .cfb-reply-pop,
.cfb-reply:focus-within .cfb-reply-pop {
  opacity: 1; pointer-events: auto;
  transform: translateX(-50%) scale(1);
}
.cfb-reply-pop button {
  width: 36px; height: 36px;
  border: 0; border-radius: 50%;
  background: transparent;
  font-size: 18px;
  cursor: pointer;
  transition: transform 0.15s, background 0.15s;
}
.cfb-reply-pop button:hover {
  transform: scale(1.25);
  background: rgba(255,255,255,0.08);
}
.cfb-reply-pop button:focus-visible { outline: 2px solid #f5a623; outline-offset: 2px; }
```

### 32. Square Modern

**Type:** Pure CSS
**Description:** Squircle (rounded square) FAB with subtle hover tilt — the 2025 design trend that breaks from the always-circular FAB. Apple-inspired.

**HTML:**
```html
<button type="button" class="cfb-square" aria-label="Compose">
  <svg viewBox="0 0 24 24" aria-hidden="true">
    <path d="M12 20h9M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z" />
  </svg>
</button>
```

**CSS:**
```css
.cfb-square {
  width: 56px; height: 56px;
  border: 0; border-radius: 18px;
  background: linear-gradient(135deg, #1f1f2e, #15151d);
  color: #cbd5e1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.06);
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.25s, color 0.2s, border-color 0.2s;
}
.cfb-square:hover {
  transform: rotate(-6deg) translateY(-3px);
  color: #a78bfa;
  border-color: rgba(167,139,250,0.4);
  box-shadow: 0 12px 32px rgba(124,108,255,0.3), inset 0 1px 0 rgba(255,255,255,0.08);
}
.cfb-square:active { transform: rotate(0) translateY(0); }
.cfb-square:focus-visible { outline: 2px solid #7c6cff; outline-offset: 3px; }
.cfb-square svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
```

---
## 15 CSS Footer Designs

URL: https://codefronts.com/layouts/css-footer-designs/
Description: 15 hand-coded CSS footer designs — aurora-drift, newspaper masthead, mega multi-column, CTA stripe, trust badges, vinyl record, neon sign, FAQ drawer, language switcher, hover wave and more. Copy-paste ready.
Demo count: 15

### 01. Aurora Drift

**Type:** Pure CSS
**Description:** Modern SaaS footer with a slowly drifting aurora-band gradient behind a 4-column link grid. Brand block on the left, newsletter capture on the right, gradient meta line at the bottom. Pure CSS, no JS.

**HTML:**
```html
<footer class="cf01">
  <div class="cf01b">
    <div class="cf01brand">
      <div class="cf01logo"><span>◆</span> Lumen</div>
      <p class="cf01tag">Build at the speed of thought.</p>
      <div class="cf01social">
        <a href="#" aria-label="Twitter">𝕏</a>
        <a href="#" aria-label="GitHub">◐</a>
        <a href="#" aria-label="LinkedIn">in</a>
        <a href="#" aria-label="YouTube">▶</a>
      </div>
    </div>
    <div class="cf01col">
      <h4>Product</h4>
      <a href="#">Features</a>
      <a href="#">Integrations</a>
      <a href="#">Pricing</a>
      <a href="#">Changelog</a>
      <a href="#">Roadmap</a>
    </div>
    <div class="cf01col">
      <h4>Resources</h4>
      <a href="#">Documentation</a>
      <a href="#">API reference</a>
      <a href="#">Tutorials</a>
      <a href="#">Community</a>
      <a href="#">Status</a>
    </div>
    <div class="cf01col">
      <h4>Company</h4>
      <a href="#">About</a>
      <a href="#">Customers</a>
      <a href="#">Blog</a>
      <a href="#">Careers</a>
      <a href="#">Press kit</a>
    </div>
    <div class="cf01news">
      <h4>Stay updated</h4>
      <p>Monthly product news. No spam.</p>
      <form class="cf01form">
        <input type="email" placeholder="you@company.com" aria-label="Email" />
        <button type="submit">Subscribe</button>
      </form>
    </div>
  </div>
  <div class="cf01meta">
    <span>© 2026 Lumen Inc.</span>
    <div class="cf01legal">
      <a href="#">Privacy</a>
      <a href="#">Terms</a>
      <a href="#">Cookies</a>
      <a href="#">Security</a>
    </div>
  </div>
</footer>
```

**CSS:**
```css
.cf01 {
  position: relative;
  width: 100%;
  padding: 56px 32px 0;
  background: #0a0a14;
  color: #d4d2e8;
  font-family: ui-sans-serif, system-ui, sans-serif;
  overflow: hidden;
  box-sizing: border-box;
}
.cf01::before {
  content: "";
  position: absolute;
  top: -100px;
  left: -10%;
  width: 120%;
  height: 220px;
  background:
    radial-gradient(60% 100% at 30% 50%, #7c6cff 0%, transparent 70%),
    radial-gradient(50% 100% at 75% 50%, #ec4899 0%, transparent 70%);
  filter: blur(60px);
  opacity: 0.55;
  animation: cf01-drift 18s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes cf01-drift {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
.cf01b {
  position: relative;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr 1.5fr;
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.cf01brand {
  min-width: 0;
}
.cf01logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font:
    800 22px/1 ui-sans-serif,
    system-ui;
  color: #fff;
  margin-bottom: 14px;
}
.cf01logo span {
  color: #a78bfa;
  font-size: 22px;
}
.cf01tag {
  margin: 0 0 18px;
  font-size: 13px;
  color: #9d9bbf;
  line-height: 1.5;
  max-width: 240px;
}
.cf01social {
  display: flex;
  gap: 8px;
}
.cf01social a {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #d4d2e8;
  text-decoration: none;
  font-size: 14px;
  transition:
    background 0.2s,
    border-color 0.2s;
}
.cf01social a:hover {
  background: rgba(167, 139, 250, 0.18);
  border-color: #a78bfa;
  color: #fff;
}
.cf01col {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cf01col h4 {
  margin: 0 0 6px;
  font:
    600 12px/1 ui-sans-serif,
    system-ui;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
}
.cf01col a {
  font-size: 13px;
  color: #9d9bbf;
  text-decoration: none;
  transition: color 0.2s;
}
.cf01col a:hover {
  color: #fff;
}
.cf01news {
  min-width: 0;
}
.cf01news h4 {
  margin: 0 0 6px;
  font:
    600 12px/1 ui-sans-serif,
    system-ui;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
}
.cf01news p {
  margin: 0 0 12px;
  font-size: 12px;
  color: #9d9bbf;
}
.cf01form {
  display: flex;
  gap: 6px;
}
.cf01form input {
  flex: 1;
  min-width: 0;
  padding: 9px 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: #fff;
  font:
    13px ui-sans-serif,
    system-ui;
  outline: none;
  transition:
    border-color 0.2s,
    background 0.2s;
}
.cf01form input:focus {
  border-color: #a78bfa;
  background: rgba(255, 255, 255, 0.08);
}
.cf01form button {
  padding: 9px 14px;
  background: linear-gradient(135deg, #7c6cff 0%, #ec4899 100%);
  border: 0;
  border-radius: 6px;
  color: #fff;
  font:
    600 12px ui-sans-serif,
    system-ui;
  cursor: pointer;
  transition: transform 0.15s;
}
.cf01form button:hover {
  transform: translateY(-1px);
}
.cf01meta {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 18px 0 22px;
  font-size: 12px;
  color: #6a6890;
  flex-wrap: wrap;
}
.cf01legal {
  display: flex;
  gap: 18px;
}
.cf01legal a {
  color: #9d9bbf;
  text-decoration: none;
  transition: color 0.2s;
}
.cf01legal a:hover {
  color: #fff;
}
@media (max-width: 880px) {
  .cf01b {
    grid-template-columns: 1fr 1fr;
  }
  .cf01brand,
  .cf01news {
    grid-column: span 2;
  }
}
@media (max-width: 480px) {
  .cf01b {
    grid-template-columns: 1fr;
  }
  .cf01brand,
  .cf01news {
    grid-column: auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cf01::before {
    animation: none;
  }
}
```

### 02. Newspaper Masthead

**Type:** Pure CSS
**Description:** Editorial publishing-house footer styled as a newspaper masthead. Serif drop-cap brand glyph on cream stock, gilt double rules, three-column section list. Pure CSS, no JS.

**HTML:**
```html
<footer class="cf02">
  <div class="cf02rule"></div>
  <div class="cf02b">
    <div class="cf02brand">
      <div class="cf02drop">T</div>
      <div class="cf02bn">
        <div class="cf02name">The Standard</div>
        <div class="cf02tag">Est. 1898 · Daily Edition · No. 9,742</div>
      </div>
    </div>
    <div class="cf02col">
      <h4>Sections</h4>
      <a href="#">Front Page</a>
      <a href="#">World</a>
      <a href="#">Politics</a>
      <a href="#">Business</a>
      <a href="#">Opinion</a>
      <a href="#">Culture</a>
    </div>
    <div class="cf02col">
      <h4>Subscribe</h4>
      <a href="#">Daily Digital</a>
      <a href="#">Weekend Print</a>
      <a href="#">Newsletter</a>
      <a href="#">Gift a subscription</a>
      <a href="#">Group rates</a>
    </div>
    <div class="cf02col">
      <h4>Masthead</h4>
      <a href="#">About us</a>
      <a href="#">Editorial board</a>
      <a href="#">Contact editor</a>
      <a href="#">Submit a tip</a>
      <a href="#">Letters policy</a>
    </div>
  </div>
  <div class="cf02rule"></div>
  <div class="cf02foot">
    <span>© 2026 The Standard Publishing Co. — All rights reserved.</span>
    <div class="cf02legal">
      <a href="#">Privacy</a> · <a href="#">Terms</a> · <a href="#">Subscriber agreement</a>
    </div>
  </div>
</footer>
```

**CSS:**
```css
.cf02 {
  width: 100%;
  padding: 0 32px;
  background: #f5ead0;
  color: #1a1a1a;
  font-family: ui-serif, "Times New Roman", Georgia, serif;
  box-sizing: border-box;
}
.cf02rule {
  height: 5px;
  border-top: 1.5px solid #b8860b;
  border-bottom: 1.5px solid #b8860b;
  margin: 0;
}
.cf02b {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 36px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 36px 0 32px;
}
.cf02brand {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
}
.cf02drop {
  font-size: 64px;
  line-height: 0.85;
  font-weight: 700;
  color: #c43a32;
  padding: 4px 6px 2px;
  border: 2px solid #1a1a1a;
  flex-shrink: 0;
}
.cf02bn {
  min-width: 0;
}
.cf02name {
  font:
    700 26px/1.05 ui-serif,
    "Times New Roman",
    Georgia,
    serif;
  letter-spacing: -0.01em;
}
.cf02tag {
  margin-top: 6px;
  font:
    italic 12px/1.5 ui-serif,
    Georgia,
    serif;
  color: #5c5240;
}
.cf02col {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.cf02col h4 {
  margin: 0 0 8px;
  font:
    700 11px/1 ui-sans-serif,
    system-ui;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #b8860b;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(26, 26, 26, 0.18);
}
.cf02col a {
  font:
    14px/1.5 ui-serif,
    Georgia,
    serif;
  color: #1a1a1a;
  text-decoration: none;
  transition: color 0.2s;
}
.cf02col a:hover {
  color: #c43a32;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cf02foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px 0 18px;
  font:
    italic 12px/1.5 ui-serif,
    Georgia,
    serif;
  color: #5c5240;
  flex-wrap: wrap;
}
.cf02legal a {
  color: #5c5240;
  text-decoration: none;
  transition: color 0.2s;
}
.cf02legal a:hover {
  color: #c43a32;
}
@media (max-width: 880px) {
  .cf02b {
    grid-template-columns: 1fr 1fr;
  }
  .cf02brand {
    grid-column: span 2;
  }
}
@media (max-width: 480px) {
  .cf02b {
    grid-template-columns: 1fr;
  }
  .cf02brand {
    grid-column: auto;
  }
}
```

### 03. Newsletter Hero

**Type:** CSS + JS
**Description:** Personal blog / creator footer dominated by a centered newsletter capture. Oversized email field, animated checkmark on submit, minimal nav strip below. JS handles the success-state checkmark animation.

**HTML:**
```html
<footer class="cf05">
  <div class="cf05hero">
    <h2 class="cf05h">Get one short essay every Friday.</h2>
    <p class="cf05p">No promotions. No "growth hacks." Unsubscribe with one click.</p>
    <form class="cf05f" data-cf05>
      <input type="email" placeholder="you@personal.com" aria-label="Email" required />
      <button type="submit">
        <span class="cf05bt">Subscribe</span>
        <svg class="cf05ck" viewBox="0 0 24 24" aria-hidden="true">
          <path
            d="M5 12l5 5L20 7"
            stroke="currentColor"
            stroke-width="2.5"
            fill="none"
            stroke-linecap="round"
            stroke-linejoin="round"
          />
        </svg>
      </button>
    </form>
    <div class="cf05count">Joined by <strong>4,128</strong> readers</div>
  </div>
  <nav class="cf05n">
    <a href="#">Essays</a>
    <a href="#">About</a>
    <a href="#">Bookshelf</a>
    <a href="#">Now</a>
    <a href="#">RSS</a>
    <a href="#">Contact</a>
  </nav>
  <div class="cf05meta">© 2026 Mira Okafor — Personal corner of the internet.</div>
</footer>
```

**CSS:**
```css
.cf05 {
  width: 100%;
  padding: 64px 24px 28px;
  background: #fdfaf3;
  color: #2a2520;
  font-family: ui-serif, Georgia, serif;
  box-sizing: border-box;
  text-align: center;
}
.cf05hero {
  max-width: 640px;
  margin: 0 auto 36px;
}
.cf05h {
  margin: 0 0 10px;
  font:
    700 32px/1.2 ui-serif,
    Georgia,
    serif;
  color: #2a2520;
  letter-spacing: -0.02em;
}
.cf05p {
  margin: 0 0 24px;
  font:
    16px/1.55 ui-serif,
    Georgia,
    serif;
  color: #6b6056;
}
.cf05f {
  display: flex;
  gap: 8px;
  max-width: 480px;
  margin: 0 auto 16px;
}
.cf05f input {
  flex: 1;
  min-width: 0;
  padding: 14px 18px;
  background: #fff;
  border: 2px solid #2a2520;
  border-radius: 10px;
  font:
    15px ui-sans-serif,
    system-ui;
  color: #2a2520;
  outline: none;
  transition: border-color 0.2s;
}
.cf05f input:focus {
  border-color: #c43a32;
}
.cf05f button {
  position: relative;
  padding: 14px 22px;
  background: #2a2520;
  border: 2px solid #2a2520;
  border-radius: 10px;
  color: #fdfaf3;
  font:
    600 14px ui-sans-serif,
    system-ui;
  cursor: pointer;
  transition:
    background 0.2s,
    transform 0.15s;
  min-width: 120px;
}
.cf05f button:hover {
  background: #c43a32;
  border-color: #c43a32;
}
.cf05f.cf05-ok button {
  background: #2d8a3e;
  border-color: #2d8a3e;
}
.cf05bt {
  transition: opacity 0.2s;
}
.cf05ck {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22px;
  height: 22px;
  transform: translate(-50%, -50%);
  color: #fdfaf3;
  opacity: 0;
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
  transition: opacity 0.2s;
}
.cf05f.cf05-ok .cf05bt {
  opacity: 0;
}
.cf05f.cf05-ok .cf05ck {
  opacity: 1;
  animation: cf05-draw 0.45s 0.15s forwards ease-out;
}
@keyframes cf05-draw {
  to {
    stroke-dashoffset: 0;
  }
}
.cf05count {
  font:
    italic 13px ui-serif,
    Georgia,
    serif;
  color: #8a7d6f;
}
.cf05count strong {
  color: #2a2520;
  font-weight: 700;
}
.cf05n {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 24px;
  padding: 22px 0;
  border-top: 1px solid rgba(42, 37, 32, 0.15);
  border-bottom: 1px solid rgba(42, 37, 32, 0.15);
  margin: 0 auto;
  max-width: 720px;
}
.cf05n a {
  font:
    14px/1 ui-serif,
    Georgia,
    serif;
  color: #6b6056;
  text-decoration: none;
  transition: color 0.2s;
}
.cf05n a:hover {
  color: #c43a32;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.cf05meta {
  margin-top: 18px;
  font:
    italic 12px ui-serif,
    Georgia,
    serif;
  color: #8a7d6f;
}
@media (prefers-reduced-motion: reduce) {
  .cf05ck {
    transition: none;
    animation: none;
    stroke-dashoffset: 0;
  }
}
```

**JS:**
```js
/* Newsletter Hero — submit shows checkmark draw + button color shift,
   then reverts after 2.6s. Demo only — no actual network call. */
(function () {
  var form = document.querySelector("[data-cf05]");
  if (!form) return;
  form.addEventListener("submit", function (e) {
    e.preventDefault();
    if (form.classList.contains("cf05-ok")) return;
    form.classList.add("cf05-ok");
    setTimeout(function () {
      form.classList.remove("cf05-ok");
      form.reset();
    }, 2600);
  });
})();
```

### 04. Postcard

**Type:** Pure CSS
**Description:** Travel / lifestyle footer with a Polaroid-style brand card rotated 1.5° on the left, dotted-border "wish you were here" feel, and three column link blocks beside it. Pure CSS, no JS.

**HTML:**
```html
<footer class="cf06">
  <div class="cf06b">
    <div class="cf06card">
      <div class="cf06img" aria-hidden="true">⛵</div>
      <div class="cf06cap">
        <div class="cf06cn">Driftways</div>
        <div class="cf06ct">Slow travel · Est. 2018</div>
      </div>
    </div>
    <div class="cf06col">
      <h4>Wander</h4>
      <a href="#">Destinations</a>
      <a href="#">Itineraries</a>
      <a href="#">Field guides</a>
      <a href="#">Packing lists</a>
      <a href="#">Slow trains</a>
    </div>
    <div class="cf06col">
      <h4>Stories</h4>
      <a href="#">Recent essays</a>
      <a href="#">Photo journals</a>
      <a href="#">Reader letters</a>
      <a href="#">Audio dispatches</a>
      <a href="#">Issue archive</a>
    </div>
    <div class="cf06col">
      <h4>Studio</h4>
      <a href="#">About</a>
      <a href="#">Contributors</a>
      <a href="#">Submissions</a>
      <a href="#">Bookshop</a>
      <a href="#">Newsletter</a>
    </div>
  </div>
  <div class="cf06meta">
    <span>© 2026 Driftways · Made slowly in Lisbon, Tokyo, and Mexico City.</span>
  </div>
</footer>
```

**CSS:**
```css
.cf06 {
  width: 100%;
  padding: 56px 32px 28px;
  background: #ebe3d3;
  color: #2a2520;
  font-family: ui-sans-serif, system-ui, sans-serif;
  box-sizing: border-box;
}
.cf06b {
  display: grid;
  grid-template-columns: 220px 1fr 1fr 1fr;
  gap: 32px;
  max-width: 1100px;
  margin: 0 auto;
  padding-bottom: 28px;
  border-bottom: 1.5px dashed rgba(42, 37, 32, 0.25);
  align-items: flex-start;
}
.cf06card {
  background: #fff;
  padding: 14px 14px 18px;
  box-shadow:
    0 8px 22px rgba(42, 37, 32, 0.18),
    0 2px 6px rgba(42, 37, 32, 0.08);
  transform: rotate(-1.5deg);
  transition: transform 0.3s;
}
.cf06card:hover {
  transform: rotate(0deg) translateY(-2px);
}
.cf06img {
  aspect-ratio: 1;
  background: #c8b89e;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 60px;
}
.cf06cap {
  padding-top: 12px;
  text-align: center;
}
.cf06cn {
  font:
    700 18px/1.1 "Bradley Hand",
    "Marker Felt",
    ui-serif,
    cursive;
  color: #2a2520;
}
.cf06ct {
  font:
    11px/1.4 ui-sans-serif,
    system-ui;
  color: #6b6056;
  margin-top: 3px;
  letter-spacing: 0.04em;
}
.cf06col {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}
.cf06col h4 {
  margin: 0 0 6px;
  font:
    700 11px/1 ui-sans-serif,
    system-ui;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #c43a32;
}
.cf06col a {
  font-size: 14px;
  color: #2a2520;
  text-decoration: none;
  transition: color 0.2s;
}
.cf06col a:hover {
  color: #c43a32;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cf06meta {
  max-width: 1100px;
  margin: 18px auto 0;
  font:
    italic 12px ui-serif,
    Georgia,
    serif;
  color: #6b6056;
  text-align: center;
}
@media (max-width: 880px) {
  .cf06b {
    grid-template-columns: 1fr 1fr;
  }
  .cf06card {
    grid-column: span 2;
    max-width: 240px;
    margin: 0 auto;
  }
}
@media (max-width: 480px) {
  .cf06b {
    grid-template-columns: 1fr;
  }
  .cf06card {
    grid-column: auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cf06card {
    transition: none;
  }
}
```

### 05. Brutalist Mono

**Type:** Pure CSS
**Description:** Agency / portfolio footer in brutalist mono — heavy 4px black borders, hard yellow background, hard offset shadows, all-caps labels. Aggressive, confident, and unmistakable. Pure CSS.

**HTML:**
```html
<footer class="cf07">
  <div class="cf07b">
    <div class="cf07brand">
      <div class="cf07mark">/CF/</div>
      <div class="cf07tag">DESIGN STUDIO · BERLIN · EST. 2017</div>
    </div>
    <div class="cf07col">
      <h4>WORK</h4>
      <a href="#">Selected projects</a>
      <a href="#">Case studies</a>
      <a href="#">Awards</a>
      <a href="#">Press</a>
    </div>
    <div class="cf07col">
      <h4>STUDIO</h4>
      <a href="#">About us</a>
      <a href="#">Process</a>
      <a href="#">Hiring</a>
      <a href="#">Contact</a>
    </div>
    <div class="cf07col">
      <h4>WRITE</h4>
      <a href="#">Journal</a>
      <a href="#">Notes</a>
      <a href="#">Talks</a>
      <a href="#">Bookshelf</a>
    </div>
  </div>
  <div class="cf07cta">
    <span>NEW PROJECT?</span>
    <a href="#">HELLO@CODEFRONTS.STUDIO →</a>
  </div>
  <div class="cf07meta">
    <span>© 2026 — ALL RIGHTS RESERVED.</span>
    <span>NO COOKIES. NO TRACKING. NO BS.</span>
  </div>
</footer>
```

**CSS:**
```css
.cf07 {
  width: 100%;
  padding: 36px 32px 24px;
  background: #fef0c7;
  color: #0a0a0a;
  font-family: ui-sans-serif, "Inter", system-ui, sans-serif;
  box-sizing: border-box;
  border-top: 4px solid #0a0a0a;
}
.cf07b {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto 28px;
  padding-bottom: 28px;
  border-bottom: 4px solid #0a0a0a;
}
.cf07brand {
  min-width: 0;
  padding: 18px 20px;
  background: #0a0a0a;
  color: #fef0c7;
  box-shadow: 6px 6px 0 0 #c43a32;
}
.cf07mark {
  font:
    900 36px/1 ui-monospace,
    "SF Mono",
    monospace;
  letter-spacing: -0.02em;
}
.cf07tag {
  margin-top: 10px;
  font:
    700 11px/1.4 ui-monospace,
    monospace;
  letter-spacing: 0.08em;
  color: #fef0c7;
  opacity: 0.7;
}
.cf07col {
  padding: 18px 20px;
  background: #fff;
  border: 3px solid #0a0a0a;
  box-shadow: 4px 4px 0 0 #0a0a0a;
  min-width: 0;
  transition:
    transform 0.12s ease-out,
    box-shadow 0.12s ease-out;
}
.cf07col:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 0 #0a0a0a;
}
.cf07col h4 {
  margin: 0 0 12px;
  font:
    900 13px/1 ui-sans-serif,
    system-ui;
  letter-spacing: 0.06em;
  color: #0a0a0a;
  padding-bottom: 8px;
  border-bottom: 2px solid #0a0a0a;
}
.cf07col a {
  display: block;
  padding: 4px 0;
  font:
    600 13px/1.5 ui-sans-serif,
    system-ui;
  color: #0a0a0a;
  text-decoration: none;
  transition:
    color 0.2s,
    padding-left 0.2s;
}
.cf07col a:hover {
  color: #c43a32;
  padding-left: 4px;
}
.cf07cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  max-width: 1200px;
  margin: 0 auto 24px;
  padding: 18px 22px;
  background: #c43a32;
  color: #fef0c7;
  border: 3px solid #0a0a0a;
  box-shadow: 6px 6px 0 0 #0a0a0a;
  flex-wrap: wrap;
}
.cf07cta span {
  font:
    900 14px/1 ui-sans-serif,
    system-ui;
  letter-spacing: 0.04em;
}
.cf07cta a {
  font:
    900 16px/1 ui-monospace,
    monospace;
  color: #fef0c7;
  text-decoration: none;
  letter-spacing: -0.01em;
  transition: color 0.2s;
}
.cf07cta a:hover {
  color: #fff;
}
.cf07meta {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  max-width: 1200px;
  margin: 0 auto;
  font:
    700 11px/1 ui-monospace,
    monospace;
  letter-spacing: 0.08em;
  flex-wrap: wrap;
}
@media (max-width: 880px) {
  .cf07b {
    grid-template-columns: 1fr 1fr;
  }
  .cf07brand {
    grid-column: span 2;
  }
}
@media (max-width: 480px) {
  .cf07b {
    grid-template-columns: 1fr;
  }
  .cf07brand {
    grid-column: auto;
  }
  .cf07cta {
    flex-direction: column;
    align-items: flex-start;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cf07col {
    transition: none;
  }
}
```

### 06. Vinyl Record

**Type:** Pure CSS
**Description:** Music / podcast brand footer with a slowly spinning vinyl record on the left and a static tonearm resting on it. Three column link sections to the right. CSS animation drives the spin; respects prefers-reduced-motion.

**HTML:**
```html
<footer class="cf11">
  <div class="cf11b">
    <div class="cf11player">
      <div class="cf11disc">
        <div class="cf11label">
          <div class="cf11ln">Audiograph</div>
          <div class="cf11ld">2018-2026</div>
        </div>
      </div>
      <div class="cf11arm" aria-hidden="true">
        <div class="cf11pivot"></div>
        <div class="cf11needle"></div>
      </div>
    </div>
    <div class="cf11side">
      <div class="cf11brand">
        <div class="cf11logo">◉ Audiograph</div>
        <p>A weekly podcast about analog craft in a digital age.</p>
        <div class="cf11platforms">
          <a href="#">Spotify</a><span>·</span> <a href="#">Apple</a><span>·</span>
          <a href="#">Overcast</a><span>·</span>
          <a href="#">RSS</a>
        </div>
      </div>
      <div class="cf11cols">
        <div class="cf11col">
          <h4>Listen</h4>
          <a href="#">Latest episode</a>
          <a href="#">Archive</a>
          <a href="#">Show notes</a>
        </div>
        <div class="cf11col">
          <h4>About</h4>
          <a href="#">Hosts</a>
          <a href="#">Patrons</a>
          <a href="#">Press</a>
        </div>
        <div class="cf11col">
          <h4>Connect</h4>
          <a href="#">Newsletter</a>
          <a href="#">Twitter</a>
          <a href="#">Contact</a>
        </div>
      </div>
    </div>
  </div>
  <div class="cf11meta">© 2026 Audiograph · Recorded in a converted barn in upstate New York.</div>
</footer>
```

**CSS:**
```css
.cf11 {
  width: 100%;
  padding: 48px 32px 24px;
  background: #1c1814;
  color: #e8d5a8;
  font-family: ui-serif, Georgia, serif;
  box-sizing: border-box;
}
.cf11b {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 40px;
  max-width: 1100px;
  margin: 0 auto 24px;
  align-items: center;
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(232, 213, 168, 0.15);
}
.cf11player {
  position: relative;
  width: 220px;
  height: 220px;
}
.cf11disc {
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, #1c1814 0%, #1c1814 32%, #0a0807 33%, #0a0807 100%);
  position: relative;
  box-shadow:
    inset 0 0 0 1px rgba(232, 213, 168, 0.18),
    0 6px 24px rgba(0, 0, 0, 0.6);
  animation: cf11-spin 5s linear infinite;
}
.cf11disc::before {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: repeating-radial-gradient(
    circle,
    transparent 0 4px,
    rgba(232, 213, 168, 0.04) 4px 5px
  );
  pointer-events: none;
}
.cf11disc::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  transform: translate(-50%, -50%);
  background: #1c1814;
  border-radius: 50%;
  border: 1px solid rgba(232, 213, 168, 0.4);
}
.cf11label {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 70px;
  height: 70px;
  transform: translate(-50%, -50%);
  background: #c43a32;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.cf11ln {
  font:
    700 9px/1 ui-serif,
    Georgia,
    serif;
  color: #fef0c7;
  letter-spacing: 0.06em;
}
.cf11ld {
  font:
    8px/1 ui-serif,
    Georgia,
    serif;
  color: rgba(254, 240, 199, 0.7);
  margin-top: 2px;
  letter-spacing: 0.04em;
}
@keyframes cf11-spin {
  to {
    transform: rotate(360deg);
  }
}
.cf11arm {
  position: absolute;
  top: -10px;
  right: -22px;
  width: 130px;
  height: 16px;
  transform-origin: right center;
  transform: rotate(-22deg);
  pointer-events: none;
}
.cf11pivot {
  position: absolute;
  right: 0;
  top: 0;
  width: 16px;
  height: 16px;
  background: #b8860b;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.cf11needle {
  position: absolute;
  left: 0;
  top: 7px;
  width: 110px;
  height: 3px;
  background: #d4af37;
  border-radius: 1px;
}
.cf11needle::before {
  content: "";
  position: absolute;
  left: -2px;
  top: -2px;
  width: 7px;
  height: 7px;
  background: #d4af37;
  border-radius: 50%;
}
.cf11side {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.cf11brand {
  min-width: 0;
}
.cf11logo {
  font:
    700 22px/1 ui-serif,
    Georgia,
    serif;
  color: #e8d5a8;
  margin-bottom: 8px;
}
.cf11brand p {
  margin: 0 0 12px;
  font:
    italic 14px/1.55 ui-serif,
    Georgia,
    serif;
  color: #c4ad7a;
}
.cf11platforms {
  font-size: 12px;
}
.cf11platforms a {
  color: #d4af37;
  text-decoration: none;
  transition: color 0.2s;
}
.cf11platforms a:hover {
  color: #fef0c7;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cf11platforms span {
  color: #6b5e3f;
  margin: 0 4px;
}
.cf11cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.cf11col {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}
.cf11col h4 {
  margin: 0 0 4px;
  font:
    700 11px/1 ui-sans-serif,
    system-ui;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #d4af37;
}
.cf11col a {
  font:
    13px/1.5 ui-serif,
    Georgia,
    serif;
  color: #e8d5a8;
  text-decoration: none;
  transition: color 0.2s;
}
.cf11col a:hover {
  color: #fef0c7;
}
.cf11meta {
  max-width: 1100px;
  margin: 0 auto;
  font:
    italic 12px ui-serif,
    Georgia,
    serif;
  color: #6b5e3f;
  text-align: center;
}
@media (max-width: 880px) {
  .cf11b {
    grid-template-columns: 1fr;
  }
  .cf11player {
    margin: 0 auto;
  }
  .cf11cols {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 480px) {
  .cf11cols {
    grid-template-columns: 1fr;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cf11disc {
    animation: none;
  }
}
```

### 07. Neon Sign

**Type:** Pure CSS
**Description:** Nightlife / gaming brand footer with an animated neon-tube wordmark that flickers irregularly, hot-pink glow halo, dark-room backdrop. Three column link sections in muted neon. Pure CSS keyframes drive the flicker.

**HTML:**
```html
<footer class="cf12">
  <div class="cf12bg" aria-hidden="true"></div>
  <div class="cf12brand">
    <h2 class="cf12sign">FLUX<span>·</span>BAR</h2>
    <p class="cf12sub">Open till sunrise · Brooklyn NY · 21+</p>
  </div>
  <div class="cf12b">
    <div class="cf12col">
      <h4>Visit</h4>
      <a href="#">Hours</a>
      <a href="#">Reservations</a>
      <a href="#">Private events</a>
      <a href="#">Directions</a>
    </div>
    <div class="cf12col">
      <h4>Tonight</h4>
      <a href="#">DJ schedule</a>
      <a href="#">Cocktail menu</a>
      <a href="#">Specials</a>
      <a href="#">Photos</a>
    </div>
    <div class="cf12col">
      <h4>Connect</h4>
      <a href="#">Instagram</a>
      <a href="#">TikTok</a>
      <a href="#">Newsletter</a>
      <a href="#">Press</a>
    </div>
  </div>
  <div class="cf12meta">© 2026 Flux · Drink responsibly · Don't drink and drive</div>
</footer>
```

**CSS:**
```css
.cf12 {
  position: relative;
  width: 100%;
  padding: 56px 32px 26px;
  background: #0a0612;
  color: #e0c8e8;
  font-family: "Bebas Neue", "Oswald", ui-sans-serif, system-ui, sans-serif;
  overflow: hidden;
  box-sizing: border-box;
  text-align: center;
}
.cf12bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 30%, rgba(236, 72, 153, 0.25) 0%, transparent 50%),
    repeating-linear-gradient(180deg, transparent 0 1px, rgba(255, 255, 255, 0.02) 1px 2px);
  pointer-events: none;
}
.cf12brand {
  position: relative;
  padding-bottom: 32px;
}
.cf12sign {
  margin: 0;
  font:
    800 60px/1 "Bebas Neue",
    "Oswald",
    ui-sans-serif,
    system-ui,
    sans-serif;
  color: #ff3df5;
  letter-spacing: 0.08em;
  text-shadow:
    0 0 8px #ff3df5,
    0 0 18px #ff3df5,
    0 0 36px rgba(255, 61, 245, 0.6),
    0 0 60px rgba(255, 61, 245, 0.3);
  animation: cf12-flicker 5s infinite;
}
.cf12sign span {
  color: #3df5ff;
  text-shadow:
    0 0 8px #3df5ff,
    0 0 18px #3df5ff,
    0 0 36px rgba(61, 245, 255, 0.6);
  margin: 0 4px;
}
@keyframes cf12-flicker {
  0%,
  18%,
  22%,
  25%,
  53%,
  57%,
  100% {
    opacity: 1;
    text-shadow:
      0 0 8px #ff3df5,
      0 0 18px #ff3df5,
      0 0 36px rgba(255, 61, 245, 0.6),
      0 0 60px rgba(255, 61, 245, 0.3);
  }
  20%,
  24%,
  55% {
    opacity: 0.6;
    text-shadow: none;
  }
}
.cf12sub {
  position: relative;
  margin: 14px 0 0;
  font:
    500 13px/1 ui-sans-serif,
    system-ui;
  color: #a78bfa;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.cf12b {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px;
  max-width: 720px;
  margin: 0 auto 32px;
  padding-top: 32px;
  border-top: 1px solid rgba(167, 139, 250, 0.2);
}
.cf12col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.cf12col h4 {
  margin: 0 0 6px;
  font:
    700 12px/1 ui-sans-serif,
    system-ui;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #ff3df5;
  text-shadow: 0 0 6px rgba(255, 61, 245, 0.5);
}
.cf12col a {
  font:
    14px/1.5 ui-sans-serif,
    system-ui;
  color: #c4b5fd;
  text-decoration: none;
  letter-spacing: 0.04em;
  transition:
    color 0.2s,
    text-shadow 0.2s;
}
.cf12col a:hover {
  color: #fff;
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.8);
}
.cf12meta {
  position: relative;
  font:
    500 11px/1 ui-sans-serif,
    system-ui;
  color: #6a5a8a;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
@media (max-width: 480px) {
  .cf12sign {
    font-size: 44px;
  }
  .cf12b {
    grid-template-columns: 1fr;
    gap: 22px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cf12sign {
    animation: none;
  }
}
```

### 08. Editorial Centered

**Type:** Pure CSS
**Description:** Minimalist single-column footer anchored by an oversized centered wordmark. A single hairline rule sits above the brand; below it, five links separated by mid-dot dividers; below that, a small italic copyright. Personal-brand and boutique-studio aesthetic. Pure CSS, no JS.

**HTML:**
```html
<footer class="cf16">
  <div class="cf16inner">
    <div class="cf16rule" aria-hidden="true"></div>
    <div class="cf16wordmark">Atlas</div>
    <nav class="cf16nav">
      <a href="#">About</a>
      <span aria-hidden="true">·</span>
      <a href="#">Pricing</a>
      <span aria-hidden="true">·</span>
      <a href="#">Docs</a>
      <span aria-hidden="true">·</span>
      <a href="#">Contact</a>
      <span aria-hidden="true">·</span>
      <a href="#">Privacy</a>
    </nav>
    <div class="cf16meta">© 2026 Atlas Studio · Made in Brooklyn</div>
  </div>
</footer>
```

**CSS:**
```css
.cf16 {
  width: 100%;
  padding: 64px 32px 48px;
  background: #fafaf7;
  color: #1a1a1a;
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  box-sizing: border-box;
  text-align: center;
}
.cf16inner {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.cf16rule {
  width: 64px;
  height: 1px;
  background: #1a1a1a;
  margin-bottom: 36px;
  opacity: 0.5;
}
.cf16wordmark {
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-size: 48px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #1a1a1a;
  margin-bottom: 28px;
}
.cf16nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 32px;
}
.cf16nav a {
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.01em;
  color: #4a4a4a;
  text-decoration: none;
  transition: color 0.2s;
}
.cf16nav a:hover {
  color: #1a1a1a;
}
.cf16nav span {
  color: #c4c4c4;
  font-size: 14px;
  user-select: none;
}
.cf16meta {
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 13px;
  color: #8a8a8a;
}
@media (max-width: 600px) {
  .cf16 {
    padding: 48px 24px 36px;
  }
  .cf16wordmark {
    font-size: 38px;
  }
  .cf16nav {
    gap: 10px;
  }
  .cf16nav a {
    font-size: 13px;
  }
}
```

### 09. Mega Footer

**Type:** Pure CSS
**Description:** Wide 5-column mega footer for content-heavy sites — Stripe / Shopify scale. Brand block, four link columns, newsletter, social rail, region/language picker, compliance badges, full meta line. Pure CSS, no JS.

**HTML:**
```html
<footer class="cf17">
  <div class="cf17top">
    <div class="cf17brand">
      <div class="cf17logo">▲ Helix</div>
      <p>The composable infrastructure for modern teams.</p>
      <form class="cf17nf">
        <input type="email" placeholder="Email address" aria-label="Email" />
        <button type="submit">Subscribe</button>
      </form>
      <div class="cf17social">
        <a href="#" aria-label="Twitter">𝕏</a>
        <a href="#" aria-label="GitHub">◐</a>
        <a href="#" aria-label="LinkedIn">in</a>
        <a href="#" aria-label="YouTube">▶</a>
        <a href="#" aria-label="Instagram">◉</a>
        <a href="#" aria-label="Discord">⌬</a>
      </div>
    </div>
    <div class="cf17cols">
      <div class="cf17col">
        <h4>Product</h4>
        <a href="#">Overview</a>
        <a href="#">Features</a>
        <a href="#">Integrations</a>
        <a href="#">Pricing</a>
        <a href="#">Changelog</a>
        <a href="#">Roadmap</a>
        <a href="#">Status</a>
      </div>
      <div class="cf17col">
        <h4>Solutions</h4>
        <a href="#">Startups</a>
        <a href="#">Enterprise</a>
        <a href="#">Agencies</a>
        <a href="#">Education</a>
        <a href="#">Non-profits</a>
        <a href="#">Developers</a>
      </div>
      <div class="cf17col">
        <h4>Resources</h4>
        <a href="#">Documentation</a>
        <a href="#">API reference</a>
        <a href="#">Guides</a>
        <a href="#">Templates</a>
        <a href="#">Customer stories</a>
        <a href="#">Blog</a>
        <a href="#">Webinars</a>
      </div>
      <div class="cf17col">
        <h4>Company</h4>
        <a href="#">About</a>
        <a href="#">Careers <span class="cf17badge">12</span></a>
        <a href="#">Press</a>
        <a href="#">Contact</a>
        <a href="#">Partners</a>
        <a href="#">Investors</a>
      </div>
    </div>
  </div>
  <div class="cf17bot">
    <div class="cf17trust">
      <span class="cf17b1">SOC 2</span>
      <span class="cf17b1">GDPR</span>
      <span class="cf17b1">ISO 27001</span>
      <span class="cf17b1">HIPAA</span>
    </div>
    <div class="cf17region">
      <span>🌐</span>
      <select aria-label="Region">
        <option>United States</option>
        <option>Europe</option>
        <option>Asia Pacific</option>
      </select>
    </div>
  </div>
  <div class="cf17meta">
    <span>© 2026 Helix Labs, Inc.</span>
    <div class="cf17legal">
      <a href="#">Privacy</a>
      <a href="#">Terms</a>
      <a href="#">Cookies</a>
      <a href="#">Security</a>
      <a href="#">DPA</a>
      <a href="#">Sitemap</a>
    </div>
  </div>
</footer>
```

**CSS:**
```css
.cf17 {
  width: 100%;
  padding: 56px 32px 22px;
  background: #0c1014;
  color: #c8cdd4;
  font-family: ui-sans-serif, "Inter", system-ui, sans-serif;
  box-sizing: border-box;
}
.cf17top {
  display: grid;
  grid-template-columns: 1.5fr 3fr;
  gap: 40px;
  max-width: 1280px;
  margin: 0 auto 36px;
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.cf17brand {
  min-width: 0;
}
.cf17logo {
  font:
    800 24px/1 ui-sans-serif,
    system-ui;
  color: #fff;
  letter-spacing: -0.01em;
  margin-bottom: 12px;
}
.cf17brand p {
  margin: 0 0 18px;
  font-size: 14px;
  color: #8a93a0;
  line-height: 1.5;
  max-width: 320px;
}
.cf17nf {
  display: flex;
  gap: 6px;
  margin-bottom: 18px;
  max-width: 320px;
}
.cf17nf input {
  flex: 1;
  min-width: 0;
  padding: 9px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: #fff;
  font:
    13px ui-sans-serif,
    system-ui;
  outline: none;
  transition: border-color 0.2s;
}
.cf17nf input:focus {
  border-color: #3b82f6;
}
.cf17nf button {
  padding: 9px 14px;
  background: #3b82f6;
  border: 0;
  border-radius: 6px;
  color: #fff;
  font:
    600 12px ui-sans-serif,
    system-ui;
  cursor: pointer;
  transition: background 0.2s;
  white-space: nowrap;
}
.cf17nf button:hover {
  background: #2563eb;
}
.cf17social {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.cf17social a {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #c8cdd4;
  text-decoration: none;
  font-size: 14px;
  transition:
    background 0.2s,
    color 0.2s;
}
.cf17social a:hover {
  background: #3b82f6;
  color: #fff;
}
.cf17cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  min-width: 0;
}
.cf17col {
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-width: 0;
}
.cf17col h4 {
  margin: 0 0 6px;
  font:
    600 12px/1 ui-sans-serif,
    system-ui;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
}
.cf17col a {
  font-size: 13px;
  color: #8a93a0;
  text-decoration: none;
  transition: color 0.2s;
  display: flex;
  align-items: center;
  gap: 8px;
}
.cf17col a:hover {
  color: #fff;
}
.cf17badge {
  display: inline-block;
  padding: 1px 7px;
  background: #3b82f6;
  border-radius: 999px;
  font:
    700 10px/1.4 ui-sans-serif,
    system-ui;
  color: #fff;
}
.cf17bot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  max-width: 1280px;
  margin: 0 auto 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-wrap: wrap;
}
.cf17trust {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.cf17b1 {
  padding: 5px 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  font:
    700 11px/1 ui-sans-serif,
    system-ui;
  color: #c8cdd4;
  letter-spacing: 0.04em;
}
.cf17region {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cf17region select {
  padding: 7px 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: #c8cdd4;
  font:
    12px ui-sans-serif,
    system-ui;
  cursor: pointer;
}
.cf17meta {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  max-width: 1280px;
  margin: 0 auto;
  font-size: 12px;
  color: #6a7280;
  flex-wrap: wrap;
}
.cf17legal {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.cf17legal a {
  color: #8a93a0;
  text-decoration: none;
  transition: color 0.2s;
}
.cf17legal a:hover {
  color: #fff;
}
@media (max-width: 880px) {
  .cf17top {
    grid-template-columns: 1fr;
  }
  .cf17cols {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 480px) {
  .cf17cols {
    grid-template-columns: 1fr;
  }
}
```

### 10. Contact Card

**Type:** Pure CSS
**Description:** Local-business / professional-services footer with prominent contact card. Address, phone, email, business hours, and a stylized SVG map block. Two-column layout with a quick-links column on the right. Pure CSS.

**HTML:**
```html
<footer class="cf18">
  <div class="cf18b">
    <div class="cf18contact">
      <div class="cf18head">
        <div class="cf18logo">⚐ Northway Studio</div>
        <p>Architecture &amp; interior design · Brooklyn NY</p>
      </div>
      <div class="cf18grid">
        <div class="cf18item">
          <span class="cf18ico">📍</span>
          <div>
            <strong>Visit</strong>
            <div>247 Atlantic Ave<br />Brooklyn, NY 11217</div>
          </div>
        </div>
        <div class="cf18item">
          <span class="cf18ico">📞</span>
          <div>
            <strong>Call</strong>
            <div>+1 (718) 555-0247<br />Mon–Fri 9am–6pm</div>
          </div>
        </div>
        <div class="cf18item">
          <span class="cf18ico">✉</span>
          <div>
            <strong>Email</strong>
            <div>hello@northway.studio<br />press@northway.studio</div>
          </div>
        </div>
        <div class="cf18item">
          <span class="cf18ico">⏱</span>
          <div>
            <strong>Hours</strong>
            <div>Tue–Sat 10am–5pm<br />Sun–Mon by appointment</div>
          </div>
        </div>
      </div>
    </div>
    <div class="cf18map">
      <svg viewBox="0 0 200 200" aria-hidden="true">
        <rect width="200" height="200" fill="#e6e2d6" />
        <path d="M0 60 L200 80" stroke="#c4bca6" stroke-width="2" fill="none" />
        <path d="M0 120 L200 140" stroke="#c4bca6" stroke-width="2" fill="none" />
        <path d="M40 0 L60 200" stroke="#c4bca6" stroke-width="2" fill="none" />
        <path d="M120 0 L140 200" stroke="#c4bca6" stroke-width="2" fill="none" />
        <path d="M0 100 Q 100 90 200 105" stroke="#a8c5b0" stroke-width="3" fill="none" />
        <circle cx="100" cy="100" r="10" fill="#c43a32" />
        <circle cx="100" cy="100" r="4" fill="#fff" />
      </svg>
      <div class="cf18mc">View directions →</div>
    </div>
  </div>
  <div class="cf18foot">
    <nav class="cf18nav">
      <a href="#">Projects</a>
      <a href="#">About</a>
      <a href="#">Press</a>
      <a href="#">Careers</a>
    </nav>
    <span>© 2026 Northway Studio LLC</span>
  </div>
</footer>
```

**CSS:**
```css
.cf18 {
  width: 100%;
  padding: 48px 32px 22px;
  background: #faf6ed;
  color: #2a2520;
  font-family: ui-serif, Georgia, serif;
  box-sizing: border-box;
}
.cf18b {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 36px;
  max-width: 1100px;
  margin: 0 auto 28px;
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(42, 37, 32, 0.18);
}
.cf18contact {
  min-width: 0;
}
.cf18head {
  margin-bottom: 24px;
}
.cf18logo {
  font:
    700 22px/1 ui-serif,
    Georgia,
    serif;
  color: #2a2520;
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}
.cf18head p {
  margin: 0;
  font:
    italic 13px/1.4 ui-serif,
    Georgia,
    serif;
  color: #6b6056;
}
.cf18grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  min-width: 0;
}
.cf18item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  min-width: 0;
}
.cf18ico {
  font-size: 18px;
  flex-shrink: 0;
  line-height: 1.4;
}
.cf18item strong {
  display: block;
  font:
    700 11px/1 ui-sans-serif,
    system-ui;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #c43a32;
  margin-bottom: 5px;
}
.cf18item div div {
  font:
    14px/1.55 ui-serif,
    Georgia,
    serif;
  color: #2a2520;
}
.cf18map {
  min-width: 0;
}
.cf18map svg {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(42, 37, 32, 0.18);
}
.cf18mc {
  margin-top: 10px;
  text-align: center;
  font:
    600 13px/1 ui-sans-serif,
    system-ui;
  color: #c43a32;
  cursor: pointer;
}
.cf18mc:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cf18foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  max-width: 1100px;
  margin: 0 auto;
  flex-wrap: wrap;
  font:
    italic 12px ui-serif,
    Georgia,
    serif;
  color: #6b6056;
}
.cf18nav {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
}
.cf18nav a {
  font:
    14px/1 ui-serif,
    Georgia,
    serif;
  color: #2a2520;
  text-decoration: none;
  transition: color 0.2s;
}
.cf18nav a:hover {
  color: #c43a32;
}
@media (max-width: 880px) {
  .cf18b {
    grid-template-columns: 1fr;
  }
  .cf18map svg {
    max-width: 280px;
    margin: 0 auto;
    display: block;
  }
}
@media (max-width: 480px) {
  .cf18grid {
    grid-template-columns: 1fr;
  }
}
```

### 11. Trust Badge Footer

**Type:** Pure CSS
**Description:** B2B credibility footer with a featured customer testimonial above the link grid, a horizontal customer-logo strip below, and SOC 2 / GDPR / ISO compliance badges. Pure CSS, no JS.

**HTML:**
```html
<footer class="cf19">
  <div class="cf19top">
    <div class="cf19quote">
      <div class="cf19stars">★★★★★</div>
      <blockquote>
        "Cut our deployment time from 2 hours to 7 minutes. The team has been responsive and the
        platform is rock-solid."
      </blockquote>
      <div class="cf19who">
        <div class="cf19avatar">SK</div>
        <div>
          <strong>Sarah Kim</strong>
          <span>VP Engineering · Atlas Corp</span>
        </div>
      </div>
    </div>
    <div class="cf19trust">
      <h4>Trusted by teams at</h4>
      <div class="cf19logos">
        <span>STRIPE</span>
        <span>NOTION</span>
        <span>LINEAR</span>
        <span>VERCEL</span>
        <span>RAYCAST</span>
      </div>
      <div class="cf19badges">
        <div class="cf19b">SOC 2</div>
        <div class="cf19b">GDPR</div>
        <div class="cf19b">ISO 27001</div>
      </div>
    </div>
  </div>
  <div class="cf19links">
    <div class="cf19col">
      <h4>Product</h4>
      <a href="#">Features</a>
      <a href="#">Pricing</a>
      <a href="#">Changelog</a>
    </div>
    <div class="cf19col">
      <h4>Resources</h4>
      <a href="#">Docs</a>
      <a href="#">API</a>
      <a href="#">Tutorials</a>
    </div>
    <div class="cf19col">
      <h4>Company</h4>
      <a href="#">About</a>
      <a href="#">Careers</a>
      <a href="#">Contact</a>
    </div>
    <div class="cf19col">
      <h4>Legal</h4>
      <a href="#">Privacy</a>
      <a href="#">Terms</a>
      <a href="#">DPA</a>
    </div>
  </div>
  <div class="cf19meta">© 2026 Stack Inc. — Built in Berlin and Toronto.</div>
</footer>
```

**CSS:**
```css
.cf19 {
  width: 100%;
  padding: 48px 32px 22px;
  background: #f8f8f5;
  color: #1a1a1a;
  font-family: ui-sans-serif, "Inter", system-ui, sans-serif;
  box-sizing: border-box;
}
.cf19top {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 36px;
  max-width: 1200px;
  margin: 0 auto 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(26, 26, 26, 0.1);
}
.cf19quote {
  padding: 22px 24px;
  background: #fff;
  border: 1px solid rgba(26, 26, 26, 0.08);
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.03);
}
.cf19stars {
  color: #f59e0b;
  font-size: 14px;
  letter-spacing: 0.08em;
  margin-bottom: 10px;
}
.cf19quote blockquote {
  margin: 0 0 16px;
  font:
    17px/1.55 ui-serif,
    Georgia,
    serif;
  color: #1a1a1a;
}
.cf19who {
  display: flex;
  align-items: center;
  gap: 12px;
}
.cf19avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7c6cff 0%, #ec4899 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font:
    700 13px ui-sans-serif,
    system-ui;
  flex-shrink: 0;
}
.cf19who strong {
  display: block;
  font:
    600 13px/1.2 ui-sans-serif,
    system-ui;
}
.cf19who span {
  font:
    12px/1.4 ui-sans-serif,
    system-ui;
  color: #6a6a6a;
}
.cf19trust {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
.cf19trust h4 {
  margin: 0;
  font:
    600 11px/1 ui-sans-serif,
    system-ui;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6a6a6a;
}
.cf19logos {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  align-items: center;
}
.cf19logos span {
  font:
    800 14px/1 ui-sans-serif,
    "Inter",
    system-ui;
  color: #4a4a4a;
  letter-spacing: 0.04em;
  opacity: 0.65;
  transition: opacity 0.2s;
}
.cf19logos span:hover {
  opacity: 1;
}
.cf19badges {
  display: flex;
  gap: 10px;
  margin-top: 4px;
  flex-wrap: wrap;
}
.cf19b {
  padding: 6px 12px;
  background: #fff;
  border: 1px solid rgba(26, 26, 26, 0.12);
  border-radius: 6px;
  font:
    700 11px/1 ui-sans-serif,
    system-ui;
  color: #1a1a1a;
  letter-spacing: 0.04em;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.cf19links {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  max-width: 1200px;
  margin: 0 auto 24px;
}
.cf19col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.cf19col h4 {
  margin: 0 0 6px;
  font:
    600 11px/1 ui-sans-serif,
    system-ui;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #1a1a1a;
}
.cf19col a {
  font-size: 13px;
  color: #4a4a4a;
  text-decoration: none;
  transition: color 0.2s;
}
.cf19col a:hover {
  color: #1a1a1a;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cf19meta {
  max-width: 1200px;
  margin: 0 auto;
  padding-top: 20px;
  border-top: 1px solid rgba(26, 26, 26, 0.06);
  font-size: 12px;
  color: #8a8a8a;
  text-align: center;
}
@media (max-width: 880px) {
  .cf19top {
    grid-template-columns: 1fr;
  }
  .cf19links {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 480px) {
  .cf19links {
    grid-template-columns: 1fr;
  }
}
```

### 12. FAQ Drawer

**Type:** Pure CSS
**Description:** Footer that doubles as a quick-help panel. Top section holds 4 collapsible FAQ entries via native <details>/<summary>; bottom row has a standard link grid. Pure CSS via the disclosure widget.

**HTML:**
```html
<footer class="cf20">
  <div class="cf20faq">
    <h3 class="cf20h">Need a hand?</h3>
    <details class="cf20d">
      <summary>How do I get started?<span class="cf20arr">+</span></summary>
      <div class="cf20a">
        Sign up for a free account, install the SDK with one command, and follow the 5-minute
        Quickstart in our docs.
      </div>
    </details>
    <details class="cf20d">
      <summary>What does it cost?<span class="cf20arr">+</span></summary>
      <div class="cf20a">
        The free tier covers up to 10,000 requests/month. Paid plans start at $29/month and scale by
        usage. See pricing.
      </div>
    </details>
    <details class="cf20d">
      <summary>Is there an SLA?<span class="cf20arr">+</span></summary>
      <div class="cf20a">
        Pro and Enterprise plans include a 99.9% uptime SLA with credits if we miss it. Status page
        lives at status.example.com.
      </div>
    </details>
    <details class="cf20d">
      <summary>How do I cancel?<span class="cf20arr">+</span></summary>
      <div class="cf20a">
        Cancel anytime from billing settings. We prorate refunds for annual plans and don't ask why
        — though we appreciate when you tell us.
      </div>
    </details>
  </div>
  <div class="cf20links">
    <div class="cf20col">
      <h4>Product</h4>
      <a href="#">Features</a>
      <a href="#">Pricing</a>
      <a href="#">Docs</a>
    </div>
    <div class="cf20col">
      <h4>Company</h4>
      <a href="#">About</a>
      <a href="#">Careers</a>
      <a href="#">Press</a>
    </div>
    <div class="cf20col">
      <h4>Legal</h4>
      <a href="#">Privacy</a>
      <a href="#">Terms</a>
      <a href="#">Cookies</a>
    </div>
  </div>
  <div class="cf20meta">
    <span>© 2026 Replica Software</span>
    <a href="#" class="cf20more">Read full FAQ →</a>
  </div>
</footer>
```

**CSS:**
```css
.cf20 {
  width: 100%;
  padding: 44px 32px 20px;
  background: #1a1d24;
  color: #c8cdd4;
  font-family: ui-sans-serif, system-ui, sans-serif;
  box-sizing: border-box;
}
.cf20faq {
  max-width: 760px;
  margin: 0 auto 36px;
}
.cf20h {
  margin: 0 0 20px;
  font:
    700 22px/1.2 ui-sans-serif,
    system-ui;
  color: #fff;
  text-align: center;
  letter-spacing: -0.01em;
}
.cf20d {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 14px 0;
}
.cf20d:first-of-type {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.cf20d summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 4px 4px;
  font:
    600 15px/1.4 ui-sans-serif,
    system-ui;
  color: #fff;
  cursor: pointer;
  list-style: none;
}
.cf20d summary::-webkit-details-marker {
  display: none;
}
.cf20d summary:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 4px;
  border-radius: 4px;
}
.cf20arr {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 50%;
  font:
    600 16px ui-sans-serif,
    system-ui;
  color: #c8cdd4;
  flex-shrink: 0;
  transition:
    transform 0.25s,
    background 0.2s;
}
.cf20d[open] .cf20arr {
  transform: rotate(45deg);
  background: #3b82f6;
  color: #fff;
}
.cf20a {
  padding: 12px 4px 4px;
  font:
    14px/1.65 ui-sans-serif,
    system-ui;
  color: #8a93a0;
  max-width: 600px;
}
.cf20links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  max-width: 760px;
  margin: 0 auto 22px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.cf20col {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}
.cf20col h4 {
  margin: 0 0 4px;
  font:
    600 11px/1 ui-sans-serif,
    system-ui;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
}
.cf20col a {
  font-size: 13px;
  color: #8a93a0;
  text-decoration: none;
  transition: color 0.2s;
}
.cf20col a:hover {
  color: #fff;
}
.cf20meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 760px;
  margin: 0 auto;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 12px;
  color: #6a7280;
  flex-wrap: wrap;
}
.cf20more {
  color: #3b82f6;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s;
}
.cf20more:hover {
  color: #60a5fa;
}
@media (max-width: 600px) {
  .cf20links {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 400px) {
  .cf20links {
    grid-template-columns: 1fr;
  }
}
```

### 13. CTA Stripe

**Type:** Pure CSS
**Description:** Conversion-driven footer with a bold full-bleed CTA stripe ("Ready to ship?") above a compact link footer. Coral CTA stripe contrasts with the dark base. Pure CSS, no JS.

**HTML:**
```html
<footer class="cf21">
  <div class="cf21cta">
    <div class="cf21ctab">
      <div class="cf21ctah">
        <h2>Ready to ship?</h2>
        <p>Start free. Upgrade when you're ready. No credit card needed.</p>
      </div>
      <div class="cf21btns">
        <a href="#" class="cf21prim">Start free →</a>
        <a href="#" class="cf21sec">Talk to sales</a>
      </div>
    </div>
  </div>
  <div class="cf21foot">
    <div class="cf21b">
      <div class="cf21brand">
        <div class="cf21logo">▸ Pulse</div>
        <p>Real-time analytics for product teams.</p>
      </div>
      <div class="cf21cols">
        <div class="cf21col">
          <h4>Product</h4>
          <a href="#">Features</a>
          <a href="#">Pricing</a>
          <a href="#">Integrations</a>
          <a href="#">Changelog</a>
        </div>
        <div class="cf21col">
          <h4>Resources</h4>
          <a href="#">Docs</a>
          <a href="#">API</a>
          <a href="#">Examples</a>
          <a href="#">Status</a>
        </div>
        <div class="cf21col">
          <h4>Company</h4>
          <a href="#">About</a>
          <a href="#">Careers</a>
          <a href="#">Press</a>
          <a href="#">Contact</a>
        </div>
      </div>
    </div>
    <div class="cf21meta">
      <span>© 2026 Pulse Analytics</span>
      <div class="cf21legal">
        <a href="#">Privacy</a>
        <a href="#">Terms</a>
        <a href="#">Security</a>
      </div>
    </div>
  </div>
</footer>
```

**CSS:**
```css
.cf21 {
  width: 100%;
  background: #0e0e14;
  color: #c8cdd4;
  font-family: ui-sans-serif, "Inter", system-ui, sans-serif;
  box-sizing: border-box;
}
.cf21cta {
  background: linear-gradient(135deg, #ec4899 0%, #f97316 100%);
  padding: 40px 32px;
}
.cf21ctab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  max-width: 1200px;
  margin: 0 auto;
  flex-wrap: wrap;
}
.cf21ctah h2 {
  margin: 0 0 8px;
  font:
    800 30px/1.1 ui-sans-serif,
    "Inter",
    system-ui;
  color: #fff;
  letter-spacing: -0.02em;
}
.cf21ctah p {
  margin: 0;
  font:
    16px/1.5 ui-sans-serif,
    system-ui;
  color: rgba(255, 255, 255, 0.85);
}
.cf21btns {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.cf21prim {
  padding: 12px 22px;
  background: #fff;
  border-radius: 8px;
  color: #1a1a1a;
  font:
    700 14px ui-sans-serif,
    system-ui;
  text-decoration: none;
  transition:
    transform 0.15s,
    box-shadow 0.15s;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.cf21prim:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.25);
}
.cf21sec {
  padding: 12px 22px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  color: #fff;
  font:
    700 14px ui-sans-serif,
    system-ui;
  text-decoration: none;
  transition: background 0.2s;
  backdrop-filter: blur(8px);
}
.cf21sec:hover {
  background: rgba(255, 255, 255, 0.22);
}
.cf21foot {
  padding: 36px 32px 22px;
}
.cf21b {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 36px;
  max-width: 1200px;
  margin: 0 auto;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.cf21brand {
  min-width: 0;
}
.cf21logo {
  font:
    800 20px/1 ui-sans-serif,
    system-ui;
  color: #fff;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}
.cf21brand p {
  margin: 0;
  font-size: 13px;
  color: #8a93a0;
  line-height: 1.5;
  max-width: 240px;
}
.cf21cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  min-width: 0;
}
.cf21col {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}
.cf21col h4 {
  margin: 0 0 4px;
  font:
    600 11px/1 ui-sans-serif,
    system-ui;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
}
.cf21col a {
  font-size: 13px;
  color: #8a93a0;
  text-decoration: none;
  transition: color 0.2s;
}
.cf21col a:hover {
  color: #fff;
}
.cf21meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  max-width: 1200px;
  margin: 0 auto;
  padding-top: 18px;
  font-size: 12px;
  color: #6a7280;
  flex-wrap: wrap;
}
.cf21legal {
  display: flex;
  gap: 18px;
}
.cf21legal a {
  color: #8a93a0;
  text-decoration: none;
  transition: color 0.2s;
}
.cf21legal a:hover {
  color: #fff;
}
@media (max-width: 880px) {
  .cf21b {
    grid-template-columns: 1fr;
  }
  .cf21cols {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 480px) {
  .cf21cols {
    grid-template-columns: 1fr;
  }
  .cf21ctah h2 {
    font-size: 24px;
  }
}
```

### 14. Globe Switcher

**Type:** Pure CSS
**Description:** Global-SaaS footer featuring language, currency, and region pickers above a standard 4-column link grid. Region pills for quick selection. Pure CSS via native <select> for accessibility.

**HTML:**
```html
<footer class="cf22">
  <div class="cf22b">
    <div class="cf22cols">
      <div class="cf22brand">
        <div class="cf22logo">◯ Meridian</div>
        <p>Payments infrastructure for the global internet.</p>
      </div>
      <div class="cf22col">
        <h4>Products</h4>
        <a href="#">Payments</a>
        <a href="#">Billing</a>
        <a href="#">Connect</a>
        <a href="#">Issuing</a>
      </div>
      <div class="cf22col">
        <h4>Use cases</h4>
        <a href="#">Marketplaces</a>
        <a href="#">SaaS</a>
        <a href="#">Retail</a>
        <a href="#">Platforms</a>
      </div>
      <div class="cf22col">
        <h4>Resources</h4>
        <a href="#">Docs</a>
        <a href="#">API</a>
        <a href="#">Pricing</a>
        <a href="#">Support</a>
      </div>
      <div class="cf22col">
        <h4>Company</h4>
        <a href="#">About</a>
        <a href="#">Customers</a>
        <a href="#">Jobs</a>
        <a href="#">Newsroom</a>
      </div>
    </div>
    <div class="cf22pickers">
      <div class="cf22pick">
        <label>🌐 Language</label>
        <select aria-label="Language">
          <option>English (US)</option>
          <option>Français</option>
          <option>Deutsch</option>
          <option>日本語</option>
          <option>中文</option>
        </select>
      </div>
      <div class="cf22pick">
        <label>💱 Currency</label>
        <select aria-label="Currency">
          <option>USD ($)</option>
          <option>EUR (€)</option>
          <option>GBP (£)</option>
          <option>JPY (¥)</option>
          <option>SGD (S$)</option>
        </select>
      </div>
      <div class="cf22pick cf22regions">
        <label>📍 Region</label>
        <div class="cf22pills">
          <span class="cf22pill cf22-on">US</span>
          <span class="cf22pill">EU</span>
          <span class="cf22pill">APAC</span>
          <span class="cf22pill">LATAM</span>
        </div>
      </div>
    </div>
  </div>
  <div class="cf22meta">
    <span>© 2026 Meridian Payments — Available in 47 countries</span>
    <div class="cf22legal">
      <a href="#">Privacy</a>
      <a href="#">Terms</a>
      <a href="#">Compliance</a>
    </div>
  </div>
</footer>
```

**CSS:**
```css
.cf22 {
  width: 100%;
  padding: 48px 32px 22px;
  background: #0a1628;
  color: #c8d4e8;
  font-family: ui-sans-serif, "Inter", system-ui, sans-serif;
  box-sizing: border-box;
}
.cf22b {
  max-width: 1200px;
  margin: 0 auto 28px;
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.cf22cols {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
  gap: 28px;
  margin-bottom: 32px;
}
.cf22brand {
  min-width: 0;
}
.cf22logo {
  font:
    800 22px/1 ui-sans-serif,
    system-ui;
  color: #fff;
  letter-spacing: -0.01em;
  margin-bottom: 10px;
}
.cf22brand p {
  margin: 0;
  font-size: 13px;
  color: #8a98b8;
  line-height: 1.5;
}
.cf22col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.cf22col h4 {
  margin: 0 0 4px;
  font:
    600 11px/1 ui-sans-serif,
    system-ui;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
}
.cf22col a {
  font-size: 13px;
  color: #8a98b8;
  text-decoration: none;
  transition: color 0.2s;
}
.cf22col a:hover {
  color: #fff;
}
.cf22pickers {
  display: grid;
  grid-template-columns: 1fr 1fr 1.4fr;
  gap: 18px;
  padding: 20px 22px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
}
.cf22pick {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}
.cf22pick label {
  font:
    600 11px/1 ui-sans-serif,
    system-ui;
  letter-spacing: 0.06em;
  color: #c8d4e8;
}
.cf22pick select {
  padding: 9px 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 7px;
  color: #fff;
  font:
    13px ui-sans-serif,
    system-ui;
  cursor: pointer;
  outline: none;
  transition: border-color 0.2s;
}
.cf22pick select:focus {
  border-color: #60a5fa;
}
.cf22pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.cf22pill {
  padding: 7px 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  font:
    700 12px/1 ui-sans-serif,
    system-ui;
  color: #c8d4e8;
  cursor: pointer;
  transition:
    background 0.2s,
    border-color 0.2s,
    color 0.2s;
}
.cf22pill:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}
.cf22-on {
  background: #60a5fa;
  border-color: #60a5fa;
  color: #0a1628;
}
.cf22-on:hover {
  background: #3b82f6;
  color: #fff;
}
.cf22meta {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  max-width: 1200px;
  margin: 0 auto;
  font-size: 12px;
  color: #6a7a99;
  flex-wrap: wrap;
}
.cf22legal {
  display: flex;
  gap: 18px;
}
.cf22legal a {
  color: #8a98b8;
  text-decoration: none;
  transition: color 0.2s;
}
.cf22legal a:hover {
  color: #fff;
}
@media (max-width: 880px) {
  .cf22cols {
    grid-template-columns: 1fr 1fr;
  }
  .cf22brand {
    grid-column: span 2;
  }
  .cf22pickers {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 480px) {
  .cf22cols {
    grid-template-columns: 1fr;
  }
  .cf22brand {
    grid-column: auto;
  }
}
```

### 15. Hover Wave

**Type:** CSS + JS
**Description:** Interactive footer where every link grows a smooth wave underline on hover, plus a floating back-to-top button anchored to the corner. JS handles only the back-to-top scroll behavior; the underline is pure CSS.

**HTML:**
```html
<footer class="cf23">
  <a href="#top" class="cf23top" data-cf23-top aria-label="Back to top"><span>↑</span></a>
  <div class="cf23b">
    <div class="cf23brand">
      <div class="cf23logo">◆ Wavelength</div>
      <p>The newsletter app for thoughtful writers.</p>
    </div>
    <div class="cf23cols">
      <div class="cf23col">
        <h4>Product</h4>
        <a href="#">Editor</a>
        <a href="#">Distribution</a>
        <a href="#">Analytics</a>
        <a href="#">Pricing</a>
      </div>
      <div class="cf23col">
        <h4>Writers</h4>
        <a href="#">Featured</a>
        <a href="#">Get started</a>
        <a href="#">Migrate</a>
        <a href="#">Community</a>
      </div>
      <div class="cf23col">
        <h4>Readers</h4>
        <a href="#">Discover</a>
        <a href="#">Categories</a>
        <a href="#">Mobile app</a>
        <a href="#">Recommendations</a>
      </div>
      <div class="cf23col">
        <h4>Company</h4>
        <a href="#">About</a>
        <a href="#">Careers</a>
        <a href="#">Blog</a>
        <a href="#">Press</a>
      </div>
    </div>
  </div>
  <div class="cf23meta">
    <span>© 2026 Wavelength · Made for writers, by writers.</span>
    <div class="cf23legal">
      <a href="#">Privacy</a>
      <a href="#">Terms</a>
      <a href="#">Contact</a>
    </div>
  </div>
</footer>
```

**CSS:**
```css
.cf23 {
  position: relative;
  width: 100%;
  padding: 56px 32px 22px;
  background: #fef9f0;
  color: #2a2520;
  font-family: ui-serif, Georgia, serif;
  box-sizing: border-box;
}
.cf23top {
  position: absolute;
  top: -22px;
  right: 32px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #c43a32;
  color: #fef9f0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(196, 58, 50, 0.35);
  transition:
    transform 0.2s,
    box-shadow 0.2s;
  cursor: pointer;
}
.cf23top:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(196, 58, 50, 0.45);
}
.cf23top span {
  font:
    700 22px/1 ui-sans-serif,
    system-ui;
}
.cf23b {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 36px;
  max-width: 1200px;
  margin: 0 auto 28px;
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(42, 37, 32, 0.18);
}
.cf23brand {
  min-width: 0;
}
.cf23logo {
  font:
    700 22px/1 ui-serif,
    Georgia,
    serif;
  color: #2a2520;
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}
.cf23brand p {
  margin: 0;
  font:
    italic 14px/1.55 ui-serif,
    Georgia,
    serif;
  color: #6b6056;
  max-width: 240px;
}
.cf23cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  min-width: 0;
}
.cf23col {
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-width: 0;
}
.cf23col h4 {
  margin: 0 0 4px;
  font:
    700 11px/1 ui-sans-serif,
    system-ui;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #c43a32;
}
.cf23col a {
  position: relative;
  padding-bottom: 4px;
  font:
    14px/1.4 ui-serif,
    Georgia,
    serif;
  color: #2a2520;
  text-decoration: none;
  transition: color 0.25s;
  align-self: flex-start;
}
.cf23col a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 6px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 6'%3E%3Cpath d='M0 3 Q 3 0 6 3 T 12 3 T 18 3 T 24 3' stroke='%23c43a32' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 12px 6px;
  background-position: 0 100%;
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1);
}
.cf23col a:hover {
  color: #c43a32;
}
.cf23col a:hover::after {
  transform: scaleX(1);
}
.cf23meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  max-width: 1200px;
  margin: 0 auto;
  font:
    italic 12px/1.5 ui-serif,
    Georgia,
    serif;
  color: #8a7d6f;
  flex-wrap: wrap;
}
.cf23legal {
  display: flex;
  gap: 18px;
}
.cf23legal a {
  color: #6b6056;
  text-decoration: none;
  transition: color 0.2s;
  font-style: normal;
}
.cf23legal a:hover {
  color: #c43a32;
}
@media (max-width: 880px) {
  .cf23b {
    grid-template-columns: 1fr;
  }
  .cf23cols {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 480px) {
  .cf23cols {
    grid-template-columns: 1fr;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cf23col a::after {
    transition: none;
  }
  .cf23top {
    transition: none;
  }
}
```

**JS:**
```js
/* Hover Wave + Back-to-Top — handles only the scroll-to-top behavior;
   the wave underline is pure CSS. */
(function () {
  var btn = document.querySelector("[data-cf23-top]");
  if (!btn) return;
  btn.addEventListener("click", function (e) {
    e.preventDefault();
    window.scrollTo({ top: 0, behavior: "smooth" });
  });
})();
```

---
## 12 CSS Glassmorphism Designs

URL: https://codefronts.com/design-styles/css-glassmorphism/
Description: 12 free CSS glassmorphism designs — cards, modals, navigation, form surfaces and layered effects with copy-paste HTML and CSS.
Demo count: 12

### 01. Glass Card

**Type:** Pure CSS
**Description:** The canonical glass surface — translucent white over a vivid aurora gradient. Backdrop-filter blur is what sells the effect.

**HTML:**
```html
<div class="gm-card-bg">
  <div class="gm-card">
    <div class="gm-card__icon">✦</div>
    <h3 class="gm-card__title">Aurora Pass</h3>
    <p class="gm-card__body">All collections, every generator, premium tools.</p>
    <button class="gm-card__btn">Get started</button>
  </div>
</div>
```

**CSS:**
```css
.gm-card-bg {
  position: relative; padding: 32px;
  border-radius: 18px; overflow: hidden;
  background:
    radial-gradient(ellipse at 18% 20%, #8b5cf6 0%, transparent 55%),
    radial-gradient(ellipse at 82% 30%, #ec4899 0%, transparent 55%),
    radial-gradient(ellipse at 50% 90%, #06b6d4 0%, transparent 55%),
    #0f0f1a;
}
.gm-card {
  background: rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 14px;
  padding: 22px 24px;
  color: #f8fafc;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}
.gm-card__icon {
  width: 38px; height: 38px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  display: grid; place-items: center;
  font-size: 18px; margin-bottom: 14px;
}
.gm-card__title { margin: 0 0 6px; font: 700 16px/1.2 system-ui, sans-serif; }
.gm-card__body  { margin: 0 0 14px; font: 12px/1.55 system-ui, sans-serif; opacity: 0.78; }
.gm-card__btn {
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  padding: 8px 16px; border-radius: 8px;
  font: 600 12px system-ui, sans-serif;
  cursor: pointer;
  transition: background 0.2s;
}
.gm-card__btn:hover { background: rgba(255, 255, 255, 0.28); }
```

### 02. Frosted Modal

**Type:** Pure CSS
**Description:** A heavy-blur dialog floating over a busy backdrop — the modal pattern that finally makes sense in 2024+ browsers.

**HTML:**
```html
<div class="gm-modal-bg">
  <div class="gm-modal">
    <div class="gm-modal__head">
      <h3>Confirm action</h3>
      <button class="gm-modal__close" aria-label="Close">×</button>
    </div>
    <p class="gm-modal__body">Delete this collection? This action cannot be undone.</p>
    <div class="gm-modal__row">
      <button class="gm-modal__btn">Cancel</button>
      <button class="gm-modal__btn gm-modal__btn--danger">Delete</button>
    </div>
  </div>
</div>
```

**CSS:**
```css
.gm-modal-bg {
  position: relative; padding: 28px;
  border-radius: 18px; overflow: hidden;
  background:
    radial-gradient(circle at 20% 30%, #f97316 0%, transparent 45%),
    radial-gradient(circle at 80% 70%, #ef4444 0%, transparent 45%),
    #1a0a0a;
}
.gm-modal {
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 14px;
  padding: 18px 20px;
  color: #fff;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3);
}
.gm-modal__head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 10px;
}
.gm-modal__head h3 { margin: 0; font: 700 14px system-ui, sans-serif; }
.gm-modal__close {
  background: none; border: none; color: rgba(255, 255, 255, 0.6);
  font: 600 22px system-ui; line-height: 1; cursor: pointer; padding: 0;
}
.gm-modal__close:hover { color: #fff; }
.gm-modal__body { margin: 0 0 14px; font: 12px/1.55 system-ui, sans-serif; opacity: 0.78; }
.gm-modal__row { display: flex; gap: 8px; justify-content: flex-end; }
.gm-modal__btn {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  padding: 7px 14px; border-radius: 7px;
  font: 600 11px system-ui, sans-serif; cursor: pointer;
}
.gm-modal__btn:hover { background: rgba(255, 255, 255, 0.2); }
.gm-modal__btn--danger {
  background: rgba(239, 68, 68, 0.3);
  border-color: rgba(239, 68, 68, 0.5);
}
.gm-modal__btn--danger:hover { background: rgba(239, 68, 68, 0.5); }
```

### 03. Pricing Glass

**Type:** Pure CSS
**Description:** Tiered pricing card with featured glass treatment — the middle plan reads "premium" through stronger glass + brighter rim.

**HTML:**
```html
<div class="gm-price-bg">
  <div class="gm-price">
    <div class="gm-price__tag">Pro</div>
    <div class="gm-price__amount">$19<span>/mo</span></div>
    <ul class="gm-price__list">
      <li>Unlimited projects</li>
      <li>Priority support</li>
      <li>Custom domains</li>
    </ul>
    <button class="gm-price__btn">Choose Pro</button>
  </div>
</div>
```

**CSS:**
```css
.gm-price-bg {
  position: relative; padding: 28px;
  border-radius: 18px; overflow: hidden;
  background:
    radial-gradient(circle at 30% 20%, #14b8a6 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, #06b6d4 0%, transparent 50%),
    #042f2e;
}
.gm-price {
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  border: 1.5px solid rgba(255, 255, 255, 0.28);
  border-radius: 14px;
  padding: 18px 20px;
  color: #fff;
  box-shadow: 0 12px 36px rgba(20, 184, 166, 0.25);
}
.gm-price__tag {
  display: inline-block;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 4px 10px; border-radius: 12px;
  font: 600 10px system-ui, sans-serif;
  letter-spacing: 0.08em; text-transform: uppercase;
  margin-bottom: 10px;
}
.gm-price__amount { font: 800 28px/1 system-ui, sans-serif; margin-bottom: 14px; }
.gm-price__amount span { font-size: 12px; opacity: 0.65; font-weight: 500; }
.gm-price__list { list-style: none; padding: 0; margin: 0 0 14px; font: 12px/1.8 system-ui, sans-serif; opacity: 0.85; }
.gm-price__list li::before { content: '✓ '; color: #5eead4; font-weight: 700; }
.gm-price__btn {
  width: 100%;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.32);
  color: #fff;
  padding: 9px; border-radius: 8px;
  font: 600 12px system-ui, sans-serif; cursor: pointer;
}
.gm-price__btn:hover { background: rgba(255, 255, 255, 0.3); }
```

### 04. Glass Navbar

**Type:** Pure CSS
**Description:** Sticky navbar that stays translucent over any page background — backdrop-filter saturate boosts the colors behind to keep contrast.

**HTML:**
```html
<div class="gm-nav-bg">
  <nav class="gm-nav">
    <span class="gm-nav__logo">✦ Brand</span>
    <a class="gm-nav__link gm-nav__link--active" href="#">Home</a>
    <a class="gm-nav__link" href="#">Features</a>
    <a class="gm-nav__link" href="#">Pricing</a>
    <button class="gm-nav__cta">Sign in</button>
  </nav>
</div>
```

**CSS:**
```css
.gm-nav-bg {
  position: relative; padding: 8px;
  border-radius: 18px; overflow: hidden;
  background:
    radial-gradient(circle at 25% 50%, #6366f1 0%, transparent 50%),
    radial-gradient(circle at 75% 50%, #ec4899 0%, transparent 50%),
    #1a1426;
}
.gm-nav {
  display: flex; align-items: center; gap: 4px;
  background: rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  backdrop-filter: blur(18px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  padding: 6px 10px;
}
.gm-nav__logo {
  font: 700 13px system-ui, sans-serif;
  color: #fff; margin-right: 12px;
}
.gm-nav__link {
  font: 500 12px system-ui, sans-serif;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  padding: 6px 12px; border-radius: 7px;
  transition: background 0.2s, color 0.2s;
}
.gm-nav__link:hover {
  background: rgba(255, 255, 255, 0.1); color: #fff;
}
.gm-nav__link--active {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}
.gm-nav__cta {
  margin-left: auto;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  padding: 6px 14px; border-radius: 7px;
  font: 600 12px system-ui, sans-serif; cursor: pointer;
}
.gm-nav__cta:hover { background: rgba(255, 255, 255, 0.32); }
```

### 05. Glass Tab Bar

**Type:** Pure CSS
**Description:** Bottom navigation bar (mobile-app pattern) where the active pill is a brighter glass surface inside a darker glass container.

**HTML:**
```html
<div class="gm-tabbar-bg">
  <nav class="gm-tabbar">
    <button class="gm-tabbar__tab gm-tabbar__tab--active">
      <span class="gm-tabbar__icon">⌂</span>Home
    </button>
    <button class="gm-tabbar__tab"><span class="gm-tabbar__icon">⌕</span>Search</button>
    <button class="gm-tabbar__tab"><span class="gm-tabbar__icon">♡</span>Saved</button>
    <button class="gm-tabbar__tab"><span class="gm-tabbar__icon">◔</span>Profile</button>
  </nav>
</div>
```

**CSS:**
```css
.gm-tabbar-bg {
  position: relative; padding: 24px;
  border-radius: 18px; overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 20%, #fb923c 0%, transparent 55%),
    radial-gradient(ellipse at 30% 80%, #f43f5e 0%, transparent 55%),
    #1f0a14;
}
.gm-tabbar {
  display: flex; gap: 4px;
  background: rgba(20, 20, 30, 0.5);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 6px;
}
.gm-tabbar__tab {
  flex: 1;
  background: none; border: none;
  color: rgba(255, 255, 255, 0.55);
  padding: 8px 4px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  font: 600 10px system-ui, sans-serif;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.gm-tabbar__icon { font-size: 18px; line-height: 1; }
.gm-tabbar__tab:hover { color: rgba(255, 255, 255, 0.85); }
.gm-tabbar__tab--active {
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
}
```

### 06. Glass Sidebar

**Type:** Pure CSS
**Description:** Vertical glass sidebar with active-item highlight — the classic dashboard chrome reimagined as a single semi-transparent panel.

**HTML:**
```html
<div class="gm-side-bg">
  <aside class="gm-side">
    <div class="gm-side__brand">✦</div>
    <a class="gm-side__item gm-side__item--active" href="#"><span>◫</span>Dashboard</a>
    <a class="gm-side__item" href="#"><span>◐</span>Projects</a>
    <a class="gm-side__item" href="#"><span>☰</span>Inbox</a>
    <a class="gm-side__item" href="#"><span>⚙</span>Settings</a>
  </aside>
</div>
```

**CSS:**
```css
.gm-side-bg {
  position: relative; padding: 14px;
  border-radius: 18px; overflow: hidden;
  background:
    radial-gradient(ellipse at 80% 20%, #84cc16 0%, transparent 50%),
    radial-gradient(ellipse at 20% 80%, #06b6d4 0%, transparent 50%),
    #061a14;
}
.gm-side {
  display: flex; flex-direction: column; gap: 4px;
  background: rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  padding: 12px 8px; width: 180px;
}
.gm-side__brand {
  font-size: 18px; color: #fff;
  text-align: center; padding: 6px 0 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  margin-bottom: 8px;
}
.gm-side__item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: 8px;
  font: 500 12px system-ui, sans-serif;
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}
.gm-side__item span {
  width: 18px; text-align: center;
  font-size: 13px; opacity: 0.7;
}
.gm-side__item:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.gm-side__item--active {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}
.gm-side__item--active span { opacity: 1; }
```

### 07. Glass Input

**Type:** Pure CSS
**Description:** Translucent text input with a subtle inner glow on focus — useful when a form sits over imagery or a video background.

**HTML:**
```html
<div class="gm-input-bg">
  <label class="gm-input">
    <span class="gm-input__lbl">Email</span>
    <input class="gm-input__field" type="email" placeholder="you@codefronts.com" />
  </label>
</div>
```

**CSS:**
```css
.gm-input-bg {
  position: relative; padding: 32px;
  border-radius: 18px; overflow: hidden;
  background:
    radial-gradient(ellipse at 30% 30%, #a855f7 0%, transparent 55%),
    radial-gradient(ellipse at 70% 70%, #6366f1 0%, transparent 55%),
    #1a0a2e;
}
.gm-input { display: block; }
.gm-input__lbl {
  display: block;
  font: 600 11px system-ui, sans-serif;
  color: rgba(255, 255, 255, 0.65);
  letter-spacing: 0.06em; text-transform: uppercase;
  margin-bottom: 8px;
}
.gm-input__field {
  width: 100%; box-sizing: border-box;
  background: rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  padding: 11px 14px;
  color: #fff;
  font: 13px system-ui, sans-serif;
  transition: border-color 0.25s, box-shadow 0.25s;
}
.gm-input__field::placeholder { color: rgba(255, 255, 255, 0.55); }
.gm-input__field:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.55);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18),
    0 0 24px rgba(168, 85, 247, 0.25);
}
```

### 08. Glass Toggle

**Type:** Pure CSS
**Description:** Frosted iOS-style toggle switch sitting over a vivid backdrop — the thumb is a brighter glass island inside the track.

**HTML:**
```html
<div class="gm-toggle-bg">
  <label class="gm-toggle">
    <input type="checkbox" class="gm-toggle__input" checked />
    <span class="gm-toggle__track">
      <span class="gm-toggle__thumb"></span>
    </span>
    <span class="gm-toggle__label">Notifications</span>
  </label>
</div>
```

**CSS:**
```css
.gm-toggle-bg {
  position: relative; padding: 32px 28px;
  border-radius: 18px; overflow: hidden;
  background:
    radial-gradient(ellipse at 20% 30%, #f59e0b 0%, transparent 50%),
    radial-gradient(ellipse at 80% 70%, #ec4899 0%, transparent 55%),
    #2a0a1f;
}
.gm-toggle {
  display: inline-flex; align-items: center; gap: 12px; cursor: pointer;
}
.gm-toggle__input {
  position: absolute; opacity: 0; pointer-events: none;
}
.gm-toggle__track {
  position: relative; display: inline-block;
  width: 48px; height: 28px;
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  transition: background 0.25s, border-color 0.25s;
}
.gm-toggle__thumb {
  position: absolute; top: 2px; left: 2px;
  width: 22px; height: 22px;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
  transition: left 0.25s cubic-bezier(.3, 1.3, .5, 1), background 0.25s;
}
.gm-toggle__input:checked + .gm-toggle__track {
  background: rgba(34, 197, 94, 0.4);
  border-color: rgba(34, 197, 94, 0.6);
}
.gm-toggle__input:checked + .gm-toggle__track .gm-toggle__thumb {
  left: 22px;
  background: #fff;
}
.gm-toggle__label {
  font: 600 13px system-ui, sans-serif;
  color: #fff;
}
```

### 09. Glass Search

**Type:** Pure CSS
**Description:** A frosted search field with a built-in icon — the kind of search bar that hovers over a hero image or video without competing.

**HTML:**
```html
<div class="gm-search-bg">
  <label class="gm-search">
    <svg
      class="gm-search__icon"
      width="14"
      height="14"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="2.2"
      stroke-linecap="round"
    >
      <circle cx="11" cy="11" r="7" />
      <path d="M20 20l-4-4" />
    </svg>
    <input class="gm-search__field" type="search" placeholder="Search components, tags, demos…" />
    <kbd class="gm-search__kbd">⌘K</kbd>
  </label>
</div>
```

**CSS:**
```css
.gm-search-bg {
  position: relative; padding: 28px;
  border-radius: 18px; overflow: hidden;
  background:
    radial-gradient(ellipse at 30% 50%, #0ea5e9 0%, transparent 50%),
    radial-gradient(ellipse at 70% 50%, #8b5cf6 0%, transparent 50%),
    #0a1428;
}
.gm-search {
  display: flex; align-items: center; gap: 10px;
  background: rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  padding: 10px 14px;
}
.gm-search__icon { color: rgba(255, 255, 255, 0.55); flex-shrink: 0; }
.gm-search__field {
  flex: 1;
  background: none; border: none; outline: none;
  color: #fff;
  font: 13px system-ui, sans-serif;
}
.gm-search__field::placeholder { color: rgba(255, 255, 255, 0.55); }
.gm-search__kbd {
  font: 600 10px ui-monospace, monospace;
  color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 5px;
  padding: 3px 6px;
}
```

### 10. Refraction Card

**Type:** Pure CSS
**Description:** Glass card with a fake refraction edge — a brighter rim on one side simulates how real glass bends light at its boundary.

**HTML:**
```html
<div class="gm-refr-bg">
  <div class="gm-refr">
    <h4>Optical illusion</h4>
    <p>
      An inset linear-gradient on the border channel mimics how light bends at the edge of real
      glass.
    </p>
  </div>
</div>
```

**CSS:**
```css
.gm-refr-bg {
  position: relative; padding: 32px;
  border-radius: 18px; overflow: hidden;
  background:
    radial-gradient(circle at 10% 20%, #f43f5e 0%, transparent 50%),
    radial-gradient(circle at 90% 80%, #8b5cf6 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, #06b6d4 0%, transparent 60%),
    #0e0a1a;
}
.gm-refr {
  position: relative;
  background: rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  backdrop-filter: blur(28px) saturate(180%);
  border-radius: 14px;
  padding: 18px 22px;
  color: #fff;
  /* Refractive rim — gradient border via background-clip */
  border: 1.5px solid transparent;
  background-clip: padding-box;
}
.gm-refr::before {
  content: ''; position: absolute; inset: -1.5px;
  border-radius: 15.5px;
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.6),
    rgba(255, 255, 255, 0.1) 40%,
    transparent 60%,
    rgba(255, 255, 255, 0.3));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  padding: 1.5px;
  pointer-events: none;
}
.gm-refr h4 { margin: 0 0 6px; font: 700 14px/1.2 system-ui, sans-serif; }
.gm-refr p  { margin: 0; font: 12px/1.55 system-ui, sans-serif; opacity: 0.78; }
```

### 11. Tinted Glass

**Type:** Pure CSS
**Description:** Each glass surface tints subtly with its own brand hue while sharing the same blur — useful for color-coded categories.

**HTML:**
```html
<div class="gm-tint-bg">
  <div class="gm-tint gm-tint--violet">
    <span class="gm-tint__dot"></span>
    <div><b>Components</b><small>13 collections</small></div>
  </div>
  <div class="gm-tint gm-tint--rose">
    <span class="gm-tint__dot"></span>
    <div><b>Motion</b><small>4 collections</small></div>
  </div>
  <div class="gm-tint gm-tint--cyan">
    <span class="gm-tint__dot"></span>
    <div><b>Tools</b><small>11 utilities</small></div>
  </div>
</div>
```

**CSS:**
```css
.gm-tint-bg {
  position: relative; padding: 22px;
  border-radius: 18px; overflow: hidden;
  display: flex; flex-direction: column; gap: 8px;
  background:
    radial-gradient(circle at 50% 50%, #e2e8f0 0%, transparent 60%),
    linear-gradient(135deg, #475569, #1e293b);
}
.gm-tint {
  display: flex; align-items: center; gap: 12px;
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  padding: 10px 14px;
  color: #fff;
}
.gm-tint b     { display: block; font: 700 12px system-ui, sans-serif; }
.gm-tint small { font: 11px system-ui, sans-serif; opacity: 0.7; }
.gm-tint__dot { width: 10px; height: 10px; border-radius: 50%; }
.gm-tint--violet { background: rgba(139, 92, 246, 0.22); }
.gm-tint--violet .gm-tint__dot { background: #c4b5fd; box-shadow: 0 0 8px rgba(196, 181, 253, 0.6); }
.gm-tint--rose   { background: rgba(244, 63, 94, 0.22); }
.gm-tint--rose .gm-tint__dot   { background: #fda4af; box-shadow: 0 0 8px rgba(253, 164, 175, 0.6); }
.gm-tint--cyan   { background: rgba(6, 182, 212, 0.22); }
.gm-tint--cyan .gm-tint__dot   { background: #67e8f9; box-shadow: 0 0 8px rgba(103, 232, 249, 0.6); }
```

### 12. Stacked Glass

**Type:** Pure CSS
**Description:** Three glass layers stacked at offset depths — each pane blurs the panes behind it, creating a dimensional sandwich effect.

**HTML:**
```html
<div class="gm-stack-bg">
  <div class="gm-stack__pane gm-stack__pane--3"></div>
  <div class="gm-stack__pane gm-stack__pane--2"></div>
  <div class="gm-stack__pane gm-stack__pane--1">
    <h4>Layered depth</h4>
    <p>Each pane blurs the surfaces beneath it.</p>
  </div>
</div>
```

**CSS:**
```css
.gm-stack-bg {
  position: relative; padding: 28px;
  border-radius: 18px; overflow: hidden;
  min-height: 200px;
  background:
    radial-gradient(circle at 25% 30%, #f59e0b 0%, transparent 45%),
    radial-gradient(circle at 75% 70%, #06b6d4 0%, transparent 45%),
    radial-gradient(circle at 50% 90%, #ec4899 0%, transparent 45%),
    #1a0a1a;
}
.gm-stack__pane {
  position: absolute;
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  color: #fff;
}
.gm-stack__pane--3 {
  top: 18px; right: 18px;
  width: 140px; height: 100px;
  background: rgba(255, 255, 255, 0.05);
}
.gm-stack__pane--2 {
  top: 42px; right: 50px;
  width: 160px; height: 110px;
  background: rgba(255, 255, 255, 0.07);
}
.gm-stack__pane--1 {
  top: 70px; left: 28px;
  width: 200px; padding: 14px 18px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
}
.gm-stack__pane--1 h4 { margin: 0 0 4px; font: 700 13px system-ui, sans-serif; }
.gm-stack__pane--1 p  { margin: 0; font: 11px/1.5 system-ui, sans-serif; opacity: 0.78; }
```

---
## 20 CSS Gradient Text Designs

URL: https://codefronts.com/design-styles/css-gradient-text/
Description: 20 hand-coded CSS gradient text effects with live demos — animated flow with @property typed angle, aurora borealis sweep, conic hue spin, per-letter rainbow wave, lava lamp radial, neon pulse glow, outline stroke with transparent fill, metallic chrome/gold/copper, holographic iridescent foil, duotone two-colour fill, texture fills (sunset, starfield, ocean), liquid mercury, hover reveal, checkbox toggle picker, scroll reveal, click ripple, cursor-tracked radial, typewriter loop, glitter sparkle, and crystalline prism. 16 pure CSS + 4 with a tiny vanilla JS snippet — no framework. Modern background-clip text technique with -webkit-prefix fallback, prefers-reduced-motion honoured, MIT licensed.
Demo count: 20

### 01. CSS Animated Gradient Text Flow

**Type:** Pure CSS
**Description:** A flowing rainbow gradient sweeps across bold display text using a horizontally-extended linear-gradient and background-position animation for a seamless loop.

**HTML:**
```html
<div class="gt-01">
  <span class="gt-01__label">Animated gradient text</span>
  <h1 class="gt-01__hero">CHROMATIC</h1>
  <p class="gt-01__subtitle">Infinite colour in motion</p>
  <div class="gt-01__words">
    <span class="gt-01__word">Design</span>
    <span class="gt-01__word">Create</span>
    <span class="gt-01__word">Inspire</span>
    <span class="gt-01__word">Build</span>
    <span class="gt-01__word">Ship</span>
  </div>
</div>
```

**CSS:**
```css
.gt-01, .gt-01 *, .gt-01 *::before, .gt-01 *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
.gt-01 {
  --bg: #0a0a0f;
  --c1: #ff6b6b;
  --c2: #ffd93d;
  --c3: #6bcb77;
  --c4: #4d96ff;
  --c5: #ff6bcd;
  font-family: 'Syne', sans-serif;
  background: var(--bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3rem;
  padding: 3rem 2rem;
}
.gt-01__label {
  font-size: .75rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #444;
}
.gt-01__hero {
  font-size: clamp(3rem, 12vw, 8rem);
  font-weight: 800;
  line-height: 1;
  background: linear-gradient(90deg, var(--c1), var(--c2), var(--c3), var(--c4), var(--c5), var(--c1));
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gt-01-flow 4s linear infinite;
}
.gt-01__subtitle {
  font-size: clamp(1rem, 3vw, 1.5rem);
  font-weight: 700;
  background: linear-gradient(90deg, var(--c4), var(--c5), var(--c1), var(--c2));
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gt-01-flow 6s linear infinite reverse;
  letter-spacing: .05em;
}
.gt-01__words {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  justify-content: center;
}
.gt-01__word {
  font-size: clamp(1.4rem, 4vw, 2.2rem);
  font-weight: 800;
  background: linear-gradient(90deg, var(--c1), var(--c2), var(--c3), var(--c4), var(--c5), var(--c1));
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gt-01-flow 4s linear infinite;
}
.gt-01__word:nth-child(2) { animation-delay: -.8s; }
.gt-01__word:nth-child(3) { animation-delay: -1.6s; }
.gt-01__word:nth-child(4) { animation-delay: -2.4s; }
.gt-01__word:nth-child(5) { animation-delay: -3.2s; }
@keyframes gt-01-flow {
  0%   { background-position: 0% center; }
  100% { background-position: 300% center; }
}
@media (prefers-reduced-motion: reduce) {
  .gt-01__hero,
  .gt-01__subtitle,
  .gt-01__word { animation: none; background-position: 0% center; }
}
```

### 02. CSS Aurora Borealis Gradient Text Sweep

**Type:** Pure CSS
**Description:** An aurora-inspired diagonal gradient sweeps across a headline using animated background-position on a multi-stop linear-gradient with teal, violet, and emerald hues.

**HTML:**
```html
<div class="gt-02">
  <div class="gt-02__bg-glow"></div>
  <span class="gt-02__label">Aurora sweep effect</span>
  <h1 class="gt-02__headline">AURORA</h1>
  <p class="gt-02__sub">Northern lights typography</p>
  <div class="gt-02__row">
    <span class="gt-02__chip">TEAL</span>
    <span class="gt-02__chip">VIOLET</span>
    <span class="gt-02__chip">EMERALD</span>
  </div>
</div>
```

**CSS:**
```css
.gt-02, .gt-02 *, .gt-02 *::before, .gt-02 *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
.gt-02 {
  --bg: #020b18;
  --a1: #00ffe7;
  --a2: #7b2fff;
  --a3: #00c3ff;
  --a4: #52ff7d;
  font-family: 'Orbitron', sans-serif;
  background: var(--bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
  padding: 3rem 2rem;
  overflow: hidden;
  position: relative;
}
.gt-02__bg-glow {
  position: absolute;
  width: 60vw; height: 40vh;
  background: radial-gradient(ellipse at center, #7b2fff22 0%, transparent 70%);
  top: 20%; left: 20%;
  animation: gt-02-bgmove 8s ease-in-out infinite alternate;
  pointer-events: none;
}
.gt-02__label {
  font-size: .65rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: #00ffe740;
  position: relative;
}
.gt-02__headline {
  font-size: clamp(2.5rem, 10vw, 7rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: .05em;
  background: linear-gradient(135deg, var(--a1) 0%, var(--a2) 40%, var(--a3) 70%, var(--a4) 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gt-02-aurora 5s ease-in-out infinite alternate;
  position: relative;
}
.gt-02__sub {
  font-size: clamp(.8rem, 2.5vw, 1.1rem);
  font-weight: 700;
  letter-spacing: .3em;
  background: linear-gradient(90deg, var(--a4), var(--a1));
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gt-02-slide 3s linear infinite;
}
.gt-02__row {
  display: flex;
  gap: 2rem;
  position: relative;
}
.gt-02__chip {
  font-size: clamp(1rem, 3vw, 1.6rem);
  font-weight: 700;
  padding: .4em .8em;
  border: 1px solid #00ffe720;
  border-radius: 4px;
  background: linear-gradient(135deg, var(--a1), var(--a2), var(--a3));
  background-size: 300% 300%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gt-02-aurora 4s ease-in-out infinite alternate;
}
.gt-02__chip:nth-child(2) { animation-delay: -.8s; }
.gt-02__chip:nth-child(3) { animation-delay: -1.6s; }
@keyframes gt-02-aurora {
  0%   { background-position: 0% 0%; }
  100% { background-position: 100% 100%; }
}
@keyframes gt-02-slide {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}
@keyframes gt-02-bgmove {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(15%, 10%) scale(1.3); }
}
@media (prefers-reduced-motion: reduce) {
  .gt-02__headline, .gt-02__sub, .gt-02__chip, .gt-02__bg-glow {
    animation: none;
  }
}
```

### 03. CSS Conic Gradient Text Hue Spin

**Type:** Pure CSS
**Description:** Full-spectrum hue rotation applied to conic-gradient-filled text, creating a continuously spinning rainbow prism effect driven by a CSS filter animation.

**HTML:**
```html
<div class="gt-03">
  <span class="gt-03__label">Conic gradient text</span>
  <h1 class="gt-03__conic">PRISM</h1>
  <p class="gt-03__sub">Full-spectrum hue rotation</p>
  <div class="gt-03__trio">
    <div class="gt-03__item">
      <span class="gt-03__big">RED</span>
      <span class="gt-03__caption">0°</span>
    </div>
    <div class="gt-03__item">
      <span class="gt-03__big">GREEN</span>
      <span class="gt-03__caption">120°</span>
    </div>
    <div class="gt-03__item">
      <span class="gt-03__big">BLUE</span>
      <span class="gt-03__caption">240°</span>
    </div>
  </div>
</div>
```

**CSS:**
```css
.gt-03, .gt-03 *, .gt-03 *::before, .gt-03 *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
.gt-03 {
  --bg: #111118;
  font-family: 'Plus Jakarta Sans', sans-serif;
  background: var(--bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3rem;
  padding: 3rem 2rem;
}
.gt-03__label {
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #555;
}
.gt-03__conic {
  font-size: clamp(3rem, 12vw, 8rem);
  font-weight: 900;
  line-height: 1;
  background: conic-gradient(
    from 0deg,
    #ff0080, #ff8c00, #ffe100, #40ff00,
    #00cfff, #8000ff, #ff0080
  );
  background-size: 100% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gt-03-spin 3s linear infinite;
}
.gt-03__sub {
  font-size: clamp(1rem, 3vw, 1.6rem);
  font-weight: 800;
  background: conic-gradient(from 180deg, #ff8c00, #ffe100, #40ff00, #00cfff, #8000ff, #ff8c00);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gt-03-spin 5s linear infinite reverse;
  letter-spacing: .04em;
}
.gt-03__trio {
  display: flex;
  gap: 2.5rem;
  flex-wrap: wrap;
  justify-content: center;
}
.gt-03__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
}
.gt-03__big {
  font-size: clamp(2rem, 6vw, 4rem);
  font-weight: 900;
  background: conic-gradient(from 90deg, #ff0080, #ff8c00, #ffe100, #40ff00, #00cfff, #ff0080);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gt-03-spin 4s linear infinite;
}
.gt-03__item:nth-child(2) .gt-03__big { animation-delay: -1.3s; }
.gt-03__item:nth-child(3) .gt-03__big { animation-delay: -2.6s; }
.gt-03__caption {
  font-size: .65rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: #555;
}
@keyframes gt-03-spin {
  0%   { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .gt-03__conic, .gt-03__sub, .gt-03__big { animation: none; }
}
```

### 04. CSS Rainbow Wave Per-Letter Gradient Text

**Type:** Pure CSS
**Description:** Each letter bounces on its own phase-offset translateY wave while carrying a unique hue-stop pair, producing a travelling rainbow wave entirely in CSS.

**HTML:**
```html
<div class="gt-04">
  <span class="gt-04__label">Rainbow wave per-letter</span>
  <div class="gt-04__wave-wrap" aria-label="RAINBOW">
    <span class="gt-04__letter">R</span>
    <span class="gt-04__letter">A</span>
    <span class="gt-04__letter">I</span>
    <span class="gt-04__letter">N</span>
    <span class="gt-04__letter">B</span>
    <span class="gt-04__letter">O</span>
    <span class="gt-04__letter">W</span>
  </div>
  <p class="gt-04__subtitle">Per-letter hue offset animation</p>
  <div class="gt-04__bar"></div>
</div>
```

**CSS:**
```css
.gt-04, .gt-04 *, .gt-04 *::before, .gt-04 *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
.gt-04 {
  --bg: #f8f4f0;
  font-family: 'DM Sans', sans-serif;
  background: var(--bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
  padding: 3rem 2rem;
}
.gt-04__label {
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #bbb;
}
.gt-04__wave-wrap {
  display: flex;
  gap: 0;
}
.gt-04__letter {
  font-size: clamp(3rem, 11vw, 7.5rem);
  font-weight: 900;
  line-height: 1;
  display: inline-block;
  background: linear-gradient(180deg,
    hsl(calc(var(--hue) + 0deg), 90%, 55%) 0%,
    hsl(calc(var(--hue) + 60deg), 90%, 45%) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gt-04-wave 2.4s ease-in-out infinite;
}
/* stagger each letter's hue + delay */
.gt-04__letter:nth-child(1)  { --hue: 0deg;   animation-delay: 0s; }
.gt-04__letter:nth-child(2)  { --hue: 30deg;  animation-delay: -.2s; }
.gt-04__letter:nth-child(3)  { --hue: 60deg;  animation-delay: -.4s; }
.gt-04__letter:nth-child(4)  { --hue: 90deg;  animation-delay: -.6s; }
.gt-04__letter:nth-child(5)  { --hue: 120deg; animation-delay: -.8s; }
.gt-04__letter:nth-child(6)  { --hue: 150deg; animation-delay: -1s; }
.gt-04__letter:nth-child(7)  { --hue: 180deg; animation-delay: -1.2s; }
.gt-04__subtitle {
  font-size: clamp(1rem, 2.5vw, 1.3rem);
  font-weight: 700;
  color: #ccc;
  letter-spacing: .1em;
}
.gt-04__bar {
  width: min(500px, 80vw);
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(90deg,
    #ff595e, #ffca3a, #6a4c93, #1982c4, #8ac926, #ff595e);
  background-size: 200% 100%;
  animation: gt-04-barscroll 3s linear infinite;
}
@keyframes gt-04-wave {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-14px); }
}
@keyframes gt-04-barscroll {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}
@media (prefers-reduced-motion: reduce) {
  .gt-04__letter, .gt-04__bar { animation: none; transform: none; }
}
```

### 05. CSS Lava Lamp Radial Gradient Text

**Type:** Pure CSS
**Description:** A slowly drifting radial gradient simulates molten lava inside the text glyphs, using animated CSS custom properties to move the gradient hotspot.

**HTML:**
```html
<div class="gt-05">
  <span class="gt-05__label">Lava lamp radial gradient</span>
  <h1 class="gt-05__blob">MAGMA</h1>
  <p class="gt-05__tagline">Molten radial gradient text</p>
  <div class="gt-05__orbs">
    <div class="gt-05__orb"></div>
    <div class="gt-05__orb"></div>
    <div class="gt-05__orb"></div>
  </div>
  <span class="gt-05__orb-label">radial motion</span>
</div>
```

**CSS:**
```css
.gt-05, .gt-05 *, .gt-05 *::before, .gt-05 *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
.gt-05 {
  --bg: #0d0208;
  --hot1: #ff3b00;
  --hot2: #ff8800;
  --hot3: #ffcc00;
  --cool: #3b0a0a;
  font-family: 'Syne', sans-serif;
  background: var(--bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
  padding: 3rem 2rem;
}
.gt-05__label {
  font-family: 'Syne Mono', monospace;
  font-size: .65rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: #ff330040;
}
.gt-05__blob {
  font-size: clamp(3rem, 12vw, 8rem);
  font-weight: 800;
  line-height: 1;
  background: radial-gradient(
    circle at var(--x, 30%) var(--y, 40%),
    var(--hot3) 0%,
    var(--hot2) 25%,
    var(--hot1) 55%,
    #6b0000 100%
  );
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gt-05-blob 6s ease-in-out infinite;
}
.gt-05__tagline {
  font-family: 'Syne Mono', monospace;
  font-size: clamp(.7rem, 2vw, 1rem);
  background: linear-gradient(90deg, var(--hot1), var(--hot2), var(--hot3));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gt-05-pulse 3s ease-in-out infinite alternate;
  letter-spacing: .15em;
}
.gt-05__orbs {
  display: flex;
  gap: 1.5rem;
  align-items: flex-end;
}
.gt-05__orb {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--hot3), var(--hot1));
  animation: gt-05-rise 3s ease-in-out infinite;
  position: relative;
}
.gt-05__orb::after {
  content: '';
  position: absolute;
  inset: 15% 20% 40% 20%;
  background: rgba(255,255,255,.25);
  border-radius: 50%;
  transform: rotate(-30deg);
}
.gt-05__orb:nth-child(1) { width: 40px; height: 40px; animation-delay: -.5s; }
.gt-05__orb:nth-child(2) { width: 70px; height: 70px; animation-delay: -1s; }
.gt-05__orb:nth-child(3) { width: 50px; height: 50px; animation-delay: -1.8s; }
.gt-05__orb-label {
  font-family: 'Syne Mono', monospace;
  font-size: .6rem;
  letter-spacing: .1em;
  color: var(--hot2);
  background: linear-gradient(90deg, var(--hot1), var(--hot3));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
@keyframes gt-05-blob {
  0%   { --x: 30%; --y: 40%; }
  25%  { --x: 60%; --y: 70%; }
  50%  { --x: 70%; --y: 30%; }
  75%  { --x: 40%; --y: 60%; }
  100% { --x: 30%; --y: 40%; }
}
@keyframes gt-05-pulse {
  0%   { opacity: .6; }
  100% { opacity: 1; }
}
@keyframes gt-05-rise {
  0%, 100% { transform: translateY(0) scale(1); }
  50%       { transform: translateY(-20px) scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {
  .gt-05__blob, .gt-05__tagline, .gt-05__orb { animation: none; }
}
```

### 06. CSS Neon Pulse Gradient Text Glow

**Type:** Pure CSS
**Description:** A scrolling cyan-magenta-lime gradient combined with a pulsing drop-shadow glow recreates the flickering neon sign aesthetic entirely in CSS.

**HTML:**
```html
<div class="gt-06">
  <span class="gt-06__label">Neon pulse gradient</span>
  <h1 class="gt-06__neon">NEON</h1>
  <div class="gt-06__bar">
    <div class="gt-06__seg"></div>
    <div class="gt-06__seg"></div>
    <div class="gt-06__seg"></div>
    <div class="gt-06__seg"></div>
    <div class="gt-06__seg"></div>
  </div>
  <p class="gt-06__tagline">Glowing gradient pulse</p>
</div>
```

**CSS:**
```css
.gt-06, .gt-06 *, .gt-06 *::before, .gt-06 *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
.gt-06 {
  --bg: #030a10;
  --n1: #00f5ff;
  --n2: #ff00e4;
  --n3: #b8ff00;
  font-family: 'Exo 2', sans-serif;
  background: var(--bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
  padding: 3rem 2rem;
  position: relative;
  overflow: hidden;
}
.gt-06::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 40% at 20% 50%, #00f5ff0a, transparent),
    radial-gradient(ellipse 60% 40% at 80% 50%, #ff00e40a, transparent);
  pointer-events: none;
}
.gt-06__label {
  font-family: 'Rajdhani', sans-serif;
  font-size: .7rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: #00f5ff30;
}
.gt-06__neon {
  font-size: clamp(3rem, 12vw, 8rem);
  font-weight: 900;
  line-height: 1;
  background: linear-gradient(90deg, var(--n1), var(--n2), var(--n3), var(--n1));
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 20px #00f5ff80) drop-shadow(0 0 40px #ff00e440);
  animation: gt-06-neonflow 4s linear infinite, gt-06-pulse 2s ease-in-out infinite;
  letter-spacing: .08em;
}
.gt-06__bar {
  display: flex;
  gap: .5rem;
  align-items: center;
}
.gt-06__seg {
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--n1), var(--n2));
  animation: gt-06-barpulse 1.5s ease-in-out infinite;
}
.gt-06__seg:nth-child(1) { width: 40px; animation-delay: 0s; }
.gt-06__seg:nth-child(2) { width: 80px; animation-delay: -.3s; }
.gt-06__seg:nth-child(3) { width: 120px; animation-delay: -.6s; background: linear-gradient(90deg, var(--n2), var(--n3)); }
.gt-06__seg:nth-child(4) { width: 80px; animation-delay: -.9s; }
.gt-06__seg:nth-child(5) { width: 40px; animation-delay: -1.2s; }
.gt-06__tagline {
  font-family: 'Rajdhani', sans-serif;
  font-size: clamp(.9rem, 2.5vw, 1.2rem);
  font-weight: 700;
  letter-spacing: .25em;
  text-transform: uppercase;
  background: linear-gradient(90deg, var(--n2), var(--n3));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gt-06-fade 2s ease-in-out infinite alternate;
}
@keyframes gt-06-neonflow {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}
@keyframes gt-06-pulse {
  0%, 100% { filter: drop-shadow(0 0 20px #00f5ff80) drop-shadow(0 0 40px #ff00e440); }
  50%       { filter: drop-shadow(0 0 35px #00f5ffcc) drop-shadow(0 0 70px #ff00e460); }
}
@keyframes gt-06-barpulse {
  0%, 100% { opacity: .4; }
  50%       { opacity: 1; }
}
@keyframes gt-06-fade {
  0%   { opacity: .6; }
  100% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .gt-06__neon, .gt-06__seg, .gt-06__tagline { animation: none; filter: none; }
}
```

### 07. CSS Gradient Text Outline Stroke Effect

**Type:** Pure CSS
**Description:** A gradient is applied as the stroke colour of outlined text using -webkit-text-stroke combined with background-clip:text, creating crisp gradient-coloured letterform outlines.

**HTML:**
```html
<div class="gt-07">
  <span class="gt-07__label">Gradient text stroke / outline</span>
  <div class="gt-07__outlined">OUTLINED</div>
  <div class="gt-07__css-stroke">GRADIENT FILL</div>
  <div class="gt-07__row">
    <span class="gt-07__pill">Purple</span>
    <span class="gt-07__pill">Pink</span>
    <span class="gt-07__pill">Orange</span>
  </div>
</div>
```

**CSS:**
```css
.gt-07, .gt-07 *, .gt-07 *::before, .gt-07 *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
.gt-07 {
  --bg: #fff;
  --g1: #7c3aed;
  --g2: #db2777;
  --g3: #ea580c;
  font-family: 'Space Grotesk', sans-serif;
  background: var(--bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3rem;
  padding: 3rem 2rem;
}
.gt-07__label {
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #ddd;
}
/* Stroke via SVG text linearGradient inside an inline SVG */
.gt-07__svg-wrap {
  width: 100%;
  max-width: 700px;
  overflow: visible;
}
.gt-07__stroke {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(3rem, 12vw, 7rem);
  font-weight: 700;
}
/* CSS-only outline technique using -webkit-text-stroke + transparent fill */
.gt-07__css-stroke {
  font-size: clamp(3rem, 12vw, 7rem);
  font-weight: 700;
  line-height: 1;
  -webkit-text-stroke: 3px transparent;
  background: linear-gradient(135deg, var(--g1), var(--g2), var(--g3));
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  /* Paint background behind the text-stroke so stroke uses gradient */
  paint-order: stroke fill;
  animation: gt-07-shift 5s ease-in-out infinite alternate;
}
.gt-07__outlined {
  font-size: clamp(3rem, 12vw, 7rem);
  font-weight: 700;
  line-height: 1;
  -webkit-text-stroke: 4px;
  -webkit-text-stroke-color: transparent;
  background: linear-gradient(90deg, var(--g1), var(--g2), var(--g3), var(--g1));
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gt-07-scroll 4s linear infinite;
  letter-spacing: .05em;
}
.gt-07__row {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  justify-content: center;
}
.gt-07__pill {
  font-size: clamp(1.2rem, 4vw, 2rem);
  font-weight: 700;
  line-height: 1;
  -webkit-text-stroke: 2px;
  -webkit-text-stroke-color: transparent;
  background: linear-gradient(135deg, var(--g1), var(--g2), var(--g3));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  padding: .4em .8em;
  border: 2px solid;
  border-image: linear-gradient(135deg, var(--g1), var(--g2), var(--g3)) 1;
  border-radius: 999px;
  /* Compat: border-image doesn't work with border-radius, use outline trick */
  border: none;
  box-shadow: 0 0 0 2px var(--g1);
}
@keyframes gt-07-shift {
  0%   { background-position: 0% 0%; }
  100% { background-position: 100% 100%; }
}
@keyframes gt-07-scroll {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}
@media (prefers-reduced-motion: reduce) {
  .gt-07__css-stroke, .gt-07__outlined { animation: none; }
}
```

### 08. CSS Metallic Chrome Gold Copper Gradient Text

**Type:** Pure CSS
**Description:** Vertical multi-stop linear gradients mimic the specular highlights of chrome, gold, and copper metal surfaces clipped to display text.

**HTML:**
```html
<div class="gt-08">
  <span class="gt-08__label">Metallic gradient text</span>
  <div class="gt-08__chrome">CHROME</div>
  <div class="gt-08__divider"></div>
  <div class="gt-08__gold">GOLD</div>
  <div class="gt-08__divider"></div>
  <div class="gt-08__copper">COPPER</div>
</div>
```

**CSS:**
```css
.gt-08, .gt-08 *, .gt-08 *::before, .gt-08 *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
.gt-08 {
  --bg: #0c0c0c;
  font-family: 'Bebas Neue', sans-serif;
  background: var(--bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3rem;
  padding: 3rem 2rem;
}
.gt-08__label {
  font-size: .65rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: #333;
  font-family: monospace;
}
.gt-08__chrome {
  font-size: clamp(4rem, 15vw, 10rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: .08em;
  background: linear-gradient(180deg,
    #ffffff 0%,
    #e8e8e8 15%,
    #a0a0a0 30%,
    #ffffff 45%,
    #707070 55%,
    #c8c8c8 70%,
    #404040 85%,
    #b0b0b0 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gt-08-shimmer 3s ease-in-out infinite;
}
.gt-08__gold {
  font-size: clamp(2rem, 8vw, 5rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: .1em;
  background: linear-gradient(180deg,
    #fff4d0 0%,
    #f5c842 15%,
    #c8962a 30%,
    #ffe680 50%,
    #b07c20 65%,
    #e6b830 80%,
    #7a5010 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gt-08-shimmer 4s ease-in-out infinite reverse;
}
.gt-08__copper {
  font-size: clamp(1.5rem, 5vw, 3rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: .12em;
  background: linear-gradient(180deg,
    #ffcba4 0%,
    #cd7a3a 20%,
    #a0522d 40%,
    #e8955a 55%,
    #7a3a18 70%,
    #d4814a 85%,
    #8b4513 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gt-08-shimmer 5s ease-in-out infinite;
}
.gt-08__divider {
  width: 200px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #ffffff30, transparent);
}
@keyframes gt-08-shimmer {
  0%, 100% { background-position: center 0%; }
  50%       { background-position: center 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .gt-08__chrome, .gt-08__gold, .gt-08__copper { animation: none; }
}
```

### 09. CSS Holographic Foil Iridescent Gradient Text

**Type:** Pure CSS
**Description:** A dense multi-stop rainbow gradient animating diagonally across text and card surfaces recreates the colour-shifting prismatic effect of holographic foil stickers.

**HTML:**
```html
<div class="gt-09">
  <span class="gt-09__label">Holographic foil gradient</span>
  <h1 class="gt-09__holo">HOLOFX</h1>
  <p class="gt-09__sub">Prismatic iridescent text</p>
  <div class="gt-09__cards">
    <div class="gt-09__card">
      <span class="gt-09__card-text">SHIMMER</span>
    </div>
    <div class="gt-09__card">
      <span class="gt-09__card-text">GLIMMER</span>
    </div>
    <div class="gt-09__card">
      <span class="gt-09__card-text">REFLECT</span>
    </div>
  </div>
</div>
```

**CSS:**
```css
.gt-09, .gt-09 *, .gt-09 *::before, .gt-09 *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
.gt-09 {
  --bg: #0a0a12;
  font-family: 'Outfit', sans-serif;
  background: var(--bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3rem;
  padding: 3rem 2rem;
}
.gt-09__label {
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #333;
}
.gt-09__holo {
  font-size: clamp(3rem, 12vw, 8rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: .05em;
  background: linear-gradient(
    135deg,
    #ff0080 0%,
    #ff8c00 10%,
    #ffe100 20%,
    #40ff00 30%,
    #00cfff 40%,
    #8000ff 50%,
    #ff0080 60%,
    #ff8c00 70%,
    #ffe100 80%,
    #40ff00 90%,
    #00cfff 100%
  );
  background-size: 300% 300%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gt-09-holo 4s ease infinite;
  filter: drop-shadow(0 2px 20px rgba(255,0,128,.3));
}
.gt-09__sub {
  font-size: clamp(1rem, 3vw, 1.5rem);
  font-weight: 800;
  background: linear-gradient(90deg,
    #00cfff, #8000ff, #ff0080, #ff8c00, #ffe100
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gt-09-scroll 3s linear infinite;
  letter-spacing: .12em;
}
.gt-09__cards {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  justify-content: center;
}
.gt-09__card {
  padding: 1.5rem 2rem;
  border-radius: 12px;
  background: linear-gradient(135deg, #ffffff08, #ffffff03);
  border: 1px solid #ffffff15;
  backdrop-filter: blur(8px);
  position: relative;
  overflow: hidden;
}
.gt-09__card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
    #ff008020, #00cfff20, #8000ff20
  );
  background-size: 200% 200%;
  animation: gt-09-holo 6s ease infinite;
  border-radius: 12px;
}
.gt-09__card-text {
  font-size: 1.3rem;
  font-weight: 900;
  position: relative;
  background: linear-gradient(135deg, #ff0080, #00cfff, #8000ff, #ff0080);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gt-09-holo 3s ease infinite;
}
.gt-09__card:nth-child(2) .gt-09__card-text { animation-delay: -.7s; }
.gt-09__card:nth-child(3) .gt-09__card-text { animation-delay: -1.4s; }
@keyframes gt-09-holo {
  0%   { background-position: 0% 0%; }
  50%  { background-position: 100% 100%; }
  100% { background-position: 0% 0%; }
}
@keyframes gt-09-scroll {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}
@media (prefers-reduced-motion: reduce) {
  .gt-09__holo, .gt-09__sub, .gt-09__card-text, .gt-09__card::before {
    animation: none;
  }
}
```

### 10. CSS Duotone Gradient Text Two-Colour Fill

**Type:** Pure CSS
**Description:** Bold typography filled with two-stop duotone linear gradients, with animated letter-spacing expansion that makes each pairing feel alive and cinematic.

**HTML:**
```html
<div class="gt-10">
  <span class="gt-10__label">Duotone gradient text</span>
  <div class="gt-10__pair">
    <div class="gt-10__duo gt-10__duo--blue-red">DUOTONE</div>
    <div class="gt-10__duo gt-10__duo--green-violet">BLEND MODE</div>
    <div class="gt-10__duo gt-10__duo--yellow-magenta">TWO COLOUR GRADIENT</div>
  </div>
  <span class="gt-10__caption">Two-stop linear gradient fills</span>
  <div class="gt-10__swatch-row">
    <div class="gt-10__swatch"></div>
    <div class="gt-10__swatch"></div>
    <div class="gt-10__swatch"></div>
  </div>
</div>
```

**CSS:**
```css
.gt-10, .gt-10 *, .gt-10 *::before, .gt-10 *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
.gt-10 {
  --bg: #f5f5f0;
  font-family: 'Inter', sans-serif;
  background: var(--bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3rem;
  padding: 3rem 2rem;
}
.gt-10__label {
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #ccc;
}
.gt-10__pair {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  width: 100%;
}
.gt-10__duo {
  font-size: clamp(3rem, 12vw, 8rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.02em;
}
.gt-10__duo--blue-red {
  background: linear-gradient(90deg, #003fff 0%, #ff003f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gt-10-expand 5s ease-in-out infinite alternate;
}
.gt-10__duo--green-violet {
  background: linear-gradient(90deg, #00c896 0%, #6600ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: clamp(2rem, 8vw, 5rem);
  animation: gt-10-expand 5s ease-in-out infinite alternate reverse;
}
.gt-10__duo--yellow-magenta {
  background: linear-gradient(90deg, #f5c800 0%, #ff00aa 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: clamp(1.5rem, 5vw, 3rem);
  animation: gt-10-expand 5s ease-in-out infinite alternate;
}
.gt-10__caption {
  font-size: .65rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: #bbb;
}
.gt-10__swatch-row {
  display: flex;
  gap: 1rem;
  align-items: center;
}
.gt-10__swatch {
  width: 60px;
  height: 8px;
  border-radius: 4px;
}
.gt-10__swatch:nth-child(1) { background: linear-gradient(90deg, #003fff, #ff003f); }
.gt-10__swatch:nth-child(2) { background: linear-gradient(90deg, #00c896, #6600ff); }
.gt-10__swatch:nth-child(3) { background: linear-gradient(90deg, #f5c800, #ff00aa); }
@keyframes gt-10-expand {
  0%   { letter-spacing: -.02em; }
  100% { letter-spacing: .08em; }
}
@media (prefers-reduced-motion: reduce) {
  .gt-10__duo { animation: none; }
}
```

### 11. CSS Gradient Text Texture Fill — Sunset Starfield Ocean

**Type:** Pure CSS
**Description:** Multi-stop gradients simulate natural texture fills — a sunset sky, a star-dotted night, and an ocean depth — each clipped to large display text.

**HTML:**
```html
<div class="gt-11">
  <span class="gt-11__label">Texture gradient fill</span>
  <div class="gt-11__sunset">SUNSET</div>
  <div class="gt-11__divider"></div>
  <div class="gt-11__night">STARFIELD</div>
  <div class="gt-11__divider"></div>
  <div class="gt-11__ocean">OCEAN DEPTH</div>
</div>
```

**CSS:**
```css
.gt-11, .gt-11 *, .gt-11 *::before, .gt-11 *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
.gt-11 {
  --bg: #111;
  font-family: 'Syne', sans-serif;
  background: var(--bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3rem;
  padding: 3rem 2rem;
}
.gt-11__label {
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #444;
}
/* Sunset gradient acting as "image" fill */
.gt-11__sunset {
  font-size: clamp(3rem, 13vw, 9rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: .02em;
  background:
    linear-gradient(180deg,
      #1a0533 0%,
      #5c0a7c 15%,
      #c0273a 35%,
      #e8612a 55%,
      #f5a623 75%,
      #ffd700 100%
    );
  background-size: 100% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gt-11-sunrise 6s ease-in-out infinite alternate;
}
/* Night sky gradient fill */
.gt-11__night {
  font-size: clamp(2rem, 8vw, 5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: .06em;
  background:
    radial-gradient(ellipse at 20% 30%, #ffffff 1px, transparent 1px),
    radial-gradient(ellipse at 70% 20%, #ffffff 1px, transparent 1px),
    radial-gradient(ellipse at 50% 60%, #ffffff 1px, transparent 1px),
    radial-gradient(ellipse at 85% 50%, #ffffff 1px, transparent 1px),
    linear-gradient(180deg, #03001e 0%, #7303c0 50%, #ec38bc 100%);
  background-size: 80px 80px, 120px 120px, 60px 60px, 100px 100px, 100% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gt-11-star 4s ease-in-out infinite;
}
/* Ocean gradient fill */
.gt-11__ocean {
  font-size: clamp(1.5rem, 5vw, 3rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: .1em;
  background: linear-gradient(135deg,
    #006994 0%,
    #0099cc 25%,
    #00d4ff 50%,
    #40e0ff 75%,
    #a0f0ff 100%
  );
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gt-11-ocean 3s ease-in-out infinite alternate;
}
.gt-11__divider {
  width: 3px;
  height: 40px;
  background: linear-gradient(180deg, transparent, #ffffff20, transparent);
  border-radius: 2px;
}
@keyframes gt-11-sunrise {
  0%   { background-position: center 100%; }
  100% { background-position: center 0%; }
}
@keyframes gt-11-star {
  0%, 100% { background-position: 0 0, 0 0, 0 0, 0 0, 0 0; }
  50%       { background-position: 10px 5px, -10px 8px, 5px -5px, -8px 3px, 0 0; }
}
@keyframes gt-11-ocean {
  0%   { background-position: 0% 0%; }
  100% { background-position: 100% 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .gt-11__sunset, .gt-11__night, .gt-11__ocean { animation: none; }
}
```

### 12. CSS Liquid Mercury Metallic Gradient Text

**Type:** Pure CSS
**Description:** A cool blue-grey metallic gradient with rippling background-position animation and teardrop orbs below the headline evoke the look of flowing liquid mercury.

**HTML:**
```html
<div class="gt-12">
  <span class="gt-12__label">liquid mercury gradient</span>
  <div class="gt-12__mercury">MERCURY</div>
  <div class="gt-12__drops">
    <div class="gt-12__drop"></div>
    <div class="gt-12__drop"></div>
    <div class="gt-12__drop"></div>
    <div class="gt-12__drop"></div>
  </div>
  <p class="gt-12__sub">reflective metallic shimmer</p>
</div>
```

**CSS:**
```css
.gt-12, .gt-12 *, .gt-12 *::before, .gt-12 *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
.gt-12 {
  --bg: #080808;
  --m1: #c8d8e8;
  --m2: #e8eff8;
  --m3: #8090a0;
  --m4: #404858;
  font-family: 'Bebas Neue', sans-serif;
  background: var(--bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3rem;
  padding: 3rem 2rem;
}
.gt-12__label {
  font-family: 'Space Mono', monospace;
  font-size: .6rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: #2a3040;
}
.gt-12__mercury {
  font-size: clamp(4rem, 15vw, 10rem);
  line-height: 1;
  letter-spacing: .1em;
  background: linear-gradient(180deg,
    var(--m2) 0%,
    var(--m1) 20%,
    var(--m3) 35%,
    var(--m2) 50%,
    var(--m4) 65%,
    var(--m1) 80%,
    var(--m3) 100%
  );
  background-size: 100% 300%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gt-12-liquid 4s ease-in-out infinite;
  filter: drop-shadow(0 4px 12px rgba(200,216,232,.15));
}
.gt-12__drops {
  display: flex;
  gap: .8rem;
  align-items: center;
}
.gt-12__drop {
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: linear-gradient(180deg, var(--m2), var(--m3));
  animation: gt-12-drip 2.5s ease-in-out infinite;
  filter: drop-shadow(0 2px 6px rgba(200,216,232,.2));
}
.gt-12__drop:nth-child(1) { width: 14px; height: 18px; animation-delay: 0s; }
.gt-12__drop:nth-child(2) { width: 22px; height: 28px; animation-delay: -.5s; }
.gt-12__drop:nth-child(3) { width: 18px; height: 22px; animation-delay: -1s; }
.gt-12__drop:nth-child(4) { width: 14px; height: 18px; animation-delay: -1.5s; }
.gt-12__sub {
  font-family: 'Space Mono', monospace;
  font-size: clamp(.7rem, 2vw, .9rem);
  letter-spacing: .2em;
  background: linear-gradient(90deg, var(--m3), var(--m2), var(--m3));
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gt-12-flow 5s linear infinite;
}
@keyframes gt-12-liquid {
  0%, 100% { background-position: center 0%; }
  50%       { background-position: center 100%; }
}
@keyframes gt-12-drip {
  0%, 100% { transform: scaleY(1) translateY(0); }
  50%       { transform: scaleY(1.2) translateY(4px); }
}
@keyframes gt-12-flow {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}
@media (prefers-reduced-motion: reduce) {
  .gt-12__mercury, .gt-12__drop, .gt-12__sub { animation: none; }
}
```

### 13. CSS Hover Reveal Gradient Text Effect

**Type:** Pure CSS
**Description:** Each line of text sits in a muted grey state until hovered, triggering a smooth transition that unveils a distinct gradient per line using -webkit-text-fill-color toggling.

**HTML:**
```html
<div class="gt-13">
  <span class="gt-13__label">Hover to reveal gradient</span>
  <span class="gt-13__hint">↓ mouse over each line ↓</span>
  <div class="gt-13__line gt-13__line--a">CREATIVITY</div>
  <div class="gt-13__line gt-13__line--b">EXPLORATION</div>
  <div class="gt-13__line gt-13__line--c">INNOVATION</div>
  <div class="gt-13__line gt-13__line--d">EXPRESSION</div>
  <div class="gt-13__line gt-13__line--e">INSPIRATION</div>
  <div class="gt-13__line gt-13__line--f">MOMENTUM</div>
</div>
```

**CSS:**
```css
.gt-13, .gt-13 *, .gt-13 *::before, .gt-13 *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
.gt-13 {
  --bg: #0f0f14;
  --plain: #888;
  font-family: 'Plus Jakarta Sans', sans-serif;
  background: var(--bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  padding: 3rem 2rem;
  cursor: default;
}
.gt-13__label {
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #333;
  margin-bottom: 1rem;
}
.gt-13__hint {
  font-size: .75rem;
  letter-spacing: .1em;
  color: #444;
  margin-bottom: 1rem;
}
/* Each line transitions from plain → gradient on hover */
.gt-13__line {
  font-size: clamp(2.5rem, 9vw, 6rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.01em;
  position: relative;
  display: inline-block;
  cursor: pointer;
  /* Plain state */
  color: var(--plain);
  transition: color .4s ease;
  /* Gradient hidden under colour */
  background: linear-gradient(90deg, #f093fb, #f5576c, #fda085);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
}
.gt-13__line:hover {
  -webkit-text-fill-color: transparent;
  color: transparent;
  background-position: 100% center;
  transition: background-position .6s ease, color .1s;
  animation: gt-13-flow .6s ease forwards;
}
.gt-13__line--b {
  background-image: linear-gradient(90deg, #43e97b, #38f9d7, #4facfe);
}
.gt-13__line--c {
  background-image: linear-gradient(90deg, #fa709a, #fee140, #a18cd1);
}
.gt-13__line--d {
  background-image: linear-gradient(90deg, #30cfd0, #330867, #e0c3fc);
}
.gt-13__line--e {
  background-image: linear-gradient(90deg, #ff9a9e, #fecfef, #ffecd2);
}
.gt-13__line--f {
  background-image: linear-gradient(90deg, #a1c4fd, #c2e9fb, #d4fc79);
}
@keyframes gt-13-flow {
  0%   { background-position: 0% center; }
  100% { background-position: 100% center; }
}
@media (prefers-reduced-motion: reduce) {
  .gt-13__line:hover { animation: none; background-position: 0% center; }
}
```

### 14. CSS Toggle Switch Gradient Text Colour Picker

**Type:** Pure CSS
**Description:** Three checkbox-driven toggle switches independently enable gradient fills on individual words, demonstrating CSS state-driven gradient text with zero JavaScript.

**HTML:**
```html
<div class="gt-14">
  <input type="checkbox" id="gt-14-chk-a" class="gt-14__chk-a">
  <input type="checkbox" id="gt-14-chk-b" class="gt-14__chk-b">
  <input type="checkbox" id="gt-14-chk-c" class="gt-14__chk-c">
  <span class="gt-14__label">Toggle gradient fills</span>
  <div class="gt-14__controls">
    <div class="gt-14__toggle-row">
      <label class="gt-14__toggle-label" for="gt-14-chk-a">
        <div class="gt-14__track gt-14__track-a"></div>
        <span class="gt-14__name">Pink gradient</span>
      </label>
    </div>
    <div class="gt-14__toggle-row">
      <label class="gt-14__toggle-label" for="gt-14-chk-b">
        <div class="gt-14__track gt-14__track-b"></div>
        <span class="gt-14__name">Green gradient</span>
      </label>
    </div>
    <div class="gt-14__toggle-row">
      <label class="gt-14__toggle-label" for="gt-14-chk-c">
        <div class="gt-14__track gt-14__track-c"></div>
        <span class="gt-14__name">Blue gradient</span>
      </label>
    </div>
  </div>
  <div class="gt-14__stage">
    <div class="gt-14__word gt-14__word-a">VIVID</div>
    <div class="gt-14__word gt-14__word-b">COLOUR</div>
    <div class="gt-14__word gt-14__word-c">CONTROL</div>
  </div>
</div>
```

**CSS:**
```css
.gt-14, .gt-14 *, .gt-14 *::before, .gt-14 *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
.gt-14 {
  --bg: #f0ede8;
  font-family: 'Manrope', sans-serif;
  background: var(--bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  padding: 3rem 2rem;
}
.gt-14__label {
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #bbb;
}
/* Hidden checkboxes drive the toggling */
.gt-14__chk-a { display: none; }
.gt-14__chk-b { display: none; }
.gt-14__chk-c { display: none; }
/* Toggle switch UI */
.gt-14__controls {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-start;
}
.gt-14__toggle-row {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.gt-14__toggle-label {
  display: flex;
  align-items: center;
  gap: .6rem;
  cursor: pointer;
  user-select: none;
}
.gt-14__track {
  width: 44px;
  height: 24px;
  border-radius: 12px;
  background: #ddd;
  position: relative;
  transition: background .3s;
}
.gt-14__track::after {
  content: '';
  position: absolute;
  top: 3px; left: 3px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: white;
  transition: transform .3s;
  box-shadow: 0 1px 4px rgba(0,0,0,.2);
}
/* Checked states */
#gt-14-chk-a:checked ~ .gt-14__stage .gt-14__track-a { background: #f093fb; }
#gt-14-chk-a:checked ~ .gt-14__stage .gt-14__track-a::after { transform: translateX(20px); }
#gt-14-chk-b:checked ~ .gt-14__stage .gt-14__track-b { background: #43e97b; }
#gt-14-chk-b:checked ~ .gt-14__stage .gt-14__track-b::after { transform: translateX(20px); }
#gt-14-chk-c:checked ~ .gt-14__stage .gt-14__track-c { background: #4facfe; }
#gt-14-chk-c:checked ~ .gt-14__stage .gt-14__track-c::after { transform: translateX(20px); }
.gt-14__name {
  font-size: .75rem;
  font-weight: 700;
  color: #888;
}
/* Main text — default plain */
.gt-14__stage {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
}
.gt-14__word {
  font-size: clamp(3rem, 10vw, 6rem);
  font-weight: 800;
  line-height: 1;
  color: #ccc;
  transition: color .4s;
  -webkit-text-fill-color: currentColor;
}
.gt-14__word-a {
  -webkit-text-fill-color: #ccc;
  background: linear-gradient(90deg, #f093fb, #f5576c);
  -webkit-background-clip: text;
  background-clip: text;
  transition: -webkit-text-fill-color .4s;
}
.gt-14__word-b {
  -webkit-text-fill-color: #ccc;
  background: linear-gradient(90deg, #43e97b, #38f9d7);
  -webkit-background-clip: text;
  background-clip: text;
}
.gt-14__word-c {
  -webkit-text-fill-color: #ccc;
  background: linear-gradient(90deg, #4facfe, #00f2fe);
  -webkit-background-clip: text;
  background-clip: text;
}
#gt-14-chk-a:checked ~ .gt-14__stage .gt-14__word-a { -webkit-text-fill-color: transparent; }
#gt-14-chk-b:checked ~ .gt-14__stage .gt-14__word-b { -webkit-text-fill-color: transparent; }
#gt-14-chk-c:checked ~ .gt-14__stage .gt-14__word-c { -webkit-text-fill-color: transparent; }
@media (prefers-reduced-motion: reduce) {
  .gt-14__track, .gt-14__track::after { transition: none; }
}
```

### 15. CSS Scroll Gradient Text Reveal on Scroll

**Type:** CSS + JS
**Description:** Each section's headline fades in from below with a gradient fill sliding from washed-out to vivid, triggered by IntersectionObserver as the element enters the viewport.

**HTML:**
```html
<div class="gt-15">
  <div class="gt-15__top">
    <p class="gt-15__hint">Scroll to reveal gradient text</p>
    <span class="gt-15__arrow">↓</span>
  </div>
  <div class="gt-15__section">
    <div class="gt-15__reveal">DISCOVER</div>
  </div>
  <div class="gt-15__section">
    <div class="gt-15__reveal">YOUR</div>
  </div>
  <div class="gt-15__section">
    <div class="gt-15__reveal">POTENTIAL</div>
  </div>
  <div class="gt-15__section">
    <div class="gt-15__reveal">THROUGH COLOUR</div>
  </div>
</div>
<script>
(function() {
  const items = document.querySelectorAll('.gt-15 .gt-15__reveal');
  if (!items.length) return;
  const io = new IntersectionObserver((entries) => {
    entries.forEach(e => {
      if (e.isIntersecting) {
        e.target.classList.add('is-visible');
      }
    });
  }, { threshold: 0.3 });
  items.forEach(el => io.observe(el));
})();
</script>
```

**CSS:**
```css
.gt-15, .gt-15 *, .gt-15 *::before, .gt-15 *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
.gt-15 {
  --bg: #0c0c0c;
  font-family: 'Syne', sans-serif;
  background: var(--bg);
  min-height: 300vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 2rem;
}
.gt-15__top {
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}
.gt-15__hint {
  font-size: .8rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #555;
  animation: gt-15-bounce 2s ease-in-out infinite;
}
.gt-15__arrow {
  font-size: 1.5rem;
  color: #444;
  animation: gt-15-bounce 2s ease-in-out infinite .3s;
}
.gt-15__section {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 900px;
}
.gt-15__reveal {
  font-size: clamp(3rem, 10vw, 7rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.01em;
  color: #2a2a2a;
  background: linear-gradient(90deg, #ff6b6b, #ffd93d, #6bcb77, #4d96ff);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .8s ease, transform .8s ease;
  background-position: 100% center;
}
.gt-15__reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
  background-position: 0% center;
  transition: opacity .8s ease, transform .8s ease, background-position 1.2s ease;
}
.gt-15__reveal:nth-child(1) { transition-delay: 0s; }
.gt-15__reveal:nth-child(2) { transition-delay: .1s; }
@keyframes gt-15-bounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(8px); }
}
@media (prefers-reduced-motion: reduce) {
  .gt-15__reveal {
    opacity: 1;
    transform: none;
    transition: none;
    background-position: 0% center;
  }
  .gt-15__hint, .gt-15__arrow { animation: none; }
}
```

**JS:**
```js
(function() {
  const items = document.querySelectorAll('.gt-15 .gt-15__reveal');
  if (!items.length) return;
  const io = new IntersectionObserver((entries) => {
    entries.forEach(e => {
      if (e.isIntersecting) {
        e.target.classList.add('is-visible');
      }
    });
  }, { threshold: 0.3 });
  items.forEach(el => io.observe(el));
})();
```

### 16. CSS Click Ripple Gradient Text Interaction

**Type:** CSS + JS
**Description:** Clicking the gradient headline spawns a ripple ring at the click point while the headline flashes brighter, demonstrating CSS keyframe injection via JavaScript.

**HTML:**
```html
<div class="gt-16">
  <span class="gt-16__label">Click / tap gradient text</span>
  <span class="gt-16__hint">↓ click the word ↓</span>
  <div class="gt-16__btn" id="gt-16-main">
    CLICK
    <div class="gt-16__ripples" id="gt-16-ripples"></div>
  </div>
  <div class="gt-16__score">Clicks: <span id="gt-16-count">0</span></div>
  <div class="gt-16__palette" id="gt-16-palette">
    <div class="gt-16__swatch" data-grad="linear-gradient(90deg,#ff6b6b,#ffd93d,#6bcb77,#4d96ff,#a855f7,#ff6b6b)"></div>
    <div class="gt-16__swatch" data-grad="linear-gradient(90deg,#6bcb77,#4d96ff,#a855f7,#ec4899,#6bcb77)"></div>
    <div class="gt-16__swatch" data-grad="linear-gradient(90deg,#a855f7,#ec4899,#f43f5e,#fb923c,#a855f7)"></div>
    <div class="gt-16__swatch" data-grad="linear-gradient(90deg,#00f5a0,#00d9f5,#4d96ff,#a855f7,#00f5a0)"></div>
  </div>
</div>
<script>
(function() {
  const btn = document.getElementById('gt-16-main');
  const ripples = document.getElementById('gt-16-ripples');
  const countEl = document.getElementById('gt-16-count');
  const palette = document.getElementById('gt-16-palette');
  let count = 0;
  const colors = ['#ff6b6b','#ffd93d','#6bcb77','#4d96ff','#a855f7','#ec4899','#00f5a0'];
  btn.addEventListener('click', (e) => {
    count++;
    countEl.textContent = count;
    const rect = btn.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;
    const r = document.createElement('div');
    r.className = 'gt-16__ripple';
    const c = colors[Math.floor(Math.random() * colors.length)];
    r.style.cssText = `left:${x}px;top:${y}px;width:80px;height:80px;background:${c};`;
    ripples.appendChild(r);
    btn.classList.remove('is-burst');
    void btn.offsetWidth;
    btn.classList.add('is-burst');
    r.addEventListener('animationend', () => r.remove());
  });
  palette.querySelectorAll('.gt-16__swatch').forEach(sw => {
    sw.addEventListener('click', () => {
      btn.style.backgroundImage = sw.dataset.grad;
    });
  });
})();
</script>
```

**CSS:**
```css
.gt-16, .gt-16 *, .gt-16 *::before, .gt-16 *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
.gt-16 {
  --bg: #f8f8f4;
  font-family: 'Outfit', sans-serif;
  background: var(--bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  padding: 3rem 2rem;
  user-select: none;
}
.gt-16__label {
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #ddd;
}
.gt-16__hint {
  font-size: .75rem;
  color: #ccc;
  letter-spacing: .1em;
}
.gt-16__btn {
  font-size: clamp(3rem, 12vw, 8rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: .02em;
  background: linear-gradient(90deg, #ff6b6b, #ffd93d, #6bcb77, #4d96ff, #a855f7, #ff6b6b);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  cursor: pointer;
  position: relative;
  transition: transform .15s ease;
  background-position: 0% center;
  animation: gt-16-drift 8s linear infinite;
}
.gt-16__btn:active {
  transform: scale(.97);
}
.gt-16__btn.is-burst {
  animation: gt-16-burst .5s ease forwards;
}
.gt-16__ripples {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
}
.gt-16__ripple {
  position: absolute;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  animation: gt-16-ripple .8s ease-out forwards;
  pointer-events: none;
  opacity: .5;
}
.gt-16__score {
  font-size: 1rem;
  font-weight: 800;
  color: #ddd;
  letter-spacing: .1em;
}
.gt-16__score span {
  background: linear-gradient(90deg, #ff6b6b, #a855f7);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.gt-16__palette {
  display: flex;
  gap: .5rem;
}
.gt-16__swatch {
  width: 20px; height: 20px;
  border-radius: 50%;
  cursor: pointer;
  transition: transform .2s;
  border: 2px solid white;
}
.gt-16__swatch:hover { transform: scale(1.2); }
.gt-16__swatch:nth-child(1) { background: linear-gradient(135deg, #ff6b6b, #ffd93d); }
.gt-16__swatch:nth-child(2) { background: linear-gradient(135deg, #6bcb77, #4d96ff); }
.gt-16__swatch:nth-child(3) { background: linear-gradient(135deg, #a855f7, #ec4899); }
.gt-16__swatch:nth-child(4) { background: linear-gradient(135deg, #00f5a0, #00d9f5); }
@keyframes gt-16-drift {
  0%   { background-position: 0% center; }
  100% { background-position: 300% center; }
}
@keyframes gt-16-burst {
  0%   { transform: scale(1); filter: brightness(1); }
  30%  { transform: scale(1.06); filter: brightness(1.3); }
  100% { transform: scale(1); filter: brightness(1); }
}
@keyframes gt-16-ripple {
  0%   { transform: translate(-50%, -50%) scale(0); opacity: .6; }
  100% { transform: translate(-50%, -50%) scale(6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .gt-16__btn { animation: none; }
  .gt-16__btn.is-burst { animation: none; }
  .gt-16__ripple { animation: none; display: none; }
}
```

**JS:**
```js
(function() {
  const btn = document.getElementById('gt-16-main');
  const ripples = document.getElementById('gt-16-ripples');
  const countEl = document.getElementById('gt-16-count');
  const palette = document.getElementById('gt-16-palette');
  let count = 0;
  const colors = ['#ff6b6b','#ffd93d','#6bcb77','#4d96ff','#a855f7','#ec4899','#00f5a0'];
  btn.addEventListener('click', (e) => {
    count++;
    countEl.textContent = count;
    const rect = btn.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;
    const r = document.createElement('div');
    r.className = 'gt-16__ripple';
    const c = colors[Math.floor(Math.random() * colors.length)];
    r.style.cssText = `left:${x}px;top:${y}px;width:80px;height:80px;background:${c};`;
    ripples.appendChild(r);
    btn.classList.remove('is-burst');
    void btn.offsetWidth;
    btn.classList.add('is-burst');
    r.addEventListener('animationend', () => r.remove());
  });
  palette.querySelectorAll('.gt-16__swatch').forEach(sw => {
    sw.addEventListener('click', () => {
      btn.style.backgroundImage = sw.dataset.grad;
    });
  });
})();
```

### 17. CSS Cursor-Tracked Radial Gradient Text

**Type:** CSS + JS
**Description:** A radial gradient spotlight follows the cursor position inside the demo, illuminating text from the exact point the mouse hovers, driven by CSS custom properties updated in JavaScript.

**HTML:**
```html
<div class="gt-17" id="gt-17-root">
  <div class="gt-17__cursor" id="gt-17-cursor"></div>
  <span class="gt-17__label">Cursor-tracked gradient</span>
  <h1 class="gt-17__main" id="gt-17-main">FOLLOW</h1>
  <p class="gt-17__sub" id="gt-17-sub">Move your cursor</p>
  <div class="gt-17__grid">
    <span class="gt-17__cell">TRACK</span>
    <span class="gt-17__cell">LIGHT</span>
    <span class="gt-17__cell">FOCUS</span>
  </div>
</div>
<script>
(function() {
  const root = document.getElementById('gt-17-root');
  const cursor = document.getElementById('gt-17-cursor');
  if (!root) return;
  root.addEventListener('mousemove', (e) => {
    const rect = root.getBoundingClientRect();
    const x = ((e.clientX - rect.left) / rect.width * 100).toFixed(1) + '%';
    const y = ((e.clientY - rect.top) / rect.height * 100).toFixed(1) + '%';
    root.style.setProperty('--cx', x);
    root.style.setProperty('--cy', y);
    cursor.style.left = e.clientX + 'px';
    cursor.style.top = e.clientY + 'px';
  });
})();
</script>
```

**CSS:**
```css
.gt-17, .gt-17 *, .gt-17 *::before, .gt-17 *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
.gt-17 {
  --bg: #08080e;
  --cx: 50%;
  --cy: 50%;
  font-family: 'Space Grotesk', sans-serif;
  background: var(--bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
  padding: 3rem 2rem;
  cursor: none;
}
.gt-17__cursor {
  position: fixed;
  top: 0; left: 0;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: white;
  mix-blend-mode: exclusion;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: transform .1s;
  z-index: 9999;
}
.gt-17__label {
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #333;
}
.gt-17__main {
  font-size: clamp(3rem, 12vw, 8rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.01em;
  background: radial-gradient(
    circle at var(--cx) var(--cy),
    #a855f7 0%,
    #ec4899 25%,
    #f43f5e 50%,
    #fb923c 75%,
    #fbbf24 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: --cx .05s, --cy .05s;
}
.gt-17__sub {
  font-size: clamp(.9rem, 2.5vw, 1.3rem);
  font-weight: 700;
  background: radial-gradient(
    circle at var(--cx) var(--cy),
    #00f5a0 0%,
    #00d9f5 50%,
    #4d96ff 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: .1em;
}
.gt-17__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.gt-17__cell {
  font-size: clamp(1rem, 3vw, 1.6rem);
  font-weight: 800;
  padding: .6em 1em;
  text-align: center;
  border: 1px solid #ffffff0d;
  border-radius: 8px;
  background: radial-gradient(
    circle at var(--cx) var(--cy),
    #a855f720 0%,
    transparent 70%
  );
  color: #333;
  background-clip: padding-box;
  -webkit-text-fill-color: transparent;
  background-image: radial-gradient(
    circle at var(--cx) var(--cy),
    #a855f7 0%,
    #ec4899 40%,
    #4d96ff 80%,
    #00f5a0 100%
  );
  -webkit-background-clip: text;
}
@media (prefers-reduced-motion: reduce) {
  .gt-17__cursor { display: none; }
}
```

**JS:**
```js
(function() {
  const root = document.getElementById('gt-17-root');
  const cursor = document.getElementById('gt-17-cursor');
  if (!root) return;
  root.addEventListener('mousemove', (e) => {
    const rect = root.getBoundingClientRect();
    const x = ((e.clientX - rect.left) / rect.width * 100).toFixed(1) + '%';
    const y = ((e.clientY - rect.top) / rect.height * 100).toFixed(1) + '%';
    root.style.setProperty('--cx', x);
    root.style.setProperty('--cy', y);
    cursor.style.left = e.clientX + 'px';
    cursor.style.top = e.clientY + 'px';
  });
})();
```

### 18. CSS Typewriter Loop Gradient Text Animation

**Type:** CSS + JS
**Description:** A typewriter loop cycles through a curated list of words letter by letter, each rendered in a continuously scrolling gradient, with a blinking cursor and word chip indicators.

**HTML:**
```html
<div class="gt-18">
  <span class="gt-18__label">Typewriter gradient loop</span>
  <p class="gt-18__prefix">We design &nbsp;&nbsp;→</p>
  <div class="gt-18__stage">
    <span class="gt-18__typed" id="gt-18-typed">WEBSITES</span><span class="gt-18__cursor" aria-hidden="true">|</span>
  </div>
  <div class="gt-18__words-display" id="gt-18-chips"></div>
</div>
<script>
(function() {
  const words = ['WEBSITES', 'PRODUCTS', 'SYSTEMS', 'BRANDS', 'FUTURES', 'MOTION'];
  const typed = document.getElementById('gt-18-typed');
  const chipsEl = document.getElementById('gt-18-chips');
  if (!typed) return;
  // Build chips
  words.forEach((w, i) => {
    const chip = document.createElement('span');
    chip.className = 'gt-18__word-chip' + (i === 0 ? ' is-active' : '');
    chip.textContent = w;
    chip.id = 'gt-18-chip-' + i;
    chipsEl.appendChild(chip);
  });
  let cur = 0;
  function setActive(idx) {
    document.querySelectorAll('.gt-18 .gt-18__word-chip').forEach((c,i) => {
      c.classList.toggle('is-active', i === idx);
    });
  }
  async function sleep(ms) { return new Promise(r => setTimeout(r, ms)); }
  async function typeWord(word) {
    for (let i = 1; i <= word.length; i++) {
      typed.textContent = word.slice(0, i);
      await sleep(80);
    }
    await sleep(1400);
    for (let i = word.length; i > 0; i--) {
      typed.textContent = word.slice(0, i - 1);
      await sleep(50);
    }
  }
  async function loop() {
    while (true) {
      setActive(cur);
      await typeWord(words[cur]);
      cur = (cur + 1) % words.length;
    }
  }
  loop();
})();
</script>
```

**CSS:**
```css
.gt-18, .gt-18 *, .gt-18 *::before, .gt-18 *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
.gt-18 {
  --bg: #0a0e18;
  font-family: 'JetBrains Mono', monospace;
  background: var(--bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3rem;
  padding: 3rem 2rem;
}
.gt-18__label {
  font-size: .65rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: #1a2a4a;
}
.gt-18__prefix {
  font-size: clamp(1rem, 3vw, 1.5rem);
  font-weight: 700;
  color: #3a5a8a;
  letter-spacing: .05em;
}
.gt-18__stage {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  flex-wrap: wrap;
  justify-content: center;
}
.gt-18__typed {
  font-size: clamp(3rem, 11vw, 7rem);
  font-weight: 800;
  line-height: 1;
  background: linear-gradient(90deg, #4facfe 0%, #00f2fe 50%, #a855f7 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gt-18-gradshift 3s linear infinite;
  min-width: 2ch;
  display: inline-block;
}
.gt-18__cursor {
  font-size: clamp(3rem, 11vw, 7rem);
  font-weight: 800;
  line-height: 1;
  color: #4facfe;
  animation: gt-18-blink .8s step-end infinite;
  display: inline-block;
  margin-left: 2px;
}
.gt-18__words-display {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  justify-content: center;
}
.gt-18__word-chip {
  font-size: .7rem;
  letter-spacing: .1em;
  padding: .3em .7em;
  border-radius: 4px;
  border: 1px solid #1a3060;
  color: #3a5a8a;
  transition: border-color .3s, color .3s;
}
.gt-18__word-chip.is-active {
  border-color: #4facfe;
  color: #4facfe;
  background: #4facfe10;
}
@keyframes gt-18-gradshift {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}
@keyframes gt-18-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .gt-18__typed { animation: none; background-position: 0% center; }
  .gt-18__cursor { animation: none; }
}
```

**JS:**
```js
(function() {
  const words = ['WEBSITES', 'PRODUCTS', 'SYSTEMS', 'BRANDS', 'FUTURES', 'MOTION'];
  const typed = document.getElementById('gt-18-typed');
  const chipsEl = document.getElementById('gt-18-chips');
  if (!typed) return;
  // Build chips
  words.forEach((w, i) => {
    const chip = document.createElement('span');
    chip.className = 'gt-18__word-chip' + (i === 0 ? ' is-active' : '');
    chip.textContent = w;
    chip.id = 'gt-18-chip-' + i;
    chipsEl.appendChild(chip);
  });
  let cur = 0;
  function setActive(idx) {
    document.querySelectorAll('.gt-18 .gt-18__word-chip').forEach((c,i) => {
      c.classList.toggle('is-active', i === idx);
    });
  }
  async function sleep(ms) { return new Promise(r => setTimeout(r, ms)); }
  async function typeWord(word) {
    for (let i = 1; i <= word.length; i++) {
      typed.textContent = word.slice(0, i);
      await sleep(80);
    }
    await sleep(1400);
    for (let i = word.length; i > 0; i--) {
      typed.textContent = word.slice(0, i - 1);
      await sleep(50);
    }
  }
  async function loop() {
    while (true) {
      setActive(cur);
      await typeWord(words[cur]);
      cur = (cur + 1) % words.length;
    }
  }
  loop();
})();
```

### 19. CSS Glitter Sparkle Gradient Text Effect

**Type:** Pure CSS
**Description:** Gold-pink-violet gradient text paired with animating spark particles via absolute-positioned siblings and staggered scale/opacity keyframes recreates the glitter foil aesthetic.

**HTML:**
```html
<div class="gt-19">
  <span class="gt-19__label">Glitter sparkle gradient</span>
  <div style="position:relative; display:inline-block;">
    <div class="gt-19__glitter">SPARKLE</div>
    <div class="gt-19__sparks">
      <div class="gt-19__spark"></div>
      <div class="gt-19__spark"></div>
      <div class="gt-19__spark"></div>
      <div class="gt-19__spark"></div>
      <div class="gt-19__spark"></div>
      <div class="gt-19__spark"></div>
      <div class="gt-19__spark"></div>
      <div class="gt-19__spark"></div>
      <div class="gt-19__spark"></div>
      <div class="gt-19__spark"></div>
    </div>
  </div>
  <p class="gt-19__sub">GLITTER · SHIMMER · GLOW</p>
  <div class="gt-19__row">
    <span class="gt-19__gem">✦ GOLD ✦</span>
    <span class="gt-19__gem">✦ PINK ✦</span>
    <span class="gt-19__gem">✦ VIOLET ✦</span>
  </div>
</div>
```

**CSS:**
```css
.gt-19, .gt-19 *, .gt-19 *::before, .gt-19 *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
.gt-19 {
  --bg: #0d0015;
  --g1: #ffd700;
  --g2: #ff69b4;
  --g3: #da70d6;
  --g4: #ff6347;
  font-family: 'Paytone One', sans-serif;
  background: var(--bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3rem;
  padding: 3rem 2rem;
  position: relative;
  overflow: hidden;
}
.gt-19__label {
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #3a1040;
  font-family: monospace;
}
.gt-19__glitter {
  font-size: clamp(3rem, 12vw, 8rem);
  line-height: 1;
  letter-spacing: .04em;
  position: relative;
  display: inline-block;
  background: linear-gradient(135deg,
    var(--g1) 0%, var(--g2) 25%,
    var(--g3) 50%, var(--g4) 75%, var(--g1) 100%
  );
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gt-19-glitter 3s ease-in-out infinite;
  filter: drop-shadow(0 0 6px #ffd70060) drop-shadow(0 0 20px #ff69b440);
}
/* Sparkle particles via pseudo elements on sibling spans */
.gt-19__sparks {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.gt-19__spark {
  position: absolute;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 40%, #ffd70060 100%);
  animation: gt-19-spark 2s ease-in-out infinite;
}
/* Position sparks around the text area */
.gt-19__spark:nth-child(1)  { top: 10%; left: 5%;   animation-delay: 0s;    width:6px; height:6px; }
.gt-19__spark:nth-child(2)  { top: 20%; left: 80%;  animation-delay: -.4s;  }
.gt-19__spark:nth-child(3)  { top: 70%; left: 15%;  animation-delay: -.8s;  width:5px; height:5px; }
.gt-19__spark:nth-child(4)  { top: 80%; left: 90%;  animation-delay: -1.2s; }
.gt-19__spark:nth-child(5)  { top: 40%; left: 95%;  animation-delay: -1.6s; width:3px; height:3px; }
.gt-19__spark:nth-child(6)  { top: 50%; left: 2%;   animation-delay: -0.2s; }
.gt-19__spark:nth-child(7)  { top: 5%;  left: 50%;  animation-delay: -0.6s; width:5px; height:5px; }
.gt-19__spark:nth-child(8)  { top: 90%; left: 50%;  animation-delay: -1s;   }
.gt-19__spark:nth-child(9)  { top: 30%; left: 30%;  animation-delay: -1.4s; width:3px; height:3px; }
.gt-19__spark:nth-child(10) { top: 60%; left: 70%;  animation-delay: -1.8s; width:6px; height:6px; }
.gt-19__sub {
  font-family: monospace;
  font-size: clamp(.7rem, 2vw, 1rem);
  letter-spacing: .25em;
  background: linear-gradient(90deg, var(--g1), var(--g3), var(--g2));
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gt-19-flow 4s linear infinite;
}
.gt-19__row {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  justify-content: center;
}
.gt-19__gem {
  font-size: clamp(1.2rem, 4vw, 2rem);
  background: linear-gradient(135deg, var(--g1), var(--g3));
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gt-19-glitter 2.5s ease-in-out infinite;
  filter: drop-shadow(0 0 4px #ffd70050);
}
.gt-19__gem:nth-child(2) { animation-delay: -.6s; background-image: linear-gradient(135deg, var(--g2), var(--g4)); }
.gt-19__gem:nth-child(3) { animation-delay: -1.2s; background-image: linear-gradient(135deg, var(--g3), var(--g1)); }
@keyframes gt-19-glitter {
  0%, 100% {
    background-position: 0% 0%;
    filter: drop-shadow(0 0 6px #ffd70060) drop-shadow(0 0 20px #ff69b440);
  }
  50% {
    background-position: 100% 100%;
    filter: drop-shadow(0 0 12px #ffd700a0) drop-shadow(0 0 40px #ff69b480);
  }
}
@keyframes gt-19-spark {
  0%, 100% { transform: scale(1); opacity: .8; }
  50%       { transform: scale(1.8) rotate(45deg); opacity: 0; }
}
@keyframes gt-19-flow {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}
@media (prefers-reduced-motion: reduce) {
  .gt-19__glitter, .gt-19__spark, .gt-19__sub, .gt-19__gem { animation: none; filter: none; }
}
```

### 20. CSS Crystalline Prism Gradient Text

**Type:** Pure CSS
**Description:** A pastel multi-stop gradient mimics the delicate refractive colours of crystal or cut glass, with animated background-position movement and complementary facet stripe accents.

**HTML:**
```html
<div class="gt-20">
  <span class="gt-20__label">Crystalline prism gradient</span>
  <div class="gt-20__crystal">CRYSTAL</div>
  <div class="gt-20__facets">
    <div class="gt-20__facet"></div>
    <div class="gt-20__facet"></div>
    <div class="gt-20__facet"></div>
    <div class="gt-20__facet"></div>
    <div class="gt-20__facet"></div>
  </div>
  <p class="gt-20__sub">Refractive light spectrum</p>
  <div class="gt-20__gems">
    <span class="gt-20__gem-word">QUARTZ</span>
    <span class="gt-20__gem-word">AGATE</span>
    <span class="gt-20__gem-word">JASPER</span>
    <span class="gt-20__gem-word">OPAL</span>
  </div>
</div>
```

**CSS:**
```css
.gt-20, .gt-20 *, .gt-20 *::before, .gt-20 *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
.gt-20 {
  --bg: #e8f0fa;
  font-family: 'Syncopate', sans-serif;
  background: var(--bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3rem;
  padding: 3rem 2rem;
}
.gt-20__label {
  font-size: .6rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: #c0cce0;
}
.gt-20__crystal {
  font-size: clamp(2.5rem, 10vw, 7rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .12em;
  background: linear-gradient(
    120deg,
    #b8d4f0 0%,
    #d0e8ff 8%,
    #f0f8ff 15%,
    #c8e0f8 22%,
    #e8d0f8 30%,
    #f0c8e0 38%,
    #f8e0d0 46%,
    #f0f0c8 54%,
    #d0f0d8 62%,
    #c8f0f0 70%,
    #d0d8f8 78%,
    #e8d0f8 86%,
    #f0e8ff 93%,
    #b8d4f0 100%
  );
  background-size: 300% 300%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gt-20-prism 6s ease-in-out infinite;
}
.gt-20__facets {
  display: flex;
  gap: 1px;
  justify-content: center;
}
.gt-20__facet {
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg,
    #c8e0f8, #e8d0f8, #f0c8e0, #f8e0d0, #d0f0d8
  );
  background-size: 400% 100%;
  animation: gt-20-fscroll 4s linear infinite;
  opacity: .7;
}
.gt-20__facet:nth-child(odd) { animation-direction: reverse; }
.gt-20__facet:nth-child(2) { transform: scaleX(.8); opacity: .5; }
.gt-20__facet:nth-child(4) { transform: scaleX(.6); opacity: .4; }
.gt-20__facet:nth-child(5) { transform: scaleX(.8); opacity: .5; }
.gt-20__sub {
  font-size: clamp(.6rem, 1.8vw, .9rem);
  font-weight: 700;
  letter-spacing: .3em;
  text-transform: uppercase;
  background: linear-gradient(90deg,
    #8ab4d4 0%, #c090c0 33%, #a0c8a0 66%, #8ab4d4 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gt-20-fscroll 5s linear infinite;
}
.gt-20__gems {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
.gt-20__gem-word {
  font-size: clamp(.8rem, 2.5vw, 1.1rem);
  font-weight: 700;
  letter-spacing: .1em;
  text-align: center;
  padding: .6em .8em;
  border-radius: 6px;
  background: linear-gradient(135deg,
    #d0e8ff, #e8d0f8, #d0f0d8, #f8e0d0
  );
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  border: 1px solid #c8d8e8;
  animation: gt-20-prism 4s ease-in-out infinite;
}
.gt-20__gem-word:nth-child(2) { animation-delay: -.8s; }
.gt-20__gem-word:nth-child(3) { animation-delay: -1.6s; }
.gt-20__gem-word:nth-child(4) { animation-delay: -2.4s; }
@keyframes gt-20-prism {
  0%, 100% { background-position: 0% 0%; }
  50%       { background-position: 100% 100%; }
}
@keyframes gt-20-fscroll {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}
@media (prefers-reduced-motion: reduce) {
  .gt-20__crystal, .gt-20__facet, .gt-20__sub, .gt-20__gem-word { animation: none; }
}
```

---
## 24 CSS Grid Layouts

URL: https://codefronts.com/layouts/css-grid-layouts/
Description: 24 hand-coded CSS grid layouts — holy grail, 12-column, bento, masonry, subgrid, dashboard, kanban, container queries and more. Pure CSS, copy-paste ready.
Demo count: 24

### 01. Holy Grail

**Type:** Pure CSS
**Description:** The classic five-region web layout — header, sidebar, main, aside, footer — built with `grid-template-areas` so the markup reads like the visual. Three named columns let you swap left/right widths in one place.

**HTML:**
```html
<div class="gl-hg">
  <header class="gl-hg-h">
    <span class="gl-hg-name">Header</span>
    <span class="gl-hg-tag">grid-area: h</span>
  </header>
  <nav class="gl-hg-l">
    <span class="gl-hg-name">Sidebar</span>
    <span class="gl-hg-tag">grid-area: l</span>
  </nav>
  <main class="gl-hg-m">
    <span class="gl-hg-name">Main content</span>
    <span class="gl-hg-tag">grid-area: m</span>
  </main>
  <aside class="gl-hg-r">
    <span class="gl-hg-name">Aside</span>
    <span class="gl-hg-tag">grid-area: r</span>
  </aside>
  <footer class="gl-hg-f">
    <span class="gl-hg-name">Footer</span>
    <span class="gl-hg-tag">grid-area: f</span>
  </footer>
</div>
```

**CSS:**
```css
.gl-hg {
  display: grid;
  grid-template-columns: 180px 1fr 180px;
  grid-template-rows: 72px 1fr 56px;
  grid-template-areas:
    "h h h"
    "l m r"
    "f f f";
  gap: 12px;
  width: 100%;
  min-height: 480px;
  padding: 18px;
  background:
    radial-gradient(60% 80% at 80% 0%, rgba(16,185,129,0.12), transparent 60%),
    #051512;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  color: #d1fae5;
  box-sizing: border-box;
}
.gl-hg > * {
  background: #0d2620;
  border: 1px solid rgba(52,211,153,0.22);
  border-radius: 10px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 6px;
  padding: 12px;
  text-align: center;
}
.gl-hg-name { font-size: 13px; font-weight: 600; color: #ecfdf5; }
.gl-hg-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.04em;
  padding: 3px 8px; border-radius: 999px;
  background: rgba(16,185,129,0.14); color: #34d399;
}
.gl-hg-h { grid-area: h; background: linear-gradient(135deg, #10b981, #34d399); border-color: transparent; }
.gl-hg-h .gl-hg-name { color: #051512; }
.gl-hg-h .gl-hg-tag { background: rgba(5,21,18,0.25); color: #051512; }
.gl-hg-l { grid-area: l; }
.gl-hg-m { grid-area: m; background: #14302a; }
.gl-hg-r { grid-area: r; }
.gl-hg-f { grid-area: f; background: rgba(16,185,129,0.12); }
@media (max-width: 720px) {
  .gl-hg {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto auto;
    grid-template-areas: "h" "l" "m" "r" "f";
  }
}
```

### 02. 12-Column Grid

**Type:** Pure CSS
**Description:** A Bootstrap-style 12-column track with `repeat(12, minmax(0, 1fr))`. Cells span any number of columns via `grid-column: span N`, giving you the familiar `col-6 / col-3 / col-9` rhythm without a framework.

**HTML:**
```html
<div class="gl-12">
  <div class="gl-12-c12"><strong>12</strong><em>span 12</em></div>
  <div class="gl-12-c6"><strong>6</strong><em>span 6</em></div>
  <div class="gl-12-c6"><strong>6</strong><em>span 6</em></div>
  <div class="gl-12-c4"><strong>4</strong><em>span 4</em></div>
  <div class="gl-12-c4"><strong>4</strong><em>span 4</em></div>
  <div class="gl-12-c4"><strong>4</strong><em>span 4</em></div>
  <div class="gl-12-c3"><strong>3</strong><em>span 3</em></div>
  <div class="gl-12-c3"><strong>3</strong><em>span 3</em></div>
  <div class="gl-12-c3"><strong>3</strong><em>span 3</em></div>
  <div class="gl-12-c3"><strong>3</strong><em>span 3</em></div>
  <div class="gl-12-c8"><strong>8</strong><em>span 8</em></div>
  <div class="gl-12-c4"><strong>4</strong><em>span 4</em></div>
</div>
```

**CSS:**
```css
.gl-12 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
  min-height: 480px;
  padding: 22px;
  background:
    repeating-linear-gradient(90deg, transparent 0, transparent calc(100%/12 - 1px), rgba(245,158,11,0.06) calc(100%/12 - 1px), rgba(245,158,11,0.06) calc(100%/12)),
    #1a1206;
  font-family: 'Inter', system-ui, sans-serif;
  color: #fef3c7;
  box-sizing: border-box;
  align-content: start;
}
.gl-12 > div {
  background: linear-gradient(135deg, rgba(245,158,11,0.18), rgba(217,119,6,0.1));
  border: 1px solid rgba(245,158,11,0.32);
  border-radius: 10px;
  padding: 14px 10px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 4px;
  min-height: 64px;
}
.gl-12 > div strong {
  font-size: 22px; font-weight: 800; color: #fef3c7;
  letter-spacing: -0.02em;
}
.gl-12 > div em {
  font-style: normal;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; color: #fbbf24;
  letter-spacing: 0.04em;
}
.gl-12-c12 { grid-column: span 12; background: linear-gradient(90deg, #f59e0b, #fbbf24) !important; }
.gl-12-c12 strong { color: #1a1206; }
.gl-12-c12 em { color: #1a1206; opacity: 0.6; }
.gl-12-c8  { grid-column: span 8; }
.gl-12-c6  { grid-column: span 6; }
.gl-12-c4  { grid-column: span 4; }
.gl-12-c3  { grid-column: span 3; }
@media (max-width: 720px) {
  .gl-12 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .gl-12-c12, .gl-12-c8, .gl-12-c6 { grid-column: span 6; }
  .gl-12-c4, .gl-12-c3 { grid-column: span 3; }
}
```

### 03. Bento Box

**Type:** Pure CSS
**Description:** Apple-keynote bento grid — six tiles of asymmetric sizes orchestrated with `grid-template-areas`. Each tile name reads like English, so swapping the layout means renaming areas, not rewriting math.

**HTML:**
```html
<div class="gl-bb">
  <article class="gl-bb-hero">
    <span class="gl-bb-name">Hero</span>
    <span class="gl-bb-tag">grid-area: hero</span>
  </article>
  <article class="gl-bb-stat">
    <span class="gl-bb-name">Stat</span>
    <span class="gl-bb-tag">grid-area: stat</span>
  </article>
  <article class="gl-bb-feat">
    <span class="gl-bb-name">Feature</span>
    <span class="gl-bb-tag">grid-area: feat</span>
  </article>
  <article class="gl-bb-quote">
    <span class="gl-bb-name">Quote</span>
    <span class="gl-bb-tag">grid-area: quote</span>
  </article>
  <article class="gl-bb-cta">
    <span class="gl-bb-name">CTA</span>
    <span class="gl-bb-tag">grid-area: cta</span>
  </article>
  <article class="gl-bb-info">
    <span class="gl-bb-name">Info</span>
    <span class="gl-bb-tag">grid-area: info</span>
  </article>
</div>
```

**CSS:**
```css
.gl-bb {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, minmax(0, 1fr));
  grid-template-areas:
    "hero hero stat  feat"
    "hero hero info  feat"
    "quote cta cta   feat";
  gap: 12px;
  width: 100%;
  min-height: 480px;
  padding: 18px;
  background:
    radial-gradient(80% 60% at 0% 100%, rgba(251,113,133,0.16), transparent 60%),
    radial-gradient(60% 60% at 100% 0%, rgba(249,115,22,0.16), transparent 60%),
    #1a0d0a;
  font-family: 'Inter', system-ui, sans-serif;
  color: #ffe4e6;
  box-sizing: border-box;
}
.gl-bb > article {
  background: #2a1410;
  border: 1px solid rgba(251,113,133,0.18);
  border-radius: 14px;
  padding: 16px;
  display: flex; flex-direction: column;
  justify-content: space-between;
  gap: 8px;
  min-height: 0;
}
.gl-bb-name { font-size: 15px; font-weight: 700; color: #fff; }
.gl-bb-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.04em;
  align-self: flex-start;
  padding: 3px 8px; border-radius: 999px;
  background: rgba(251,113,133,0.14); color: #fb7185;
}
.gl-bb-hero {
  grid-area: hero;
  background: linear-gradient(135deg, #fb7185, #f97316) !important;
  border: 0 !important;
}
.gl-bb-hero .gl-bb-name { color: #1a0d0a; font-size: 24px; }
.gl-bb-hero .gl-bb-tag { background: rgba(26,13,10,0.25); color: #1a0d0a; }
.gl-bb-stat  { grid-area: stat; }
.gl-bb-feat  { grid-area: feat; background: linear-gradient(180deg, #2a1410, #4a1a14); }
.gl-bb-quote { grid-area: quote; }
.gl-bb-cta   { grid-area: cta; background: rgba(251,113,133,0.14); }
.gl-bb-info  { grid-area: info; }
@media (max-width: 720px) {
  .gl-bb {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(4, 1fr);
    grid-template-areas:
      "hero hero"
      "stat info"
      "feat feat"
      "quote cta";
  }
}
```

### 04. Magazine Editorial

**Type:** Pure CSS
**Description:** Editorial spread layout — a wide hero column anchors the page while side rails hold pull quotes, captions, and image plates. Built on a 6-column track with named areas; reads like a print magazine.

**HTML:**
```html
<div class="gl-mag">
  <div class="gl-mag-eyebrow">
    <span class="gl-mag-name">Issue 47 · Spring</span>
    <span class="gl-mag-tag">grid-area: eye</span>
  </div>
  <h2 class="gl-mag-title">
    <span class="gl-mag-name">The Long Read</span>
    <span class="gl-mag-tag">grid-area: title</span>
  </h2>
  <div class="gl-mag-lead">
    <span class="gl-mag-name">Lead paragraph</span>
    <span class="gl-mag-tag">grid-area: lead</span>
  </div>
  <figure class="gl-mag-fig">
    <span class="gl-mag-name">Photo plate</span>
    <span class="gl-mag-tag">grid-area: fig</span>
  </figure>
  <aside class="gl-mag-pull">
    <span class="gl-mag-name">Pull quote</span>
    <span class="gl-mag-tag">grid-area: pull</span>
  </aside>
  <div class="gl-mag-body">
    <span class="gl-mag-name">Body column</span>
    <span class="gl-mag-tag">grid-area: body</span>
  </div>
  <div class="gl-mag-foot">
    <span class="gl-mag-name">Footer · byline</span>
    <span class="gl-mag-tag">grid-area: foot</span>
  </div>
</div>
```

**CSS:**
```css
.gl-mag {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: 56px auto 1fr auto 48px;
  grid-template-areas:
    "eye   eye   eye   eye   eye   eye"
    "title title title title fig   fig"
    "lead  lead  body  body  fig   fig"
    "pull  pull  body  body  fig   fig"
    "foot  foot  foot  foot  foot  foot";
  gap: 14px;
  width: 100%;
  min-height: 480px;
  padding: 22px;
  background: #f5f1ea;
  font-family: 'Playfair Display', Georgia, serif;
  color: #1c1c1e;
  box-sizing: border-box;
}
.gl-mag > * {
  background: #fff;
  border: 1px solid #d8d2c5;
  border-radius: 4px;
  padding: 14px;
  display: flex; flex-direction: column;
  justify-content: center; gap: 6px;
}
.gl-mag-name { font-size: 16px; font-weight: 700; color: #1c1c1e; }
.gl-mag-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; font-weight: 500;
  align-self: flex-start;
  padding: 2px 8px; border: 1px solid #1c1c1e;
  color: #1c1c1e;
  background: transparent;
}
.gl-mag-eyebrow { grid-area: eye; background: #1c1c1e !important; border: 0 !important; min-height: 36px; padding: 8px 14px; }
.gl-mag-eyebrow .gl-mag-name { color: #f5f1ea; font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; }
.gl-mag-eyebrow .gl-mag-tag { color: #f5f1ea; border-color: #f5f1ea; }
.gl-mag-title { grid-area: title; margin: 0; }
.gl-mag-title .gl-mag-name { font-size: 36px; line-height: 1; letter-spacing: -0.02em; }
.gl-mag-fig { grid-area: fig; background: linear-gradient(160deg, #d4af37, #b89238) !important; border: 0 !important; color: #1c1c1e; }
.gl-mag-fig .gl-mag-name { color: #1c1c1e; }
.gl-mag-fig .gl-mag-tag { color: #1c1c1e; border-color: #1c1c1e; }
.gl-mag-lead { grid-area: lead; }
.gl-mag-pull { grid-area: pull; background: #1c1c1e !important; border: 0 !important; }
.gl-mag-pull .gl-mag-name { color: #f5f1ea; font-style: italic; }
.gl-mag-pull .gl-mag-tag { color: #f5f1ea; border-color: #f5f1ea; }
.gl-mag-body { grid-area: body; }
.gl-mag-foot { grid-area: foot; background: #f5f1ea !important; padding: 10px 14px; }
.gl-mag-foot .gl-mag-name { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.12em; }
@media (max-width: 720px) {
  .gl-mag {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(7, auto);
    grid-template-areas: "eye" "title" "fig" "lead" "body" "pull" "foot";
  }
}
```

### 05. RAM Auto-Fit

**Type:** Pure CSS
**Description:** The "RAM" pattern — `repeat(auto-fit, minmax(220px, 1fr))` — gives you a grid that wraps as many columns as the container allows, never overflows, and never goes below the minimum. The single most useful one-liner in CSS Grid.

**HTML:**
```html
<div class="gl-ram">
  <div class="gl-ram-cell"><strong>Card 1</strong><em>auto-fit · minmax(220px, 1fr)</em></div>
  <div class="gl-ram-cell"><strong>Card 2</strong><em>auto-fit</em></div>
  <div class="gl-ram-cell"><strong>Card 3</strong><em>auto-fit</em></div>
  <div class="gl-ram-cell"><strong>Card 4</strong><em>auto-fit</em></div>
  <div class="gl-ram-cell"><strong>Card 5</strong><em>auto-fit</em></div>
  <div class="gl-ram-cell"><strong>Card 6</strong><em>auto-fit</em></div>
  <div class="gl-ram-cell"><strong>Card 7</strong><em>auto-fit</em></div>
  <div class="gl-ram-cell"><strong>Card 8</strong><em>auto-fit</em></div>
</div>
```

**CSS:**
```css
.gl-ram {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  width: 100%;
  min-height: 480px;
  padding: 22px;
  background:
    radial-gradient(60% 80% at 50% 0%, rgba(56,189,248,0.16), transparent 60%),
    #051324;
  font-family: 'Inter', system-ui, sans-serif;
  color: #e0f2fe;
  box-sizing: border-box;
  align-content: start;
}
.gl-ram-cell {
  background: linear-gradient(160deg, rgba(56,189,248,0.16), rgba(14,165,233,0.06));
  border: 1px solid rgba(56,189,248,0.28);
  border-radius: 12px;
  padding: 22px 18px;
  display: flex; flex-direction: column;
  align-items: flex-start; justify-content: center;
  gap: 6px;
  min-height: 90px;
}
.gl-ram-cell strong { font-size: 16px; font-weight: 700; color: #fff; }
.gl-ram-cell em {
  font-style: normal;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px; color: #38bdf8;
  letter-spacing: 0.02em;
}
.gl-ram-cell:nth-child(1) { background: linear-gradient(135deg, #0ea5e9, #38bdf8); border: 0; }
.gl-ram-cell:nth-child(1) strong { color: #051324; }
.gl-ram-cell:nth-child(1) em { color: #051324; opacity: 0.7; }
```

### 06. Quantity Query

**Type:** Pure CSS
**Description:** Layout that adapts to *how many* children it has using `:has()` and `:nth-child()` — one item gets a hero treatment, two split 50/50, three become a 3-column row, four become a 2×2. No JS.

**HTML:**
```html
<section class="gl-qq">
  <header class="gl-qq-head">
    <strong>Three children → 3-column row</strong>
    <span class="gl-qq-coord">:has(:nth-child(3):last-child)</span>
  </header>
  <div class="gl-qq-grid">
    <div><strong>1</strong><em>nth-child(1)</em></div>
    <div><strong>2</strong><em>nth-child(2)</em></div>
    <div><strong>3</strong><em>nth-child(3)</em></div>
  </div>
</section>
```

**CSS:**
```css
.gl-qq {
  display: flex; flex-direction: column;
  gap: 16px;
  width: 100%;
  min-height: 480px;
  padding: 22px;
  background:
    radial-gradient(60% 80% at 100% 0%, rgba(217,70,239,0.16), transparent 60%),
    #1a0820;
  font-family: 'Inter', system-ui, sans-serif;
  color: #fae8ff;
  box-sizing: border-box;
}
.gl-qq-head {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px;
  padding: 14px 18px;
  background: linear-gradient(135deg, #d946ef, #a21caf);
  border-radius: 12px;
  color: #fff;
}
.gl-qq-head strong { font-size: 14px; font-weight: 700; }
.gl-qq-coord {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  background: rgba(26,8,32,0.4); color: #fff;
  padding: 4px 10px; border-radius: 6px;
}
.gl-qq-grid {
  display: grid; gap: 12px; flex: 1;
  grid-template-columns: 1fr;
}
/* Single child → hero */
.gl-qq-grid:has(> div:only-child) { grid-template-columns: 1fr; }
/* Two children → 50/50 */
.gl-qq-grid:has(> div:nth-child(2):last-child) { grid-template-columns: 1fr 1fr; }
/* Three children → three columns */
.gl-qq-grid:has(> div:nth-child(3):last-child) { grid-template-columns: repeat(3, 1fr); }
/* Four+ children → 2×2 */
.gl-qq-grid:has(> div:nth-child(4)) { grid-template-columns: repeat(2, 1fr); }
.gl-qq-grid > div {
  background: linear-gradient(160deg, rgba(217,70,239,0.14), rgba(126,34,206,0.06));
  border: 1px solid rgba(217,70,239,0.32);
  border-radius: 12px;
  padding: 22px 18px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 6px;
  min-height: 120px;
}
.gl-qq-grid > div strong { font-size: 32px; font-weight: 800; color: #fff; letter-spacing: -0.02em; }
.gl-qq-grid > div em {
  font-style: normal;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px; color: #d946ef;
}
.gl-qq-grid > div:nth-child(2) { background: linear-gradient(160deg, rgba(217,70,239,0.28), rgba(126,34,206,0.1)); }
.gl-qq-grid > div:nth-child(3) { background: linear-gradient(135deg, #d946ef, #a21caf); border: 0; }
.gl-qq-grid > div:nth-child(3) em { color: rgba(255,255,255,0.6); }
@media (max-width: 720px) {
  .gl-qq-grid:has(> div:nth-child(3):last-child) { grid-template-columns: 1fr; }
}
```

### 07. Pinterest Masonry

**Type:** Pure CSS
**Description:** Masonry-style brick layout using `grid-template-rows: masonry` (with `grid-auto-flow: dense` fallback). Cards of varying heights pack tightly without gaps — the Pinterest pattern, native CSS.

**HTML:**
```html
<div class="gl-mas">
  <article class="gl-mas-c1"><strong>Card 1</strong><em>row 1 · h: 1.5×</em></article>
  <article class="gl-mas-c2"><strong>Card 2</strong><em>row 1 · h: 1×</em></article>
  <article class="gl-mas-c3"><strong>Card 3</strong><em>row 2 · h: 2×</em></article>
  <article class="gl-mas-c4"><strong>Card 4</strong><em>row 2 · h: 1×</em></article>
  <article class="gl-mas-c5"><strong>Card 5</strong><em>row 3 · h: 1.5×</em></article>
  <article class="gl-mas-c6"><strong>Card 6</strong><em>row 3 · h: 1×</em></article>
  <article class="gl-mas-c7"><strong>Card 7</strong><em>row 4 · h: 1×</em></article>
</div>
```

**CSS:**
```css
.gl-mas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  grid-auto-flow: dense;
  grid-auto-rows: 60px;
  gap: 12px;
  width: 100%;
  min-height: 480px;
  padding: 22px;
  background:
    radial-gradient(50% 80% at 50% 0%, rgba(244,63,94,0.14), transparent 60%),
    #1a060c;
  font-family: 'Inter', system-ui, sans-serif;
  color: #ffe4e6;
  box-sizing: border-box;
  align-content: start;
}
.gl-mas > article {
  background: linear-gradient(160deg, rgba(244,63,94,0.16), rgba(190,18,60,0.06));
  border: 1px solid rgba(244,63,94,0.28);
  border-radius: 14px;
  padding: 16px;
  display: flex; flex-direction: column;
  justify-content: space-between;
  gap: 6px;
}
.gl-mas > article strong { font-size: 14px; font-weight: 700; color: #fff; }
.gl-mas > article em {
  font-style: normal;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; color: #fb7185;
  align-self: flex-start;
  padding: 2px 8px; border-radius: 999px;
  background: rgba(244,63,94,0.12);
}
.gl-mas-c1 { grid-row: span 3; background: linear-gradient(180deg, #f43f5e, #e11d48) !important; border: 0 !important; }
.gl-mas-c1 em { color: #fff; background: rgba(26,6,12,0.3); }
.gl-mas-c2 { grid-row: span 2; }
.gl-mas-c3 { grid-row: span 4; background: linear-gradient(180deg, rgba(244,63,94,0.32), rgba(190,18,60,0.14)); }
.gl-mas-c4 { grid-row: span 2; }
.gl-mas-c5 { grid-row: span 3; }
.gl-mas-c6 { grid-row: span 2; background: linear-gradient(180deg, #fb7185, #f43f5e) !important; border: 0 !important; }
.gl-mas-c6 em { color: #fff; background: rgba(26,6,12,0.3); }
.gl-mas-c7 { grid-row: span 2; }
```

### 08. Hexagonal Honeycomb

**Type:** Pure CSS
**Description:** Hexagon honeycomb tiling — alternating offset rows on a CSS Grid base, each cell shaped with `clip-path: polygon()`. The math falls out of the grid track widths; no transforms needed.

**HTML:**
```html
<div class="gl-hex">
  <div class="gl-hex-row">
    <span class="gl-hex-cell"><strong>A1</strong><em>row 1</em></span>
    <span class="gl-hex-cell"><strong>A2</strong><em>row 1</em></span>
    <span class="gl-hex-cell"><strong>A3</strong><em>row 1</em></span>
    <span class="gl-hex-cell"><strong>A4</strong><em>row 1</em></span>
  </div>
  <div class="gl-hex-row gl-hex-shift">
    <span class="gl-hex-cell"><strong>B1</strong><em>row 2</em></span>
    <span class="gl-hex-cell"><strong>B2</strong><em>row 2</em></span>
    <span class="gl-hex-cell"><strong>B3</strong><em>row 2</em></span>
  </div>
  <div class="gl-hex-row">
    <span class="gl-hex-cell"><strong>C1</strong><em>row 3</em></span>
    <span class="gl-hex-cell"><strong>C2</strong><em>row 3</em></span>
    <span class="gl-hex-cell"><strong>C3</strong><em>row 3</em></span>
    <span class="gl-hex-cell"><strong>C4</strong><em>row 3</em></span>
  </div>
  <div class="gl-hex-row gl-hex-shift">
    <span class="gl-hex-cell"><strong>D1</strong><em>row 4</em></span>
    <span class="gl-hex-cell"><strong>D2</strong><em>row 4</em></span>
    <span class="gl-hex-cell"><strong>D3</strong><em>row 4</em></span>
  </div>
</div>
```

**CSS:**
```css
.gl-hex {
  display: flex; flex-direction: column; gap: 6px;
  width: 100%;
  min-height: 480px;
  padding: 28px 18px;
  background:
    radial-gradient(60% 60% at 50% 50%, rgba(217,119,6,0.14), transparent 60%),
    #14110a;
  font-family: 'Inter', system-ui, sans-serif;
  color: #fef3c7;
  box-sizing: border-box;
  align-items: center; justify-content: center;
  overflow: hidden;
}
.gl-hex-row {
  display: grid;
  grid-template-columns: repeat(4, 100px);
  gap: 8px;
  width: 424px;
  margin-left: 0;
}
.gl-hex-shift {
  grid-template-columns: repeat(3, 100px);
  padding-left: 54px;
  width: 424px;
}
.gl-hex-row + .gl-hex-row { margin-top: -28px; }
.gl-hex-cell {
  width: 100px; height: 110px;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: linear-gradient(160deg, #d97706, #f59e0b);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 2px;
  color: #14110a;
  cursor: pointer;
  transition: transform 0.22s cubic-bezier(.22,1,.36,1),
              filter 0.22s ease;
  will-change: transform, filter;
}
.gl-hex-cell:hover,
.gl-hex-cell:focus-visible {
  transform: translateY(-4px) scale(1.06);
  filter: drop-shadow(0 6px 14px rgba(251, 191, 36, 0.55))
          drop-shadow(0 2px 4px rgba(217, 119, 6, 0.4))
          brightness(1.15);
  z-index: 2;
  outline: none;
}
.gl-hex-cell strong { font-size: 16px; font-weight: 800; letter-spacing: -0.01em; }
.gl-hex-cell em {
  font-style: normal;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px; letter-spacing: 0.02em;
  color: rgba(20,17,10,0.65);
}
.gl-hex-row:nth-child(1) .gl-hex-cell { background: linear-gradient(160deg, #f59e0b, #fbbf24); }
.gl-hex-row:nth-child(2) .gl-hex-cell { background: linear-gradient(160deg, #d97706, #f59e0b); }
.gl-hex-row:nth-child(3) .gl-hex-cell { background: linear-gradient(160deg, #b45309, #d97706); }
.gl-hex-row:nth-child(4) .gl-hex-cell { background: linear-gradient(160deg, #92400e, #b45309); color: #fef3c7; }
.gl-hex-row:nth-child(4) .gl-hex-cell em { color: rgba(254,243,199,0.7); }
.gl-hex-row { position: relative; }
.gl-hex-cell:hover { position: relative; }
@media (prefers-reduced-motion: reduce) {
  .gl-hex-cell { transition: none; }
  .gl-hex-cell:hover, .gl-hex-cell:focus-visible { transform: none; }
}
@media (max-width: 720px) {
  .gl-hex-row { grid-template-columns: repeat(3, 80px); width: 256px; padding-left: 0; }
  .gl-hex-shift { grid-template-columns: repeat(2, 80px); padding-left: 44px; width: 256px; }
  .gl-hex-cell { width: 80px; height: 90px; }
  .gl-hex-row + .gl-hex-row { margin-top: -22px; }
}
```

### 09. Subgrid Card

**Type:** Pure CSS
**Description:** A row of cards whose internal sections (title / body / footer) line up across all cards using `grid-template-rows: subgrid`. The titles align even when one is two lines; same for the footer baseline.

**HTML:**
```html
<div class="gl-sg">
  <article class="gl-sg-card">
    <h3 class="gl-sg-title"><span>Compact title</span><span class="gl-sg-pill">subgrid</span></h3>
    <p class="gl-sg-body">
      Body copy of variable length sits on its own subgrid row so titles always align.
    </p>
    <footer class="gl-sg-foot"><span>Footer</span><span class="gl-sg-coord">row 3</span></footer>
  </article>
  <article class="gl-sg-card gl-sg-mid">
    <h3 class="gl-sg-title">
      <span>A longer two-line card title here</span><span class="gl-sg-pill">subgrid</span>
    </h3>
    <p class="gl-sg-body">
      Subgrid lets this card inherit the parent's row tracks. Bodies stay aligned regardless of
      title height.
    </p>
    <footer class="gl-sg-foot"><span>Footer</span><span class="gl-sg-coord">row 3</span></footer>
  </article>
  <article class="gl-sg-card">
    <h3 class="gl-sg-title"><span>Compact title</span><span class="gl-sg-pill">subgrid</span></h3>
    <p class="gl-sg-body">
      Without subgrid these would drift. With subgrid each card's three rows lock to the parent.
    </p>
    <footer class="gl-sg-foot"><span>Footer</span><span class="gl-sg-coord">row 3</span></footer>
  </article>
</div>
```

**CSS:**
```css
.gl-sg {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto 1fr auto;
  gap: 14px;
  width: 100%;
  min-height: 480px;
  padding: 22px;
  background:
    radial-gradient(60% 80% at 50% 0%, rgba(34,211,238,0.14), transparent 60%),
    #061a1f;
  font-family: 'Inter', system-ui, sans-serif;
  color: #e0f7fa;
  box-sizing: border-box;
}
.gl-sg-card {
  display: grid;
  grid-row: 1 / -1;
  grid-template-rows: subgrid;
  background: linear-gradient(180deg, rgba(34,211,238,0.12), rgba(8,145,178,0.04));
  border: 1px solid rgba(34,211,238,0.28);
  border-radius: 14px;
  padding: 18px;
  gap: 12px;
}
.gl-sg-mid { background: linear-gradient(180deg, #06b6d4, #0891b2); border: 0; color: #061a1f; }
.gl-sg-mid .gl-sg-pill, .gl-sg-mid .gl-sg-coord { background: rgba(6,26,31,0.2); color: #061a1f; }
.gl-sg-mid .gl-sg-body { color: #061a1f; opacity: 0.85; }
.gl-sg-title {
  margin: 0; font-size: 16px; font-weight: 700; line-height: 1.3;
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 10px;
}
.gl-sg-title span:first-child { color: inherit; }
.gl-sg-pill, .gl-sg-coord {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.04em;
  padding: 2px 8px; border-radius: 999px;
  background: rgba(34,211,238,0.16); color: #22d3ee;
  flex-shrink: 0;
}
.gl-sg-body { font-size: 13px; line-height: 1.55; margin: 0; color: #b6d8df; }
.gl-sg-foot {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12px; padding-top: 10px;
  border-top: 1px dashed rgba(34,211,238,0.25);
}
.gl-sg-mid .gl-sg-foot { border-top-color: rgba(6,26,31,0.25); }
@media (max-width: 720px) {
  .gl-sg { grid-template-columns: 1fr; grid-template-rows: none; }
  .gl-sg-card { grid-row: auto; grid-template-rows: auto auto auto; }
}
```

### 10. Dashboard Skeleton

**Type:** Pure CSS
**Description:** Admin dashboard skeleton — sticky sidebar, top bar, KPI row, main chart area, and a feed rail. Six named areas on a 12-column track so any region can grow without rebreaking the others.

**HTML:**
```html
<div class="gl-dash">
  <header class="gl-dash-bar">
    <strong>Top bar</strong><span class="gl-dash-coord">grid-area: bar</span>
  </header>
  <nav class="gl-dash-nav">
    <strong>Sidebar</strong><span class="gl-dash-coord">grid-area: nav</span>
  </nav>
  <div class="gl-dash-kpi gl-dash-k1">
    <strong>KPI</strong><span class="gl-dash-coord">kpi · 1/4</span>
  </div>
  <div class="gl-dash-kpi gl-dash-k2">
    <strong>KPI</strong><span class="gl-dash-coord">kpi · 2/4</span>
  </div>
  <div class="gl-dash-kpi gl-dash-k3">
    <strong>KPI</strong><span class="gl-dash-coord">kpi · 3/4</span>
  </div>
  <div class="gl-dash-kpi gl-dash-k4">
    <strong>KPI</strong><span class="gl-dash-coord">kpi · 4/4</span>
  </div>
  <main class="gl-dash-main">
    <strong>Main chart</strong><span class="gl-dash-coord">grid-area: main</span>
  </main>
  <aside class="gl-dash-feed">
    <strong>Activity feed</strong><span class="gl-dash-coord">grid-area: feed</span>
  </aside>
</div>
```

**CSS:**
```css
.gl-dash {
  display: grid;
  grid-template-columns: 200px repeat(4, 1fr) 200px;
  grid-template-rows: 56px 86px 1fr;
  grid-template-areas:
    "nav bar bar bar bar bar"
    "nav k1  k2  k3  k4  feed"
    "nav main main main main feed";
  gap: 10px;
  width: 100%;
  min-height: 480px;
  padding: 14px;
  background: #0a0a1a;
  font-family: 'Inter', system-ui, sans-serif;
  color: #e0e7ff;
  box-sizing: border-box;
}
.gl-dash > * {
  background: #1a1a2e;
  border: 1px solid rgba(99,102,241,0.22);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex; flex-direction: column;
  justify-content: center; gap: 4px;
}
.gl-dash > * strong { font-size: 13px; font-weight: 700; color: #c7d2fe; }
.gl-dash-coord {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; color: #818cf8;
  letter-spacing: 0.04em;
  align-self: flex-start;
}
.gl-dash-bar  { grid-area: bar;  background: linear-gradient(90deg, #4f46e5, #6366f1); border: 0; }
.gl-dash-bar strong, .gl-dash-bar .gl-dash-coord { color: #fff; }
.gl-dash-bar .gl-dash-coord { color: rgba(255,255,255,0.7); }
.gl-dash-nav  { grid-area: nav;  background: #14142b; }
.gl-dash-k1   { grid-area: k1; background: linear-gradient(160deg, rgba(99,102,241,0.28), rgba(99,102,241,0.06)); }
.gl-dash-k2   { grid-area: k2; }
.gl-dash-k3   { grid-area: k3; background: linear-gradient(160deg, rgba(168,85,247,0.28), rgba(168,85,247,0.06)); }
.gl-dash-k4   { grid-area: k4; }
.gl-dash-main { grid-area: main; background: linear-gradient(180deg, #1a1a2e, #14142b); min-height: 200px; }
.gl-dash-feed { grid-area: feed; background: rgba(99,102,241,0.08); }
@media (max-width: 720px) {
  .gl-dash {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto auto;
    grid-template-areas:
      "bar bar"
      "nav nav"
      "k1 k2"
      "k3 k4"
      "main main"
      "feed feed";
  }
}
```

### 11. Pricing Table

**Type:** Pure CSS
**Description:** Three-column pricing tier on a CSS Grid base. The middle tier scales up using `transform: scale()` while staying in the same grid track — the baseline pricing pattern with consistent header / price / feature / CTA rows.

**HTML:**
```html
<div class="gl-pri">
  <article class="gl-pri-tier">
    <h4>Free</h4>
    <strong>$0</strong><span class="gl-pri-coord">column 1</span>
    <p>Personal projects · 1 user</p>
    <a>Choose</a>
  </article>
  <article class="gl-pri-tier gl-pri-pop">
    <span class="gl-pri-badge">Recommended</span>
    <h4>Pro</h4>
    <strong>$24</strong><span class="gl-pri-coord">column 2 · scaled</span>
    <p>Teams · unlimited projects</p>
    <a>Choose</a>
  </article>
  <article class="gl-pri-tier">
    <h4>Enterprise</h4>
    <strong>$96</strong><span class="gl-pri-coord">column 3</span>
    <p>SSO · audit logs · SLA</p>
    <a>Talk to sales</a>
  </article>
</div>
```

**CSS:**
```css
.gl-pri {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  width: 100%;
  min-height: 480px;
  padding: 22px;
  background:
    radial-gradient(60% 80% at 50% 0%, rgba(34,197,94,0.14), transparent 60%),
    #07140e;
  font-family: 'Inter', system-ui, sans-serif;
  color: #ecfdf5;
  box-sizing: border-box;
  align-items: center;
}
.gl-pri-tier {
  position: relative;
  background: #0d2018;
  border: 1px solid rgba(34,197,94,0.22);
  border-radius: 14px;
  padding: 22px 18px;
  display: flex; flex-direction: column;
  gap: 10px;
  text-align: center;
}
.gl-pri-tier h4 { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #34d399; }
.gl-pri-tier strong { font-size: 36px; font-weight: 800; letter-spacing: -0.02em; color: #fff; }
.gl-pri-coord {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px; letter-spacing: 0.04em;
  color: #34d399;
  background: rgba(34,197,94,0.14); border-radius: 999px;
  padding: 3px 10px; align-self: center;
}
.gl-pri-tier p { margin: 0; font-size: 13px; color: #a7d8b9; }
.gl-pri-tier a { display: block; padding: 10px; border-radius: 8px; background: rgba(34,197,94,0.14); color: #34d399; text-decoration: none; font-weight: 600; font-size: 13px; cursor: default; }
.gl-pri-pop {
  background: linear-gradient(180deg, #16a34a, #15803d);
  border-color: #34d399;
  transform: scale(1.04);
  box-shadow: 0 14px 40px rgba(34,197,94,0.25);
  color: #07140e;
}
.gl-pri-pop h4, .gl-pri-pop strong { color: #07140e; }
.gl-pri-pop p { color: rgba(7,20,14,0.8); }
.gl-pri-pop a { background: #07140e; color: #34d399; }
.gl-pri-pop .gl-pri-coord { background: rgba(7,20,14,0.25); color: #07140e; }
.gl-pri-badge {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  background: #07140e; color: #34d399;
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; padding: 4px 10px;
  border-radius: 999px;
}
@media (max-width: 720px) {
  .gl-pri { grid-template-columns: 1fr; }
  .gl-pri-pop { transform: none; }
}
```

### 12. Kanban Board

**Type:** Pure CSS
**Description:** Three-column kanban — Todo / In Progress / Done — with each column scrolling independently. Cards stack with `grid-auto-rows: min-content` so columns of different lengths still align at the top.

**HTML:**
```html
<div class="gl-kb">
  <section class="gl-kb-col gl-kb-todo">
    <header><strong>To-do</strong><span class="gl-kb-coord">column 1</span></header>
    <article>Sketch onboarding</article>
    <article>Brand audit</article>
    <article>Set up CI</article>
  </section>
  <section class="gl-kb-col gl-kb-prog">
    <header><strong>In progress</strong><span class="gl-kb-coord">column 2</span></header>
    <article>Refactor auth</article>
    <article>Email templates</article>
  </section>
  <section class="gl-kb-col gl-kb-done">
    <header><strong>Done</strong><span class="gl-kb-coord">column 3</span></header>
    <article>Spec sign-off</article>
    <article>Vendor selected</article>
    <article>Wire-frames</article>
    <article>Kick-off call</article>
  </section>
</div>
```

**CSS:**
```css
.gl-kb {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  width: 100%;
  min-height: 480px;
  padding: 18px;
  background: #0f172a;
  font-family: 'Inter', system-ui, sans-serif;
  color: #e2e8f0;
  box-sizing: border-box;
  align-items: start;
}
.gl-kb-col {
  background: #1e293b;
  border: 1px solid rgba(148,163,184,0.18);
  border-radius: 14px;
  padding: 14px;
  display: grid;
  grid-auto-rows: min-content;
  gap: 8px;
}
.gl-kb-col header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 10px;
  border-radius: 8px;
  margin-bottom: 4px;
}
.gl-kb-col header strong { font-size: 13px; font-weight: 700; }
.gl-kb-coord {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.04em;
  padding: 2px 8px; border-radius: 999px;
}
.gl-kb-todo header { background: rgba(148,163,184,0.18); color: #cbd5e1; }
.gl-kb-todo .gl-kb-coord { background: rgba(15,23,42,0.5); color: #94a3b8; }
.gl-kb-prog header { background: rgba(245,158,11,0.18); color: #fbbf24; }
.gl-kb-prog .gl-kb-coord { background: rgba(15,23,42,0.5); color: #fbbf24; }
.gl-kb-done header { background: rgba(34,197,94,0.18); color: #34d399; }
.gl-kb-done .gl-kb-coord { background: rgba(15,23,42,0.5); color: #34d399; }
.gl-kb-col article {
  background: #334155;
  border: 1px solid rgba(148,163,184,0.18);
  border-left: 3px solid currentColor;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px;
  color: #e2e8f0;
}
.gl-kb-todo article { color: #94a3b8; }
.gl-kb-prog article { color: #fbbf24; }
.gl-kb-done article { color: #34d399; }
.gl-kb-col article { color: #e2e8f0; }
.gl-kb-todo article { border-left-color: #94a3b8; }
.gl-kb-prog article { border-left-color: #fbbf24; }
.gl-kb-done article { border-left-color: #34d399; }
@media (max-width: 720px) {
  .gl-kb { grid-template-columns: 1fr; }
}
```

### 13. Aspect-Ratio Tiles

**Type:** Pure CSS
**Description:** Photo-grid where every tile keeps a perfect 1:1 ratio via `aspect-ratio: 1`. Combined with `auto-fill`, tiles wrap responsively without breaking aspect or causing layout shift on image load.

**HTML:**
```html
<div class="gl-ar">
  <div class="gl-ar-tile" style="grid-row: span 2"><strong>2:1</strong><em>span 2 rows</em></div>
  <div class="gl-ar-tile"><strong>1:1</strong><em>aspect-ratio: 1</em></div>
  <div class="gl-ar-tile"><strong>1:1</strong><em>aspect-ratio: 1</em></div>
  <div class="gl-ar-tile"><strong>1:1</strong><em>aspect-ratio: 1</em></div>
  <div class="gl-ar-tile"><strong>1:1</strong><em>aspect-ratio: 1</em></div>
  <div class="gl-ar-tile"><strong>1:1</strong><em>aspect-ratio: 1</em></div>
  <div class="gl-ar-tile"><strong>1:1</strong><em>aspect-ratio: 1</em></div>
  <div class="gl-ar-tile"><strong>1:1</strong><em>aspect-ratio: 1</em></div>
  <div class="gl-ar-tile"><strong>1:1</strong><em>aspect-ratio: 1</em></div>
  <div class="gl-ar-tile"><strong>1:1</strong><em>aspect-ratio: 1</em></div>
  <div class="gl-ar-tile"><strong>1:1</strong><em>aspect-ratio: 1</em></div>
</div>
```

**CSS:**
```css
.gl-ar {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  width: 100%;
  min-height: 480px;
  padding: 22px;
  background:
    radial-gradient(60% 80% at 50% 0%, rgba(192,38,211,0.16), transparent 60%),
    #1a0820;
  font-family: 'Inter', system-ui, sans-serif;
  color: #f5d0fe;
  box-sizing: border-box;
  align-content: start;
}
.gl-ar-tile {
  aspect-ratio: 1;
  background: linear-gradient(160deg, rgba(192,38,211,0.18), rgba(126,34,206,0.06));
  border: 1px solid rgba(192,38,211,0.32);
  border-radius: 12px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 4px;
}
.gl-ar-tile[style*="span 2"] { aspect-ratio: 1 / 2; }
.gl-ar-tile strong { font-size: 22px; font-weight: 800; color: #fff; letter-spacing: -0.02em; }
.gl-ar-tile em {
  font-style: normal;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px; color: #c026d3;
}
.gl-ar-tile:nth-child(3n+1) { background: linear-gradient(160deg, #c026d3, #a21caf); border: 0; }
.gl-ar-tile:nth-child(3n+1) em { color: rgba(255,255,255,0.7); }
.gl-ar-tile:nth-child(5n+2) { background: linear-gradient(160deg, #a21caf, #86198f); border: 0; }
.gl-ar-tile:nth-child(5n+2) em { color: rgba(255,255,255,0.7); }
```

### 14. Container-Query Card

**Type:** Pure CSS
**Description:** A card whose internal layout adapts to its *container* width using `@container` queries — not the viewport. Below 320px it stacks vertically; above 320px it splits horizontal. Modern responsive design without media queries.

**HTML:**
```html
<div class="gl-cq">
  <section class="gl-cq-card gl-cq-wide">
    <article class="gl-cq-inner">
      <span class="gl-cq-name">Container ≥ 320px</span>
      <header class="gl-cq-img">
        <strong>Image</strong>
        <span class="gl-cq-coord">img · col 1</span>
      </header>
      <div class="gl-cq-body">
        <h4>Card with container queries</h4>
        <p>Resize the card and the layout switches — no media query, no JS.</p>
        <span class="gl-cq-coord gl-cq-coord-light">body · col 2 · @container ≥ 320px</span>
      </div>
    </article>
  </section>
  <section class="gl-cq-card gl-cq-narrow">
    <article class="gl-cq-inner">
      <span class="gl-cq-name">Container &lt; 320px</span>
      <header class="gl-cq-img">
        <strong>Image</strong>
        <span class="gl-cq-coord">img · row 1</span>
      </header>
      <div class="gl-cq-body">
        <h4>Stacks below 320px</h4>
        <p>Same component. Different container width.</p>
        <span class="gl-cq-coord gl-cq-coord-light">body · row 2 · @container &lt; 320px</span>
      </div>
    </article>
  </section>
</div>
```

**CSS:**
```css
.gl-cq {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: 18px;
  width: 100%;
  min-height: 480px;
  padding: 22px;
  background:
    radial-gradient(60% 80% at 50% 0%, rgba(20,184,166,0.14), transparent 60%),
    #042022;
  font-family: 'Inter', system-ui, sans-serif;
  color: #ccfbf1;
  box-sizing: border-box;
  align-items: stretch;
}
.gl-cq-card {
  container-type: inline-size;
  background: #0d3030;
  border: 1px solid rgba(20,184,166,0.28);
  border-radius: 14px;
  padding: 16px;
}
.gl-cq-inner {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto 1fr;
  grid-template-areas: "name" "img" "body";
}
.gl-cq-name {
  grid-area: name;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 600; letter-spacing: 0.08em;
  color: #2dd4bf;
  background: rgba(20,184,166,0.14);
  padding: 4px 10px; border-radius: 999px;
  align-self: flex-start; justify-self: flex-start;
}
.gl-cq-img {
  grid-area: img;
  background: linear-gradient(135deg, #14b8a6, #0d9488);
  min-height: 120px;
  border-radius: 10px;
  padding: 14px;
  display: flex; flex-direction: column;
  justify-content: space-between;
  color: #042022;
  margin: 0;
}
.gl-cq-img strong { font-size: 16px; font-weight: 700; }
.gl-cq-coord {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.04em;
  align-self: flex-start;
  padding: 2px 8px; border-radius: 999px;
  background: rgba(4,32,34,0.25); color: #042022;
}
.gl-cq-coord-light { color: #2dd4bf; background: rgba(20,184,166,0.14); }
.gl-cq-body {
  grid-area: body;
  padding: 4px 2px;
  display: flex; flex-direction: column;
  gap: 6px;
}
.gl-cq-body h4 { margin: 0; font-size: 14px; font-weight: 700; color: #fff; }
.gl-cq-body p { margin: 0; font-size: 12.5px; color: #99d4cb; line-height: 1.5; }
.gl-cq-body .gl-cq-coord { align-self: flex-start; }
@container (min-width: 320px) {
  .gl-cq-inner {
    grid-template-columns: 180px 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "name name"
      "img  body";
  }
  .gl-cq-inner .gl-cq-img { min-height: 200px; }
  .gl-cq-inner .gl-cq-body { justify-content: center; }
}
.gl-cq-narrow { max-width: 260px; }
@media (max-width: 720px) {
  .gl-cq { grid-template-columns: 1fr; }
  .gl-cq-narrow { max-width: 100%; }
}
```

### 15. Diagonal Skew Grid

**Type:** Pure CSS
**Description:** Grid cells skewed with `transform: skewY()` while their content counter-skews to stay readable. The brutalist diagonal-cut layout, all done at the grid layer.

**HTML:**
```html
<div class="gl-sk">
  <div class="gl-sk-cell gl-sk-1">
    <div><strong>01</strong><em>skewY(-6deg)</em></div>
  </div>
  <div class="gl-sk-cell gl-sk-2">
    <div><strong>02</strong><em>skewY(-6deg)</em></div>
  </div>
  <div class="gl-sk-cell gl-sk-3">
    <div><strong>03</strong><em>skewY(-6deg)</em></div>
  </div>
  <div class="gl-sk-cell gl-sk-4">
    <div><strong>04</strong><em>skewY(-6deg)</em></div>
  </div>
  <div class="gl-sk-cell gl-sk-5">
    <div><strong>05</strong><em>skewY(-6deg)</em></div>
  </div>
  <div class="gl-sk-cell gl-sk-6">
    <div><strong>06</strong><em>skewY(-6deg)</em></div>
  </div>
</div>
```

**CSS:**
```css
.gl-sk {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 14px;
  width: 100%;
  min-height: 480px;
  padding: 30px 22px;
  background: #1a0a05;
  font-family: 'JetBrains Mono', monospace;
  color: #fff7ed;
  box-sizing: border-box;
  overflow: hidden;
}
.gl-sk-cell {
  transform: skewY(-6deg);
  background: linear-gradient(135deg, #ea580c, #c2410c);
  border: 2px solid #1a0a05;
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  min-height: 140px;
}
.gl-sk-cell > div {
  transform: skewY(6deg);
  text-align: center;
  display: flex; flex-direction: column; gap: 6px;
}
.gl-sk-cell strong { font-size: 36px; font-weight: 800; color: #1a0a05; }
.gl-sk-cell em { font-size: 10px; color: rgba(26,10,5,0.7); font-style: normal; }
.gl-sk-1 { background: linear-gradient(135deg, #ea580c, #f97316); }
.gl-sk-2 { background: linear-gradient(135deg, #f97316, #fb923c); }
.gl-sk-3 { background: linear-gradient(135deg, #c2410c, #ea580c); }
.gl-sk-4 { background: linear-gradient(135deg, #fb923c, #fed7aa); }
.gl-sk-4 strong { color: #1a0a05; }
.gl-sk-5 { background: linear-gradient(135deg, #9a3412, #c2410c); }
.gl-sk-5 strong, .gl-sk-5 em { color: #fff7ed; }
.gl-sk-6 { background: linear-gradient(135deg, #ea580c, #c2410c); }
@media (max-width: 720px) {
  .gl-sk { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, 1fr); }
}
```

### 16. Asymmetric Splash

**Type:** Pure CSS
**Description:** Asymmetric magazine splash — one massive hero block, one tall column, three small thumbnails. Built with explicit `grid-row` / `grid-column` spans so every region has its coordinates visible.

**HTML:**
```html
<div class="gl-as">
  <div class="gl-as-hero"><strong>Hero</strong><span class="gl-as-coord">1 / 1 / 3 / 4</span></div>
  <div class="gl-as-tall"><strong>Tall</strong><span class="gl-as-coord">1 / 4 / 4 / 5</span></div>
  <div class="gl-as-t1"><strong>Thumb 1</strong><span class="gl-as-coord">3 / 1 / 4 / 2</span></div>
  <div class="gl-as-t2"><strong>Thumb 2</strong><span class="gl-as-coord">3 / 2 / 4 / 3</span></div>
  <div class="gl-as-t3"><strong>Thumb 3</strong><span class="gl-as-coord">3 / 3 / 4 / 4</span></div>
</div>
```

**CSS:**
```css
.gl-as {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 12px;
  width: 100%;
  min-height: 480px;
  padding: 22px;
  background:
    radial-gradient(60% 80% at 80% 0%, rgba(236,72,153,0.16), transparent 60%),
    #1a0617;
  font-family: 'Inter', system-ui, sans-serif;
  color: #fce7f3;
  box-sizing: border-box;
}
.gl-as > div {
  border-radius: 14px;
  padding: 16px;
  display: flex; flex-direction: column;
  justify-content: space-between;
  gap: 6px;
}
.gl-as > div strong { font-size: 16px; font-weight: 700; color: #fff; }
.gl-as-coord {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px; letter-spacing: 0.04em;
  align-self: flex-start;
  padding: 3px 8px; border-radius: 999px;
}
.gl-as-hero { grid-area: 1 / 1 / 3 / 4; background: linear-gradient(135deg, #ec4899, #be185d); }
.gl-as-hero .gl-as-coord { background: rgba(26,6,23,0.3); color: #fce7f3; }
.gl-as-tall { grid-area: 1 / 4 / 4 / 5; background: linear-gradient(180deg, #be185d, #831843); }
.gl-as-tall .gl-as-coord { background: rgba(26,6,23,0.3); color: #fce7f3; }
.gl-as-t1 { grid-area: 3 / 1 / 4 / 2; background: rgba(236,72,153,0.14); border: 1px solid rgba(236,72,153,0.32); }
.gl-as-t1 .gl-as-coord, .gl-as-t2 .gl-as-coord, .gl-as-t3 .gl-as-coord { background: rgba(236,72,153,0.18); color: #f472b6; }
.gl-as-t2 { grid-area: 3 / 2 / 4 / 3; background: rgba(236,72,153,0.22); border: 1px solid rgba(236,72,153,0.4); }
.gl-as-t3 { grid-area: 3 / 3 / 4 / 4; background: rgba(236,72,153,0.32); border: 1px solid rgba(236,72,153,0.5); }
@media (max-width: 720px) {
  .gl-as {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
  }
  .gl-as-hero { grid-area: 1 / 1 / 2 / 3; min-height: 160px; }
  .gl-as-tall { grid-area: 2 / 1 / 3 / 3; min-height: 120px; }
  .gl-as-t1 { grid-area: 3 / 1 / 4 / 2; }
  .gl-as-t2 { grid-area: 3 / 2 / 4 / 3; }
  .gl-as-t3 { display: none; }
}
```

### 17. Mosaic Photo Wall

**Type:** Pure CSS
**Description:** Mosaic of mixed-size cells — a 4×4 base with hero / wide / tall / square shapes spanning multiple tracks. The "feature wall" pattern from photography sites and gallery landings.

**HTML:**
```html
<div class="gl-ms">
  <div class="gl-ms-1"><strong>Hero</strong><span class="gl-ms-coord">span 2 × 2</span></div>
  <div class="gl-ms-2"><strong>Wide</strong><span class="gl-ms-coord">span 2 × 1</span></div>
  <div class="gl-ms-3"><strong>Tall</strong><span class="gl-ms-coord">span 1 × 2</span></div>
  <div class="gl-ms-4"><strong>1</strong><span class="gl-ms-coord">1 × 1</span></div>
  <div class="gl-ms-5"><strong>2</strong><span class="gl-ms-coord">1 × 1</span></div>
  <div class="gl-ms-6"><strong>Banner</strong><span class="gl-ms-coord">span 4 × 1</span></div>
</div>
```

**CSS:**
```css
.gl-ms {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 100px;
  gap: 12px;
  width: 100%;
  min-height: 480px;
  padding: 22px;
  background: #1a0e0a;
  font-family: 'Inter', system-ui, sans-serif;
  color: #fff;
  box-sizing: border-box;
  align-content: start;
}
.gl-ms > div {
  border-radius: 14px;
  padding: 16px;
  display: flex; flex-direction: column;
  justify-content: space-between;
  gap: 6px;
}
.gl-ms > div strong { font-size: 16px; font-weight: 700; }
.gl-ms-coord {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.04em;
  align-self: flex-start;
  padding: 2px 8px; border-radius: 999px;
  background: rgba(0,0,0,0.25); color: #fff;
}
.gl-ms-1 { grid-column: span 2; grid-row: span 2; background: linear-gradient(135deg, #f97316, #dc2626); }
.gl-ms-2 { grid-column: span 2; background: linear-gradient(135deg, #fbbf24, #f97316); }
.gl-ms-3 { grid-row: span 2; background: linear-gradient(180deg, #ec4899, #be185d); }
.gl-ms-4 { background: linear-gradient(135deg, #f43f5e, #ec4899); }
.gl-ms-5 { background: linear-gradient(135deg, #d946ef, #a21caf); }
.gl-ms-6 { grid-column: span 4; background: linear-gradient(90deg, #c026d3, #ec4899, #f97316); }
```

### 18. Dense Packing

**Type:** Pure CSS
**Description:** Dense packing with `grid-auto-flow: dense` — items fill earlier holes when later items are smaller, reducing whitespace. The "Tetris" mode of CSS Grid.

**HTML:**
```html
<div class="gl-de">
  <div class="gl-de-c1"><strong>1</strong><em>span 2</em></div>
  <div class="gl-de-c2"><strong>2</strong><em>span 1</em></div>
  <div class="gl-de-c3"><strong>3</strong><em>span 3</em></div>
  <div class="gl-de-c4"><strong>4</strong><em>span 1</em></div>
  <div class="gl-de-c5"><strong>5</strong><em>span 2</em></div>
  <div class="gl-de-c6"><strong>6</strong><em>span 1</em></div>
  <div class="gl-de-c7"><strong>7</strong><em>span 1</em></div>
  <div class="gl-de-c8"><strong>8</strong><em>span 2</em></div>
  <div class="gl-de-c9"><strong>9</strong><em>span 1</em></div>
</div>
```

**CSS:**
```css
.gl-de {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-flow: dense;
  grid-auto-rows: 90px;
  gap: 10px;
  width: 100%;
  min-height: 480px;
  padding: 22px;
  background:
    radial-gradient(60% 80% at 50% 0%, rgba(132,204,22,0.14), transparent 60%),
    #0a1408;
  font-family: 'Inter', system-ui, sans-serif;
  color: #ecfccb;
  box-sizing: border-box;
  align-content: start;
}
.gl-de > div {
  background: linear-gradient(160deg, rgba(132,204,22,0.18), rgba(101,163,13,0.06));
  border: 1px solid rgba(132,204,22,0.32);
  border-radius: 10px;
  padding: 12px;
  display: flex; flex-direction: column;
  justify-content: space-between;
  gap: 4px;
}
.gl-de > div strong { font-size: 22px; font-weight: 800; color: #fff; letter-spacing: -0.02em; }
.gl-de > div em {
  font-style: normal;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; color: #84cc16;
  letter-spacing: 0.04em;
}
.gl-de-c1 { grid-column: span 2; }
.gl-de-c3 { grid-column: span 3; background: linear-gradient(135deg, #84cc16, #65a30d) !important; border: 0 !important; }
.gl-de-c3 em { color: rgba(255,255,255,0.7); }
.gl-de-c5 { grid-column: span 2; }
.gl-de-c8 { grid-column: span 2; background: linear-gradient(135deg, #a3e635, #84cc16) !important; border: 0 !important; color: #0a1408; }
.gl-de-c8 strong { color: #0a1408; }
.gl-de-c8 em { color: rgba(10,20,8,0.7); }
@media (max-width: 720px) {
  .gl-de { grid-template-columns: repeat(3, 1fr); }
  .gl-de-c3 { grid-column: span 3; }
  .gl-de-c1, .gl-de-c5, .gl-de-c8 { grid-column: span 2; }
}
```

### 19. Numbered Steps Track

**Type:** Pure CSS
**Description:** Horizontal stepper track — five circular nodes connected by a thin progress rail using grid columns and a `::before` pseudo-element. The onboarding / checkout step indicator.

**HTML:**
```html
<ol class="gl-st">
  <li class="gl-st-step gl-st-done">
    <span class="gl-st-num">1</span><strong>Sign up</strong><em>step 1 / 5</em>
  </li>
  <li class="gl-st-step gl-st-done">
    <span class="gl-st-num">2</span><strong>Verify email</strong><em>step 2 / 5</em>
  </li>
  <li class="gl-st-step gl-st-active">
    <span class="gl-st-num">3</span><strong>Pick plan</strong><em>step 3 / 5</em>
  </li>
  <li class="gl-st-step">
    <span class="gl-st-num">4</span><strong>Add billing</strong><em>step 4 / 5</em>
  </li>
  <li class="gl-st-step">
    <span class="gl-st-num">5</span><strong>Done</strong><em>step 5 / 5</em>
  </li>
</ol>
```

**CSS:**
```css
.gl-st {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  width: 100%;
  min-height: 480px;
  padding: 22px;
  background:
    radial-gradient(60% 60% at 50% 50%, rgba(163,148,77,0.14), transparent 60%),
    #1a1608;
  font-family: 'Inter', system-ui, sans-serif;
  color: #fef9c3;
  box-sizing: border-box;
  align-content: center;
  list-style: none;
  margin: 0;
  position: relative;
}
.gl-st-step {
  position: relative;
  display: flex; flex-direction: column;
  align-items: center; justify-content: flex-start;
  gap: 8px;
  text-align: center;
  padding: 14px 8px;
  z-index: 1;
}
.gl-st-step::before {
  content: ''; position: absolute;
  top: 38px; left: 0; right: 0;
  height: 4px; background: rgba(163,148,77,0.2);
  z-index: 0;
}
.gl-st-step:first-child::before { left: 50%; }
.gl-st-step:last-child::before { right: 50%; }
.gl-st-num {
  position: relative;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: #2a2410;
  border: 2px solid rgba(163,148,77,0.3);
  display: flex; align-items: center; justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700; font-size: 16px;
  color: #a3944d;
  z-index: 2;
}
.gl-st-done .gl-st-num { background: linear-gradient(135deg, #a3944d, #ca8a04); border-color: #ca8a04; color: #1a1608; }
.gl-st-done::before { background: linear-gradient(90deg, #a3944d, #ca8a04); }
.gl-st-active .gl-st-num {
  background: linear-gradient(135deg, #facc15, #eab308);
  border-color: #facc15; color: #1a1608;
  box-shadow: 0 0 0 6px rgba(250,204,21,0.18);
}
.gl-st-step strong { font-size: 13px; font-weight: 700; color: #fef9c3; }
.gl-st-active strong, .gl-st-done strong { color: #facc15; }
.gl-st-step em {
  font-style: normal;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; color: #a3944d;
  letter-spacing: 0.04em;
}
@media (max-width: 720px) {
  .gl-st { grid-template-columns: 1fr; gap: 14px; }
  .gl-st-step::before { display: none; }
}
```

### 20. Mac App Sidebar

**Type:** Pure CSS
**Description:** Two-pane macOS-style app — narrow source list on the left, content pane on the right. The classic Finder / Mail layout, built with two grid columns and named areas.

**HTML:**
```html
<div class="gl-mac">
  <header class="gl-mac-tb">
    <strong>Toolbar</strong><span class="gl-mac-coord">grid-area: tb</span>
  </header>
  <nav class="gl-mac-side">
    <strong>Source list</strong>
    <span class="gl-mac-coord">grid-area: side</span>
    <ul>
      <li>★ Favorites</li>
      <li>📨 Inbox</li>
      <li>🚀 Sent</li>
      <li>📁 Archive</li>
    </ul>
  </nav>
  <main class="gl-mac-main">
    <strong>Content pane</strong>
    <span class="gl-mac-coord">grid-area: main</span>
    <p>The right-hand pane scrolls independently. The sidebar source list stays sticky.</p>
  </main>
</div>
```

**CSS:**
```css
.gl-mac {
  display: grid;
  grid-template-columns: 220px 1fr;
  grid-template-rows: 48px 1fr;
  grid-template-areas:
    "tb tb"
    "side main";
  gap: 0;
  width: 100%;
  min-height: 480px;
  background: #1c1c1e;
  font-family: -apple-system, 'SF Pro Text', 'Inter', system-ui, sans-serif;
  color: #f5f5f7;
  border: 1px solid #2a2a2e;
  border-radius: 12px;
  overflow: hidden;
  box-sizing: border-box;
}
.gl-mac-tb {
  grid-area: tb;
  background: linear-gradient(180deg, #2a2a2e, #1c1c1e);
  border-bottom: 1px solid #0a0a0a;
  padding: 0 16px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
}
.gl-mac-tb strong { font-size: 13px; font-weight: 600; color: #f5f5f7; }
.gl-mac-coord {
  font-family: 'SF Mono', 'JetBrains Mono', monospace;
  font-size: 10.5px; letter-spacing: 0.04em;
  color: #007aff;
  background: rgba(0,122,255,0.12);
  padding: 2px 8px; border-radius: 999px;
}
.gl-mac-side {
  grid-area: side;
  background: #18181b;
  border-right: 1px solid #2a2a2e;
  padding: 14px;
  display: flex; flex-direction: column;
  gap: 8px;
}
.gl-mac-side strong { font-size: 11px; font-weight: 600; color: #98989d; letter-spacing: 0.06em; text-transform: uppercase; }
.gl-mac-side .gl-mac-coord { align-self: flex-start; }
.gl-mac-side ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.gl-mac-side li {
  padding: 6px 10px; border-radius: 6px;
  font-size: 13px; color: #f5f5f7;
  cursor: default;
}
.gl-mac-side li:nth-child(2) { background: linear-gradient(90deg, #007aff, #0a84ff); }
.gl-mac-main {
  grid-area: main;
  background: #1c1c1e;
  padding: 18px;
  display: flex; flex-direction: column;
  gap: 8px;
}
.gl-mac-main strong { font-size: 15px; font-weight: 700; color: #f5f5f7; }
.gl-mac-main p { margin: 0; font-size: 13px; color: #98989d; line-height: 1.55; max-width: 480px; }
.gl-mac-main .gl-mac-coord { align-self: flex-start; }
@media (max-width: 720px) {
  .gl-mac { grid-template-columns: 1fr; grid-template-rows: 48px auto 1fr; grid-template-areas: "tb" "side" "main"; }
  .gl-mac-side { border-right: 0; border-bottom: 1px solid #2a2a2e; }
}
```

### 21. Scroll-Snap Slider

**Type:** Pure CSS
**Description:** Horizontal slider with `scroll-snap-type: x mandatory` so each pane locks into place after a swipe. Pure CSS, native scroll, no JS — the gallery / carousel pattern done right.

**HTML:**
```html
<div class="gl-ss">
  <div class="gl-ss-track">
    <article class="gl-ss-pane gl-ss-1">
      <strong>Slide 01</strong><span class="gl-ss-coord">scroll-snap-align: start</span>
    </article>
    <article class="gl-ss-pane gl-ss-2">
      <strong>Slide 02</strong><span class="gl-ss-coord">scroll-snap-align: start</span>
    </article>
    <article class="gl-ss-pane gl-ss-3">
      <strong>Slide 03</strong><span class="gl-ss-coord">scroll-snap-align: start</span>
    </article>
    <article class="gl-ss-pane gl-ss-4">
      <strong>Slide 04</strong><span class="gl-ss-coord">scroll-snap-align: start</span>
    </article>
    <article class="gl-ss-pane gl-ss-5">
      <strong>Slide 05</strong><span class="gl-ss-coord">scroll-snap-align: start</span>
    </article>
  </div>
  <p class="gl-ss-hint">← swipe / scroll horizontally →</p>
</div>
```

**CSS:**
```css
.gl-ss {
  display: flex; flex-direction: column;
  gap: 14px;
  width: 100%;
  min-height: 480px;
  padding: 22px;
  background:
    radial-gradient(80% 60% at 50% 100%, rgba(251,146,60,0.16), transparent 60%),
    #1a0e06;
  font-family: 'Inter', system-ui, sans-serif;
  color: #fff7ed;
  box-sizing: border-box;
  justify-content: center;
}
.gl-ss-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(70%, 1fr);
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 14px;
}
.gl-ss-pane {
  scroll-snap-align: start;
  border-radius: 16px;
  padding: 24px 22px;
  min-height: 280px;
  display: flex; flex-direction: column;
  justify-content: space-between;
  gap: 10px;
}
.gl-ss-pane strong { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; color: #fff; }
.gl-ss-coord {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.04em;
  color: #1a0e06;
  background: rgba(255,247,237,0.85);
  padding: 4px 10px; border-radius: 999px;
  align-self: flex-start;
}
.gl-ss-1 { background: linear-gradient(135deg, #fb923c, #f97316); }
.gl-ss-2 { background: linear-gradient(135deg, #f97316, #ea580c); }
.gl-ss-3 { background: linear-gradient(135deg, #ea580c, #c2410c); }
.gl-ss-4 { background: linear-gradient(135deg, #fbbf24, #fb923c); }
.gl-ss-5 { background: linear-gradient(135deg, #c2410c, #9a3412); }
.gl-ss-hint {
  margin: 0; text-align: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.1em;
  color: #fb923c;
}
.gl-ss-track::-webkit-scrollbar { height: 6px; }
.gl-ss-track::-webkit-scrollbar-track { background: rgba(251,146,60,0.1); border-radius: 999px; }
.gl-ss-track::-webkit-scrollbar-thumb { background: rgba(251,146,60,0.4); border-radius: 999px; }
```

### 22. Aurora Map

**Type:** Pure CSS
**Description:** A landing-page region map where each block is sized by its importance and tinted with an aurora gradient. Combines `grid-template-areas` with conic and radial backgrounds for a dreamy, layered surface.

**HTML:**
```html
<div class="gl-au">
  <div class="gl-au-blobs" aria-hidden="true"><span></span><span></span><span></span></div>
  <div class="gl-au-hero">
    <strong>Hero</strong><span class="gl-au-coord">grid-area: hero</span>
  </div>
  <div class="gl-au-feat">
    <strong>Feature</strong><span class="gl-au-coord">grid-area: feat</span>
  </div>
  <div class="gl-au-stat">
    <strong>Stat</strong><span class="gl-au-coord">grid-area: stat</span>
  </div>
  <div class="gl-au-side">
    <strong>Sidebar</strong><span class="gl-au-coord">grid-area: side</span>
  </div>
  <div class="gl-au-cta"><strong>CTA</strong><span class="gl-au-coord">grid-area: cta</span></div>
</div>
```

**CSS:**
```css
.gl-au {
  position: relative;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 200px 1fr 80px;
  grid-template-areas:
    "hero hero side"
    "feat stat side"
    "cta  cta  cta";
  gap: 14px;
  width: 100%;
  min-height: 480px;
  padding: 18px;
  background:
    radial-gradient(circle at 10% 0%, #0ea5e9 0%, transparent 45%),
    radial-gradient(circle at 95% 25%, #a855f7 0%, transparent 50%),
    radial-gradient(circle at 50% 110%, #06b6d4 0%, transparent 50%),
    radial-gradient(circle at 75% 90%, #ec4899 0%, transparent 45%),
    #050a1a;
  font-family: 'Inter', system-ui, sans-serif;
  color: #fff;
  box-sizing: border-box;
  overflow: hidden;
  contain: layout paint;
}
.gl-au-blobs { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.gl-au-blobs span {
  position: absolute; border-radius: 50%;
  filter: blur(50px);
  animation: gl-au-drift 22s ease-in-out infinite alternate;
}
.gl-au-blobs span:nth-child(1) { top: 10%; left: 15%; width: 320px; height: 320px; background: radial-gradient(circle, #38bdf8 0%, transparent 70%); opacity: 0.7; }
.gl-au-blobs span:nth-child(2) { top: 30%; right: 15%; width: 320px; height: 320px; background: radial-gradient(circle, #c084fc 0%, transparent 70%); animation-delay: -6s; opacity: 0.7; }
.gl-au-blobs span:nth-child(3) { bottom: 5%; left: 40%; width: 360px; height: 360px; background: radial-gradient(circle, #22d3ee 0%, transparent 70%); animation-delay: -12s; opacity: 0.7; }
@keyframes gl-au-drift {
  0% { transform: translate(0,0) scale(1); }
  50% { transform: translate(40px,-30px) scale(1.08); }
  100% { transform: translate(-40px,40px) scale(0.94); }
}
.gl-au > div {
  position: relative; z-index: 1;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 14px;
  padding: 16px;
  display: flex; flex-direction: column;
  justify-content: space-between;
  gap: 6px;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset;
}
.gl-au > div strong { font-size: 16px; font-weight: 700; color: #fff; }
.gl-au-coord {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.04em;
  align-self: flex-start;
  padding: 3px 8px; border-radius: 999px;
  background: rgba(56,189,248,0.18); color: #93c5fd;
}
.gl-au-hero { grid-area: hero; background: linear-gradient(135deg, rgba(56,189,248,0.32), rgba(129,140,248,0.18)); }
.gl-au-feat { grid-area: feat; }
.gl-au-stat { grid-area: stat; background: linear-gradient(160deg, rgba(34,211,238,0.28), rgba(34,211,238,0.06)); }
.gl-au-side { grid-area: side; background: linear-gradient(180deg, rgba(129,140,248,0.28), rgba(129,140,248,0.06)); }
.gl-au-cta  { grid-area: cta; background: linear-gradient(90deg, #38bdf8, #818cf8); }
.gl-au-cta strong { color: #050a1a; }
.gl-au-cta .gl-au-coord { background: rgba(5,10,26,0.25); color: #050a1a; }
@media (max-width: 720px) {
  .gl-au {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto auto;
    grid-template-areas: "hero" "feat" "stat" "side" "cta";
  }
}
@media (prefers-reduced-motion: reduce) {
  .gl-au-blobs span { animation: none; }
}
```

### 23. Logo Wall

**Type:** Pure CSS
**Description:** A trusted-by logo wall — even-spaced grid of monochrome logos using `repeat(auto-fit, minmax(120px, 1fr))`. Hover lifts a single tile to its colour version.

**HTML:**
```html
<div class="gl-lw">
  <header class="gl-lw-head">
    <strong>Trusted by 14,000+ teams</strong>
    <span class="gl-lw-coord">repeat(auto-fit, minmax(140px, 1fr))</span>
  </header>
  <div class="gl-lw-grid">
    <div class="gl-lw-cell">◇ NORTHWIND</div>
    <div class="gl-lw-cell">▲ APEX.IO</div>
    <div class="gl-lw-cell">★ PULSE</div>
    <div class="gl-lw-cell">⬣ HEXLAB</div>
    <div class="gl-lw-cell">◯ ORBITA</div>
    <div class="gl-lw-cell">◤ FLINT</div>
    <div class="gl-lw-cell">⬢ MERIDIAN</div>
    <div class="gl-lw-cell">◇ NIMBUS</div>
    <div class="gl-lw-cell">▼ DRIFT</div>
    <div class="gl-lw-cell">◎ ATLAS</div>
  </div>
</div>
```

**CSS:**
```css
.gl-lw {
  display: flex; flex-direction: column;
  gap: 16px;
  width: 100%;
  min-height: 480px;
  padding: 22px;
  background:
    radial-gradient(60% 80% at 50% 0%, rgba(148,163,184,0.12), transparent 60%),
    #0c1220;
  font-family: 'Inter', system-ui, sans-serif;
  color: #e2e8f0;
  box-sizing: border-box;
  justify-content: center;
}
.gl-lw-head {
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.gl-lw-head strong { font-size: 16px; font-weight: 700; color: #fff; }
.gl-lw-coord {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.04em;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(148,163,184,0.14); color: #94a3b8;
}
.gl-lw-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}
.gl-lw-cell {
  background: rgba(148,163,184,0.06);
  border: 1px solid rgba(148,163,184,0.18);
  border-radius: 10px;
  padding: 22px 14px;
  text-align: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px; font-weight: 700; letter-spacing: 0.12em;
  color: #94a3b8;
  transition: color 0.18s, background 0.18s, border-color 0.18s;
}
.gl-lw-cell:hover {
  color: #38bdf8; border-color: #38bdf8;
  background: rgba(56,189,248,0.08);
}
@media (prefers-reduced-motion: reduce) {
  .gl-lw-cell { transition: none; }
}
```

### 24. Periodic Table

**Type:** Pure CSS
**Description:** A small periodic-table-style grid where elements are placed by explicit `grid-column` + `grid-row` coordinates and colored by category — the most explicit-coordinates demo in the set.

**HTML:**
```html
<div class="gl-pt">
  <div class="gl-pt-cell gl-pt-alkmet" style="grid-column: 1; grid-row: 1">
    <strong>H</strong><em>1 / 1</em>
  </div>
  <div class="gl-pt-cell gl-pt-noble" style="grid-column: 8; grid-row: 1">
    <strong>He</strong><em>8 / 1</em>
  </div>
  <div class="gl-pt-cell gl-pt-alkmet" style="grid-column: 1; grid-row: 2">
    <strong>Li</strong><em>1 / 2</em>
  </div>
  <div class="gl-pt-cell gl-pt-alkear" style="grid-column: 2; grid-row: 2">
    <strong>Be</strong><em>2 / 2</em>
  </div>
  <div class="gl-pt-cell gl-pt-non" style="grid-column: 5; grid-row: 2">
    <strong>C</strong><em>5 / 2</em>
  </div>
  <div class="gl-pt-cell gl-pt-non" style="grid-column: 6; grid-row: 2">
    <strong>N</strong><em>6 / 2</em>
  </div>
  <div class="gl-pt-cell gl-pt-non" style="grid-column: 7; grid-row: 2">
    <strong>O</strong><em>7 / 2</em>
  </div>
  <div class="gl-pt-cell gl-pt-noble" style="grid-column: 8; grid-row: 2">
    <strong>Ne</strong><em>8 / 2</em>
  </div>
  <div class="gl-pt-cell gl-pt-alkmet" style="grid-column: 1; grid-row: 3">
    <strong>Na</strong><em>1 / 3</em>
  </div>
  <div class="gl-pt-cell gl-pt-alkear" style="grid-column: 2; grid-row: 3">
    <strong>Mg</strong><em>2 / 3</em>
  </div>
  <div class="gl-pt-cell gl-pt-met" style="grid-column: 3; grid-row: 3">
    <strong>Al</strong><em>3 / 3</em>
  </div>
  <div class="gl-pt-cell gl-pt-mtl" style="grid-column: 4; grid-row: 3">
    <strong>Si</strong><em>4 / 3</em>
  </div>
  <div class="gl-pt-cell gl-pt-non" style="grid-column: 5; grid-row: 3">
    <strong>P</strong><em>5 / 3</em>
  </div>
  <div class="gl-pt-cell gl-pt-non" style="grid-column: 6; grid-row: 3">
    <strong>S</strong><em>6 / 3</em>
  </div>
  <div class="gl-pt-cell gl-pt-hal" style="grid-column: 7; grid-row: 3">
    <strong>Cl</strong><em>7 / 3</em>
  </div>
  <div class="gl-pt-cell gl-pt-noble" style="grid-column: 8; grid-row: 3">
    <strong>Ar</strong><em>8 / 3</em>
  </div>
</div>
```

**CSS:**
```css
.gl-pt {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 8px;
  width: 100%;
  min-height: 480px;
  padding: 22px;
  background: #0a0a14;
  font-family: 'Inter', system-ui, sans-serif;
  color: #fff;
  box-sizing: border-box;
}
.gl-pt-cell {
  border-radius: 8px;
  padding: 10px 6px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 4px;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
  min-height: 64px;
}
.gl-pt-cell strong { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.gl-pt-cell em {
  font-style: normal;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  opacity: 0.7;
  letter-spacing: 0.04em;
}
.gl-pt-alkmet { background: linear-gradient(135deg, #f87171, #ef4444); }
.gl-pt-alkear { background: linear-gradient(135deg, #fbbf24, #f59e0b); color: #1a1a14; }
.gl-pt-met    { background: linear-gradient(135deg, #94a3b8, #64748b); }
.gl-pt-mtl    { background: linear-gradient(135deg, #34d399, #10b981); }
.gl-pt-non    { background: linear-gradient(135deg, #38bdf8, #0ea5e9); }
.gl-pt-hal    { background: linear-gradient(135deg, #c084fc, #a855f7); }
.gl-pt-noble  { background: linear-gradient(135deg, #f472b6, #ec4899); }
@media (max-width: 720px) {
  .gl-pt { grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(6, 1fr); }
  .gl-pt-cell strong { font-size: 18px; }
}
```

---
## 20 CSS Hamburger Menus

URL: https://codefronts.com/navigation/css-hamburger-menus/
Description: 20 hand-coded CSS hamburger menus with live demos — pure-CSS checkbox-hack toggle (no JavaScript), morphing icon animations, full-screen overlay, slide-out sidebar with push-canvas, responsive navbar, floating FAB radial menu, Tailwind CDN build, Bootstrap 5 navbar, WCAG-accessible aria pattern, grid-template-rows accordion, blur overlay, mobile bottom nav, multi-level nested dropdown, flexbox right-aligned, circular ripple expand, sticky shrinking header, neumorphic toggle, brutalist border, and a 3D rotating canvas push. 16 with a small vanilla JS snippet, 4 truly pure CSS. prefers-reduced-motion respected, scoped class names, WCAG 2.2 aria-expanded + aria-controls patterns demonstrated, MIT-licensed.
Demo count: 20

### 01. Pure CSS Hamburger Menu (No JavaScript)

**Type:** Pure CSS
**Description:** Zero-JS checkbox state machine driving a circular clip-path reveal. Bricolage Grotesque display type over an ambient gradient grid with grain overlay, staggered link reveals, and a bars→X morph — all powered by CSS sibling selectors.

**HTML:**
```html
<div class="chm-01">
  <div class="chm-01__scene">
    <div class="chm-01__field"></div>
    <div class="chm-01__grid"></div>
    <div class="chm-01__grain"></div>

    <input type="checkbox" id="chm-01-toggle" class="chm-01__toggle">
    <label class="chm-01__trigger" for="chm-01-toggle" aria-label="Toggle menu">
      <span class="chm-01__bars"><span></span><span></span><span></span></span>
    </label>

    <nav class="chm-01__panel">
      <div class="chm-01__eyebrow">Index / Navigation</div>
      <ul class="chm-01__menu">
        <li><a href="#"><span class="chm-01__idx">01</span>Atelier</a></li>
        <li><a href="#"><span class="chm-01__idx">02</span>Manifesto</a></li>
        <li><a href="#"><span class="chm-01__idx">03</span>Signals</a></li>
        <li><a href="#"><span class="chm-01__idx">04</span>Archive</a></li>
        <li><a href="#"><span class="chm-01__idx">05</span>Contact</a></li>
      </ul>
      <div class="chm-01__foot">
        <a href="#">Instagram</a><a href="#">Are.na</a><a href="#">hello@studio.zero</a>
      </div>
    </nav>

    <div class="chm-01__stage">
      <div class="chm-01__hero">
        <h1>ZERO<br><em>JAVASCRIPT</em></h1>
        <p>Checkbox state machine · CSS sibling logic</p>
      </div>
    </div>
    <div class="chm-01__zero">PURE_CSS // 2030</div>
  </div>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,300..800&family=Space+Mono:wght@400;700&display=swap');

.chm-01, .chm-01 *, .chm-01 *::before, .chm-01 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.chm-01 {
  --ink:#0a0a0f;
  --paper:#f4f1ea;
  --accent:#ff3d2e;
  --accent2:#00e0c6;
  --glass:rgba(244,241,234,0.04);
  min-height: 460px;display:grid;place-items:stretch;
  font-family:'Bricolage Grotesque',sans-serif;
  background:var(--ink);
  color:var(--paper);
  position:relative;
}
.chm-01__scene{position:relative;width:100%;min-height:460px;height:100%;overflow:hidden}
.chm-01__field{position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(circle at 18% 22%, rgba(255,61,46,0.18), transparent 42%),
    radial-gradient(circle at 82% 78%, rgba(0,224,198,0.16), transparent 45%),
    var(--ink);
}
.chm-01__grid{position:absolute;inset:0;z-index:0;opacity:.5;
  background-image:
    linear-gradient(rgba(244,241,234,0.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(244,241,234,0.04) 1px,transparent 1px);
  background-size:54px 54px;
  -webkit-mask-image:radial-gradient(circle at 50% 50%,black,transparent 80%);
  mask-image:radial-gradient(circle at 50% 50%,black,transparent 80%);
}
.chm-01__grain{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.06;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
.chm-01__stage{position:relative;z-index:2;min-height:460px;display:grid;place-items:center}
.chm-01__toggle{position:absolute;opacity:0;pointer-events:none}
.chm-01__trigger{
  position:absolute;top:24px;right:24px;z-index:40;
  width:64px;height:64px;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;
  background:var(--glass);
  border:1px solid rgba(244,241,234,0.12);
  backdrop-filter:blur(14px);
  transition:transform .5s cubic-bezier(.16,1,.3,1),border-color .4s;
}
.chm-01__trigger:hover{transform:scale(1.06);border-color:var(--accent)}
.chm-01__bars{width:26px;height:16px;position:relative;display:block}
.chm-01__bars span{position:absolute;left:0;height:2px;width:100%;background:var(--paper);border-radius:2px;
  transition:transform .5s cubic-bezier(.7,0,.2,1),width .5s,opacity .35s,background .4s}
.chm-01__bars span:nth-child(1){top:0}
.chm-01__bars span:nth-child(2){top:7px;width:70%}
.chm-01__bars span:nth-child(3){top:14px}
.chm-01__toggle:checked ~ .chm-01__trigger .chm-01__bars span:nth-child(1){transform:translateY(7px) rotate(45deg);background:var(--accent)}
.chm-01__toggle:checked ~ .chm-01__trigger .chm-01__bars span:nth-child(2){opacity:0;width:0}
.chm-01__toggle:checked ~ .chm-01__trigger .chm-01__bars span:nth-child(3){transform:translateY(-7px) rotate(-45deg);background:var(--accent)}
.chm-01__toggle:checked ~ .chm-01__trigger{border-color:var(--accent)}
.chm-01__panel{
  position:absolute;inset:0;z-index:30;
  display:flex;flex-direction:column;justify-content:center;
  padding:0 9%;
  background:rgba(10,10,15,0.82);
  backdrop-filter:blur(26px) saturate(140%);
  -webkit-clip-path:circle(0% at calc(100% - 56px) 56px);
  clip-path:circle(0% at calc(100% - 56px) 56px);
  transition:clip-path .8s cubic-bezier(.76,0,.24,1),-webkit-clip-path .8s cubic-bezier(.76,0,.24,1);
  pointer-events:none;
}
.chm-01__toggle:checked ~ .chm-01__panel{
  -webkit-clip-path:circle(160% at calc(100% - 56px) 56px);
  clip-path:circle(160% at calc(100% - 56px) 56px);
  pointer-events:auto;
}
.chm-01__eyebrow{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.5em;text-transform:uppercase;color:var(--accent2);margin-bottom:24px;opacity:0;transition:opacity .4s}
.chm-01__toggle:checked ~ .chm-01__panel .chm-01__eyebrow{opacity:1;transition-delay:.45s}
.chm-01__menu{list-style:none}
.chm-01__menu li{overflow:hidden}
.chm-01__menu a{
  font-size:clamp(1.4rem,4.5vw,2.8rem);font-weight:300;line-height:1.05;
  color:var(--paper);text-decoration:none;display:inline-block;
  transform:translateY(120%);transition:transform .7s cubic-bezier(.16,1,.3,1),color .3s;
}
.chm-01__menu a .chm-01__idx{font-family:'Space Mono',monospace;font-size:.7rem;vertical-align:super;color:var(--accent);margin-right:.6em;font-weight:700}
.chm-01__menu a:hover{color:var(--accent)}
.chm-01__toggle:checked ~ .chm-01__panel .chm-01__menu li:nth-child(1) a{transform:translateY(0);transition-delay:.42s}
.chm-01__toggle:checked ~ .chm-01__panel .chm-01__menu li:nth-child(2) a{transform:translateY(0);transition-delay:.50s}
.chm-01__toggle:checked ~ .chm-01__panel .chm-01__menu li:nth-child(3) a{transform:translateY(0);transition-delay:.58s}
.chm-01__toggle:checked ~ .chm-01__panel .chm-01__menu li:nth-child(4) a{transform:translateY(0);transition-delay:.66s}
.chm-01__toggle:checked ~ .chm-01__panel .chm-01__menu li:nth-child(5) a{transform:translateY(0);transition-delay:.74s}
.chm-01__foot{margin-top:30px;font-family:'Space Mono',monospace;font-size:11px;color:rgba(244,241,234,0.5);display:flex;gap:18px;flex-wrap:wrap;opacity:0;transition:opacity .4s}
.chm-01__toggle:checked ~ .chm-01__panel .chm-01__foot{opacity:1;transition-delay:.85s}
.chm-01__foot a{color:inherit;text-decoration:none}
.chm-01__foot a:hover{color:var(--accent2)}
.chm-01__hero{text-align:center;padding:0 24px}
.chm-01__hero h1{font-size:clamp(2.2rem,8vw,5rem);font-weight:800;letter-spacing:-.04em;line-height:.9}
.chm-01__hero h1 em{font-style:normal;color:var(--accent);font-weight:300}
.chm-01__hero p{font-family:'Space Mono',monospace;margin-top:18px;letter-spacing:.3em;text-transform:uppercase;font-size:10px;color:rgba(244,241,234,0.55)}
.chm-01__zero{font-family:'Space Mono',monospace;position:absolute;bottom:18px;left:24px;z-index:5;font-size:10px;letter-spacing:.3em;color:rgba(244,241,234,0.4)}

@media (prefers-reduced-motion: reduce){
  .chm-01__trigger,.chm-01__bars span,.chm-01__panel,.chm-01__eyebrow,.chm-01__menu a,.chm-01__foot{transition:none !important}
}
```

### 02. Hamburger Menu with Morphing Icon Animations

**Type:** CSS + JS
**Description:** An icon gallery showcasing three distinct morph personalities (bars→X, fold, pinch) with different spring/easing curves. Animated aurora backdrop, glassmorphic triggers, and a sliding drawer — tap any icon to feel its unique transition.

**HTML:**
```html
<div class="chm-02">
  <div class="chm-02__scene">
    <div class="chm-02__aurora"></div>
    <div class="chm-02__veil"></div>

    <div class="chm-02__dock">
      <div class="chm-02__morph" id="chm-02-ma"><svg viewBox="0 0 30 30"><line class="chm-02__a1" x1="3" y1="8" x2="27" y2="8"/><line class="chm-02__a2" x1="3" y1="15" x2="27" y2="15"/><line class="chm-02__a3" x1="3" y1="22" x2="27" y2="22"/></svg><span class="chm-02__tag">BARS → X</span></div>
      <div class="chm-02__morph" id="chm-02-mb"><svg viewBox="0 0 30 30"><line class="chm-02__b1" x1="3" y1="8" x2="27" y2="8"/><line class="chm-02__b2" x1="3" y1="22" x2="27" y2="22"/><line class="chm-02__b3" x1="3" y1="15" x2="27" y2="15"/></svg><span class="chm-02__tag">FOLD</span></div>
      <div class="chm-02__morph" id="chm-02-mc"><svg viewBox="0 0 30 30"><line class="chm-02__c1" x1="3" y1="15" x2="27" y2="15"/><line class="chm-02__c2" x1="3" y1="15" x2="27" y2="15" transform="translate(0,-7)"/><line class="chm-02__c3" x1="3" y1="15" x2="27" y2="15"/></svg><span class="chm-02__tag">PINCH</span></div>
    </div>

    <div class="chm-02__scrim" id="chm-02-scrim"></div>
    <aside class="chm-02__drawer" id="chm-02-drawer">
      <div class="chm-02__lbl">// MICRO-INTERACTIONS</div>
      <nav>
        <a href="#"><span>01</span>Overview</a>
        <a href="#"><span>02</span>Motion Lab</a>
        <a href="#"><span>03</span>Easing Curves</a>
        <a href="#"><span>04</span>Showcase</a>
      </nav>
    </aside>

    <div class="chm-02__stage">
      <div class="chm-02__hero">
        <h1>MORPH<br>STATE</h1>
        <p>Tap any icon · three easing personalities</p>
      </div>
    </div>
    <div class="chm-02__note">ANIMATED_ICONS // 2030</div>
  </div>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400..800&family=JetBrains+Mono:wght@400;600&display=swap');

.chm-02, .chm-02 *, .chm-02 *::before, .chm-02 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.chm-02{
  --bg:#070b14;--bg2:#0d1424;--foam:#e8f4ff;--plasma:#7afcff;--magenta:#ff4ecd;--gold:#ffd166;
  min-height:460px;display:grid;place-items:stretch;
  font-family:'Syne',sans-serif;background:var(--bg);color:var(--foam);
  position:relative;
}
.chm-02__scene{position:relative;width:100%;min-height:460px;height:100%;overflow:hidden}
.chm-02__aurora{position:absolute;inset:-20%;z-index:0;filter:blur(70px);opacity:.55;
  background:
   radial-gradient(40% 40% at 25% 30%,var(--plasma),transparent 70%),
   radial-gradient(45% 45% at 75% 65%,var(--magenta),transparent 70%),
   radial-gradient(35% 35% at 55% 20%,var(--gold),transparent 70%);
  animation:chm-02-drift 16s ease-in-out infinite alternate;}
@keyframes chm-02-drift{to{transform:translate(4%,-4%) scale(1.12) rotate(8deg)}}
.chm-02__veil{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(7,11,20,.4),rgba(7,11,20,.85))}
.chm-02__stage{position:relative;z-index:2;min-height:460px;display:grid;place-items:center;text-align:center;padding:24px}
.chm-02__hero h1{font-size:clamp(2rem,7vw,5rem);font-weight:800;letter-spacing:-.03em;line-height:.92;
  background:linear-gradient(120deg,var(--foam),var(--plasma) 60%,var(--magenta));-webkit-background-clip:text;background-clip:text;color:transparent}
.chm-02__hero p{font-family:'JetBrains Mono',monospace;margin-top:18px;font-size:11px;letter-spacing:.35em;text-transform:uppercase;color:rgba(232,244,255,.55)}
.chm-02__dock{position:absolute;top:24px;right:24px;z-index:50;display:flex;gap:10px}
.chm-02__morph{
  width:54px;height:54px;border-radius:16px;cursor:pointer;
  background:rgba(232,244,255,0.05);
  border:1px solid rgba(232,244,255,0.12);
  backdrop-filter:blur(12px);
  display:grid;place-items:center;position:relative;
  transition:transform .4s cubic-bezier(.34,1.56,.64,1),border-color .3s,background .3s;
}
.chm-02__morph:hover{transform:translateY(-3px);border-color:var(--plasma)}
.chm-02__morph.is-active{border-color:var(--magenta);background:rgba(255,78,205,0.08)}
.chm-02__morph svg{width:26px;height:26px;overflow:visible}
.chm-02__morph line, .chm-02__morph path{stroke:var(--foam);stroke-width:2.4;stroke-linecap:round;
  transition:all .55s cubic-bezier(.68,-.4,.27,1.4);
  /* transform-box: fill-box anchors transform-origin to the SHAPE's own
     bounding box. Without it, transform-origin:center on an SVG <line>
     resolves to the SVG viewport center (15,15) — which means lines at
     y=8 and y=22 rotate around (15,15) instead of their own centers,
     producing a scattered look instead of a clean bars→X morph. With
     transform-box:fill-box, each line rotates around its own center,
     and the translateY adjustments correctly carry it to the X-formation. */
  transform-box: fill-box; transform-origin: center;}
#chm-02-ma.is-active .chm-02__a1{transform:translateY(7px) rotate(45deg)}
#chm-02-ma.is-active .chm-02__a2{opacity:0;transform:scaleX(0)}
#chm-02-ma.is-active .chm-02__a3{transform:translateY(-7px) rotate(-45deg)}
/* FOLD morph: top bar tilts down + bottom bar tilts up to meet at the
   middle bar, forming a "<" / arrow / fold-back shape. With
   transform-box:fill-box each line rotates around its own center, and
   the translateY moves the rotated line vertically toward y=15. */
#chm-02-mb.is-active .chm-02__b1{transform:translateY(7px) rotate(-30deg) scaleX(.7)}
#chm-02-mb.is-active .chm-02__b2{transform:translateY(-7px) rotate(30deg) scaleX(.7)}
#chm-02-mb.is-active .chm-02__b3{transform:scaleX(.5)}
#chm-02-mc .chm-02__c1,#chm-02-mc .chm-02__c2,#chm-02-mc .chm-02__c3{stroke-dasharray:24;}
#chm-02-mc.is-active .chm-02__c1{transform:rotate(45deg)}
#chm-02-mc.is-active .chm-02__c3{transform:rotate(-45deg)}
#chm-02-mc.is-active .chm-02__c2{opacity:0}
.chm-02__tag{font-family:'JetBrains Mono',monospace;position:absolute;bottom:-18px;left:50%;transform:translateX(-50%);font-size:8px;letter-spacing:.2em;color:rgba(232,244,255,.4);white-space:nowrap}
.chm-02__drawer{position:absolute;top:0;right:0;height:100%;width:min(340px,86%);z-index:40;
  background:linear-gradient(160deg,rgba(13,20,36,.9),rgba(7,11,20,.96));
  backdrop-filter:blur(28px);border-left:1px solid rgba(122,252,255,0.18);
  transform:translateX(110%);transition:transform .7s cubic-bezier(.16,1,.3,1);
  padding:96px 32px 32px;display:flex;flex-direction:column}
.chm-02__drawer.is-open{transform:translateX(0)}
.chm-02__lbl{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.4em;color:var(--plasma);margin-bottom:24px}
.chm-02__drawer nav a{display:flex;align-items:baseline;gap:12px;font-size:1.4rem;font-weight:700;color:var(--foam);text-decoration:none;padding:12px 0;border-bottom:1px solid rgba(232,244,255,0.07);transition:color .3s,padding-left .3s;opacity:0;transform:translateX(30px)}
.chm-02__drawer.is-open nav a{opacity:1;transform:translateX(0)}
.chm-02__drawer nav a:nth-child(1){transition:.5s .15s}
.chm-02__drawer nav a:nth-child(2){transition:.5s .22s}
.chm-02__drawer nav a:nth-child(3){transition:.5s .29s}
.chm-02__drawer nav a:nth-child(4){transition:.5s .36s}
.chm-02__drawer nav a span{font-family:'JetBrains Mono',monospace;font-size:.7rem;color:var(--magenta)}
.chm-02__drawer nav a:hover{color:var(--plasma);padding-left:8px}
.chm-02__scrim{position:absolute;inset:0;z-index:35;background:rgba(7,11,20,.5);opacity:0;pointer-events:none;transition:opacity .5s;backdrop-filter:blur(2px)}
.chm-02__scrim.is-show{opacity:1;pointer-events:auto}
.chm-02__note{font-family:'JetBrains Mono',monospace;position:absolute;bottom:18px;left:24px;z-index:5;font-size:10px;letter-spacing:.3em;color:rgba(232,244,255,.4)}

@media (prefers-reduced-motion: reduce){
  .chm-02__aurora{animation:none !important}
  .chm-02__morph,.chm-02__morph line,.chm-02__morph path,.chm-02__drawer,.chm-02__drawer nav a,.chm-02__scrim{transition:none !important}
}
```

**JS:**
```js
(() => {
  const root = document.querySelector('.chm-02');
  if (!root) return;
  const morphs = root.querySelectorAll('.chm-02__morph');
  const drawer = root.querySelector('#chm-02-drawer');
  const scrim = root.querySelector('#chm-02-scrim');
  function closeAll(){
    morphs.forEach(m => m.classList.remove('is-active'));
    drawer.classList.remove('is-open');
    scrim.classList.remove('is-show');
  }
  morphs.forEach(el => {
    el.addEventListener('click', () => {
      const wasActive = el.classList.contains('is-active');
      morphs.forEach(m => m.classList.remove('is-active'));
      if (wasActive) { closeAll(); return; }
      el.classList.add('is-active');
      drawer.classList.add('is-open');
      scrim.classList.add('is-show');
    });
  });
  scrim.addEventListener('click', closeAll);
})();
```

### 03. Full-Screen Overlay Mobile Navigation

**Type:** CSS + JS
**Description:** Editorial agency aesthetic in warm cream/charcoal/burnt-orange. The trigger fires an inset clip-path that wipes a full-viewport overlay upward, revealing oversized Fraunces serif links with rotating staggered entrances.

**HTML:**
```html
<div class="chm-03">
  <div class="chm-03__scene">
    <div class="chm-03__bgtype">Aö</div>

    <button class="chm-03__burger" aria-label="Toggle navigation">
      <span class="chm-03__word">Menu</span>
      <span class="chm-03__stack"><i></i><i></i></span>
    </button>

    <div class="chm-03__overlay">
      <div class="chm-03__over-kick">Studio Index — Full Viewport</div>
      <nav>
        <a href="#"><span class="chm-03__num">01</span>Editorial</a>
        <a href="#"><span class="chm-03__num">02</span>Direction</a>
        <a href="#"><span class="chm-03__num">03</span>Objects</a>
        <a href="#"><span class="chm-03__num">04</span>Contact</a>
      </nav>
      <div class="chm-03__over-foot"><a href="#">Lisbon</a><a href="#">studio@overlay.ten</a><a href="#">+351 21 000</a></div>
    </div>

    <div class="chm-03__stage">
      <div class="chm-03__hero">
        <div class="chm-03__kick">Creative Direction · 2030</div>
        <h1>Cover the<br><b>whole</b> world.</h1>
      </div>
    </div>
    <div class="chm-03__tag">FULLSCREEN_OVERLAY</div>
  </div>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300..900&family=Archivo:wght@400;600;800&display=swap');

.chm-03, .chm-03 *, .chm-03 *::before, .chm-03 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.chm-03{
  --cream:#f3ede3;--char:#16130f;--burnt:#d9501e;--olive:#5d6b3f;
  min-height:460px;display:grid;place-items:stretch;
  font-family:'Archivo',sans-serif;background:var(--cream);color:var(--char);
  position:relative;
}
.chm-03__scene{position:relative;width:100%;min-height:460px;height:100%;overflow:hidden}
.chm-03__stage{position:relative;z-index:2;min-height:460px;display:flex;align-items:flex-end;padding:5%}
.chm-03__hero{max-width:900px}
.chm-03__kick{font-size:11px;letter-spacing:.45em;text-transform:uppercase;color:var(--burnt);font-weight:800;margin-bottom:14px}
.chm-03__hero h1{font-family:'Fraunces',serif;font-weight:300;font-size:clamp(2.4rem,9vw,6rem);line-height:.86;letter-spacing:-.02em}
.chm-03__hero h1 b{font-weight:900;font-style:italic}
.chm-03__bgtype{position:absolute;top:-2%;left:-1%;z-index:0;font-family:'Fraunces',serif;font-weight:900;font-size:30vw;color:rgba(22,19,15,0.035);line-height:.8;pointer-events:none;user-select:none}
.chm-03__burger{position:absolute;top:24px;right:28px;z-index:60;display:flex;align-items:center;gap:12px;cursor:pointer;background:none;border:none}
.chm-03__word{font-weight:800;letter-spacing:.2em;font-size:11px;text-transform:uppercase;color:var(--char);transition:color .4s}
.chm-03__stack{width:30px;height:13px;position:relative}
.chm-03__stack i{position:absolute;left:0;width:100%;height:2.5px;background:var(--char);border-radius:3px;transition:transform .55s cubic-bezier(.7,0,.2,1),background .4s,width .4s}
.chm-03__stack i:nth-child(1){top:0}
.chm-03__stack i:nth-child(2){top:10px;width:60%}
.chm-03.is-open .chm-03__stack i:nth-child(1){transform:translateY(5px) rotate(45deg);background:var(--cream)}
.chm-03.is-open .chm-03__stack i:nth-child(2){transform:translateY(-5px) rotate(-45deg);width:100%;background:var(--cream)}
.chm-03.is-open .chm-03__word{color:var(--cream)}
.chm-03__overlay{position:absolute;inset:0;z-index:50;background:var(--char);display:flex;flex-direction:column;justify-content:center;padding:0 8%;
  -webkit-clip-path:inset(0 0 100% 0);clip-path:inset(0 0 100% 0);transition:clip-path .85s cubic-bezier(.76,0,.24,1),-webkit-clip-path .85s cubic-bezier(.76,0,.24,1);pointer-events:none}
.chm-03.is-open .chm-03__overlay{-webkit-clip-path:inset(0 0 0% 0);clip-path:inset(0 0 0% 0);pointer-events:auto}
.chm-03__overlay::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 80% at 80% 30%,rgba(217,80,30,0.22),transparent 60%)}
.chm-03__over-kick{position:relative;font-size:11px;letter-spacing:.4em;text-transform:uppercase;color:var(--burnt);font-weight:800;margin-bottom:30px;opacity:0;transition:.4s .5s}
.chm-03.is-open .chm-03__over-kick{opacity:1}
.chm-03__overlay nav{position:relative}
.chm-03__overlay nav a{display:block;font-family:'Fraunces',serif;font-weight:300;font-size:clamp(2rem,7vw,4.6rem);line-height:1.02;color:var(--cream);text-decoration:none;transition:color .3s,transform .3s;
  opacity:0;transform:translateY(60px) rotate(2deg)}
.chm-03__overlay nav a .chm-03__num{font-family:'Archivo',sans-serif;font-weight:800;font-size:.7rem;vertical-align:top;color:var(--olive);margin-right:14px}
.chm-03.is-open .chm-03__overlay nav a{opacity:1;transform:none}
.chm-03.is-open .chm-03__overlay nav a:nth-child(1){transition:.7s cubic-bezier(.16,1,.3,1) .50s}
.chm-03.is-open .chm-03__overlay nav a:nth-child(2){transition:.7s cubic-bezier(.16,1,.3,1) .58s}
.chm-03.is-open .chm-03__overlay nav a:nth-child(3){transition:.7s cubic-bezier(.16,1,.3,1) .66s}
.chm-03.is-open .chm-03__overlay nav a:nth-child(4){transition:.7s cubic-bezier(.16,1,.3,1) .74s}
.chm-03__overlay nav a:hover{color:var(--burnt);font-style:italic}
.chm-03__over-foot{position:relative;margin-top:30px;display:flex;gap:24px;flex-wrap:wrap;font-size:11px;letter-spacing:.15em;color:rgba(243,237,227,.55);opacity:0;transition:.4s .85s}
.chm-03.is-open .chm-03__over-foot{opacity:1}
.chm-03__over-foot a{color:inherit;text-decoration:none}
.chm-03__over-foot a:hover{color:var(--olive)}
.chm-03__tag{position:absolute;bottom:18px;right:24px;z-index:5;font-size:10px;letter-spacing:.3em;color:rgba(22,19,15,.4);font-weight:600}

@media (prefers-reduced-motion: reduce){
  .chm-03__stack i,.chm-03__overlay,.chm-03__overlay nav a,.chm-03__over-foot,.chm-03__over-kick,.chm-03__word{transition:none !important}
}
```

**JS:**
```js
(() => {
  const root = document.querySelector('.chm-03');
  if (!root) return;
  const btn = root.querySelector('.chm-03__burger');
  btn.addEventListener('click', () => root.classList.toggle('is-open'));
})();
```

### 04. Slide-out Sidebar / Off-Canvas Navigation

**Type:** CSS + JS
**Description:** Dashboard/web-app shell with a true "push" effect — the content canvas slides, scales, dims and rounds as a mint-on-void sidebar glides in. Includes iconography, grouped nav sections, and an active state.

**HTML:**
```html
<div class="chm-04">
  <div class="chm-04__scene">
    <div class="chm-04__trg" aria-label="Toggle sidebar">
      <div class="chm-04__b"><i></i><i></i><i></i></div>
    </div>

    <aside class="chm-04__sidebar">
      <div class="chm-04__brand"><div class="chm-04__glyph">◇</div><span>Off·Canvas</span></div>
      <div class="chm-04__grp">Workspace</div>
      <a class="chm-04__on" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><rect x="3" y="3" width="7" height="7" rx="1.5"/><rect x="14" y="3" width="7" height="7" rx="1.5"/><rect x="3" y="14" width="7" height="7" rx="1.5"/><rect x="14" y="14" width="7" height="7" rx="1.5"/></svg>Dashboard</a>
      <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M3 12h18M3 6h18M3 18h18"/></svg>Streams</a>
      <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 3"/></svg>Activity</a>
      <div class="chm-04__grp">Library</div>
      <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M4 4h12l4 4v12H4z"/><path d="M16 4v4h4"/></svg>Documents</a>
      <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M12 3l9 4-9 4-9-4z"/><path d="M3 12l9 4 9-4"/></svg>Models</a>
      <div class="chm-04__spacer"></div>
      <div class="chm-04__card"><b>Push effect</b><p>Content shifts + scales as the canvas slides aside.</p></div>
    </aside>

    <div class="chm-04__shell">
      <div class="chm-04__canvas">
        <div class="chm-04__dots"></div>
        <div class="chm-04__hero">
          <span class="chm-04__pill">App Shell · Off-Canvas</span>
          <h1>Slide. <em>Push.</em><br>Breathe.</h1>
          <p>The sidebar nudges the content instead of covering it.</p>
        </div>
      </div>
    </div>
    <div class="chm-04__tag">OFF_CANVAS // 2030</div>
  </div>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

.chm-04, .chm-04 *, .chm-04 *::before, .chm-04 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.chm-04{
  --void:#0b0e0d;--panel:#11201c;--mint:#3ef0a8;--lime:#c6ff4a;--fog:#dfe9e5;--muted:rgba(223,233,229,.55);
  min-height:460px;display:grid;place-items:stretch;
  font-family:'Sora',sans-serif;background:var(--void);color:var(--fog);
  position:relative;
}
.chm-04__scene{position:relative;width:100%;min-height:460px;height:100%;overflow:hidden}
.chm-04__shell{position:relative;min-height:460px;transition:transform .65s cubic-bezier(.16,1,.3,1),filter .65s;will-change:transform}
.chm-04.is-pushed .chm-04__shell{transform:translateX(230px) scale(.94);border-radius:24px;overflow:hidden;filter:brightness(.6)}
.chm-04__canvas{position:relative;min-height:460px;background:
  radial-gradient(circle at 80% 18%,rgba(62,240,168,.14),transparent 45%),
  radial-gradient(circle at 12% 88%,rgba(198,255,74,.1),transparent 45%),
  var(--void);
  display:grid;place-items:center;text-align:center;padding:24px}
.chm-04__dots{position:absolute;inset:0;opacity:.4;background-image:radial-gradient(rgba(223,233,229,.12) 1px,transparent 1px);background-size:28px 28px}
.chm-04__hero{position:relative;z-index:2}
.chm-04__pill{display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--mint);border:1px solid rgba(62,240,168,.4);padding:6px 14px;border-radius:99px;margin-bottom:20px}
.chm-04__hero h1{font-size:clamp(2rem,7vw,4.4rem);font-weight:700;letter-spacing:-.03em;line-height:.92}
.chm-04__hero h1 em{font-style:normal;color:var(--lime)}
.chm-04__hero p{font-family:'IBM Plex Mono',monospace;margin-top:14px;color:var(--muted);font-size:12px;letter-spacing:.1em}
.chm-04__trg{position:absolute;top:22px;left:22px;z-index:60;width:52px;height:52px;border-radius:14px;cursor:pointer;
  display:grid;place-items:center;background:rgba(223,233,229,.06);border:1px solid rgba(223,233,229,.12);backdrop-filter:blur(10px);
  transition:transform .5s,border-color .4s}
.chm-04__trg:hover{border-color:var(--mint)}
.chm-04.is-pushed .chm-04__trg{transform:translateX(230px)}
.chm-04__b{width:24px;height:14px;position:relative}
.chm-04__b i{position:absolute;left:0;height:2.4px;width:100%;background:var(--fog);border-radius:3px;transition:transform .5s cubic-bezier(.7,0,.2,1),opacity .3s,background .4s}
.chm-04__b i:nth-child(1){top:0}.chm-04__b i:nth-child(2){top:6px}.chm-04__b i:nth-child(3){top:12px}
.chm-04.is-pushed .chm-04__b i:nth-child(1){transform:translateY(6px) rotate(45deg);background:var(--mint)}
.chm-04.is-pushed .chm-04__b i:nth-child(2){opacity:0}
.chm-04.is-pushed .chm-04__b i:nth-child(3){transform:translateY(-6px) rotate(-45deg);background:var(--mint)}
.chm-04__sidebar{position:absolute;top:0;left:0;height:100%;width:230px;z-index:40;
  background:linear-gradient(170deg,var(--panel),#0a1512);
  border-right:1px solid rgba(62,240,168,.16);
  transform:translateX(-100%);transition:transform .65s cubic-bezier(.16,1,.3,1);
  padding:24px 18px;display:flex;flex-direction:column}
.chm-04.is-pushed .chm-04__sidebar{transform:translateX(0)}
.chm-04__brand{display:flex;align-items:center;gap:10px;margin-bottom:28px}
.chm-04__glyph{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,var(--mint),var(--lime));display:grid;place-items:center;color:var(--void);font-weight:700}
.chm-04__brand span{font-weight:700;letter-spacing:.04em;font-size:.95rem}
.chm-04__grp{font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);margin:6px 0 8px}
.chm-04__sidebar a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;color:var(--fog);text-decoration:none;font-weight:400;font-size:.88rem;transition:background .3s,color .3s,transform .3s;margin-bottom:2px}
.chm-04__sidebar a svg{width:17px;height:17px;flex-shrink:0;opacity:.8}
.chm-04__sidebar a:hover{background:rgba(62,240,168,.1);color:var(--mint);transform:translateX(4px)}
.chm-04__sidebar a.chm-04__on{background:linear-gradient(90deg,rgba(62,240,168,.16),transparent);color:var(--mint)}
.chm-04__spacer{flex:1}
.chm-04__card{background:rgba(223,233,229,.04);border:1px solid rgba(223,233,229,.08);border-radius:14px;padding:12px}
.chm-04__card b{display:block;font-size:.78rem;margin-bottom:4px}
.chm-04__card p{font-size:.66rem;color:var(--muted);line-height:1.5;font-family:'IBM Plex Mono',monospace}
.chm-04__tag{position:absolute;bottom:18px;right:24px;z-index:5;font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.3em;color:rgba(223,233,229,.4)}

@media (prefers-reduced-motion: reduce){
  .chm-04__shell,.chm-04__sidebar,.chm-04__trg,.chm-04__b i{transition:none !important}
}
```

**JS:**
```js
(() => {
  const root = document.querySelector('.chm-04');
  if (!root) return;
  const btn = root.querySelector('.chm-04__trg');
  btn.addEventListener('click', () => root.classList.toggle('is-pushed'));
})();
```

### 05. Responsive Navbar with Mobile-Only Hamburger Toggle

**Type:** CSS + JS
**Description:** Complete sticky glass header. Full link row + CTA on desktop; below the 860px media-query breakpoint links collapse into an animated slide-in sheet. Resize the window to watch it transform live.

**HTML:**
```html
<div class="chm-05">
  <div class="chm-05__scene">
    <header class="chm-05__header">
      <div class="chm-05__brand"><span class="chm-05__mk"></span>Meridian</div>
      <nav class="chm-05__links">
        <a href="#">Product</a>
        <a href="#">Systems</a>
        <a href="#">Pricing</a>
        <a href="#">About</a>
        <a class="chm-05__cta" href="#">Get started</a>
      </nav>
      <button class="chm-05__burger" aria-label="Toggle menu">
        <span class="chm-05__b"><i></i><i></i><i></i></span>
      </button>
    </header>

    <div class="chm-05__scrim"></div>
    <aside class="chm-05__sheet">
      <a href="#">Product</a>
      <a href="#">Systems</a>
      <a href="#">Pricing</a>
      <a href="#">About</a>
      <a href="#">Get started →</a>
      <div class="chm-05__badge">Mobile · breakpoint 860px</div>
    </aside>

    <section class="chm-05__hero">
      <div class="chm-05__eyebrow">Responsive Navigation</div>
      <h1>One navbar,<br><span>every screen.</span></h1>
      <p>Full link row on desktop. Below 860px the links fold into a hamburger sheet — pure media-query logic, no layout shift.</p>
      <span class="chm-05__resize-hint">↔ <b>Resize the window</b> past 860px to watch it transform</span>
    </section>
    <div class="chm-05__tag">RESPONSIVE_NAVBAR // 2030</div>
  </div>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600&display=swap');

.chm-05, .chm-05 *, .chm-05 *::before, .chm-05 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.chm-05{
  --ink:#101014;--snow:#fbfaf7;--grape:#5b3df5;--coral:#ff5d73;--sun:#ffc24b;--line:rgba(16,16,20,.1);
  min-height:460px;display:grid;place-items:stretch;
  font-family:'Inter Tight',sans-serif;background:var(--snow);color:var(--ink);
  position:relative;
}
.chm-05__scene{position:relative;width:100%;min-height:460px;height:100%;overflow:hidden}
.chm-05__header{position:absolute;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;justify-content:space-between;
  padding:14px clamp(16px,4vw,40px);
  background:rgba(251,250,247,.7);backdrop-filter:blur(16px) saturate(140%);border-bottom:1px solid var(--line)}
.chm-05__brand{display:flex;align-items:center;gap:10px;font-weight:600;font-size:1.15rem;letter-spacing:-.01em}
.chm-05__mk{width:26px;height:26px;border-radius:8px;background:conic-gradient(from 120deg,var(--grape),var(--coral),var(--sun),var(--grape));}
.chm-05__links{display:flex;align-items:center;gap:6px}
.chm-05__links a{position:relative;text-decoration:none;color:var(--ink);font-weight:500;font-size:.88rem;padding:8px 14px;border-radius:99px;transition:background .3s,color .3s}
.chm-05__links a:hover{background:rgba(91,61,245,.08);color:var(--grape)}
.chm-05__links .chm-05__cta{background:var(--ink);color:var(--snow);font-weight:600}
.chm-05__links .chm-05__cta:hover{background:var(--grape);color:#fff}
.chm-05__burger{display:none;width:42px;height:42px;border:1px solid var(--line);border-radius:12px;background:transparent;cursor:pointer;place-items:center}
.chm-05__b{width:20px;height:13px;position:relative}
.chm-05__b i{position:absolute;left:0;height:2.2px;width:100%;background:var(--ink);border-radius:3px;transition:transform .45s cubic-bezier(.7,0,.2,1),opacity .3s}
.chm-05__b i:nth-child(1){top:0}.chm-05__b i:nth-child(2){top:5.5px}.chm-05__b i:nth-child(3){top:11px}
.chm-05.is-open .chm-05__b i:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.chm-05.is-open .chm-05__b i:nth-child(2){opacity:0}
.chm-05.is-open .chm-05__b i:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}
.chm-05__sheet{position:absolute;top:0;right:0;height:100%;width:min(300px,80%);z-index:55;
  background:var(--ink);color:var(--snow);padding:80px 28px 28px;
  transform:translateX(110%);transition:transform .6s cubic-bezier(.16,1,.3,1);display:none;flex-direction:column}
.chm-05__sheet a{font-weight:500;font-size:1.3rem;color:var(--snow);text-decoration:none;padding:12px 0;border-bottom:1px solid rgba(251,250,247,.1);transition:color .3s,padding-left .3s;opacity:0;transform:translateX(24px)}
.chm-05.is-open .chm-05__sheet a{opacity:1;transform:none}
.chm-05__sheet a:nth-child(1){transition:.5s .12s}
.chm-05__sheet a:nth-child(2){transition:.5s .18s}
.chm-05__sheet a:nth-child(3){transition:.5s .24s}
.chm-05__sheet a:nth-child(4){transition:.5s .30s}
.chm-05__sheet a:nth-child(5){transition:.5s .36s}
.chm-05__sheet a:hover{color:var(--sun);padding-left:8px}
.chm-05__badge{margin-top:auto;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:rgba(251,250,247,.5)}
.chm-05__scrim{position:absolute;inset:0;z-index:50;background:rgba(16,16,20,.4);opacity:0;pointer-events:none;transition:.4s;backdrop-filter:blur(2px)}
.chm-05.is-open .chm-05__sheet{transform:translateX(0)}
.chm-05.is-open .chm-05__scrim{opacity:1;pointer-events:auto}
.chm-05__hero{min-height:460px;display:flex;flex-direction:column;justify-content:center;padding:80px clamp(16px,4vw,40px) 40px;max-width:1100px}
.chm-05__eyebrow{display:flex;align-items:center;gap:10px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--grape);font-weight:600;margin-bottom:18px}
.chm-05__eyebrow::before{content:"";width:24px;height:2px;background:var(--coral)}
.chm-05__hero h1{font-weight:600;font-size:clamp(2rem,6vw,4rem);line-height:.96;letter-spacing:-.02em}
.chm-05__hero h1 span{background:linear-gradient(100deg,var(--grape),var(--coral));-webkit-background-clip:text;background-clip:text;color:transparent}
.chm-05__hero p{margin-top:16px;max-width:480px;font-size:.95rem;line-height:1.6;color:#444}
.chm-05__resize-hint{margin-top:22px;display:inline-flex;align-items:center;gap:10px;font-size:11px;color:#666;background:#fff;border:1px solid var(--line);padding:8px 14px;border-radius:99px;align-self:flex-start}
.chm-05__resize-hint b{color:var(--grape)}
@media(max-width:860px){
  .chm-05 .chm-05__links{display:none}
  .chm-05 .chm-05__burger{display:grid}
  .chm-05 .chm-05__sheet{display:flex}
}
.chm-05__tag{position:absolute;bottom:18px;left:clamp(16px,4vw,40px);z-index:5;font-size:10px;letter-spacing:.3em;color:rgba(16,16,20,.4);font-weight:600}

@media (prefers-reduced-motion: reduce){
  .chm-05__b i,.chm-05__sheet,.chm-05__sheet a,.chm-05__scrim{transition:none !important}
}
```

**JS:**
```js
(() => {
  const root = document.querySelector('.chm-05');
  if (!root) return;
  const btn = root.querySelector('.chm-05__burger');
  const scrim = root.querySelector('.chm-05__scrim');
  btn.addEventListener('click', () => root.classList.toggle('is-open'));
  scrim.addEventListener('click', () => root.classList.remove('is-open'));
})();
```

### 06. Minimalist / Floating Hamburger Button

**Type:** CSS + JS
**Description:** A fixed corner FAB that stays accessible through a long multi-section scroll. Tapping it blooms a radial micro-menu with spring easing — no header bar, pure minimalist landing-page style.

**HTML:**
```html
<div class="chm-06">
  <div class="chm-06__scene">
    <div class="chm-06__scroller">
      <section class="chm-06__s1">
        <div class="chm-06__idx">Floating · Always reachable</div>
        <h2>Scroll<br>as far as you <i>like.</i></h2>
        <p>The button stays pinned to the corner — no header bar, no clutter. Tap it any time to bloom the menu.</p>
        <div class="chm-06__bigmark">01</div>
      </section>
      <section class="chm-06__s2">
        <div class="chm-06__idx">Section Two</div>
        <h2>Still <i>here.</i></h2>
        <p>Hundreds of pixels down the page and the control hasn't moved. Minimalism that never abandons the user.</p>
        <div class="chm-06__bigmark">02</div>
      </section>
      <section class="chm-06__s3">
        <div class="chm-06__idx">Section Three</div>
        <h2>Tap to <i>bloom.</i></h2>
        <p>A radial micro-menu unfurls from the button with spring easing — playful, fast, out of the way.</p>
        <div class="chm-06__bigmark">03</div>
      </section>
    </div>

    <div class="chm-06__scrim"></div>
    <div class="chm-06__bloom">
      <a href="#">Home</a>
      <a href="#">Work</a>
      <a href="#">Info</a>
      <a href="#">Say hi</a>
    </div>
    <button class="chm-06__fab" aria-label="Toggle floating menu">
      <span class="chm-06__b"><i></i><i></i><i></i></span>
    </button>
    <div class="chm-06__scrollhint">↓ Scroll · button stays</div>
  </div>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@300;400;500;600&display=swap');

.chm-06, .chm-06 *, .chm-06 *::before, .chm-06 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.chm-06{
  --paper:#ece8e1;--ink:#1a1a1a;--blush:#e8826b;--sage:#8a9b6e;
  min-height:460px;display:grid;place-items:stretch;
  font-family:'Geist',sans-serif;background:var(--paper);color:var(--ink);
  position:relative;
}
.chm-06__scene{position:relative;width:100%;min-height:460px;height:100%;overflow:hidden}
.chm-06__scroller{position:relative;width:100%;height:460px;overflow-y:auto;scroll-behavior:smooth}
.chm-06__scroller section{min-height:460px;display:flex;flex-direction:column;justify-content:center;padding:0 clamp(20px,6vw,80px);position:relative}
.chm-06__idx{font-size:11px;letter-spacing:.4em;text-transform:uppercase;color:var(--blush);font-weight:500;margin-bottom:16px}
.chm-06__scroller section h2{font-family:'Instrument Serif',serif;font-weight:400;font-size:clamp(2rem,7vw,4.4rem);line-height:.98;letter-spacing:-.01em}
.chm-06__scroller section h2 i{color:var(--blush)}
.chm-06__scroller section p{margin-top:16px;max-width:380px;font-size:.95rem;line-height:1.6;color:#555}
.chm-06__s1{background:radial-gradient(120% 100% at 70% 0%,rgba(232,130,107,.14),transparent 55%),var(--paper)}
.chm-06__s2{background:var(--ink);color:var(--paper)}
.chm-06__s2 h2 i{color:var(--sage)}.chm-06__s2 p{color:rgba(236,232,225,.6)}.chm-06__s2 .chm-06__idx{color:var(--sage)}
.chm-06__s3{background:linear-gradient(160deg,#ddd6cb,var(--paper))}
.chm-06__bigmark{position:absolute;right:-2%;bottom:-6%;font-family:'Instrument Serif',serif;font-style:italic;font-size:20vw;line-height:.7;opacity:.05;pointer-events:none;user-select:none}
.chm-06__fab{position:absolute;bottom:24px;right:24px;z-index:80;width:60px;height:60px;border-radius:50%;cursor:pointer;
  background:var(--ink);color:var(--paper);display:grid;place-items:center;
  box-shadow:0 16px 40px rgba(26,26,26,.28);
  transition:transform .5s cubic-bezier(.34,1.56,.64,1),background .4s;border:none}
.chm-06__fab:hover{transform:scale(1.08) rotate(-4deg)}
.chm-06__b{width:22px;height:13px;position:relative}
.chm-06__b i{position:absolute;left:0;height:2.2px;width:100%;background:var(--paper);border-radius:3px;transition:transform .5s cubic-bezier(.7,0,.2,1),opacity .3s,width .4s}
.chm-06__b i:nth-child(1){top:0}.chm-06__b i:nth-child(2){top:5.5px;width:65%}.chm-06__b i:nth-child(3){top:11px}
.chm-06.is-open .chm-06__fab{background:var(--blush)}
.chm-06.is-open .chm-06__b i:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.chm-06.is-open .chm-06__b i:nth-child(2){opacity:0;width:0}
.chm-06.is-open .chm-06__b i:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}
.chm-06__bloom{position:absolute;bottom:24px;right:24px;z-index:75;width:60px;height:60px;pointer-events:none}
.chm-06__bloom a{position:absolute;bottom:0;right:0;width:50px;height:50px;border-radius:50%;display:grid;place-items:center;text-decoration:none;
  background:rgba(236,232,225,.95);backdrop-filter:blur(10px);border:1px solid rgba(26,26,26,.08);
  color:var(--ink);font-size:10px;font-weight:600;letter-spacing:.04em;text-align:center;
  box-shadow:0 8px 22px rgba(26,26,26,.16);
  transform:scale(.2);opacity:0;pointer-events:none;
  transition:transform .55s cubic-bezier(.34,1.56,.64,1),opacity .4s}
.chm-06.is-open .chm-06__bloom{pointer-events:auto}
.chm-06.is-open .chm-06__bloom a{opacity:1;pointer-events:auto;transform:scale(1)}
.chm-06.is-open .chm-06__bloom a:nth-child(1){bottom:78px;right:5px;transition-delay:.05s}
.chm-06.is-open .chm-06__bloom a:nth-child(2){bottom:66px;right:72px;transition-delay:.11s}
.chm-06.is-open .chm-06__bloom a:nth-child(3){bottom:5px;right:78px;transition-delay:.17s}
.chm-06.is-open .chm-06__bloom a:nth-child(4){bottom:120px;right:50px;transition-delay:.23s}
.chm-06__bloom a:hover{background:var(--ink);color:var(--paper)}
.chm-06__scrim{position:absolute;inset:0;z-index:70;background:rgba(26,26,26,.12);backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:.4s}
.chm-06.is-open .chm-06__scrim{opacity:1;pointer-events:auto}
.chm-06__scrollhint{position:absolute;top:24px;left:24px;z-index:5;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:rgba(26,26,26,.4);font-weight:500}

@media (prefers-reduced-motion: reduce){
  .chm-06__fab,.chm-06__b i,.chm-06__bloom a,.chm-06__scrim,.chm-06__scroller{transition:none !important;scroll-behavior:auto !important}
}
```

**JS:**
```js
(() => {
  const root = document.querySelector('.chm-06');
  if (!root) return;
  const btn = root.querySelector('.chm-06__fab');
  const scrim = root.querySelector('.chm-06__scrim');
  btn.addEventListener('click', () => root.classList.toggle('is-open'));
  scrim.addEventListener('click', () => root.classList.remove('is-open'));
})();
```

### 07. Tailwind CSS Hamburger Menu

**Type:** CSS + JS
**Description:** Utility-first build via the Tailwind CDN with a custom config (acid/sky/plum palette). Glass trigger morphs bars→X, slides in a right panel with staggered links — all flexbox, transition, and absolute-positioning utilities.

**HTML:**
```html
<script src="https://cdn.tailwindcss.com"></script>
<script>tailwind.config={theme:{extend:{fontFamily:{grot:['"Space Grotesk"','sans-serif'],mono:['"DM Mono"','monospace']},colors:{ink:'#0c0d12',acid:'#d4ff3d',sky:'#5eead4',plum:'#a78bfa'}}}}</script>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=DM+Mono:wght@400;500&display=swap" rel="stylesheet">
<div class="chm-07">
  <div class="chm-07__scene bg-ink text-white relative overflow-hidden" style="min-height:460px">
    <div class="pointer-events-none absolute inset-0" style="background:radial-gradient(40% 50% at 20% 20%,rgba(212,255,61,.16),transparent 60%),radial-gradient(40% 50% at 85% 80%,rgba(94,234,212,.14),transparent 60%)"></div>

    <button id="chm-07-btn" aria-label="Toggle menu"
      class="group absolute top-6 right-6 z-50 grid h-14 w-14 place-items-center rounded-2xl border border-white/10 bg-white/5 backdrop-blur-xl transition-all duration-500 hover:scale-105">
      <div class="relative h-4 w-7">
        <span id="chm-07-l1" class="absolute left-0 top-0 h-0.5 w-full rounded bg-white transition-all duration-500"></span>
        <span id="chm-07-l2" class="absolute left-0 top-1.5 h-0.5 w-full rounded bg-white transition-all duration-300"></span>
        <span id="chm-07-l3" class="absolute left-0 top-3 h-0.5 w-full rounded bg-white transition-all duration-500"></span>
      </div>
    </button>

    <nav id="chm-07-panel" class="absolute top-0 right-0 z-40 flex h-full w-full max-w-sm translate-x-full flex-col justify-center gap-2 border-l border-acid/20 bg-ink/90 px-8 backdrop-blur-2xl transition-transform duration-700 ease-[cubic-bezier(.16,1,.3,1)]">
      <p class="mb-6 font-mono text-xs tracking-[0.4em] text-acid">UTILITY-FIRST NAV</p>
      <a href="#" class="group flex items-baseline gap-4 border-b border-white/5 py-3 text-2xl font-semibold transition-colors hover:text-acid"><span class="font-mono text-xs text-sky">01</span>Build</a>
      <a href="#" class="group flex items-baseline gap-4 border-b border-white/5 py-3 text-2xl font-semibold transition-colors hover:text-sky"><span class="font-mono text-xs text-sky">02</span>Ship</a>
      <a href="#" class="group flex items-baseline gap-4 border-b border-white/5 py-3 text-2xl font-semibold transition-colors hover:text-plum"><span class="font-mono text-xs text-sky">03</span>Scale</a>
      <a href="#" class="group flex items-baseline gap-4 py-3 text-2xl font-semibold transition-colors hover:text-acid"><span class="font-mono text-xs text-sky">04</span>Docs</a>
    </nav>

    <div class="relative z-10 flex items-center justify-center px-6 text-center" style="min-height:460px">
      <div>
        <span class="mb-4 inline-block rounded-full border border-acid/40 px-4 py-1.5 font-mono text-xs tracking-[0.3em] text-acid">UTILITY CLASSES ONLY</span>
        <h1 class="text-5xl font-bold leading-none tracking-tight md:text-6xl" style="font-family:'Space Grotesk',sans-serif">tailwind<br><span class="text-acid">toggle</span></h1>
        <p class="mt-4 font-mono text-xs text-white/50">Flexbox · transitions · absolute positioning</p>
      </div>
    </div>
    <div class="absolute bottom-5 left-6 z-10 font-mono text-[10px] tracking-[0.3em] text-white/40">TAILWIND // 2030</div>
  </div>
</div>
```

**CSS:**
```css
.chm-07, .chm-07 *, .chm-07 *::before, .chm-07 *::after { box-sizing: border-box; }
.chm-07{font-family:'Space Grotesk',sans-serif;min-height:460px;display:grid;place-items:stretch}
.chm-07 .chm-07__scene{min-height:460px;height:100%}

@media (prefers-reduced-motion: reduce){
  .chm-07 *{transition:none !important}
}
```

**JS:**
```js
(() => {
  const root = document.querySelector('.chm-07');
  if (!root) return;
  const btn = root.querySelector('#chm-07-btn');
  const panel = root.querySelector('#chm-07-panel');
  const l1 = root.querySelector('#chm-07-l1');
  const l2 = root.querySelector('#chm-07-l2');
  const l3 = root.querySelector('#chm-07-l3');
  let o = false;
  btn.addEventListener('click', () => {
    o = !o;
    panel.classList.toggle('translate-x-full', !o);
    l1.style.transform = o ? 'translateY(8px) rotate(45deg)' : '';
    l2.style.opacity = o ? '0' : '1';
    l2.style.width = o ? '0' : '100%';
    l3.style.transform = o ? 'translateY(-8px) rotate(-45deg)' : '';
    [l1, l3].forEach(l => l.style.background = o ? '#d4ff3d' : '#fff');
    btn.style.borderColor = o ? '#d4ff3d' : '';
  });
})();
```

### 08. Bootstrap 5 Responsive Navbar with Hamburger

**Type:** Pure CSS
**Description:** Real Bootstrap 5 with a heavily reskinned .navbar-toggler — themed conic-gradient mark, morphing icon, glass collapse panel. Native collapse functionality intact, default look gone.

**HTML:**
```html
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700;800&family=Roboto+Mono:wght@400;500&display=swap" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<div class="chm-08">
  <div class="chm-08__scene">
    <nav class="navbar navbar-expand-lg chm-08__navbar">
      <div class="container">
        <a class="navbar-brand chm-08__brand" href="#"><span class="chm-08__mk"></span>Strapline</a>
        <button class="navbar-toggler collapsed chm-08__toggler" type="button" data-bs-toggle="collapse" data-bs-target="#chm-08-nav" aria-controls="chm-08-nav" aria-expanded="false" aria-label="Toggle navigation">
          <span class="chm-08__tg"><i></i><i></i><i></i></span>
        </button>
        <div class="collapse navbar-collapse justify-content-end chm-08__collapse" id="chm-08-nav">
          <ul class="navbar-nav align-items-lg-center gap-1 chm-08__nav-ul">
            <li class="nav-item"><a class="nav-link active chm-08__nav-link" href="#">Home</a></li>
            <li class="nav-item"><a class="nav-link chm-08__nav-link" href="#">Features</a></li>
            <li class="nav-item"><a class="nav-link chm-08__nav-link" href="#">Pricing</a></li>
            <li class="nav-item"><a class="nav-link chm-08__nav-link" href="#">Docs</a></li>
            <li class="nav-item ms-lg-2 mt-2 mt-lg-0"><a class="chm-08__btn-glow" href="#">Sign up</a></li>
          </ul>
        </div>
      </div>
    </nav>

    <section class="chm-08__hero">
      <div class="container">
        <span class="chm-08__chip">Bootstrap 5 · Customized</span>
        <h1>Framework speed,<br><span>zero default look.</span></h1>
        <p>A native <code>.navbar-toggler</code> reskinned with a morphing icon, themed colors, and a glass collapse panel — functionality intact, defaults gone.</p>
      </div>
    </section>
    <div class="chm-08__tag">BOOTSTRAP_5 // 2030</div>
  </div>
</div>
```

**CSS:**
```css
.chm-08, .chm-08 *, .chm-08 *::before, .chm-08 *::after {
  box-sizing: border-box;
}
.chm-08{
  --bsx-ink:#0e1020;--bsx-amber:#ffb454;--bsx-rose:#ff5c8a;--bsx-cyan:#36d7e3;
  min-height:460px;display:grid;place-items:stretch;
  font-family:'Sora',sans-serif;background:var(--bsx-ink);color:#f4f5fb;
  position:relative;
}
.chm-08__scene{position:relative;width:100%;min-height:460px;height:100%;overflow:hidden;
  background-image:radial-gradient(60% 50% at 80% 0%,rgba(255,92,138,.16),transparent 55%),radial-gradient(50% 50% at 10% 100%,rgba(54,215,227,.14),transparent 55%)}
.chm-08 .chm-08__navbar{background:rgba(14,16,32,.7)!important;backdrop-filter:blur(16px);border-bottom:1px solid rgba(255,255,255,.08);position:absolute;top:0;left:0;right:0;z-index:60}
.chm-08 .chm-08__brand{font-weight:800;letter-spacing:-.02em;font-size:1.25rem;display:flex;align-items:center;gap:.5rem;color:#f4f5fb}
.chm-08 .chm-08__mk{width:28px;height:28px;border-radius:9px;background:conic-gradient(from 120deg,var(--bsx-amber),var(--bsx-rose),var(--bsx-cyan),var(--bsx-amber))}
.chm-08 .chm-08__nav-link{color:rgba(244,245,251,.8)!important;font-weight:500;border-radius:99px;padding:.45rem 1rem!important;transition:.3s}
.chm-08 .chm-08__nav-link:hover,.chm-08 .chm-08__nav-link.active{color:var(--bsx-ink)!important;background:var(--bsx-amber)}
.chm-08 .chm-08__btn-glow{background:var(--bsx-rose);color:#fff;font-weight:600;border-radius:99px;padding:.45rem 1.2rem;border:none;transition:.3s;text-decoration:none;display:inline-block}
.chm-08 .chm-08__btn-glow:hover{background:var(--bsx-cyan);color:var(--bsx-ink);transform:translateY(-2px)}
.chm-08 .chm-08__toggler{border:1px solid rgba(255,255,255,.18)!important;border-radius:14px;padding:.5rem .6rem;box-shadow:none!important;background:transparent}
.chm-08 .chm-08__tg{width:22px;height:14px;position:relative;display:block}
.chm-08 .chm-08__tg i{position:absolute;left:0;height:2.2px;width:100%;background:var(--bsx-amber);border-radius:3px;transition:transform .45s cubic-bezier(.7,0,.2,1),opacity .3s}
.chm-08 .chm-08__tg i:nth-child(1){top:0}.chm-08 .chm-08__tg i:nth-child(2){top:6px}.chm-08 .chm-08__tg i:nth-child(3){top:12px}
.chm-08 .chm-08__toggler:not(.collapsed) .chm-08__tg i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.chm-08 .chm-08__toggler:not(.collapsed) .chm-08__tg i:nth-child(2){opacity:0}
.chm-08 .chm-08__toggler:not(.collapsed) .chm-08__tg i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.chm-08__hero{padding:7rem 0 3rem;position:relative;z-index:1}
.chm-08__hero h1{font-weight:800;font-size:clamp(2rem,6vw,3.6rem);line-height:.98;letter-spacing:-.02em}
.chm-08__hero h1 span{background:linear-gradient(100deg,var(--bsx-amber),var(--bsx-rose));-webkit-background-clip:text;background-clip:text;color:transparent}
.chm-08__hero p{color:rgba(244,245,251,.6);max-width:520px;font-size:.95rem;margin-top:1rem}
.chm-08__chip{font-family:'Roboto Mono',monospace;font-size:.65rem;letter-spacing:.3em;text-transform:uppercase;color:var(--bsx-cyan);border:1px solid rgba(54,215,227,.4);border-radius:99px;padding:.35rem .9rem;display:inline-block;margin-bottom:1rem}
.chm-08__tag{position:absolute;bottom:1.2rem;right:1.4rem;font-family:'Roboto Mono',monospace;font-size:.65rem;letter-spacing:.3em;color:rgba(244,245,251,.4);z-index:5}
@media(max-width:991px){.chm-08 .chm-08__collapse{background:rgba(14,16,32,.96);border-radius:18px;padding:1rem;margin-top:.6rem;border:1px solid rgba(255,255,255,.08)}}

@media (prefers-reduced-motion: reduce){
  .chm-08 .chm-08__tg i,.chm-08 .chm-08__nav-link,.chm-08 .chm-08__btn-glow{transition:none !important}
}
```

### 09. Accessible Hamburger Menu (WCAG Compliant)

**Type:** CSS + JS
**Description:** Full audit-ready pattern: aria-expanded, aria-controls, aria-label, skip link, visible focus rings, focus trap, Escape-to-close, and focus return. Editorial Newsreader serif on warm paper.

**HTML:**
```html
<div class="chm-09">
  <div class="chm-09__scene">
    <a class="chm-09__skip" href="#chm-09-main">Skip to content</a>

    <button class="chm-09__trigger" id="chm-09-trigger" aria-expanded="false" aria-controls="chm-09-menu" aria-label="Toggle navigation menu">
      <span class="chm-09__bars" aria-hidden="true"><i></i><i></i><i></i></span>
      <span class="chm-09__lbl-open">Menu</span><span class="chm-09__lbl-close">Close</span>
    </button>

    <div class="chm-09__scrim" id="chm-09-scrim"></div>
    <nav id="chm-09-menu" class="chm-09__menu" data-open="false" aria-label="Primary" aria-hidden="true">
      <p class="chm-09__grp">Primary navigation</p>
      <a href="#" aria-current="page">Home</a>
      <a href="#">Services</a>
      <a href="#">Case studies</a>
      <a href="#">Journal</a>
      <a href="#">Contact</a>
    </nav>

    <main id="chm-09-main" class="chm-09__wrap">
      <span class="chm-09__eyebrow">WCAG 2.2 AA</span>
      <h1>Navigation everyone can actually use.</h1>
      <p class="chm-09__lead">Full keyboard support, focus trapping, Escape to close, and screen-reader semantics baked in. Try it: <strong>Tab</strong> to the button, <strong>Enter</strong> to open, <strong>Esc</strong> to close.</p>
      <div class="chm-09__specs">
        <code>aria-expanded="false → true"</code>
        <code>aria-controls="menu"</code>
        <code>aria-label="Toggle navigation menu"</code>
        <code>Esc key + focus return + scrim dismiss</code>
      </div>
    </main>
    <div class="chm-09__tag">ACCESSIBLE // 2030</div>
  </div>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,400;6..72,500&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');
.chm-09, .chm-09 *, .chm-09 *::before, .chm-09 *::after { box-sizing: border-box; margin: 0; padding: 0; }
.chm-09{
  --bg:#fcfbf8;--ink:#1b1b1b;--blue:#1d4ed8;--green:#15803d;--line:#e4e1d8;
  min-height:460px;display:grid;place-items:stretch;
  font-family:'IBM Plex Sans',sans-serif;background:var(--bg);color:var(--ink);
  position:relative;
}
.chm-09__scene{position:relative;width:100%;min-height:460px;height:100%;overflow:hidden}
.chm-09 a:focus-visible,.chm-09 button:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:6px}
.chm-09__skip{position:absolute;left:-999px;top:12px;z-index:99;background:var(--ink);color:#fff;padding:8px 14px;border-radius:8px;text-decoration:none;font-weight:600;font-size:.85rem}
.chm-09__skip:focus{left:12px}
.chm-09__trigger{position:absolute;top:22px;right:22px;z-index:50;display:flex;align-items:center;gap:10px;
  background:#fff;border:2px solid var(--ink);border-radius:14px;padding:10px 14px;cursor:pointer;font-family:inherit;font-weight:600;font-size:.8rem;color:var(--ink);
  transition:transform .3s,box-shadow .3s}
.chm-09__trigger:hover{transform:translateY(-2px);box-shadow:4px 4px 0 var(--ink)}
.chm-09__bars{width:20px;height:13px;position:relative;display:inline-block}
.chm-09__bars i{position:absolute;left:0;height:2.4px;width:100%;background:var(--ink);border-radius:3px;transition:transform .45s cubic-bezier(.7,0,.2,1),opacity .3s}
.chm-09__bars i:nth-child(1){top:0}.chm-09__bars i:nth-child(2){top:5.5px}.chm-09__bars i:nth-child(3){top:11px}
.chm-09__trigger[aria-expanded="true"] .chm-09__bars i:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.chm-09__trigger[aria-expanded="true"] .chm-09__bars i:nth-child(2){opacity:0}
.chm-09__trigger[aria-expanded="true"] .chm-09__bars i:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}
.chm-09__lbl-open{display:inline}.chm-09__lbl-close{display:none}
.chm-09__trigger[aria-expanded="true"] .chm-09__lbl-open{display:none}
.chm-09__trigger[aria-expanded="true"] .chm-09__lbl-close{display:inline}
.chm-09__menu{position:absolute;top:0;right:0;height:100%;width:min(320px,84%);z-index:45;background:#fff;border-left:2px solid var(--ink);
  transform:translateX(100%);transition:transform .5s cubic-bezier(.16,1,.3,1);padding:88px 24px 24px;display:flex;flex-direction:column}
.chm-09__menu[data-open="true"]{transform:translateX(0)}
.chm-09__grp{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#777;margin-bottom:12px}
.chm-09__menu a{display:block;font-family:'Newsreader',serif;font-size:1.3rem;color:var(--ink);text-decoration:none;padding:10px 8px;border-radius:8px;transition:background .2s,color .2s}
.chm-09__menu a:hover{background:#eef2ff;color:var(--blue)}
.chm-09__menu a[aria-current="page"]{color:var(--green);font-weight:500}
.chm-09__scrim{position:absolute;inset:0;z-index:40;background:rgba(27,27,27,.35);opacity:0;pointer-events:none;transition:.4s}
.chm-09__scrim[data-show="true"]{opacity:1;pointer-events:auto}
.chm-09__wrap{max-width:700px;margin:0 auto;padding:80px 24px 60px}
.chm-09__eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--green);font-weight:500;margin-bottom:14px}
.chm-09__eyebrow::before{content:"✓";display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--green);color:#fff;font-size:11px}
.chm-09 h1{font-family:'Newsreader',serif;font-weight:400;font-size:clamp(1.8rem,5vw,3rem);line-height:1.04;letter-spacing:-.01em}
.chm-09__lead{margin-top:16px;font-size:.95rem;line-height:1.65;color:#444;max-width:540px}
.chm-09__specs{margin-top:24px;display:grid;gap:8px;font-family:'IBM Plex Mono',monospace;font-size:11px}
.chm-09__specs code{background:#f0eee7;border:1px solid var(--line);border-radius:6px;padding:7px 11px;color:var(--blue);display:block}
.chm-09__tag{position:absolute;bottom:18px;left:22px;font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.3em;color:#999;z-index:5}

@media (prefers-reduced-motion: reduce){
  .chm-09__bars i,.chm-09__menu,.chm-09__scrim,.chm-09__trigger{transition:none !important}
}
```

**JS:**
```js
(() => {
  const root = document.querySelector('.chm-09');
  if (!root) return;
  const trg = root.querySelector('#chm-09-trigger');
  const menu = root.querySelector('#chm-09-menu');
  const scrim = root.querySelector('#chm-09-scrim');
  let open = false;
  function setState(s){
    open = s;
    trg.setAttribute('aria-expanded', s);
    menu.dataset.open = s;
    menu.setAttribute('aria-hidden', !s);
    scrim.dataset.show = s;
    if (s) { menu.querySelector('a').focus(); }
    else { trg.focus(); }
  }
  function toggle(){ setState(!open); }
  trg.addEventListener('click', toggle);
  scrim.addEventListener('click', toggle);
  root.addEventListener('keydown', e => {
    if (e.key === 'Escape' && open) toggle();
    if (e.key === 'Tab' && open) {
      const f = [...menu.querySelectorAll('a')];
      const first = f[0], last = f[f.length - 1];
      if (e.shiftKey && document.activeElement === first) { e.preventDefault(); last.focus(); }
      else if (!e.shiftKey && document.activeElement === last) { e.preventDefault(); first.focus(); }
    }
  });
})();
```

### 10. CSS Slide Down Dropdown Hamburger Menu

**Type:** Pure CSS
**Description:** Zero JavaScript. Checkbox hack drives the modern grid-template-rows: 0fr → 1fr trick for buttery vertical expansion below the bar, with staggered link reveals.

**HTML:**
```html
<div class="chm-10">
  <div class="chm-10__scene">
    <div class="chm-10__bg"></div>
    <input type="checkbox" id="chm-10-sd" class="chm-10__sd">
    <div class="chm-10__shell">
      <div class="chm-10__bar">
        <div class="chm-10__logo"><span class="chm-10__dot"></span>Verdant</div>
        <label class="chm-10__toggle" for="chm-10-sd" aria-label="Toggle dropdown"><i></i><i></i><i></i></label>
      </div>
      <div class="chm-10__drop">
        <div class="chm-10__inner">
          <a href="#">Overview <span>→</span></a>
          <a href="#">Collections <span>→</span></a>
          <a href="#">Pricing <span>→</span></a>
          <a href="#">Support <span>→</span></a>
        </div>
      </div>
      <div class="chm-10__cap">
        <h1>Slides down. Pushes nothing aside.</h1>
        <p>Pure CSS · <code>grid-template-rows: 0fr → 1fr</code></p>
      </div>
    </div>
    <div class="chm-10__tag">SLIDE_DOWN // 2030</div>
  </div>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;700&family=Spline+Sans+Mono:wght@400;500&display=swap');
.chm-10, .chm-10 *, .chm-10 *::before, .chm-10 *::after { box-sizing: border-box; margin: 0; padding: 0; }
.chm-10{
  --bg:#0f1310;--card:#161d18;--lime:#aef359;--peach:#ffb27a;--fog:#e9efe7;
  min-height:460px;display:grid;place-items:stretch;
  font-family:'Outfit',sans-serif;background:var(--bg);color:var(--fog);
  position:relative;
}
.chm-10__scene{position:relative;width:100%;min-height:460px;height:100%;overflow:hidden}
.chm-10__bg{position:absolute;inset:0;background:radial-gradient(50% 40% at 50% -5%,rgba(174,243,89,.16),transparent 60%),radial-gradient(40% 40% at 90% 100%,rgba(255,178,122,.12),transparent 55%)}
.chm-10__shell{position:relative;z-index:2;max-width:520px;margin:0 auto;padding:40px 20px;min-height:460px;display:flex;flex-direction:column;justify-content:center}
.chm-10__bar{display:flex;align-items:center;justify-content:space-between;background:rgba(22,29,24,.8);backdrop-filter:blur(14px);border:1px solid rgba(233,239,231,.08);border-radius:20px 20px 0 0;padding:16px 22px}
.chm-10__logo{font-weight:700;letter-spacing:-.01em;display:flex;align-items:center;gap:9px}
.chm-10__dot{width:10px;height:10px;border-radius:50%;background:var(--lime);box-shadow:0 0 14px var(--lime)}
.chm-10__sd{position:absolute;opacity:0;pointer-events:none}
.chm-10__toggle{width:42px;height:28px;position:relative;cursor:pointer}
.chm-10__toggle i{position:absolute;left:8px;right:8px;height:2.4px;background:var(--fog);border-radius:3px;transition:transform .5s cubic-bezier(.7,0,.2,1),opacity .3s,background .4s}
.chm-10__toggle i:nth-child(1){top:7px}.chm-10__toggle i:nth-child(2){top:13px}.chm-10__toggle i:nth-child(3){top:19px}
.chm-10__sd:checked ~ .chm-10__shell .chm-10__toggle i:nth-child(1){transform:translateY(6px) rotate(45deg);background:var(--lime)}
.chm-10__sd:checked ~ .chm-10__shell .chm-10__toggle i:nth-child(2){opacity:0}
.chm-10__sd:checked ~ .chm-10__shell .chm-10__toggle i:nth-child(3){transform:translateY(-6px) rotate(-45deg);background:var(--lime)}
.chm-10__drop{display:grid;grid-template-rows:0fr;background:rgba(22,29,24,.92);backdrop-filter:blur(14px);border:1px solid rgba(233,239,231,.08);border-top:none;border-radius:0 0 20px 20px;transition:grid-template-rows .6s cubic-bezier(.16,1,.3,1)}
.chm-10__sd:checked ~ .chm-10__shell .chm-10__drop{grid-template-rows:1fr}
.chm-10__inner{overflow:hidden}
.chm-10__drop a{display:flex;align-items:center;justify-content:space-between;padding:14px 22px;text-decoration:none;color:var(--fog);font-size:1rem;font-weight:400;border-top:1px solid rgba(233,239,231,.06);
  opacity:0;transform:translateY(-8px);transition:opacity .4s,transform .4s,background .3s,padding-left .3s,color .3s}
.chm-10__sd:checked ~ .chm-10__shell .chm-10__drop a{opacity:1;transform:none}
.chm-10__sd:checked ~ .chm-10__shell .chm-10__drop a:nth-child(1){transition-delay:.18s}
.chm-10__sd:checked ~ .chm-10__shell .chm-10__drop a:nth-child(2){transition-delay:.24s}
.chm-10__sd:checked ~ .chm-10__shell .chm-10__drop a:nth-child(3){transition-delay:.30s}
.chm-10__sd:checked ~ .chm-10__shell .chm-10__drop a:nth-child(4){transition-delay:.36s}
.chm-10__drop a:hover{background:rgba(174,243,89,.08);padding-left:30px;color:var(--lime)}
.chm-10__drop a span{font-family:'Spline Sans Mono',monospace;font-size:.7rem;color:var(--peach)}
.chm-10__cap{text-align:center;margin-top:24px}
.chm-10__cap h1{font-weight:700;font-size:clamp(1.4rem,4vw,2rem);letter-spacing:-.02em}
.chm-10__cap p{font-family:'Spline Sans Mono',monospace;margin-top:10px;font-size:10px;letter-spacing:.1em;color:rgba(233,239,231,.5)}
.chm-10__cap code{color:var(--lime)}
.chm-10__tag{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);z-index:5;font-family:'Spline Sans Mono',monospace;font-size:10px;letter-spacing:.3em;color:rgba(233,239,231,.4)}

@media (prefers-reduced-motion: reduce){
  .chm-10__toggle i,.chm-10__drop,.chm-10__drop a{transition:none !important}
}
```

### 11. Minimalist 3-Line CSS Menu Icon with Hover Effects

**Type:** Pure CSS
**Description:** A gallery of six pure-CSS hover micro-interactions — stretch, converge, color-shift cascade, tilt, squash, grow — using transitions and transforms on a tidy card grid.

**HTML:**
```html
<div class="chm-11">
  <div class="chm-11__scene">
    <div class="chm-11__bg"></div>
    <div class="chm-11__stage">
      <div class="chm-11__intro">
        <h1>Hover the icons.</h1>
        <p>six micro-interactions · pure css</p>
      </div>
      <div class="chm-11__row">
        <div class="chm-11__cell"><div class="chm-11__ic chm-11__stretch"><span></span><span></span><span></span></div><div class="chm-11__name">stretch</div></div>
        <div class="chm-11__cell"><div class="chm-11__ic chm-11__converge"><span></span><span></span><span></span></div><div class="chm-11__name">converge</div></div>
        <div class="chm-11__cell"><div class="chm-11__ic chm-11__cascade"><span></span><span></span><span></span></div><div class="chm-11__name">color shift</div></div>
        <div class="chm-11__cell"><div class="chm-11__ic chm-11__tilt"><span></span><span></span><span></span></div><div class="chm-11__name">tilt</div></div>
        <div class="chm-11__cell"><div class="chm-11__ic chm-11__bounce"><span></span><span></span><span></span></div><div class="chm-11__name">squash</div></div>
        <div class="chm-11__cell"><div class="chm-11__ic chm-11__grow"><span></span><span></span><span></span></div><div class="chm-11__name">grow</div></div>
      </div>
    </div>
    <div class="chm-11__tag">HOVER_ICONS // 2030</div>
  </div>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@300;400;500;700&family=Major+Mono+Display&display=swap');
.chm-11, .chm-11 *, .chm-11 *::before, .chm-11 *::after { box-sizing: border-box; margin: 0; padding: 0; }
.chm-11{
  --bg:#f6f4ef;--ink:#171514;--red:#e23b2e;--blue:#2b4cf0;--ground:#dcd7cc;
  min-height:460px;display:grid;place-items:stretch;
  font-family:'Hanken Grotesk',sans-serif;background:var(--bg);color:var(--ink);
  position:relative;
}
.chm-11__scene{position:relative;width:100%;min-height:460px;height:100%;overflow:hidden}
.chm-11__bg{position:absolute;inset:0;background-image:radial-gradient(rgba(23,21,20,.06) 1px,transparent 1px);background-size:26px 26px;-webkit-mask-image:radial-gradient(circle at 50% 50%,#000,transparent 85%);mask-image:radial-gradient(circle at 50% 50%,#000,transparent 85%)}
.chm-11__stage{position:relative;z-index:2;min-height:460px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:24px}
.chm-11__intro{text-align:center;margin-bottom:18px}
.chm-11__intro h1{font-size:clamp(1.5rem,4vw,2.4rem);font-weight:700;letter-spacing:-.02em}
.chm-11__intro p{font-family:'Major Mono Display',monospace;margin-top:8px;font-size:10px;letter-spacing:.2em;color:#777}
.chm-11__row{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;max-width:680px}
.chm-11__cell{width:130px;background:#fff;border:1px solid var(--ground);border-radius:16px;padding:22px 14px 14px;display:flex;flex-direction:column;align-items:center;gap:16px;box-shadow:0 6px 20px rgba(23,21,20,.04)}
.chm-11__name{font-family:'Major Mono Display',monospace;font-size:9px;letter-spacing:.15em;color:#999}
.chm-11__ic{width:38px;height:28px;position:relative;cursor:pointer}
.chm-11__ic span{position:absolute;left:0;height:3px;width:100%;background:var(--ink);border-radius:4px;transition:all .35s ease}
.chm-11__ic span:nth-child(1){top:2px}.chm-11__ic span:nth-child(2){top:12px}.chm-11__ic span:nth-child(3){top:22px}
.chm-11__stretch:hover span:nth-child(1){width:60%}
.chm-11__stretch:hover span:nth-child(2){width:100%}
.chm-11__stretch:hover span:nth-child(3){width:75%}
.chm-11__converge:hover span:nth-child(1){transform:translateY(10px)}
.chm-11__converge:hover span:nth-child(3){transform:translateY(-10px)}
.chm-11__converge:hover span:nth-child(2){background:var(--red)}
.chm-11__cascade:hover span:nth-child(1){background:var(--red);transform:translateX(4px)}
.chm-11__cascade:hover span:nth-child(2){background:var(--blue);transform:translateX(-4px)}
.chm-11__cascade:hover span:nth-child(3){background:var(--red);transform:translateX(4px)}
.chm-11__tilt:hover span:nth-child(1){transform:rotate(-6deg)}
.chm-11__tilt:hover span:nth-child(2){transform:scaleX(.6)}
.chm-11__tilt:hover span:nth-child(3){transform:rotate(6deg)}
.chm-11__bounce span{transform-origin:left}
.chm-11__bounce:hover span:nth-child(1){transform:scaleX(1.1)}
.chm-11__bounce:hover span:nth-child(2){transform:scaleX(.7);background:var(--blue)}
.chm-11__bounce:hover span:nth-child(3){transform:scaleX(.9)}
.chm-11__grow:hover span{height:6px;border-radius:2px}
.chm-11__grow:hover span:nth-child(1){top:4px}.chm-11__grow:hover span:nth-child(2){top:11px;background:var(--red)}.chm-11__grow:hover span:nth-child(3){top:18px}
.chm-11__tag{position:absolute;bottom:18px;right:22px;font-family:'Major Mono Display',monospace;font-size:10px;letter-spacing:.2em;color:#999;z-index:5}

@media (prefers-reduced-motion: reduce){
  .chm-11__ic span{transition:none !important}
}
```

### 12. Full Screen Blur Overlay Hamburger Menu

**Type:** CSS + JS
**Description:** Glassmorphism showcase: animated colored orbs behind, and on open a full-screen backdrop-filter: blur() overlay with layered z-indexing and fading large links.

**HTML:**
```html
<div class="chm-12">
  <div class="chm-12__scene">
    <div class="chm-12__scape"><div class="chm-12__orb chm-12__o1"></div><div class="chm-12__orb chm-12__o2"></div><div class="chm-12__orb chm-12__o3"></div></div>
    <div class="chm-12__scapegrid"></div>

    <div class="chm-12__trg" aria-label="Toggle blur menu"><div class="chm-12__b"><i></i><i></i><i></i></div></div>

    <div class="chm-12__overlay">
      <div class="chm-12__lbl">// glassmorphism nav</div>
      <a href="#">Studio</a>
      <a href="#">Projects</a>
      <a href="#">Process</a>
      <a href="#">Contact</a>
    </div>

    <div class="chm-12__stage">
      <div class="chm-12__hero">
        <h1>FROSTED<br>FOCUS</h1>
        <p>Backdrop-filter blur on open</p>
      </div>
    </div>
    <div class="chm-12__tag">BLUR_OVERLAY // 2030</div>
  </div>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@300;400;600;800&family=Azeret+Mono:wght@400;500&display=swap');
.chm-12, .chm-12 *, .chm-12 *::before, .chm-12 *::after { box-sizing: border-box; margin: 0; padding: 0; }
.chm-12{
  --bg:#0a0612;--glow1:#ff4d9d;--glow2:#5b8cff;--glow3:#43f5c4;--white:#f4eefb;
  min-height:460px;display:grid;place-items:stretch;
  font-family:'Unbounded',sans-serif;background:var(--bg);color:var(--white);
  position:relative;
}
.chm-12__scene{position:relative;width:100%;min-height:460px;height:100%;overflow:hidden}
.chm-12__scape{position:absolute;inset:0;z-index:0}
.chm-12__orb{position:absolute;border-radius:50%;filter:blur(10px);opacity:.9;animation:chm-12-float 14s ease-in-out infinite alternate}
.chm-12__o1{width:46%;height:46%;background:radial-gradient(circle,var(--glow1),transparent 70%);top:-8%;left:-6%}
.chm-12__o2{width:40%;height:40%;background:radial-gradient(circle,var(--glow2),transparent 70%);bottom:-10%;right:-4%;animation-delay:-4s}
.chm-12__o3{width:34%;height:34%;background:radial-gradient(circle,var(--glow3),transparent 70%);top:38%;left:42%;animation-delay:-8s}
@keyframes chm-12-float{to{transform:translate(6%,-6%) scale(1.15)}}
.chm-12__scapegrid{position:absolute;inset:0;z-index:1;background-image:linear-gradient(rgba(244,238,251,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(244,238,251,.06) 1px,transparent 1px);background-size:64px 64px}
.chm-12__stage{position:relative;z-index:3;min-height:460px;display:grid;place-items:center;text-align:center;padding:24px}
.chm-12__hero h1{font-size:clamp(1.8rem,6vw,4rem);font-weight:800;letter-spacing:-.02em;line-height:.95;text-shadow:0 8px 50px rgba(0,0,0,.4)}
.chm-12__hero p{font-family:'Azeret Mono',monospace;margin-top:14px;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:rgba(244,238,251,.7)}
.chm-12__trg{position:absolute;top:22px;right:22px;z-index:60;width:56px;height:56px;border-radius:18px;cursor:pointer;display:grid;place-items:center;
  background:rgba(244,238,251,.08);border:1px solid rgba(244,238,251,.22);backdrop-filter:blur(14px);transition:transform .5s,border-color .4s}
.chm-12__trg:hover{transform:scale(1.07);border-color:var(--white)}
.chm-12__b{width:24px;height:14px;position:relative}
.chm-12__b i{position:absolute;left:0;height:2.4px;width:100%;background:var(--white);border-radius:3px;transition:transform .5s cubic-bezier(.7,0,.2,1),opacity .3s}
.chm-12__b i:nth-child(1){top:0}.chm-12__b i:nth-child(2){top:6px}.chm-12__b i:nth-child(3){top:12px}
.chm-12.is-open .chm-12__b i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.chm-12.is-open .chm-12__b i:nth-child(2){opacity:0}
.chm-12.is-open .chm-12__b i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.chm-12__overlay{position:absolute;inset:0;z-index:50;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;
  background:rgba(10,6,18,.28);backdrop-filter:blur(0px) saturate(100%);
  opacity:0;pointer-events:none;transition:backdrop-filter .7s,opacity .5s,background .7s}
.chm-12.is-open .chm-12__overlay{opacity:1;pointer-events:auto;backdrop-filter:blur(30px) saturate(160%);background:rgba(10,6,18,.42)}
.chm-12__lbl{font-family:'Azeret Mono',monospace;font-size:10px;letter-spacing:.4em;text-transform:uppercase;color:var(--glow3);margin-bottom:24px;opacity:0;transition:.4s .4s}
.chm-12.is-open .chm-12__lbl{opacity:1}
.chm-12__overlay a{font-size:clamp(1.6rem,5vw,3.4rem);font-weight:300;color:var(--white);text-decoration:none;line-height:1.1;letter-spacing:-.01em;transition:color .3s,letter-spacing .3s;opacity:0;transform:translateY(30px)}
.chm-12.is-open .chm-12__overlay a{opacity:1;transform:none}
.chm-12.is-open .chm-12__overlay a:nth-child(2){transition:.6s .42s}
.chm-12.is-open .chm-12__overlay a:nth-child(3){transition:.6s .50s}
.chm-12.is-open .chm-12__overlay a:nth-child(4){transition:.6s .58s}
.chm-12.is-open .chm-12__overlay a:nth-child(5){transition:.6s .66s}
.chm-12__overlay a:hover{color:var(--glow1);letter-spacing:.02em}
.chm-12__tag{position:absolute;bottom:20px;left:24px;z-index:5;font-family:'Azeret Mono',monospace;font-size:10px;letter-spacing:.3em;color:rgba(244,238,251,.45)}

@media (prefers-reduced-motion: reduce){
  .chm-12__orb{animation:none !important}
  .chm-12__trg,.chm-12__b i,.chm-12__overlay,.chm-12__overlay a,.chm-12__lbl{transition:none !important}
}
```

**JS:**
```js
(() => {
  const root = document.querySelector('.chm-12');
  if (!root) return;
  const btn = root.querySelector('.chm-12__trg');
  btn.addEventListener('click', () => root.classList.toggle('is-open'));
})();
```

### 13. Mobile Bottom Nav Bar with Floating Hamburger

**Type:** CSS + JS
**Description:** PWA-style phone frame with a fixed bottom tab bar, a centered floating hamburger launcher, and a slide-up bottom sheet grid. Safe-area-inset aware.

**HTML:**
```html
<div class="chm-13">
  <div class="chm-13__scene">
    <div class="chm-13__phone" id="chm-13-phone">
      <div class="chm-13__screen">
        <div class="chm-13__welcome">Good evening</div>
        <h1>Your space,<br>at a glance.</h1>
        <div class="chm-13__cards">
          <div class="chm-13__card chm-13__wide"><div class="chm-13__t">Balance</div><div class="chm-13__v">$4,820.50</div></div>
          <div class="chm-13__card"><div class="chm-13__t">Activity</div><div class="chm-13__v">38 <small>+12%</small></div></div>
          <div class="chm-13__card"><div class="chm-13__t">Saved</div><div class="chm-13__v">$1,240</div></div>
          <div class="chm-13__card"><div class="chm-13__t">Streak</div><div class="chm-13__v">14 days</div></div>
        </div>
      </div>

      <div class="chm-13__scrim"></div>
      <div class="chm-13__sheet">
        <div class="chm-13__grab"></div>
        <h3>// Launcher</h3>
        <div class="chm-13__grid">
          <a href="#"><span class="chm-13__em">◐</span>Home</a>
          <a href="#"><span class="chm-13__em">✦</span>Explore</a>
          <a href="#"><span class="chm-13__em">↻</span>History</a>
          <a href="#"><span class="chm-13__em">♥</span>Saved</a>
          <a href="#"><span class="chm-13__em">⚙</span>Settings</a>
          <a href="#"><span class="chm-13__em">◇</span>More</a>
        </div>
      </div>

      <button class="chm-13__fab" aria-label="Open launcher"><span class="chm-13__b"><i></i><i></i><i></i></span></button>

      <nav class="chm-13__tabbar">
        <a class="chm-13__tab chm-13__active" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9"><path d="M3 10l9-7 9 7v10a1 1 0 01-1 1h-5v-7H9v7H4a1 1 0 01-1-1z"/></svg>Home</a>
        <a class="chm-13__tab" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4-4"/></svg>Search</a>
        <span class="chm-13__spacer-fab"></span>
        <a class="chm-13__tab" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9"><path d="M12 21s-7-4.5-7-10a4 4 0 017-2 4 4 0 017 2c0 5.5-7 10-7 10z"/></svg>Saved</a>
        <a class="chm-13__tab" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9"><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4 4-6 8-6s8 2 8 6"/></svg>You</a>
      </nav>
    </div>
    <div class="chm-13__tag">BOTTOM_NAV // 2030</div>
  </div>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Fragment+Mono&display=swap');
.chm-13, .chm-13 *, .chm-13 *::before, .chm-13 *::after { box-sizing: border-box; margin: 0; padding: 0; }
.chm-13{
  --bg:#0d0f17;--surface:#171a26;--violet:#8b7bff;--mint:#4fe3b0;--amber:#ffc15e;--fog:#eef0f7;--muted:#8b90a3;
  min-height:460px;display:grid;place-items:stretch;
  font-family:'Plus Jakarta Sans',sans-serif;background:#05060a;color:var(--fog);
  position:relative;
}
.chm-13__scene{position:relative;width:100%;min-height:460px;height:100%;overflow:hidden;display:grid;place-items:center;padding:18px}
.chm-13__phone{position:relative;width:300px;max-width:94%;height:424px;border-radius:36px;overflow:hidden;background:var(--bg);box-shadow:0 40px 90px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.05)}
.chm-13__screen{position:absolute;inset:0;overflow-y:auto;padding:30px 18px 110px;background:radial-gradient(60% 40% at 50% 0%,rgba(139,123,255,.18),transparent 60%)}
.chm-13__screen::-webkit-scrollbar{display:none}
.chm-13__welcome{font-family:'Fragment Mono',monospace;font-size:10px;letter-spacing:.2em;color:var(--mint);text-transform:uppercase}
.chm-13__screen h1{font-size:1.5rem;font-weight:800;letter-spacing:-.02em;margin-top:6px;line-height:1.05}
.chm-13__cards{margin-top:20px;display:grid;gap:10px}
.chm-13__card{background:var(--surface);border:1px solid rgba(255,255,255,.06);border-radius:18px;padding:14px}
.chm-13__t{font-family:'Fragment Mono',monospace;font-size:9px;letter-spacing:.15em;color:var(--muted);text-transform:uppercase}
.chm-13__v{font-size:1.3rem;font-weight:700;margin-top:6px}
.chm-13__v small{font-size:.75rem;color:var(--mint);font-weight:600}
.chm-13__wide{background:linear-gradient(130deg,var(--violet),#5c4ad6)}
.chm-13__wide .chm-13__t{color:rgba(255,255,255,.7)}.chm-13__wide .chm-13__v{color:#fff}
.chm-13__tabbar{position:absolute;left:14px;right:14px;bottom:14px;height:56px;border-radius:22px;
  background:rgba(23,26,38,.85);backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.08);
  display:flex;align-items:center;justify-content:space-around;padding:0 12px;z-index:30}
.chm-13__tab{display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--muted);text-decoration:none;font-size:9px;font-weight:600;transition:color .3s}
.chm-13__tab svg{width:18px;height:18px}
.chm-13__active{color:var(--violet)}
.chm-13__spacer-fab{width:54px}
.chm-13__fab{position:absolute;left:50%;bottom:46px;transform:translateX(-50%);z-index:40;width:54px;height:54px;border-radius:50%;cursor:pointer;border:none;
  background:linear-gradient(140deg,var(--violet),var(--amber));display:grid;place-items:center;
  box-shadow:0 12px 30px rgba(139,123,255,.5)}
.chm-13__b{width:22px;height:13px;position:relative}
.chm-13__b i{position:absolute;left:0;height:2.2px;width:100%;background:#fff;border-radius:3px;transition:transform .5s cubic-bezier(.7,0,.2,1),opacity .3s}
.chm-13__b i:nth-child(1){top:0}.chm-13__b i:nth-child(2){top:5.5px}.chm-13__b i:nth-child(3){top:11px}
.chm-13__phone.is-open .chm-13__b i:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.chm-13__phone.is-open .chm-13__b i:nth-child(2){opacity:0}
.chm-13__phone.is-open .chm-13__b i:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}
.chm-13__sheet{position:absolute;left:0;right:0;bottom:0;z-index:35;background:var(--surface);border-radius:26px 26px 0 0;border-top:1px solid rgba(255,255,255,.08);
  padding:22px 18px 100px;transform:translateY(100%);transition:transform .55s cubic-bezier(.16,1,.3,1)}
.chm-13__phone.is-open .chm-13__sheet{transform:translateY(0)}
.chm-13__grab{width:36px;height:4px;border-radius:3px;background:rgba(255,255,255,.18);margin:0 auto 18px}
.chm-13__sheet h3{font-family:'Fragment Mono',monospace;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.chm-13__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.chm-13__sheet a{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 6px;border-radius:14px;background:rgba(255,255,255,.04);color:var(--fog);text-decoration:none;font-size:10px;font-weight:600;transition:background .3s,transform .3s}
.chm-13__sheet a:hover{background:rgba(139,123,255,.16);transform:translateY(-3px)}
.chm-13__em{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;background:rgba(139,123,255,.18);font-size:14px}
.chm-13__scrim{position:absolute;inset:0;z-index:33;background:rgba(5,6,10,.55);opacity:0;pointer-events:none;transition:.4s}
.chm-13__phone.is-open .chm-13__scrim{opacity:1;pointer-events:auto}
.chm-13__tag{position:absolute;bottom:14px;right:18px;font-family:'Fragment Mono',monospace;font-size:10px;letter-spacing:.3em;color:rgba(238,240,247,.4)}

@media (prefers-reduced-motion: reduce){
  .chm-13__sheet,.chm-13__scrim,.chm-13__b i,.chm-13__tab,.chm-13__sheet a{transition:none !important}
}
```

**JS:**
```js
(() => {
  const root = document.querySelector('.chm-13');
  if (!root) return;
  const phone = root.querySelector('#chm-13-phone');
  const btn = root.querySelector('.chm-13__fab');
  const scrim = root.querySelector('.chm-13__scrim');
  btn.addEventListener('click', () => phone.classList.toggle('is-open'));
  scrim.addEventListener('click', () => phone.classList.remove('is-open'));
})();
```

### 14. Multi-Level Dropdown Hamburger Menu (Nested Accordion)

**Type:** CSS + JS
**Description:** E-commerce flyout using native <details> accordions nested three levels deep (Shop → Men's → Shoes), animated chevrons, contained hierarchy.

**HTML:**
```html
<div class="chm-14">
  <div class="chm-14__scene">
    <div class="chm-14__bg"></div>

    <button class="chm-14__trg" aria-label="Toggle nested menu"><span class="chm-14__b"><i></i><i></i><i></i></span></button>

    <div class="chm-14__scrim"></div>
    <nav class="chm-14__flyout">
      <div class="chm-14__lbl">// Shop by category</div>
      <div class="chm-14__acc">
        <details open>
          <summary>Shop <span class="chm-14__chev"></span></summary>
          <div class="chm-14__sub">
            <details>
              <summary>Men's <span class="chm-14__chev"></span></summary>
              <div class="chm-14__leaf"><a href="#">Shoes</a><a href="#">Jackets</a><a href="#">Accessories</a></div>
            </details>
            <details>
              <summary>Women's <span class="chm-14__chev"></span></summary>
              <div class="chm-14__leaf"><a href="#">Boots</a><a href="#">Knitwear</a><a href="#">Bags</a></div>
            </details>
            <a href="#">View all →</a>
          </div>
        </details>
        <details>
          <summary>Collections <span class="chm-14__chev"></span></summary>
          <div class="chm-14__sub"><a href="#">New arrivals</a><a href="#">Archive sale</a><a href="#">Limited drops</a></div>
        </details>
        <details>
          <summary>Journal <span class="chm-14__chev"></span></summary>
          <div class="chm-14__sub"><a href="#">Stories</a><a href="#">Lookbook</a></div>
        </details>
      </div>
    </nav>

    <div class="chm-14__stage">
      <div class="chm-14__hero">
        <h1>Tap. <em>Expand.</em><br>Go deeper.</h1>
        <p>Nested accordion · Shop → Men's → Shoes</p>
      </div>
    </div>
    <div class="chm-14__tag">NESTED_ACCORDION // 2030</div>
  </div>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Epilogue:wght@400;500;600;700;800&family=Spline+Sans+Mono:wght@400;500&display=swap');
.chm-14, .chm-14 *, .chm-14 *::before, .chm-14 *::after { box-sizing: border-box; margin: 0; padding: 0; }
.chm-14{
  --bg:#faf7f2;--panel:#ffffff;--ink:#1c1a17;--brand:#c0392b;--brand2:#d98324;--line:#ece7dd;--muted:#8a8378;
  min-height:460px;display:grid;place-items:stretch;
  font-family:'Epilogue',sans-serif;background:var(--bg);color:var(--ink);
  position:relative;
}
.chm-14__scene{position:relative;width:100%;min-height:460px;height:100%;overflow:hidden}
.chm-14__bg{position:absolute;inset:0;background:radial-gradient(50% 40% at 85% 10%,rgba(217,131,36,.1),transparent 60%)}
.chm-14__stage{position:relative;z-index:2;min-height:460px;display:flex;align-items:center;padding:0 6%}
.chm-14__hero h1{font-size:clamp(2rem,7vw,4.4rem);font-weight:800;letter-spacing:-.03em;line-height:.95}
.chm-14__hero h1 em{font-style:normal;color:var(--brand)}
.chm-14__hero p{font-family:'Spline Sans Mono',monospace;margin-top:14px;font-size:11px;letter-spacing:.1em;color:var(--muted)}
.chm-14__trg{position:absolute;top:22px;right:22px;z-index:60;width:54px;height:54px;border-radius:16px;cursor:pointer;display:grid;place-items:center;
  background:var(--ink);border:none;transition:transform .4s,background .4s}
.chm-14__trg:hover{transform:scale(1.05)}
.chm-14__b{width:22px;height:13px;position:relative;display:inline-block}
.chm-14__b i{position:absolute;left:0;height:2.4px;width:100%;background:#fff;border-radius:3px;transition:transform .5s cubic-bezier(.7,0,.2,1),opacity .3s}
.chm-14__b i:nth-child(1){top:0}.chm-14__b i:nth-child(2){top:5.5px}.chm-14__b i:nth-child(3){top:11px}
.chm-14.is-open .chm-14__trg{background:var(--brand)}
.chm-14.is-open .chm-14__b i:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.chm-14.is-open .chm-14__b i:nth-child(2){opacity:0}
.chm-14.is-open .chm-14__b i:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}
.chm-14__flyout{position:absolute;top:0;right:0;height:100%;width:min(340px,90%);z-index:50;background:var(--panel);border-left:1px solid var(--line);
  transform:translateX(100%);transition:transform .55s cubic-bezier(.16,1,.3,1);padding:84px 0 20px;overflow-y:auto}
.chm-14__flyout::-webkit-scrollbar{width:6px}.chm-14__flyout::-webkit-scrollbar-thumb{background:var(--line);border-radius:6px}
.chm-14.is-open .chm-14__flyout{transform:translateX(0)}
.chm-14__lbl{font-family:'Spline Sans Mono',monospace;font-size:10px;letter-spacing:.25em;text-transform:uppercase;color:var(--brand2);padding:0 24px 14px}
.chm-14__acc details{border-bottom:1px solid var(--line)}
.chm-14__acc summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;padding:14px 24px;font-size:1rem;font-weight:600;transition:background .25s,color .25s}
.chm-14__acc summary::-webkit-details-marker{display:none}
.chm-14__acc summary:hover{background:#faf7f2;color:var(--brand)}
.chm-14__chev{width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .35s;display:inline-block}
.chm-14__acc details[open]>summary .chm-14__chev{transform:rotate(-135deg)}
.chm-14__acc details[open]>summary{color:var(--brand)}
.chm-14__sub{background:#fbf9f5}
.chm-14__sub summary{padding-left:40px;font-size:.9rem;font-weight:500}
.chm-14__sub a{display:block;padding:10px 24px 10px 54px;text-decoration:none;color:var(--ink);font-size:.85rem;font-weight:400;transition:background .25s,padding-left .25s,color .25s}
.chm-14__sub a:hover{background:#f3efe7;padding-left:62px;color:var(--brand)}
.chm-14__leaf a{padding-left:68px;font-size:.8rem;color:var(--muted)}
.chm-14__leaf a::before{content:"–";margin-right:8px}
.chm-14__leaf a:hover{padding-left:76px}
.chm-14__scrim{position:absolute;inset:0;z-index:45;background:rgba(28,26,23,.3);opacity:0;pointer-events:none;transition:.4s}
.chm-14.is-open .chm-14__scrim{opacity:1;pointer-events:auto}
.chm-14__tag{position:absolute;bottom:18px;left:22px;font-family:'Spline Sans Mono',monospace;font-size:10px;letter-spacing:.3em;color:var(--muted);z-index:5}

@media (prefers-reduced-motion: reduce){
  .chm-14__flyout,.chm-14__scrim,.chm-14__b i,.chm-14__trg,.chm-14__chev,.chm-14__acc summary,.chm-14__sub a{transition:none !important}
}
```

**JS:**
```js
(() => {
  const root = document.querySelector('.chm-14');
  if (!root) return;
  const btn = root.querySelector('.chm-14__trg');
  const scrim = root.querySelector('.chm-14__scrim');
  btn.addEventListener('click', () => root.classList.toggle('is-open'));
  scrim.addEventListener('click', () => root.classList.remove('is-open'));
})();
```

### 15. Flexbox Navbar with Right-Aligned Hamburger Icon

**Type:** CSS + JS
**Description:** Textbook justify-content: space-between + align-items: center — logo locked left, hamburger snapped hard right, with a desktop link cluster that hides on mobile.

**HTML:**
```html
<div class="chm-15">
  <div class="chm-15__scene">
    <nav class="chm-15__navbar">
      <div class="chm-15__logo"><span class="chm-15__mk">⬡</span>Axis</div>
      <div class="chm-15__right">
        <div class="chm-15__desk">
          <a href="#">Work</a><a href="#">Studio</a><a href="#">Lab</a>
        </div>
        <button class="chm-15__burger" aria-label="Toggle menu"><span class="chm-15__b"><i></i><i></i><i></i></span></button>
      </div>
    </nav>

    <div class="chm-15__scrim"></div>
    <aside class="chm-15__sheet">
      <a href="#">Work <span>01</span></a>
      <a href="#">Studio <span>02</span></a>
      <a href="#">Lab <span>03</span></a>
      <a href="#">Journal <span>04</span></a>
      <a href="#">Contact <span>05</span></a>
    </aside>

    <section class="chm-15__hero">
      <div class="chm-15__eyebrow">Flexbox Layout</div>
      <h1>Logo left.<br><em>Icon hard right.</em></h1>
      <p>A reliable <code>justify-content: space-between</code> bar with <code>align-items: center</code> — the hamburger snaps perfectly to the right edge, cross-browser.</p>
      <div class="chm-15__code">.navbar { display:flex; justify-content:space-between }</div>
    </section>
    <div class="chm-15__tag">FLEXBOX_NAVBAR // 2030</div>
  </div>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Onest:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap');
.chm-15, .chm-15 *, .chm-15 *::before, .chm-15 *::after { box-sizing: border-box; margin: 0; padding: 0; }
.chm-15{
  --bg:#101418;--surface:#1a2026;--cyan:#36e0d4;--coral:#ff7a59;--fog:#eef2f3;--muted:#8a96a0;--line:rgba(238,242,243,.08);
  min-height:460px;display:grid;place-items:stretch;
  font-family:'Onest',sans-serif;background:var(--bg);color:var(--fog);
  position:relative;
}
.chm-15__scene{position:relative;width:100%;min-height:460px;height:100%;overflow:hidden}
.chm-15__navbar{display:flex;align-items:center;justify-content:space-between;
  padding:14px clamp(18px,4vw,40px);position:absolute;top:0;left:0;right:0;z-index:60;
  background:rgba(16,20,24,.72);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.chm-15__logo{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:-.02em;font-size:1.1rem}
.chm-15__mk{width:26px;height:26px;border-radius:8px;background:linear-gradient(135deg,var(--cyan),var(--coral));display:grid;place-items:center;color:#0d1014;font-weight:800}
.chm-15__right{display:flex;align-items:center;gap:14px}
.chm-15__desk{display:flex;gap:4px}
.chm-15__desk a{color:var(--muted);text-decoration:none;font-weight:500;font-size:.85rem;padding:6px 12px;border-radius:8px;transition:color .3s,background .3s}
.chm-15__desk a:hover{color:var(--cyan);background:rgba(54,224,212,.08)}
.chm-15__burger{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:var(--surface);border:1px solid var(--line);cursor:pointer;flex-shrink:0}
.chm-15__b{width:20px;height:13px;position:relative;display:inline-block}
.chm-15__b i{position:absolute;right:0;height:2.2px;background:var(--fog);border-radius:3px;transition:transform .45s cubic-bezier(.7,0,.2,1),opacity .3s,width .4s}
.chm-15__b i:nth-child(1){top:0;width:100%}.chm-15__b i:nth-child(2){top:5.5px;width:70%}.chm-15__b i:nth-child(3){top:11px;width:100%}
.chm-15.is-open .chm-15__b i:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.chm-15.is-open .chm-15__b i:nth-child(2){opacity:0;width:0}
.chm-15.is-open .chm-15__b i:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}
.chm-15__sheet{position:absolute;top:0;right:0;height:100%;width:min(300px,82%);z-index:55;background:var(--surface);border-left:1px solid var(--line);
  transform:translateX(100%);transition:transform .55s cubic-bezier(.16,1,.3,1);padding:80px 22px 22px;display:flex;flex-direction:column;gap:3px}
.chm-15.is-open .chm-15__sheet{transform:translateX(0)}
.chm-15__sheet a{display:flex;align-items:center;justify-content:space-between;font-size:1.05rem;font-weight:600;color:var(--fog);text-decoration:none;padding:12px 10px;border-radius:10px;transition:background .3s,padding-left .3s,color .3s}
.chm-15__sheet a:hover{background:rgba(54,224,212,.1);padding-left:18px;color:var(--cyan)}
.chm-15__sheet a span{font-family:'Geist Mono',monospace;font-size:.7rem;color:var(--coral)}
.chm-15__scrim{position:absolute;inset:0;z-index:50;background:rgba(16,20,24,.5);opacity:0;pointer-events:none;transition:.4s}
.chm-15.is-open .chm-15__scrim{opacity:1;pointer-events:auto}
.chm-15__hero{max-width:1000px;margin:0 auto;padding:90px 24px 60px}
.chm-15__eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:'Geist Mono',monospace;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--cyan);margin-bottom:16px}
.chm-15__eyebrow::before{content:"";width:24px;height:2px;background:var(--coral)}
.chm-15__hero h1{font-weight:800;font-size:clamp(2rem,6vw,4rem);line-height:.95;letter-spacing:-.03em}
.chm-15__hero h1 em{font-style:normal;background:linear-gradient(100deg,var(--cyan),var(--coral));-webkit-background-clip:text;background-clip:text;color:transparent}
.chm-15__hero p{margin-top:16px;max-width:500px;font-size:.95rem;color:var(--muted);line-height:1.6}
.chm-15__code{margin-top:22px;display:inline-block;font-family:'Geist Mono',monospace;font-size:11px;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:11px 14px;color:var(--cyan)}
.chm-15__tag{position:absolute;bottom:18px;left:clamp(18px,4vw,40px);font-family:'Geist Mono',monospace;font-size:10px;letter-spacing:.3em;color:var(--muted);z-index:5}
@media(max-width:760px){.chm-15 .chm-15__desk{display:none}}

@media (prefers-reduced-motion: reduce){
  .chm-15__sheet,.chm-15__scrim,.chm-15__b i,.chm-15__sheet a{transition:none !important}
}
```

**JS:**
```js
(() => {
  const root = document.querySelector('.chm-15');
  if (!root) return;
  const btn = root.querySelector('.chm-15__burger');
  const scrim = root.querySelector('.chm-15__scrim');
  btn.addEventListener('click', () => root.classList.toggle('is-open'));
  scrim.addEventListener('click', () => root.classList.remove('is-open'));
})();
```

### 16. Circular Expand / Radial Ripple Mobile Menu

**Type:** CSS + JS
**Description:** A floating circular button whose clip-path: circle() grows outward like an expanding bubble from the corner, with spring easing and sliding links.

**HTML:**
```html
<div class="chm-16">
  <div class="chm-16__scene">
    <div class="chm-16__bg"></div>

    <div class="chm-16__ripple">
      <div class="chm-16__lbl">// radial reveal</div>
      <a href="#">Home</a>
      <a href="#">Drops</a>
      <a href="#">Lookbook</a>
      <a href="#">Contact</a>
    </div>

    <button class="chm-16__fab" aria-label="Toggle radial menu"><span class="chm-16__b"><i></i><i></i><i></i></span></button>

    <div class="chm-16__stage">
      <div class="chm-16__hero">
        <h1>Pop the<br><em>bubble.</em></h1>
        <p>clip-path circle expands from the button</p>
      </div>
    </div>
    <div class="chm-16__tag">RADIAL_RIPPLE // 2030</div>
  </div>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Familjen+Grotesk:wght@400;500;700&family=Martian+Mono:wght@400;500&display=swap');
.chm-16, .chm-16 *, .chm-16 *::before, .chm-16 *::after { box-sizing: border-box; margin: 0; padding: 0; }
.chm-16{
  --bg:#0b0a14;--bubble:#ff3e6c;--bubble2:#7c3aff;--mint:#2ff5c8;--fog:#f3f0ff;
  min-height:460px;display:grid;place-items:stretch;
  font-family:'Familjen Grotesk',sans-serif;background:var(--bg);color:var(--fog);
  position:relative;
}
.chm-16__scene{position:relative;width:100%;min-height:460px;height:100%;overflow:hidden}
.chm-16__bg{position:absolute;inset:0;background:radial-gradient(40% 40% at 18% 82%,rgba(124,58,255,.2),transparent 60%),radial-gradient(40% 40% at 82% 20%,rgba(47,245,200,.14),transparent 60%)}
.chm-16__stage{position:relative;z-index:2;min-height:460px;display:grid;place-items:center;text-align:center;padding:24px}
.chm-16__hero h1{font-size:clamp(2rem,7vw,4.4rem);font-weight:700;letter-spacing:-.03em;line-height:.92}
.chm-16__hero h1 em{font-style:normal;color:var(--bubble)}
.chm-16__hero p{font-family:'Martian Mono',monospace;margin-top:14px;font-size:10px;letter-spacing:.25em;text-transform:uppercase;color:rgba(243,240,255,.55)}
.chm-16__fab{position:absolute;bottom:26px;right:26px;z-index:60;width:60px;height:60px;border-radius:50%;cursor:pointer;border:none;
  background:linear-gradient(140deg,var(--bubble),var(--bubble2));display:grid;place-items:center;
  box-shadow:0 14px 38px rgba(255,62,108,.5);transition:transform .5s cubic-bezier(.34,1.56,.64,1)}
.chm-16__fab:hover{transform:scale(1.08)}
.chm-16__b{width:22px;height:14px;position:relative;display:inline-block}
.chm-16__b i{position:absolute;left:0;height:2.6px;width:100%;background:#fff;border-radius:3px;transition:transform .5s cubic-bezier(.7,0,.2,1),opacity .3s}
.chm-16__b i:nth-child(1){top:0}.chm-16__b i:nth-child(2){top:6px}.chm-16__b i:nth-child(3){top:12px}
.chm-16.is-open .chm-16__fab{transform:scale(1.05) rotate(90deg)}
.chm-16.is-open .chm-16__b i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.chm-16.is-open .chm-16__b i:nth-child(2){opacity:0}
.chm-16.is-open .chm-16__b i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.chm-16__ripple{position:absolute;inset:0;z-index:50;
  background:radial-gradient(circle at bottom right,var(--bubble2),var(--bubble) 55%,#1c0f2e);
  -webkit-clip-path:circle(0px at calc(100% - 56px) calc(100% - 56px));
  clip-path:circle(0px at calc(100% - 56px) calc(100% - 56px));
  transition:clip-path .8s cubic-bezier(.76,0,.24,1),-webkit-clip-path .8s cubic-bezier(.76,0,.24,1);pointer-events:none;
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:0 10%;gap:4px}
.chm-16.is-open .chm-16__ripple{-webkit-clip-path:circle(150% at calc(100% - 56px) calc(100% - 56px));clip-path:circle(150% at calc(100% - 56px) calc(100% - 56px));pointer-events:auto}
.chm-16__lbl{font-family:'Martian Mono',monospace;font-size:10px;letter-spacing:.4em;text-transform:uppercase;color:var(--mint);margin-bottom:22px;opacity:0;transition:.4s .4s}
.chm-16.is-open .chm-16__lbl{opacity:1}
.chm-16__ripple a{font-size:clamp(1.8rem,6vw,3.4rem);font-weight:700;color:#fff;text-decoration:none;line-height:1.1;letter-spacing:-.02em;transition:transform .3s,opacity .3s;opacity:0;transform:translateX(-40px)}
.chm-16.is-open .chm-16__ripple a{opacity:1;transform:none}
.chm-16.is-open .chm-16__ripple a:nth-child(2){transition:.5s .42s}
.chm-16.is-open .chm-16__ripple a:nth-child(3){transition:.5s .5s}
.chm-16.is-open .chm-16__ripple a:nth-child(4){transition:.5s .58s}
.chm-16.is-open .chm-16__ripple a:nth-child(5){transition:.5s .66s}
.chm-16__ripple a:hover{color:var(--mint)}
.chm-16__tag{position:absolute;bottom:18px;left:24px;z-index:5;font-family:'Martian Mono',monospace;font-size:10px;letter-spacing:.3em;color:rgba(243,240,255,.45)}

@media (prefers-reduced-motion: reduce){
  .chm-16__fab,.chm-16__b i,.chm-16__ripple,.chm-16__ripple a,.chm-16__lbl{transition:none !important}
}
```

**JS:**
```js
(() => {
  const root = document.querySelector('.chm-16');
  if (!root) return;
  const btn = root.querySelector('.chm-16__fab');
  btn.addEventListener('click', () => root.classList.toggle('is-open'));
})();
```

### 17. Fixed Sticky Header with Shrinking Hamburger Icon

**Type:** CSS + JS
**Description:** Scroll-linked sticky header that compresses padding, shrinks the logo mark, and scales the hamburger down smoothly past a scroll threshold — scroll up to expand again.

**HTML:**
```html
<div class="chm-17">
  <div class="chm-17__scene">
    <header id="chm-17-hd" class="chm-17__header">
      <div class="chm-17__logo"><span class="chm-17__mk"></span>Altitude</div>
      <button class="chm-17__burger" aria-label="Toggle menu"><span class="chm-17__b"><i></i><i></i><i></i></span></button>
    </header>

    <div class="chm-17__scrim"></div>
    <aside class="chm-17__sheet">
      <a href="#">Home</a><a href="#">Features</a><a href="#">Stories</a><a href="#">Pricing</a><a href="#">Contact</a>
    </aside>

    <div class="chm-17__scroller">
      <section class="chm-17__hero">
        <div class="chm-17__eyebrow">Sticky · Scroll-linked</div>
        <h1>Scroll down — <em>watch it shrink.</em></h1>
        <div class="chm-17__scrolltip">Header compresses, icon scales down</div>
      </section>
      <section class="chm-17__block"><h2>The header stayed pinned. <b>The hamburger got smaller and tighter</b> the moment you scrolled.</h2></section>
      <section class="chm-17__block"><h2>Still here, still compact. <b>Smooth scroll-linked transitions</b> — no layout jump.</h2></section>
      <section class="chm-17__block"><h2><b>Scroll back up</b> and everything expands again.</h2></section>
    </div>
    <div class="chm-17__tag">STICKY_SHRINK // 2030</div>
  </div>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400..800&family=Overpass+Mono:wght@400;600&display=swap');
.chm-17, .chm-17 *, .chm-17 *::before, .chm-17 *::after { box-sizing: border-box; margin: 0; padding: 0; }
.chm-17{
  --bg:#0f1218;--accent:#ff5a3c;--gold:#ffd23f;--fog:#f1f0ec;--muted:#8b909c;--line:rgba(241,240,236,.08);
  min-height:460px;display:grid;place-items:stretch;
  font-family:'Bricolage Grotesque',sans-serif;background:var(--bg);color:var(--fog);
  position:relative;
}
.chm-17__scene{position:relative;width:100%;min-height:460px;height:100%;overflow:hidden}
.chm-17__scroller{position:relative;width:100%;height:460px;overflow-y:auto;scroll-behavior:smooth}
.chm-17__header{position:absolute;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;justify-content:space-between;
  padding:20px clamp(18px,4vw,40px);
  background:rgba(15,18,24,0);backdrop-filter:blur(0px);border-bottom:1px solid transparent;
  transition:padding .4s ease,background .4s,backdrop-filter .4s,border-color .4s}
.chm-17__header.is-scrolled{padding:10px clamp(18px,4vw,40px);background:rgba(15,18,24,.82);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.chm-17__logo{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:-.02em;font-size:1.25rem;transition:font-size .4s}
.chm-17__header.is-scrolled .chm-17__logo{font-size:1rem}
.chm-17__mk{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,var(--accent),var(--gold));transition:width .4s,height .4s}
.chm-17__header.is-scrolled .chm-17__mk{width:22px;height:22px}
.chm-17__burger{width:52px;height:52px;border-radius:14px;background:rgba(241,240,236,.05);border:1px solid var(--line);cursor:pointer;display:grid;place-items:center;
  transition:width .4s,height .4s,border-radius .4s}
.chm-17__header.is-scrolled .chm-17__burger{width:38px;height:38px;border-radius:11px}
.chm-17__b{width:22px;height:14px;position:relative;transition:transform .4s;display:inline-block}
.chm-17__header.is-scrolled .chm-17__b{transform:scale(.78)}
.chm-17__b i{position:absolute;left:0;height:2.4px;width:100%;background:var(--fog);border-radius:3px;transition:transform .45s cubic-bezier(.7,0,.2,1),opacity .3s,background .4s}
.chm-17__b i:nth-child(1){top:0}.chm-17__b i:nth-child(2){top:6px}.chm-17__b i:nth-child(3){top:12px}
.chm-17.is-open .chm-17__b i:nth-child(1){transform:translateY(6px) rotate(45deg);background:var(--accent)}
.chm-17.is-open .chm-17__b i:nth-child(2){opacity:0}
.chm-17.is-open .chm-17__b i:nth-child(3){transform:translateY(-6px) rotate(-45deg);background:var(--accent)}
.chm-17__sheet{position:absolute;top:0;right:0;height:100%;width:min(300px,84%);z-index:55;background:#141821;border-left:1px solid var(--line);
  transform:translateX(100%);transition:transform .55s cubic-bezier(.16,1,.3,1);padding:90px 24px 24px}
.chm-17.is-open .chm-17__sheet{transform:translateX(0)}
.chm-17__sheet a{display:block;font-size:1.3rem;font-weight:600;color:var(--fog);text-decoration:none;padding:12px 0;border-bottom:1px solid var(--line);transition:color .3s,padding-left .3s}
.chm-17__sheet a:hover{color:var(--accent);padding-left:10px}
.chm-17__scrim{position:absolute;inset:0;z-index:50;background:rgba(15,18,24,.5);opacity:0;pointer-events:none;transition:.4s}
.chm-17.is-open .chm-17__scrim{opacity:1;pointer-events:auto}
.chm-17__scroller section{padding:0 clamp(18px,4vw,40px)}
.chm-17__hero{min-height:460px;display:flex;flex-direction:column;justify-content:center}
.chm-17__eyebrow{font-family:'Overpass Mono',monospace;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-bottom:16px}
.chm-17__hero h1{font-size:clamp(2rem,7vw,4.4rem);font-weight:800;line-height:.92;letter-spacing:-.03em;max-width:14ch}
.chm-17__hero h1 em{font-style:normal;color:var(--accent)}
.chm-17__scrolltip{margin-top:24px;font-family:'Overpass Mono',monospace;font-size:11px;color:var(--muted);display:flex;align-items:center;gap:8px}
.chm-17__scrolltip::before{content:"↓";animation:chm-17-b 1.4s infinite}
@keyframes chm-17-b{50%{transform:translateY(5px)}}
.chm-17__block{min-height:360px;display:flex;align-items:center;border-top:1px solid var(--line)}
.chm-17__block h2{font-size:clamp(1.4rem,4vw,2.2rem);font-weight:700;max-width:18ch;color:var(--muted)}
.chm-17__block h2 b{color:var(--fog)}
.chm-17__tag{position:absolute;bottom:18px;left:clamp(18px,4vw,40px);z-index:5;font-family:'Overpass Mono',monospace;font-size:10px;letter-spacing:.3em;color:var(--muted)}

@media (prefers-reduced-motion: reduce){
  .chm-17__header,.chm-17__logo,.chm-17__mk,.chm-17__burger,.chm-17__b,.chm-17__b i,.chm-17__sheet,.chm-17__sheet a,.chm-17__scrim,.chm-17__scroller{transition:none !important;scroll-behavior:auto !important}
  .chm-17__scrolltip::before{animation:none !important}
}
```

**JS:**
```js
(() => {
  const root = document.querySelector('.chm-17');
  if (!root) return;
  const hd = root.querySelector('#chm-17-hd');
  const scroller = root.querySelector('.chm-17__scroller');
  const btn = root.querySelector('.chm-17__burger');
  const scrim = root.querySelector('.chm-17__scrim');
  scroller.addEventListener('scroll', () => {
    hd.classList.toggle('is-scrolled', scroller.scrollTop > 60);
  }, { passive: true });
  btn.addEventListener('click', () => root.classList.toggle('is-open'));
  scrim.addEventListener('click', () => root.classList.remove('is-open'));
})();
```

### 18. Neumorphic Hamburger Menu Toggle Button

**Type:** CSS + JS
**Description:** Soft-UI on the classic #e0e5ec surface — dual light/dark box-shadow for the raised state flipping to inset (sunken) on toggle, with an extruded menu card.

**HTML:**
```html
<div class="chm-18">
  <div class="chm-18__scene">
    <div class="chm-18__stage">
      <div class="chm-18__intro">
        <h1>Soft UI toggle.</h1>
        <p>raised → sunken box-shadow states</p>
      </div>
      <button class="chm-18__neu" aria-label="Toggle menu"><span class="chm-18__b"><i></i><i></i><i></i></span></button>
      <div class="chm-18__card">
        <a href="#"><span class="chm-18__ico">⌂</span>Dashboard</a>
        <a href="#"><span class="chm-18__ico">✦</span>Discover</a>
        <a href="#"><span class="chm-18__ico">♥</span>Favorites</a>
        <a href="#"><span class="chm-18__ico">⚙</span>Settings</a>
      </div>
    </div>
    <div class="chm-18__tag">NEUMORPHIC // 2030</div>
  </div>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600;700&family=Spline+Sans+Mono:wght@400;500&display=swap');
.chm-18, .chm-18 *, .chm-18 *::before, .chm-18 *::after { box-sizing: border-box; margin: 0; padding: 0; }
.chm-18{
  --bg:#e0e5ec;--text:#5a6474;--accent:#6d7cff;--light:#ffffff;--dark:#a3b1c6;
  min-height:460px;display:grid;place-items:stretch;
  font-family:'Quicksand',sans-serif;background:var(--bg);color:var(--text);
  position:relative;
}
.chm-18__scene{position:relative;width:100%;min-height:460px;height:100%;overflow:hidden}
.chm-18__stage{min-height:460px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:34px;padding:24px;text-align:center}
.chm-18__intro h1{font-size:clamp(1.6rem,5vw,2.6rem);font-weight:700;color:#4a5468;letter-spacing:-.01em}
.chm-18__intro p{font-family:'Spline Sans Mono',monospace;margin-top:10px;font-size:11px;letter-spacing:.1em;color:#8a94a6}
.chm-18__neu{width:84px;height:84px;border-radius:26px;cursor:pointer;border:none;background:var(--bg);display:grid;place-items:center;
  box-shadow:10px 10px 22px var(--dark), -10px -10px 22px var(--light);
  transition:box-shadow .4s ease}
.chm-18__neu:hover{box-shadow:8px 8px 18px var(--dark), -8px -8px 18px var(--light)}
.chm-18.is-open .chm-18__neu{box-shadow:inset 8px 8px 16px var(--dark), inset -8px -8px 16px var(--light)}
.chm-18__b{width:34px;height:22px;position:relative;display:inline-block}
.chm-18__b i{position:absolute;left:0;height:4px;width:100%;background:var(--accent);border-radius:4px;transition:transform .5s cubic-bezier(.7,0,.2,1),opacity .3s}
.chm-18__b i:nth-child(1){top:0}.chm-18__b i:nth-child(2){top:9px}.chm-18__b i:nth-child(3){top:18px}
.chm-18.is-open .chm-18__b i:nth-child(1){transform:translateY(9px) rotate(45deg)}
.chm-18.is-open .chm-18__b i:nth-child(2){opacity:0}
.chm-18.is-open .chm-18__b i:nth-child(3){transform:translateY(-9px) rotate(-45deg)}
.chm-18__card{width:min(320px,86%);border-radius:30px;background:var(--bg);padding:16px;
  box-shadow:12px 12px 28px var(--dark), -12px -12px 28px var(--light);
  display:grid;gap:6px;
  max-height:0;opacity:0;transform:translateY(-12px);overflow:hidden;pointer-events:none;
  transition:max-height .5s ease,opacity .4s,transform .5s,padding .4s}
.chm-18.is-open .chm-18__card{max-height:380px;opacity:1;transform:none;pointer-events:auto}
.chm-18__card a{display:flex;align-items:center;gap:14px;padding:12px 16px;border-radius:18px;text-decoration:none;color:var(--text);font-weight:600;font-size:.95rem;
  transition:box-shadow .3s,color .3s}
.chm-18__card a:hover{color:var(--accent);box-shadow:inset 5px 5px 10px var(--dark), inset -5px -5px 10px var(--light)}
.chm-18__ico{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;background:var(--bg);color:var(--accent);font-size:16px;
  box-shadow:5px 5px 10px var(--dark), -5px -5px 10px var(--light)}
.chm-18__tag{position:absolute;bottom:18px;right:24px;font-family:'Spline Sans Mono',monospace;font-size:10px;letter-spacing:.2em;color:#9aa4b6}

@media (prefers-reduced-motion: reduce){
  .chm-18__neu,.chm-18__b i,.chm-18__card,.chm-18__card a{transition:none !important}
}
```

**JS:**
```js
(() => {
  const root = document.querySelector('.chm-18');
  if (!root) return;
  const btn = root.querySelector('.chm-18__neu');
  btn.addEventListener('click', () => root.classList.toggle('is-open'));
})();
```

### 19. Brutalist CSS Bordered Hamburger Menu

**Type:** CSS + JS
**Description:** Indie-hacker brutalism: hot-yellow ground, hard border: 4px solid #000, rigid offset box-shadow that collapses on press, Archivo Black, zero radius.

**HTML:**
```html
<div class="chm-19">
  <div class="chm-19__scene">
    <div class="chm-19__bg"></div>

    <button class="chm-19__burger" aria-label="Toggle menu"><span class="chm-19__b"><i></i><i></i><i></i></span></button>

    <div class="chm-19__scrim"></div>
    <nav class="chm-19__panel">
      <span class="chm-19__h">// MENU.EXE</span>
      <a href="#">Index</a>
      <a href="#">Work</a>
      <a href="#">Info</a>
      <a href="#">Mail</a>
    </nav>

    <div class="chm-19__stage">
      <div class="chm-19__hero">
        <h1><span class="chm-19__fill">RAW</span><br><span class="chm-19__out">EDGES</span></h1>
        <p>HARD BORDERS · OFFSET SHADOWS · NO RADIUS</p>
      </div>
    </div>
    <div class="chm-19__tag">BRUTALIST // 2030</div>
  </div>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=DM+Mono:wght@400;500&family=Space+Grotesk:wght@500;700&display=swap');
.chm-19, .chm-19 *, .chm-19 *::before, .chm-19 *::after { box-sizing: border-box; margin: 0; padding: 0; }
.chm-19{
  --paper:#f7f200;--ink:#000;--white:#fff;--pink:#ff4ec7;--blue:#2d5bff;
  min-height:460px;display:grid;place-items:stretch;
  font-family:'Space Grotesk',sans-serif;background:var(--paper);color:var(--ink);
  position:relative;
}
.chm-19__scene{position:relative;width:100%;min-height:460px;height:100%;overflow:hidden}
.chm-19__bg{position:absolute;inset:0;background-image:linear-gradient(var(--ink) 2px,transparent 2px),linear-gradient(90deg,var(--ink) 2px,transparent 2px);background-size:70px 70px;opacity:.06}
.chm-19__stage{position:relative;z-index:2;min-height:460px;display:flex;flex-direction:column;justify-content:center;padding:0 7%}
.chm-19__hero h1{font-family:'Archivo Black',sans-serif;font-size:clamp(2rem,8vw,5.5rem);line-height:.86;text-transform:uppercase;letter-spacing:-.02em;
  -webkit-text-stroke:2px var(--ink)}
.chm-19__fill{color:var(--ink)}
.chm-19__out{color:var(--paper);-webkit-text-stroke:3px var(--ink)}
.chm-19__hero p{font-family:'DM Mono',monospace;margin-top:18px;font-size:11px;letter-spacing:.05em;background:var(--ink);color:var(--paper);display:inline-block;padding:6px 12px}
.chm-19__burger{position:absolute;top:24px;right:24px;z-index:60;width:64px;height:64px;background:var(--white);border:4px solid var(--ink);cursor:pointer;display:grid;place-items:center;
  box-shadow:7px 7px 0 var(--ink);transition:transform .12s,box-shadow .12s,background .2s}
.chm-19__burger:hover{background:var(--pink)}
.chm-19__burger:active{transform:translate(7px,7px);box-shadow:0 0 0 var(--ink)}
.chm-19__b{width:30px;height:20px;position:relative;display:inline-block}
.chm-19__b i{position:absolute;left:0;height:4px;width:100%;background:var(--ink);transition:transform .4s cubic-bezier(.7,0,.2,1),opacity .25s}
.chm-19__b i:nth-child(1){top:0}.chm-19__b i:nth-child(2){top:8px}.chm-19__b i:nth-child(3){top:16px}
.chm-19.is-open .chm-19__burger{background:var(--blue)}
.chm-19.is-open .chm-19__b i{background:var(--white)}
.chm-19.is-open .chm-19__b i:nth-child(1){transform:translateY(8px) rotate(45deg)}
.chm-19.is-open .chm-19__b i:nth-child(2){opacity:0}
.chm-19.is-open .chm-19__b i:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
.chm-19__panel{position:absolute;top:0;right:0;height:100%;width:min(340px,90%);z-index:50;background:var(--white);border-left:5px solid var(--ink);
  transform:translateX(100%);transition:transform .4s cubic-bezier(.7,0,.2,1);padding:96px 24px 24px}
.chm-19.is-open .chm-19__panel{transform:translateX(0)}
.chm-19__h{font-family:'DM Mono',monospace;font-size:11px;letter-spacing:.2em;background:var(--ink);color:var(--paper);padding:5px 10px;display:inline-block;margin-bottom:22px}
.chm-19__panel a{display:block;font-family:'Archivo Black',sans-serif;font-size:1.3rem;text-transform:uppercase;text-decoration:none;color:var(--ink);
  border:4px solid var(--ink);padding:14px 18px;margin-bottom:14px;background:var(--white);box-shadow:6px 6px 0 var(--ink);
  transition:transform .12s,box-shadow .12s,background .2s,color .2s}
.chm-19__panel a:nth-child(2):hover{background:var(--pink)}
.chm-19__panel a:nth-child(3):hover{background:var(--blue);color:var(--white)}
.chm-19__panel a:nth-child(4):hover{background:var(--paper)}
.chm-19__panel a:nth-child(5):hover{background:var(--pink)}
.chm-19__panel a:hover{transform:translate(6px,6px);box-shadow:0 0 0 var(--ink)}
.chm-19__scrim{position:absolute;inset:0;z-index:45;background:rgba(0,0,0,.2);opacity:0;pointer-events:none;transition:.3s}
.chm-19.is-open .chm-19__scrim{opacity:1;pointer-events:auto}
.chm-19__tag{position:absolute;bottom:24px;left:7%;z-index:5;font-family:'DM Mono',monospace;font-size:11px;letter-spacing:.15em;background:var(--ink);color:var(--paper);padding:4px 8px}

@media (prefers-reduced-motion: reduce){
  .chm-19__burger,.chm-19__b i,.chm-19__panel,.chm-19__panel a,.chm-19__scrim{transition:none !important}
}
```

**JS:**
```js
(() => {
  const root = document.querySelector('.chm-19');
  if (!root) return;
  const btn = root.querySelector('.chm-19__burger');
  const scrim = root.querySelector('.chm-19__scrim');
  btn.addEventListener('click', () => root.classList.toggle('is-open'));
  scrim.addEventListener('click', () => root.classList.remove('is-open'));
})();
```

### 20. 3D Rotating Canvas Mobile Hamburger Menu

**Type:** CSS + JS
**Description:** Advanced showcase — opening the menu pushes the entire page canvas back in 3D with perspective + rotateY() + scale, revealing the navigation sitting behind it.

**HTML:**
```html
<div class="chm-20">
  <div class="chm-20__scene">
    <div class="chm-20__behind">
      <div class="chm-20__lbl">// behind the canvas</div>
      <a href="#">Home</a>
      <a href="#">Universe</a>
      <a href="#">Archive</a>
      <a href="#">Contact</a>
    </div>

    <div class="chm-20__perspective">
      <div class="chm-20__canvas">
        <div class="chm-20__inner">
          <h1>Fold the<br><em>whole page.</em></h1>
          <p>3D perspective · rotateY · scale</p>
        </div>
      </div>
    </div>

    <button class="chm-20__burger" aria-label="Toggle 3D menu"><span class="chm-20__b"><i></i><i></i><i></i></span></button>
    <div class="chm-20__tag">3D_CANVAS // 2030</div>
  </div>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@500;700;800&family=JetBrains+Mono:wght@400;500&display=swap');
.chm-20, .chm-20 *, .chm-20 *::before, .chm-20 *::after { box-sizing: border-box; margin: 0; padding: 0; }
.chm-20{
  --bg:#06070d;--canvas:#10131f;--cyan:#39e6ff;--magenta:#ff48b0;--gold:#ffd84d;--fog:#eef1fb;
  min-height:460px;display:grid;place-items:stretch;
  font-family:'Syne',sans-serif;background:var(--bg);color:var(--fog);
  position:relative;
}
.chm-20__scene{position:relative;width:100%;min-height:460px;height:100%;overflow:hidden}
.chm-20__perspective{position:absolute;inset:0;perspective:1600px;perspective-origin:50% 50%}
.chm-20__behind{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;justify-content:center;padding:0 12%;
  background:radial-gradient(60% 60% at 30% 40%,rgba(57,230,255,.18),transparent 60%),radial-gradient(50% 50% at 80% 70%,rgba(255,72,176,.16),transparent 60%),#0a0c16}
.chm-20__lbl{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.4em;text-transform:uppercase;color:var(--cyan);margin-bottom:22px;opacity:0;transition:.4s .5s}
.chm-20.is-open .chm-20__lbl{opacity:1}
.chm-20__behind a{font-size:clamp(1.6rem,5vw,3rem);font-weight:800;color:var(--fog);text-decoration:none;line-height:1.15;letter-spacing:-.02em;transition:color .3s,transform .3s;opacity:0;transform:translateX(-30px)}
.chm-20.is-open .chm-20__behind a{opacity:1;transform:none}
.chm-20.is-open .chm-20__behind a:nth-child(2){transition:.5s .55s}
.chm-20.is-open .chm-20__behind a:nth-child(3){transition:.5s .63s}
.chm-20.is-open .chm-20__behind a:nth-child(4){transition:.5s .71s}
.chm-20.is-open .chm-20__behind a:nth-child(5){transition:.5s .79s}
.chm-20__behind a:hover{color:var(--magenta)}
.chm-20__canvas{position:absolute;inset:0;z-index:10;background:var(--canvas);transform-origin:right center;
  transition:transform .9s cubic-bezier(.76,0,.24,1),border-radius .9s,box-shadow .9s;
  background-image:radial-gradient(50% 40% at 50% 0%,rgba(255,216,77,.12),transparent 60%)}
.chm-20.is-open .chm-20__canvas{transform:translateX(-58%) scale(.74) rotateY(38deg);border-radius:30px;box-shadow:-40px 40px 100px rgba(0,0,0,.6)}
.chm-20__inner{height:100%;display:flex;flex-direction:column;justify-content:center;padding:0 9%}
.chm-20__inner h1{font-size:clamp(2rem,7vw,4.4rem);font-weight:800;line-height:.9;letter-spacing:-.03em}
.chm-20__inner h1 em{font-style:normal;background:linear-gradient(100deg,var(--cyan),var(--magenta));-webkit-background-clip:text;background-clip:text;color:transparent}
.chm-20__inner p{font-family:'JetBrains Mono',monospace;margin-top:16px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(238,241,251,.55)}
.chm-20__burger{position:absolute;top:22px;right:22px;z-index:40;width:54px;height:54px;border-radius:16px;cursor:pointer;border:none;display:grid;place-items:center;
  background:rgba(238,241,251,.07);border:1px solid rgba(238,241,251,.16);backdrop-filter:blur(12px);transition:transform .5s}
.chm-20__burger:hover{transform:scale(1.06)}
.chm-20__b{width:22px;height:14px;position:relative;display:inline-block}
.chm-20__b i{position:absolute;left:0;height:2.6px;width:100%;background:var(--fog);border-radius:3px;transition:transform .5s cubic-bezier(.7,0,.2,1),opacity .3s,background .4s}
.chm-20__b i:nth-child(1){top:0}.chm-20__b i:nth-child(2){top:6px}.chm-20__b i:nth-child(3){top:12px}
.chm-20.is-open .chm-20__b i:nth-child(1){transform:translateY(6px) rotate(45deg);background:var(--cyan)}
.chm-20.is-open .chm-20__b i:nth-child(2){opacity:0}
.chm-20.is-open .chm-20__b i:nth-child(3){transform:translateY(-6px) rotate(-45deg);background:var(--cyan)}
.chm-20__tag{position:absolute;bottom:20px;left:24px;z-index:40;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.3em;color:rgba(238,241,251,.45)}

@media (prefers-reduced-motion: reduce){
  .chm-20__canvas,.chm-20__behind a,.chm-20__lbl,.chm-20__b i,.chm-20__burger{transition:none !important}
}
```

**JS:**
```js
(() => {
  const root = document.querySelector('.chm-20');
  if (!root) return;
  const btn = root.querySelector('.chm-20__burger');
  btn.addEventListener('click', () => root.classList.toggle('is-open'));
})();
```

---
## 11 CSS Header Designs

URL: https://codefronts.com/layouts/css-header-designs/
Description: 11 hand-coded CSS header designs covering the patterns search demand actually targets — pure-CSS sticky header that solidifies on scroll using scroll-timeline (no JavaScript, no scroll listener, zero impact on Core Web Vitals), CSS Grid mega menu with :focus-within keyboard accessibility, performance-first flexbox 3-column navbar, full-screen overlay hamburger header via checkbox hack, glassmorphism transparent bar with backdrop-filter, sticky announcement bar with grid-template-rows dismiss animation, two-tier double-decker enterprise header, animated link hover effects (scaleX underline, clip-up fill, gradient sweep, dual-layer swap, bracket reveal), vertical sidebar navigation with persistent rail, three-level multi-level dropdown menu via :focus-within, and a shrinking header on scroll using animation-timeline. 10 truly pure-CSS, 1 with a tiny optional vanilla JS snippet. WCAG-aware, prefers-reduced-motion respected, scoped class names that never collide with your existing styles, MIT-licensed.
Demo count: 11

### 01. Pure CSS Fixed Navigation (Sticky Header)

**Type:** Pure CSS
**Description:** A semantic <header> that locks to the top with position:sticky and frosts over on scroll — driven by a scroll-linked CSS animation timeline, not a JS scroll listener, so Core Web Vitals stay clean. Clash Display type over a lime/coral gradient-grid hero with isolated z-index stacking and a graceful mobile collapse.

**HTML:**
```html
<div class="csh-01">
  <div class="csh-01__scroll">
    <header class="csh-01__header">
      <a href="#" class="csh-01__logo"><span class="csh-01__mark">◆</span>Vertex<b>STICKY</b></a>
      <nav class="csh-01__nav">
        <a href="#">Work</a>
        <a href="#">Studio</a>
        <a href="#">Process</a>
        <a href="#">Journal</a>
        <a href="#" class="csh-01__cta">Start →</a>
      </nav>
    </header>

    <section class="csh-01__hero">
      <div class="csh-01__eyebrow">position: sticky · top: 0</div>
      <h1>Locked to the<br><em>viewport.</em></h1>
      <p>SCROLL TO WATCH THE BAR FROST OVER — ZERO JS LISTENERS</p>
      <div class="csh-01__scrollhint">↓ SCROLL ↓</div>
    </section>

    <section class="csh-01__content">
      <div class="csh-01__block"><span>01 / CORE WEB VITALS</span><h2>No scroll handlers, no jank</h2><p>The solidify effect rides a scroll-driven CSS animation timeline instead of a JavaScript scroll listener — so the main thread stays free and Cumulative Layout Shift stays at zero.</p></div>
      <div class="csh-01__block"><span>02 / Z-INDEX STACKING</span><h2>A clean stacking context</h2><p>The header owns an isolated z-index layer above the scroll content, so dropdowns, hero gradients, and grid overlays never fight for paint order.</p></div>
      <div class="csh-01__block"><span>03 / SEMANTICS</span><h2>Real &lt;header&gt; &amp; &lt;nav&gt;</h2><p>Semantic landmarks keep the bar accessible to screen readers and assistive tech while the sticky positioning is handled entirely in CSS.</p></div>
      <div class="csh-01__block"><span>04 / RESPONSIVE</span><h2>Graceful on every width</h2><p>Below the mobile breakpoint the link cluster collapses to the primary call-to-action, keeping the bar tidy without a single media-query hack.</p></div>
    </section>
  </div>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Clash+Display:wght@400;600;700&family=Space+Mono:wght@400;700&display=swap');
@import url('https://fonts.cdnfonts.com/css/clash-display');

.csh-01, .csh-01 *, .csh-01 *::before, .csh-01 *::after { box-sizing: border-box; margin: 0; padding: 0; }
.csh-01 ::selection{background:var(--lime);color:var(--ink)}
.csh-01 ::-moz-selection{background:var(--lime);color:var(--ink)}

.csh-01 {
  --ink:#0b0d12;
  --paper:#f3efe6;
  --lime:#c8ff00;
  --coral:#ff5436;
  --glass:rgba(243,239,230,0.05);
  font-family:'Clash Display','Space Mono',sans-serif;
  background:var(--ink);
  color:var(--paper);
  min-height:100vh;
  position:relative;
}
/* scroll-snap container drives a PURE-CSS background swap via the sticky header's
   own scroll position — no JS scroll listeners. The sentinel + container query
   pattern keeps Core Web Vitals clean. */
.csh-01__scroll{height:100vh;overflow-y:scroll;scroll-behavior:smooth;position:relative}
.csh-01__scroll::-webkit-scrollbar{width:0}

.csh-01__header{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:20px clamp(20px,5vw,56px);
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background .5s cubic-bezier(.16,1,.3,1),backdrop-filter .5s,padding .5s,border-color .5s;
}
/* The sentinel sits flush under the header. Once it scrolls out of view the
   header "sticks" — we detect the transition with an animation-timeline-free
   trick: the header background fades in as the page-top gradient scrolls away
   beneath the translucent bar, reading as a frosted solidify. */
.csh-01__scroll{animation:csh-01-solidify linear;animation-timeline:scroll(self);}
@keyframes csh-01-solidify{
  0%,4%{--bgop:0;--blur:0px;--pad:20px}
  9%,100%{--bgop:.72;--blur:18px;--pad:12px}
}
.csh-01__header{
  background:rgba(11,13,18,var(--bgop,0));
  backdrop-filter:blur(var(--blur,0px)) saturate(140%);
  -webkit-backdrop-filter:blur(var(--blur,0px)) saturate(140%);
  padding-top:var(--pad,20px);padding-bottom:var(--pad,20px);
  border-bottom-color:rgba(243,239,230,calc(var(--bgop,0) * .16));
}
.csh-01__logo{display:flex;align-items:center;gap:12px;font-weight:700;font-size:1.35rem;letter-spacing:-.02em;text-decoration:none;color:var(--paper)}
.csh-01__mark{width:34px;height:34px;border-radius:10px;background:var(--lime);display:grid;place-items:center;color:var(--ink);font-weight:700;
  box-shadow:0 0 0 0 rgba(200,255,0,.5);animation:csh-01-pulse 3s ease-in-out infinite}
@keyframes csh-01-pulse{50%{box-shadow:0 0 0 8px rgba(200,255,0,0)}}
.csh-01__logo b{font-family:'Space Mono',monospace;font-size:.62rem;letter-spacing:.3em;color:var(--lime);align-self:flex-start;margin-top:2px}
.csh-01__nav{display:flex;gap:6px;align-items:center}
.csh-01__nav a{position:relative;text-decoration:none;color:rgba(243,239,230,.78);font-size:.95rem;font-weight:500;padding:8px 14px;border-radius:8px;transition:color .3s,background .3s}
.csh-01__nav a::after{content:'';position:absolute;left:14px;right:14px;bottom:4px;height:1.5px;background:var(--lime);transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.7,0,.2,1)}
.csh-01__nav a:hover{color:var(--paper)}
.csh-01__nav a:hover::after{transform:scaleX(1)}
.csh-01__nav a.csh-01__cta{font-family:'Space Mono',monospace;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;background:var(--paper);color:var(--ink);padding:11px 20px;border-radius:30px;text-decoration:none;font-weight:700;transition:transform .3s cubic-bezier(.34,1.56,.64,1),background .3s,color .3s}
.csh-01__nav a.csh-01__cta::after{display:none}
.csh-01__nav a.csh-01__cta:hover{transform:translateY(-2px);background:var(--lime);color:var(--ink)}

.csh-01__hero{min-height:100vh;display:grid;place-items:center;text-align:center;padding:0 24px;position:relative;
  background:
    radial-gradient(60% 70% at 50% 0%,rgba(200,255,0,.12),transparent 60%),
    radial-gradient(50% 50% at 85% 90%,rgba(255,84,54,.14),transparent 60%),
    var(--ink);}
.csh-01__hero::before{content:'';position:absolute;inset:0;opacity:.5;pointer-events:none;
  background-image:linear-gradient(rgba(243,239,230,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(243,239,230,.04) 1px,transparent 1px);
  background-size:60px 60px;-webkit-mask-image:radial-gradient(circle at 50% 40%,black,transparent 75%);mask-image:radial-gradient(circle at 50% 40%,black,transparent 75%)}
.csh-01__eyebrow{font-family:'Space Mono',monospace;font-size:.72rem;letter-spacing:.45em;text-transform:uppercase;color:var(--lime);margin-bottom:24px;position:relative}
.csh-01__hero h1{font-size:clamp(2.6rem,9vw,6.5rem);font-weight:700;line-height:.92;letter-spacing:-.04em;position:relative}
.csh-01__hero h1 em{font-style:normal;color:var(--coral)}
.csh-01__hero p{font-family:'Space Mono',monospace;margin-top:24px;font-size:11px;letter-spacing:.2em;color:rgba(243,239,230,.5);position:relative}
.csh-01__scrollhint{position:absolute;bottom:36px;left:50%;transform:translateX(-50%);font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.3em;color:rgba(243,239,230,.4);animation:csh-01-bob 2s ease-in-out infinite}
@keyframes csh-01-bob{50%{transform:translateX(-50%) translateY(8px)}}

.csh-01__content{padding:8vh clamp(24px,8vw,120px);max-width:1100px;margin:0 auto;display:grid;gap:48px}
.csh-01__block{border-left:2px solid var(--lime);padding-left:28px}
.csh-01__block span{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.3em;color:var(--coral)}
.csh-01__block h2{font-size:clamp(1.6rem,4vw,2.8rem);font-weight:600;letter-spacing:-.02em;margin:10px 0 12px}
.csh-01__block p{color:rgba(243,239,230,.62);line-height:1.7;max-width:60ch;font-family:'Space Mono',monospace;font-size:.9rem}

@media (max-width:680px){.csh-01__nav a:not(.csh-01__cta){display:none}}
@media (prefers-reduced-motion: reduce){
  .csh-01__scroll{animation:none !important}
  .csh-01__header{background:rgba(11,13,18,.72);backdrop-filter:blur(18px)}
  .csh-01__mark,.csh-01__scrollhint{animation:none !important}
}
```

### 02. CSS Grid Mega Menu Header

**Type:** Pure CSS
**Description:** A multi-column mega menu built with CSS Grid inside a panel that fades and lifts via opacity/visibility, triggered purely by :hover and :focus-within. Editorial Fraunces serif, warm cream palette, gradient feature cards and grain texture — keyboard-accessible and zero-JS, ideal for e-commerce and content-heavy navs.

**HTML:**
```html
<div class="csh-02">
  <div class="csh-02__noise"></div>
  <header class="csh-02__header">
    <div class="csh-02__bar">
      <a href="#" class="csh-02__logo">Mai<em>son</em>.</a>
      <nav class="csh-02__nav">
        <div class="csh-02__item">
          <a href="#">Collections <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M6 9l6 6 6-6"/></svg></a>
          <div class="csh-02__mega">
            <div class="csh-02__col">
              <h4>Apparel</h4>
              <a class="csh-02__link" href="#"><strong>Outerwear</strong><span>Coats · Trench · Shells</span></a>
              <a class="csh-02__link" href="#"><strong>Knitwear</strong><span>Merino · Cashmere</span></a>
              <a class="csh-02__link" href="#"><strong>Tailoring</strong><span>Suits · Blazers</span></a>
            </div>
            <div class="csh-02__col">
              <h4>Accessories</h4>
              <a class="csh-02__link" href="#"><strong>Leather Goods</strong><span>Bags · Wallets</span></a>
              <a class="csh-02__link" href="#"><strong>Eyewear</strong><span>Optical · Sun</span></a>
              <a class="csh-02__link" href="#"><strong>Footwear</strong><span>Boots · Loafers</span></a>
            </div>
            <div class="csh-02__feature">
              <span>// FW 2030</span>
              <h3>The Archive Drop</h3>
              <a href="#">Shop now →</a>
            </div>
          </div>
        </div>
        <div class="csh-02__item">
          <a href="#">Atelier <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M6 9l6 6 6-6"/></svg></a>
          <div class="csh-02__mega">
            <div class="csh-02__col">
              <h4>Services</h4>
              <a class="csh-02__link" href="#"><strong>Made-to-Measure</strong><span>Book a fitting</span></a>
              <a class="csh-02__link" href="#"><strong>Repairs</strong><span>Lifetime care</span></a>
            </div>
            <div class="csh-02__col">
              <h4>Story</h4>
              <a class="csh-02__link" href="#"><strong>Craft</strong><span>Our makers</span></a>
              <a class="csh-02__link" href="#"><strong>Materials</strong><span>Traceable sourcing</span></a>
            </div>
            <div class="csh-02__feature" style="background:linear-gradient(150deg,var(--sage),#65a30d)">
              <span>// VISIT</span>
              <h3>Flagship Tour</h3>
              <a href="#" style="color:var(--sage)">Reserve →</a>
            </div>
          </div>
        </div>
        <div class="csh-02__item"><a href="#" class="csh-02__cta">Account</a></div>
      </nav>
    </div>
  </header>

  <section class="csh-02__hero">
    <div>
      <h1>Hover the<br><em>mega menu.</em></h1>
      <p>CSS Grid · :focus-within · zero javascript</p>
    </div>
  </section>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,900&family=DM+Mono:wght@400;500&display=swap');

.csh-02, .csh-02 *, .csh-02 *::before, .csh-02 *::after { box-sizing: border-box; margin: 0; padding: 0; }
.csh-02 ::selection{background:var(--plum);color:#fff}
.csh-02 ::-moz-selection{background:var(--plum);color:#fff}

.csh-02{
  --bg:#faf6f0;
  --ink:#1a1410;
  --plum:#6d28d9;
  --rust:#c2410c;
  --sage:#3f6212;
  --card:#fffdf9;
  font-family:'Fraunces',serif;
  background:var(--bg);color:var(--ink);
  min-height:100vh;position:relative;overflow-x:hidden;
}
.csh-02__noise{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.04;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

.csh-02__header{position:sticky;top:0;z-index:50;background:rgba(250,246,240,.85);backdrop-filter:blur(16px);border-bottom:1px solid rgba(26,20,16,.08)}
.csh-02__bar{display:flex;align-items:center;justify-content:space-between;padding:0 clamp(20px,5vw,56px);height:74px;max-width:1280px;margin:0 auto}
.csh-02__logo{font-weight:900;font-size:1.5rem;letter-spacing:-.03em;text-decoration:none;color:var(--ink);font-variation-settings:'opsz' 144}
.csh-02__logo em{font-style:italic;color:var(--plum)}
.csh-02__nav{display:flex;align-items:stretch;height:74px}
.csh-02__item{position:relative;display:flex;align-items:center}
.csh-02__item>a{display:flex;align-items:center;gap:6px;height:100%;padding:0 20px;text-decoration:none;color:var(--ink);font-weight:600;font-size:1rem;font-family:'DM Mono',monospace;letter-spacing:-.01em}
.csh-02__item>a svg{width:12px;height:12px;transition:transform .35s cubic-bezier(.7,0,.2,1)}
.csh-02__item:hover>a svg,.csh-02__item:focus-within>a svg{transform:rotate(180deg)}
.csh-02__item>a::after{content:'';position:absolute;left:20px;right:20px;bottom:18px;height:2px;background:var(--rust);transform:scaleX(0);transform-origin:left;transition:transform .3s}
.csh-02__item:hover>a::after,.csh-02__item:focus-within>a::after{transform:scaleX(1)}

/* MEGA PANEL — CSS Grid inside a container that fades + lifts via opacity/visibility,
   triggered purely by :hover and :focus-within. No JS. */
.csh-02__mega{
  position:absolute;top:74px;left:50%;transform:translateX(-50%) translateY(14px);
  width:min(880px,92vw);
  background:var(--card);
  border:1px solid rgba(26,20,16,.08);
  border-radius:22px;
  box-shadow:0 40px 80px -30px rgba(26,20,16,.35),0 0 0 1px rgba(255,255,255,.6) inset;
  padding:28px;
  display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:8px;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .4s cubic-bezier(.16,1,.3,1),transform .45s cubic-bezier(.16,1,.3,1),visibility .4s;
}
.csh-02__item:hover .csh-02__mega,.csh-02__item:focus-within .csh-02__mega{
  opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0);
}
.csh-02__col h4{font-family:'DM Mono',monospace;font-size:.66rem;letter-spacing:.25em;text-transform:uppercase;color:var(--rust);padding:10px 14px 8px}
.csh-02__link{display:block;padding:11px 14px;border-radius:12px;text-decoration:none;color:var(--ink);transition:background .25s,transform .25s}
.csh-02__link strong{display:block;font-weight:600;font-size:1.02rem;letter-spacing:-.01em}
.csh-02__link span{font-family:'DM Mono',monospace;font-size:.72rem;color:rgba(26,20,16,.5)}
.csh-02__link:hover{background:rgba(109,40,217,.06);transform:translateX(4px)}
.csh-02__feature{grid-column:span 1;background:linear-gradient(150deg,var(--plum),#9333ea);border-radius:16px;padding:20px;color:#fff;display:flex;flex-direction:column;justify-content:space-between;min-height:180px}
.csh-02__feature span{font-family:'DM Mono',monospace;font-size:.62rem;letter-spacing:.25em;opacity:.8}
.csh-02__feature h3{font-size:1.5rem;line-height:1.05;font-weight:600;font-style:italic}
.csh-02__feature a{align-self:flex-start;background:#fff;color:var(--plum);font-family:'DM Mono',monospace;font-size:.72rem;font-weight:500;padding:8px 16px;border-radius:30px;text-decoration:none;letter-spacing:.05em}

.csh-02__nav a.csh-02__cta{font-family:'DM Mono',monospace;font-weight:500;font-size:.82rem;background:var(--ink);color:var(--bg);padding:11px 22px;border-radius:30px;text-decoration:none;transition:transform .3s cubic-bezier(.34,1.56,.64,1),color .3s}
.csh-02__nav a.csh-02__cta::after{display:none}
.csh-02__nav a.csh-02__cta:hover{transform:translateY(-2px);color:var(--bg)}

.csh-02__hero{position:relative;z-index:1;min-height:calc(100vh - 74px);display:grid;place-items:center;text-align:center;padding:0 24px}
.csh-02__hero h1{font-size:clamp(2.8rem,10vw,7rem);font-weight:900;line-height:.92;letter-spacing:-.04em;font-variation-settings:'opsz' 144}
.csh-02__hero h1 em{font-style:italic;color:var(--rust)}
.csh-02__hero p{font-family:'DM Mono',monospace;margin-top:22px;font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(26,20,16,.5)}

@media (max-width:860px){.csh-02__nav .csh-02__item:not(:last-child){display:none}.csh-02__mega{display:none}}
@media (prefers-reduced-motion: reduce){.csh-02__mega,.csh-02__item>a svg,.csh-02__link,.csh-02__cta{transition:none !important}}
```

### 03. Flexbox 3-Column Navbar Header

**Type:** CSS + JS
**Description:** The classic performance-first blueprint: logo left, centred navigation, CTA plus search right — held together by display:flex and justify-content:space-between. A floating pill bar on a dark mint/amber stage with stat counters; the fastest, lightest layout with no JS required for the layout itself.

**HTML:**
```html
<div class="csh-03">
  <div class="csh-03__beam"></div>
  <header class="csh-03__header">
    <div class="csh-03__bar">
      <div class="csh-03__left">
        <span class="csh-03__logo">F</span>
        <span class="csh-03__name">Flux<b>FLEXBOX</b></span>
      </div>
      <nav class="csh-03__center">
        <a href="#" class="is-on">Platform</a>
        <a href="#">Pricing</a>
        <a href="#">Docs</a>
        <a href="#">Changelog</a>
        <a href="#">Blog</a>
      </nav>
      <div class="csh-03__right">
        <button class="csh-03__icon" aria-label="Search"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4-4"/></svg></button>
        <a href="#" class="csh-03__cta">Get started</a>
      </div>
    </div>
  </header>

  <section class="csh-03__hero">
    <div class="csh-03__tagline">display: flex · space-between</div>
    <h1>Three columns,<br><em>perfectly aligned.</em></h1>
    <p>The fastest-loading blueprint — logo, centred nav, and a call-to-action, balanced by flexbox alone.</p>
    <div class="csh-03__specs">
      <div class="csh-03__spec"><b>0kb</b>JS for layout</div>
      <div class="csh-03__spec"><b>100</b>Lighthouse</div>
      <div class="csh-03__spec"><b>1</b>flex container</div>
    </div>
  </section>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700;800&family=IBM+Plex+Mono:wght@400;500&display=swap');

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

.csh-03{
  --bg:#0a0e0d;
  --panel:#0f1513;
  --mint:#4ade80;
  --ice:#e6fff4;
  --amber:#fbbf24;
  font-family:'Sora',sans-serif;
  background:
    radial-gradient(70% 50% at 50% -10%,rgba(74,222,128,.1),transparent 60%),
    var(--bg);
  color:var(--ice);
  min-height:100vh;position:relative;overflow-x:hidden;
}
.csh-03__beam{position:absolute;top:0;left:50%;transform:translateX(-50%);width:1px;height:100%;
  background:linear-gradient(180deg,rgba(74,222,128,.4),transparent 40%);opacity:.5;z-index:0}

.csh-03__header{position:sticky;top:0;z-index:50;padding:16px clamp(16px,4vw,40px)}
/* THREE-COLUMN FLEX: logo left · nav centred · actions right.
   space-between handles outer alignment, the centre column flexes to fill. */
.csh-03__bar{
  display:flex;align-items:center;justify-content:space-between;
  max-width:1240px;margin:0 auto;
  background:rgba(15,21,19,.7);
  backdrop-filter:blur(14px);
  border:1px solid rgba(74,222,128,.14);
  border-radius:18px;
  padding:10px 12px 10px 18px;
  box-shadow:0 20px 50px -20px rgba(0,0,0,.6);
}
.csh-03__left{display:flex;align-items:center;gap:11px;flex:0 0 auto}
.csh-03__logo{width:32px;height:32px;border-radius:9px;background:linear-gradient(135deg,var(--mint),#22c55e);display:grid;place-items:center;color:#04150c;font-weight:800;font-size:1rem}
.csh-03__name{font-weight:700;font-size:1.1rem;letter-spacing:-.02em}
.csh-03__name b{font-family:'IBM Plex Mono',monospace;font-weight:400;font-size:.6rem;color:var(--mint);display:block;letter-spacing:.18em;margin-top:-2px}

.csh-03__center{display:flex;gap:4px;flex:1 1 auto;justify-content:center}
.csh-03__center a{position:relative;text-decoration:none;color:rgba(230,255,244,.7);font-size:.92rem;font-weight:500;padding:9px 16px;border-radius:10px;transition:color .3s,background .3s}
.csh-03__center a:hover{color:var(--ice);background:rgba(74,222,128,.08)}
.csh-03__center a.is-on{color:var(--ice);background:rgba(74,222,128,.12)}

.csh-03__right{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.csh-03__icon{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;background:rgba(230,255,244,.05);border:1px solid rgba(230,255,244,.1);color:var(--ice);cursor:pointer;transition:transform .3s cubic-bezier(.34,1.56,.64,1),border-color .3s}
.csh-03__icon:hover{transform:translateY(-2px);border-color:var(--mint)}
.csh-03__icon svg{width:18px;height:18px}
.csh-03__cta{font-family:'IBM Plex Mono',monospace;font-size:.78rem;font-weight:500;letter-spacing:.04em;background:var(--mint);color:#04150c;padding:11px 20px;border-radius:11px;text-decoration:none;transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s}
.csh-03__cta:hover{transform:translateY(-2px);box-shadow:0 8px 24px -6px rgba(74,222,128,.6)}

.csh-03__hero{position:relative;z-index:1;min-height:calc(100vh - 80px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 24px}
.csh-03__tagline{font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.4em;text-transform:uppercase;color:var(--mint);margin-bottom:26px;padding:7px 16px;border:1px solid rgba(74,222,128,.25);border-radius:30px}
.csh-03__hero h1{font-size:clamp(2.6rem,9vw,6rem);font-weight:800;line-height:.95;letter-spacing:-.04em}
.csh-03__hero h1 em{font-style:normal;background:linear-gradient(120deg,var(--mint),var(--amber));-webkit-background-clip:text;background-clip:text;color:transparent}
.csh-03__hero p{font-family:'IBM Plex Mono',monospace;margin-top:24px;font-size:.8rem;letter-spacing:.15em;color:rgba(230,255,244,.5);max-width:46ch}
.csh-03__specs{display:flex;gap:28px;margin-top:44px;flex-wrap:wrap;justify-content:center}
.csh-03__spec{font-family:'IBM Plex Mono',monospace;font-size:.72rem;color:rgba(230,255,244,.55)}
.csh-03__spec b{display:block;font-family:'Sora',sans-serif;font-size:1.5rem;color:var(--ice);font-weight:700}

@media (max-width:760px){.csh-03__center{display:none}.csh-03__name b{display:none}}
@media (prefers-reduced-motion: reduce){.csh-03__icon,.csh-03__cta,.csh-03__center a{transition:none !important}}
```

**JS:**
```js
(() => {
  const root = document.querySelector('.csh-03');
  if (!root) return;
  const links = root.querySelectorAll('.csh-03__center a');
  links.forEach(a => a.addEventListener('click', (e) => {
    e.preventDefault();
    links.forEach(l => l.classList.remove('is-on'));
    a.classList.add('is-on');
  }));
  const icon = root.querySelector('.csh-03__icon');
  if (icon) icon.addEventListener('click', () => {
    icon.style.transform = 'translateY(0) scale(.92)';
    setTimeout(() => { icon.style.transform = ''; }, 150);
  });
})();
```

### 04. Full-Screen Overlay Hamburger Header

**Type:** Pure CSS
**Description:** A full-viewport overlay opened with the checkbox hack (<input type=checkbox> + :checked + sibling selectors) — no JavaScript at all. A circular clip-path reveal, animated aurora backdrop, bars-to-X morph and staggered oversized link entrances on a violet/pink/cyan scheme.

**HTML:**
```html
<div class="csh-04">
  <div class="csh-04__aura"></div>

  <input type="checkbox" id="csh-04-toggle" class="csh-04__toggle">
  <header class="csh-04__header">
    <a href="#" class="csh-04__logo">Over<em>lay</em>°</a>
    <label class="csh-04__trigger" for="csh-04-toggle" aria-label="Toggle menu">
      <span class="csh-04__bars"><span></span><span></span><span></span></span>
    </label>
  </header>

  <nav class="csh-04__overlay">
    <div class="csh-04__eyebrow">Checkbox hack · :checked · no JS</div>
    <ul class="csh-04__menu">
      <li><a href="#"><span class="csh-04__num">01</span>Home</a></li>
      <li><a href="#"><span class="csh-04__num">02</span>Projects</a></li>
      <li><a href="#"><span class="csh-04__num">03</span>About</a></li>
      <li><a href="#"><span class="csh-04__num">04</span>Lab</a></li>
      <li><a href="#"><span class="csh-04__num">05</span>Contact</a></li>
    </ul>
    <div class="csh-04__foot"><a href="#">Instagram</a><a href="#">Dribbble</a><a href="#">hello@overlay.studio</a></div>
  </nav>

  <section class="csh-04__hero">
    <div>
      <h1>Tap the icon.<br><em>Full screen.</em></h1>
      <p>The checkbox hack — zero javascript</p>
    </div>
  </section>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400..800&family=Azeret+Mono:wght@400;500&display=swap');

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

.csh-04{
  --ink:#120c1a;
  --paper:#f7f0ff;
  --violet:#a855f7;
  --pink:#f472b6;
  --cyan:#22d3ee;
  font-family:'Bricolage Grotesque',sans-serif;
  background:var(--ink);color:var(--paper);
  min-height:100vh;position:relative;overflow:hidden;
}
.csh-04__aura{position:absolute;inset:-20%;z-index:0;filter:blur(80px);opacity:.5;
  background:radial-gradient(40% 40% at 25% 30%,var(--violet),transparent 70%),radial-gradient(45% 45% at 78% 70%,var(--pink),transparent 70%),radial-gradient(35% 35% at 60% 25%,var(--cyan),transparent 70%);
  animation:csh-04-drift 18s ease-in-out infinite alternate}
@keyframes csh-04-drift{to{transform:translate(3%,-4%) scale(1.1)}}

.csh-04__header{position:relative;z-index:60;display:flex;align-items:center;justify-content:space-between;padding:22px clamp(20px,5vw,48px)}
.csh-04__logo{font-weight:800;font-size:1.4rem;letter-spacing:-.03em;text-decoration:none;color:var(--paper);position:relative;z-index:60}
.csh-04__logo em{font-style:normal;color:var(--cyan)}

/* CHECKBOX HACK: hidden input + label trigger + :checked sibling selector
   toggle a full-viewport overlay — entirely without JavaScript. */
.csh-04__toggle{position:absolute;opacity:0;pointer-events:none}
.csh-04__trigger{position:relative;z-index:60;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  background:rgba(247,240,255,.06);border:1px solid rgba(247,240,255,.16);backdrop-filter:blur(12px);
  transition:transform .5s cubic-bezier(.16,1,.3,1),border-color .4s}
.csh-04__trigger:hover{transform:scale(1.06);border-color:var(--violet)}
.csh-04__bars{width:24px;height:14px;position:relative;display:block}
.csh-04__bars span{position:absolute;left:0;height:2px;width:100%;background:var(--paper);border-radius:2px;transition:transform .5s cubic-bezier(.7,0,.2,1),opacity .35s,background .4s}
.csh-04__bars span:nth-child(1){top:0}
.csh-04__bars span:nth-child(2){top:6px}
.csh-04__bars span:nth-child(3){top:12px}
.csh-04__toggle:checked ~ .csh-04__header .csh-04__bars span:nth-child(1){transform:translateY(6px) rotate(45deg);background:var(--cyan)}
.csh-04__toggle:checked ~ .csh-04__header .csh-04__bars span:nth-child(2){opacity:0}
.csh-04__toggle:checked ~ .csh-04__header .csh-04__bars span:nth-child(3){transform:translateY(-6px) rotate(-45deg);background:var(--cyan)}

.csh-04__overlay{
  position:absolute;inset:0;z-index:50;
  display:flex;flex-direction:column;justify-content:center;padding:0 clamp(24px,9vw,120px);
  background:rgba(18,12,26,.78);backdrop-filter:blur(28px) saturate(150%);
  -webkit-clip-path:circle(0% at calc(100% - 48px) 50px);clip-path:circle(0% at calc(100% - 48px) 50px);
  transition:clip-path .8s cubic-bezier(.76,0,.24,1),-webkit-clip-path .8s cubic-bezier(.76,0,.24,1);
  pointer-events:none}
.csh-04__toggle:checked ~ .csh-04__overlay{-webkit-clip-path:circle(170% at calc(100% - 48px) 50px);clip-path:circle(170% at calc(100% - 48px) 50px);pointer-events:auto}
.csh-04__eyebrow{font-family:'Azeret Mono',monospace;font-size:11px;letter-spacing:.5em;text-transform:uppercase;color:var(--cyan);margin-bottom:28px;opacity:0;transition:opacity .4s}
.csh-04__toggle:checked ~ .csh-04__overlay .csh-04__eyebrow{opacity:1;transition-delay:.45s}
.csh-04__menu{list-style:none}
.csh-04__menu li{overflow:hidden}
.csh-04__menu a{font-size:clamp(2rem,9vw,4.5rem);font-weight:700;line-height:1.02;letter-spacing:-.03em;color:var(--paper);text-decoration:none;display:inline-block;transform:translateY(120%);transition:transform .7s cubic-bezier(.16,1,.3,1),color .3s}
.csh-04__menu a .csh-04__num{font-family:'Azeret Mono',monospace;font-size:.7rem;vertical-align:super;color:var(--pink);margin-right:.5em;font-weight:500}
.csh-04__menu a:hover{color:var(--violet)}
.csh-04__toggle:checked ~ .csh-04__overlay .csh-04__menu li:nth-child(1) a{transform:translateY(0);transition-delay:.42s}
.csh-04__toggle:checked ~ .csh-04__overlay .csh-04__menu li:nth-child(2) a{transform:translateY(0);transition-delay:.5s}
.csh-04__toggle:checked ~ .csh-04__overlay .csh-04__menu li:nth-child(3) a{transform:translateY(0);transition-delay:.58s}
.csh-04__toggle:checked ~ .csh-04__overlay .csh-04__menu li:nth-child(4) a{transform:translateY(0);transition-delay:.66s}
.csh-04__toggle:checked ~ .csh-04__overlay .csh-04__menu li:nth-child(5) a{transform:translateY(0);transition-delay:.74s}
.csh-04__foot{margin-top:38px;font-family:'Azeret Mono',monospace;font-size:11px;color:rgba(247,240,255,.5);display:flex;gap:20px;flex-wrap:wrap;opacity:0;transition:opacity .4s}
.csh-04__toggle:checked ~ .csh-04__overlay .csh-04__foot{opacity:1;transition-delay:.85s}
.csh-04__foot a{color:inherit;text-decoration:none}
.csh-04__foot a:hover{color:var(--cyan)}

.csh-04__hero{position:relative;z-index:10;min-height:calc(100vh - 100px);display:grid;place-items:center;text-align:center;padding:0 24px;pointer-events:none}
.csh-04__hero h1{font-size:clamp(2.4rem,9vw,5.5rem);font-weight:800;letter-spacing:-.04em;line-height:.92}
.csh-04__hero h1 em{font-style:normal;color:var(--pink)}
.csh-04__hero p{font-family:'Azeret Mono',monospace;margin-top:20px;font-size:11px;letter-spacing:.25em;text-transform:uppercase;color:rgba(247,240,255,.55)}

@media (prefers-reduced-motion: reduce){
  .csh-04__aura{animation:none !important}
  .csh-04__trigger,.csh-04__bars span,.csh-04__overlay,.csh-04__eyebrow,.csh-04__menu a,.csh-04__foot{transition:none !important}
}
```

### 05. Glassmorphism Transparent Header

**Type:** Pure CSS
**Description:** A floating frosted bar using background:rgba() with backdrop-filter:blur(20px) saturate(160%) and inner highlight strokes, blurring against a vibrant animated hero gradient with noise. High-end SaaS aesthetic with Outfit type and a soft mobile collapse.

**HTML:**
```html
<div class="csh-05">
  <div class="csh-05__hero-bg"></div>

  <header class="csh-05__header">
    <div class="csh-05__bar">
      <a href="#" class="csh-05__logo"><span class="csh-05__dot"></span>Prisma</a>
      <nav class="csh-05__nav">
        <a href="#">Features</a>
        <a href="#">Showcase</a>
        <a href="#">Customers</a>
        <a href="#">Pricing</a>
        <a href="#" class="csh-05__cta">Try free</a>
      </nav>
    </div>
  </header>

  <section class="csh-05__hero">
    <div>
      <div class="csh-05__eyebrow">backdrop-filter: blur(20px)</div>
      <h1>Frosted glass,<br><em>floating free.</em></h1>
      <p>A header that melts into the hero behind it</p>
    </div>
  </section>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;800&family=Spline+Sans+Mono:wght@400;500&display=swap');

.csh-05, .csh-05 *, .csh-05 *::before, .csh-05 *::after { box-sizing: border-box; margin: 0; padding: 0; }
.csh-05 ::selection{background:#fff;color:#5f27cd}
.csh-05 ::-moz-selection{background:#fff;color:#5f27cd}

.csh-05{
  --white:#ffffff;
  --glass:rgba(255,255,255,0.12);
  --stroke:rgba(255,255,255,0.28);
  font-family:'Outfit',sans-serif;
  min-height:100vh;position:relative;overflow:hidden;color:var(--white);
  background:#0a0a18;
}
/* Vibrant animated hero "image" the glass blurs against */
.csh-05__hero-bg{position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(45% 55% at 18% 25%,#ff6b9d,transparent 65%),
    radial-gradient(50% 50% at 82% 30%,#feca57,transparent 60%),
    radial-gradient(55% 60% at 50% 95%,#48dbfb,transparent 60%),
    radial-gradient(40% 45% at 70% 75%,#a55eea,transparent 60%),
    linear-gradient(135deg,#5f27cd,#ee5253);
  animation:csh-05-shift 22s ease-in-out infinite alternate}
@keyframes csh-05-shift{50%{filter:hue-rotate(28deg)}to{transform:scale(1.12) translate(-2%,2%)}}
.csh-05__hero-bg::after{content:'';position:absolute;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");opacity:.07;mix-blend-mode:overlay}

.csh-05__header{position:fixed;top:18px;left:50%;transform:translateX(-50%);z-index:50;width:min(1180px,calc(100% - 36px))}
/* GLASSMORPHISM: translucent fill + backdrop blur + inner highlight */
.csh-05__bar{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 14px 12px 22px;
  background:var(--glass);
  backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  border:1px solid var(--stroke);
  border-radius:22px;
  box-shadow:0 8px 40px -8px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.5),inset 0 -1px 0 rgba(255,255,255,.08);
}
.csh-05__logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.25rem;letter-spacing:-.02em;text-decoration:none;color:var(--white)}
.csh-05__dot{width:30px;height:30px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#fff,rgba(255,255,255,.4));box-shadow:0 0 18px rgba(255,255,255,.6)}
.csh-05__nav{display:flex;gap:4px;align-items:center}
.csh-05__nav a{position:relative;text-decoration:none;color:rgba(255,255,255,.82);font-size:.92rem;font-weight:400;padding:9px 16px;border-radius:12px;transition:color .3s,background .3s}
.csh-05__nav a:hover{color:#fff;background:rgba(255,255,255,.14)}
.csh-05__nav a.csh-05__cta{font-family:'Spline Sans Mono',monospace;font-size:.78rem;font-weight:500;letter-spacing:.02em;background:rgba(255,255,255,.92);color:#5f27cd;padding:11px 22px;border-radius:14px;text-decoration:none;transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s,color .3s,background .3s}
.csh-05__nav a.csh-05__cta:hover{transform:translateY(-2px);color:#5f27cd;background:#fff;box-shadow:0 10px 28px -8px rgba(255,255,255,.6)}

.csh-05__hero{position:relative;z-index:10;min-height:100vh;display:grid;place-items:center;text-align:center;padding:0 24px}
.csh-05__eyebrow{font-family:'Spline Sans Mono',monospace;font-size:.72rem;letter-spacing:.4em;text-transform:uppercase;color:rgba(255,255,255,.85);margin-bottom:24px;padding:8px 18px;background:var(--glass);backdrop-filter:blur(10px);border:1px solid var(--stroke);border-radius:30px;display:inline-block}
.csh-05__hero h1{font-size:clamp(2.8rem,11vw,7.5rem);font-weight:800;line-height:.9;letter-spacing:-.045em;text-shadow:0 4px 40px rgba(0,0,0,.25)}
.csh-05__hero h1 em{font-style:normal;font-weight:300}
.csh-05__hero p{font-family:'Spline Sans Mono',monospace;margin-top:24px;font-size:.82rem;letter-spacing:.18em;color:rgba(255,255,255,.78)}

@media (max-width:720px){.csh-05__nav a:not(.csh-05__cta){display:none}}
@media (prefers-reduced-motion: reduce){.csh-05__hero-bg{animation:none !important}.csh-05__nav a,.csh-05__cta{transition:none !important}}
```

### 06. Header with Announcement Bar

**Type:** Pure CSS
**Description:** A marketing alert banner stacked above the nav inside one sticky flex-direction:column wrapper, so banner and nav move as a single unit. Dismissing the banner smoothly collapses it via a grid-template-rows 1fr to 0fr checkbox-hack transition. Bold cream/tomato store aesthetic with Cabinet Grotesk, a shimmer sweep and a cart badge.

**HTML:**
```html
<div class="csh-06">
  <input type="checkbox" id="csh-06-dismiss" class="csh-06__dismiss">
  <div class="csh-06__stack">
    <div class="csh-06__announce">
      <div class="csh-06__announce-inner">
        <div class="csh-06__spark"></div>
        <b>FREE SHIP</b>
        <span>Free shipping on orders over $50 — ends Sunday. <a href="#">Shop the sale →</a></span>
        <label class="csh-06__close" for="csh-06-dismiss" aria-label="Dismiss announcement">
          <svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M5 5l14 14M19 5L5 19"/></svg>
        </label>
      </div>
    </div>
    <nav class="csh-06__nav">
      <div class="csh-06__bar">
        <a href="#" class="csh-06__logo"><span>✦</span>Larder</a>
        <div class="csh-06__links">
          <a href="#">Shop</a>
          <a href="#">Bestsellers</a>
          <a href="#">Recipes</a>
          <a href="#">Gifts</a>
          <a href="#" class="csh-06__cart">Cart <b>3</b></a>
        </div>
      </div>
    </nav>
  </div>

  <section class="csh-06__hero">
    <div class="csh-06__grid"></div>
    <div>
      <h1>One sticky stack.<br><em>Banner + nav.</em></h1>
      <p>flex-direction: column · they move as one · tap ✕ to dismiss</p>
    </div>
  </section>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Cabinet+Grotesk:wght@400;700;800;900&family=Martian+Mono:wght@400;500&display=swap');
@import url('https://api.fontshare.com/v2/css?f[]=cabinet-grotesk@400,700,800,900&display=swap');

.csh-06, .csh-06 *, .csh-06 *::before, .csh-06 *::after { box-sizing: border-box; margin: 0; padding: 0; }
.csh-06 ::selection{background:var(--tomato);color:#fff}
.csh-06 ::-moz-selection{background:var(--tomato);color:#fff}

.csh-06{
  --cream:#fff8ee;
  --ink:#181410;
  --tomato:#e8420c;
  --berry:#b91c5c;
  --gold:#d4a017;
  font-family:'Cabinet Grotesk','Martian Mono',sans-serif;
  background:var(--cream);color:var(--ink);
  min-height:100vh;position:relative;overflow-x:hidden;
}

/* The announcement bar + nav live in ONE vertical flex wrapper that is
   sticky as a unit, so they always move together and content never gets
   covered. Dismissing the bar slides the whole stack up smoothly. */
.csh-06__stack{position:sticky;top:0;z-index:50;display:flex;flex-direction:column}

.csh-06__announce{
  background:linear-gradient(90deg,var(--tomato),var(--berry));
  color:#fff;overflow:hidden;
  display:grid;grid-template-rows:1fr;
  transition:grid-template-rows .5s cubic-bezier(.76,0,.24,1);
}
.csh-06__announce-inner{min-height:0;display:flex;align-items:center;justify-content:center;gap:14px;padding:11px 48px 11px 20px;position:relative;font-family:'Martian Mono',monospace;font-size:.74rem;letter-spacing:.04em}
.csh-06__announce-inner b{font-family:'Cabinet Grotesk',sans-serif;font-weight:800;background:#fff;color:var(--tomato);padding:2px 8px;border-radius:4px;font-size:.72rem;letter-spacing:0}
.csh-06__announce-inner a{color:#fff;text-decoration:underline;text-underline-offset:3px;font-weight:500}
.csh-06__spark{position:absolute;left:0;top:0;height:100%;width:100%;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);
  background-size:50% 100%;background-repeat:no-repeat;animation:csh-06-sweep 4s linear infinite}
@keyframes csh-06-sweep{0%{background-position:-60% 0}100%{background-position:160% 0}}
.csh-06__close{position:absolute;right:14px;top:50%;transform:translateY(-50%);width:26px;height:26px;border-radius:7px;border:none;background:rgba(255,255,255,.18);color:#fff;cursor:pointer;display:grid;place-items:center;transition:background .25s}
.csh-06__close:hover{background:rgba(255,255,255,.32)}
/* dismissed state — checkbox hack collapses the announcement row to 0 */
.csh-06__dismiss{position:absolute;opacity:0;pointer-events:none}
.csh-06__dismiss:checked ~ .csh-06__stack .csh-06__announce{grid-template-rows:0fr}

.csh-06__nav{background:rgba(255,248,238,.9);backdrop-filter:blur(14px);border-bottom:2px solid var(--ink)}
.csh-06__bar{display:flex;align-items:center;justify-content:space-between;padding:0 clamp(20px,5vw,48px);height:72px;max-width:1280px;margin:0 auto}
.csh-06__logo{font-weight:900;font-size:1.5rem;letter-spacing:-.03em;text-decoration:none;color:var(--ink);display:flex;align-items:center;gap:9px}
.csh-06__logo span{width:30px;height:30px;background:var(--ink);color:var(--gold);display:grid;place-items:center;border-radius:8px;font-size:1rem;transform:rotate(-6deg)}
.csh-06__links{display:flex;gap:6px;align-items:center}
.csh-06__links a{position:relative;text-decoration:none;color:var(--ink);font-weight:700;font-size:.95rem;padding:8px 14px;transition:color .25s}
.csh-06__links a::after{content:'';position:absolute;left:14px;right:14px;bottom:2px;height:3px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.7,0,.2,1)}
.csh-06__links a:hover::after{transform:scaleX(1)}
.csh-06__links a.csh-06__cart{font-family:'Martian Mono',monospace;font-size:.78rem;font-weight:500;background:var(--ink);color:var(--cream);padding:11px 20px;border-radius:30px;text-decoration:none;display:flex;align-items:center;gap:8px;transition:transform .3s cubic-bezier(.34,1.56,.64,1),color .3s}
.csh-06__links a.csh-06__cart::after{display:none}
.csh-06__links a.csh-06__cart:hover{transform:translateY(-2px);color:var(--cream)}
.csh-06__cart b{background:var(--tomato);color:#fff;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font-size:.6rem}

.csh-06__hero{position:relative;z-index:1;min-height:80vh;display:grid;place-items:center;text-align:center;padding:8vh 24px}
.csh-06__hero h1{font-size:clamp(2.6rem,10vw,6.5rem);font-weight:900;line-height:.92;letter-spacing:-.04em}
.csh-06__hero h1 em{font-style:normal;color:var(--tomato)}
.csh-06__hero p{font-family:'Martian Mono',monospace;margin-top:22px;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(24,20,16,.55)}
.csh-06__grid{position:absolute;inset:0;z-index:0;opacity:.5;pointer-events:none;
  background-image:linear-gradient(rgba(24,20,16,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(24,20,16,.05) 1px,transparent 1px);background-size:48px 48px;
  -webkit-mask-image:radial-gradient(circle at 50% 40%,black,transparent 75%);mask-image:radial-gradient(circle at 50% 40%,black,transparent 75%)}

@media (max-width:720px){.csh-06__links a:not(.csh-06__cart){display:none}.csh-06__announce-inner{font-size:.66rem;padding-right:44px}}
@media (prefers-reduced-motion: reduce){.csh-06__spark{animation:none !important}.csh-06__announce,.csh-06__cart,.csh-06__links a::after{transition:none !important}}
```

### 07. Two-Tier Double-Decker Header

**Type:** Pure CSS
**Description:** A double-decker layout: a dark utility bar (support, docs, login, language/currency) stacked directly above a larger primary navigation row, grouped inside a single <header> via CSS Grid. The top tier collapses on mobile to reclaim space. Cool cobalt-on-fog enterprise aesthetic with Familjen Grotesk.

**HTML:**
```html
<div class="csh-07">
  <header class="csh-07__header">
    <div class="csh-07__utility">
      <div class="csh-07__utility-inner">
        <div class="csh-07__utility-left">
          <span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 5h18M3 12h18M3 19h18"/></svg>Enterprise portal</span>
          <span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>24/7 support</span>
        </div>
        <div class="csh-07__utility-right">
          <a href="#">Support</a>
          <a href="#">Docs</a>
          <a href="#">Login</a>
          <a href="#" class="csh-07__lang"><b></b>EN / USD</a>
        </div>
      </div>
    </div>
    <div class="csh-07__primary">
      <a href="#" class="csh-07__logo"><span>D</span>Decker</a>
      <nav class="csh-07__nav">
        <a href="#">Products</a>
        <a href="#">Solutions</a>
        <a href="#">Industries</a>
        <a href="#">Resources</a>
        <a href="#">Company</a>
      </nav>
      <label class="csh-07__search">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4-4"/></svg>
        Search…
      </label>
    </div>
  </header>

  <section class="csh-07__hero">
    <div class="csh-07__rule"></div>
    <div>
      <h1>Two tiers,<br><em>one header.</em></h1>
      <p>Utility bar + primary nav · collapses on mobile</p>
    </div>
  </section>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Familjen+Grotesk:wght@400;500;700&family=Spline+Sans+Mono:wght@400;500&display=swap');

.csh-07, .csh-07 *, .csh-07 *::before, .csh-07 *::after { box-sizing: border-box; margin: 0; padding: 0; }
.csh-07 ::selection{background:var(--cobalt);color:#fff}
.csh-07 ::-moz-selection{background:var(--cobalt);color:#fff}

.csh-07{
  --bg:#f0f2f7;
  --ink:#10141f;
  --cobalt:#1f3df0;
  --steel:#5b6478;
  --line:rgba(16,20,31,.1);
  font-family:'Familjen Grotesk',sans-serif;
  background:var(--bg);color:var(--ink);
  min-height:100vh;position:relative;overflow-x:hidden;
}

/* ONE <header> parent, TWO stacked container rows (utility + primary).
   Grid handles the vertical stack; the top tier collapses on mobile. */
.csh-07__header{position:sticky;top:0;z-index:50;display:grid;grid-template-rows:auto auto;
  background:#fff;border-bottom:1px solid var(--line);box-shadow:0 1px 0 var(--line)}

.csh-07__utility{background:var(--ink);color:rgba(255,255,255,.78)}
.csh-07__utility-inner{max-width:1280px;margin:0 auto;height:38px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(16px,4vw,40px);font-family:'Spline Sans Mono',monospace;font-size:.72rem;letter-spacing:.02em}
.csh-07__utility-left{display:flex;gap:18px;align-items:center}
.csh-07__utility-left span{display:flex;align-items:center;gap:6px}
.csh-07__utility-left svg{width:12px;height:12px;opacity:.7}
.csh-07__utility-right{display:flex;gap:4px;align-items:center}
.csh-07__utility-right a{color:rgba(255,255,255,.78);text-decoration:none;padding:5px 10px;border-radius:6px;transition:color .25s,background .25s}
.csh-07__utility-right a:hover{color:#fff;background:rgba(255,255,255,.1)}
.csh-07__lang{display:flex;align-items:center;gap:5px;color:var(--cobalt);font-weight:500}
.csh-07__lang b{width:5px;height:5px;border-radius:50%;background:var(--cobalt)}

.csh-07__primary{max-width:1280px;margin:0 auto;width:100%;height:70px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(16px,4vw,40px)}
.csh-07__logo{display:flex;align-items:center;gap:11px;font-weight:700;font-size:1.5rem;letter-spacing:-.03em;text-decoration:none;color:var(--ink)}
.csh-07__logo span{width:34px;height:34px;border-radius:9px;background:var(--cobalt);color:#fff;display:grid;place-items:center;font-size:1rem;font-weight:700}
.csh-07__nav{display:flex;gap:2px;align-items:center}
.csh-07__nav>a{position:relative;text-decoration:none;color:var(--ink);font-weight:500;font-size:.96rem;padding:10px 16px;border-radius:9px;transition:background .25s}
.csh-07__nav>a:hover{background:rgba(31,61,240,.07)}
.csh-07__nav>a::after{content:'';position:absolute;left:16px;right:16px;bottom:5px;height:2px;background:var(--cobalt);transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.7,0,.2,1)}
.csh-07__nav>a:hover::after{transform:scaleX(1)}
.csh-07__search{display:flex;align-items:center;gap:9px;background:var(--bg);border:1px solid var(--line);border-radius:30px;padding:9px 16px;color:var(--steel);font-family:'Spline Sans Mono',monospace;font-size:.78rem;min-width:200px;cursor:text;transition:border-color .25s}
.csh-07__search:hover{border-color:var(--cobalt)}
.csh-07__search svg{width:15px;height:15px}

.csh-07__hero{position:relative;z-index:1;min-height:calc(100vh - 108px);display:grid;place-items:center;text-align:center;padding:0 24px}
.csh-07__hero h1{font-size:clamp(2.6rem,9vw,6rem);font-weight:700;line-height:.94;letter-spacing:-.04em}
.csh-07__hero h1 em{font-style:normal;color:var(--cobalt)}
.csh-07__hero p{font-family:'Spline Sans Mono',monospace;margin-top:22px;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--steel)}
.csh-07__rule{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.6;
  background-image:linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:80px 100%;
  -webkit-mask-image:linear-gradient(90deg,transparent,black 30%,black 70%,transparent);mask-image:linear-gradient(90deg,transparent,black 30%,black 70%,transparent)}

@media (max-width:820px){
  .csh-07__utility{display:none}      /* top tier collapses to save space */
  .csh-07__search{display:none}
  .csh-07__nav>a:nth-child(n+4){display:none}
}
@media (prefers-reduced-motion: reduce){.csh-07__nav>a,.csh-07__nav>a::after,.csh-07__search,.csh-07__utility-right a{transition:none !important}}
```

### 08. Animated Link Hover Effects Header

**Type:** Pure CSS
**Description:** A micro-interaction showcase where every nav link demonstrates a different hardware-accelerated hover effect: scaleX underline wipe, clip-up text fill, background-size gradient sweep, dual-layer label swap and a bracket reveal. Acid-on-charcoal palette, all transform/opacity based for 100/100 Core Web Vitals.

**HTML:**
```html
<div class="csh-08">
  <div class="csh-08__glow"></div>
  <header class="csh-08__header">
    <a href="#" class="csh-08__logo">Hover<em>FX</em></a>
    <nav class="csh-08__nav">
      <a href="#" class="csh-08__fx-underline">Underline</a>
      <a href="#" class="csh-08__fx-fill"><span class="csh-08__mask"><span data-t="Fill">Fill</span></span></a>
      <a href="#" class="csh-08__fx-sweep">Sweep</a>
      <a href="#" class="csh-08__fx-swap"><span class="csh-08__mask"><span>Swap</span><span>Swap</span></span></a>
      <a href="#" class="csh-08__fx-bracket">Bracket</a>
      <a href="#" class="csh-08__cta">Get it →</a>
    </nav>
  </header>

  <section class="csh-08__hero">
    <div>
      <h1>Hover every<br><em>link.</em></h1>
      <p class="csh-08__hint">Five distinct micro-interactions — <b>scaleX</b>, clip-up fill, <b>background-size</b> sweep, layer swap, and bracket reveal. All GPU-accelerated.</p>
    </div>
  </section>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;700;800&family=Fragment+Mono&display=swap');

.csh-08, .csh-08 *, .csh-08 *::before, .csh-08 *::after { box-sizing: border-box; margin: 0; padding: 0; }
.csh-08 ::selection{background:var(--acid);color:var(--ink)}
.csh-08 ::-moz-selection{background:var(--acid);color:var(--ink)}

.csh-08{
  --ink:#0d0f0e;
  --paper:#ecebe4;
  --acid:#d6f034;
  --hot:#ff4d6d;
  --sky:#4cc9f0;
  font-family:'Hanken Grotesk',sans-serif;
  background:var(--ink);color:var(--paper);
  min-height:100vh;position:relative;overflow-x:hidden;
}
.csh-08__glow{position:absolute;inset:0;z-index:0;opacity:.4;pointer-events:none;
  background:radial-gradient(50% 50% at 50% 0%,rgba(214,240,52,.16),transparent 60%)}

.csh-08__header{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  padding:20px clamp(20px,5vw,52px);background:rgba(13,15,14,.7);backdrop-filter:blur(16px);border-bottom:1px solid rgba(236,235,228,.08)}
.csh-08__logo{font-weight:800;font-size:1.4rem;letter-spacing:-.03em;text-decoration:none;color:var(--paper)}
.csh-08__logo em{font-style:normal;color:var(--acid)}
.csh-08__nav{display:flex;gap:6px;align-items:center}

/* Each link demonstrates a DIFFERENT hardware-accelerated hover micro-interaction.
   All transform/opacity based — no layout thrash, 100/100 CWV friendly. */
.csh-08__nav a{position:relative;text-decoration:none;color:var(--paper);font-weight:500;font-size:.98rem;padding:8px 4px;margin:0 12px;display:inline-block;font-family:'Fragment Mono',monospace}

/* 1 — underline wipe via scaleX */
.csh-08__fx-underline::after{content:'';position:absolute;left:4px;right:4px;bottom:4px;height:2px;background:var(--acid);transform:scaleX(0);transform-origin:right;transition:transform .4s cubic-bezier(.7,0,.2,1)}
.csh-08__fx-underline:hover::after{transform:scaleX(1);transform-origin:left}

/* 2 — text fill: a colored duplicate clips up from below. The mask wrapper is
   sized exactly to the text (overflow:hidden, line-height:1) so the second
   layer is hidden at rest instead of peeking into the link's padding. */
.csh-08__mask{display:inline-block;position:relative;overflow:hidden;line-height:1;vertical-align:top}
.csh-08__fx-fill .csh-08__mask span{display:block;transition:transform .45s cubic-bezier(.7,0,.2,1)}
.csh-08__fx-fill .csh-08__mask span::before{content:attr(data-t);position:absolute;left:0;top:100%;color:var(--hot)}
.csh-08__fx-fill:hover .csh-08__mask span{transform:translateY(-100%)}

/* 3 — background gradient sweep via background-size */
.csh-08__fx-sweep{background-image:linear-gradient(var(--sky),var(--sky));background-repeat:no-repeat;background-position:0 82%;background-size:0% 30%;transition:background-size .4s cubic-bezier(.7,0,.2,1);border-radius:3px}
.csh-08__fx-sweep:hover{background-size:100% 30%}

/* 4 — label swap: two stacked labels inside the tight mask trade places */
.csh-08__fx-swap .csh-08__mask span{display:block;transition:transform .4s cubic-bezier(.7,0,.2,1)}
.csh-08__fx-swap .csh-08__mask span:nth-child(2){position:absolute;left:0;top:0;color:var(--acid);transform:translateY(110%)}
.csh-08__fx-swap:hover .csh-08__mask span:nth-child(1){transform:translateY(-110%)}
.csh-08__fx-swap:hover .csh-08__mask span:nth-child(2){transform:translateY(0)}

/* 5 — bracket reveal */
.csh-08__fx-bracket::before,.csh-08__fx-bracket::after{position:absolute;color:var(--hot);opacity:0;transition:opacity .3s,transform .3s}
.csh-08__fx-bracket::before{content:'[';left:-4px;transform:translateX(6px)}
.csh-08__fx-bracket::after{content:']';right:-4px;transform:translateX(-6px)}
.csh-08__fx-bracket:hover{color:var(--acid)}
.csh-08__fx-bracket:hover::before,.csh-08__fx-bracket:hover::after{opacity:1;transform:translateX(0)}

.csh-08__nav a.csh-08__cta{font-family:'Fragment Mono',monospace;font-size:.8rem;background:var(--acid);color:var(--ink);padding:11px 20px;border-radius:8px;text-decoration:none;font-weight:700;margin-left:10px;overflow:visible;transition:transform .3s cubic-bezier(.34,1.56,.64,1),color .3s}
.csh-08__nav a.csh-08__cta:hover{transform:translateY(-2px);color:var(--ink)}

.csh-08__hero{position:relative;z-index:1;min-height:calc(100vh - 80px);display:grid;place-items:center;text-align:center;padding:0 24px}
.csh-08__hero h1{font-size:clamp(2.4rem,9vw,5.5rem);font-weight:800;line-height:.94;letter-spacing:-.04em}
.csh-08__hero h1 em{font-style:normal;color:var(--acid)}
.csh-08__hint{font-family:'Fragment Mono',monospace;margin-top:24px;font-size:.74rem;letter-spacing:.15em;color:rgba(236,235,228,.5);max-width:52ch}
.csh-08__hint b{color:var(--sky)}

@media (max-width:860px){.csh-08__nav a:not(.csh-08__cta){display:none}}
@media (prefers-reduced-motion: reduce){.csh-08__nav a,.csh-08__nav a *,.csh-08__nav a::after,.csh-08__nav a::before{transition:none !important}}
```

### 09. Vertical Sidebar Navigation Header

**Type:** Pure CSS
**Description:** A persistent left rail using position:fixed, left:0 and height:100vh, with the page content offset cleanly by a matching grid track so nothing overlaps. Animated active-state indicator bar, profile footer and icon links. On mobile it gracefully reflows into a bottom bar. Warm flame/moss portfolio aesthetic with Syne.

**HTML:**
```html
<div class="csh-09">
  <div class="csh-09__layout">
    <header class="csh-09__side">
      <a href="#" class="csh-09__brand"><span>◑</span>Lumen</a>
      <div class="csh-09__tagline">// portfolio · 2030</div>
      <nav class="csh-09__nav">
        <a href="#" class="is-on"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 12l9-9 9 9M5 10v10h14V10"/></svg>Home</a>
        <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg>Work</a>
        <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4 4-6 8-6s8 2 8 6"/></svg>About</a>
        <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 4h16v16H4z"/><path d="M4 9h16M9 9v11"/></svg>Journal</a>
        <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 4h16v12H8l-4 4z"/></svg>Contact</a>
      </nav>
      <div class="csh-09__foot">
        <a href="#" class="csh-09__profile"><span class="csh-09__avatar"></span><span><b>Ada Vesper</b><span>Designer</span></span></a>
      </div>
    </header>

    <main class="csh-09__main">
      <div>
        <h1>Pinned to<br><em>the left.</em></h1>
        <p>position: fixed · height: 100vh · grid offset</p>
      </div>
    </main>
  </div>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@500;700;800&family=Space+Mono:wght@400;700&display=swap');

.csh-09, .csh-09 *, .csh-09 *::before, .csh-09 *::after { box-sizing: border-box; margin: 0; padding: 0; }
.csh-09 ::selection{background:var(--flame);color:var(--bone)}
.csh-09 ::-moz-selection{background:var(--flame);color:var(--bone)}

.csh-09{
  --bg:#16110d;
  --bone:#f5ede1;
  --flame:#ff6b2c;
  --moss:#9ab33d;
  --dim:rgba(245,237,225,.5);
  font-family:'Syne',sans-serif;
  background:var(--bg);color:var(--bone);
  min-height:100vh;position:relative;overflow:hidden;
}
/* Parent uses a grid track: [sidebar] [main]. The fixed sidebar is mirrored by
   a matching column so main content offsets cleanly without overlap. */
.csh-09__layout{display:grid;grid-template-columns:264px 1fr;min-height:100vh}

.csh-09__side{position:fixed;left:0;top:0;height:100vh;width:264px;z-index:50;
  display:flex;flex-direction:column;padding:30px 26px;
  background:linear-gradient(180deg,#1c1610,#15100b);border-right:1px solid rgba(245,237,225,.1)}
.csh-09__brand{display:flex;align-items:center;gap:11px;font-weight:800;font-size:1.4rem;letter-spacing:-.02em;text-decoration:none;color:var(--bone);margin-bottom:8px}
.csh-09__brand span{width:34px;height:34px;border-radius:10px;background:var(--flame);color:#16110d;display:grid;place-items:center;font-weight:800}
.csh-09__tagline{font-family:'Space Mono',monospace;font-size:.62rem;letter-spacing:.25em;text-transform:uppercase;color:var(--dim);margin-bottom:38px;padding-left:2px}

.csh-09__nav{display:flex;flex-direction:column;gap:3px;flex:1}
.csh-09__nav a{position:relative;display:flex;align-items:center;gap:13px;text-decoration:none;color:var(--dim);font-weight:500;font-size:1rem;padding:12px 14px;border-radius:11px;transition:color .25s,background .25s,padding-left .25s}
.csh-09__nav a svg{width:18px;height:18px;flex:0 0 auto}
.csh-09__nav a::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%) scaleY(0);width:3px;height:60%;background:var(--flame);border-radius:3px;transition:transform .3s cubic-bezier(.7,0,.2,1)}
.csh-09__nav a:hover{color:var(--bone);background:rgba(245,237,225,.04);padding-left:18px}
.csh-09__nav a.is-on{color:var(--bone);background:rgba(255,107,44,.12)}
.csh-09__nav a.is-on::before{transform:translateY(-50%) scaleY(1)}

.csh-09__foot{margin-top:auto;padding-top:22px;border-top:1px solid rgba(245,237,225,.1)}
.csh-09__profile{display:flex;align-items:center;gap:11px;text-decoration:none}
.csh-09__avatar{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--moss),var(--flame));flex:0 0 auto}
.csh-09__profile b{display:block;color:var(--bone);font-size:.9rem;font-weight:700}
.csh-09__profile span{font-family:'Space Mono',monospace;font-size:.66rem;color:var(--dim)}

.csh-09__main{grid-column:2;position:relative;display:grid;place-items:center;text-align:center;padding:0 24px;min-height:100vh}
.csh-09__main::before{content:'';position:absolute;inset:0;opacity:.5;pointer-events:none;
  background:radial-gradient(55% 55% at 70% 30%,rgba(255,107,44,.1),transparent 60%),radial-gradient(45% 45% at 30% 80%,rgba(154,179,61,.08),transparent 60%)}
.csh-09__main h1{position:relative;font-size:clamp(2.4rem,8vw,5.5rem);font-weight:800;line-height:.92;letter-spacing:-.04em}
.csh-09__main h1 em{font-style:normal;color:var(--flame)}
.csh-09__main p{position:relative;font-family:'Space Mono',monospace;margin-top:22px;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}

@media (max-width:760px){
  .csh-09__layout{grid-template-columns:1fr}
  .csh-09__side{position:fixed;left:0;right:0;top:auto;bottom:0;height:auto;width:100%;flex-direction:row;align-items:center;padding:12px 16px;border-right:none;border-top:1px solid rgba(245,237,225,.12)}
  .csh-09__brand{margin:0}.csh-09__tagline,.csh-09__foot,.csh-09__nav a span:not(svg){display:none}
  .csh-09__nav{flex-direction:row;justify-content:flex-end;gap:2px}
  .csh-09__nav a{padding:10px}.csh-09__nav a::before{display:none}
  .csh-09__main{grid-column:1;padding-bottom:90px}
}
@media (prefers-reduced-motion: reduce){.csh-09__nav a,.csh-09__nav a::before{transition:none !important}}
```

### 10. Multi-Level Dropdown Menu Header

**Type:** Pure CSS
**Description:** A three-level nested dropdown built from semantic ul/li/ul markup. Sub-lists are absolutely positioned and hidden via opacity/visibility, flying out on li:hover>ul and :focus-within for full keyboard accessibility — level three flies to the right of its level-two parent. A transparent hover bridge spans the gap between trigger and panel so the menu never closes mid-traverse. Editorial Newsreader serif on cream with a hard-shadow editorial look.

**HTML:**
```html
<div class="csh-10">
  <header class="csh-10__header">
    <div class="csh-10__bar">
      <a href="#" class="csh-10__logo">The <em>Gazette</em></a>
      <nav class="csh-10__nav">
        <ul>
          <li><a href="#">Home</a></li>
          <li>
            <a href="#">Sections <svg class="csh-10__chev" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M6 9l6 6 6-6"/></svg></a>
            <ul>
              <li>
                <a href="#">Culture <svg class="csh-10__chev csh-10__chev--side" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M6 9l6 6 6-6"/></svg></a>
                <ul>
                  <li><a href="#">Film<small>23 stories</small></a></li>
                  <li><a href="#">Music<small>14 stories</small></a></li>
                  <li><a href="#">Books<small>31 stories</small></a></li>
                </ul>
              </li>
              <li>
                <a href="#">Politics <svg class="csh-10__chev csh-10__chev--side" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M6 9l6 6 6-6"/></svg></a>
                <ul>
                  <li><a href="#">Elections<small>Live</small></a></li>
                  <li><a href="#">Policy<small>Weekly</small></a></li>
                </ul>
              </li>
              <li><a href="#">Science<small>New</small></a></li>
            </ul>
          </li>
          <li>
            <a href="#">Archive <svg class="csh-10__chev" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M6 9l6 6 6-6"/></svg></a>
            <ul>
              <li><a href="#">2029<small>Vol. XII</small></a></li>
              <li><a href="#">2028<small>Vol. XI</small></a></li>
              <li><a href="#">Earlier<small>Index</small></a></li>
            </ul>
          </li>
          <li><a href="#">About</a></li>
        </ul>
      </nav>
      <a href="#" class="csh-10__cta">Subscribe</a>
    </div>
  </header>

  <section class="csh-10__hero">
    <div>
      <h1>Three levels<br><em>deep.</em></h1>
      <p>Nested ul · li:hover &gt; ul · :focus-within</p>
    </div>
  </section>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,400;6..72,500;6..72,600&family=DM+Mono:wght@400;500&display=swap');

.csh-10, .csh-10 *, .csh-10 *::before, .csh-10 *::after { box-sizing: border-box; margin: 0; padding: 0; }
.csh-10 ::selection{background:var(--ink);color:var(--cream)}
.csh-10 ::-moz-selection{background:var(--ink);color:var(--cream)}

.csh-10{
  --cream:#f6f1e7;
  --ink:#1d1a14;
  --wine:#7c2d3a;
  --gold:#b08442;
  --line:rgba(29,26,20,.12);
  font-family:'Newsreader',serif;
  background:var(--cream);color:var(--ink);
  min-height:100vh;position:relative;
}
.csh-10__header{position:sticky;top:0;z-index:50;background:var(--cream);border-bottom:1px solid var(--ink)}
.csh-10__bar{max-width:1180px;margin:0 auto;height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(18px,4vw,40px)}
.csh-10__logo{font-weight:600;font-size:1.7rem;letter-spacing:-.02em;text-decoration:none;color:var(--ink);font-variation-settings:'opsz' 72}
.csh-10__logo em{font-style:italic;color:var(--wine)}

/* Semantic nested <ul>/<li>/<ul>. Sub-lists are absolutely positioned and
   hidden via opacity/visibility, revealed on li:hover>ul AND :focus-within. */
.csh-10__nav>ul{list-style:none;display:flex;gap:2px}
.csh-10__nav li{position:relative}
.csh-10__nav a{display:flex;align-items:center;gap:7px;text-decoration:none;color:var(--ink);font-size:1.02rem;font-weight:500;padding:10px 15px;border-radius:7px;white-space:nowrap;transition:background .2s,color .2s}
.csh-10__nav a .csh-10__chev{width:9px;height:9px;transition:transform .3s}
.csh-10__nav a:hover,.csh-10__nav a:focus-visible{background:rgba(124,45,58,.08);color:var(--wine)}

.csh-10__nav ul ul{
  list-style:none;position:absolute;min-width:230px;
  background:var(--cream);border:1px solid var(--ink);border-radius:12px;
  padding:7px;box-shadow:8px 10px 0 -2px var(--ink),0 24px 40px -22px rgba(29,26,20,.5);
  opacity:0;visibility:hidden;transform:translateY(8px);pointer-events:none;
  transition:opacity .3s cubic-bezier(.16,1,.3,1),transform .3s cubic-bezier(.16,1,.3,1),visibility .3s;z-index:10}
/* Transparent hover bridge fills the visual gap between trigger and panel so
   the mouse never crosses an un-hoverable dead zone (which would drop :hover).
   It lives on the parent li (always present) and only activates on hover so it
   never blocks neighbouring items at rest. */
.csh-10__nav li::after{content:'';position:absolute;display:none}
.csh-10__nav>ul>li:hover::after,.csh-10__nav>ul>li:focus-within::after{display:block;top:100%;left:0;right:0;height:10px}
.csh-10__nav ul ul li:hover::after,.csh-10__nav ul ul li:focus-within::after{display:block;top:0;bottom:0;left:100%;width:10px;right:auto}
/* LEVEL 2 — sits flush under the top item with an 8px breathing offset */
.csh-10__nav>ul>li>ul{top:100%;left:0;margin-top:8px}
/* LEVEL 3 — flies to the right of its level-2 parent */
.csh-10__nav ul ul ul{top:-8px;left:100%;margin-left:8px}
.csh-10__nav li:hover>ul,.csh-10__nav li:focus-within>ul{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}
.csh-10__nav li:hover>a>.csh-10__chev,.csh-10__nav li:focus-within>a>.csh-10__chev{transform:rotate(180deg)}
.csh-10__nav ul ul a{justify-content:space-between;width:100%;font-size:.96rem;padding:9px 13px}
.csh-10__nav ul ul a .csh-10__chev{transform:rotate(-90deg)}
.csh-10__nav li:hover>a>.csh-10__chev.csh-10__chev--side,.csh-10__nav li:focus-within>a>.csh-10__chev.csh-10__chev--side{transform:rotate(-90deg)}
.csh-10__nav ul ul a small{display:block;font-family:'DM Mono',monospace;font-size:.62rem;color:var(--gold);letter-spacing:.05em;margin-top:2px}

.csh-10__cta{font-family:'DM Mono',monospace;font-size:.78rem;background:var(--ink);color:var(--cream);padding:11px 20px;border-radius:30px;text-decoration:none;font-weight:500;transition:transform .3s cubic-bezier(.34,1.56,.64,1),color .3s}
.csh-10__bar a.csh-10__cta:hover{transform:translateY(-2px);color:var(--cream)}

.csh-10__hero{position:relative;z-index:1;min-height:calc(100vh - 72px);display:grid;place-items:center;text-align:center;padding:0 24px}
.csh-10__hero h1{font-size:clamp(2.6rem,9vw,6rem);font-weight:600;line-height:.96;letter-spacing:-.03em;font-variation-settings:'opsz' 72}
.csh-10__hero h1 em{font-style:italic;color:var(--wine)}
.csh-10__hero p{font-family:'DM Mono',monospace;margin-top:22px;font-size:.76rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(29,26,20,.5)}

@media (max-width:820px){.csh-10__nav{display:none}}
@media (prefers-reduced-motion: reduce){.csh-10__nav ul ul,.csh-10__nav a,.csh-10__chev,.csh-10__cta{transition:none !important}}
```

### 11. Shrinking Header on Scroll

**Type:** Pure CSS
**Description:** A large expressive bar on load that smoothly compacts into a floating pill as you scroll, powered by CSS scroll-driven animation (animation-timeline:scroll()) interpolating height, padding, logo size, blur and corner radius — no JS scroll listeners, with an @supports fallback to a compact bar. Voltage/aqua space aesthetic with Unbounded.

**HTML:**
```html
<div class="csh-11">
  <div class="csh-11__scroll">
    <header class="csh-11__header">
      <div class="csh-11__bar">
        <a href="#" class="csh-11__logo"><span class="csh-11__mark">▲</span><span>Ascend<small>SCROLL TO SHRINK</small></span></a>
        <nav class="csh-11__nav">
          <a href="#">Product</a>
          <a href="#">Method</a>
          <a href="#">Stories</a>
          <a href="#">Pricing</a>
          <a href="#" class="csh-11__cta">Launch →</a>
        </nav>
      </div>
    </header>

    <section class="csh-11__hero">
      <div>
        <div class="csh-11__eyebrow">animation-timeline: scroll()</div>
        <h1>Big on load.<br><em>Compact on scroll.</em></h1>
        <p>PURE CSS SCROLL-DRIVEN ANIMATION — NO LISTENERS</p>
      </div>
      <div class="csh-11__bob">↓ SCROLL ↓</div>
    </section>

    <section class="csh-11__content">
      <div class="csh-11__card"><span>01 / SCROLL TIMELINE</span><h2>The bar consumes a scroll() timeline</h2><p>As the scroller advances through its first 220px, the header animation interpolates height, padding, logo size, blur and corner radius — collapsing the expressive bar into a floating pill.</p></div>
      <div class="csh-11__card"><span>02 / NO JANK</span><h2>Off the main thread</h2><p>Because there is no scroll event handler, the shrink runs on the compositor and never blocks interaction or trips Cumulative Layout Shift.</p></div>
      <div class="csh-11__card"><span>03 / GRACEFUL FALLBACK</span><h2>@supports safety net</h2><p>Browsers without scroll-driven animation simply render the compact bar by default, so the layout stays correct everywhere.</p></div>
    </section>
  </div>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@400;600;800&family=Azeret+Mono:wght@400;500&display=swap');

.csh-11, .csh-11 *, .csh-11 *::before, .csh-11 *::after { box-sizing: border-box; margin: 0; padding: 0; }
.csh-11 ::selection{background:var(--volt);color:var(--abyss)}
.csh-11 ::-moz-selection{background:var(--volt);color:var(--abyss)}

.csh-11{
  --abyss:#070a16;
  --foam:#eaf2ff;
  --volt:#7c5cff;
  --aqua:#22e0c4;
  --rose:#ff5e8a;
  font-family:'Unbounded',sans-serif;
  background:var(--abyss);color:var(--foam);
  min-height:100vh;position:relative;
}
/* Scroll-driven shrink: the inner scroller exposes a scroll() timeline that an
   animation on the header consumes — big expressive bar collapses into a compact
   pill in the first slice of scroll. No JS scroll listeners. */
.csh-11__scroll{height:100vh;overflow-y:scroll;position:relative;scroll-behavior:smooth;
  animation:csh-11-shrink linear both;animation-timeline:scroll(self);animation-range:0 220px}
.csh-11__scroll::-webkit-scrollbar{width:0}
@keyframes csh-11-shrink{
  0%  {--h:108px;--pad:0px;--logo:2rem;--bg:0;--blur:0px;--radius:0px;--mx:0px;--bar:1}
  100%{--h:62px; --pad:14px;--logo:1.25rem;--bg:.8;--blur:18px;--radius:18px;--mx:18px;--bar:0}
}
.csh-11{--h:108px;--pad:0px;--logo:2rem;--bg:0;--blur:0px;--radius:0px;--mx:0px;--bar:1}

.csh-11__header{position:sticky;top:0;z-index:50;padding:var(--pad) var(--mx)}
.csh-11__bar{
  height:var(--h);display:flex;align-items:center;justify-content:space-between;
  padding:0 clamp(20px,5vw,48px);max-width:1280px;margin:0 auto;
  background:rgba(7,10,22,var(--bg));backdrop-filter:blur(var(--blur)) saturate(150%);
  border-radius:var(--radius);border:1px solid rgba(234,242,255,calc(var(--bg) * .14));
  transition:none}
.csh-11__logo{display:flex;align-items:center;gap:12px;font-weight:800;letter-spacing:-.03em;text-decoration:none;color:var(--foam);font-size:var(--logo)}
.csh-11__mark{width:calc(var(--logo) * 1.5);height:calc(var(--logo) * 1.5);border-radius:30%;background:linear-gradient(135deg,var(--volt),var(--aqua));display:grid;place-items:center;color:var(--abyss);font-size:calc(var(--logo) * .7);flex:0 0 auto}
.csh-11__logo small{font-family:'Azeret Mono',monospace;font-size:.55rem;letter-spacing:.3em;color:var(--aqua);opacity:var(--bar);transition:opacity .2s;display:block}
.csh-11__nav{display:flex;gap:4px;align-items:center}
.csh-11__nav a{position:relative;text-decoration:none;color:rgba(234,242,255,.78);font-size:.92rem;font-weight:400;padding:9px 15px;border-radius:9px;transition:color .25s,background .25s;font-family:'Azeret Mono',monospace}
.csh-11__nav a::after{content:'';position:absolute;left:15px;right:15px;bottom:5px;height:2px;background:var(--aqua);transform:scaleX(0);transform-origin:left;transition:transform .3s}
.csh-11__nav a:hover{color:var(--foam)}
.csh-11__nav a:hover::after{transform:scaleX(1)}
.csh-11__cta{background:var(--volt);color:var(--foam);padding:10px 20px;border-radius:30px;text-decoration:none;font-family:'Azeret Mono',monospace;font-size:.8rem;font-weight:500;transition:transform .3s cubic-bezier(.34,1.56,.64,1),color .3s}
.csh-11__nav a.csh-11__cta::after{display:none}
.csh-11__nav a.csh-11__cta:hover{transform:translateY(-2px);color:var(--foam)}

.csh-11__hero{min-height:100vh;display:grid;place-items:center;text-align:center;padding:0 24px;position:relative;
  background:radial-gradient(60% 60% at 50% 0%,rgba(124,92,255,.16),transparent 60%),radial-gradient(40% 50% at 85% 90%,rgba(34,224,196,.12),transparent 60%)}
.csh-11__eyebrow{font-family:'Azeret Mono',monospace;font-size:.72rem;letter-spacing:.4em;text-transform:uppercase;color:var(--aqua);margin-bottom:24px}
.csh-11__hero h1{font-size:clamp(2.4rem,8vw,5.5rem);font-weight:800;line-height:.96;letter-spacing:-.03em}
.csh-11__hero h1 em{font-style:normal;background:linear-gradient(120deg,var(--volt),var(--rose));-webkit-background-clip:text;background-clip:text;color:transparent}
.csh-11__hero p{font-family:'Azeret Mono',monospace;margin-top:22px;font-size:.76rem;letter-spacing:.18em;color:rgba(234,242,255,.5)}
.csh-11__bob{position:absolute;bottom:34px;left:50%;transform:translateX(-50%);font-family:'Azeret Mono',monospace;font-size:10px;letter-spacing:.3em;color:rgba(234,242,255,.45);animation:csh-11-bob 2s ease-in-out infinite}
@keyframes csh-11-bob{50%{transform:translateX(-50%) translateY(8px)}}
.csh-11__content{padding:6vh clamp(24px,8vw,140px);max-width:1000px;margin:0 auto;display:grid;gap:30px}
.csh-11__card{background:rgba(234,242,255,.03);border:1px solid rgba(234,242,255,.08);border-radius:18px;padding:30px}
.csh-11__card span{font-family:'Azeret Mono',monospace;font-size:10px;letter-spacing:.25em;color:var(--rose)}
.csh-11__card h2{font-size:clamp(1.4rem,3.5vw,2.2rem);font-weight:600;margin:10px 0 10px;letter-spacing:-.02em}
.csh-11__card p{font-family:'Azeret Mono',monospace;color:rgba(234,242,255,.6);line-height:1.7;font-size:.86rem}

/* Fallback for browsers without scroll-driven animations: a smaller fixed bar */
@supports not (animation-timeline: scroll()){
  .csh-11{--h:72px;--bg:.8;--blur:18px;--radius:18px;--mx:14px;--pad:10px;--logo:1.4rem}
  .csh-11__bar{transition:none}
}
@media (max-width:720px){.csh-11__nav a:not(.csh-11__cta){display:none}}
@media (prefers-reduced-motion: reduce){
  .csh-11__scroll{animation:none !important;--h:72px;--bg:.8;--blur:18px;--radius:18px;--mx:14px;--pad:10px;--logo:1.4rem}
  .csh-11__bob{animation:none !important}
}
```

---
## 30 CSS Hero Sections

URL: https://codefronts.com/layouts/css-hero-sections/
Description: 30 hand-coded CSS hero sections — gradient mesh, glassmorphism, bento, terminal, parallax, 3D card stack, conic orbit and more. No images, copy-paste ready.
Demo count: 30

### 01. Centered Classic

**Type:** Pure CSS
**Description:** The artisanal SaaS hero — eyebrow, serif headline, prose subhead, a single deep-terracotta primary CTA flanked by a quiet ghost button. Sage on warm cream, the small-batch tools-for-makers aesthetic.

**HTML:**
```html
<section class="hs-cls" aria-label="Hero">
  <div class="hs-cls-inner">
    <span class="hs-cls-eye">— A new kind of workspace</span>
    <h2>Make small things <em>that matter.</em></h2>
    <p>
      The toolkit for craftspeople who treat the work, the customer, and the calendar with the same
      care.
    </p>
    <div class="hs-cls-cta">
      <a class="hs-cls-btn hs-cls-btn-pri" href="#start">Start free trial →</a>
      <a class="hs-cls-btn" href="#tour">Watch the tour</a>
    </div>
    <p class="hs-cls-foot">Free for 14 days · no card · cancel any time</p>
  </div>
</section>
```

**CSS:**
```css
.hs-cls {
  display: grid; place-items: center;
  width: 100%; min-height: 480px;
  padding: clamp(32px, 6vw, 80px) clamp(20px, 5vw, 56px);
  background:
    radial-gradient(60% 80% at 50% 0%, rgba(200,160,120,0.18), transparent 70%),
    #f5f1e6;
  font-family: 'Cormorant Garamond', 'Georgia', serif;
  color: #2d3a2e;
  box-sizing: border-box;
}
.hs-cls-inner { max-width: 640px; text-align: center; }
.hs-cls-eye {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; letter-spacing: 0.18em;
  color: #6b7d5a; margin-bottom: 18px;
}
.hs-cls h2 {
  margin: 0 0 18px;
  font-size: clamp(36px, 6vw, 60px);
  font-weight: 600; letter-spacing: -0.02em; line-height: 1.05;
  color: #1a2418;
}
.hs-cls h2 em { color: #c8553d; font-style: italic; }
.hs-cls p {
  margin: 0 auto 28px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 16px; line-height: 1.6;
  color: #4a5447; max-width: 460px;
}
.hs-cls-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 18px; }
.hs-cls-btn {
  display: inline-block; padding: 13px 22px; border-radius: 4px;
  font-family: 'Inter', sans-serif;
  font-size: 14px; font-weight: 600; letter-spacing: 0.01em;
  text-decoration: none;
  transition: transform 0.18s, background 0.18s;
}
.hs-cls-btn-pri { background: #c8553d; color: #fff8ed; box-shadow: 0 2px 0 #8d3a25; }
.hs-cls-btn-pri:hover { transform: translateY(-1px); background: #b94a32; }
.hs-cls-btn { background: transparent; color: #2d3a2e; border: 1px solid #2d3a2e; }
.hs-cls-btn:hover { background: #2d3a2e; color: #f5f1e6; }
.hs-cls-foot {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important; color: #8a9080 !important;
  margin: 0 !important; max-width: none !important;
  letter-spacing: 0.04em;
}
@media (prefers-reduced-motion: reduce) {
  .hs-cls-btn { transition: none; }
}
```

### 02. Split with Mockup

**Type:** Pure CSS
**Description:** Two-column hero with copy left, an SVG-painted dashboard mockup right. Rust red and ochre on deep brown — the heritage industrial / workshop aesthetic.

**HTML:**
```html
<section class="hs-spm" aria-label="Hero">
  <div class="hs-spm-copy">
    <span class="hs-spm-eye">EST. 2024</span>
    <h2>Inventory that <em>actually adds up.</em></h2>
    <p>Stock, batches, suppliers — one ledger, no spreadsheets, no Sundays at the laptop.</p>
    <a class="hs-spm-cta" href="#start">Get started →</a>
  </div>
  <div class="hs-spm-mock" aria-hidden="true">
    <div class="hs-spm-window">
      <header><span></span><span></span><span></span></header>
      <div class="hs-spm-bars">
        <span style="height: 32%"></span>
        <span style="height: 64%"></span>
        <span style="height: 48%"></span>
        <span style="height: 88%"></span>
        <span style="height: 56%"></span>
        <span style="height: 72%"></span>
      </div>
      <div class="hs-spm-line">
        <svg viewBox="0 0 200 60" preserveAspectRatio="none">
          <path
            d="M0,40 Q40,20 80,30 T160,15 T200,20"
            stroke="#d97742"
            stroke-width="2.5"
            fill="none"
          />
        </svg>
      </div>
    </div>
  </div>
</section>
```

**CSS:**
```css
.hs-spm {
  display: grid; grid-template-columns: 1.05fr 1fr;
  width: 100%; min-height: 480px;
  padding: clamp(28px, 5vw, 56px) clamp(20px, 5vw, 56px);
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
  background: #2c1f15;
  font-family: 'Inter', system-ui, sans-serif;
  color: #f5e6d3;
  box-sizing: border-box;
}
.hs-spm-eye {
  display: inline-block; font-size: 11px; font-weight: 700;
  letter-spacing: 0.2em; color: #d97742;
  padding: 4px 10px; border: 1px solid #d97742;
  margin-bottom: 18px;
}
.hs-spm h2 {
  margin: 0 0 16px;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 800; letter-spacing: -0.02em; line-height: 1.05;
  color: #fff8ed;
}
.hs-spm h2 em { color: #d97742; font-style: italic; font-weight: 700; }
.hs-spm p {
  margin: 0 0 26px; font-size: 15.5px; line-height: 1.6;
  color: #c9b5a0; max-width: 460px;
}
.hs-spm-cta {
  display: inline-block; padding: 12px 22px;
  background: #d97742; color: #2c1f15;
  text-decoration: none; font-weight: 700; font-size: 14px;
  border: 0; border-radius: 0;
  box-shadow: 4px 4px 0 #8a4520;
  transition: transform 0.15s, box-shadow 0.15s;
}
.hs-spm-cta:hover { transform: translate(2px,2px); box-shadow: 2px 2px 0 #8a4520; }
.hs-spm-mock {
  background: #1a120a;
  border: 2px solid #6b4427;
  border-radius: 4px;
  padding: 12px;
  box-shadow: 8px 8px 0 #d97742;
}
.hs-spm-window header { display: flex; gap: 6px; padding-bottom: 12px; border-bottom: 1px dashed #6b4427; }
.hs-spm-window header span { width: 10px; height: 10px; border-radius: 50%; background: #6b4427; }
.hs-spm-window header span:nth-child(1) { background: #d97742; }
.hs-spm-window header span:nth-child(2) { background: #b8943f; }
.hs-spm-bars {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px;
  height: 120px; align-items: end;
  margin: 14px 0;
}
.hs-spm-bars span {
  background: linear-gradient(180deg, #d97742, #b85a2c);
  border-radius: 2px 2px 0 0;
}
.hs-spm-bars span:nth-child(2n) { background: linear-gradient(180deg, #b8943f, #8a6c1f); }
.hs-spm-line { height: 60px; }
.hs-spm-line svg { width: 100%; height: 100%; }
@media (max-width: 720px) {
  .hs-spm { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .hs-spm-cta { transition: none; } }
```

### 03. Gradient Mesh

**Type:** Pure CSS
**Description:** Tropical mesh gradient — overlapping radial blobs in mango, papaya, and dragon fruit on a warm coral base. The Stripe / Linear gradient hero, but turned up to a sunset.

**HTML:**
```html
<section class="hs-grm" aria-label="Hero">
  <div class="hs-grm-blobs" aria-hidden="true">
    <span></span><span></span><span></span><span></span>
  </div>
  <div class="hs-grm-inner">
    <span class="hs-grm-eye">launch · summer collection</span>
    <h2>Make your weekends <em>feel like vacation.</em></h2>
    <p>
      The mood-board planner that turns scattered Pinterest tabs into the trip you actually take.
    </p>
    <a class="hs-grm-cta" href="#start">Plan a trip →</a>
  </div>
</section>
```

**CSS:**
```css
.hs-grm {
  position: relative; overflow: hidden;
  display: grid; place-items: center;
  width: 100%; min-height: 480px;
  padding: clamp(32px, 6vw, 80px) clamp(20px, 5vw, 56px);
  background: #ff5e62;
  font-family: 'Inter', system-ui, sans-serif;
  color: #fff;
  box-sizing: border-box;
  contain: layout paint;
}
.hs-grm-blobs { position: absolute; inset: 0; }
.hs-grm-blobs span {
  position: absolute; border-radius: 50%; filter: blur(60px);
  animation: hs-grm-drift 16s ease-in-out infinite alternate;
}
.hs-grm-blobs span:nth-child(1) { top: -10%; left: 10%; width: 460px; height: 460px;
  background: radial-gradient(circle, #ffd23f 0%, transparent 70%); }
.hs-grm-blobs span:nth-child(2) { top: 20%; right: 0; width: 420px; height: 420px;
  background: radial-gradient(circle, #ee4266 0%, transparent 70%); animation-delay: -4s; }
.hs-grm-blobs span:nth-child(3) { bottom: 0; left: 30%; width: 460px; height: 460px;
  background: radial-gradient(circle, #ff7e5f 0%, transparent 70%); animation-delay: -8s; }
.hs-grm-blobs span:nth-child(4) { top: 30%; left: -8%; width: 360px; height: 360px;
  background: radial-gradient(circle, #ffa552 0%, transparent 70%); animation-delay: -12s; }
@keyframes hs-grm-drift {
  0%   { transform: translate(0,0) scale(1); }
  50%  { transform: translate(40px,-30px) scale(1.08); }
  100% { transform: translate(-40px,40px) scale(0.96); }
}
.hs-grm-inner { position: relative; z-index: 1; max-width: 640px; text-align: center; }
.hs-grm-eye {
  display: inline-block; padding: 5px 14px;
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 999px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 22px;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.hs-grm h2 {
  margin: 0 0 18px;
  font-size: clamp(34px, 6vw, 60px);
  font-weight: 900; letter-spacing: -0.025em; line-height: 1.02;
  text-shadow: 0 2px 24px rgba(238,66,102,0.25);
}
.hs-grm h2 em { font-style: italic; font-weight: 800; color: #fff5d2; }
.hs-grm p { margin: 0 auto 28px; font-size: 17px; line-height: 1.55; max-width: 480px; opacity: 0.95; }
.hs-grm-cta {
  display: inline-block; padding: 14px 26px;
  background: #fff; color: #ee4266;
  border-radius: 999px; text-decoration: none;
  font-weight: 700; font-size: 15px;
  box-shadow: 0 12px 30px rgba(238,66,102,0.35);
  transition: transform 0.18s;
}
.hs-grm-cta:hover { transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) {
  .hs-grm-blobs span { animation: none; }
  .hs-grm-cta { transition: none; }
}
```

### 04. Glass over Aurora

**Type:** Pure CSS
**Description:** Frosted-glass card floating over a calm spa aurora — pale mint, champagne gold, soft rose. The wellness / luxury beauty editorial treatment.

**HTML:**
```html
<section class="hs-gla" aria-label="Hero">
  <div class="hs-gla-aurora" aria-hidden="true"></div>
  <article class="hs-gla-card">
    <span class="hs-gla-eye">A daily ritual</span>
    <h2>Skincare without <em>the homework.</em></h2>
    <p>Three minutes. Two products. One routine that fits the life you actually live.</p>
    <a class="hs-gla-cta" href="#start">Find your routine</a>
  </article>
</section>
```

**CSS:**
```css
.hs-gla {
  position: relative; overflow: hidden;
  display: grid; place-items: center;
  width: 100%; min-height: 480px;
  padding: clamp(28px, 5vw, 64px) clamp(20px, 5vw, 56px);
  background:
    radial-gradient(circle at 20% 20%, #d6f0e0 0%, transparent 50%),
    radial-gradient(circle at 85% 30%, #f9d4c8 0%, transparent 55%),
    radial-gradient(circle at 50% 90%, #f3e3c0 0%, transparent 50%),
    #faf6ed;
  font-family: 'Inter', system-ui, sans-serif;
  color: #3d3a2c;
  box-sizing: border-box;
  contain: layout paint;
}
.hs-gla-aurora {
  position: absolute; inset: -10%;
  background: conic-gradient(from 90deg, #d6f0e0, #f9d4c8, #f3e3c0, #d6f0e0);
  filter: blur(50px); opacity: 0.5;
  animation: hs-gla-spin 30s linear infinite;
}
@keyframes hs-gla-spin { to { transform: rotate(360deg); } }
.hs-gla-card {
  position: relative; z-index: 1;
  max-width: 520px;
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(255,255,255,0.85);
  border-radius: 24px;
  padding: clamp(28px, 4vw, 44px);
  text-align: center;
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  box-shadow: 0 22px 60px rgba(195,150,120,0.18);
}
.hs-gla-eye {
  display: inline-block;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 14px; font-style: italic;
  color: #b8956a; margin-bottom: 14px;
}
.hs-gla h2 {
  margin: 0 0 16px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(32px, 5vw, 52px); font-weight: 500;
  letter-spacing: -0.015em; line-height: 1.05;
  color: #2a2818;
}
.hs-gla h2 em { color: #b8956a; font-weight: 600; }
.hs-gla p { margin: 0 auto 24px; font-size: 15px; line-height: 1.6; color: #6b6755; max-width: 380px; }
.hs-gla-cta {
  display: inline-block; padding: 12px 28px;
  background: #2a2818; color: #faf6ed;
  border-radius: 999px; text-decoration: none;
  font-size: 14px; font-weight: 600; letter-spacing: 0.04em;
  transition: background 0.18s;
}
.hs-gla-cta:hover { background: #b8956a; }
@media (prefers-reduced-motion: reduce) {
  .hs-gla-aurora { animation: none; }
  .hs-gla-cta { transition: none; }
}
```

### 05. Terminal Dev Hero

**Type:** Pure CSS
**Description:** Vintage-CRT terminal hero — phosphor green text + amber prompt on a warm beige paper backdrop. The 1970s computing aesthetic for a modern dev tool.

**HTML:**
```html
<section class="hs-trm" aria-label="Hero">
  <div class="hs-trm-copy">
    <h2>Ship from <em>your terminal.</em></h2>
    <p>
      One command. No dashboard. No yak shave. Your CI agrees with your local because they share an
      OS.
    </p>
    <a class="hs-trm-cta" href="#install">Read the docs →</a>
  </div>
  <div class="hs-trm-screen" aria-hidden="true">
    <div class="hs-trm-line">
      <span class="hs-trm-prompt">$</span> swift install <span class="hs-trm-cursor"></span>
    </div>
    <div class="hs-trm-line hs-trm-out">→ resolving dependencies</div>
    <div class="hs-trm-line hs-trm-out">→ compiling 47 modules</div>
    <div class="hs-trm-line hs-trm-out">→ linking binary</div>
    <div class="hs-trm-line hs-trm-ok">✓ shipped in 2.3s</div>
    <div class="hs-trm-line"><span class="hs-trm-prompt">$</span> _</div>
  </div>
</section>
```

**CSS:**
```css
.hs-trm {
  display: grid; grid-template-columns: 1fr 1.05fr;
  width: 100%; min-height: 480px;
  padding: clamp(28px, 5vw, 64px) clamp(20px, 5vw, 56px);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  background:
    repeating-linear-gradient(0deg, transparent 0 31px, rgba(50,30,10,0.04) 31px 32px),
    #f0e4cf;
  font-family: 'Inter', system-ui, sans-serif;
  color: #2a1d0a;
  box-sizing: border-box;
}
.hs-trm h2 {
  margin: 0 0 16px;
  font-family: 'JetBrains Mono', monospace;
  font-size: clamp(34px, 5vw, 54px); font-weight: 800;
  letter-spacing: -0.02em; line-height: 1.05;
}
.hs-trm h2 em { color: #b8580c; font-style: normal; }
.hs-trm h2 em::before { content: '> '; opacity: 0.6; }
.hs-trm p { margin: 0 0 24px; font-size: 15.5px; line-height: 1.6; color: #5a4220; max-width: 440px; }
.hs-trm-cta {
  display: inline-block; padding: 12px 22px;
  background: #2a1d0a; color: #f0e4cf;
  font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 13.5px;
  text-decoration: none; border-radius: 0;
  transition: background 0.15s;
}
.hs-trm-cta:hover { background: #b8580c; }
.hs-trm-screen {
  background: #0d1908;
  border: 2px solid #2a1d0a;
  border-radius: 8px;
  padding: 22px 24px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px; line-height: 1.85;
  box-shadow: 0 0 0 8px rgba(13,25,8,0.1), 0 0 60px rgba(60,255,120,0.18) inset;
}
.hs-trm-line { color: #5fff8c; text-shadow: 0 0 8px rgba(95,255,140,0.5); }
.hs-trm-prompt { color: #ffb348; text-shadow: 0 0 8px rgba(255,179,72,0.5); margin-right: 6px; }
.hs-trm-out { color: #88a890; opacity: 0.9; padding-left: 14px; }
.hs-trm-ok  { color: #5fff8c; padding-left: 14px; font-weight: 700; }
.hs-trm-cursor { display: inline-block; width: 8px; height: 16px; background: #5fff8c; vertical-align: text-bottom; animation: hs-trm-blink 1s steps(2) infinite; }
@keyframes hs-trm-blink { to { opacity: 0; } }
@media (max-width: 720px) {
  .hs-trm { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .hs-trm-cursor { animation: none; }
}
```

### 06. Video Loop Hero

**Type:** Pure CSS
**Description:** Memphis-modern video-pretender — geometric SVG shapes oscillating like a video loop, pinned behind cobalt-on-bone copy with a lemon CTA. No real video, no licensing.

**HTML:**
```html
<section class="hs-vid" aria-label="Hero">
  <div class="hs-vid-shapes" aria-hidden="true">
    <span class="hs-vid-s1"></span>
    <span class="hs-vid-s2"></span>
    <span class="hs-vid-s3"></span>
    <span class="hs-vid-s4"></span>
  </div>
  <div class="hs-vid-content">
    <span class="hs-vid-eye">▸ NOW PLAYING</span>
    <h2>Your portfolio, <em>animated.</em></h2>
    <p>Drop in your projects. We turn them into the kind of motion reel that gets the call back.</p>
    <a class="hs-vid-cta" href="#start">Play with it</a>
  </div>
</section>
```

**CSS:**
```css
.hs-vid {
  position: relative; overflow: hidden;
  display: grid; place-items: center;
  width: 100%; min-height: 480px;
  padding: clamp(28px, 5vw, 64px) clamp(20px, 5vw, 56px);
  background: #f4f1ea;
  font-family: 'Inter', system-ui, sans-serif;
  color: #0b1f4a;
  box-sizing: border-box;
  contain: layout paint;
}
.hs-vid-shapes { position: absolute; inset: 0; pointer-events: none; }
.hs-vid-shapes span {
  position: absolute; animation: hs-vid-bounce 8s ease-in-out infinite alternate;
}
.hs-vid-s1 { top: 8%; left: 6%; width: 110px; height: 110px;
  background: #0b1f4a; border-radius: 50%; }
.hs-vid-s2 { top: 12%; right: 10%; width: 0; height: 0;
  border-left: 70px solid transparent; border-right: 70px solid transparent;
  border-bottom: 120px solid #f5d028; animation-delay: -3s; }
.hs-vid-s3 { bottom: 10%; left: 12%; width: 140px; height: 50px;
  background: #ee5253; border-radius: 999px; animation-delay: -5s; transform: rotate(-12deg); }
.hs-vid-s4 { bottom: 8%; right: 8%; width: 90px; height: 90px;
  background: #0b1f4a; border-radius: 12px; animation-delay: -7s; transform: rotate(15deg); }
@keyframes hs-vid-bounce {
  0%   { transform: translate(0,0) rotate(0deg); }
  100% { transform: translate(20px,-15px) rotate(8deg); }
}
.hs-vid-s2 { animation-name: hs-vid-bounce-tri; }
@keyframes hs-vid-bounce-tri {
  0%   { transform: translate(0,0); }
  100% { transform: translate(-15px,20px); }
}
.hs-vid-content { position: relative; z-index: 1; max-width: 600px; text-align: center; }
.hs-vid-eye {
  display: inline-block; padding: 4px 12px;
  background: #0b1f4a; color: #f5d028;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 700; letter-spacing: 0.18em;
  margin-bottom: 22px;
}
.hs-vid h2 {
  margin: 0 0 16px;
  font-family: 'Inter', sans-serif;
  font-size: clamp(38px, 6vw, 64px);
  font-weight: 900; letter-spacing: -0.03em; line-height: 1;
}
.hs-vid h2 em { color: #ee5253; font-style: italic; font-weight: 900; }
.hs-vid p { margin: 0 auto 28px; font-size: 16px; line-height: 1.55; color: #4a5878; max-width: 460px; }
.hs-vid-cta {
  display: inline-block; padding: 14px 28px;
  background: #f5d028; color: #0b1f4a;
  font-weight: 800; font-size: 14.5px;
  text-decoration: none; border-radius: 4px;
  border: 3px solid #0b1f4a;
  box-shadow: 6px 6px 0 #0b1f4a;
  transition: transform 0.15s, box-shadow 0.15s;
}
.hs-vid-cta:hover { transform: translate(2px,2px); box-shadow: 4px 4px 0 #0b1f4a; }
@media (prefers-reduced-motion: reduce) {
  .hs-vid-shapes span { animation: none; }
  .hs-vid-cta { transition: none; }
}
```

### 07. Social Proof Hero

**Type:** Pure CSS
**Description:** Mediterranean-tone social-proof hero — star rating pill above the headline, customer logo wall on warm cream, olive serif headlines with aubergine accents.

**HTML:**
```html
<section class="hs-sop" aria-label="Hero">
  <div class="hs-sop-inner">
    <span class="hs-sop-stars" aria-label="Rated 4.9 out of 5"
      >★★★★★ <em>4.9 from 12,400 reviews</em></span
    >
    <h2>Recipes from <em>real grandmothers,</em> measured for real kitchens.</h2>
    <p>Saved by 500,000 home cooks who never want to scroll past life-stories again.</p>
    <a class="hs-sop-cta" href="#start">Open the cookbook</a>
    <ul class="hs-sop-logos" aria-label="Featured by">
      <li>NYT</li>
      <li>BON APPÉTIT</li>
      <li>EATER</li>
      <li>GUARDIAN</li>
      <li>SAVEUR</li>
    </ul>
  </div>
</section>
```

**CSS:**
```css
.hs-sop {
  display: grid; place-items: center;
  width: 100%; min-height: 480px;
  padding: clamp(28px, 5vw, 64px) clamp(20px, 5vw, 56px);
  background:
    radial-gradient(70% 60% at 50% 0%, #f7ecd3, transparent 70%),
    #faf3e3;
  font-family: 'Inter', system-ui, sans-serif;
  color: #3a2845;
  box-sizing: border-box;
}
.hs-sop-inner { max-width: 720px; text-align: center; width: 100%; }
.hs-sop-stars {
  display: inline-block; padding: 6px 14px;
  background: #fff; border: 1px solid #e2c89a;
  border-radius: 999px; color: #c9962b;
  font-size: 13px; font-weight: 700; letter-spacing: 0.04em;
  margin-bottom: 22px;
}
.hs-sop-stars em { color: #6b614f; font-style: normal; font-weight: 500; margin-left: 6px; }
.hs-sop h2 {
  margin: 0 0 16px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 600; letter-spacing: -0.01em; line-height: 1.1;
  color: #3a4f2a;
}
.hs-sop h2 em { color: #6b1e4a; font-style: italic; }
.hs-sop p { margin: 0 auto 28px; font-size: 16px; line-height: 1.55; color: #6b614f; max-width: 480px; }
.hs-sop-cta {
  display: inline-block; padding: 13px 26px;
  background: #6b1e4a; color: #faf3e3;
  border-radius: 4px; text-decoration: none;
  font-weight: 700; font-size: 14px; letter-spacing: 0.04em;
  margin-bottom: 32px;
  transition: background 0.18s;
}
.hs-sop-cta:hover { background: #4a1232; }
.hs-sop-logos {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: clamp(20px, 4vw, 38px); justify-content: center;
  padding-top: 24px; border-top: 1px solid #e2c89a;
}
.hs-sop-logos li {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 12px; font-weight: 700; letter-spacing: 0.18em;
  color: #6b614f;
}
@media (prefers-reduced-motion: reduce) { .hs-sop-cta { transition: none; } }
```

### 08. Animated Headline

**Type:** Pure CSS
**Description:** 1950s-diner animated headline — words lift into view with staggered delay, retro coral and ivory on jet black, neon-script CTA. Flips between two taglines on a loop.

**HTML:**
```html
<section class="hs-anh" aria-label="Hero">
  <div class="hs-anh-inner">
    <span class="hs-anh-eye">— OPEN 24 HRS —</span>
    <h2>
      <span class="hs-anh-w" style="--d: 0">Late</span>
      <span class="hs-anh-w" style="--d: 1">night</span>
      <span class="hs-anh-w" style="--d: 2">tunes,</span>
      <br />
      <span class="hs-anh-w" style="--d: 3">made</span>
      <span class="hs-anh-w" style="--d: 4">for</span>
      <span class="hs-anh-w hs-anh-em" style="--d: 5">cruising.</span>
    </h2>
    <p class="hs-anh-sub">A radio station that never sleeps and never sells you anything.</p>
    <a class="hs-anh-cta" href="#tune">Tune in</a>
  </div>
</section>
```

**CSS:**
```css
.hs-anh {
  display: grid; place-items: center;
  width: 100%; min-height: 480px;
  padding: clamp(32px, 5vw, 64px) clamp(20px, 5vw, 56px);
  background: #0d0d0d;
  font-family: 'Inter', system-ui, sans-serif;
  color: #fdf3e0;
  box-sizing: border-box;
}
.hs-anh-inner { max-width: 720px; text-align: center; }
.hs-anh-eye {
  display: inline-block; font-family: 'Courier New', monospace;
  font-size: 12px; letter-spacing: 0.24em; color: #ff7461; margin-bottom: 26px;
}
.hs-anh h2 {
  margin: 0 0 22px;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(38px, 6vw, 68px);
  font-weight: 700; letter-spacing: -0.015em; line-height: 1.05;
  color: #fdf3e0;
}
.hs-anh-w {
  display: inline-block; opacity: 0;
  animation: hs-anh-rise 0.7s cubic-bezier(.22,1,.36,1) forwards;
  animation-delay: calc(var(--d) * 0.12s);
}
.hs-anh-em { color: #ff7461; font-style: italic; }
@keyframes hs-anh-rise {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hs-anh-sub { font-size: 15px; line-height: 1.55; color: #b8a890; margin: 0 auto 28px; max-width: 420px;
  opacity: 0; animation: hs-anh-rise 0.7s cubic-bezier(.22,1,.36,1) 0.8s forwards;
}
.hs-anh-cta {
  display: inline-block; padding: 14px 28px;
  background: transparent; color: #ff7461;
  border: 2px solid #ff7461; border-radius: 999px;
  text-decoration: none; font-weight: 600; font-size: 14.5px; letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0; animation: hs-anh-rise 0.7s cubic-bezier(.22,1,.36,1) 1.1s forwards;
  transition: background 0.18s, color 0.18s;
}
.hs-anh-cta:hover { background: #ff7461; color: #0d0d0d; box-shadow: 0 0 22px rgba(255,116,97,0.5); }
@media (prefers-reduced-motion: reduce) {
  .hs-anh-w, .hs-anh-sub, .hs-anh-cta { animation: none; opacity: 1; }
}
```

### 09. Before/After Hero

**Type:** Light JS
**Description:** Native <code>&lt;input type="range"&gt;</code> drives a CSS clip-path slider that wipes between a "before" desert scene and an "after" lush scene. Burnt orange + petrol blue + cream.

**HTML:**
```html
<section class="hs-baf" aria-label="Hero">
  <div class="hs-baf-stage">
    <div class="hs-baf-after" aria-hidden="true">
      <div class="hs-baf-mountains hs-baf-after-m"></div>
      <span class="hs-baf-sun"></span>
      <span class="hs-baf-label">AFTER</span>
    </div>
    <div class="hs-baf-before" aria-hidden="true" id="hs-baf-clip">
      <div class="hs-baf-mountains hs-baf-before-m"></div>
      <span class="hs-baf-moon"></span>
      <span class="hs-baf-label">BEFORE</span>
    </div>
    <input
      type="range"
      min="0"
      max="100"
      value="50"
      class="hs-baf-slider"
      id="hs-baf-range"
      aria-label="Compare before and after"
      aria-valuetext="50 percent"
    />
    <span class="hs-baf-handle" aria-hidden="true" id="hs-baf-handle"></span>
  </div>
  <div class="hs-baf-copy">
    <h2>Restoration, <em>one acre at a time.</em></h2>
    <p>Drag the slider. We turn dust to forest in 18 months — proven on three continents.</p>
    <a class="hs-baf-cta" href="#donate">Plant a tree →</a>
  </div>
</section>
```

**CSS:**
```css
.hs-baf {
  display: grid; grid-template-columns: 1.1fr 1fr;
  width: 100%; min-height: 480px;
  padding: clamp(24px, 4vw, 48px);
  gap: clamp(20px, 4vw, 48px);
  align-items: center;
  background: #f7ecd9;
  font-family: 'Inter', system-ui, sans-serif;
  color: #2c4a4f;
  box-sizing: border-box;
}
.hs-baf-stage {
  position: relative;
  height: 100%; min-height: 360px;
  border-radius: 12px; overflow: hidden;
  border: 4px solid #2c4a4f;
  box-shadow: 8px 8px 0 #c75a2b;
}
.hs-baf-after, .hs-baf-before { position: absolute; inset: 0; }
.hs-baf-after { background: linear-gradient(180deg, #87b8a8 0%, #c8b890 70%, #d6c69a 100%); }
.hs-baf-before { background: linear-gradient(180deg, #c75a2b 0%, #e8a36e 60%, #f0b87a 100%); clip-path: inset(0 50% 0 0); }
.hs-baf-mountains { position: absolute; bottom: 30%; left: 0; right: 0; height: 40%; }
.hs-baf-after-m {
  background:
    linear-gradient(135deg, transparent 50%, #4a6b58 50%) 0 0/120px 80px,
    linear-gradient(45deg, transparent 50%, #4a6b58 50%) 60px 0/120px 80px;
  background-repeat: repeat-x;
}
.hs-baf-before-m {
  background:
    linear-gradient(135deg, transparent 50%, #8a3614 50%) 0 0/120px 80px,
    linear-gradient(45deg, transparent 50%, #8a3614 50%) 60px 0/120px 80px;
  background-repeat: repeat-x;
}
.hs-baf-sun {
  position: absolute; top: 18%; left: 70%;
  width: 70px; height: 70px; border-radius: 50%;
  background: #f7d875;
  box-shadow: 0 0 50px rgba(247,216,117,0.6);
}
.hs-baf-moon {
  position: absolute; top: 14%; left: 26%;
  width: 60px; height: 60px; border-radius: 50%;
  background: #f7ecd9; box-shadow: 0 0 30px rgba(247,236,217,0.4);
}
.hs-baf-label {
  position: absolute; bottom: 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 700; letter-spacing: 0.18em;
  padding: 4px 10px;
  background: #2c4a4f; color: #f7ecd9;
}
.hs-baf-after .hs-baf-label { right: 14px; }
.hs-baf-before .hs-baf-label { left: 14px; background: #8a3614; }
.hs-baf-slider {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0; cursor: ew-resize; margin: 0;
  z-index: 3;
}
.hs-baf-handle {
  position: absolute; top: 0; bottom: 0; left: 50%;
  width: 3px; background: #f7ecd9;
  box-shadow: 0 0 0 1px #2c4a4f;
  pointer-events: none; z-index: 2;
}
.hs-baf-handle::after {
  content: '⇆'; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 38px; height: 38px;
  background: #f7ecd9; border: 2px solid #2c4a4f;
  border-radius: 50%; color: #2c4a4f;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700;
}
.hs-baf-copy { padding: 12px 0; }
.hs-baf h2 {
  margin: 0 0 14px;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(28px, 4.5vw, 44px);
  font-weight: 700; letter-spacing: -0.01em; line-height: 1.1;
  color: #2c4a4f;
}
.hs-baf h2 em { color: #c75a2b; font-style: italic; }
.hs-baf p { margin: 0 0 22px; font-size: 15px; line-height: 1.6; color: #4a6b58; }
.hs-baf-cta {
  display: inline-block; padding: 12px 22px;
  background: #c75a2b; color: #f7ecd9;
  border-radius: 4px; text-decoration: none;
  font-weight: 700; font-size: 14px;
  transition: background 0.18s;
}
.hs-baf-cta:hover { background: #8a3614; }
@media (max-width: 720px) {
  .hs-baf { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .hs-baf-cta { transition: none; } }
```

**JS:**
```js
(function () {
  var range = document.getElementById('hs-baf-range');
  var clip  = document.getElementById('hs-baf-clip');
  var handle= document.getElementById('hs-baf-handle');
  if (!range || !clip || !handle) return;
  function update() {
    var v = range.value;
    clip.style.clipPath = 'inset(0 ' + (100 - v) + '% 0 0)';
    handle.style.left = v + '%';
    range.setAttribute('aria-valuetext', v + ' percent');
  }
  range.addEventListener('input', update);
  update();
})();
```

### 10. Sticky Scroll Cue

**Type:** Pure CSS
**Description:** Tall full-bleed hero with a bouncing scroll indicator at the bottom. Forest emerald on birch with a soft yellow CTA — the cabin / retreat brand aesthetic.

**HTML:**
```html
<section class="hs-scc" aria-label="Hero">
  <div class="hs-scc-inner">
    <span class="hs-scc-eye">— A small place upstate</span>
    <h2>Slow Sundays, <em>warm wood,</em> not a single notification.</h2>
    <p>Three cabins, two acres, no Wi-Fi, one shared kitchen. Book yourself a real weekend.</p>
    <a class="hs-scc-cta" href="#book">Check availability</a>
  </div>
  <div class="hs-scc-cue" aria-hidden="true">
    <span>scroll</span>
    <div class="hs-scc-mouse"><span></span></div>
  </div>
</section>
```

**CSS:**
```css
.hs-scc {
  position: relative;
  display: grid; place-items: center;
  width: 100%; min-height: 480px;
  padding: clamp(28px, 5vw, 64px) clamp(20px, 5vw, 56px) 90px;
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(38,82,52,0.16), transparent 70%),
    #f3eadb;
  font-family: 'Inter', system-ui, sans-serif;
  color: #1e3a26;
  box-sizing: border-box;
}
.hs-scc-inner { max-width: 720px; text-align: center; }
.hs-scc-eye {
  display: inline-block;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic; font-size: 16px;
  color: #6b8a6f; margin-bottom: 18px;
}
.hs-scc h2 {
  margin: 0 0 18px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(34px, 5vw, 56px);
  font-weight: 600; letter-spacing: -0.015em; line-height: 1.05;
}
.hs-scc h2 em { color: #b8893a; font-style: italic; }
.hs-scc p { margin: 0 auto 26px; font-size: 16px; line-height: 1.55; color: #5a6b58; max-width: 480px; }
.hs-scc-cta {
  display: inline-block; padding: 13px 26px;
  background: #f4d35e; color: #1e3a26;
  border: 2px solid #1e3a26; border-radius: 0;
  text-decoration: none; font-weight: 700; font-size: 14px; letter-spacing: 0.04em;
  box-shadow: 4px 4px 0 #1e3a26;
  transition: transform 0.15s, box-shadow 0.15s;
}
.hs-scc-cta:hover { transform: translate(2px,2px); box-shadow: 2px 2px 0 #1e3a26; }
.hs-scc-cue {
  position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.18em; color: #6b8a6f;
  text-transform: uppercase;
}
.hs-scc-mouse {
  width: 22px; height: 36px;
  border: 2px solid #1e3a26; border-radius: 12px;
  position: relative;
}
.hs-scc-mouse span {
  position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
  width: 3px; height: 7px; background: #1e3a26; border-radius: 2px;
  animation: hs-scc-bounce 1.4s ease-in-out infinite;
}
@keyframes hs-scc-bounce {
  0%, 100% { transform: translate(-50%, 0); opacity: 1; }
  50%      { transform: translate(-50%, 10px); opacity: 0.4; }
}
@media (prefers-reduced-motion: reduce) {
  .hs-scc-mouse span { animation: none; }
  .hs-scc-cta { transition: none; }
}
```

### 11. Magazine Cover

**Type:** Pure CSS
**Description:** Print-magazine cover treatment — issue stamp, oversized italic serif headline, vertical spine label, foil-stamped corner number. Plum and champagne on linen.

**HTML:**
```html
<section class="hs-mag" aria-label="Hero">
  <div class="hs-mag-frame">
    <span class="hs-mag-spine">Vol. XII · No. 47 · Spring</span>
    <span class="hs-mag-num">04</span>
    <header>
      <span class="hs-mag-issue">SPRING 2026 · INDEX NO. 04</span>
    </header>
    <h2>
      The Quiet
      <em>Revolution</em>
      of slow type.
    </h2>
    <p>
      Why every serious editorial brand is going back to serifs, italics, and a single column wide
      enough to think in.
    </p>
    <a class="hs-mag-cta" href="#read">Read the issue →</a>
  </div>
</section>
```

**CSS:**
```css
.hs-mag {
  display: grid; place-items: center;
  width: 100%; min-height: 480px;
  padding: clamp(20px, 4vw, 40px);
  background:
    repeating-linear-gradient(0deg, transparent 0 47px, rgba(60,40,80,0.04) 47px 48px),
    #ede4d3;
  font-family: 'Playfair Display', Georgia, serif;
  color: #2a1f3a;
  box-sizing: border-box;
}
.hs-mag-frame {
  position: relative;
  width: 100%; max-width: 720px;
  background: #f7f1e1;
  border: 1px solid #2a1f3a;
  padding: clamp(28px, 4vw, 56px) clamp(28px, 4vw, 56px) clamp(28px, 4vw, 56px) clamp(48px, 6vw, 72px);
  box-shadow: 12px 12px 0 #c69e5a, 12px 12px 0 1px #2a1f3a;
}
.hs-mag-spine {
  position: absolute; top: 50%; left: 18px;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px; letter-spacing: 0.32em;
  color: #6b1f4a;
  white-space: nowrap;
  padding: 14px 4px;
  border-block: 1px solid #6b1f4a;
}
.hs-mag-num {
  position: absolute; top: 16px; right: 22px;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 48px; font-weight: 800; font-style: italic;
  color: #c69e5a;
  text-shadow: 1px 1px 0 #2a1f3a;
}
.hs-mag header { padding-bottom: 18px; border-bottom: 1px solid #2a1f3a; margin-bottom: 22px; }
.hs-mag-issue {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.24em;
  color: #2a1f3a;
}
.hs-mag h2 {
  margin: 0 0 22px;
  font-size: clamp(40px, 7vw, 78px);
  font-weight: 600; line-height: 0.95; letter-spacing: -0.02em;
}
.hs-mag h2 em {
  font-style: italic; font-weight: 700;
  color: #6b1f4a; display: block;
  font-size: 1.2em;
}
.hs-mag p {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic; font-size: 18px; line-height: 1.45;
  color: #4a3858; margin: 0 0 24px; max-width: 460px;
}
.hs-mag-cta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; font-weight: 700; letter-spacing: 0.16em;
  color: #2a1f3a; text-decoration: none;
  border-bottom: 2px solid #2a1f3a; padding-bottom: 3px;
  transition: color 0.15s, border-color 0.15s;
}
.hs-mag-cta:hover { color: #6b1f4a; border-color: #6b1f4a; }
```

### 12. Asymmetric Type

**Type:** Pure CSS
**Description:** Construction-site asymmetric typography — broken across columns with intentional misalignment, hi-vis safety yellow on concrete grey, black hard rules.

**HTML:**
```html
<section class="hs-asy" aria-label="Hero">
  <div class="hs-asy-grid">
    <span class="hs-asy-tag">/ ZONE 4</span>
    <h2 class="hs-asy-h">
      <span class="hs-asy-l1">UNDER</span>
      <span class="hs-asy-l2">construction.</span>
      <span class="hs-asy-l3">Always.</span>
    </h2>
    <span class="hs-asy-amp">&amp;</span>
    <p class="hs-asy-p">
      Software you ship is software that's still being built. We make CI fast enough to do it on the
      dev's terms — not the build's.
    </p>
    <a class="hs-asy-cta" href="#start">DEPLOY →</a>
    <span class="hs-asy-stripe" aria-hidden="true"></span>
  </div>
</section>
```

**CSS:**
```css
.hs-asy {
  display: grid; place-items: stretch;
  width: 100%; min-height: 480px;
  padding: clamp(24px, 4vw, 48px);
  background: #c8c4be;
  font-family: 'Inter', system-ui, sans-serif;
  color: #0a0a0a;
  box-sizing: border-box;
  overflow: hidden;
}
.hs-asy-grid {
  position: relative;
  display: grid; grid-template-columns: 1fr 1fr 0.6fr;
  grid-template-rows: auto 1fr auto auto;
  gap: 14px;
  width: 100%;
}
.hs-asy-tag {
  grid-column: 1 / 2;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 700; letter-spacing: 0.2em;
  background: #f5d028; padding: 4px 10px; align-self: start; justify-self: start;
}
.hs-asy-h {
  grid-column: 1 / 4;
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-weight: 900; line-height: 0.85; letter-spacing: -0.04em;
  text-transform: uppercase;
}
.hs-asy-l1 { display: block; font-size: clamp(60px, 11vw, 130px); }
.hs-asy-l2 { display: block; font-size: clamp(40px, 8vw, 90px); margin-left: clamp(40px, 12vw, 180px); color: #f5d028; -webkit-text-stroke: 2px #0a0a0a; }
.hs-asy-l3 { display: block; font-size: clamp(40px, 8vw, 90px); margin-left: clamp(80px, 24vw, 360px); }
.hs-asy-amp {
  grid-column: 3; grid-row: 3;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(80px, 14vw, 160px); font-weight: 800; font-style: italic;
  color: #0a0a0a; line-height: 1; align-self: end; justify-self: end;
}
.hs-asy-p {
  grid-column: 1 / 3; grid-row: 3;
  font-size: 14px; line-height: 1.55; max-width: 380px;
  color: #2a2a2a; margin: 0; align-self: end;
  border-left: 4px solid #f5d028;
  padding-left: 14px;
}
.hs-asy-cta {
  grid-column: 1 / 2; grid-row: 4;
  display: inline-block; padding: 14px 26px;
  background: #0a0a0a; color: #f5d028;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 800; font-size: 14px; letter-spacing: 0.16em;
  text-decoration: none; border: 0;
  align-self: start; justify-self: start;
  transition: background 0.15s;
}
.hs-asy-cta:hover { background: #f5d028; color: #0a0a0a; }
.hs-asy-stripe {
  grid-column: 2 / 4; grid-row: 4;
  height: 14px; align-self: center;
  background: repeating-linear-gradient(45deg, #0a0a0a 0 12px, #f5d028 12px 24px);
}
@media (max-width: 720px) {
  .hs-asy-l2, .hs-asy-l3 { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .hs-asy-cta { transition: none; } }
```

### 13. Oversized Number

**Type:** Pure CSS
**Description:** Vintage wine-label poster — a massive faded burgundy "1924" set behind italic serif copy with gold-leaf accents on cream paper.

**HTML:**
```html
<section class="hs-ovn" aria-label="Hero">
  <div class="hs-ovn-bg" aria-hidden="true">1924</div>
  <div class="hs-ovn-inner">
    <span class="hs-ovn-eye">— Estate · Vinifera ·</span>
    <h2>A century of <em>quiet wines.</em></h2>
    <p>
      Six grapes. Four hectares. One family that still skips the marketing and lets the vintage
      speak.
    </p>
    <a class="hs-ovn-cta" href="#cellar">Visit the cellar</a>
  </div>
</section>
```

**CSS:**
```css
.hs-ovn {
  position: relative; overflow: hidden;
  display: grid; place-items: center;
  width: 100%; min-height: 480px;
  padding: clamp(28px, 5vw, 64px) clamp(20px, 5vw, 56px);
  background: #f5ebd4;
  font-family: 'Playfair Display', Georgia, serif;
  color: #2a0a18;
  box-sizing: border-box;
}
.hs-ovn-bg {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  font-size: clamp(220px, 38vw, 480px); font-weight: 900; line-height: 1;
  color: #6b1230; opacity: 0.12; pointer-events: none;
  letter-spacing: -0.02em;
}
.hs-ovn-inner { position: relative; z-index: 1; max-width: 580px; text-align: center; }
.hs-ovn-eye {
  display: inline-block;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic; font-size: 16px;
  color: #c69e3d; margin-bottom: 16px;
  letter-spacing: 0.08em;
}
.hs-ovn h2 {
  margin: 0 0 18px;
  font-size: clamp(36px, 6vw, 60px);
  font-weight: 600; line-height: 1.05;
}
.hs-ovn h2 em { color: #6b1230; font-style: italic; }
.hs-ovn p {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic; font-size: 18px; line-height: 1.55;
  color: #5a3848; margin: 0 auto 24px; max-width: 460px;
}
.hs-ovn-cta {
  display: inline-block; padding: 12px 28px;
  background: transparent; color: #6b1230;
  border: 1.5px solid #6b1230; border-radius: 0;
  text-decoration: none;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: background 0.18s, color 0.18s;
}
.hs-ovn-cta:hover { background: #6b1230; color: #f5ebd4; }
@media (prefers-reduced-motion: reduce) { .hs-ovn-cta { transition: none; } }
```

### 14. Marquee Headline

**Type:** Pure CSS
**Description:** A single phrase scrolls horizontally on a loop with a counter-direction line beneath. Hot tangerine on chocolate brown — the streetwear / drop-culture treatment.

**HTML:**
```html
<section class="hs-mar" aria-label="Hero">
  <div class="hs-mar-track hs-mar-r" aria-hidden="true">
    <span
      >EVERYTHING SELLS OUT · EVERYTHING SELLS OUT · EVERYTHING SELLS OUT · EVERYTHING SELLS OUT ·
    </span>
    <span
      >EVERYTHING SELLS OUT · EVERYTHING SELLS OUT · EVERYTHING SELLS OUT · EVERYTHING SELLS OUT ·
    </span>
  </div>
  <div class="hs-mar-inner">
    <h2>Drop 04. <em>Tuesday 11am EST.</em></h2>
    <p>72 pieces. No restock. No back-orders. No DM begging.</p>
    <a class="hs-mar-cta" href="#join">Set the alarm</a>
  </div>
  <div class="hs-mar-track hs-mar-l" aria-hidden="true">
    <span>NO RESTOCK · NO RESTOCK · NO RESTOCK · NO RESTOCK · NO RESTOCK · NO RESTOCK · </span>
    <span>NO RESTOCK · NO RESTOCK · NO RESTOCK · NO RESTOCK · NO RESTOCK · NO RESTOCK · </span>
  </div>
</section>
```

**CSS:**
```css
.hs-mar {
  display: flex; flex-direction: column; justify-content: space-between;
  width: 100%; min-height: 480px;
  padding: 0;
  background: #2a1410;
  font-family: 'Inter', system-ui, sans-serif;
  color: #ffe4d6;
  box-sizing: border-box;
  overflow: hidden;
  contain: layout paint;
}
.hs-mar-track {
  display: flex; gap: 32px;
  white-space: nowrap; overflow: hidden;
  padding: 18px 0;
  font-family: 'Inter', sans-serif;
  font-size: clamp(32px, 5vw, 52px); font-weight: 900;
  font-style: italic; letter-spacing: -0.01em;
  background: #f04e23; color: #2a1410;
  border-block: 4px solid #2a1410;
}
.hs-mar-track span { animation: hs-mar-roll 22s linear infinite; flex-shrink: 0; }
.hs-mar-r span { animation-direction: normal; }
.hs-mar-l { background: #2a1410; color: #f04e23; border-color: #f04e23; }
.hs-mar-l span { animation-direction: reverse; }
@keyframes hs-mar-roll { from { transform: translateX(0); } to { transform: translateX(-100%); } }
.hs-mar-inner {
  flex: 1;
  display: grid; place-items: center;
  padding: clamp(24px, 4vw, 56px);
  text-align: center;
}
.hs-mar h2 {
  margin: 0 0 14px;
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 900; letter-spacing: -0.025em; line-height: 1.05;
  color: #ffe4d6;
}
.hs-mar h2 em { color: #f5b148; font-style: italic; }
.hs-mar p { margin: 0 auto 22px; font-size: 16px; color: #c8a899; max-width: 460px; line-height: 1.55; }
.hs-mar-cta {
  display: inline-block; padding: 13px 28px;
  background: #f5b148; color: #2a1410;
  border-radius: 0; text-decoration: none;
  font-weight: 800; font-size: 14.5px; letter-spacing: 0.04em;
  transition: background 0.15s;
}
.hs-mar-cta:hover { background: #ffe4d6; }
@media (prefers-reduced-motion: reduce) {
  .hs-mar-track span { animation: none; }
  .hs-mar-cta { transition: none; }
}
```

### 15. Photo Card Hero

**Type:** Pure CSS
**Description:** Aesop / Apple-style full-bleed photo with copy in the bottom-left corner. Desaturated denim photograph painted in CSS, rust accent, linen card overlay.

**HTML:**
```html
<section class="hs-phc" aria-label="Hero">
  <div class="hs-phc-wall" aria-hidden="true"></div>
  <div class="hs-phc-light" aria-hidden="true"></div>
  <div class="hs-phc-scene" aria-hidden="true">
    <span class="hs-phc-shelf"></span>
    <span class="hs-phc-peg"></span>
    <div class="hs-phc-coat">
      <span class="hs-phc-collar"></span>
      <span class="hs-phc-pocket hs-phc-pocket-l"></span>
      <span class="hs-phc-pocket hs-phc-pocket-r"></span>
      <span class="hs-phc-button hs-phc-b1"></span>
      <span class="hs-phc-button hs-phc-b2"></span>
      <span class="hs-phc-button hs-phc-b3"></span>
    </div>
    <span class="hs-phc-shadow"></span>
  </div>
  <span class="hs-phc-grain" aria-hidden="true"></span>
  <article class="hs-phc-card">
    <span class="hs-phc-eye">— A garment for the long haul</span>
    <h2>The chore coat, <em>made to age.</em></h2>
    <p>
      Heavy duck canvas. Rivet-tacked seams. The kind of jacket that earns its character on the
      wearer, not in the wash.
    </p>
    <a class="hs-phc-cta" href="#shop">Read the story →</a>
  </article>
  <span class="hs-phc-meta" aria-hidden="true">N°04 — DUCK CANVAS WORKWEAR · MADE IN PORTUGAL</span>
</section>
```

**CSS:**
```css
.hs-phc {
  position: relative; overflow: hidden;
  width: 100%; min-height: 480px;
  background:
    linear-gradient(180deg, #2c3a48 0%, #1f2a35 60%, #15202a 100%);
  font-family: 'Inter', system-ui, sans-serif;
  color: #f3eadb;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: stretch;
}
.hs-phc-wall {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(95deg, transparent 0 80px, rgba(255,255,255,0.018) 80px 81px),
    repeating-linear-gradient(0deg, transparent 0 4px, rgba(0,0,0,0.06) 4px 5px);
  pointer-events: none;
}
.hs-phc-light {
  position: absolute; inset: 0;
  background:
    radial-gradient(40% 60% at 30% 25%, rgba(255,230,180,0.16) 0%, transparent 60%),
    radial-gradient(80% 100% at 50% 100%, rgba(0,0,0,0.5) 0%, transparent 70%);
  pointer-events: none;
}
.hs-phc-scene {
  position: relative;
  grid-column: 1; grid-row: 1;
  align-self: stretch;
  display: grid; place-items: center;
  z-index: 1;
}
.hs-phc-shelf {
  position: absolute; top: 18%; left: 18%; right: 18%;
  height: 8px;
  background: linear-gradient(180deg, #5a3e22 0%, #3a2814 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.08) inset,
    0 4px 8px rgba(0,0,0,0.35);
  border-radius: 2px;
}
.hs-phc-peg {
  position: absolute; top: 16%; left: 50%;
  width: 14px; height: 26px;
  background: linear-gradient(180deg, #c89a4e 0%, #7a5a2e 100%);
  border-radius: 6px 6px 4px 4px;
  transform: translateX(-50%);
  box-shadow: 0 2px 4px rgba(0,0,0,0.4);
  z-index: 2;
}
.hs-phc-coat {
  position: absolute; top: 22%; left: 50%;
  width: 200px; height: 280px;
  transform: translateX(-50%);
  background:
    radial-gradient(80% 100% at 50% 0%, #4a5e7a 0%, #34465c 50%, #1f2a3a 100%);
  clip-path: polygon(
    35% 0%, 65% 0%,
    78% 8%, 95% 14%,
    100% 100%,
    0% 100%,
    5% 14%, 22% 8%
  );
  box-shadow: inset -8px 0 24px rgba(0,0,0,0.4), inset 8px 0 16px rgba(255,255,255,0.04);
}
.hs-phc-collar {
  position: absolute; top: 4%; left: 50%;
  width: 56px; height: 24px;
  transform: translateX(-50%);
  background: #5a708c;
  clip-path: polygon(0% 0%, 100% 0%, 75% 100%, 25% 100%);
}
.hs-phc-pocket {
  position: absolute; top: 50%;
  width: 50px; height: 60px;
  background: rgba(0,0,0,0.18);
  border: 1.5px solid #2a3848;
  border-radius: 2px;
}
.hs-phc-pocket-l { left: 14%; }
.hs-phc-pocket-r { right: 14%; }
.hs-phc-button {
  position: absolute; left: 50%; transform: translateX(-50%);
  width: 8px; height: 8px;
  background: radial-gradient(circle at 35% 35%, #d8a05c 0%, #6a4818 100%);
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
.hs-phc-b1 { top: 22%; }
.hs-phc-b2 { top: 40%; }
.hs-phc-b3 { top: 58%; }
.hs-phc-shadow {
  position: absolute; bottom: 0; left: 50%;
  width: 240px; height: 24px;
  transform: translateX(-50%);
  background: radial-gradient(50% 100% at 50% 0%, rgba(0,0,0,0.55), transparent 70%);
  filter: blur(4px);
}
.hs-phc-grain {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 25% 25%, rgba(255,255,255,0.025) 0.5px, transparent 1px),
    radial-gradient(circle at 75% 75%, rgba(0,0,0,0.05) 0.5px, transparent 1px);
  background-size: 3px 3px;
  pointer-events: none; z-index: 3;
  mix-blend-mode: overlay;
}
.hs-phc-card {
  grid-column: 2; grid-row: 1;
  align-self: end; justify-self: start;
  margin: 0 0 clamp(28px, 4vw, 48px) 0;
  max-width: 440px;
  background: #f3eadb;
  color: #1a2434;
  padding: clamp(22px, 3vw, 32px);
  border-radius: 2px;
  box-shadow: 0 22px 40px rgba(0,0,0,0.32);
  position: relative; z-index: 4;
}
.hs-phc-eye {
  display: block;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic; font-size: 14px;
  color: #b85020; margin-bottom: 10px;
  letter-spacing: 0.02em;
}
.hs-phc h2 {
  margin: 0 0 14px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(28px, 3.6vw, 40px);
  font-weight: 600; letter-spacing: -0.01em; line-height: 1.1;
}
.hs-phc h2 em { color: #b85020; font-style: italic; }
.hs-phc-card p {
  margin: 0 0 18px;
  font-size: 14px; line-height: 1.6;
  color: #4a5466;
}
.hs-phc-cta {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #1a2434; text-decoration: none;
  border-bottom: 1.5px solid #1a2434; padding-bottom: 3px;
  transition: color 0.15s, border-color 0.15s;
}
.hs-phc-cta:hover { color: #b85020; border-color: #b85020; }
.hs-phc-meta {
  position: absolute;
  bottom: clamp(14px, 2vw, 22px); left: clamp(20px, 3vw, 32px);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.18em;
  color: rgba(243,234,219,0.55);
  z-index: 4;
}
@media (max-width: 720px) {
  .hs-phc { grid-template-columns: 1fr; grid-template-rows: 280px auto; }
  .hs-phc-scene { grid-column: 1; grid-row: 1; }
  .hs-phc-card { grid-column: 1; grid-row: 2; margin: -40px 16px 16px; align-self: auto; justify-self: stretch; }
  .hs-phc-meta { display: none; }
}
@media (prefers-reduced-motion: reduce) { .hs-phc-cta { transition: none; } }
```

### 16. Brutalist Text-Only

**Type:** Pure CSS
**Description:** Raw Swiss-punk brutalist hero — pure black, traffic-cone orange highlight, acid lime accent, hard 8px offset shadows. No images, no soft anything.

**HTML:**
```html
<section class="hs-bru" aria-label="Hero">
  <div class="hs-bru-stack">
    <span class="hs-bru-num">001 / 042</span>
    <h2 class="hs-bru-h">
      THE WEB
      <em>WAS NEVER</em>
      MEANT TO
      <span class="hs-bru-mark">LOOK SAFE.</span>
    </h2>
    <p class="hs-bru-p">A design studio for brands that would rather be remembered than liked.</p>
    <div class="hs-bru-row">
      <a class="hs-bru-cta hs-bru-cta-pri" href="#work">[ WORK ]</a>
      <a class="hs-bru-cta" href="#talk">[ EMAIL ]</a>
    </div>
  </div>
</section>
```

**CSS:**
```css
.hs-bru {
  display: grid; place-items: center;
  width: 100%; min-height: 480px;
  padding: clamp(28px, 5vw, 64px) clamp(20px, 5vw, 56px);
  background: #0a0a0a;
  font-family: 'Inter', system-ui, sans-serif;
  color: #ffffff;
  box-sizing: border-box;
}
.hs-bru-stack { max-width: 760px; }
.hs-bru-num {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; font-weight: 700; letter-spacing: 0.2em;
  background: #ff5e1a; color: #0a0a0a;
  padding: 4px 10px;
  margin-bottom: 22px;
}
.hs-bru-h {
  margin: 0 0 22px;
  font-family: 'Inter', sans-serif;
  font-size: clamp(40px, 7vw, 84px); font-weight: 900;
  line-height: 0.92; letter-spacing: -0.04em;
  text-transform: uppercase;
}
.hs-bru-h em { color: #c4f048; font-style: italic; display: inline; }
.hs-bru-mark {
  display: inline-block; background: #ff5e1a; color: #0a0a0a;
  padding: 0 12px; transform: rotate(-1deg);
}
.hs-bru-p {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px; line-height: 1.55;
  color: #a8a8a8; margin: 0 0 26px; max-width: 480px;
  border-top: 2px solid #ff5e1a; padding-top: 14px;
}
.hs-bru-row { display: flex; gap: 14px; flex-wrap: wrap; }
.hs-bru-cta {
  display: inline-block; padding: 12px 18px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px; font-weight: 700; letter-spacing: 0.12em;
  text-decoration: none;
  background: transparent; color: #fff;
  border: 2px solid #fff;
  transition: background 0.12s, color 0.12s;
}
.hs-bru-cta:hover { background: #fff; color: #0a0a0a; }
.hs-bru-cta-pri { background: #ff5e1a; color: #0a0a0a; border-color: #ff5e1a; }
.hs-bru-cta-pri:hover { background: #c4f048; border-color: #c4f048; color: #0a0a0a; }
@media (prefers-reduced-motion: reduce) { .hs-bru-cta { transition: none; } }
```

### 17. Vertical Type Hero

**Type:** Pure CSS
**Description:** Japanese traditional vertical typography — headline reads top-to-bottom using <code>writing-mode: vertical-rl</code>. Indigo on washi-paper white, vermillion seal stamp.

**HTML:**
```html
<section class="hs-vrt" aria-label="Hero">
  <div class="hs-vrt-bg" aria-hidden="true"></div>
  <aside class="hs-vrt-seal" aria-hidden="true">
    <span>無</span>
    <span>名</span>
  </aside>
  <div class="hs-vrt-vertical">
    <h2>静かな<em>道具</em>。</h2>
  </div>
  <div class="hs-vrt-copy">
    <p class="hs-vrt-jp">Shizuka na dōgu — quiet tools.</p>
    <p class="hs-vrt-en">
      Hand-forged carpentry implements. Made by one family in Niigata since 1873.
    </p>
    <a class="hs-vrt-cta" href="#shop">View the catalogue →</a>
  </div>
</section>
```

**CSS:**
```css
.hs-vrt {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  width: 100%; min-height: 480px; max-height: 540px;
  padding: clamp(28px, 4vw, 56px);
  gap: clamp(28px, 5vw, 64px);
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(20,40,80,0.06), transparent 70%),
    #f5ede0;
  font-family: 'Cormorant Garamond', Georgia, serif;
  color: #1a2858;
  box-sizing: border-box;
  overflow: hidden;
}
.hs-vrt-bg {
  position: absolute; right: -60px; top: 0; bottom: 0;
  width: 280px;
  background:
    repeating-linear-gradient(0deg, transparent 0 23px, rgba(26,40,88,0.05) 23px 24px);
  pointer-events: none;
}
.hs-vrt-vertical {
  grid-column: 1; grid-row: 1 / 3;
  writing-mode: vertical-rl; text-orientation: upright;
  align-self: center;
  display: block;
  height: 100%;
  min-height: 380px;
}
.hs-vrt h2 {
  margin: 0;
  font-size: clamp(36px, 4.8vw, 56px);
  font-weight: 700; letter-spacing: 0.04em;
  color: #1a2858;
  line-height: 1.2;
  white-space: nowrap;
}
.hs-vrt h2 em { color: #c63828; font-style: normal; font-weight: 800; }
.hs-vrt-copy {
  grid-column: 2; grid-row: 1 / 3;
  display: flex; flex-direction: column; gap: 18px;
  position: relative; z-index: 1;
  max-width: 460px;
}
.hs-vrt-jp {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic; font-size: 18px;
  color: #c63828; margin: 0;
  letter-spacing: 0.06em;
}
.hs-vrt-en {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 15px; line-height: 1.6;
  color: #4a5478; margin: 0;
}
.hs-vrt-seal {
  position: absolute;
  top: clamp(20px, 3vw, 32px); right: clamp(20px, 3vw, 32px);
  width: 78px; height: 78px;
  background: #c63828; color: #f5ede0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  font-family: 'Inter', sans-serif;
  font-weight: 700; font-size: 22px;
  border: 2px solid #c63828;
  box-shadow: inset 0 0 0 4px #f5ede0, inset 0 0 0 6px #c63828;
  z-index: 2;
}
.hs-vrt-cta {
  display: inline-block; padding: 12px 22px;
  background: #1a2858; color: #f5ede0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; font-weight: 700; letter-spacing: 0.12em;
  text-decoration: none;
  align-self: flex-start;
  transition: background 0.15s;
}
.hs-vrt-cta:hover { background: #c63828; }
@media (max-width: 720px) {
  .hs-vrt { grid-template-columns: 1fr; max-height: none; }
  .hs-vrt-vertical { grid-column: 1; grid-row: auto; min-height: 200px; }
  .hs-vrt-copy { grid-column: 1; grid-row: auto; }
  .hs-vrt-seal { top: 16px; right: 16px; width: 60px; height: 60px; font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) { .hs-vrt-cta { transition: none; } }
```

### 18. Kinetic Type Hero

**Type:** Pure CSS
**Description:** Rave-poster kinetic typography — letters rotate, scale, and float individually using per-letter delay. Acid green and magenta on pure black with strobe-like accents.

**HTML:**
```html
<section class="hs-knt" aria-label="Hero">
  <div class="hs-knt-pulse" aria-hidden="true"></div>
  <h2 class="hs-knt-h">
    <span style="--i: 0">F</span><span style="--i: 1">U</span><span style="--i: 2">L</span
    ><span style="--i: 3">L</span>
    <span class="hs-knt-gap"></span>
    <span style="--i: 4">B</span><span style="--i: 5">A</span><span style="--i: 6">S</span
    ><span style="--i: 7">S</span>
    <span class="hs-knt-gap"></span>
    <em
      ><span style="--i: 8">M</span><span style="--i: 9">O</span><span style="--i: 10">D</span
      ><span style="--i: 11">E</span></em
    >
  </h2>
  <p class="hs-knt-p">
    A booking app for warehouse parties. The line is the door, not the website.
  </p>
  <a class="hs-knt-cta" href="#tickets">Get tickets ⚡</a>
</section>
```

**CSS:**
```css
.hs-knt {
  position: relative;
  display: grid; place-items: center;
  width: 100%; min-height: 480px;
  padding: clamp(28px, 5vw, 64px) clamp(20px, 5vw, 56px);
  background: #0a0a0a;
  font-family: 'Inter', system-ui, sans-serif;
  color: #fff;
  box-sizing: border-box;
  overflow: hidden;
  text-align: center;
}
.hs-knt-pulse {
  position: absolute; inset: 0;
  background:
    radial-gradient(60% 50% at 30% 30%, rgba(196,255,82,0.18), transparent 60%),
    radial-gradient(50% 50% at 80% 70%, rgba(238,82,206,0.20), transparent 60%);
  animation: hs-knt-pulse 2.4s ease-in-out infinite alternate;
}
@keyframes hs-knt-pulse {
  from { opacity: 0.6; }
  to   { opacity: 1; }
}
.hs-knt-h {
  position: relative; z-index: 1;
  margin: 0 0 22px;
  font-family: 'Inter', sans-serif;
  font-size: clamp(48px, 9vw, 110px);
  font-weight: 900; letter-spacing: -0.04em; line-height: 0.92;
  text-transform: uppercase;
}
.hs-knt-h span {
  display: inline-block;
  animation: hs-knt-jitter 2s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * 0.06s);
}
.hs-knt-h em { color: #ee52ce; font-style: italic; }
.hs-knt-h em span { color: #ee52ce; }
.hs-knt-h > span:nth-child(-n+4) { color: #c4ff52; }
.hs-knt-gap { display: inline-block; width: 0.4em; }
@keyframes hs-knt-jitter {
  0%, 100% { transform: translateY(0) rotate(0deg) scale(1); }
  25%      { transform: translateY(-8px) rotate(-2deg) scale(1.04); }
  50%      { transform: translateY(0) rotate(2deg) scale(0.98); }
  75%      { transform: translateY(6px) rotate(-1deg) scale(1.02); }
}
.hs-knt-p { position: relative; z-index: 1; margin: 0 auto 26px; font-size: 16px; color: #888; max-width: 440px; }
.hs-knt-cta {
  position: relative; z-index: 1;
  display: inline-block; padding: 14px 28px;
  background: #c4ff52; color: #0a0a0a;
  border-radius: 0; text-decoration: none;
  font-weight: 800; font-size: 14.5px; letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: 0 0 28px rgba(196,255,82,0.45);
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.hs-knt-cta:hover {
  background: #ee52ce; color: #fff;
  box-shadow: 0 0 28px rgba(238,82,206,0.55);
}
@media (prefers-reduced-motion: reduce) {
  .hs-knt-h span, .hs-knt-pulse { animation: none; }
  .hs-knt-cta { transition: none; }
}
```

### 19. Bento Hero

**Type:** Pure CSS
**Description:** Apple-style bento hero — one large headline tile with stat / quote / pill cells fanning around it. Matte-ceramic palette: salmon, terracotta, ivory, olive.

**HTML:**
```html
<section class="hs-bnt" aria-label="Hero">
  <article class="hs-bnt-hero">
    <span class="hs-bnt-eye">V2 — out now</span>
    <h2>The pottery <em>workbook</em> for serious hands.</h2>
    <a class="hs-bnt-cta" href="#start">Start the kiln →</a>
  </article>
  <article class="hs-bnt-stat">
    <strong>1,400</strong>
    <span>hand-thrown<br />pieces logged</span>
  </article>
  <article class="hs-bnt-quote">
    <p>“Replaced three notebooks and a chalkboard.”</p>
    <cite>— Mireya, Studio Verde</cite>
  </article>
  <article class="hs-bnt-pill"><span>★ 4.9</span><em>App Store</em></article>
  <article class="hs-bnt-cta-tile">
    <a href="#android">Android →</a>
  </article>
</section>
```

**CSS:**
```css
.hs-bnt {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr 0.8fr;
  grid-template-rows: auto auto;
  grid-template-areas:
    "hero hero stat"
    "hero hero quote"
    "pill cta  quote";
  gap: 14px;
  width: 100%; min-height: 480px;
  padding: clamp(20px, 3vw, 32px);
  background: #f5ebde;
  font-family: 'Inter', system-ui, sans-serif;
  color: #2c1f15;
  box-sizing: border-box;
}
.hs-bnt > article {
  border-radius: 16px;
  padding: clamp(18px, 2.5vw, 26px);
  display: flex; flex-direction: column;
  justify-content: space-between;
  gap: 10px;
}
.hs-bnt-hero {
  grid-area: hero;
  background: linear-gradient(160deg, #f4a48b, #d97766);
  color: #2c1f15;
}
.hs-bnt-eye {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 700; letter-spacing: 0.16em;
  background: #2c1f15; color: #f5ebde;
  padding: 4px 10px; border-radius: 999px;
  align-self: flex-start;
}
.hs-bnt-hero h2 {
  margin: 0;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(28px, 4.5vw, 48px);
  font-weight: 600; letter-spacing: -0.015em; line-height: 1.05;
}
.hs-bnt-hero h2 em { color: #6b1f12; font-style: italic; }
.hs-bnt-cta {
  align-self: flex-start;
  padding: 11px 20px;
  background: #2c1f15; color: #f5ebde;
  border-radius: 999px; text-decoration: none;
  font-weight: 600; font-size: 14px;
  transition: background 0.18s;
}
.hs-bnt-cta:hover { background: #6b1f12; }
.hs-bnt-stat {
  grid-area: stat;
  background: #6b8a3e;
  color: #f5ebde;
}
.hs-bnt-stat strong { font-family: 'Cormorant Garamond', serif; font-size: clamp(40px, 5vw, 64px); font-weight: 700; line-height: 1; }
.hs-bnt-stat span { font-size: 13px; line-height: 1.35; opacity: 0.9; }
.hs-bnt-quote {
  grid-area: quote;
  background: #2c1f15; color: #f5ebde;
}
.hs-bnt-quote p {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic; font-size: 17px;
  margin: 0; line-height: 1.4;
}
.hs-bnt-quote cite { font-size: 11px; font-style: normal; letter-spacing: 0.06em; opacity: 0.7; }
.hs-bnt-pill {
  grid-area: pill;
  background: #f5ebde; border: 2px solid #2c1f15;
  flex-direction: row; align-items: center; justify-content: space-between;
}
.hs-bnt-pill span { font-weight: 800; font-size: 18px; color: #c69e3d; }
.hs-bnt-pill em { font-style: normal; font-size: 11px; opacity: 0.7; letter-spacing: 0.06em; }
.hs-bnt-cta-tile {
  grid-area: cta;
  background: #d97766; padding: 0 !important;
  align-items: stretch; justify-content: stretch;
}
.hs-bnt-cta-tile a {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  color: #2c1f15; text-decoration: none;
  font-weight: 700; font-size: 14.5px;
}
.hs-bnt-cta-tile a:hover { background: rgba(0,0,0,0.08); }
@media (max-width: 720px) {
  .hs-bnt {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "hero hero"
      "stat quote"
      "pill cta";
  }
}
@media (prefers-reduced-motion: reduce) { .hs-bnt-cta, .hs-bnt-cta-tile a { transition: none; } }
```

### 20. Gradient Text Spotlight

**Type:** Pure CSS
**Description:** Oversized headline with an animated marigold → ruby → grape gradient sweeping across the letters. The Linear / Apple wordmark shimmer treatment.

**HTML:**
```html
<section class="hs-gts" aria-label="Hero">
  <div class="hs-gts-inner">
    <span class="hs-gts-eye">v3 launching tuesday</span>
    <h2>Made for the way <span class="hs-gts-shine">creative people</span> actually work.</h2>
    <p>One canvas. Every layer. Zero exporting between apps to nudge a kerning pair.</p>
    <a class="hs-gts-cta" href="#waitlist">Join the waitlist →</a>
  </div>
</section>
```

**CSS:**
```css
.hs-gts {
  display: grid; place-items: center;
  width: 100%; min-height: 480px;
  padding: clamp(28px, 5vw, 64px) clamp(20px, 5vw, 56px);
  background:
    radial-gradient(60% 60% at 50% 0%, rgba(120,30,90,0.18), transparent 70%),
    #1a0d20;
  font-family: 'Inter', system-ui, sans-serif;
  color: #f4e8d0;
  box-sizing: border-box;
}
.hs-gts-inner { max-width: 720px; text-align: center; }
.hs-gts-eye {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.16em;
  color: #f5b148; padding: 4px 10px;
  border: 1px solid rgba(245,177,72,0.4);
  border-radius: 999px;
  margin-bottom: 22px;
}
.hs-gts h2 {
  margin: 0 0 18px;
  font-size: clamp(38px, 6vw, 68px);
  font-weight: 800; letter-spacing: -0.025em; line-height: 1.05;
}
.hs-gts-shine {
  display: inline-block;
  background: linear-gradient(90deg, #f5b148, #d63a5e, #7e2d8a, #f5b148);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: hs-gts-sweep 4s linear infinite;
}
@keyframes hs-gts-sweep { to { background-position: 200% 0; } }
.hs-gts p {
  margin: 0 auto 26px;
  font-size: 17px; line-height: 1.55;
  color: #b8a890; max-width: 460px;
}
.hs-gts-cta {
  display: inline-block; padding: 13px 26px;
  background: linear-gradient(90deg, #f5b148, #d63a5e);
  color: #1a0d20; border-radius: 999px;
  text-decoration: none; font-weight: 700; font-size: 14.5px;
  box-shadow: 0 12px 30px rgba(214,58,94,0.35);
  transition: transform 0.15s;
}
.hs-gts-cta:hover { transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) {
  .hs-gts-shine { animation: none; background-position: 0 0; }
  .hs-gts-cta { transition: none; }
}
```

### 21. Product Shot Hero

**Type:** Pure CSS
**Description:** Apple-keynote product shot — a CSS-painted device front-and-centre with floating feature badges that pulse around it. Ice blue + chrome silver on warm white.

**HTML:**
```html
<section class="hs-prd" aria-label="Hero">
  <div class="hs-prd-stage">
    <div class="hs-prd-device" aria-hidden="true">
      <div class="hs-prd-screen"></div>
      <div class="hs-prd-cam"></div>
    </div>
    <span class="hs-prd-pulse hs-prd-p1"><strong>· chip</strong>16-core neural</span>
    <span class="hs-prd-pulse hs-prd-p2"><strong>· battery</strong>22 hours</span>
    <span class="hs-prd-pulse hs-prd-p3"><strong>· weight</strong>1.24 kg</span>
  </div>
  <div class="hs-prd-copy">
    <h2>The lightest pro<br />laptop we've ever <em>shipped.</em></h2>
    <a class="hs-prd-cta" href="#buy">From $1,499 →</a>
  </div>
</section>
```

**CSS:**
```css
.hs-prd {
  display: grid; grid-template-columns: 1.2fr 1fr;
  width: 100%; min-height: 480px;
  padding: clamp(28px, 5vw, 56px);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  background:
    radial-gradient(circle at 30% 30%, #d8e8f0 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, #e8eef2 0%, transparent 50%),
    #f8fafc;
  font-family: 'Inter', system-ui, sans-serif;
  color: #1a2840;
  box-sizing: border-box;
}
.hs-prd-stage {
  position: relative; height: 100%; min-height: 320px;
  display: grid; place-items: center;
}
.hs-prd-device {
  width: 320px; height: 200px;
  background: linear-gradient(160deg, #b8c8d8 0%, #8090a8 50%, #607080 100%);
  border-radius: 14px;
  position: relative;
  box-shadow:
    0 22px 60px rgba(96,112,128,0.4),
    inset 0 1px 0 rgba(255,255,255,0.5),
    inset 0 -2px 0 rgba(0,0,0,0.18);
}
.hs-prd-screen {
  position: absolute; inset: 8px;
  background: linear-gradient(135deg, #1a2840 0%, #0a1428 100%);
  border-radius: 7px;
  box-shadow: inset 0 0 0 2px #0a1428;
}
.hs-prd-cam {
  position: absolute; top: 4px; left: 50%; transform: translateX(-50%);
  width: 5px; height: 5px; border-radius: 50%;
  background: #1a2840;
}
.hs-prd-pulse {
  position: absolute;
  background: #fff;
  border: 1px solid #d0d8e0;
  padding: 8px 12px; border-radius: 999px;
  font-size: 12.5px; color: #1a2840;
  display: inline-flex; flex-direction: column; gap: 1px;
  box-shadow: 0 8px 22px rgba(96,112,128,0.18);
  animation: hs-prd-bob 4s ease-in-out infinite;
}
.hs-prd-pulse strong { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: #6b85a5; font-weight: 600; letter-spacing: 0.04em; }
.hs-prd-p1 { top: 10%; left: 4%; animation-delay: 0s; }
.hs-prd-p2 { top: 35%; right: 0; animation-delay: -1.3s; }
.hs-prd-p3 { bottom: 12%; left: 12%; animation-delay: -2.6s; }
@keyframes hs-prd-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
.hs-prd-copy { padding: 12px 0; }
.hs-prd h2 {
  margin: 0 0 22px;
  font-size: clamp(30px, 4.5vw, 48px);
  font-weight: 700; letter-spacing: -0.025em; line-height: 1.05;
  color: #1a2840;
}
.hs-prd h2 em {
  background: linear-gradient(90deg, #6b85a5, #b8c8d8);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-style: italic; font-weight: 800;
}
.hs-prd-cta {
  display: inline-block; padding: 13px 24px;
  background: #1a2840; color: #f8fafc;
  border-radius: 999px; text-decoration: none;
  font-weight: 600; font-size: 14.5px;
  transition: transform 0.15s;
}
.hs-prd-cta:hover { transform: translateY(-1px); }
@media (max-width: 720px) {
  .hs-prd { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .hs-prd-pulse { animation: none; }
  .hs-prd-cta { transition: none; }
}
```

### 22. Price Card Hero

**Type:** Pure CSS
**Description:** Heritage-banking pricing-led hero — copy left, single-tier brass-on-forest pricing card right. The 37signals-style "we have one price" treatment with a vintage finance feel.

**HTML:**
```html
<section class="hs-prc" aria-label="Hero">
  <div class="hs-prc-copy">
    <span class="hs-prc-eye">— Est. 1924 · still independent</span>
    <h2>One ledger. <em>One price.</em> One ridiculously responsive team.</h2>
    <p>
      The bookkeeping software trusted by family-owned businesses since before "SaaS" was a word.
    </p>
  </div>
  <article class="hs-prc-card">
    <header>
      <span>The Members' Plan</span>
      <span class="hs-prc-badge">No tiers</span>
    </header>
    <div class="hs-prc-price"><em>$</em><strong>49</strong><span>/ month, all in</span></div>
    <ul>
      <li>Unlimited invoices</li>
      <li>Multi-entity ledger</li>
      <li>Audit-ready exports</li>
      <li>A real human for support</li>
    </ul>
    <a class="hs-prc-cta" href="#join">Become a member</a>
  </article>
</section>
```

**CSS:**
```css
.hs-prc {
  display: grid; grid-template-columns: 1.05fr 1fr;
  width: 100%; min-height: 480px;
  padding: clamp(28px, 5vw, 64px) clamp(20px, 5vw, 56px);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
  background: #f5ecd8;
  font-family: 'Inter', system-ui, sans-serif;
  color: #1a3322;
  box-sizing: border-box;
}
.hs-prc-eye {
  display: block;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic; font-size: 16px;
  color: #8a7a3a; margin-bottom: 14px;
}
.hs-prc h2 {
  margin: 0 0 16px;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(28px, 4.5vw, 46px);
  font-weight: 700; letter-spacing: -0.015em; line-height: 1.1;
  color: #1a3322;
}
.hs-prc h2 em { color: #8a7a3a; font-style: italic; }
.hs-prc p { margin: 0; font-size: 15.5px; line-height: 1.6; color: #4a5a48; max-width: 460px; }
.hs-prc-card {
  background: #1a3322;
  color: #f5ecd8;
  padding: clamp(24px, 3vw, 36px);
  border-radius: 0;
  border: 2px solid #8a7a3a;
  box-shadow:
    inset 0 0 0 4px #1a3322,
    inset 0 0 0 5px rgba(138,122,58,0.4);
}
.hs-prc-card header {
  display: flex; justify-content: space-between; align-items: center;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 13px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase;
  padding-bottom: 16px; border-bottom: 1px solid #8a7a3a;
  margin-bottom: 18px;
}
.hs-prc-badge { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.12em; padding: 2px 8px; border: 1px solid #8a7a3a; color: #c0a960; }
.hs-prc-price {
  display: flex; align-items: baseline; gap: 6px;
  margin-bottom: 22px;
}
.hs-prc-price em { font-size: 24px; font-style: normal; color: #8a7a3a; font-weight: 700; }
.hs-prc-price strong {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(56px, 6vw, 80px); font-weight: 800; line-height: 1;
  color: #f5ecd8;
}
.hs-prc-price span { font-size: 13px; color: #c0a960; }
.hs-prc-card ul {
  list-style: none; padding: 0; margin: 0 0 24px;
  font-size: 14px; line-height: 1.95; color: #c8d2c4;
}
.hs-prc-card ul li::before { content: '✓ '; color: #c0a960; font-weight: 800; }
.hs-prc-cta {
  display: block; text-align: center;
  padding: 14px 24px;
  background: #c0a960; color: #1a3322;
  text-decoration: none; font-weight: 800; font-size: 14.5px;
  letter-spacing: 0.04em;
  border: 0;
  transition: background 0.15s;
}
.hs-prc-cta:hover { background: #f5ecd8; }
@media (max-width: 720px) {
  .hs-prc { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .hs-prc-cta { transition: none; } }
```

### 23. App Store Hero

**Type:** Pure CSS
**Description:** iOS-pastel app-launch hero — three phone mockups fanned in lavender, soft pink, powder blue, with App Store and Google Play CTA pills below.

**HTML:**
```html
<section class="hs-app" aria-label="Hero">
  <div class="hs-app-copy">
    <span class="hs-app-eye">★★★★★ &nbsp; #1 in Lifestyle</span>
    <h2>Mood, sleep, joy — <em>tracked gently.</em></h2>
    <p>The wellness journal that doesn't gamify your serotonin into a streak.</p>
    <div class="hs-app-stores">
      <a href="#ios"><span>Download on the</span><strong>App Store</strong></a>
      <a href="#android"><span>Get it on</span><strong>Google Play</strong></a>
    </div>
  </div>
  <div class="hs-app-fan" aria-hidden="true">
    <span class="hs-app-phone hs-app-p1"></span>
    <span class="hs-app-phone hs-app-p2"></span>
    <span class="hs-app-phone hs-app-p3"></span>
  </div>
</section>
```

**CSS:**
```css
.hs-app {
  display: grid; grid-template-columns: 1fr 1fr;
  width: 100%; min-height: 480px;
  padding: clamp(28px, 5vw, 56px);
  gap: clamp(20px, 4vw, 48px);
  align-items: center;
  background:
    linear-gradient(135deg, #e8def0 0%, #fde0e4 50%, #d8e8f0 100%);
  font-family: 'Inter', system-ui, sans-serif;
  color: #3a2a55;
  box-sizing: border-box;
}
.hs-app-eye {
  display: inline-block; padding: 5px 12px;
  background: #fff; color: #c98ae0;
  border-radius: 999px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em;
  margin-bottom: 18px;
}
.hs-app h2 {
  margin: 0 0 16px;
  font-size: clamp(32px, 5vw, 50px);
  font-weight: 800; letter-spacing: -0.02em; line-height: 1.05;
  color: #3a2a55;
}
.hs-app h2 em {
  background: linear-gradient(90deg, #c98ae0, #f59ab8);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-style: italic;
}
.hs-app p { margin: 0 0 24px; font-size: 16px; line-height: 1.55; color: #6a5a85; max-width: 420px; }
.hs-app-stores { display: flex; gap: 12px; flex-wrap: wrap; }
.hs-app-stores a {
  display: inline-flex; flex-direction: column;
  padding: 10px 22px; background: #3a2a55; color: #fff;
  border-radius: 12px; text-decoration: none;
  transition: transform 0.15s;
}
.hs-app-stores a:hover { transform: translateY(-1px); }
.hs-app-stores a span { font-size: 10px; opacity: 0.7; letter-spacing: 0.04em; }
.hs-app-stores a strong { font-size: 14.5px; font-weight: 700; }
.hs-app-fan {
  position: relative; height: 100%; min-height: 360px;
  display: flex; align-items: center; justify-content: center;
}
.hs-app-phone {
  position: absolute;
  width: 130px; height: 280px;
  border-radius: 24px;
  border: 3px solid #fff;
  box-shadow:
    0 22px 50px rgba(120,80,150,0.25),
    inset 0 0 0 2px rgba(255,255,255,0.4);
}
.hs-app-p1 {
  background: linear-gradient(180deg, #c98ae0 0%, #a160c0 100%);
  transform: rotate(-12deg) translateX(-90px);
}
.hs-app-p2 {
  background: linear-gradient(180deg, #fde0e4 0%, #f59ab8 100%);
  z-index: 2;
  width: 145px; height: 300px;
}
.hs-app-p3 {
  background: linear-gradient(180deg, #d8e8f0 0%, #94b4d4 100%);
  transform: rotate(12deg) translateX(90px);
}
@media (max-width: 720px) {
  .hs-app { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .hs-app-stores a { transition: none; } }
```

### 24. Neon CTA Hero

**Type:** Pure CSS
**Description:** Tokyo-cyberpunk neon CTA — pure black backdrop, neon pink and electric cyan glows, single CTA that breathes with a soft pulse. The conversion-funnel pattern.

**HTML:**
```html
<section class="hs-neo" aria-label="Hero">
  <span class="hs-neo-grid" aria-hidden="true"></span>
  <div class="hs-neo-inner">
    <span class="hs-neo-eye">/ ENTER THE NIGHT MARKET</span>
    <h2>Order ramen at <em>3 a.m.</em> like the locals do.</h2>
    <p>50 Tokyo back-alley vendors. One delivery app. One foreigner-friendly menu.</p>
    <a class="hs-neo-cta" href="#order">Open the menu</a>
  </div>
</section>
```

**CSS:**
```css
.hs-neo {
  position: relative; overflow: hidden;
  display: grid; place-items: center;
  width: 100%; min-height: 480px;
  padding: clamp(28px, 5vw, 64px) clamp(20px, 5vw, 56px);
  background: #0a0014;
  font-family: 'Inter', system-ui, sans-serif;
  color: #fff;
  box-sizing: border-box;
  contain: layout paint;
}
.hs-neo-grid {
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 220%; height: 50%;
  background:
    repeating-linear-gradient(0deg, transparent 0 24px, rgba(238,82,206,0.32) 24px 25px),
    repeating-linear-gradient(90deg, transparent 0 24px, rgba(34,211,238,0.32) 24px 25px);
  transform: translateX(-50%) perspective(800px) rotateX(60deg);
  transform-origin: center top;
  mask-image: linear-gradient(180deg, transparent 0%, #000 40%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 40%);
  pointer-events: none;
}
.hs-neo-inner { position: relative; z-index: 1; max-width: 720px; text-align: center; }
.hs-neo-eye {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px; letter-spacing: 0.24em;
  color: #22d3ee; padding: 4px 14px;
  border: 1px solid #22d3ee;
  text-shadow: 0 0 10px rgba(34,211,238,0.6);
  margin-bottom: 22px;
}
.hs-neo h2 {
  margin: 0 0 18px;
  font-size: clamp(36px, 6vw, 64px); font-weight: 900;
  letter-spacing: -0.02em; line-height: 1.05;
  text-shadow: 0 0 30px rgba(238,82,206,0.4);
}
.hs-neo h2 em { color: #ee52ce; font-style: italic; text-shadow: 0 0 18px rgba(238,82,206,0.7); }
.hs-neo p { margin: 0 auto 28px; font-size: 16px; color: #a890c8; max-width: 460px; line-height: 1.55; }
.hs-neo-cta {
  display: inline-block; padding: 14px 36px;
  background: transparent; color: #ee52ce;
  border: 2px solid #ee52ce; border-radius: 0;
  font-weight: 800; font-size: 15px; letter-spacing: 0.12em;
  text-transform: uppercase; text-decoration: none;
  box-shadow: 0 0 18px rgba(238,82,206,0.5), inset 0 0 18px rgba(238,82,206,0.18);
  animation: hs-neo-pulse 2.4s ease-in-out infinite alternate;
  transition: background 0.15s, color 0.15s;
}
@keyframes hs-neo-pulse {
  from { box-shadow: 0 0 14px rgba(238,82,206,0.4), inset 0 0 14px rgba(238,82,206,0.14); }
  to   { box-shadow: 0 0 28px rgba(238,82,206,0.7), inset 0 0 24px rgba(238,82,206,0.28); }
}
.hs-neo-cta:hover { background: #ee52ce; color: #0a0014; }
@media (prefers-reduced-motion: reduce) {
  .hs-neo-cta { animation: none; transition: none; }
}
```

### 25. Parallax Mountain

**Type:** Pure CSS
**Description:** Layered SVG mountain silhouettes drift at different speeds — glacier blue and pine on alpine snow. The outdoor / travel-brand parallax landscape.

**HTML:**
```html
<section class="hs-prx" aria-label="Hero">
  <div class="hs-prx-sky" aria-hidden="true"></div>
  <div class="hs-prx-sun" aria-hidden="true"></div>
  <svg
    class="hs-prx-m hs-prx-m3"
    viewBox="0 0 1200 320"
    preserveAspectRatio="none"
    aria-hidden="true"
  >
    <path
      d="M0,320 L0,180 L120,80 L240,140 L360,60 L480,120 L600,40 L720,110 L840,70 L960,130 L1080,90 L1200,150 L1200,320 Z"
      fill="#5a7a8a"
    />
  </svg>
  <svg
    class="hs-prx-m hs-prx-m2"
    viewBox="0 0 1200 320"
    preserveAspectRatio="none"
    aria-hidden="true"
  >
    <path
      d="M0,320 L0,220 L100,140 L200,200 L320,120 L440,180 L560,100 L680,170 L800,130 L920,200 L1040,150 L1200,200 L1200,320 Z"
      fill="#3a5868"
    />
  </svg>
  <svg
    class="hs-prx-m hs-prx-m1"
    viewBox="0 0 1200 320"
    preserveAspectRatio="none"
    aria-hidden="true"
  >
    <path
      d="M0,320 L0,260 L120,200 L240,240 L360,180 L480,220 L600,160 L720,210 L840,170 L960,230 L1080,190 L1200,240 L1200,320 Z"
      fill="#1f3a4a"
    />
  </svg>
  <div class="hs-prx-inner">
    <span class="hs-prx-eye">— EST. 1958 · LAKE COUNTRY</span>
    <h2>Trails that <em>earn the silence.</em></h2>
    <p>Six lodges. One ridge. The mountains your grandfather wrote home about.</p>
    <a class="hs-prx-cta" href="#book">Reserve a cabin →</a>
  </div>
</section>
```

**CSS:**
```css
.hs-prx {
  position: relative; overflow: hidden;
  width: 100%; min-height: 480px;
  background: linear-gradient(180deg, #d8e8f0 0%, #a8c8d8 60%, #5a7a8a 100%);
  font-family: 'Inter', system-ui, sans-serif;
  color: #1a2840;
  box-sizing: border-box;
  contain: layout paint;
}
.hs-prx-sky { position: absolute; inset: 0;
  background: radial-gradient(50% 70% at 80% 30%, rgba(255,240,210,0.4), transparent 70%); }
.hs-prx-sun {
  position: absolute; top: 18%; right: 18%;
  width: 80px; height: 80px; border-radius: 50%;
  background: #f9f0d6;
  box-shadow: 0 0 60px rgba(249,240,214,0.7);
}
.hs-prx-m {
  position: absolute; left: 0; right: 0; bottom: 0;
  width: 100%; height: 60%;
  animation: hs-prx-float 12s ease-in-out infinite alternate;
}
.hs-prx-m1 { z-index: 3; height: 38%; animation-duration: 8s; }
.hs-prx-m2 { z-index: 2; height: 50%; animation-duration: 12s; animation-delay: -2s; }
.hs-prx-m3 { z-index: 1; height: 65%; animation-duration: 16s; animation-delay: -4s; }
@keyframes hs-prx-float {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-2%); }
}
.hs-prx-inner {
  position: relative; z-index: 4;
  padding: clamp(28px, 5vw, 56px);
  max-width: 540px;
}
.hs-prx-eye {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.18em;
  color: #1f3a4a; margin-bottom: 14px;
}
.hs-prx h2 {
  margin: 0 0 16px;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(34px, 5vw, 56px);
  font-weight: 700; letter-spacing: -0.02em; line-height: 1.05;
  color: #0d2030;
}
.hs-prx h2 em { color: #1f3a4a; font-style: italic; }
.hs-prx p { margin: 0 0 22px; font-size: 16px; line-height: 1.55; color: #2a4858; max-width: 420px; }
.hs-prx-cta {
  display: inline-block; padding: 12px 22px;
  background: #f9f0d6; color: #1f3a4a;
  border: 2px solid #1f3a4a; border-radius: 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px; font-weight: 700; letter-spacing: 0.12em;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.hs-prx-cta:hover { background: #1f3a4a; color: #f9f0d6; }
@media (prefers-reduced-motion: reduce) {
  .hs-prx-m { animation: none; }
  .hs-prx-cta { transition: none; }
}
```

### 26. Isometric Room

**Type:** Pure CSS
**Description:** Cozy WFH isometric — a CSS-painted desk + laptop + plant + lamp scene rendered with `transform: skewY()`. Mauve, dusty rose, and sage — the calm-productivity aesthetic.

**HTML:**
```html
<section class="hs-iso" aria-label="Hero">
  <div class="hs-iso-copy">
    <span class="hs-iso-eye">/ for the home office crowd</span>
    <h2>Deep work, <em>without the doom-tabs.</em></h2>
    <p>
      A focus timer that stays in the menu bar, not your face. Three tasks a day, one calm
      afternoon.
    </p>
    <a class="hs-iso-cta" href="#start">Start a session →</a>
  </div>
  <div class="hs-iso-scene" aria-hidden="true">
    <div class="hs-iso-desk">
      <div class="hs-iso-laptop"><span></span></div>
      <div class="hs-iso-mug"></div>
      <div class="hs-iso-plant"><span></span><span></span></div>
      <div class="hs-iso-lamp"><span></span></div>
    </div>
    <div class="hs-iso-floor"></div>
  </div>
</section>
```

**CSS:**
```css
.hs-iso {
  display: grid; grid-template-columns: 1fr 1fr;
  width: 100%; min-height: 480px;
  padding: clamp(28px, 5vw, 56px);
  gap: clamp(20px, 4vw, 48px);
  align-items: center;
  background:
    radial-gradient(70% 60% at 70% 30%, rgba(216,150,180,0.18), transparent 70%),
    #f0e8e2;
  font-family: 'Inter', system-ui, sans-serif;
  color: #4a2840;
  box-sizing: border-box;
}
.hs-iso-eye {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.16em;
  color: #8a5a78; margin-bottom: 14px;
}
.hs-iso h2 {
  margin: 0 0 16px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(32px, 5vw, 50px);
  font-weight: 600; letter-spacing: -0.015em; line-height: 1.05;
}
.hs-iso h2 em { color: #8a5a78; font-style: italic; }
.hs-iso p { margin: 0 0 22px; font-size: 15.5px; line-height: 1.6; color: #6a4858; max-width: 420px; }
.hs-iso-cta {
  display: inline-block; padding: 12px 22px;
  background: #4a2840; color: #f0e8e2;
  border-radius: 999px; text-decoration: none;
  font-weight: 600; font-size: 14px;
  transition: background 0.18s;
}
.hs-iso-cta:hover { background: #8a5a78; }
.hs-iso-scene {
  position: relative; height: 320px;
  display: grid; place-items: center;
  perspective: 800px;
}
.hs-iso-floor {
  position: absolute; bottom: 30px; left: 10%; right: 10%;
  height: 180px;
  background: linear-gradient(180deg, #d8b8c8 0%, #b890a8 100%);
  transform: rotateX(60deg);
  border-radius: 14px;
}
.hs-iso-desk {
  position: relative;
  width: 220px; height: 140px;
  background: linear-gradient(135deg, #e0c8a8 0%, #b89878 100%);
  transform: rotateX(60deg) rotateZ(-30deg);
  transform-style: preserve-3d;
  border-radius: 4px;
  box-shadow: 0 22px 40px rgba(74,40,64,0.25);
}
.hs-iso-laptop {
  position: absolute; top: 18%; left: 30%;
  width: 70px; height: 50px;
  background: #4a2840; border-radius: 4px;
  transform: translateZ(20px);
}
.hs-iso-laptop span {
  position: absolute; inset: 4px;
  background: #d8a8c0;
  border-radius: 2px;
}
.hs-iso-mug {
  position: absolute; top: 30%; right: 14%;
  width: 22px; height: 22px;
  background: #c0d8a8;
  border-radius: 4px;
  transform: translateZ(20px);
}
.hs-iso-plant {
  position: absolute; top: -6%; right: 6%;
  width: 30px; height: 50px;
}
.hs-iso-plant span {
  position: absolute; bottom: 0; width: 30px; height: 14px;
  background: #b89878; border-radius: 4px 4px 12px 12px;
  transform: translateZ(20px);
}
.hs-iso-plant span:nth-child(2) {
  width: 6px; height: 28px; bottom: 12px; left: 12px;
  background: #6a8a6a; border-radius: 6px 6px 0 0;
}
.hs-iso-lamp {
  position: absolute; top: -10%; left: 12%;
  width: 18px; height: 60px;
  background: #d8a8c0; border-radius: 4px;
}
.hs-iso-lamp span {
  position: absolute; top: -10px; left: -10px;
  width: 38px; height: 18px;
  background: #f0c0a8;
  border-radius: 50% 50% 4px 4px;
}
@media (max-width: 720px) {
  .hs-iso { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .hs-iso-cta { transition: none; } }
```

### 27. 3D Card Stack

**Type:** Pure CSS
**Description:** Three luxury-cosmetics product cards in 3D perspective, fanning forward on hover. Champagne and soft blush on jet — the high-end beauty / fragrance treatment.

**HTML:**
```html
<section class="hs-cst" aria-label="Hero">
  <div class="hs-cst-copy">
    <span class="hs-cst-eye">— Cuvée 04</span>
    <h2>The fragrance <em>three editors couldn't stop wearing.</em></h2>
    <p>Bergamot, oud, and a single drop of Damascus rose. 50ml. Limited.</p>
    <a class="hs-cst-cta" href="#shop">Discover the bottle</a>
  </div>
  <div class="hs-cst-stack">
    <article class="hs-cst-card hs-cst-c1"><strong>04</strong><em>Cuvée</em></article>
    <article class="hs-cst-card hs-cst-c2"><strong>04</strong><em>Cuvée</em></article>
    <article class="hs-cst-card hs-cst-c3"><strong>04</strong><em>Cuvée</em></article>
  </div>
</section>
```

**CSS:**
```css
.hs-cst {
  display: grid; grid-template-columns: 1fr 1fr;
  width: 100%; min-height: 480px;
  padding: clamp(28px, 5vw, 56px);
  gap: clamp(20px, 4vw, 56px);
  align-items: center;
  background: #0d0a0a;
  font-family: 'Inter', system-ui, sans-serif;
  color: #f0e0c8;
  box-sizing: border-box;
  perspective: 1200px;
}
.hs-cst-eye {
  display: inline-block;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic; font-size: 16px;
  color: #c69e5a; margin-bottom: 14px;
}
.hs-cst h2 {
  margin: 0 0 18px;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(28px, 4.5vw, 46px);
  font-weight: 600; letter-spacing: -0.01em; line-height: 1.1;
  color: #f0e0c8;
}
.hs-cst h2 em { color: #f5c2c8; font-style: italic; }
.hs-cst p { margin: 0 0 24px; font-size: 15px; line-height: 1.6; color: #b89878; max-width: 380px; }
.hs-cst-cta {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; font-weight: 700; letter-spacing: 0.16em;
  color: #c69e5a; text-decoration: none;
  border-bottom: 1.5px solid #c69e5a; padding-bottom: 3px;
  transition: color 0.18s, border-color 0.18s;
}
.hs-cst-cta:hover { color: #f5c2c8; border-color: #f5c2c8; }
.hs-cst-stack {
  position: relative; height: 100%; min-height: 360px;
  display: grid; place-items: center;
  transform-style: preserve-3d;
}
.hs-cst-card {
  position: absolute;
  width: 180px; height: 260px;
  background: linear-gradient(135deg, #2a1a1a 0%, #0d0a0a 100%);
  border: 1px solid #c69e5a;
  border-radius: 6px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 8px;
  transition: transform 0.4s cubic-bezier(.22,1,.36,1);
}
.hs-cst-card strong {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 64px; font-weight: 800; font-style: italic;
  color: #c69e5a; line-height: 1;
}
.hs-cst-card em {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-style: normal; letter-spacing: 0.24em;
  color: #c69e5a;
}
.hs-cst-c1 { transform: translateX(-90px) rotateY(20deg) translateZ(-40px); }
.hs-cst-c2 { transform: translateZ(0); z-index: 2; background: linear-gradient(135deg, #3a2828 0%, #1a1010 100%); }
.hs-cst-c3 { transform: translateX(90px) rotateY(-20deg) translateZ(-40px); }
.hs-cst-stack:hover .hs-cst-c1 { transform: translateX(-130px) rotateY(20deg) translateZ(0); }
.hs-cst-stack:hover .hs-cst-c2 { transform: translateZ(40px); }
.hs-cst-stack:hover .hs-cst-c3 { transform: translateX(130px) rotateY(-20deg) translateZ(0); }
@media (max-width: 720px) {
  .hs-cst { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .hs-cst-card { transition: none; }
  .hs-cst-cta { transition: none; }
}
```

### 28. Particle Starfield

**Type:** Pure CSS
**Description:** Pure-CSS starfield — dots positioned via radial-gradient on a deep-navy backdrop. Electric yellow accent and dim white copy. No canvas, no per-particle DOM.

**HTML:**
```html
<section class="hs-stf" aria-label="Hero">
  <div class="hs-stf-stars" aria-hidden="true"></div>
  <div class="hs-stf-stars hs-stf-stars-2" aria-hidden="true"></div>
  <div class="hs-stf-inner">
    <span class="hs-stf-eye">★ NIGHT SKY ATLAS</span>
    <h2>Every constellation, <em>over your back yard tonight.</em></h2>
    <p>
      Point your phone up. We'll tell you which star is where, why it has that name, and when to
      look again.
    </p>
    <a class="hs-stf-cta" href="#download">Get the atlas</a>
  </div>
</section>
```

**CSS:**
```css
.hs-stf {
  position: relative; overflow: hidden;
  display: grid; place-items: center;
  width: 100%; min-height: 480px;
  padding: clamp(28px, 5vw, 64px) clamp(20px, 5vw, 56px);
  background:
    radial-gradient(ellipse at 50% 100%, rgba(248,210,72,0.16), transparent 70%),
    linear-gradient(180deg, #050a1a 0%, #0a1428 60%, #1a2840 100%);
  font-family: 'Inter', system-ui, sans-serif;
  color: #f0eee0;
  box-sizing: border-box;
  contain: layout paint;
}
.hs-stf-stars {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1px 1px at 12% 8%, #fff, transparent),
    radial-gradient(1px 1px at 28% 24%, #f8d248, transparent),
    radial-gradient(1.5px 1.5px at 44% 12%, #fff, transparent),
    radial-gradient(1px 1px at 60% 30%, #fff, transparent),
    radial-gradient(2px 2px at 78% 18%, #f8d248, transparent),
    radial-gradient(1px 1px at 90% 32%, #fff, transparent),
    radial-gradient(1px 1px at 18% 48%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 35% 64%, #fff, transparent),
    radial-gradient(1px 1px at 52% 52%, #f8d248, transparent),
    radial-gradient(2px 2px at 70% 76%, #fff, transparent),
    radial-gradient(1px 1px at 84% 60%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 8% 80%, #fff, transparent),
    radial-gradient(1px 1px at 96% 88%, #fff, transparent);
  background-size: 100% 100%;
  animation: hs-stf-twinkle 4s ease-in-out infinite alternate;
}
.hs-stf-stars-2 {
  background-image:
    radial-gradient(1px 1px at 22% 14%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 48% 30%, rgba(248,210,72,0.5), transparent),
    radial-gradient(1px 1px at 66% 8%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 84% 44%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 14% 62%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 76% 88%, rgba(255,255,255,0.5), transparent);
  animation-delay: -2s;
}
@keyframes hs-stf-twinkle {
  from { opacity: 0.5; }
  to   { opacity: 1; }
}
.hs-stf-inner { position: relative; z-index: 1; max-width: 640px; text-align: center; }
.hs-stf-eye {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px; letter-spacing: 0.24em;
  color: #f8d248; margin-bottom: 22px;
}
.hs-stf h2 {
  margin: 0 0 16px;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(34px, 5vw, 56px);
  font-weight: 700; letter-spacing: -0.02em; line-height: 1.05;
  color: #f0eee0;
}
.hs-stf h2 em { color: #f8d248; font-style: italic; }
.hs-stf p { margin: 0 auto 26px; font-size: 16px; line-height: 1.55; color: #b8b0a0; max-width: 460px; }
.hs-stf-cta {
  display: inline-block; padding: 13px 26px;
  background: #f8d248; color: #050a1a;
  border-radius: 0; text-decoration: none;
  font-weight: 800; font-size: 14.5px; letter-spacing: 0.04em;
  transition: background 0.15s;
}
.hs-stf-cta:hover { background: #fff; }
@media (prefers-reduced-motion: reduce) {
  .hs-stf-stars { animation: none; }
  .hs-stf-cta { transition: none; }
}
```

### 29. Glitch Text Hero

**Type:** Pure CSS
**Description:** VHS-glitch hero — RGB-channel offsets create a tape-static glitch effect. VHS red and tape blue against a static-gray background, the analogue cyberpunk treatment.

**HTML:**
```html
<section class="hs-glt" aria-label="Hero">
  <span class="hs-glt-static" aria-hidden="true"></span>
  <span class="hs-glt-scan" aria-hidden="true"></span>
  <div class="hs-glt-inner">
    <span class="hs-glt-eye">REC ● 00:42:18</span>
    <h2 data-text="LOST &amp; FOUND" class="hs-glt-h">LOST &amp; FOUND</h2>
    <p>
      A search engine for VHS-era ephemera. Public-access TV, mall demos, regional news. The
      forgotten internet of the 80s.
    </p>
    <a class="hs-glt-cta" href="#search">Search the tapes →</a>
  </div>
</section>
```

**CSS:**
```css
.hs-glt {
  position: relative; overflow: hidden;
  display: grid; place-items: center;
  width: 100%; min-height: 480px;
  padding: clamp(28px, 5vw, 64px) clamp(20px, 5vw, 56px);
  background: #1a1818;
  font-family: 'JetBrains Mono', monospace;
  color: #d8d4c8;
  box-sizing: border-box;
  contain: layout paint;
}
.hs-glt-static {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    radial-gradient(rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 3px 3px, 5px 5px;
  background-position: 0 0, 1px 1px;
  pointer-events: none;
  animation: hs-glt-jit 0.2s steps(2) infinite;
}
.hs-glt-scan {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(180deg, transparent 0 2px, rgba(0,0,0,0.18) 2px 3px);
  pointer-events: none;
}
@keyframes hs-glt-jit {
  0%   { transform: translate(0,0); }
  50%  { transform: translate(-1px,1px); }
  100% { transform: translate(1px,-1px); }
}
.hs-glt-inner { position: relative; z-index: 1; max-width: 640px; text-align: center; }
.hs-glt-eye {
  display: inline-block; padding: 4px 10px;
  background: #d63838; color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: 0.18em;
  margin-bottom: 22px;
  animation: hs-glt-blink 1.4s steps(2) infinite;
}
@keyframes hs-glt-blink {
  to { opacity: 0.5; }
}
.hs-glt-h {
  position: relative; margin: 0 0 18px;
  font-family: 'Inter', sans-serif;
  font-size: clamp(48px, 9vw, 100px); font-weight: 900;
  letter-spacing: -0.04em; line-height: 0.92;
  color: #f0eee0;
}
.hs-glt-h::before, .hs-glt-h::after {
  content: attr(data-text);
  position: absolute; top: 0; left: 0; right: 0;
  pointer-events: none;
  text-align: center;
}
.hs-glt-h::before {
  color: #d63838;
  transform: translate(-3px,0);
  clip-path: polygon(0 12%, 100% 12%, 100% 38%, 0 38%);
  animation: hs-glt-rgb 2.4s ease-in-out infinite;
}
.hs-glt-h::after {
  color: #38b8d6;
  transform: translate(3px,0);
  clip-path: polygon(0 56%, 100% 56%, 100% 88%, 0 88%);
  animation: hs-glt-rgb 2.4s ease-in-out infinite reverse;
}
@keyframes hs-glt-rgb {
  0%, 100% { transform: translate(-3px,0); }
  50%      { transform: translate(3px,2px); }
}
.hs-glt p { margin: 0 auto 24px; font-size: 14px; line-height: 1.6; color: #98948c; max-width: 460px; }
.hs-glt-cta {
  display: inline-block; padding: 12px 22px;
  background: #38b8d6; color: #1a1818;
  border-radius: 0; text-decoration: none;
  font-weight: 800; font-size: 13px; letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: background 0.15s, color 0.15s;
}
.hs-glt-cta:hover { background: #d63838; color: #fff; }
@media (prefers-reduced-motion: reduce) {
  .hs-glt-static, .hs-glt-eye, .hs-glt-h::before, .hs-glt-h::after { animation: none; }
  .hs-glt-cta { transition: none; }
}
```

### 30. Conic Orbit Hero

**Type:** Pure CSS
**Description:** Solar-corona conic gradient ring orbits the headline using <code>@property</code> animatable angle. Gold and ember orange on jet black — the AI / launch treatment with a stellar feel.

**HTML:**
```html
<section class="hs-orb" aria-label="Hero">
  <div class="hs-orb-stage">
    <div class="hs-orb-ring" aria-hidden="true"></div>
    <div class="hs-orb-core" aria-hidden="true"></div>
  </div>
  <div class="hs-orb-inner">
    <span class="hs-orb-eye">solar v3</span>
    <h2>Compute that <em>moves at the speed of light.</em></h2>
    <p>The new generation of inference cards. 3× the throughput. Half the heat.</p>
    <a class="hs-orb-cta" href="#preorder">Pre-order →</a>
  </div>
</section>
```

**CSS:**
```css
@property --hs-orb-a {
  syntax: '<angle>'; initial-value: 0deg; inherits: false;
}
.hs-orb {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 1fr 1fr;
  width: 100%; min-height: 480px;
  padding: clamp(28px, 5vw, 56px);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  background: #0a0805;
  font-family: 'Inter', system-ui, sans-serif;
  color: #f8e8c8;
  box-sizing: border-box;
}
.hs-orb-stage {
  position: relative;
  height: 100%; min-height: 320px;
  display: grid; place-items: center;
}
.hs-orb-ring {
  width: 320px; height: 320px;
  border-radius: 50%;
  background:
    conic-gradient(from var(--hs-orb-a),
      #f8d248, #ff6b1a, #d63a18, #ff6b1a, #f8d248);
  filter: blur(8px);
  animation: hs-orb-spin 12s linear infinite;
  -webkit-mask: radial-gradient(circle, transparent 96px, #000 100px, #000 158px, transparent 162px);
          mask: radial-gradient(circle, transparent 96px, #000 100px, #000 158px, transparent 162px);
}
.hs-orb-core {
  position: absolute;
  width: 200px; height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, #ff6b1a 0%, #d63a18 50%, #6b1a08 100%);
  box-shadow: 0 0 80px rgba(255,107,26,0.4);
}
@keyframes hs-orb-spin { to { --hs-orb-a: 360deg; } }
.hs-orb-inner { position: relative; z-index: 1; }
.hs-orb-eye {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px; letter-spacing: 0.16em;
  color: #f8d248; padding: 4px 12px;
  background: rgba(248,210,72,0.12);
  border: 1px solid rgba(248,210,72,0.4);
  border-radius: 999px;
  margin-bottom: 18px;
}
.hs-orb h2 {
  margin: 0 0 16px;
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 800; letter-spacing: -0.025em; line-height: 1.1;
  color: #f8e8c8;
  word-wrap: break-word;
}
.hs-orb h2 em {
  background: linear-gradient(90deg, #f8d248, #ff6b1a);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-style: italic;
  display: inline-block;
}
.hs-orb p { margin: 0 0 26px; font-size: 16px; line-height: 1.55; color: #b89878; max-width: 420px; }
.hs-orb-cta {
  display: inline-block; padding: 13px 26px;
  background: linear-gradient(135deg, #ff6b1a, #d63a18);
  color: #0a0805; border-radius: 999px;
  text-decoration: none; font-weight: 800; font-size: 14.5px;
  box-shadow: 0 14px 36px rgba(255,107,26,0.35);
  transition: transform 0.15s;
}
.hs-orb-cta:hover { transform: translateY(-1px); }
@media (max-width: 720px) {
  .hs-orb { grid-template-columns: 1fr; }
  .hs-orb-ring, .hs-orb-core { width: 200px; height: 200px; }
  .hs-orb-core { width: 130px; height: 130px; }
  .hs-orb-ring { -webkit-mask: radial-gradient(circle, transparent 60px, #000 64px, #000 98px, transparent 102px); mask: radial-gradient(circle, transparent 60px, #000 64px, #000 98px, transparent 102px); }
}
@media (prefers-reduced-motion: reduce) {
  .hs-orb-ring { animation: none; }
  .hs-orb-cta { transition: none; }
}
```

---
## 30 CSS Hover Effects

URL: https://codefronts.com/motion/css-hover-effects/
Description: 30 hand-coded CSS hover effects covering every production interactive pattern in 2026 — text hover (underline draw, glitch, letter-spacing expand, gradient reveal, split text, neon glow), button hover (magnetic liquid, border draw, shimmer shine, fill wipe, 3D press, ripple), card hover (3D tilt, flip, glassmorphism, spotlight, slide reveal, stack lift), image hover (zoom-pan, color channel split, distortion, duotone, curtain reveal, Ken Burns), navigation hover (underline slide, highlight fill, strikethrough link, inline word swap), and pointer-tracking effects (cursor dot trail, magnetic pull). 24 demos are 100% pure CSS using <code>:hover</code> + GPU-accelerated <code>transform</code> / <code>opacity</code> transitions; 6 use ~30-60 lines of vanilla JavaScript for pointer-coordinate tracking. All respect <code>prefers-reduced-motion</code>, use scoped <code>.hv-NN__*</code> class names so multiple effects coexist on the same page without style bleed, ship INP-safe (no layout-triggering animations), MIT-licensed. Drop into React, Vue, Astro, Svelte, Rails ERB, plain HTML, or WordPress — zero framework dependencies.
Demo count: 30

### 01. CSS Underline Draw Hover Effect

**Type:** Pure CSS
**Description:** Six scoped link and heading hover styles that animate underlines from invisible to visible — left-to-right draw, center-out expand, two-tone dual-line, offset thick bar, dotted border, and gradient sweep — all driven by CSS custom properties and pseudo-element transforms.

**HTML:**
```html
<div class="hv-01">
  <div class="hv-01__grid">
    <div class="hv-01__cell">
      <a class="hv-01__link hv-01__link--ltr" href="#">Left-to-Right Draw</a>
      <span class="hv-01__label">scaleX · left origin</span>
    </div>
    <div class="hv-01__cell">
      <a class="hv-01__link hv-01__link--center" href="#">Center Expand</a>
      <span class="hv-01__label">scaleX · center origin</span>
    </div>
    <div class="hv-01__cell">
      <a class="hv-01__link hv-01__link--dual" href="#">Dual Line Sweep</a>
      <span class="hv-01__label">::before + ::after toward center</span>
    </div>
    <div class="hv-01__cell">
      <a class="hv-01__link hv-01__link--thick" href="#">Thick Bar Slide</a>
      <span class="hv-01__label">offset bold underbar</span>
    </div>
    <div class="hv-01__cell">
      <a class="hv-01__link hv-01__link--dot" href="#">Dotted Border Grow</a>
      <span class="hv-01__label">border-bottom + scaleX</span>
    </div>
    <div class="hv-01__cell">
      <a class="hv-01__link hv-01__link--grad" href="#">Gradient Sweep</a>
      <span class="hv-01__label">background-size animation</span>
    </div>
  </div>
</div>
```

**CSS:**
```css
.hv-01,.hv-01 *,.hv-01 *::before,.hv-01 *::after{box-sizing:border-box;margin:0;padding:0}
.hv-01 ::selection{background:#f72585;color:#fff}
.hv-01{
  --bg:#0a0a0f;
  --text:#e8e6f0;
  --dim:#666;
  --accent:#f72585;
  --cyan:#4cc9f0;
  --gold:#ffd60a;
  --green:#06d6a0;
  --orange:#fb5607;
  font-family:'Segoe UI',system-ui,sans-serif;
  background:var(--bg);
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  padding:60px 24px;
}
.hv-01__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:40px 60px;
  max-width:900px;
  width:100%;
}
.hv-01__cell{
  display:flex;flex-direction:column;align-items:center;gap:16px;
  padding:40px 24px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.07);
  border-radius:12px;
}
.hv-01__label{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--dim);text-align:center}

/* shared link base */
.hv-01__link{
  font-size:1.25rem;font-weight:600;color:var(--text);
  text-decoration:none;position:relative;display:inline-block;
  padding-bottom:4px;
}

/* 1 — left-to-right draw */
.hv-01__link--ltr::after{
  content:'';position:absolute;left:0;bottom:0;width:100%;height:2px;
  background:var(--accent);
  transform:scaleX(0);transform-origin:left;
  transition:transform .35s cubic-bezier(.4,0,.2,1);
}
.hv-01__link--ltr:hover::after{transform:scaleX(1)}

/* 2 — center expand */
.hv-01__link--center::after{
  content:'';position:absolute;left:0;bottom:0;width:100%;height:2px;
  background:var(--cyan);
  transform:scaleX(0);transform-origin:center;
  transition:transform .4s cubic-bezier(.4,0,.2,1);
}
.hv-01__link--center:hover::after{transform:scaleX(1)}

/* 3 — dual line sweep */
.hv-01__link--dual::before,
.hv-01__link--dual::after{
  content:'';position:absolute;left:0;width:100%;height:2px;
  background:var(--gold);
  transform:scaleX(0);
  transition:transform .4s cubic-bezier(.4,0,.2,1);
}
.hv-01__link--dual::before{bottom:6px;transform-origin:right}
.hv-01__link--dual::after{bottom:0;transform-origin:left}
.hv-01__link--dual:hover::before,
.hv-01__link--dual:hover::after{transform:scaleX(1)}

/* 4 — thick offset bar (highlighter effect).
       The :hover swaps text to var(--bg) so it reads as dark text on
       a bright green highlight. For the bar to land BEHIND the text
       but ABOVE the cell background, the link itself must create a
       stacking context — otherwise z-index:-1 on the ::after escapes
       the link and lands behind the cell's translucent fill, hiding
       the entire highlight. isolation:isolate creates that local
       stacking context without affecting the link's positioning.
       Bar height bumped from 6px to a fuller block so it visually
       reads as a highlighter rather than a thin underline; bottom
       offset adjusted so the bar covers the full text height. */
.hv-01__link--thick{isolation:isolate}
.hv-01__link--thick::after{
  content:'';position:absolute;left:-6px;bottom:0;
  width:calc(100% + 12px);height:100%;
  background:var(--green);border-radius:3px;
  transform:scaleX(0);transform-origin:left;
  transition:transform .35s cubic-bezier(.22,1,.36,1);
  z-index:-1;opacity:.85;
}
.hv-01__link--thick:hover::after{transform:scaleX(1)}
.hv-01__link--thick:hover{color:var(--bg)}

/* 5 — dotted border grow */
.hv-01__link--dot::after{
  content:'';position:absolute;left:0;bottom:0;width:100%;
  border-bottom:2px dotted var(--orange);
  transform:scaleX(0);transform-origin:left;
  transition:transform .4s ease;
}
.hv-01__link--dot:hover::after{transform:scaleX(1)}
.hv-01__link--dot:hover{color:var(--orange)}

/* 6 — gradient background-size sweep */
.hv-01__link--grad{
  background-image:linear-gradient(90deg,var(--accent),var(--cyan));
  background-repeat:no-repeat;
  background-size:0% 2px;
  background-position:left bottom;
  transition:background-size .4s cubic-bezier(.4,0,.2,1),color .3s;
}
.hv-01__link--grad:hover{
  background-size:100% 2px;
  color:var(--accent);
}

@media(max-width:680px){.hv-01__grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:440px){.hv-01__grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){
  .hv-01__link::before,.hv-01__link::after{transition:none!important}
  .hv-01__link--grad{transition:none!important}
}
```

### 02. CSS Text Glitch Hover Effect

**Type:** Pure CSS
**Description:** Four text glitch hover effects — RGB channel split, scanline flicker, noise slice, and VHS chromatic aberration — each triggered by hovering the element and driven entirely by CSS keyframes on pseudo-elements using clip-path and color-mix.

**HTML:**
```html
<div class="hv-02">
  <div class="hv-02__grid">
    <div class="hv-02__cell">
      <span class="hv-02__glitch hv-02__glitch--rgb" data-text="GLITCH">GLITCH</span>
      <span class="hv-02__label">RGB Channel Split</span>
    </div>
    <div class="hv-02__cell">
      <span class="hv-02__glitch hv-02__glitch--scan" data-text="SCANLINE">SCANLINE</span>
      <span class="hv-02__label">Scanline Flicker</span>
    </div>
    <div class="hv-02__cell">
      <span class="hv-02__glitch hv-02__glitch--slice" data-text="NOISE">NOISE</span>
      <span class="hv-02__label">Noise Slice</span>
    </div>
    <div class="hv-02__cell">
      <span class="hv-02__glitch hv-02__glitch--vhs" data-text="VHS">VHS</span>
      <span class="hv-02__label">VHS Chromatic</span>
    </div>
  </div>
</div>
```

**CSS:**
```css
.hv-02,.hv-02 *,.hv-02 *::before,.hv-02 *::after{box-sizing:border-box;margin:0;padding:0}
.hv-02 ::selection{background:#ff003c;color:#fff}
.hv-02{
  --bg:#080810;
  --text:#f0f0f0;
  --dim:#444;
  --red:#ff003c;
  --blue:#00e5ff;
  --green:#39ff14;
  --yellow:#ffe600;
  font-family:'Segoe UI',system-ui,sans-serif;
  background:var(--bg);
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  padding:60px 24px;
}
.hv-02__grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:48px;
  max-width:800px;width:100%;
}
.hv-02__cell{
  display:flex;flex-direction:column;align-items:center;gap:24px;
  padding:60px 32px;
  background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.07);
  border-radius:12px;
}
.hv-02__label{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--dim)}

/* shared glitch base */
.hv-02__glitch{
  font-size:clamp(2rem,6vw,3.5rem);font-weight:900;
  color:var(--text);letter-spacing:.08em;
  position:relative;cursor:default;display:inline-block;
}
.hv-02__glitch::before,
.hv-02__glitch::after{
  content:attr(data-text);
  position:absolute;top:0;left:0;width:100%;height:100%;
  pointer-events:none;
}

/* 1 — RGB channel split */
.hv-02__glitch--rgb::before{color:var(--red);left:2px}
.hv-02__glitch--rgb::after{color:var(--blue);left:-2px}
.hv-02__glitch--rgb:hover::before{animation:hv-02-rgb-b .4s steps(2) infinite}
.hv-02__glitch--rgb:hover::after{animation:hv-02-rgb-a .4s steps(2) infinite .1s}
@keyframes hv-02-rgb-b{
  0%{clip-path:inset(0 0 95% 0);transform:translateX(-3px)}
  20%{clip-path:inset(30% 0 50% 0);transform:translateX(3px)}
  40%{clip-path:inset(60% 0 20% 0);transform:translateX(-2px)}
  60%{clip-path:inset(10% 0 75% 0);transform:translateX(4px)}
  80%{clip-path:inset(80% 0 5% 0);transform:translateX(-3px)}
  100%{clip-path:inset(45% 0 40% 0);transform:translateX(2px)}
}
@keyframes hv-02-rgb-a{
  0%{clip-path:inset(50% 0 30% 0);transform:translateX(3px)}
  25%{clip-path:inset(5% 0 80% 0);transform:translateX(-4px)}
  50%{clip-path:inset(70% 0 15% 0);transform:translateX(2px)}
  75%{clip-path:inset(20% 0 60% 0);transform:translateX(-3px)}
  100%{clip-path:inset(40% 0 45% 0);transform:translateX(3px)}
}

/* 2 — scanline flicker */
.hv-02__glitch--scan{color:var(--green)}
.hv-02__glitch--scan::before{
  background:repeating-linear-gradient(
    0deg,transparent,transparent 2px,rgba(0,0,0,.4) 2px,rgba(0,0,0,.4) 4px
  );
  background-size:100% 4px;
  mix-blend-mode:multiply;
  opacity:0;transition:opacity .2s;
}
.hv-02__glitch--scan::after{color:var(--green);left:2px;opacity:0;transition:opacity .2s}
.hv-02__glitch--scan:hover::before{
  opacity:1;
  animation:hv-02-scan-roll .8s linear infinite;
}
.hv-02__glitch--scan:hover::after{
  opacity:.7;
  animation:hv-02-rgb-b .3s steps(3) infinite;
}
@keyframes hv-02-scan-roll{
  0%{background-position-y:0}100%{background-position-y:100px}
}

/* 3 — noise slice */
.hv-02__glitch--slice{color:var(--yellow)}
.hv-02__glitch--slice::before{
  color:var(--red);clip-path:inset(0 0 100% 0);
}
.hv-02__glitch--slice::after{
  color:var(--blue);clip-path:inset(100% 0 0 0);
}
.hv-02__glitch--slice:hover::before{animation:hv-02-slice-t .5s steps(4) infinite}
.hv-02__glitch--slice:hover::after{animation:hv-02-slice-b .5s steps(4) infinite .15s}
@keyframes hv-02-slice-t{
  0%{clip-path:inset(0 0 85% 0);transform:translateX(6px) skewX(-2deg)}
  33%{clip-path:inset(25% 0 55% 0);transform:translateX(-5px)}
  66%{clip-path:inset(60% 0 10% 0);transform:translateX(4px) skewX(1deg)}
  100%{clip-path:inset(10% 0 75% 0);transform:translateX(-6px)}
}
@keyframes hv-02-slice-b{
  0%{clip-path:inset(80% 0 0 0);transform:translateX(-4px)}
  33%{clip-path:inset(50% 0 20% 0);transform:translateX(6px)}
  66%{clip-path:inset(15% 0 70% 0);transform:translateX(-3px) skewX(2deg)}
  100%{clip-path:inset(65% 0 5% 0);transform:translateX(5px)}
}

/* 4 — VHS chromatic */
.hv-02__glitch--vhs{color:#fff}
.hv-02__glitch--vhs::before{
  color:var(--red);mix-blend-mode:screen;
  transform:translateX(0);
}
.hv-02__glitch--vhs::after{
  color:var(--blue);mix-blend-mode:screen;
  transform:translateX(0);
}
.hv-02__glitch--vhs:hover::before{animation:hv-02-vhs-r .6s steps(3) infinite}
.hv-02__glitch--vhs:hover::after{animation:hv-02-vhs-b .6s steps(3) infinite .2s}
@keyframes hv-02-vhs-r{
  0%{transform:translateX(-6px);clip-path:inset(20% 0 60% 0)}
  50%{transform:translateX(4px);clip-path:inset(55% 0 10% 0)}
  100%{transform:translateX(-5px);clip-path:inset(5% 0 80% 0)}
}
@keyframes hv-02-vhs-b{
  0%{transform:translateX(6px);clip-path:inset(40% 0 30% 0)}
  50%{transform:translateX(-4px);clip-path:inset(10% 0 65% 0)}
  100%{transform:translateX(5px);clip-path:inset(70% 0 5% 0)}
}

@media(max-width:520px){.hv-02__grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){
  .hv-02__glitch::before,.hv-02__glitch::after{animation:none!important;opacity:0!important}
}
```

### 03. CSS Letter Spacing Expand Hover Effect

**Type:** Pure CSS
**Description:** Five typographic hover states that animate letter-spacing from tight to airy — standard expand, collapse-in, stagger fade-out, per-letter scale, and tracking shift with fade — demonstrating how spacing transitions alone can carry expressive weight.

**HTML:**
```html
<div class="hv-03">
  <div class="hv-03__stack">
    <div class="hv-03__row">
      <span class="hv-03__word hv-03__word--expand">EXPAND</span>
      <span class="hv-03__tag">letter-spacing expand</span>
    </div>
    <div class="hv-03__row">
      <span class="hv-03__word hv-03__word--collapse">COLLAPSE</span>
      <span class="hv-03__tag">tracking collapse-in</span>
    </div>
    <div class="hv-03__row">
      <span class="hv-03__word hv-03__word--fade">
        <span>D</span><span>R</span><span>I</span><span>F</span><span>T</span>
      </span>
      <span class="hv-03__tag">stagger fade-out</span>
    </div>
    <div class="hv-03__row">
      <span class="hv-03__word hv-03__word--bold">BOLD TRACK</span>
      <span class="hv-03__tag">weight + spacing</span>
    </div>
    <div class="hv-03__row">
      <span class="hv-03__word hv-03__word--glow">RADIANCE</span>
      <span class="hv-03__tag">spacing + glow</span>
    </div>
  </div>
</div>
```

**CSS:**
```css
.hv-03,.hv-03 *,.hv-03 *::before,.hv-03 *::after{box-sizing:border-box;margin:0;padding:0}
.hv-03 ::selection{background:#7c3aed;color:#fff}
.hv-03{
  --bg:#0d0d14;
  --text:#ede9fe;
  --dim:#6b7280;
  --purple:#a78bfa;
  --pink:#f472b6;
  --cyan:#67e8f9;
  --amber:#fbbf24;
  --white:#fff;
  font-family:'Segoe UI',system-ui,sans-serif;
  background:var(--bg);
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  padding:60px 24px;
}
.hv-03__stack{
  display:flex;flex-direction:column;gap:16px;
  width:min(700px,100%);
}
.hv-03__row{
  display:flex;align-items:center;justify-content:space-between;
  padding:28px 36px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.07);
  border-radius:12px;
  gap:20px;
  overflow:hidden;
}
.hv-03__tag{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);white-space:nowrap;flex-shrink:0}

/* shared word base */
.hv-03__word{
  font-size:clamp(1.4rem,4vw,2rem);font-weight:700;
  cursor:default;display:inline-block;
  transition:letter-spacing .4s cubic-bezier(.4,0,.2,1),color .4s,opacity .4s;
}

/* 1 — standard expand */
.hv-03__word--expand{color:var(--purple);letter-spacing:.02em}
.hv-03__word--expand:hover{letter-spacing:.35em;color:var(--text)}

/* 2 — collapse-in */
.hv-03__word--collapse{color:var(--pink);letter-spacing:.4em}
.hv-03__word--collapse:hover{letter-spacing:.02em;color:var(--white)}

/* 3 — stagger via nth-child span */
.hv-03__word--fade{
  display:inline-flex;gap:0;
  font-size:clamp(1.4rem,4vw,2rem);font-weight:700;
  color:var(--cyan);letter-spacing:.02em;
}
.hv-03__word--fade span{
  display:inline-block;
  transition:letter-spacing .4s cubic-bezier(.4,0,.2,1),opacity .4s;
}
.hv-03__word--fade:hover span{letter-spacing:.2em;opacity:.3}
.hv-03__word--fade span:nth-child(1){transition-delay:.00s}
.hv-03__word--fade span:nth-child(2){transition-delay:.04s}
.hv-03__word--fade span:nth-child(3){transition-delay:.08s}
.hv-03__word--fade span:nth-child(4){transition-delay:.12s}
.hv-03__word--fade span:nth-child(5){transition-delay:.16s}

/* 4 — bold + tracking */
.hv-03__word--bold{color:var(--amber);letter-spacing:.02em;font-weight:400;transition:letter-spacing .35s,font-weight .35s,color .35s}
.hv-03__word--bold:hover{letter-spacing:.25em;font-weight:900;color:var(--white)}

/* 5 — spacing + glow */
.hv-03__word--glow{
  color:var(--text);letter-spacing:.06em;
  transition:letter-spacing .5s cubic-bezier(.4,0,.2,1),text-shadow .5s,color .5s;
}
.hv-03__word--glow:hover{
  letter-spacing:.3em;
  color:#fff;
  text-shadow:0 0 20px var(--purple),0 0 60px var(--pink);
}

@media(max-width:520px){.hv-03__row{flex-direction:column;align-items:flex-start}}
@media(prefers-reduced-motion:reduce){
  .hv-03__word,.hv-03__word--fade span{transition:none!important}
}
```

### 04. CSS Gradient Text Reveal Hover Effect

**Type:** Pure CSS
**Description:** Six gradient text hover techniques — background-clip reveal, linear wipe, conic sweep, radial burst, rainbow shift, and masked shimmer — each using CSS background-clip: text to paint a gradient directly onto letterforms on hover.

**HTML:**
```html
<div class="hv-04">
  <div class="hv-04__grid">
    <div class="hv-04__cell">
      <span class="hv-04__text hv-04__text--wipe">AURORA</span>
      <span class="hv-04__label">gradient position wipe</span>
    </div>
    <div class="hv-04__cell">
      <span class="hv-04__text hv-04__text--burst">RADIAL</span>
      <span class="hv-04__label">radial-gradient burst</span>
    </div>
    <div class="hv-04__cell">
      <span class="hv-04__text hv-04__text--rainbow">SPECTRUM</span>
      <span class="hv-04__label">rainbow hue-shift</span>
    </div>
    <div class="hv-04__cell">
      <span class="hv-04__text hv-04__text--shimmer">SHIMMER</span>
      <span class="hv-04__label">shimmer keyframe</span>
    </div>
    <div class="hv-04__cell">
      <span class="hv-04__text hv-04__text--duotone">DUOTONE</span>
      <span class="hv-04__label">dual-tone color swap</span>
    </div>
    <div class="hv-04__cell">
      <span class="hv-04__text hv-04__text--diagonal">PRISM</span>
      <span class="hv-04__label">diagonal sweep</span>
    </div>
  </div>
</div>
```

**CSS:**
```css
.hv-04,.hv-04 *,.hv-04 *::before,.hv-04 *::after{box-sizing:border-box;margin:0;padding:0}
.hv-04 ::selection{background:#6d28d9;color:#fff}
.hv-04{
  --bg:#06040f;
  --text:#d4d4f7;
  --dim:#555;
  font-family:'Segoe UI',system-ui,sans-serif;
  background:var(--bg);
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  padding:60px 24px;
}
.hv-04__grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:32px;
  max-width:900px;width:100%;
}
.hv-04__cell{
  display:flex;flex-direction:column;align-items:center;gap:20px;
  padding:48px 24px;
  background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.07);
  border-radius:14px;
}
.hv-04__label{font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--dim);text-align:center}

/* shared text base */
.hv-04__text{
  font-size:clamp(1.6rem,4vw,2.4rem);font-weight:900;letter-spacing:.06em;
  cursor:default;display:inline-block;
  -webkit-background-clip:text;background-clip:text;
}

/* 1 — position wipe */
.hv-04__text--wipe{
  color:var(--text);
  background-image:linear-gradient(90deg,#7c3aed,#06b6d4,#10b981);
  background-size:200% auto;background-position:right center;
  transition:background-position .5s cubic-bezier(.4,0,.2,1),color .5s;
}
.hv-04__text--wipe:hover{
  color:transparent;background-position:left center;
}

/* 2 — radial burst */
.hv-04__text--burst{
  color:var(--text);
  background-image:radial-gradient(circle at 50% 50%,#f59e0b,#ef4444,#7c3aed);
  background-size:0% 0%;background-position:center;
  transition:background-size .5s cubic-bezier(.4,0,.2,1),color .5s;
}
.hv-04__text--burst:hover{
  color:transparent;background-size:200% 200%;
}

/* 3 — rainbow shift */
.hv-04__text--rainbow{
  color:var(--text);
  background-image:linear-gradient(90deg,#f43f5e,#f59e0b,#10b981,#06b6d4,#6d28d9,#f43f5e);
  background-size:400% auto;background-position:0% center;
  transition:background-position .6s,color .4s;
}
.hv-04__text--rainbow:hover{
  color:transparent;background-position:100% center;
}

/* 4 — shimmer keyframe */
.hv-04__text--shimmer{
  color:var(--text);
  background-image:linear-gradient(105deg,#c4b5fd 0%,#fff 40%,#7c3aed 55%,#c4b5fd 100%);
  background-size:200% auto;
  transition:color .3s;
}
.hv-04__text--shimmer:hover{
  color:transparent;
  animation:hv-04-shimmer .8s linear infinite;
}
@keyframes hv-04-shimmer{
  0%{background-position:-100% center}
  100%{background-position:200% center}
}

/* 5 — duotone swap */
.hv-04__text--duotone{
  color:var(--text);
  background-image:linear-gradient(135deg,#f43f5e,#f97316);
  background-size:100% 100%;
  transition:color .4s,filter .4s;
}
.hv-04__text--duotone:hover{
  color:transparent;
  filter:hue-rotate(120deg) saturate(1.4);
}

/* 6 — diagonal sweep */
.hv-04__text--diagonal{
  color:var(--text);
  background-image:linear-gradient(135deg,#06b6d4 0%,#a21caf 50%,#06b6d4 100%);
  background-size:200% 200%;background-position:bottom right;
  transition:background-position .6s cubic-bezier(.4,0,.2,1),color .4s;
}
.hv-04__text--diagonal:hover{
  color:transparent;background-position:top left;
}

@media(max-width:640px){.hv-04__grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:400px){.hv-04__grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){
  .hv-04__text{transition:none!important;animation:none!important}
}
```

### 05. CSS Split Text Hover Effect

**Type:** Pure CSS
**Description:** Four split-text hover effects where words or characters divide and separate on hover — vertical halve, top-bottom reveal, left-right push-apart, and diagonal slash — all achieved with CSS clip-path on layered pseudo-elements.

**HTML:**
```html
<div class="hv-05">
  <div class="hv-05__grid">
    <div class="hv-05__cell">
      <span class="hv-05__split hv-05__split--vert" data-text="DIVIDE">DIVIDE</span>
      <span class="hv-05__label">top / bottom split</span>
    </div>
    <div class="hv-05__cell">
      <span class="hv-05__split hv-05__split--lr" data-text="SCHISM">SCHISM</span>
      <span class="hv-05__label">left / right push</span>
    </div>
    <div class="hv-05__cell">
      <span class="hv-05__split hv-05__split--diag" data-text="SLASH">SLASH</span>
      <span class="hv-05__label">diagonal polygon</span>
    </div>
    <div class="hv-05__cell">
      <span class="hv-05__split hv-05__split--fade" data-text="RIFT">RIFT</span>
      <span class="hv-05__label">split + fade</span>
    </div>
  </div>
</div>
```

**CSS:**
```css
.hv-05,.hv-05 *,.hv-05 *::before,.hv-05 *::after{box-sizing:border-box;margin:0;padding:0}
.hv-05 ::selection{background:#0891b2;color:#fff}
.hv-05{
  --bg:#020917;
  --text:#e0f2fe;
  --dim:#475569;
  --cyan:#06b6d4;
  --rose:#f43f5e;
  --violet:#8b5cf6;
  --amber:#f59e0b;
  font-family:'Segoe UI',system-ui,sans-serif;
  background:var(--bg);
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  padding:60px 24px;
}
.hv-05__grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:48px;
  max-width:800px;width:100%;
}
.hv-05__cell{
  display:flex;flex-direction:column;align-items:center;gap:24px;
  padding:60px 32px;
  background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.07);
  border-radius:14px;
}
.hv-05__label{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--dim)}

/* shared split base */
.hv-05__split{
  font-size:clamp(2rem,6vw,3rem);font-weight:900;letter-spacing:.1em;
  position:relative;cursor:default;display:inline-block;
  color:transparent;overflow:hidden;
}
.hv-05__split::before,
.hv-05__split::after{
  content:attr(data-text);
  position:absolute;top:0;left:0;width:100%;height:100%;
  transition:transform .45s cubic-bezier(.4,0,.2,1),opacity .45s;
  pointer-events:none;
}

/* 1 — vertical top/bottom */
.hv-05__split--vert::before{color:var(--cyan);clip-path:inset(0 0 50% 0)}
.hv-05__split--vert::after{color:var(--cyan);clip-path:inset(50% 0 0 0)}
.hv-05__split--vert:hover::before{transform:translateY(-.55em)}
.hv-05__split--vert:hover::after{transform:translateY(.55em)}

/* 2 — left/right */
.hv-05__split--lr::before{color:var(--rose);clip-path:inset(0 50% 0 0)}
.hv-05__split--lr::after{color:var(--amber);clip-path:inset(0 0 0 50%)}
.hv-05__split--lr:hover::before{transform:translateX(-.4em)}
.hv-05__split--lr:hover::after{transform:translateX(.4em)}

/* 3 — diagonal */
.hv-05__split--diag::before{
  color:var(--violet);
  clip-path:polygon(0 0,100% 0,60% 100%,0 100%);
}
.hv-05__split--diag::after{
  color:var(--cyan);
  clip-path:polygon(60% 0,100% 0,100% 100%,0 100%);
  /* small intentional gap at clip edge */
}
.hv-05__split--diag:hover::before{transform:translate(-.3em,-.3em)}
.hv-05__split--diag:hover::after{transform:translate(.3em,.3em)}

/* 4 — split + fade */
.hv-05__split--fade::before{color:var(--amber);clip-path:inset(0 0 50% 0)}
.hv-05__split--fade::after{color:var(--rose);clip-path:inset(50% 0 0 0)}
.hv-05__split--fade:hover::before{transform:translateY(-.6em) rotate(-3deg);opacity:0}
.hv-05__split--fade:hover::after{transform:translateY(.6em) rotate(3deg);opacity:0}

@media(max-width:520px){.hv-05__grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){
  .hv-05__split::before,.hv-05__split::after{transition:none!important}
}
```

### 06. CSS Neon Glow Text Hover Effect

**Type:** Pure CSS
**Description:** Six neon-sign-inspired text hover effects — classic tube glow, pulsing flicker, color-cycle sweep, multi-layer bloom, retro arcade, and icy frost glow — using layered text-shadow transitions to simulate electroluminescent lighting.

**HTML:**
```html
<div class="hv-06">
  <div class="hv-06__stack">
    <div class="hv-06__row">
      <span class="hv-06__neon hv-06__neon--classic">NEON</span>
      <span class="hv-06__label">classic tube glow</span>
    </div>
    <div class="hv-06__row">
      <span class="hv-06__neon hv-06__neon--flicker">FLICKER</span>
      <span class="hv-06__label">pulsing flicker</span>
    </div>
    <div class="hv-06__row">
      <span class="hv-06__neon hv-06__neon--cycle">SPECTRUM</span>
      <span class="hv-06__label">hue-rotate cycle</span>
    </div>
    <div class="hv-06__row">
      <span class="hv-06__neon hv-06__neon--bloom">BLOOM</span>
      <span class="hv-06__label">multi-layer bloom</span>
    </div>
    <div class="hv-06__row">
      <span class="hv-06__neon hv-06__neon--arcade">HI-SCORE</span>
      <span class="hv-06__label">retro arcade</span>
    </div>
    <div class="hv-06__row">
      <span class="hv-06__neon hv-06__neon--frost">ICE</span>
      <span class="hv-06__label">icy frost glow</span>
    </div>
  </div>
</div>
```

**CSS:**
```css
.hv-06,.hv-06 *,.hv-06 *::before,.hv-06 *::after{box-sizing:border-box;margin:0;padding:0}
.hv-06 ::selection{background:#ff00de;color:#fff}
.hv-06{
  --bg:#020204;
  --dim:#3a3a4a;
  font-family:'Segoe UI',system-ui,sans-serif;
  background:var(--bg);
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  padding:60px 24px;
}
.hv-06__stack{
  display:flex;flex-direction:column;gap:12px;
  width:min(700px,100%);
}
.hv-06__row{
  display:flex;align-items:center;justify-content:space-between;
  padding:32px 40px;
  background:rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.06);
  border-radius:12px;gap:20px;
}
.hv-06__label{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);white-space:nowrap;flex-shrink:0}

/* shared neon base */
.hv-06__neon{
  font-size:clamp(1.6rem,4vw,2.4rem);font-weight:700;letter-spacing:.15em;
  cursor:default;display:inline-block;
}

/* 1 — classic */
.hv-06__neon--classic{
  color:#ff00de;
  text-shadow:0 0 4px #ff00de44;
  transition:text-shadow .4s,color .4s;
}
.hv-06__neon--classic:hover{
  color:#fff;
  text-shadow:
    0 0 4px #fff,
    0 0 16px #ff00de,
    0 0 40px #ff00de,
    0 0 80px #ff00de;
}

/* 2 — flicker */
.hv-06__neon--flicker{
  color:#39ff14;
  transition:text-shadow .3s;
}
.hv-06__neon--flicker:hover{
  color:#fff;
  text-shadow:0 0 4px #fff,0 0 18px #39ff14,0 0 50px #39ff14;
  animation:hv-06-flicker 2s linear infinite;
}
@keyframes hv-06-flicker{
  0%,19%,21%,23%,25%,54%,56%,100%{
    text-shadow:0 0 4px #fff,0 0 18px #39ff14,0 0 50px #39ff14;
    color:#fff;
  }
  20%,24%,55%{
    text-shadow:none;color:#39ff14;
  }
}

/* 3 — hue-rotate cycle */
.hv-06__neon--cycle{
  color:#ff4400;
  text-shadow:0 0 4px #ff440033;
  transition:text-shadow .4s,filter .4s;
}
.hv-06__neon--cycle:hover{
  color:#fff;
  text-shadow:0 0 6px #fff,0 0 20px #ff4400,0 0 60px #ff4400;
  animation:hv-06-huerot 3s linear infinite;
}
@keyframes hv-06-huerot{
  0%{filter:hue-rotate(0deg)}
  100%{filter:hue-rotate(360deg)}
}

/* 4 — multi-layer bloom */
.hv-06__neon--bloom{
  color:#7c3aed;
  text-shadow:0 0 4px #7c3aed44;
  transition:text-shadow .5s cubic-bezier(.4,0,.2,1),color .5s;
}
.hv-06__neon--bloom:hover{
  color:#fff;
  text-shadow:
    0 0 2px #fff,
    0 0 8px #a78bfa,
    0 0 20px #7c3aed,
    0 0 50px #6d28d9,
    0 0 100px #5b21b6,
    0 0 180px #4c1d95;
}

/* 5 — retro arcade */
.hv-06__neon--arcade{
  color:#ffee00;font-family:monospace;
  text-shadow:0 0 4px #ffee0044;
  transition:text-shadow .25s steps(2),color .25s;
}
.hv-06__neon--arcade:hover{
  color:#fff;
  text-shadow:
    2px 2px 0 #ff6600,
    0 0 10px #ffee00,
    0 0 30px #ffee00,
    0 0 60px #ff6600;
}

/* 6 — frost */
.hv-06__neon--frost{
  color:#a5f3fc;
  text-shadow:0 0 4px #a5f3fc44;
  transition:text-shadow .5s,color .5s,letter-spacing .5s;
}
.hv-06__neon--frost:hover{
  color:#fff;letter-spacing:.25em;
  text-shadow:
    0 0 4px #fff,
    0 0 16px #a5f3fc,
    0 0 40px #0ea5e9,
    0 0 80px #0369a1;
}

@media(max-width:520px){.hv-06__row{flex-direction:column;align-items:flex-start}}
@media(prefers-reduced-motion:reduce){
  .hv-06__neon{transition:none!important;animation:none!important}
}
```

### 07. CSS Magnetic Liquid Button Hover Effect

**Type:** Pure CSS
**Description:** Four button hover effects with fluid, organic transitions — liquid fill bubble, morphing border-radius blob, surface tension ripple, and stretched rubber — using border-radius animation and pseudo-element scale transforms for a tactile, material-feeling interaction.

**HTML:**
```html
<div class="hv-07">
  <div class="hv-07__grid">
    <div class="hv-07__cell">
      <button class="hv-07__btn hv-07__btn--fill">
        <span>Liquid Fill</span>
      </button>
      <span class="hv-07__label">scale-Y fill</span>
    </div>
    <div class="hv-07__cell">
      <button class="hv-07__btn hv-07__btn--blob">
        <span>Blob Morph</span>
      </button>
      <span class="hv-07__label">border-radius keyframe</span>
    </div>
    <div class="hv-07__cell">
      <button class="hv-07__btn hv-07__btn--tension">
        <span>Surface Tension</span>
      </button>
      <span class="hv-07__label">ellipse clip-path burst</span>
    </div>
    <div class="hv-07__cell">
      <button class="hv-07__btn hv-07__btn--rubber">
        <span>Rubber Stretch</span>
      </button>
      <span class="hv-07__label">squash-and-stretch</span>
    </div>
  </div>
</div>
```

**CSS:**
```css
.hv-07,.hv-07 *,.hv-07 *::before,.hv-07 *::after{box-sizing:border-box;margin:0;padding:0}
.hv-07 ::selection{background:#10b981;color:#fff}
.hv-07{
  --bg:#030d09;
  --text:#d1fae5;
  --dim:#374151;
  --green:#10b981;
  --teal:#0d9488;
  --emerald:#059669;
  --mint:#6ee7b7;
  font-family:'Segoe UI',system-ui,sans-serif;
  background:var(--bg);
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  padding:60px 24px;
}
.hv-07__grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:48px;
  max-width:720px;width:100%;
}
.hv-07__cell{
  display:flex;flex-direction:column;align-items:center;gap:20px;
  padding:48px 32px;
  background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.07);
  border-radius:14px;
}
.hv-07__label{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--dim)}

/* shared btn base */
.hv-07__btn{
  position:relative;overflow:hidden;
  padding:14px 36px;
  border:2px solid var(--green);
  background:transparent;
  color:var(--green);
  font-size:1rem;font-weight:600;letter-spacing:.06em;
  border-radius:8px;cursor:pointer;
  transition:color .35s;
}
.hv-07__btn span{position:relative;z-index:1}
.hv-07__btn::before{content:'';position:absolute;inset:0;z-index:0}

/* 1 — liquid fill */
.hv-07__btn--fill::before{
  background:var(--green);
  transform:scaleY(0);transform-origin:bottom;
  transition:transform .35s cubic-bezier(.4,0,.2,1);
}
.hv-07__btn--fill:hover::before{transform:scaleY(1)}
.hv-07__btn--fill:hover{color:#fff}

/* 2 — blob morph */
.hv-07__btn--blob{
  border-color:var(--teal);color:var(--teal);
  border-radius:8px;
  transition:border-radius .5s cubic-bezier(.4,0,.2,1),color .35s,background .35s;
}
.hv-07__btn--blob::before{
  background:var(--teal);
  border-radius:8px;
  transform:scale(0);
  transition:transform .35s cubic-bezier(.4,0,.2,1),border-radius .5s;
}
.hv-07__btn--blob:hover{
  color:#fff;
  border-radius:60% 40% 70% 30% / 40% 70% 30% 60%;
}
.hv-07__btn--blob:hover::before{
  transform:scale(1);
  border-radius:60% 40% 70% 30% / 40% 70% 30% 60%;
}

/* 3 — surface tension (expanding emerald droplet from button center).
       The original used negative percentage margins (margin:-100% 0 0
       -100%) to center the ::after, but percentage margins resolve
       against the PARENT'S WIDTH on BOTH axes (not against the
       element's own size, and NOT against parent's height for
       top/bottom margins). On a wide button, margin-top:-100%
       overshoots by ~200px upward, pushing the entire droplet above
       the visible button area where overflow:hidden clips it to
       nothing.

       Fix: use transform translate(-50%, -50%) for the centering
       (translate-% uses the ELEMENT's own dimensions) and combine the
       scale in the same transform. The animated value is the scale
       inside the transform, so we declare the centered translate +
       scaled-to-zero state, and the :hover handler bumps the scale
       portion to 1 while the centering translate stays the same. */
.hv-07__btn--tension{
  border-color:var(--emerald);color:var(--emerald);
}
.hv-07__btn--tension::after{
  content:'';position:absolute;
  top:50%;left:50%;
  width:200%;height:200%;
  background:var(--emerald);
  border-radius:50%;
  transform:translate(-50%,-50%) scale(0);
  transition:transform .5s cubic-bezier(.4,0,.2,1);
  z-index:0;
}
.hv-07__btn--tension:hover::after{transform:translate(-50%,-50%) scale(1)}
.hv-07__btn--tension:hover{color:#fff}

/* 4 — rubber stretch */
.hv-07__btn--rubber{
  border-color:var(--mint);color:var(--mint);
  transition:transform .2s cubic-bezier(.4,0,.2,1),color .35s,background .35s,border-color .35s;
}
.hv-07__btn--rubber::before{
  background:var(--mint);
  transform:scaleY(0);transform-origin:bottom;
  transition:transform .35s;
}
.hv-07__btn--rubber:hover{
  transform:scaleX(1.06) scaleY(0.93);
  color:#000;
}
.hv-07__btn--rubber:hover::before{transform:scaleY(1)}
.hv-07__btn--rubber:active{
  transform:scaleX(0.97) scaleY(1.04);
}

@media(max-width:520px){.hv-07__grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){
  .hv-07__btn,.hv-07__btn::before,.hv-07__btn::after{transition:none!important;animation:none!important}
}
```

### 08. CSS Border Draw Hover Effect

**Type:** Pure CSS
**Description:** Six button and card border-draw hover effects — clockwise stroke, corner flash, double-rail slide, snake crawl, dashed grow, and gradient border sweep — all achieved by animating pseudo-element dimensions or SVG-style techniques without JavaScript.

**HTML:**
```html
<div class="hv-08">
  <div class="hv-08__grid">
    <div class="hv-08__cell">
      <button class="hv-08__btn hv-08__btn--cw">Clockwise Draw</button>
      <span class="hv-08__label">clockwise stroke</span>
    </div>
    <div class="hv-08__cell">
      <button class="hv-08__btn hv-08__btn--corner">Corner Flash</button>
      <span class="hv-08__label">corner flash</span>
    </div>
    <div class="hv-08__cell">
      <button class="hv-08__btn hv-08__btn--rail">Double Rail</button>
      <span class="hv-08__label">dual-rail slide</span>
    </div>
    <div class="hv-08__cell">
      <button class="hv-08__btn hv-08__btn--dashed">Dashed Grow</button>
      <span class="hv-08__label">dashed border scale</span>
    </div>
    <div class="hv-08__cell">
      <button class="hv-08__btn hv-08__btn--grad">Gradient Sweep</button>
      <span class="hv-08__label">conic border sweep</span>
    </div>
    <div class="hv-08__cell">
      <button class="hv-08__btn hv-08__btn--inset">Inset Reveal</button>
      <span class="hv-08__label">box-shadow inset</span>
    </div>
  </div>
</div>
```

**CSS:**
```css
.hv-08,.hv-08 *,.hv-08 *::before,.hv-08 *::after{box-sizing:border-box;margin:0;padding:0}
.hv-08 ::selection{background:#f59e0b;color:#000}
.hv-08{
  --bg:#0c0a03;
  --text:#fef3c7;
  --dim:#6b7280;
  --amber:#f59e0b;
  --orange:#f97316;
  --red:#ef4444;
  --yellow:#fde047;
  --gold:#b45309;
  font-family:'Segoe UI',system-ui,sans-serif;
  background:var(--bg);
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  padding:60px 24px;
}
.hv-08__grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:36px;
  max-width:860px;width:100%;
}
.hv-08__cell{
  display:flex;flex-direction:column;align-items:center;gap:20px;
  padding:40px 20px;
  background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.07);
  border-radius:12px;
}
.hv-08__label{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}

/* shared btn base */
.hv-08__btn{
  position:relative;overflow:hidden;
  padding:13px 32px;
  background:transparent;
  font-size:.95rem;font-weight:600;letter-spacing:.05em;
  cursor:pointer;
}

/* 1 — clockwise draw */
.hv-08__btn--cw{
  color:var(--amber);border:none;
}
.hv-08__btn--cw::before{
  content:'';position:absolute;top:0;right:0;width:0;height:2px;
  background:var(--amber);
  transition:width .2s linear;
}
.hv-08__btn--cw::after{
  content:'';position:absolute;bottom:0;left:0;width:0;height:2px;
  background:var(--amber);
  transition:width .2s linear .4s;
}
.hv-08__btn--cw:hover::before{width:100%;transition:width .2s linear}
.hv-08__btn--cw:hover::after{width:100%;transition:width .2s linear .2s}

/* border sides via box-shadow on hover for left/right of CW */
.hv-08__btn--cw{
  box-shadow:inset 2px 0 0 transparent, inset -2px 0 0 transparent;
  transition:box-shadow .001s linear .39s,color .3s;
}
.hv-08__btn--cw:hover{
  color:var(--text);
  box-shadow:inset 2px 0 0 var(--amber), inset -2px 0 0 var(--amber);
  transition:box-shadow .2s linear .2s, color .3s;
}

/* 2 — corner flash (L-shaped pseudos grow on hover to form full border).
       Two problems with the original: (a) the shared .hv-08__btn rule
       sets overflow:hidden, which clipped the L-corner pseudo-elements
       (positioned at top/left/bottom/right: -2px — slightly OUTSIDE the
       button box). Result: invisible default state, no growth on hover.
       (b) The background-image: linear-gradient stack was meant as a
       border-box transparent-center trick but was incomplete (no
       background-origin pairing), so it just painted the page bg
       over everything including the corner indicators.

       Fix: override overflow to visible on this variant only (other
       variants still need overflow:hidden for their clip effects),
       and drop the broken background-image stack entirely — the
       transparent button is already transparent without it. */
.hv-08__btn--corner{
  color:var(--orange);
  overflow:visible;
  transition:color .3s;
}
.hv-08__btn--corner::before,
.hv-08__btn--corner::after{
  content:'';position:absolute;width:12px;height:12px;
  border-color:var(--orange);border-style:solid;
  transition:width .25s,height .25s;
}
.hv-08__btn--corner::before{top:-2px;left:-2px;border-width:2px 0 0 2px}
.hv-08__btn--corner::after{bottom:-2px;right:-2px;border-width:0 2px 2px 0}
.hv-08__btn--corner:hover::before,.hv-08__btn--corner:hover::after{width:calc(100% + 4px);height:calc(100% + 4px)}

/* 3 — double rail */
.hv-08__btn--rail{
  color:var(--red);border:none;
}
.hv-08__btn--rail::before{
  content:'';position:absolute;top:0;left:-100%;width:100%;height:2px;
  background:var(--red);
  transition:left .35s cubic-bezier(.4,0,.2,1);
}
.hv-08__btn--rail::after{
  content:'';position:absolute;bottom:0;right:-100%;width:100%;height:2px;
  background:var(--red);
  transition:right .35s cubic-bezier(.4,0,.2,1);
}
.hv-08__btn--rail:hover::before{left:0}
.hv-08__btn--rail:hover::after{right:0}
.hv-08__btn--rail:hover{color:var(--text)}

/* 4 — dashed grow */
.hv-08__btn--dashed{
  color:var(--yellow);
  border:2px dashed transparent;
  transition:border-color .3s,color .3s,padding .3s;
}
.hv-08__btn--dashed:hover{
  border-color:var(--yellow);
  padding:13px 40px;
  color:var(--text);
}

/* 5 — gradient border sweep (conic gradient rotates around a 2px ring,
       button's bg covers the center so only the 2px edge shows the
       spinning gradient).

       Original implementation rotated the entire ::before pseudo-
       element via @keyframes transform: rotate(360deg). That works
       on SQUARE elements but the button is a wide rectangle
       (~189x43), so rotating the rectangle itself swings its
       corners through a huge arc — producing the "gradient wedge
       flapping in the background" effect the user reported.

       Fix: don't rotate the element. Instead use @property to
       register a custom property --angle as angle, then animate
       --angle inside the conic-gradient's "from angle" parameter.
       The ELEMENT stays put; only the gradient's start-angle
       rotates within the rectangle, producing a clean circular
       sweep visible only as a 2px ring (since ::after covers the
       center). @property support: Chrome 85+, Safari 16.4+,
       Firefox 128+ (~92% global). Older browsers see a static
       gradient — still looks intentional, just doesn't spin.

       Also fixed previously: overflow:visible override (shared
       .hv-08__btn sets overflow:hidden which clipped the gradient's
       2px overhang), and isolation:isolate to trap the pseudo-
       elements' negative z-index within the button's stacking
       context. */
@property --hv-08-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
.hv-08__btn--grad{
  color:var(--text);
  border:none;
  background:transparent;
  overflow:visible;
  isolation:isolate;
}
.hv-08__btn--grad::before{
  content:'';position:absolute;inset:-2px;
  --hv-08-angle:0deg;
  background:conic-gradient(from var(--hv-08-angle),transparent 0%,var(--amber) 30%,var(--orange) 50%,transparent 70%);
  border-radius:4px;
  opacity:0;
  transition:opacity .3s;
  z-index:-1;
}
.hv-08__btn--grad::after{
  content:'';position:absolute;inset:0;
  background:var(--bg);border-radius:2px;z-index:-1;
}
.hv-08__btn--grad:hover::before{
  opacity:1;
  animation:hv-08-spin 1.5s linear infinite;
}
@keyframes hv-08-spin{to{--hv-08-angle:360deg}}

/* 6 — inset reveal */
.hv-08__btn--inset{
  color:var(--gold);
  border:none;
  box-shadow:inset 0 0 0 0 var(--amber);
  transition:box-shadow .4s cubic-bezier(.4,0,.2,1),color .4s;
}
.hv-08__btn--inset:hover{
  color:#000;
  box-shadow:inset 0 0 0 60px var(--amber);
}

@media(max-width:640px){.hv-08__grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:400px){.hv-08__grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){
  .hv-08__btn,.hv-08__btn::before,.hv-08__btn::after{transition:none!important;animation:none!important}
}
```

### 09. CSS Shimmer Shine Button Hover Effect

**Type:** Pure CSS
**Description:** Five light-streak and shimmer button effects — diagonal gloss swipe, radial spotlight, frosted edge shimmer, holographic foil, and full-button shimmer wash — using pseudo-element gradients animated on hover to simulate a reflective material surface.

**HTML:**
```html
<div class="hv-09">
  <div class="hv-09__stack">
    <div class="hv-09__row">
      <button class="hv-09__btn hv-09__btn--diagonal">Diagonal Gloss</button>
      <span class="hv-09__label">translateX streak</span>
    </div>
    <div class="hv-09__row">
      <button class="hv-09__btn hv-09__btn--radial">Radial Spotlight</button>
      <span class="hv-09__label">radial-gradient reveal</span>
    </div>
    <div class="hv-09__row">
      <button class="hv-09__btn hv-09__btn--frost">Frosted Edge</button>
      <span class="hv-09__label">edge-shimmer effect</span>
    </div>
    <div class="hv-09__row">
      <button class="hv-09__btn hv-09__btn--holo">Holographic Foil</button>
      <span class="hv-09__label">conic-gradient holo</span>
    </div>
    <div class="hv-09__row">
      <button class="hv-09__btn hv-09__btn--wash">Shimmer Wash</button>
      <span class="hv-09__label">full-button wave</span>
    </div>
  </div>
</div>
```

**CSS:**
```css
.hv-09,.hv-09 *,.hv-09 *::before,.hv-09 *::after{box-sizing:border-box;margin:0;padding:0}
.hv-09 ::selection{background:#6366f1;color:#fff}
.hv-09{
  --bg:#07070f;
  --text:#e0e0ff;
  --dim:#4b5563;
  --indigo:#6366f1;
  --violet:#8b5cf6;
  --blue:#3b82f6;
  --sky:#0ea5e9;
  font-family:'Segoe UI',system-ui,sans-serif;
  background:var(--bg);
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  padding:60px 24px;
}
.hv-09__stack{
  display:flex;flex-direction:column;gap:20px;
  width:min(640px,100%);
}
.hv-09__row{
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;padding:24px 36px;
  background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.07);
  border-radius:12px;
}
.hv-09__label{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);white-space:nowrap;flex-shrink:0}

/* shared btn */
.hv-09__btn{
  position:relative;overflow:hidden;
  padding:13px 36px;border:none;
  font-size:.95rem;font-weight:600;letter-spacing:.05em;
  cursor:pointer;border-radius:8px;flex-shrink:0;
}
.hv-09__btn::before{content:'';position:absolute;pointer-events:none}

/* 1 — diagonal gloss */
.hv-09__btn--diagonal{
  background:var(--indigo);color:#fff;
}
.hv-09__btn--diagonal::before{
  top:0;left:-75%;width:75%;height:100%;
  background:linear-gradient(105deg,transparent 0%,rgba(255,255,255,.7) 50%,transparent 100%);
  transition:left .7s cubic-bezier(.4,0,.2,1);
}
.hv-09__btn--diagonal:hover::before{left:125%}

/* 2 — radial spotlight */
.hv-09__btn--radial{
  background:var(--violet);color:#fff;
}
.hv-09__btn--radial::before{
  inset:0;
  background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.5) 0%,transparent 65%);
  opacity:0;transition:opacity .4s;
}
.hv-09__btn--radial:hover::before{opacity:1}

/* 3 — frosted edge */
.hv-09__btn--frost{
  background:transparent;color:var(--blue);
  border:2px solid var(--blue);
  transition:background .4s ease,color .4s ease,box-shadow .4s ease;
}
.hv-09__btn--frost::before{
  top:0;left:0;width:60%;height:100%;
  background:linear-gradient(90deg,rgba(59,130,246,.55),transparent);
  transform:translateX(-100%);
  transition:transform .5s ease;
}
.hv-09__btn--frost:hover{box-shadow:0 0 24px rgba(59,130,246,.35)}
.hv-09__btn--frost:hover::before{transform:translateX(0)}
.hv-09__btn--frost::after{
  content:'';position:absolute;top:0;right:0;width:60%;height:100%;
  background:linear-gradient(270deg,rgba(59,130,246,.55),transparent);
  transform:translateX(100%);
  transition:transform .5s ease;
  pointer-events:none;
}
.hv-09__btn--frost:hover::after{transform:translateX(0)}

/* 4 — holographic foil */
.hv-09__btn--holo{
  background:conic-gradient(from 0deg,#6366f1,#8b5cf6,#ec4899,#f59e0b,#10b981,#06b6d4,#6366f1);
  background-size:200% 200%;
  background-position:0% 50%;
  color:#fff;
  transition:background-position .6s,filter .4s;
}
.hv-09__btn--holo:hover{
  background-position:100% 50%;
  filter:brightness(1.2) saturate(1.3);
}

/* 5 — shimmer wash */
.hv-09__btn--wash{
  background:linear-gradient(135deg,var(--sky),var(--indigo));
  color:#fff;
}
.hv-09__btn--wash::before{
  top:0;left:-100%;width:100%;height:100%;
  background:linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,.6) 50%,
    transparent 100%
  );
}
.hv-09__btn--wash:hover::before{
  animation:hv-09-wash .9s ease-in-out forwards;
}
@keyframes hv-09-wash{
  0%{left:-100%}
  100%{left:100%}
}

@media(max-width:500px){.hv-09__row{flex-direction:column;align-items:flex-start}}
@media(prefers-reduced-motion:reduce){
  .hv-09__btn::before,.hv-09__btn::after{transition:none!important;animation:none!important}
}
```

### 10. CSS Fill Wipe Button Hover Effect

**Type:** Pure CSS
**Description:** Six directional fill-wipe button styles — left wipe, diagonal corner, radial center-out, curtain drop, split from center, and pixel dissolve — demonstrating every axis of reveal using CSS pseudo-element transitions and clip-path on buttons.

**HTML:**
```html
<div class="hv-10">
  <div class="hv-10__grid">
    <div class="hv-10__cell">
      <button class="hv-10__btn hv-10__btn--left"><span>Left Wipe</span></button>
      <span class="hv-10__label">scaleX from left</span>
    </div>
    <div class="hv-10__cell">
      <button class="hv-10__btn hv-10__btn--diag"><span>Diagonal Slash</span></button>
      <span class="hv-10__label">rotated translate</span>
    </div>
    <div class="hv-10__cell">
      <button class="hv-10__btn hv-10__btn--radial"><span>Radial Burst</span></button>
      <span class="hv-10__label">scale from center</span>
    </div>
    <div class="hv-10__cell">
      <button class="hv-10__btn hv-10__btn--drop"><span>Curtain Drop</span></button>
      <span class="hv-10__label">scaleY from top</span>
    </div>
    <div class="hv-10__cell">
      <button class="hv-10__btn hv-10__btn--split"><span>Center Split</span></button>
      <span class="hv-10__label">dual scaleX outward</span>
    </div>
    <div class="hv-10__cell">
      <button class="hv-10__btn hv-10__btn--inset"><span>Inset Grow</span></button>
      <span class="hv-10__label">box-shadow inset fill</span>
    </div>
  </div>
</div>
```

**CSS:**
```css
.hv-10,.hv-10 *,.hv-10 *::before,.hv-10 *::after{box-sizing:border-box;margin:0;padding:0}
.hv-10 ::selection{background:#dc2626;color:#fff}
.hv-10{
  --bg:#0f0400;
  --text:#fef2f2;
  --dim:#6b7280;
  --red:#ef4444;
  --rose:#f43f5e;
  --orange:#f97316;
  --coral:#fb923c;
  --crimson:#dc2626;
  font-family:'Segoe UI',system-ui,sans-serif;
  background:var(--bg);
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  padding:60px 24px;
}
.hv-10__grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:36px;
  max-width:840px;width:100%;
}
.hv-10__cell{
  display:flex;flex-direction:column;align-items:center;gap:20px;
  padding:40px 20px;
  background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.07);
  border-radius:12px;
}
.hv-10__label{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}

/* shared btn */
.hv-10__btn{
  position:relative;overflow:hidden;
  padding:13px 32px;
  font-size:.95rem;font-weight:600;letter-spacing:.05em;
  cursor:pointer;border-radius:6px;
}
.hv-10__btn span{position:relative;z-index:1}
.hv-10__btn::before{content:'';position:absolute;inset:0;z-index:0}

/* 1 — left wipe */
.hv-10__btn--left{
  background:transparent;border:2px solid var(--red);color:var(--red);
  transition:color .35s;
}
.hv-10__btn--left::before{
  background:var(--red);
  transform:scaleX(0);transform-origin:left;
  transition:transform .35s cubic-bezier(.4,0,.2,1);
}
.hv-10__btn--left:hover{color:#fff}
.hv-10__btn--left:hover::before{transform:scaleX(1)}

/* 2 — diagonal slash */
.hv-10__btn--diag{
  background:transparent;border:2px solid var(--rose);color:var(--rose);
  transition:color .4s;
}
.hv-10__btn--diag::before{
  inset:-20% -20%;
  background:var(--rose);
  transform:skewX(-25deg) scaleX(0);
  transform-origin:left center;
  transition:transform .5s cubic-bezier(.4,0,.2,1);
}
.hv-10__btn--diag:hover{color:#fff}
.hv-10__btn--diag:hover::before{transform:skewX(-25deg) scaleX(1)}

/* 3 — radial burst */
.hv-10__btn--radial{
  background:transparent;border:2px solid var(--orange);color:var(--orange);
  transition:color .35s;
}
.hv-10__btn--radial::before{
  background:var(--orange);border-radius:50%;
  transform:scale(0);
  transition:transform .45s cubic-bezier(.4,0,.2,1);
}
.hv-10__btn--radial:hover{color:#fff}
.hv-10__btn--radial:hover::before{transform:scale(3)}

/* 4 — curtain drop */
.hv-10__btn--drop{
  background:transparent;border:2px solid var(--coral);color:var(--coral);
  transition:color .35s;
}
.hv-10__btn--drop::before{
  background:var(--coral);
  transform:scaleY(0);transform-origin:top;
  transition:transform .35s cubic-bezier(.4,0,.2,1);
}
.hv-10__btn--drop:hover{color:#fff}
.hv-10__btn--drop:hover::before{transform:scaleY(1)}

/* 5 — center split */
.hv-10__btn--split{
  background:transparent;border:2px solid var(--crimson);color:var(--crimson);
  transition:color .35s;
}
.hv-10__btn--split::before{
  background:var(--crimson);
  transform:scaleX(0);transform-origin:center;
  transition:transform .35s cubic-bezier(.4,0,.2,1);
}
.hv-10__btn--split:hover{color:#fff}
.hv-10__btn--split:hover::before{transform:scaleX(1)}

/* 6 — inset box-shadow */
.hv-10__btn--inset{
  background:transparent;border:2px solid var(--red);color:var(--red);
  box-shadow:inset 0 0 0 0 var(--red);
  transition:box-shadow .4s cubic-bezier(.4,0,.2,1),color .4s;
}
.hv-10__btn--inset::before{display:none}
.hv-10__btn--inset:hover{
  box-shadow:inset 0 0 0 60px var(--red);
  color:#fff;
}

@media(max-width:640px){.hv-10__grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:400px){.hv-10__grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){
  .hv-10__btn,.hv-10__btn::before{transition:none!important}
}
```

### 11. CSS 3D Press Button Hover Effect

**Type:** Pure CSS
**Description:** Six physically satisfying 3D button press effects — layered shadow stack, extrude push-down, isometric depth, embossed groove, beveled edge, and neumorphic press — each simulating real depth through box-shadow and transform: translateY on hover.

**HTML:**
```html
<div class="hv-11">
  <div class="hv-11__grid">
    <div class="hv-11__cell">
      <button class="hv-11__btn hv-11__btn--stack">Push Down</button>
      <span class="hv-11__label">shadow shrink press</span>
    </div>
    <div class="hv-11__cell">
      <button class="hv-11__btn hv-11__btn--extrude">Extrude</button>
      <span class="hv-11__label">stacked shadow layers</span>
    </div>
    <div class="hv-11__cell">
      <button class="hv-11__btn hv-11__btn--iso">Isometric</button>
      <span class="hv-11__label">angled depth edge</span>
    </div>
    <div class="hv-11__cell">
      <button class="hv-11__btn hv-11__btn--emboss">Embossed</button>
      <span class="hv-11__label">groove press</span>
    </div>
    <div class="hv-11__cell">
      <button class="hv-11__btn hv-11__btn--bevel">Beveled</button>
      <span class="hv-11__label">inset bevel edges</span>
    </div>
    <div class="hv-11__cell">
      <button class="hv-11__btn hv-11__btn--neu">Neumorphic</button>
      <span class="hv-11__label">concave surface</span>
    </div>
  </div>
</div>
```

**CSS:**
```css
.hv-11,.hv-11 *,.hv-11 *::before,.hv-11 *::after{box-sizing:border-box;margin:0;padding:0}
.hv-11 ::selection{background:#1d4ed8;color:#fff}
.hv-11{
  --bg:#0b0f1a;
  --text:#e2e8f0;
  --dim:#475569;
  --blue:#3b82f6;
  --navy:#1d4ed8;
  --slate:#64748b;
  --neu:#e2e8f0;
  font-family:'Segoe UI',system-ui,sans-serif;
  background:var(--bg);
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  padding:60px 24px;
}
.hv-11__grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:36px;
  max-width:840px;width:100%;
}
.hv-11__cell{
  display:flex;flex-direction:column;align-items:center;gap:20px;
  padding:48px 20px;
  background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.07);
  border-radius:12px;
}
.hv-11__label{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}

/* shared btn */
.hv-11__btn{
  padding:13px 32px;font-size:.95rem;font-weight:700;letter-spacing:.05em;
  cursor:pointer;border:none;border-radius:8px;
  transition:transform .12s,box-shadow .12s;
}

/* 1 — classic push-down */
.hv-11__btn--stack{
  background:var(--blue);color:#fff;
  box-shadow:0 6px 0 var(--navy);
  transform:translateY(0);
}
.hv-11__btn--stack:hover{transform:translateY(3px);box-shadow:0 3px 0 var(--navy)}
.hv-11__btn--stack:active{transform:translateY(6px);box-shadow:0 0 0 var(--navy)}

/* 2 — extrude stack (visible side-wall layers via 1px striations) */
.hv-11__btn--extrude{
  background:#f59e0b;color:#000;
  box-shadow:
    0 2px 0 #b45309,
    0 4px 0 #9a3412,
    0 6px 0 #7c2d12,
    0 8px 0 #5a1a08,
    0 10px 0 #3d1004,
    0 14px 18px rgba(0,0,0,.55);
  transform:translateY(0);
}
.hv-11__btn--extrude:hover{
  transform:translateY(8px);
  box-shadow:
    0 1px 0 #b45309,
    0 2px 0 #9a3412,
    0 3px 6px rgba(0,0,0,.5);
}

/* 3 — isometric */
.hv-11__btn--iso{
  background:#10b981;color:#fff;
  box-shadow:4px 4px 0 #065f46,5px 5px 0 #064e3b;
  transform:translate(0,0);
  transition:transform .12s,box-shadow .12s;
}
.hv-11__btn--iso:hover{
  transform:translate(4px,4px);
  box-shadow:0 0 0 #065f46;
}

/* 4 — embossed groove (deeply recessed engraving, no platform shadow) */
.hv-11__btn--emboss{
  background:#1f2937;color:#9ca3af;
  text-shadow:0 -1px 0 #000,0 1px 0 rgba(255,255,255,.08);
  box-shadow:
    inset 0 3px 6px rgba(0,0,0,.7),
    inset 0 -2px 4px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 -1px 0 rgba(255,255,255,.03);
}
.hv-11__btn--emboss:hover{
  color:#e5e7eb;
  box-shadow:
    inset 0 4px 10px rgba(0,0,0,.9),
    inset 0 -3px 6px rgba(0,0,0,.6),
    inset 0 1px 0 rgba(255,255,255,.04);
}

/* 5 — beveled (strong dual-edge chamfer, clearly visible top/bottom bevels) */
.hv-11__btn--bevel{
  background:linear-gradient(180deg,#8b5cf6 0%,#7c3aed 50%,#5b21b6 100%);
  color:#fff;
  text-shadow:0 -1px 0 rgba(0,0,0,.4);
  box-shadow:
    inset 0 3px 0 rgba(255,255,255,.4),
    inset 3px 0 0 rgba(255,255,255,.15),
    inset -3px 0 0 rgba(0,0,0,.25),
    inset 0 -4px 0 rgba(0,0,0,.45),
    0 4px 0 #3c1a78,
    0 6px 8px rgba(0,0,0,.4);
}
.hv-11__btn--bevel:hover{
  transform:translateY(2px);
  background:linear-gradient(180deg,#7c3aed 0%,#6d28d9 50%,#4c1d95 100%);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.25),
    inset 2px 0 0 rgba(255,255,255,.1),
    inset -2px 0 0 rgba(0,0,0,.3),
    inset 0 -3px 0 rgba(0,0,0,.5),
    0 2px 0 #3c1a78,
    0 3px 4px rgba(0,0,0,.4);
}

/* 6 — neumorphic */
.hv-11__btn--neu{
  background:#e2e8f0;color:#334155;
  box-shadow:
    5px 5px 10px #b8bec9,
    -5px -5px 10px #ffffff;
}
.hv-11__btn--neu:hover{
  box-shadow:
    inset 4px 4px 8px #b8bec9,
    inset -4px -4px 8px #ffffff;
}

@media(max-width:640px){.hv-11__grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:400px){.hv-11__grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){
  .hv-11__btn{transition:none!important}
}
```

### 12. CSS Ripple Button Hover Effect

**Type:** Pure CSS
**Description:** Five ripple and pulse hover effects on buttons — center-out ring, double ripple, contained wave, border-pulse, and glow-ring expansion — all using pseudo-element scale animations and opacity keyframes to simulate a water-droplet impact.

**HTML:**
```html
<div class="hv-12">
  <div class="hv-12__stack">
    <div class="hv-12__row">
      <button class="hv-12__btn hv-12__btn--ring">Center Ripple</button>
      <span class="hv-12__label">scale + opacity keyframe</span>
    </div>
    <div class="hv-12__row">
      <button class="hv-12__btn hv-12__btn--double">Double Ring</button>
      <span class="hv-12__label">staggered dual ripple</span>
    </div>
    <div class="hv-12__row">
      <button class="hv-12__btn hv-12__btn--wave">Contained Wave</button>
      <span class="hv-12__label">overflow-clipped wave</span>
    </div>
    <div class="hv-12__row">
      <button class="hv-12__btn hv-12__btn--pulse">Border Pulse</button>
      <span class="hv-12__label">outline-offset ping</span>
    </div>
    <div class="hv-12__row">
      <button class="hv-12__btn hv-12__btn--glow">Glow Ring</button>
      <span class="hv-12__label">box-shadow expand</span>
    </div>
  </div>
</div>
```

**CSS:**
```css
.hv-12,.hv-12 *,.hv-12 *::before,.hv-12 *::after{box-sizing:border-box;margin:0;padding:0}
.hv-12 ::selection{background:#be185d;color:#fff}
.hv-12{
  --bg:#0f0008;
  --text:#fce7f3;
  --dim:#6b7280;
  --pink:#ec4899;
  --rose:#f43f5e;
  --magenta:#db2777;
  --purple:#a855f7;
  font-family:'Segoe UI',system-ui,sans-serif;
  background:var(--bg);
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  padding:60px 24px;
}
.hv-12__stack{
  display:flex;flex-direction:column;gap:16px;
  width:min(640px,100%);
}
.hv-12__row{
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;padding:24px 36px;
  background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.07);
  border-radius:12px;
}
.hv-12__label{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);white-space:nowrap;flex-shrink:0}

/* shared btn */
.hv-12__btn{
  position:relative;
  padding:13px 36px;font-size:.95rem;font-weight:600;
  letter-spacing:.05em;cursor:pointer;border-radius:8px;border:none;
  flex-shrink:0;
}

/* 1 — center ripple */
.hv-12__btn--ring{
  background:var(--pink);color:#fff;overflow:visible;
}
.hv-12__btn--ring::after{
  content:'';position:absolute;
  top:50%;left:50%;
  width:100%;height:100%;
  border-radius:50%;
  background:rgba(255,255,255,.4);
  transform:translate(-50%,-50%) scale(0);
  pointer-events:none;
}
.hv-12__btn--ring:hover::after{
  animation:hv-12-ripple .6s ease-out forwards;
}
@keyframes hv-12-ripple{
  0%{transform:translate(-50%,-50%) scale(0);opacity:.7}
  100%{transform:translate(-50%,-50%) scale(3.5);opacity:0}
}

/* 2 — double ripple */
.hv-12__btn--double{
  background:var(--rose);color:#fff;overflow:visible;
}
.hv-12__btn--double::before{
  content:'';position:absolute;
  top:50%;left:50%;width:100%;height:100%;
  border-radius:50%;background:rgba(255,255,255,.3);
  transform:translate(-50%,-50%) scale(0);
  pointer-events:none;
}
.hv-12__btn--double::after{
  content:'';position:absolute;
  top:50%;left:50%;width:100%;height:100%;
  border-radius:50%;background:rgba(255,255,255,.2);
  transform:translate(-50%,-50%) scale(0);
  pointer-events:none;
}
.hv-12__btn--double:hover::before{animation:hv-12-ripple .7s ease-out forwards}
.hv-12__btn--double:hover::after{animation:hv-12-ripple .7s ease-out .25s forwards}

/* 3 — contained wave */
.hv-12__btn--wave{
  background:transparent;border:2px solid var(--magenta);color:var(--magenta);
  overflow:hidden;
}
.hv-12__btn--wave::before{
  content:'';position:absolute;
  top:50%;left:50%;
  width:0;height:0;
  border-radius:50%;
  background:rgba(219,39,119,.25);
  transform:translate(-50%,-50%);
  pointer-events:none;
}
.hv-12__btn--wave:hover::before{
  animation:hv-12-wave .6s ease-out forwards;
}
@keyframes hv-12-wave{
  0%{width:0;height:0;opacity:.8}
  100%{width:300px;height:300px;opacity:0}
}

/* 4 — border pulse */
.hv-12__btn--pulse{
  background:var(--purple);color:#fff;
  outline:2px solid var(--purple);outline-offset:0;
  transition:outline-offset .4s,outline-color .4s;
}
.hv-12__btn--pulse:hover{
  outline-offset:10px;
  outline-color:transparent;
}

/* 5 — glow ring */
.hv-12__btn--glow{
  background:transparent;border:2px solid var(--pink);color:var(--pink);
  box-shadow:0 0 0 0 rgba(236,72,153,.4);
  transition:box-shadow .4s cubic-bezier(.4,0,.2,1),color .3s,background .3s;
}
.hv-12__btn--glow:hover{
  box-shadow:0 0 0 12px rgba(236,72,153,0);
  color:#fff;background:var(--pink);
}

@media(max-width:500px){.hv-12__row{flex-direction:column;align-items:flex-start}}
@media(prefers-reduced-motion:reduce){
  .hv-12__btn::before,.hv-12__btn::after{animation:none!important}
  .hv-12__btn--pulse{transition:none!important}
}
```

### 13. CSS 3D Tilt Card Hover Effect

**Type:** Pure CSS
**Description:** Four card hover effects with perspective-based 3D depth — static tilt corner, perspective flip-axis, floating lift with shadow depth, and layered parallax layers — using CSS perspective, rotateX/Y transforms, and transform-style: preserve-3d.

**HTML:**
```html
<div class="hv-13">
  <div class="hv-13__grid">
    <div class="hv-13__scene">
      <div class="hv-13__card hv-13__card--tilt">
        <div class="hv-13__card-body">
          <div class="hv-13__icon">◈</div>
          <h3 class="hv-13__title">Static Tilt</h3>
          <p class="hv-13__text">Perspective rotateX + rotateY on hover</p>
        </div>
      </div>
    </div>
    <div class="hv-13__scene">
      <div class="hv-13__card hv-13__card--flip">
        <div class="hv-13__card-body">
          <div class="hv-13__icon">⬡</div>
          <h3 class="hv-13__title">Axis Flip</h3>
          <p class="hv-13__text">rotateY 180° perspective reveal</p>
        </div>
      </div>
    </div>
    <div class="hv-13__scene hv-13__scene--lift">
      <div class="hv-13__card hv-13__card--lift">
        <div class="hv-13__card-body">
          <div class="hv-13__icon">▲</div>
          <h3 class="hv-13__title">Float Lift</h3>
          <p class="hv-13__text">translateY + shadow depth</p>
        </div>
      </div>
    </div>
    <div class="hv-13__scene">
      <div class="hv-13__card hv-13__card--layers">
        <div class="hv-13__layer hv-13__layer--bg"></div>
        <div class="hv-13__layer hv-13__layer--mid">
          <div class="hv-13__icon">◉</div>
        </div>
        <div class="hv-13__layer hv-13__layer--top">
          <h3 class="hv-13__title">Parallax</h3>
          <p class="hv-13__text">translateZ layered depth</p>
        </div>
      </div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.hv-13,.hv-13 *,.hv-13 *::before,.hv-13 *::after{box-sizing:border-box;margin:0;padding:0}
.hv-13 ::selection{background:#0284c7;color:#fff}
.hv-13{
  --bg:#020810;
  --text:#bae6fd;
  --dim:#475569;
  --blue:#0ea5e9;
  --sky:#38bdf8;
  --indigo:#6366f1;
  --teal:#14b8a6;
  font-family:'Segoe UI',system-ui,sans-serif;
  background:var(--bg);
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  padding:60px 24px;
}
.hv-13__grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:40px;
  max-width:760px;width:100%;
}
.hv-13__scene{
  perspective:800px;
}
.hv-13__card{
  width:100%;min-height:220px;
  border-radius:16px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.1);
  transition:transform .4s cubic-bezier(.4,0,.2,1),box-shadow .4s;
  transform-style:preserve-3d;
  cursor:pointer;
}
.hv-13__card-body{
  padding:32px;display:flex;flex-direction:column;gap:12px;
}
.hv-13__icon{font-size:2rem;color:var(--blue)}
.hv-13__title{font-size:1.1rem;font-weight:700;color:var(--text)}
.hv-13__text{font-size:.85rem;color:var(--dim);line-height:1.5}

/* 1 — static tilt */
.hv-13__card--tilt:hover{
  transform:rotateX(8deg) rotateY(-8deg);
  box-shadow:8px 12px 40px rgba(14,165,233,.3);
}

/* 2 — axis flip */
.hv-13__card--flip{
  border-color:rgba(99,102,241,.3);
}
.hv-13__card--flip .hv-13__icon{color:var(--indigo)}
.hv-13__card--flip:hover{
  transform:rotateX(-6deg) rotateY(10deg);
  box-shadow:-10px 8px 40px rgba(99,102,241,.3);
  border-color:rgba(99,102,241,.6);
}

/* 3 — float lift */
.hv-13__card--lift{
  border-color:rgba(20,184,166,.3);
  box-shadow:0 4px 20px rgba(0,0,0,.4);
  transition:transform .4s cubic-bezier(.4,0,.2,1),box-shadow .4s;
}
.hv-13__card--lift .hv-13__icon{color:var(--teal)}
.hv-13__card--lift:hover{
  transform:translateY(-14px);
  box-shadow:0 28px 60px rgba(0,0,0,.5),0 0 30px rgba(20,184,166,.2);
}

/* 4 — parallax layers */
.hv-13__card--layers{
  position:relative;min-height:220px;overflow:visible;
  transition:transform .4s cubic-bezier(.4,0,.2,1);
  border-color:rgba(56,189,248,.3);
}
.hv-13__card--layers:hover{
  transform:rotateX(6deg) rotateY(-6deg);
}
.hv-13__layer{
  position:absolute;inset:0;border-radius:16px;
  transition:transform .4s cubic-bezier(.4,0,.2,1);
}
.hv-13__layer--bg{
  background:linear-gradient(135deg,rgba(14,165,233,.1),rgba(56,189,248,.05));
}
.hv-13__layer--mid{
  display:flex;align-items:flex-start;padding:32px;
}
.hv-13__layer--mid .hv-13__icon{color:var(--sky);font-size:2.5rem}
.hv-13__card--layers:hover .hv-13__layer--mid{transform:translateZ(20px) translateY(-6px)}
.hv-13__layer--top{
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:28px;gap:8px;
}
.hv-13__card--layers:hover .hv-13__layer--top{transform:translateZ(35px) translateY(-4px)}

@media(max-width:520px){.hv-13__grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){
  .hv-13__card,.hv-13__layer{transition:none!important}
}
```

### 14. CSS Card Flip Hover Effect

**Type:** Pure CSS
**Description:** Four CSS 3D card flip hover effects — horizontal flip, vertical flip, diagonal corner-peel flip, and reverse accordion fan — using rotateY/rotateX on preserve-3d containers with backface-visibility to reveal a styled back face on hover.

**HTML:**
```html
<div class="hv-14">
  <div class="hv-14__grid">
    <div class="hv-14__scene">
      <div class="hv-14__card hv-14__card--h">
        <div class="hv-14__face hv-14__face--front">
          <span class="hv-14__icon">♦</span>
          <span class="hv-14__label">Hover Me</span>
          <span class="hv-14__sub">horizontal flip →</span>
        </div>
        <div class="hv-14__face hv-14__face--back hv-14__back--rose">
          <span class="hv-14__icon">✦</span>
          <span class="hv-14__label">Revealed!</span>
          <span class="hv-14__sub">back face content</span>
        </div>
      </div>
    </div>
    <div class="hv-14__scene hv-14__scene--v">
      <div class="hv-14__card hv-14__card--v">
        <div class="hv-14__face hv-14__face--front hv-14__front--teal">
          <span class="hv-14__icon">◈</span>
          <span class="hv-14__label">Vertical</span>
          <span class="hv-14__sub">↓ flip over top</span>
        </div>
        <div class="hv-14__face hv-14__face--back hv-14__back--indigo">
          <span class="hv-14__icon">❋</span>
          <span class="hv-14__label">Back Face</span>
          <span class="hv-14__sub">rotateX flip</span>
        </div>
      </div>
    </div>
    <div class="hv-14__scene">
      <div class="hv-14__card hv-14__card--diag">
        <div class="hv-14__face hv-14__face--front hv-14__front--amber">
          <span class="hv-14__icon">◬</span>
          <span class="hv-14__label">Diagonal</span>
          <span class="hv-14__sub">corner-peel axis</span>
        </div>
        <div class="hv-14__face hv-14__face--back hv-14__back--orange">
          <span class="hv-14__icon">⟡</span>
          <span class="hv-14__label">Peeled!</span>
          <span class="hv-14__sub">rotate3d(1,1,0)</span>
        </div>
      </div>
    </div>
    <div class="hv-14__fan-wrap">
      <div class="hv-14__fan-card hv-14__fan-card--1">
        <span class="hv-14__fan-label">Fan</span>
      </div>
      <div class="hv-14__fan-card hv-14__fan-card--2"></div>
      <div class="hv-14__fan-card hv-14__fan-card--3"></div>
      <span class="hv-14__fan-hint">hover the stack</span>
    </div>
  </div>
</div>
```

**CSS:**
```css
.hv-14,.hv-14 *,.hv-14 *::before,.hv-14 *::after{box-sizing:border-box;margin:0;padding:0}
.hv-14 ::selection{background:#be123c;color:#fff}
.hv-14{
  --bg:#0a0008;
  --text:#ffe4e6;
  --dim:#6b7280;
  font-family:'Segoe UI',system-ui,sans-serif;
  background:var(--bg);
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  padding:60px 24px;
}
.hv-14__grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:40px;
  max-width:720px;width:100%;
}

/* scene wrapper */
.hv-14__scene{perspective:800px}
.hv-14__scene--v{perspective:800px}

/* card */
.hv-14__card{
  position:relative;width:100%;height:220px;
  transform-style:preserve-3d;
  transition:transform .65s cubic-bezier(.4,0,.2,1);
  cursor:pointer;
}
.hv-14__face{
  position:absolute;inset:0;border-radius:14px;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  padding:24px;
}
.hv-14__icon{font-size:2rem}
.hv-14__label{font-size:1rem;font-weight:700;color:var(--text)}
.hv-14__sub{font-size:.75rem;color:var(--dim);letter-spacing:.05em}

/* faces */
.hv-14__face--front{
  background:rgba(190,18,60,.2);border:1px solid rgba(190,18,60,.4);
  color:var(--text);
}
.hv-14__back--rose{
  background:#be123c;color:#fff;
  transform:rotateY(180deg);
}
.hv-14__front--teal{background:rgba(13,148,136,.2);border:1px solid rgba(13,148,136,.4)}
.hv-14__back--indigo{
  background:#4338ca;color:#fff;
  transform:rotateX(180deg);
}
.hv-14__front--amber{background:rgba(180,83,9,.2);border:1px solid rgba(180,83,9,.4)}
.hv-14__back--orange{
  background:#c2410c;color:#fff;
  transform:rotate3d(1,1,0,180deg);
}

/* flip triggers */
.hv-14__card--h:hover{transform:rotateY(180deg)}
.hv-14__card--v:hover{transform:rotateX(180deg)}
.hv-14__card--diag:hover{transform:rotate3d(1,1,0,180deg)}

/* fan accordion */
.hv-14__fan-wrap{
  position:relative;height:220px;
  display:flex;flex-direction:column;justify-content:flex-end;align-items:center;
  cursor:pointer;
}
.hv-14__fan-card{
  position:absolute;width:100%;height:220px;border-radius:14px;
  border:1px solid rgba(255,255,255,.1);
  display:flex;align-items:center;justify-content:center;
  transform-origin:bottom center;
  transition:transform .4s cubic-bezier(.4,0,.2,1);
}
.hv-14__fan-card--1{background:rgba(139,92,246,.25);z-index:3}
.hv-14__fan-card--2{background:rgba(109,40,217,.2);z-index:2}
.hv-14__fan-card--3{background:rgba(91,33,182,.15);z-index:1}
.hv-14__fan-label{font-size:1.1rem;font-weight:700;color:#c4b5fd}
.hv-14__fan-hint{position:relative;z-index:4;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-top:8px}
.hv-14__fan-wrap:hover .hv-14__fan-card--2{transform:rotateY(-30deg)}
.hv-14__fan-wrap:hover .hv-14__fan-card--3{transform:rotateY(-55deg)}

@media(max-width:520px){.hv-14__grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){
  .hv-14__card,.hv-14__fan-card{transition:none!important}
}
```

### 15. CSS Glassmorphism Card Hover Effect

**Type:** Pure CSS
**Description:** Four glassmorphism card hover effects — frosted clarity increase, edge glow border, blur-depth stack, and reflective tinted glass — using backdrop-filter, border transparency transitions, and box-shadow layers to simulate frosted glass UI on hover.

**HTML:**
```html
<div class="hv-15">
  <div class="hv-15__bg">
    <div class="hv-15__orb hv-15__orb--1"></div>
    <div class="hv-15__orb hv-15__orb--2"></div>
    <div class="hv-15__orb hv-15__orb--3"></div>
  </div>
  <div class="hv-15__grid">
    <div class="hv-15__card hv-15__card--clarity">
      <div class="hv-15__icon">✦</div>
      <h3 class="hv-15__title">Frosted Clarity</h3>
      <p class="hv-15__text">Blur depth increases on hover, making the panel appear to thicken.</p>
    </div>
    <div class="hv-15__card hv-15__card--glow">
      <div class="hv-15__icon">◉</div>
      <h3 class="hv-15__title">Edge Glow</h3>
      <p class="hv-15__text">Border lights up with accent color and a matching halo shadow.</p>
    </div>
    <div class="hv-15__card hv-15__card--depth">
      <div class="hv-15__icon">⬡</div>
      <h3 class="hv-15__title">Depth Stack</h3>
      <p class="hv-15__text">Layered glass panels separate on hover revealing depth.</p>
    </div>
    <div class="hv-15__card hv-15__card--reflect">
      <div class="hv-15__icon">◈</div>
      <h3 class="hv-15__title">Reflection</h3>
      <p class="hv-15__text">Specular highlight sweeps across the glass surface on hover.</p>
    </div>
  </div>
</div>
```

**CSS:**
```css
.hv-15,.hv-15 *,.hv-15 *::before,.hv-15 *::after{box-sizing:border-box;margin:0;padding:0}
.hv-15 ::selection{background:#7c3aed;color:#fff}
.hv-15{
  --bg:#080514;
  --text:#e2d9f3;
  --dim:#9ca3af;
  --purple:#7c3aed;
  --pink:#ec4899;
  --cyan:#06b6d4;
  --white:rgba(255,255,255,.9);
  font-family:'Segoe UI',system-ui,sans-serif;
  background:var(--bg);
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  padding:60px 24px;
  position:relative;overflow:hidden;
}
.hv-15__bg{position:absolute;inset:0;pointer-events:none}
.hv-15__orb{position:absolute;border-radius:50%;filter:blur(80px);opacity:.45}
.hv-15__orb--1{width:400px;height:400px;background:#7c3aed;top:-100px;left:-100px}
.hv-15__orb--2{width:350px;height:350px;background:#ec4899;bottom:-80px;right:-60px}
.hv-15__orb--3{width:280px;height:280px;background:#06b6d4;top:30%;left:40%}
.hv-15__grid{
  position:relative;z-index:1;
  display:grid;grid-template-columns:repeat(2,1fr);gap:28px;
  max-width:720px;width:100%;
}

/* shared card */
.hv-15__card{
  padding:32px;border-radius:20px;
  background:rgba(255,255,255,.06);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.12);
  display:flex;flex-direction:column;gap:14px;
  cursor:pointer;
  transition:background .4s,border-color .4s,box-shadow .4s,transform .4s;
}
.hv-15__icon{font-size:1.8rem;color:var(--text)}
.hv-15__title{font-size:1.05rem;font-weight:700;color:var(--text)}
.hv-15__text{font-size:.85rem;color:var(--dim);line-height:1.5}

/* 1 — clarity increase */
.hv-15__card--clarity:hover{
  background:rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);
  border-color:rgba(255,255,255,.25);
  transform:translateY(-4px);
}

/* 2 — edge glow */
.hv-15__card--glow{
  --glow:rgba(124,58,237,0);
  box-shadow:0 0 0 0 var(--glow);
}
.hv-15__card--glow:hover{
  border-color:rgba(124,58,237,.6);
  box-shadow:0 0 0 1px rgba(124,58,237,.3),0 0 24px rgba(124,58,237,.4),inset 0 0 24px rgba(124,58,237,.05);
  background:rgba(124,58,237,.08);
}

/* 3 — depth stack via box-shadow layers */
.hv-15__card--depth{
  box-shadow:0 4px 20px rgba(0,0,0,.2);
}
.hv-15__card--depth:hover{
  transform:translateY(-8px);
  box-shadow:
    0 2px 8px rgba(0,0,0,.2),
    0 16px 40px rgba(0,0,0,.4),
    0 32px 60px rgba(0,0,0,.2);
  background:rgba(255,255,255,.1);
  border-color:rgba(255,255,255,.2);
}

/* 4 — reflective sweep */
.hv-15__card--reflect{position:relative;overflow:hidden}
.hv-15__card--reflect::before{
  content:'';position:absolute;top:-50%;left:-60%;
  width:40%;height:200%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.12),transparent);
  transform:skewX(-20deg);
  transition:left .5s cubic-bezier(.4,0,.2,1);
  pointer-events:none;
}
.hv-15__card--reflect:hover::before{left:120%}
.hv-15__card--reflect:hover{
  background:rgba(255,255,255,.1);
  border-color:rgba(255,255,255,.2);
}

@media(max-width:520px){.hv-15__grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){
  .hv-15__card{transition:none!important}
  .hv-15__card--reflect::before{transition:none!important}
}
```

### 16. CSS Spotlight Card Hover Effect

**Type:** Pure CSS
**Description:** Four spotlight and lighting hover effects on cards — radial gradient center spotlight, corner-origin light sweep, edge scanline, and vignette-lift — using CSS radial-gradient pseudo-elements to simulate a focused light source illuminating the card face on hover.

**HTML:**
```html
<div class="hv-16">
  <div class="hv-16__grid">
    <div class="hv-16__card hv-16__card--center">
      <div class="hv-16__content">
        <div class="hv-16__icon">◎</div>
        <h3 class="hv-16__title">Center Spot</h3>
        <p class="hv-16__text">Radial gradient fades in from the center on hover.</p>
      </div>
    </div>
    <div class="hv-16__card hv-16__card--corner">
      <div class="hv-16__content">
        <div class="hv-16__icon">◤</div>
        <h3 class="hv-16__title">Corner Light</h3>
        <p class="hv-16__text">Conic light sweep from the top-left corner lamp.</p>
      </div>
    </div>
    <div class="hv-16__card hv-16__card--scan">
      <div class="hv-16__content">
        <div class="hv-16__icon">▤</div>
        <h3 class="hv-16__title">Edge Scan</h3>
        <p class="hv-16__text">Bright scan band sweeps top to bottom on hover.</p>
      </div>
    </div>
    <div class="hv-16__card hv-16__card--vignette">
      <div class="hv-16__content">
        <div class="hv-16__icon">◉</div>
        <h3 class="hv-16__title">Vignette Lift</h3>
        <p class="hv-16__text">Dark vignette fades out revealing the full card face.</p>
      </div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.hv-16,.hv-16 *,.hv-16 *::before,.hv-16 *::after{box-sizing:border-box;margin:0;padding:0}
.hv-16 ::selection{background:#0f766e;color:#fff}
.hv-16{
  --bg:#020c0b;
  --text:#ccfbf1;
  --dim:#6b7280;
  --teal:#14b8a6;
  --green:#10b981;
  --cyan:#06b6d4;
  font-family:'Segoe UI',system-ui,sans-serif;
  background:var(--bg);
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  padding:60px 24px;
}
.hv-16__grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:32px;
  max-width:720px;width:100%;
}

/* shared card */
.hv-16__card{
  position:relative;overflow:hidden;
  min-height:220px;border-radius:16px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.1);
  cursor:pointer;
  transition:border-color .4s,transform .4s;
}
.hv-16__card:hover{
  border-color:rgba(20,184,166,.3);
  transform:translateY(-4px);
}
.hv-16__card::before{
  content:'';position:absolute;inset:0;
  pointer-events:none;
  transition:opacity .4s;
}
.hv-16__content{
  position:relative;z-index:1;
  padding:32px;display:flex;flex-direction:column;gap:12px;
}
.hv-16__icon{font-size:1.8rem;color:var(--teal)}
.hv-16__title{font-size:1.05rem;font-weight:700;color:var(--text)}
.hv-16__text{font-size:.85rem;color:var(--dim);line-height:1.5}

/* 1 — center spotlight */
.hv-16__card--center::before{
  background:radial-gradient(circle at 50% 50%,rgba(20,184,166,.18) 0%,transparent 65%);
  opacity:0;
}
.hv-16__card--center:hover::before{opacity:1}

/* 2 — corner sweep */
.hv-16__card--corner::before{
  background:conic-gradient(from 225deg at 0% 0%,rgba(6,182,212,.25),transparent 40%);
  opacity:0;
}
.hv-16__card--corner:hover::before{opacity:1}

/* 3 — scan band */
.hv-16__card--scan::before{
  background:linear-gradient(180deg,transparent 0%,rgba(20,184,166,.15) 40%,rgba(20,184,166,.15) 60%,transparent 100%);
  opacity:0;
  transform:translateY(-100%);
  transition:opacity .3s,transform .5s cubic-bezier(.4,0,.2,1);
}
.hv-16__card--scan:hover::before{opacity:1;transform:translateY(60%)}

/* 4 — vignette lift */
.hv-16__card--vignette::before{
  background:radial-gradient(ellipse at center,transparent 40%,rgba(0,0,0,.7) 100%);
  opacity:1;
  transition:opacity .4s;
}
.hv-16__card--vignette:hover::before{opacity:0}

@media(max-width:520px){.hv-16__grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){
  .hv-16__card,.hv-16__card::before{transition:none!important}
}
```

### 17. CSS Slide Reveal Card Hover Effect

**Type:** Pure CSS
**Description:** Five card hover effects that reveal hidden content through directional sliding panels — bottom-up overlay, left-push reveal, curtain wipe, inner-slide CTA, and overlay dissolve — all using CSS translate transforms and overflow hidden on nested containers.

**HTML:**
```html
<div class="hv-17">
  <div class="hv-17__grid">
    <div class="hv-17__card hv-17__card--up">
      <div class="hv-17__base">
        <div class="hv-17__icon">♟</div>
        <h3 class="hv-17__title">Strategy Kit</h3>
        <p class="hv-17__text">Modern approach to product design.</p>
      </div>
      <div class="hv-17__overlay hv-17__overlay--up">
        <h3 class="hv-17__title">Revealed!</h3>
        <p class="hv-17__text">Bottom-up slide reveals hidden details on hover.</p>
        <span class="hv-17__cta">Explore →</span>
      </div>
    </div>
    <div class="hv-17__card hv-17__card--push">
      <div class="hv-17__push-wrap">
        <div class="hv-17__push-face">
          <div class="hv-17__icon">⬡</div>
          <h3 class="hv-17__title">Design System</h3>
          <p class="hv-17__text">Components that scale.</p>
        </div>
        <div class="hv-17__push-back">
          <h3 class="hv-17__title">Left Push</h3>
          <p class="hv-17__text">Content slides out, reveal slides in.</p>
          <span class="hv-17__cta">Open →</span>
        </div>
      </div>
    </div>
    <div class="hv-17__card hv-17__card--curtain">
      <div class="hv-17__base">
        <div class="hv-17__icon">◈</div>
        <h3 class="hv-17__title">Brand Guide</h3>
        <p class="hv-17__text">Visual language at scale.</p>
      </div>
      <div class="hv-17__curtain"></div>
      <div class="hv-17__overlay hv-17__overlay--curtain">
        <h3 class="hv-17__title">Curtain!</h3>
        <p class="hv-17__text">Wipe reveals content beneath.</p>
        <span class="hv-17__cta">View →</span>
      </div>
    </div>
    <div class="hv-17__card hv-17__card--fade">
      <div class="hv-17__base">
        <div class="hv-17__icon">✦</div>
        <h3 class="hv-17__title">Case Study</h3>
        <p class="hv-17__text">Process and outcomes detailed.</p>
      </div>
      <div class="hv-17__overlay hv-17__overlay--fade">
        <h3 class="hv-17__title">Dissolve</h3>
        <p class="hv-17__text">Opacity fade with translateY settle.</p>
        <span class="hv-17__cta">Read →</span>
      </div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.hv-17,.hv-17 *,.hv-17 *::before,.hv-17 *::after{box-sizing:border-box;margin:0;padding:0}
.hv-17 ::selection{background:#b45309;color:#fff}
.hv-17{
  --bg:#0c0700;
  --text:#fef3c7;
  --dim:#78716c;
  --amber:#f59e0b;
  --orange:#f97316;
  --warm:#fbbf24;
  font-family:'Segoe UI',system-ui,sans-serif;
  background:var(--bg);
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  padding:60px 24px;
}
.hv-17__grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:32px;
  max-width:720px;width:100%;
}

/* shared card */
.hv-17__card{
  position:relative;overflow:hidden;
  min-height:220px;border-radius:16px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  cursor:pointer;
}
.hv-17__base,.hv-17__overlay{
  padding:28px;
  display:flex;flex-direction:column;gap:10px;
}
.hv-17__icon{font-size:1.8rem;color:var(--amber)}
.hv-17__title{font-size:1rem;font-weight:700;color:var(--text)}
.hv-17__text{font-size:.82rem;color:var(--dim);line-height:1.5}
.hv-17__cta{font-size:.85rem;font-weight:600;color:var(--amber);margin-top:4px}

/* 1 — bottom-up overlay */
.hv-17__overlay--up{
  position:absolute;inset:0;
  background:var(--amber);
  transform:translateY(100%);
  transition:transform .4s cubic-bezier(.4,0,.2,1);
}
.hv-17__overlay--up .hv-17__title{color:#000}
.hv-17__overlay--up .hv-17__text{color:rgba(0,0,0,.7)}
.hv-17__overlay--up .hv-17__cta{color:#000}
.hv-17__card--up:hover .hv-17__overlay--up{transform:translateY(0)}

/* 2 — left push */
.hv-17__push-wrap{
  position:absolute;inset:0;
  display:flex;
  transition:transform .4s cubic-bezier(.4,0,.2,1);
}
.hv-17__push-face,.hv-17__push-back{
  flex:0 0 100%;padding:28px;
  display:flex;flex-direction:column;gap:10px;
}
.hv-17__push-back{
  background:var(--orange);
}
.hv-17__push-back .hv-17__title{color:#fff}
.hv-17__push-back .hv-17__text{color:rgba(255,255,255,.8)}
.hv-17__push-back .hv-17__cta{color:#fff}
.hv-17__card--push:hover .hv-17__push-wrap{transform:translateX(-50%)}

/* 3 — curtain wipe */
.hv-17__curtain{
  position:absolute;inset:0;
  background:var(--warm);
  transform:scaleX(0);transform-origin:left;
  transition:transform .4s cubic-bezier(.4,0,.2,1);
  z-index:1;
}
.hv-17__overlay--curtain{
  position:absolute;inset:0;
  background:var(--warm);
  opacity:0;
  transition:opacity .2s .3s;
  z-index:2;
}
.hv-17__overlay--curtain .hv-17__title,.hv-17__overlay--curtain .hv-17__text,.hv-17__overlay--curtain .hv-17__cta{color:#000}
.hv-17__card--curtain:hover .hv-17__curtain{transform:scaleX(1)}
.hv-17__card--curtain:hover .hv-17__overlay--curtain{opacity:1}

/* 4 — fade dissolve */
.hv-17__overlay--fade{
  position:absolute;inset:0;
  background:rgba(15,12,5,.92);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  opacity:0;transform:translateY(8px);
  transition:opacity .4s,transform .4s cubic-bezier(.4,0,.2,1);
}
.hv-17__card--fade:hover .hv-17__overlay--fade{opacity:1;transform:translateY(0)}

@media(max-width:520px){.hv-17__grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){
  .hv-17__overlay,.hv-17__push-wrap,.hv-17__curtain{transition:none!important}
}
```

### 18. CSS Stack Lift Card Hover Effect

**Type:** Pure CSS
**Description:** Four stacked card hover effects — single card lift with shadow bloom, layered deck fan-out, cascading z-lift, and magnetic group hover — using translateY, box-shadow, and sibling selectors to create physical depth when hovering a stack of UI cards.

**HTML:**
```html
<div class="hv-18">
  <div class="hv-18__demos">
    <div class="hv-18__demo">
      <div class="hv-18__single">
        <div class="hv-18__card hv-18__card--single">
          <div class="hv-18__icon">◈</div>
          <h3 class="hv-18__title">Lift Me</h3>
          <p class="hv-18__text">Single card rise and shadow bloom.</p>
        </div>
      </div>
      <span class="hv-18__label">shadow bloom lift</span>
    </div>
    <div class="hv-18__demo">
      <div class="hv-18__deck">
        <div class="hv-18__card hv-18__card--deck hv-18__card--d1">
          <div class="hv-18__icon">★</div>
          <h3 class="hv-18__title">Fan Out</h3>
        </div>
        <div class="hv-18__card hv-18__card--deck hv-18__card--d2"></div>
        <div class="hv-18__card hv-18__card--deck hv-18__card--d3"></div>
      </div>
      <span class="hv-18__label">sibling fan-out</span>
    </div>
    <div class="hv-18__demo">
      <div class="hv-18__cascade">
        <div class="hv-18__card hv-18__card--cas hv-18__card--c1">
          <span class="hv-18__num">01</span>
        </div>
        <div class="hv-18__card hv-18__card--cas hv-18__card--c2">
          <span class="hv-18__num">02</span>
        </div>
        <div class="hv-18__card hv-18__card--cas hv-18__card--c3">
          <span class="hv-18__num">03</span>
        </div>
      </div>
      <span class="hv-18__label">cascade z-lift</span>
    </div>
    <div class="hv-18__demo">
      <div class="hv-18__group">
        <div class="hv-18__card hv-18__card--grp">A</div>
        <div class="hv-18__card hv-18__card--grp">B</div>
        <div class="hv-18__card hv-18__card--grp">C</div>
      </div>
      <span class="hv-18__label">group isolation</span>
    </div>
  </div>
</div>
```

**CSS:**
```css
.hv-18,.hv-18 *,.hv-18 *::before,.hv-18 *::after{box-sizing:border-box;margin:0;padding:0}
.hv-18 ::selection{background:#0f766e;color:#fff}
.hv-18{
  --bg:#020c08;
  --text:#d1fae5;
  --dim:#6b7280;
  --green:#10b981;
  --teal:#14b8a6;
  --emerald:#059669;
  --sage:#6ee7b7;
  font-family:'Segoe UI',system-ui,sans-serif;
  background:var(--bg);
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  padding:60px 24px;
}
.hv-18__demos{
  display:grid;grid-template-columns:repeat(2,1fr);gap:40px;
  max-width:760px;width:100%;
}
.hv-18__demo{
  display:flex;flex-direction:column;align-items:center;gap:20px;
  padding:40px 24px;
  background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.07);
  border-radius:16px;
}
.hv-18__label{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}

/* shared card */
.hv-18__card{border-radius:12px;cursor:pointer}
.hv-18__icon{font-size:1.6rem;color:var(--green)}
.hv-18__title{font-size:.95rem;font-weight:700;color:var(--text)}
.hv-18__text{font-size:.8rem;color:var(--dim);line-height:1.4}
.hv-18__num{font-size:1.6rem;font-weight:900;color:var(--text)}

/* 1 — single lift */
.hv-18__single{padding-bottom:24px}
.hv-18__card--single{
  padding:24px;width:200px;
  background:rgba(16,185,129,.12);
  border:1px solid rgba(16,185,129,.25);
  display:flex;flex-direction:column;gap:10px;
  box-shadow:0 4px 12px rgba(0,0,0,.3);
  transition:transform .35s cubic-bezier(.4,0,.2,1),box-shadow .35s;
}
.hv-18__card--single:hover{
  transform:translateY(-14px);
  box-shadow:0 28px 56px rgba(0,0,0,.5),0 0 24px rgba(16,185,129,.2);
}

/* 2 — deck fan-out */
.hv-18__deck{position:relative;width:180px;height:160px}
.hv-18__card--deck{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  border:1px solid rgba(255,255,255,.1);
  transition:transform .4s cubic-bezier(.4,0,.2,1);
}
.hv-18__card--d1{background:rgba(16,185,129,.2);z-index:3}
.hv-18__card--d2{background:rgba(5,150,105,.15);z-index:2;transform:translateY(8px)}
.hv-18__card--d3{background:rgba(4,120,87,.1);z-index:1;transform:translateY(16px)}
.hv-18__deck:hover .hv-18__card--d1{transform:translateY(-12px)}
.hv-18__deck:hover .hv-18__card--d2{transform:translateY(4px)}
.hv-18__deck:hover .hv-18__card--d3{transform:translateY(20px)}

/* 3 — cascade */
.hv-18__cascade{
  display:flex;gap:10px;align-items:flex-end;
}
.hv-18__card--cas{
  width:60px;height:100px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.1);
  transition:transform .35s cubic-bezier(.4,0,.2,1),box-shadow .35s;
}
.hv-18__card--c1{background:rgba(20,184,166,.2);height:80px}
.hv-18__card--c2{background:rgba(16,185,129,.2);height:100px}
.hv-18__card--c3{background:rgba(5,150,105,.2);height:120px}
.hv-18__card--c1:hover{transform:translateY(-10px);box-shadow:0 12px 30px rgba(0,0,0,.4)}
.hv-18__card--c2:hover{transform:translateY(-14px);box-shadow:0 16px 36px rgba(0,0,0,.4)}
.hv-18__card--c3:hover{transform:translateY(-18px);box-shadow:0 20px 40px rgba(0,0,0,.4)}

/* 4 — group hover isolation */
.hv-18__group{
  display:flex;gap:10px;
}
.hv-18__card--grp{
  width:56px;height:80px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.1rem;font-weight:700;color:var(--text);
  border-radius:10px;
  background:rgba(16,185,129,.2);
  border:1px solid rgba(16,185,129,.3);
  transition:transform .3s,opacity .3s,box-shadow .3s;
}
.hv-18__group:hover .hv-18__card--grp{
  opacity:.35;transform:scale(0.95);
}
.hv-18__group:hover .hv-18__card--grp:hover{
  opacity:1;transform:translateY(-10px);
  box-shadow:0 16px 36px rgba(0,0,0,.4);
}

@media(max-width:520px){.hv-18__demos{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){
  .hv-18__card{transition:none!important}
}
```

### 19. CSS Zoom Pan Image Hover Effect

**Type:** Pure CSS
**Description:** Five image hover effects using CSS transforms on a contained image — center zoom, corner-pan zoom, slow drift ken-burns, zoom plus brightness, and clip-path crop zoom — demonstrating how scale, translate, and clip-path on overflow-hidden containers create cinematic image reveals.

**HTML:**
```html
<div class="hv-19">
  <div class="hv-19__grid">
    <div class="hv-19__cell">
      <div class="hv-19__wrap">
        <div class="hv-19__img hv-19__img--center hv-19__swatch--blue"></div>
      </div>
      <span class="hv-19__label">center zoom</span>
    </div>
    <div class="hv-19__cell">
      <div class="hv-19__wrap">
        <div class="hv-19__img hv-19__img--pan hv-19__swatch--violet"></div>
      </div>
      <span class="hv-19__label">corner-pan zoom</span>
    </div>
    <div class="hv-19__cell">
      <div class="hv-19__wrap">
        <div class="hv-19__img hv-19__img--drift hv-19__swatch--amber"></div>
      </div>
      <span class="hv-19__label">slow ken-burns drift</span>
    </div>
    <div class="hv-19__cell">
      <div class="hv-19__wrap">
        <div class="hv-19__img hv-19__img--bright hv-19__swatch--emerald"></div>
      </div>
      <span class="hv-19__label">zoom + brightness</span>
    </div>
    <div class="hv-19__cell">
      <div class="hv-19__wrap hv-19__wrap--crop">
        <div class="hv-19__img hv-19__img--crop hv-19__swatch--rose"></div>
      </div>
      <span class="hv-19__label">clip-path crop zoom</span>
    </div>
    <div class="hv-19__cell">
      <div class="hv-19__wrap">
        <div class="hv-19__img hv-19__img--rotate hv-19__swatch--teal"></div>
      </div>
      <span class="hv-19__label">zoom + rotation</span>
    </div>
  </div>
</div>
```

**CSS:**
```css
.hv-19,.hv-19 *,.hv-19 *::before,.hv-19 *::after{box-sizing:border-box;margin:0;padding:0}
.hv-19 ::selection{background:#1d4ed8;color:#fff}
.hv-19{
  --bg:#08080f;
  --dim:#6b7280;
  font-family:'Segoe UI',system-ui,sans-serif;
  background:var(--bg);
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  padding:60px 24px;
}
.hv-19__grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
  max-width:840px;width:100%;
}
.hv-19__cell{
  display:flex;flex-direction:column;align-items:center;gap:12px;
}
.hv-19__label{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.hv-19__wrap{
  width:100%;aspect-ratio:4/3;
  overflow:hidden;border-radius:12px;cursor:pointer;
}
.hv-19__img{
  width:100%;height:100%;
  transition:transform .6s cubic-bezier(.4,0,.2,1),filter .6s,clip-path .6s;
}

/* layered pseudo-images: focal radial + grid pattern + diagonal lines + base color
   gives multiple visual anchors so zoom/pan/rotate are clearly perceptible */
.hv-19__swatch--blue{
  background:
    radial-gradient(circle at 30% 40%,#fef3c7 0%,transparent 18%),
    radial-gradient(circle at 70% 70%,#fbbf24 0%,transparent 22%),
    repeating-linear-gradient(45deg,transparent 0 16px,rgba(255,255,255,.08) 16px 17px),
    repeating-linear-gradient(-45deg,transparent 0 24px,rgba(0,0,0,.12) 24px 25px),
    linear-gradient(135deg,#1e40af,#3b82f6,#93c5fd,#1e3a8a);
}
.hv-19__swatch--violet{
  background:
    radial-gradient(circle at 25% 35%,#fce7f3 0%,transparent 16%),
    radial-gradient(circle at 65% 60%,#ec4899 0%,transparent 24%),
    repeating-linear-gradient(60deg,transparent 0 18px,rgba(255,255,255,.1) 18px 19px),
    repeating-linear-gradient(-30deg,transparent 0 28px,rgba(0,0,0,.15) 28px 29px),
    linear-gradient(135deg,#5b21b6,#7c3aed,#c4b5fd,#4c1d95);
}
.hv-19__swatch--amber{
  background:
    radial-gradient(circle at 70% 30%,#fef9c3 0%,#fde047 8%,transparent 20%),
    radial-gradient(circle at 25% 75%,#dc2626 0%,transparent 18%),
    repeating-linear-gradient(90deg,transparent 0 22px,rgba(0,0,0,.12) 22px 23px),
    repeating-linear-gradient(0deg,transparent 0 22px,rgba(255,255,255,.08) 22px 23px),
    linear-gradient(135deg,#92400e,#f59e0b,#fde68a,#78350f);
}
.hv-19__swatch--emerald{
  background:
    radial-gradient(circle at 40% 30%,#fef9c3 0%,transparent 14%),
    radial-gradient(circle at 75% 65%,#a7f3d0 0%,transparent 28%),
    repeating-linear-gradient(30deg,transparent 0 20px,rgba(255,255,255,.1) 20px 21px),
    repeating-linear-gradient(-60deg,transparent 0 30px,rgba(0,0,0,.14) 30px 31px),
    linear-gradient(135deg,#065f46,#10b981,#a7f3d0,#064e3b);
}
.hv-19__swatch--rose{
  background:
    radial-gradient(circle at 30% 30%,#fef3c7 0%,#fbbf24 10%,transparent 22%),
    radial-gradient(circle at 70% 70%,#7c1d6f 0%,transparent 20%),
    repeating-linear-gradient(75deg,transparent 0 18px,rgba(255,255,255,.1) 18px 19px),
    repeating-linear-gradient(-15deg,transparent 0 26px,rgba(0,0,0,.12) 26px 27px),
    linear-gradient(135deg,#9f1239,#f43f5e,#fda4af,#881337);
}
.hv-19__swatch--teal{
  background:
    radial-gradient(circle at 35% 35%,#fef3c7 0%,transparent 15%),
    radial-gradient(circle at 70% 70%,#0c4a6e 0%,transparent 25%),
    repeating-linear-gradient(45deg,transparent 0 20px,rgba(255,255,255,.1) 20px 21px),
    repeating-linear-gradient(-45deg,transparent 0 30px,rgba(0,0,0,.14) 30px 31px),
    linear-gradient(135deg,#0f766e,#14b8a6,#99f6e4,#0d9488);
}

/* 1 — center zoom */
.hv-19__img--center:hover{transform:scale(1.12)}

/* 2 — corner-pan */
.hv-19__img--pan:hover{transform:scale(1.18) translate(-5%,-5%)}

/* 3 — slow drift */
.hv-19__img--drift{
  transition:transform 1.2s cubic-bezier(.4,0,.2,1);
}
.hv-19__img--drift:hover{transform:scale(1.1) translate(3%,2%)}

/* 4 — zoom + brightness */
.hv-19__img--bright:hover{
  transform:scale(1.1);
  filter:brightness(1.25) saturate(1.2);
}

/* 5 — clip-path crop zoom */
.hv-19__wrap--crop{
  overflow:visible;
}
.hv-19__img--crop{
  clip-path:inset(8% round 12px);
  transition:transform .6s cubic-bezier(.4,0,.2,1),clip-path .6s cubic-bezier(.4,0,.2,1);
}
.hv-19__img--crop:hover{
  transform:scale(1.08);
  clip-path:inset(0% round 12px);
}

/* 6 — zoom + rotate */
.hv-19__img--rotate:hover{
  transform:scale(1.15) rotate(3deg);
}

@media(max-width:640px){.hv-19__grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:400px){.hv-19__grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){
  .hv-19__img{transition:none!important}
}
```

### 20. CSS Color Channel Split Hover Effect

**Type:** Pure CSS
**Description:** Four color channel separation effects on image containers — RGB duotone split, chromatic aberration text, green-screen channel extract, and full-color separation with mix-blend-mode — using CSS filter, mix-blend-mode, and pseudo-element tinting to deconstruct color into channels on hover.

**HTML:**
```html
<div class="hv-20">
  <div class="hv-20__grid">
    <div class="hv-20__cell">
      <div class="hv-20__box hv-20__box--rgb" data-text="SIGNAL">
        <span class="hv-20__box-label">SIGNAL</span>
      </div>
      <span class="hv-20__label">RGB channel split</span>
    </div>
    <div class="hv-20__cell">
      <div class="hv-20__box hv-20__box--chroma">
        <span class="hv-20__chroma" data-text="CHROMATIC">CHROMATIC</span>
      </div>
      <span class="hv-20__label">text shadow aberration</span>
    </div>
    <div class="hv-20__cell">
      <div class="hv-20__box hv-20__box--duo">
        <span class="hv-20__box-label">DUOTONE</span>
      </div>
      <span class="hv-20__label">color grade shift</span>
    </div>
    <div class="hv-20__cell">
      <div class="hv-20__box hv-20__box--screen">
        <div class="hv-20__screen-r"></div>
        <div class="hv-20__screen-b"></div>
        <span class="hv-20__box-label">COMPOSITE</span>
      </div>
      <span class="hv-20__label">screen blend channels</span>
    </div>
  </div>
</div>
```

**CSS:**
```css
.hv-20,.hv-20 *,.hv-20 *::before,.hv-20 *::after{box-sizing:border-box;margin:0;padding:0}
.hv-20 ::selection{background:#dc2626;color:#fff}
.hv-20{
  --bg:#050505;
  --dim:#4b5563;
  --red:#ff0040;
  --green:#00ff88;
  --blue:#0040ff;
  font-family:'Segoe UI',system-ui,sans-serif;
  background:var(--bg);
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  padding:60px 24px;
}
.hv-20__grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:40px;
  max-width:720px;width:100%;
}
.hv-20__cell{
  display:flex;flex-direction:column;align-items:center;gap:20px;
}
.hv-20__label{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.hv-20__box{
  width:100%;aspect-ratio:4/3;border-radius:12px;
  position:relative;overflow:hidden;cursor:pointer;
  background:linear-gradient(135deg,#1a1a2e,#16213e,#0f3460,#533483);
  display:flex;align-items:center;justify-content:center;
}
.hv-20__box-label{
  position:relative;z-index:2;
  font-size:1.2rem;font-weight:900;letter-spacing:.15em;
  color:#fff;
}

/* 1 — RGB channel split via text-shadow ghosts on the label */
.hv-20__box--rgb{
  background:
    radial-gradient(circle at 30% 30%,#1e3a8a 0%,transparent 50%),
    radial-gradient(circle at 70% 70%,#4c1d95 0%,transparent 50%),
    linear-gradient(135deg,#0a0a1a,#1a0a2e);
}
.hv-20__box--rgb .hv-20__box-label{
  transition:text-shadow .45s cubic-bezier(.4,0,.2,1),letter-spacing .45s;
  text-shadow:0 0 0 transparent;
}
.hv-20__box--rgb:hover .hv-20__box-label{
  letter-spacing:.22em;
  text-shadow:
    -6px 0 0 var(--red),
    6px 0 0 var(--blue),
    0 4px 0 var(--green);
}

/* 2 — chromatic text shadow (now in a card to match siblings) */
.hv-20__box--chroma{
  background:radial-gradient(circle at 50% 50%,#1a1a2e 0%,#050505 100%);
  cursor:default;
}
.hv-20__chroma{
  font-size:clamp(1.4rem,4vw,1.8rem);font-weight:900;letter-spacing:.12em;
  color:#fff;position:relative;display:inline-block;z-index:2;
  transition:text-shadow .4s cubic-bezier(.4,0,.2,1),letter-spacing .4s;
}
.hv-20__box--chroma:hover .hv-20__chroma{
  letter-spacing:.18em;
  text-shadow:
    5px 0 0 var(--red),
    -5px 0 0 var(--blue),
    0 4px 0 rgba(0,255,136,.6);
}

/* 3 — duotone grade (bright varied base so hue-rotate is visible) */
.hv-20__box--duo{
  background:
    radial-gradient(circle at 25% 30%,#fbbf24 0%,transparent 35%),
    radial-gradient(circle at 75% 70%,#dc2626 0%,transparent 40%),
    linear-gradient(135deg,#7c3aed,#ec4899,#f59e0b);
  transition:filter .5s cubic-bezier(.4,0,.2,1);
}
.hv-20__box--duo:hover{
  filter:hue-rotate(180deg) saturate(1.6);
}
.hv-20__box--duo .hv-20__box-label{
  text-shadow:0 2px 8px rgba(0,0,0,.8);
}

/* 4 — screen composite */
.hv-20__screen-r,.hv-20__screen-b{
  position:absolute;inset:0;
  border-radius:50%;width:60%;height:60%;
  opacity:0;
  transition:opacity .4s,transform .5s cubic-bezier(.4,0,.2,1);
  z-index:1;
}
.hv-20__screen-r{
  background:var(--red);mix-blend-mode:screen;
  top:10%;left:10%;
}
.hv-20__screen-b{
  background:var(--blue);mix-blend-mode:screen;
  top:10%;right:10%;left:auto;
}
.hv-20__box--screen:hover .hv-20__screen-r{opacity:.7;transform:translateX(-10px)}
.hv-20__box--screen:hover .hv-20__screen-b{opacity:.7;transform:translateX(10px)}

@media(max-width:520px){.hv-20__grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){
  .hv-20__layer,.hv-20__screen-r,.hv-20__screen-b,.hv-20__box{transition:none!important}
  .hv-20__chroma{transition:none!important}
}
```

### 21. CSS Duotone Image Hover Effect

**Type:** Pure CSS
**Description:** Four duotone image hover transitions — grayscale to full color restore, monochrome to brand duotone, hue rotation shift, and saturation fade-in — using CSS filter chains and pseudo-element blending to apply and remove two-tone color grades on hover.

**HTML:**
```html
<div class="hv-21">
  <div class="hv-21__grid">
    <div class="hv-21__cell">
      <div class="hv-21__wrap hv-21__wrap--restore">
        <div class="hv-21__img hv-21__swatch--a"></div>
      </div>
      <span class="hv-21__label">grayscale → color restore</span>
    </div>
    <div class="hv-21__cell">
      <div class="hv-21__wrap hv-21__wrap--duo">
        <div class="hv-21__img hv-21__swatch--b"></div>
        <div class="hv-21__duo-overlay"></div>
      </div>
      <span class="hv-21__label">duotone → natural</span>
    </div>
    <div class="hv-21__cell">
      <div class="hv-21__wrap hv-21__wrap--hue">
        <div class="hv-21__img hv-21__swatch--c"></div>
      </div>
      <span class="hv-21__label">hue-rotate grade</span>
    </div>
    <div class="hv-21__cell">
      <div class="hv-21__wrap hv-21__wrap--sat">
        <div class="hv-21__img hv-21__swatch--d"></div>
      </div>
      <span class="hv-21__label">desaturate fade-in</span>
    </div>
  </div>
</div>
```

**CSS:**
```css
.hv-21,.hv-21 *,.hv-21 *::before,.hv-21 *::after{box-sizing:border-box;margin:0;padding:0}
.hv-21 ::selection{background:#9333ea;color:#fff}
.hv-21{
  --bg:#080608;
  --dim:#6b7280;
  font-family:'Segoe UI',system-ui,sans-serif;
  background:var(--bg);
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  padding:60px 24px;
}
.hv-21__grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:32px;
  max-width:720px;width:100%;
}
.hv-21__cell{display:flex;flex-direction:column;gap:12px}
.hv-21__label{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.hv-21__wrap{
  aspect-ratio:16/9;border-radius:12px;
  overflow:hidden;cursor:pointer;position:relative;
  isolation:isolate;
}
.hv-21__img{width:100%;height:100%}

/* layered pseudo-images so duotone/grayscale/hue-rotate are visually meaningful */
.hv-21__swatch--a{
  background:
    radial-gradient(circle at 28% 32%,#fef9c3 0%,transparent 14%),
    radial-gradient(circle at 70% 65%,#dc2626 0%,transparent 22%),
    repeating-linear-gradient(45deg,transparent 0 16px,rgba(255,255,255,.08) 16px 17px),
    repeating-linear-gradient(-45deg,transparent 0 24px,rgba(0,0,0,.14) 24px 25px),
    linear-gradient(135deg,#1e3a5f,#2563eb,#7dd3fc,#1e40af);
}
.hv-21__swatch--b{
  background:
    radial-gradient(circle at 32% 30%,#fde047 0%,transparent 16%),
    radial-gradient(circle at 68% 68%,#10b981 0%,transparent 22%),
    repeating-linear-gradient(30deg,transparent 0 18px,rgba(255,255,255,.1) 18px 19px),
    repeating-linear-gradient(-60deg,transparent 0 28px,rgba(0,0,0,.14) 28px 29px),
    linear-gradient(135deg,#4a1942,#7c3aed,#ddd6fe,#6d28d9);
}
.hv-21__swatch--c{
  background:
    radial-gradient(circle at 25% 30%,#fef3c7 0%,transparent 15%),
    radial-gradient(circle at 72% 70%,#dc2626 0%,transparent 22%),
    repeating-linear-gradient(60deg,transparent 0 20px,rgba(255,255,255,.1) 20px 21px),
    repeating-linear-gradient(-30deg,transparent 0 30px,rgba(0,0,0,.14) 30px 31px),
    linear-gradient(135deg,#14532d,#16a34a,#bbf7d0,#15803d);
}
.hv-21__swatch--d{
  background:
    radial-gradient(circle at 30% 35%,#fef9c3 0%,transparent 14%),
    radial-gradient(circle at 70% 68%,#1e40af 0%,transparent 22%),
    repeating-linear-gradient(75deg,transparent 0 18px,rgba(255,255,255,.1) 18px 19px),
    repeating-linear-gradient(-15deg,transparent 0 28px,rgba(0,0,0,.14) 28px 29px),
    linear-gradient(135deg,#7c2d12,#ea580c,#fdba74,#c2410c);
}

/* 1 — grayscale restore */
.hv-21__wrap--restore .hv-21__img{
  filter:grayscale(1) contrast(1.1);
  transition:filter .5s cubic-bezier(.4,0,.2,1);
}
.hv-21__wrap--restore:hover .hv-21__img{filter:none}

/* 2 — duotone overlay fade */
.hv-21__duo-overlay{
  position:absolute;inset:0;
  background:linear-gradient(135deg,#1e003c,#ff6b00);
  mix-blend-mode:color;
  opacity:1;
  transition:opacity .5s cubic-bezier(.4,0,.2,1);
}
.hv-21__wrap--duo .hv-21__img{filter:contrast(1.1)}
.hv-21__wrap--duo:hover .hv-21__duo-overlay{opacity:0}

/* 3 — hue rotate */
.hv-21__wrap--hue .hv-21__img{
  filter:hue-rotate(0deg) saturate(1);
  transition:filter .6s cubic-bezier(.4,0,.2,1);
}
.hv-21__wrap--hue:hover .hv-21__img{
  filter:hue-rotate(160deg) saturate(1.5);
}

/* 4 — desaturate reveal */
.hv-21__wrap--sat .hv-21__img{
  filter:grayscale(1);
  transition:filter .5s cubic-bezier(.4,0,.2,1);
}
.hv-21__wrap--sat:hover .hv-21__img{
  filter:grayscale(0) saturate(1.2);
}

@media(max-width:520px){.hv-21__grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){
  .hv-21__img,.hv-21__duo-overlay{transition:none!important}
}
```

### 22. CSS Curtain Reveal Image Hover Effect

**Type:** Pure CSS
**Description:** Five theatrical curtain-style hover reveals — split curtain open, top-to-bottom drop, blind slats slide, venetian blind open, and radial iris expand — all using clip-path polygon and inset transitions to theatrically reveal hidden image content on hover.

**HTML:**
```html
<div class="hv-22">
  <div class="hv-22__grid">
    <div class="hv-22__cell">
      <div class="hv-22__wrap hv-22__wrap--split">
        <div class="hv-22__reveal hv-22__swatch--a">
          <span class="hv-22__tag">OPEN</span>
        </div>
      </div>
      <span class="hv-22__label">split curtain</span>
    </div>
    <div class="hv-22__cell">
      <div class="hv-22__wrap hv-22__wrap--drop">
        <div class="hv-22__reveal hv-22__swatch--b">
          <span class="hv-22__tag">DROP</span>
        </div>
        <div class="hv-22__curtain-drop"></div>
      </div>
      <span class="hv-22__label">curtain drop</span>
    </div>
    <div class="hv-22__cell">
      <div class="hv-22__wrap hv-22__wrap--iris">
        <div class="hv-22__reveal hv-22__swatch--c">
          <span class="hv-22__tag">IRIS</span>
        </div>
        <div class="hv-22__iris-mask"></div>
      </div>
      <span class="hv-22__label">iris expand</span>
    </div>
    <div class="hv-22__cell">
      <div class="hv-22__wrap hv-22__wrap--slat">
        <div class="hv-22__reveal hv-22__swatch--d">
          <span class="hv-22__tag">BLIND</span>
        </div>
        <div class="hv-22__slat hv-22__slat--1"></div>
        <div class="hv-22__slat hv-22__slat--2"></div>
        <div class="hv-22__slat hv-22__slat--3"></div>
        <div class="hv-22__slat hv-22__slat--4"></div>
        <div class="hv-22__slat hv-22__slat--5"></div>
      </div>
      <span class="hv-22__label">venetian blind</span>
    </div>
  </div>
</div>
```

**CSS:**
```css
.hv-22,.hv-22 *,.hv-22 *::before,.hv-22 *::after{box-sizing:border-box;margin:0;padding:0}
.hv-22 ::selection{background:#be185d;color:#fff}
.hv-22{
  --bg:#08040c;
  --dim:#6b7280;
  font-family:'Segoe UI',system-ui,sans-serif;
  background:var(--bg);
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  padding:60px 24px;
}
.hv-22__grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:32px;
  max-width:720px;width:100%;
}
.hv-22__cell{display:flex;flex-direction:column;gap:12px}
.hv-22__label{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.hv-22__wrap{
  aspect-ratio:16/9;border-radius:12px;overflow:hidden;
  position:relative;cursor:pointer;
}
.hv-22__reveal{
  width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
}
.hv-22__tag{font-size:1.4rem;font-weight:900;letter-spacing:.15em;color:#fff;opacity:.8}

/* swatches */
.hv-22__swatch--a{background:linear-gradient(135deg,#0f172a,#1e40af,#3b82f6)}
.hv-22__swatch--b{background:linear-gradient(135deg,#0f172a,#7c3aed,#c084fc)}
.hv-22__swatch--c{background:linear-gradient(135deg,#0f172a,#0f766e,#2dd4bf)}
.hv-22__swatch--d{background:linear-gradient(135deg,#0f172a,#be185d,#f9a8d4)}

/* 1 — split curtain */
.hv-22__wrap--split::before,
.hv-22__wrap--split::after{
  content:'';position:absolute;top:0;width:50%;height:100%;
  background:#1a0a2e;z-index:2;
  transition:transform .5s cubic-bezier(.4,0,.2,1);
}
.hv-22__wrap--split::before{left:0}
.hv-22__wrap--split::after{right:0}
.hv-22__wrap--split:hover::before{transform:translateX(-100%)}
.hv-22__wrap--split:hover::after{transform:translateX(100%)}

/* 2 — curtain drop */
.hv-22__curtain-drop{
  position:absolute;inset:0;z-index:2;
  background:#1a002a;
  transform:scaleY(1);transform-origin:top;
  transition:transform .5s cubic-bezier(.4,0,.2,1);
}
.hv-22__wrap--drop:hover .hv-22__curtain-drop{transform:scaleY(0)}

/* 3 — iris expand */
.hv-22__iris-mask{
  position:absolute;inset:0;z-index:2;
  background:#0a001a;
  clip-path:polygon(0 0,100% 0,100% 100%,0 100%,0 0,50% 50%);
  transition:clip-path .5s cubic-bezier(.4,0,.2,1);
}
.hv-22__wrap--iris .hv-22__iris-mask{
  clip-path:circle(75% at 50% 50%);
  background:transparent;
  border:none;
}
/* re-approach: solid overlay with clip-path shrinking to reveal */
.hv-22__wrap--iris::before{
  content:'';position:absolute;inset:0;z-index:2;
  background:#0a001a;
  clip-path:polygon(
    0 0,50% 0,50% 0,50% 0,50% 100%,50% 100%,50% 100%,0 100%,
    0 0,100% 0,100% 50%,100% 50%,100% 50%,100% 100%,50% 100%
  );
  transition:clip-path .5s cubic-bezier(.4,0,.2,1),opacity .5s;
  opacity:1;
}
.hv-22__iris-mask{display:none}
.hv-22__wrap--iris::after{
  content:'';position:absolute;inset:0;z-index:1;
}
/* simpler iris via circle clip-path on a dark overlay */
.hv-22__wrap--iris::before{
  clip-path:circle(76% at 50% 50%);
  background:transparent;
  box-shadow:0 0 0 200px #0a001a;
  border-radius:50%;
  top:50%;left:50%;
  width:0;height:0;
  transform:translate(-50%,-50%);
  clip-path:none;
  transition:box-shadow .5s cubic-bezier(.4,0,.2,1);
}
.hv-22__wrap--iris:hover::before{
  box-shadow:0 0 0 0 #0a001a;
}

/* 4 — venetian blind slats */
.hv-22__slat{
  position:absolute;left:0;width:100%;height:20%;
  background:#1a0014;z-index:2;
  transform:scaleY(1);transform-origin:top;
  transition:transform .3s cubic-bezier(.4,0,.2,1);
}
.hv-22__slat--1{top:0%;transition-delay:0s}
.hv-22__slat--2{top:20%;transition-delay:.05s}
.hv-22__slat--3{top:40%;transition-delay:.1s}
.hv-22__slat--4{top:60%;transition-delay:.15s}
.hv-22__slat--5{top:80%;transition-delay:.2s}
.hv-22__wrap--slat:hover .hv-22__slat{transform:scaleY(0)}

@media(max-width:520px){.hv-22__grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){
  .hv-22__wrap::before,.hv-22__wrap::after,.hv-22__curtain-drop,.hv-22__slat{transition:none!important}
}
```

### 23. CSS Ken Burns Image Hover Effect

**Type:** Pure CSS
**Description:** Documentary-style slow zoom and pan animations on images, triggered by hover — six directional Ken Burns presets.

**HTML:**
```html
<div class="hv-23">
  <p class="hv-23__label">Ken Burns Hover — 6 Presets</p>
  <div class="hv-23__grid">

    <div class="hv-23__card hv-23__card--zoom-in">
      <img class="hv-23__img" src="https://picsum.photos/seed/kb1/400/260" alt="zoom-in" />
      <span class="hv-23__tag">Zoom In</span>
    </div>

    <div class="hv-23__card hv-23__card--zoom-out">
      <img class="hv-23__img" src="https://picsum.photos/seed/kb2/400/260" alt="zoom-out" />
      <span class="hv-23__tag">Zoom Out</span>
    </div>

    <div class="hv-23__card hv-23__card--pan-right">
      <img class="hv-23__img" src="https://picsum.photos/seed/kb3/400/260" alt="pan right" />
      <span class="hv-23__tag">Pan Right</span>
    </div>

    <div class="hv-23__card hv-23__card--pan-left">
      <img class="hv-23__img" src="https://picsum.photos/seed/kb4/400/260" alt="pan left" />
      <span class="hv-23__tag">Pan Left</span>
    </div>

    <div class="hv-23__card hv-23__card--drift-up">
      <img class="hv-23__img" src="https://picsum.photos/seed/kb5/400/260" alt="drift up" />
      <span class="hv-23__tag">Drift Up</span>
    </div>

    <div class="hv-23__card hv-23__card--drift-diagonal">
      <img class="hv-23__img" src="https://picsum.photos/seed/kb6/400/260" alt="diagonal" />
      <span class="hv-23__tag">Diagonal</span>
    </div>

  </div>
</div>
```

**CSS:**
```css
.hv-23,
.hv-23 *,
.hv-23 *::before,
.hv-23 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.hv-23 {
  --kb-duration: 6s;
  --kb-ease: cubic-bezier(.25,.46,.45,.94);
  font-family: system-ui, sans-serif;
  padding: 2rem;
  background: #0d0d0d;
  min-height: 100vh;
}
.hv-23__label {
  text-align: center;
  color: #888;
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 2rem;
}
.hv-23__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  max-width: 820px;
  margin: 0 auto;
}
.hv-23__card {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  cursor: pointer;
  aspect-ratio: 3/2;
  box-shadow: 0 4px 20px rgba(0,0,0,.5);
}
.hv-23__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  animation-duration: var(--kb-duration);
  animation-timing-function: var(--kb-ease);
  animation-fill-mode: both;
  animation-play-state: paused;
  will-change: transform;
}
.hv-23__card:hover .hv-23__img {
  animation-play-state: running;
}
.hv-23__tag {
  position: absolute;
  bottom: .6rem;
  left: .6rem;
  background: rgba(0,0,0,.65);
  color: #fff;
  font-size: .7rem;
  letter-spacing: .08em;
  padding: .25rem .55rem;
  border-radius: 4px;
  backdrop-filter: blur(4px);
  pointer-events: none;
}

/* ── Keyframes ── */
@keyframes hv-23-zoom-in {
  from { transform: scale(1) translate(0, 0); }
  to   { transform: scale(1.18) translate(-2%, -2%); }
}
@keyframes hv-23-zoom-out {
  from { transform: scale(1.2) translate(-3%, -3%); }
  to   { transform: scale(1) translate(0, 0); }
}
@keyframes hv-23-pan-right {
  from { transform: scale(1.14) translate(-5%, 0); }
  to   { transform: scale(1.14) translate(5%, 0); }
}
@keyframes hv-23-pan-left {
  from { transform: scale(1.14) translate(5%, 0); }
  to   { transform: scale(1.14) translate(-5%, 0); }
}
@keyframes hv-23-drift-up {
  from { transform: scale(1.14) translate(0, 5%); }
  to   { transform: scale(1.14) translate(0, -5%); }
}
@keyframes hv-23-diagonal {
  from { transform: scale(1) translate(0, 0); }
  to   { transform: scale(1.2) translate(-4%, -4%); }
}

/* ── Per-card assignments ── */
.hv-23__card--zoom-in       .hv-23__img { animation-name: hv-23-zoom-in; }
.hv-23__card--zoom-out      .hv-23__img { animation-name: hv-23-zoom-out; }
.hv-23__card--pan-right     .hv-23__img { animation-name: hv-23-pan-right; }
.hv-23__card--pan-left      .hv-23__img { animation-name: hv-23-pan-left; }
.hv-23__card--drift-up      .hv-23__img { animation-name: hv-23-drift-up; }
.hv-23__card--drift-diagonal .hv-23__img { animation-name: hv-23-diagonal; }

@media (max-width: 600px) { .hv-23__grid { grid-template-columns: 1fr 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .hv-23__img { animation: none !important; }
}
```

### 24. CSS Image Tilt Depth Hover Effect

**Type:** Pure CSS
**Description:** Cards that tilt in 3-D perspective with floating depth layers and dynamic drop-shadows, entirely in CSS.

**HTML:**
```html
<div class="hv-24">
  <p class="hv-24__label">Image Tilt Depth — 4 Variants</p>
  <div class="hv-24__grid">

    <div class="hv-24__card hv-24__card--portrait">
      <div class="hv-24__inner">
        <img class="hv-24__img" src="https://picsum.photos/seed/tilt1/300/400" alt="" />
        <div class="hv-24__shine"></div>
        <div class="hv-24__caption">Portrait Tilt</div>
      </div>
    </div>

    <div class="hv-24__card hv-24__card--landscape">
      <div class="hv-24__inner">
        <img class="hv-24__img" src="https://picsum.photos/seed/tilt2/400/260" alt="" />
        <div class="hv-24__shine"></div>
        <div class="hv-24__caption">Landscape Tilt</div>
      </div>
    </div>

    <div class="hv-24__card hv-24__card--deep">
      <div class="hv-24__inner">
        <img class="hv-24__img" src="https://picsum.photos/seed/tilt3/300/400" alt="" />
        <div class="hv-24__shine"></div>
        <div class="hv-24__caption">Deep Perspective</div>
      </div>
    </div>

    <div class="hv-24__card hv-24__card--flat">
      <div class="hv-24__inner">
        <img class="hv-24__img" src="https://picsum.photos/seed/tilt4/400/260" alt="" />
        <div class="hv-24__shine"></div>
        <div class="hv-24__caption">Flat Hover Lift</div>
      </div>
    </div>

  </div>
</div>
```

**CSS:**
```css
.hv-24,
.hv-24 *,
.hv-24 *::before,
.hv-24 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.hv-24 {
  font-family: system-ui, sans-serif;
  background: #0e0e12;
  padding: 2.5rem 2rem;
  min-height: 100vh;
}
.hv-24__label {
  text-align: center;
  color: #666;
  font-size: .75rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 2.5rem;
}
.hv-24__grid {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 2.5rem;
  justify-content: center;
  align-items: start;
}

/* ── Card shell — holds perspective ── */
.hv-24__card {
  perspective: 700px;
  cursor: pointer;
}

/* ── Inner — rotates in 3-D ── */
.hv-24__inner {
  position: relative;
  border-radius: 12px;
  transform-style: preserve-3d;
  transition:
    transform .45s cubic-bezier(.23,1,.32,1),
    box-shadow .45s cubic-bezier(.23,1,.32,1);
  box-shadow: 0 8px 30px rgba(0,0,0,.55);
  overflow: hidden;         /* clip image but we accept safari caveat */
}
.hv-24__card--portrait  .hv-24__inner { width: 220px; aspect-ratio: 3/4; }
.hv-24__card--landscape .hv-24__inner { width: 320px; aspect-ratio: 16/9; }
.hv-24__card--deep      .hv-24__inner { width: 220px; aspect-ratio: 3/4; }
.hv-24__card--flat      .hv-24__inner { width: 320px; aspect-ratio: 16/9; }

/* per-variant tilt angles */
.hv-24__card--portrait:hover  .hv-24__inner { transform: rotateY(12deg) rotateX(-6deg); box-shadow: -14px 18px 50px rgba(0,0,0,.7); }
.hv-24__card--landscape:hover .hv-24__inner { transform: rotateX(10deg) rotateY(-5deg);  box-shadow: 0 -14px 40px rgba(0,0,0,.6); }
.hv-24__card--deep:hover      .hv-24__inner { transform: rotateY(-16deg) rotateX(8deg);  box-shadow: 20px 14px 60px rgba(0,0,0,.8); }
.hv-24__card--flat:hover      .hv-24__inner { transform: rotateX(5deg) rotateY(5deg) translateZ(12px); box-shadow: -8px 20px 50px rgba(0,0,0,.65); }

.hv-24__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Specular shine overlay ── */
.hv-24__shine {
  position: absolute;
  inset: 0;
  background: conic-gradient(from 135deg at 50% 0%,
    rgba(255,255,255,.18) 0deg,
    transparent 80deg);
  opacity: 0;
  transition: opacity .4s;
  pointer-events: none;
  border-radius: inherit;
}
.hv-24__card:hover .hv-24__shine { opacity: 1; }

/* ── Caption ── */
.hv-24__caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: .65rem .9rem;
  background: linear-gradient(transparent, rgba(0,0,0,.75));
  color: #fff;
  font-size: .78rem;
  letter-spacing: .06em;
  transform: translateY(4px);
  opacity: 0;
  transition: opacity .35s, transform .35s;
  pointer-events: none;
}
.hv-24__card:hover .hv-24__caption { opacity: 1; transform: translateY(0); }

@media (max-width: 560px) {
  .hv-24__grid { grid-template-columns: 1fr; }
  .hv-24__card--portrait .hv-24__inner,
  .hv-24__card--deep     .hv-24__inner { width: 100%; }
  .hv-24__card--landscape .hv-24__inner,
  .hv-24__card--flat      .hv-24__inner { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .hv-24__inner { transition: none !important; }
  .hv-24__shine, .hv-24__caption { transition: none !important; }
}
```

### 25. CSS Underline Slide Nav Hover Effect

**Type:** Pure CSS
**Description:** Navigation links where a sliding underline bar glides between items — six distinct sliding and morphing underline styles.

**HTML:**
```html
<div class="hv-25">
  <p class="hv-25__label">Underline Slide Nav — 6 Styles</p>

  <nav class="hv-25__nav hv-25__nav--grow-left">
    <a class="hv-25__link" href="#">Home</a>
    <a class="hv-25__link" href="#">About</a>
    <a class="hv-25__link" href="#">Work</a>
    <a class="hv-25__link" href="#">Contact</a>
    <span class="hv-25__sub">Grow from Left</span>
  </nav>

  <nav class="hv-25__nav hv-25__nav--center">
    <a class="hv-25__link" href="#">Home</a>
    <a class="hv-25__link" href="#">About</a>
    <a class="hv-25__link" href="#">Work</a>
    <a class="hv-25__link" href="#">Contact</a>
    <span class="hv-25__sub">Expand from Centre</span>
  </nav>

  <nav class="hv-25__nav hv-25__nav--overline">
    <a class="hv-25__link" href="#">Home</a>
    <a class="hv-25__link" href="#">About</a>
    <a class="hv-25__link" href="#">Work</a>
    <a class="hv-25__link" href="#">Contact</a>
    <span class="hv-25__sub">Top Overline</span>
  </nav>

  <nav class="hv-25__nav hv-25__nav--double">
    <a class="hv-25__link" href="#">Home</a>
    <a class="hv-25__link" href="#">About</a>
    <a class="hv-25__link" href="#">Work</a>
    <a class="hv-25__link" href="#">Contact</a>
    <span class="hv-25__sub">Double Line</span>
  </nav>

  <nav class="hv-25__nav hv-25__nav--thick">
    <a class="hv-25__link" href="#">Home</a>
    <a class="hv-25__link" href="#">About</a>
    <a class="hv-25__link" href="#">Work</a>
    <a class="hv-25__link" href="#">Contact</a>
    <span class="hv-25__sub">Thick Fill Highlight</span>
  </nav>

  <nav class="hv-25__nav hv-25__nav--dot">
    <a class="hv-25__link" href="#">Home</a>
    <a class="hv-25__link" href="#">About</a>
    <a class="hv-25__link" href="#">Work</a>
    <a class="hv-25__link" href="#">Contact</a>
    <span class="hv-25__sub">Dot Indicator</span>
  </nav>
</div>
```

**CSS:**
```css
.hv-25,
.hv-25 *,
.hv-25 *::before,
.hv-25 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.hv-25 {
  --ul-color: #7c6af7;
  --ul-h: 2px;
  font-family: system-ui, sans-serif;
  background: #0b0b0f;
  padding: 3rem 2rem;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 2.8rem;
}
.hv-25__label {
  text-align: center;
  color: #555;
  font-size: .72rem;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.hv-25__nav {
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
  position: relative;
}
.hv-25__sub {
  margin-left: auto;
  color: #444;
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.hv-25__link {
  color: #ccc;
  text-decoration: none;
  font-size: .95rem;
  font-weight: 500;
  position: relative;
  padding-bottom: 4px;
  transition: color .25s;
}
.hv-25__link:hover { color: #fff; }

/* ── 1. Grow from Left ── */
.hv-25__nav--grow-left .hv-25__link::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: var(--ul-h);
  background: var(--ul-color);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.hv-25__nav--grow-left .hv-25__link:hover::after { transform: scaleX(1); }

/* ── 2. Expand from Centre ── */
.hv-25__nav--center .hv-25__link::after {
  content: '';
  position: absolute;
  bottom: 0; left: 50%;
  width: 100%; height: var(--ul-h);
  background: var(--ul-color);
  transform: scaleX(0) translateX(-50%);
  transform-origin: center;
  transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.hv-25__nav--center .hv-25__link:hover::after { transform: scaleX(1) translateX(-50%); }

/* ── 3. Overline ── */
.hv-25__nav--overline .hv-25__link {
  padding-bottom: 0;
  padding-top: 4px;
}
.hv-25__nav--overline .hv-25__link::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: var(--ul-h);
  background: var(--ul-color);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.hv-25__nav--overline .hv-25__link:hover::before {
  transform: scaleX(1);
  transform-origin: left;
}

/* ── 4. Double Line ── */
.hv-25__nav--double .hv-25__link::before,
.hv-25__nav--double .hv-25__link::after {
  content: '';
  position: absolute;
  left: 0; width: 100%; height: var(--ul-h);
  background: var(--ul-color);
  transform: scaleX(0);
  transition: transform .35s cubic-bezier(.4,0,.2,1);
}
.hv-25__nav--double .hv-25__link::before { top: 0; transform-origin: right; }
.hv-25__nav--double .hv-25__link::after  { bottom: 0; transform-origin: left; }
.hv-25__nav--double .hv-25__link:hover::before,
.hv-25__nav--double .hv-25__link:hover::after { transform: scaleX(1); }

/* ── 5. Thick Fill Highlight ── */
.hv-25__nav--thick .hv-25__link::after {
  content: '';
  position: absolute;
  bottom: -2px; left: -6px;
  width: calc(100% + 12px); height: 34px;
  background: var(--ul-color);
  border-radius: 4px;
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform .28s cubic-bezier(.34,1.56,.64,1);
  z-index: -1;
}
.hv-25__nav--thick .hv-25__link:hover::after { transform: scaleY(1); }
.hv-25__nav--thick .hv-25__link { z-index: 0; }

/* ── 6. Dot Indicator ── */
.hv-25__nav--dot .hv-25__link {
  padding-bottom: 8px;
}
.hv-25__nav--dot .hv-25__link::after {
  content: '';
  position: absolute;
  bottom: 0; left: 50%;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--ul-color);
  transform: translateX(-50%) scale(0);
  transition: transform .25s cubic-bezier(.34,1.56,.64,1);
}
.hv-25__nav--dot .hv-25__link:hover::after { transform: translateX(-50%) scale(1); }

@media (prefers-reduced-motion: reduce) {
  .hv-25__link::before,
  .hv-25__link::after { transition: none !important; }
}
```

### 26. CSS Highlight Fill Nav Hover Effect

**Type:** Pure CSS
**Description:** Navigation links with pill, block, and gradient background fill highlights that animate in on hover — six distinct fill styles.

**HTML:**
```html
<div class="hv-26">
  <p class="hv-26__label">Highlight Fill Nav — 6 Styles</p>

  <nav class="hv-26__nav hv-26__nav--pill">
    <a class="hv-26__link" href="#">Explore</a>
    <a class="hv-26__link" href="#">Gallery</a>
    <a class="hv-26__link" href="#">Studio</a>
    <a class="hv-26__link" href="#">Contact</a>
    <span class="hv-26__sub">Pill Fill</span>
  </nav>

  <nav class="hv-26__nav hv-26__nav--block">
    <a class="hv-26__link" href="#">Explore</a>
    <a class="hv-26__link" href="#">Gallery</a>
    <a class="hv-26__link" href="#">Studio</a>
    <a class="hv-26__link" href="#">Contact</a>
    <span class="hv-26__sub">Block Fill</span>
  </nav>

  <nav class="hv-26__nav hv-26__nav--gradient">
    <a class="hv-26__link" href="#">Explore</a>
    <a class="hv-26__link" href="#">Gallery</a>
    <a class="hv-26__link" href="#">Studio</a>
    <a class="hv-26__link" href="#">Contact</a>
    <span class="hv-26__sub">Gradient Fill</span>
  </nav>

  <nav class="hv-26__nav hv-26__nav--slash">
    <a class="hv-26__link" href="#">Explore</a>
    <a class="hv-26__link" href="#">Gallery</a>
    <a class="hv-26__link" href="#">Studio</a>
    <a class="hv-26__link" href="#">Contact</a>
    <span class="hv-26__sub">Slash Clip</span>
  </nav>

  <nav class="hv-26__nav hv-26__nav--spotlight">
    <a class="hv-26__link" href="#">Explore</a>
    <a class="hv-26__link" href="#">Gallery</a>
    <a class="hv-26__link" href="#">Studio</a>
    <a class="hv-26__link" href="#">Contact</a>
    <span class="hv-26__sub">Radial Spotlight</span>
  </nav>

  <nav class="hv-26__nav hv-26__nav--invert">
    <a class="hv-26__link" href="#">Explore</a>
    <a class="hv-26__link" href="#">Gallery</a>
    <a class="hv-26__link" href="#">Studio</a>
    <a class="hv-26__link" href="#">Contact</a>
    <span class="hv-26__sub">Invert Blend</span>
  </nav>
</div>
```

**CSS:**
```css
.hv-26,
.hv-26 *,
.hv-26 *::before,
.hv-26 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.hv-26 {
  --hl-bg: #5b4fcf;
  --hl-radius: 6px;
  font-family: system-ui, sans-serif;
  background: #0a0a10;
  padding: 3rem 2rem;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 2.6rem;
}
.hv-26__label {
  text-align: center;
  color: #444;
  font-size: .72rem;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.hv-26__nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.hv-26__sub {
  margin-left: auto;
  color: #3a3a4a;
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.hv-26__link {
  color: #bbb;
  text-decoration: none;
  font-size: .95rem;
  font-weight: 500;
  position: relative;
  padding: .3rem .75rem;
  z-index: 0;
  transition: color .25s;
}
.hv-26__link::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: var(--hl-radius);
  transition: transform .3s cubic-bezier(.4,0,.2,1), opacity .3s;
}

/* ── 1. Pill Fill ── */
.hv-26__nav--pill .hv-26__link { --hl-radius: 99px; }
.hv-26__nav--pill .hv-26__link::before {
  background: var(--hl-bg);
  transform: scaleX(.1) scaleY(.4);
  opacity: 0;
}
.hv-26__nav--pill .hv-26__link:hover { color: #fff; }
.hv-26__nav--pill .hv-26__link:hover::before { transform: scaleX(1) scaleY(1); opacity: 1; }

/* ── 2. Block Fill (slide up) ── */
.hv-26__nav--block .hv-26__link::before {
  background: var(--hl-bg);
  transform: scaleY(0);
  transform-origin: bottom;
  border-radius: 4px;
}
.hv-26__nav--block .hv-26__link:hover { color: #fff; }
.hv-26__nav--block .hv-26__link:hover::before { transform: scaleY(1); }

/* ── 3. Gradient Fill ── */
.hv-26__nav--gradient .hv-26__link::before {
  background: linear-gradient(135deg, #7c6af7, #f764a8);
  transform: scaleX(0);
  transform-origin: left;
  border-radius: 6px;
  opacity: .9;
}
.hv-26__nav--gradient .hv-26__link:hover { color: #fff; }
.hv-26__nav--gradient .hv-26__link:hover::before { transform: scaleX(1); }

/* ── 4. Slash Clip ── */
.hv-26__nav--slash .hv-26__link::before {
  background: #e8c840;
  clip-path: polygon(8% 0%, 100% 0%, 92% 100%, 0% 100%);
  transform: scaleX(0);
  transform-origin: left;
  border-radius: 0;
}
.hv-26__nav--slash .hv-26__link:hover { color: #111; }
.hv-26__nav--slash .hv-26__link:hover::before { transform: scaleX(1); }

/* ── 5. Radial Spotlight ── */
.hv-26__nav--spotlight .hv-26__link::before {
  background: radial-gradient(ellipse at center, rgba(124,106,247,.7) 0%, transparent 72%);
  transform: scale(0);
  border-radius: 0;
  opacity: 0;
}
.hv-26__nav--spotlight .hv-26__link:hover { color: #fff; }
.hv-26__nav--spotlight .hv-26__link:hover::before { transform: scale(2); opacity: 1; }

/* ── 6. Invert Blend ── */
.hv-26__nav--invert {
  isolation: isolate;
}
.hv-26__nav--invert .hv-26__link {
  color: #fff;
  mix-blend-mode: difference;
}
.hv-26__nav--invert .hv-26__link::before {
  background: #fff;
  transform: scaleX(0);
  transform-origin: left;
  border-radius: 4px;
  mix-blend-mode: normal;
}
.hv-26__nav--invert .hv-26__link:hover::before { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  .hv-26__link::before { transition: none !important; }
}
```

### 27. CSS Strikethrough Hover Link Effect

**Type:** Pure CSS
**Description:** Links that animate a strikethrough line across the text on hover — six creative strikethrough styles including wavy, dotted, and multi-pass.

**HTML:**
```html
<div class="hv-27">
  <p class="hv-27__label">Strikethrough Hover Links — 6 Styles</p>

  <div class="hv-27__group">
    <a class="hv-27__link hv-27__link--solid" href="#">Solid Strike</a>
    <a class="hv-27__link hv-27__link--thin" href="#">Hair-thin Strike</a>
    <a class="hv-27__link hv-27__link--thick" href="#">Chunky Strike</a>
  </div>

  <div class="hv-27__group">
    <a class="hv-27__link hv-27__link--wavy" href="#">Wavy Strike</a>
    <a class="hv-27__link hv-27__link--dashed" href="#">Dashed Strike</a>
    <a class="hv-27__link hv-27__link--double" href="#">Double Strike</a>
  </div>
</div>
```

**CSS:**
```css
.hv-27,
.hv-27 *,
.hv-27 *::before,
.hv-27 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.hv-27 {
  --st-color: #e05;
  --st-thickness: 2px;
  font-family: system-ui, sans-serif;
  background: #0c0c0f;
  padding: 3rem 2rem;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  align-items: center;
  justify-content: center;
}
.hv-27__label {
  color: #444;
  font-size: .72rem;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.hv-27__group {
  display: flex;
  gap: 3rem;
  flex-wrap: wrap;
  justify-content: center;
}
.hv-27__link {
  color: #ddd;
  text-decoration: none;
  font-size: 1.35rem;
  font-weight: 600;
  position: relative;
  transition: color .25s;
}

/* Shared ::after base */
.hv-27__link::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  background: var(--st-color);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .32s cubic-bezier(.4,0,.2,1);
}

/* ── 1. Solid Strike ── */
.hv-27__link--solid::after {
  top: 50%; height: var(--st-thickness);
  margin-top: calc(var(--st-thickness) / -2);
}
.hv-27__link--solid:hover::after { transform: scaleX(1); }
.hv-27__link--solid:hover { color: #888; }

/* ── 2. Hair-thin ── */
.hv-27__link--thin::after {
  top: 50%; height: 1px;
  margin-top: -.5px;
  background: #fff;
  opacity: .7;
}
.hv-27__link--thin:hover::after { transform: scaleX(1); }
.hv-27__link--thin:hover { color: #666; }

/* ── 3. Chunky Strike ── */
.hv-27__link--thick::after {
  top: 44%; height: 6px;
  margin-top: -3px;
  border-radius: 3px;
  background: #f7a600;
  opacity: .85;
}
.hv-27__link--thick:hover::after { transform: scaleX(1); }
.hv-27__link--thick:hover { color: #f7a600; }

/* ── 4. Wavy Strike ── */
.hv-27__link--wavy::after {
  top: 54%; height: 4px;
  background:
    radial-gradient(ellipse 3px 2px at 3px 2px, #e05 100%, transparent) 0/6px 4px repeat-x,
    radial-gradient(ellipse 3px 2px at 3px 0px, transparent 100%, #e05) 3px/6px 4px repeat-x;
  background-color: transparent;
}
.hv-27__link--wavy:hover::after { transform: scaleX(1); }
.hv-27__link--wavy:hover { color: #e05; }

/* ── 5. Dashed Strike ── */
.hv-27__link--dashed::after {
  top: 50%; height: 2px;
  margin-top: -1px;
  background: repeating-linear-gradient(
    90deg,
    #7c6af7 0, #7c6af7 6px,
    transparent 6px, transparent 10px
  );
}
.hv-27__link--dashed:hover::after { transform: scaleX(1); }
.hv-27__link--dashed:hover { color: #7c6af7; }

/* ── 6. Double Strike ── */
.hv-27__link--double::before,
.hv-27__link--double::after {
  content: '';
  position: absolute;
  left: 0; width: 100%;
  height: 1.5px;
  background: #5cf;
  transform: scaleX(0);
}
.hv-27__link--double::before {
  top: 42%;
  transform-origin: right;
  transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.hv-27__link--double::after {
  top: 56%;
  transform-origin: left;
  transition: transform .3s cubic-bezier(.4,0,.2,1) .06s;
}
.hv-27__link--double:hover::before,
.hv-27__link--double:hover::after { transform: scaleX(1); }
.hv-27__link--double:hover { color: #5cf; }

@media (prefers-reduced-motion: reduce) {
  .hv-27__link::before,
  .hv-27__link::after { transition: none !important; }
}
```

### 28. CSS Inline Word Swap Hover Effect

**Type:** Pure CSS
**Description:** Text elements where hovering swaps out a word or phrase with an alternate, animated via clip-path, translateY, or opacity transitions — six swap styles.

**HTML:**
```html
<div class="hv-28">
  <p class="hv-28__label">Inline Word Swap — 6 Styles</p>

  <div class="hv-28__row">
    <a class="hv-28__link hv-28__link--slide-up" href="#" aria-label="Design Systems">
      <span class="hv-28__word hv-28__word--out">Design</span>
      <span class="hv-28__word hv-28__word--in" aria-hidden="true">Systems</span>
    </a>
    <span class="hv-28__style">Slide Up</span>
  </div>

  <div class="hv-28__row">
    <a class="hv-28__link hv-28__link--clip" href="#" aria-label="Make it Work">
      <span class="hv-28__word hv-28__word--out">Make it</span>
      <span class="hv-28__word hv-28__word--in" aria-hidden="true">Work</span>
    </a>
    <span class="hv-28__style">Clip Reveal</span>
  </div>

  <div class="hv-28__row">
    <a class="hv-28__link hv-28__link--fade" href="#" aria-label="Start Now">
      <span class="hv-28__word hv-28__word--out">Start</span>
      <span class="hv-28__word hv-28__word--in" aria-hidden="true">Now</span>
    </a>
    <span class="hv-28__style">Fade Cross</span>
  </div>

  <div class="hv-28__row">
    <a class="hv-28__link hv-28__link--scale" href="#" aria-label="Build Fast">
      <span class="hv-28__word hv-28__word--out">Build</span>
      <span class="hv-28__word hv-28__word--in" aria-hidden="true">Fast</span>
    </a>
    <span class="hv-28__style">Scale In</span>
  </div>

  <div class="hv-28__row">
    <a class="hv-28__link hv-28__link--blur" href="#" aria-label="Ship Ship">
      <span class="hv-28__word hv-28__word--out">Ship</span>
      <span class="hv-28__word hv-28__word--in" aria-hidden="true">Ship</span>
    </a>
    <span class="hv-28__style">Blur Swap</span>
  </div>

  <div class="hv-28__row">
    <a class="hv-28__link hv-28__link--rotate" href="#" aria-label="Create Iterate">
      <span class="hv-28__word hv-28__word--out">Create</span>
      <span class="hv-28__word hv-28__word--in" aria-hidden="true">Iterate</span>
    </a>
    <span class="hv-28__style">Flip Down</span>
  </div>
</div>
```

**CSS:**
```css
.hv-28,
.hv-28 *,
.hv-28 *::before,
.hv-28 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.hv-28 {
  --swap-color: #7c6af7;
  font-family: system-ui, sans-serif;
  background: #0b0b0e;
  padding: 3rem 2rem;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: flex-start;
  max-width: 600px;
  margin: 0 auto;
}
.hv-28__label {
  color: #444;
  font-size: .72rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  align-self: center;
}
.hv-28__row {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.hv-28__style {
  color: #3a3a50;
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  min-width: 90px;
}
.hv-28__link {
  text-decoration: none;
  font-size: 1.6rem;
  font-weight: 700;
  position: relative;
  display: inline-block;
  overflow: hidden;
  min-width: 8ch;
  height: 1.2em;
  line-height: 1.2;
  vertical-align: bottom;
}
.hv-28__word {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  white-space: nowrap;
  line-height: inherit;
}

/* ── 1. Slide Up ── */
.hv-28__link--slide-up .hv-28__word--out { color: #ccc; transition: transform .3s cubic-bezier(.4,0,.2,1); }
.hv-28__link--slide-up .hv-28__word--in  { color: var(--swap-color); transform: translateY(100%); transition: transform .3s cubic-bezier(.4,0,.2,1); }
.hv-28__link--slide-up:hover .hv-28__word--out { transform: translateY(-100%); }
.hv-28__link--slide-up:hover .hv-28__word--in  { transform: translateY(0); }

/* ── 2. Clip Reveal ── */
.hv-28__link--clip .hv-28__word--out { color: #ccc; transition: clip-path .3s cubic-bezier(.4,0,.2,1); clip-path: inset(0 0 0 0); }
.hv-28__link--clip .hv-28__word--in  { color: var(--swap-color); clip-path: inset(0 100% 0 0); transition: clip-path .3s cubic-bezier(.4,0,.2,1); }
.hv-28__link--clip:hover .hv-28__word--out { clip-path: inset(0 0 0 100%); }
.hv-28__link--clip:hover .hv-28__word--in  { clip-path: inset(0 0 0 0); }

/* ── 3. Fade Cross ── */
.hv-28__link--fade .hv-28__word--out { color: #ccc; transition: opacity .25s; }
.hv-28__link--fade .hv-28__word--in  { color: var(--swap-color); opacity: 0; transition: opacity .25s .1s; }
.hv-28__link--fade:hover .hv-28__word--out { opacity: 0; }
.hv-28__link--fade:hover .hv-28__word--in  { opacity: 1; }

/* ── 4. Scale In ── */
.hv-28__link--scale .hv-28__word--out { color: #ccc; transition: opacity .25s, transform .25s; }
.hv-28__link--scale .hv-28__word--in  { color: var(--swap-color); opacity: 0; transform: scale(.6); transition: opacity .3s .05s, transform .3s .05s cubic-bezier(.34,1.56,.64,1); }
.hv-28__link--scale:hover .hv-28__word--out { opacity: 0; transform: scale(1.3); }
.hv-28__link--scale:hover .hv-28__word--in  { opacity: 1; transform: scale(1); }

/* ── 5. Blur Swap ── */
.hv-28__link--blur .hv-28__word--out { color: #ccc; transition: filter .3s, opacity .3s; }
.hv-28__link--blur .hv-28__word--in  { color: var(--swap-color); filter: blur(8px); opacity: 0; transition: filter .3s .05s, opacity .3s .05s; }
.hv-28__link--blur:hover .hv-28__word--out { filter: blur(8px); opacity: 0; }
.hv-28__link--blur:hover .hv-28__word--in  { filter: blur(0); opacity: 1; }

/* ── 6. Flip Down ── */
.hv-28__link--rotate { perspective: 300px; }
.hv-28__link--rotate .hv-28__word--out { color: #ccc; transition: transform .35s cubic-bezier(.4,0,.2,1), opacity .25s; transform-origin: bottom; }
.hv-28__link--rotate .hv-28__word--in  { color: var(--swap-color); transform: rotateX(-90deg); transform-origin: top; opacity: 0; transition: transform .35s cubic-bezier(.4,0,.2,1) .05s, opacity .2s .05s; }
.hv-28__link--rotate:hover .hv-28__word--out { transform: rotateX(90deg); opacity: 0; }
.hv-28__link--rotate:hover .hv-28__word--in  { transform: rotateX(0); opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .hv-28__word { transition: none !important; }
}
```

### 29. CSS Dot Trail Cursor Hover Effect

**Type:** CSS + JS
**Description:** A trail of fading dot particles follows the cursor inside a container — four trail styles including color rainbow, size decay, and comet tail.

**HTML:**
```html
<div class="hv-29">
  <p class="hv-29__label">Dot Trail Cursor — 4 Styles</p>
  <div class="hv-29__grid">

    <div class="hv-29__zone hv-29__zone--classic" data-trail="classic">
      <span class="hv-29__hint">Classic Fade</span>
    </div>

    <div class="hv-29__zone hv-29__zone--rainbow" data-trail="rainbow">
      <span class="hv-29__hint">Rainbow</span>
    </div>

    <div class="hv-29__zone hv-29__zone--comet" data-trail="comet">
      <span class="hv-29__hint">Comet Tail</span>
    </div>

    <div class="hv-29__zone hv-29__zone--sparkle" data-trail="sparkle">
      <span class="hv-29__hint">Sparkle</span>
    </div>

  </div>
</div>
```

**CSS:**
```css
.hv-29,
.hv-29 *,
.hv-29 *::before,
.hv-29 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.hv-29 {
  font-family: system-ui, sans-serif;
  background: #080810;
  padding: 2rem;
  min-height: 100vh;
  user-select: none;
}
.hv-29__label {
  text-align: center;
  color: #444;
  font-size: .72rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}
.hv-29__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  max-width: 700px;
  margin: 0 auto;
}
.hv-29__zone {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  aspect-ratio: 4/3;
  border: 1px solid #1a1a2a;
  cursor: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hv-29__zone--classic  { background: #0d0d18; }
.hv-29__zone--rainbow  { background: #0d0d18; }
.hv-29__zone--comet    { background: #0a0a14; }
.hv-29__zone--sparkle  { background: #0c0c18; }
.hv-29__hint {
  color: #2a2a40;
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  pointer-events: none;
}

/* ── Dot base ── */
.hv-29__dot {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  will-change: transform, opacity;
}

/* ── Classic: white dots fade & shrink ── */
@keyframes hv-29-classic {
  0%   { opacity: .9; transform: translate(-50%,-50%) scale(1); }
  100% { opacity: 0;  transform: translate(-50%,-50%) scale(0); }
}
.hv-29__zone--classic .hv-29__dot {
  width: 8px; height: 8px;
  background: #fff;
  animation: hv-29-classic .6s ease-out forwards;
}

/* ── Rainbow: hue-rotated dots ── */
@keyframes hv-29-rainbow {
  0%   { opacity: 1; transform: translate(-50%,-50%) scale(1.1); }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(0.1); }
}
.hv-29__zone--rainbow .hv-29__dot {
  width: 10px; height: 10px;
  animation: hv-29-rainbow .7s ease-out forwards;
  /* background set inline via JS */
}

/* ── Comet: elongated fade to right ── */
@keyframes hv-29-comet {
  0%   { opacity: 1; transform: translate(-50%,-50%) scale(1, 1); }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(3, .3); }
}
.hv-29__zone--comet .hv-29__dot {
  width: 12px; height: 4px;
  background: linear-gradient(90deg, rgba(100,180,255,0), rgba(100,180,255,1));
  border-radius: 2px;
  animation: hv-29-comet .5s ease-out forwards;
}

/* ── Sparkle: star-like burst ── */
@keyframes hv-29-sparkle {
  0%   { opacity: 1; transform: translate(-50%,-50%) scale(0) rotate(0deg); }
  60%  { opacity: 1; transform: translate(-50%,-50%) scale(1.3) rotate(60deg); }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(0.4) rotate(90deg); }
}
.hv-29__zone--sparkle .hv-29__dot {
  width: 10px; height: 10px;
  clip-path: polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
  background: #f7d060;
  animation: hv-29-sparkle .65s ease-out forwards;
}

@media (prefers-reduced-motion: reduce) {
  .hv-29__dot { animation-duration: .01ms !important; }
}
```

**JS:**
```js
(function () {
  const zones = document.querySelectorAll('.hv-29__zone');
  const RAINBOW = ['#ff6b6b','#ffa94d','#ffd43b','#69db7c','#4dabf7','#cc5de8','#f783ac'];
  let hueIndex = 0;
  let rafId = null;
  let pendingZone = null;
  let pendingX = 0;
  let pendingY = 0;

  function spawnDot(zone, x, y) {
    const trail = zone.dataset.trail;
    const dot = document.createElement('span');
    dot.className = 'hv-29__dot';
    dot.style.left = x + 'px';
    dot.style.top  = y + 'px';
    if (trail === 'rainbow') {
      dot.style.background = RAINBOW[hueIndex % RAINBOW.length];
      hueIndex++;
    }
    zone.appendChild(dot);
    dot.addEventListener('animationend', () => dot.remove(), { once: true });
  }

  function onMove(e) {
    const zone = e.currentTarget;
    const rect = zone.getBoundingClientRect();
    pendingX = e.clientX - rect.left;
    pendingY = e.clientY - rect.top;
    pendingZone = zone;
    if (!rafId) {
      rafId = requestAnimationFrame(() => {
        if (pendingZone) spawnDot(pendingZone, pendingX, pendingY);
        rafId = null;
      });
    }
  }

  zones.forEach(zone => {
    zone.addEventListener('mousemove', onMove);
    zone.addEventListener('mouseleave', () => { pendingZone = null; });
  });
})();
```

### 30. CSS Magnetic Cursor Pull Hover Effect

**Type:** CSS + JS
**Description:** Buttons and icons that magnetically attract to the cursor when nearby, snapping back smoothly when the cursor leaves — four magnetic element types.

**HTML:**
```html
<div class="hv-30">
  <p class="hv-30__label">Magnetic Cursor Pull — 4 Types</p>
  <div class="hv-30__grid">

    <div class="hv-30__wrap">
      <button class="hv-30__btn hv-30__btn--primary hv-30__magnet" data-strength="0.35" data-radius="80">
        <span class="hv-30__btn-inner hv-30__magnet-inner" data-strength="0.55">Get Started</span>
      </button>
      <span class="hv-30__caption">Primary CTA</span>
    </div>

    <div class="hv-30__wrap">
      <button class="hv-30__btn hv-30__btn--outline hv-30__magnet" data-strength="0.4" data-radius="90">
        <span class="hv-30__btn-inner hv-30__magnet-inner" data-strength="0.6">Learn More</span>
      </button>
      <span class="hv-30__caption">Outline Button</span>
    </div>

    <div class="hv-30__wrap">
      <div class="hv-30__icon-btn hv-30__magnet" data-strength="0.5" data-radius="70">
        <span class="hv-30__magnet-inner" data-strength="0.75">★</span>
      </div>
      <span class="hv-30__caption">Icon Pull</span>
    </div>

    <div class="hv-30__wrap">
      <a class="hv-30__pill hv-30__magnet" href="#" data-strength="0.3" data-radius="100">
        <span class="hv-30__magnet-inner" data-strength="0.5">View Project →</span>
      </a>
      <span class="hv-30__caption">Pill Link</span>
    </div>

  </div>
</div>
```

**CSS:**
```css
.hv-30,
.hv-30 *,
.hv-30 *::before,
.hv-30 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.hv-30 {
  font-family: system-ui, sans-serif;
  background: #090912;
  padding: 3rem 2rem;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}
.hv-30__label {
  color: #444;
  font-size: .72rem;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.hv-30__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3.5rem 4rem;
  place-items: center;
  padding: 2rem;
}
.hv-30__wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.hv-30__caption {
  color: #333;
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* Magnetic elements */
.hv-30__magnet {
  will-change: transform;
  transition: transform .45s cubic-bezier(.23,1,.32,1);
  cursor: pointer;
}
.hv-30__magnet-inner {
  display: inline-block;
  will-change: transform;
  transition: transform .45s cubic-bezier(.23,1,.32,1);
  pointer-events: none;
}

/* Button styles */
.hv-30__btn {
  background: #5b4fcf;
  color: #fff;
  border: none;
  border-radius: 50px;
  padding: .9rem 2.4rem;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .02em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 28px rgba(91,79,207,.4);
}
.hv-30__btn--outline {
  background: transparent;
  border: 2px solid #5b4fcf;
  color: #a99ef7;
  box-shadow: none;
}
.hv-30__btn--outline:hover { box-shadow: 0 6px 28px rgba(91,79,207,.25); }

/* Icon button */
.hv-30__icon-btn {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7c6af7, #f764a8);
  color: #fff;
  font-size: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 24px rgba(124,106,247,.4);
}

/* Pill link */
.hv-30__pill {
  display: inline-flex;
  align-items: center;
  padding: .65rem 1.8rem;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 50px;
  color: #ccc;
  text-decoration: none;
  font-size: .9rem;
  backdrop-filter: blur(6px);
  transition: transform .45s cubic-bezier(.23,1,.32,1),
              background .3s, border-color .3s;
}
.hv-30__pill:hover {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.22);
  color: #fff;
}

@media (max-width: 500px) { .hv-30__grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .hv-30__magnet,
  .hv-30__magnet-inner { transition: none !important; }
}
```

**JS:**
```js
(function () {
  if (window.matchMedia('(pointer: coarse)').matches) return;

  const magnets = document.querySelectorAll('.hv-30__magnet');

  function handleMove(e, el) {
    const rect = el.getBoundingClientRect();
    const cx = rect.left + rect.width  / 2;
    const cy = rect.top  + rect.height / 2;
    const dx = e.clientX - cx;
    const dy = e.clientY - cy;
    const dist = Math.sqrt(dx * dx + dy * dy);
    const radius   = parseFloat(el.dataset.radius)   || 80;
    const strength = parseFloat(el.dataset.strength)  || 0.35;

    if (dist < radius) {
      const pull = (1 - dist / radius);
      const tx = dx * strength * pull;
      const ty = dy * strength * pull;
      el.style.transform = `translate(${tx}px, ${ty}px)`;

      const inner = el.querySelector('.hv-30__magnet-inner');
      if (inner) {
        const is = parseFloat(inner.dataset.strength) || 0.5;
        inner.style.transform = `translate(${dx * is * pull}px, ${dy * is * pull}px)`;
      }
    } else {
      el.style.transform = '';
      const inner = el.querySelector('.hv-30__magnet-inner');
      if (inner) inner.style.transform = '';
    }
  }

  function handleLeave(el) {
    el.style.transform = '';
    const inner = el.querySelector('.hv-30__magnet-inner');
    if (inner) inner.style.transform = '';
  }

  magnets.forEach(el => {
    document.addEventListener('mousemove', e => handleMove(e, el));
    el.addEventListener('mouseleave', () => handleLeave(el));
  });
})();
```

---
## 16 CSS Image Gallery Designs

URL: https://codefronts.com/snippets/css-image-gallery/
Description: 16 hand-coded CSS image gallery designs with live demos — CSS columns masonry grid, click-to-zoom lightbox overlay with focus trap, infinite scroll filmstrip, polaroid stack, tilt parallax cards with mousemove tracking, magazine grid layout, mosaic zoom hover, metro tile grid, perspective depth stack, diagonal clip-path slice reveal, glassmorphism hover cards, 3D cube viewer with perspective rotateY navigation, scattered random-rotation polaroid wall, Ken Burns auto-advancing slideshow, and accordion image gallery. 7 pure CSS + 9 with a tiny vanilla JS snippet — no framework. Every photo is an illustrated inline SVG scene (not a gradient placeholder), prefers-reduced-motion honoured, MIT licensed.
Demo count: 16

### 01. CSS Masonry Image Gallery

**Type:** Pure CSS
**Description:** A three-column CSS-only masonry grid where each card reveals a rich SVG-illustrated scene on hover, with a staggered caption fade.

**HTML:**
```html
<div class="ig-01">
  <div class="ig-01__grid">

    <!-- TALL 1: Thunderstorm over savanna -->
    <figure class="ig-01__card ig-01__card--tall">
      <svg class="ig-01__scene" viewBox="0 0 300 400" xmlns="http://www.w3.org/2000/svg">
        <defs>
          <linearGradient id="sky1" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stop-color="#1a0a2e"/>
            <stop offset="40%" stop-color="#3d1a5c"/>
            <stop offset="70%" stop-color="#7a3a20"/>
            <stop offset="100%" stop-color="#c45a10"/>
          </linearGradient>
          <filter id="lglow"><feGaussianBlur stdDeviation="6"/></filter>
          <filter id="lglow2"><feGaussianBlur stdDeviation="2"/></filter>
        </defs>
        <rect width="300" height="400" fill="url(#sky1)"/>
        <!-- Storm clouds -->
        <ellipse cx="150" cy="80" rx="160" ry="70" fill="#1a1020" opacity=".95"/>
        <ellipse cx="80" cy="60" rx="100" ry="55" fill="#12080e" opacity=".9"/>
        <ellipse cx="230" cy="70" rx="90" ry="50" fill="#150c18" opacity=".85"/>
        <ellipse cx="150" cy="50" rx="130" ry="40" fill="#0d0810" opacity=".9"/>
        <!-- Lightning bolt -->
        <g filter="url(#lglow)">
          <polyline points="170,90 155,155 170,155 148,230" stroke="#ffffa0" stroke-width="6" fill="none" opacity=".9"/>
        </g>
        <polyline points="170,90 155,155 170,155 148,230" stroke="#fff" stroke-width="2" fill="none"/>
        <!-- Second smaller lightning -->
        <g filter="url(#lglow2)" opacity=".6">
          <polyline points="230,100 220,145 228,145 215,185" stroke="#c0d8ff" stroke-width="3" fill="none"/>
        </g>
        <!-- Horizon glow -->
        <ellipse cx="150" cy="290" rx="200" ry="45" fill="#c45a10" opacity=".4" filter="url(#lglow2)"/>
        <!-- Savanna silhouette -->
        <rect x="0" y="295" width="300" height="105" fill="#0d0804"/>
        <!-- Acacia trees -->
        <g fill="#0a0602">
          <rect x="25" y="260" width="5" height="40"/>
          <ellipse cx="27" cy="255" rx="22" ry="8"/>
          <rect x="80" y="250" width="6" height="50"/>
          <ellipse cx="83" cy="244" rx="28" ry="10"/>
          <rect x="160" y="258" width="5" height="42"/>
          <ellipse cx="162" cy="252" rx="20" ry="7"/>
          <rect x="230" y="255" width="6" height="45"/>
          <ellipse cx="233" cy="248" rx="25" ry="9"/>
          <rect x="270" y="265" width="4" height="35"/>
          <ellipse cx="272" cy="260" rx="16" ry="6"/>
        </g>
        <!-- Animals silhouettes (wildebeest) -->
        <g fill="#080502" transform="translate(40,285)">
          <ellipse cx="0" cy="5" rx="8" ry="4"/><rect x="-2" y="7" width="2" height="6"/><rect x="3" y="7" width="2" height="6"/>
          <ellipse cx="20" cy="5" rx="7" ry="3.5"/><rect x="18" y="7" width="2" height="5"/><rect x="23" y="7" width="2" height="5"/>
          <ellipse cx="38" cy="4" rx="9" ry="4"/><rect x="36" y="7" width="2" height="6"/><rect x="41" y="7" width="2" height="6"/>
          <ellipse cx="140" cy="5" rx="7" ry="3.5"/><rect x="138" y="7" width="2" height="5"/><rect x="143" y="7" width="2" height="5"/>
          <ellipse cx="158" cy="4" rx="8" ry="4"/><rect x="156" y="7" width="2" height="6"/><rect x="161" y="7" width="2" height="6"/>
        </g>
      </svg>
      <figcaption class="ig-01__caption"><span>Storm Over Serengeti</span><small>Wildlife · Tanzania</small></figcaption>
    </figure>

    <!-- SHORT 1: Cherry blossoms -->
    <figure class="ig-01__card ig-01__card--short">
      <svg class="ig-01__scene" viewBox="0 0 300 225" xmlns="http://www.w3.org/2000/svg">
        <defs>
          <linearGradient id="sky2" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stop-color="#a8d8f0"/>
            <stop offset="50%" stop-color="#e8c8d8"/>
            <stop offset="100%" stop-color="#f5e0e8"/>
          </linearGradient>
          <filter id="psoft"><feGaussianBlur stdDeviation="1.5"/></filter>
        </defs>
        <rect width="300" height="225" fill="url(#sky2)"/>
        <!-- Sun disc -->
        <circle cx="200" cy="55" r="28" fill="#fff0c0" opacity=".8"/>
        <circle cx="200" cy="55" r="20" fill="#fff8d0" opacity=".9"/>
        <!-- Tree trunks -->
        <g fill="#3d1a0a">
          <rect x="55" y="90" width="14" height="135" rx="5"/>
          <rect x="180" y="100" width="11" height="125" rx="4"/>
          <rect x="240" y="110" width="9" height="115" rx="3"/>
        </g>
        <!-- Branches -->
        <g stroke="#3d1a0a" stroke-width="5" fill="none" stroke-linecap="round">
          <path d="M62,120 Q30,90 10,70"/>
          <path d="M62,120 Q90,80 120,65"/>
          <path d="M62,130 Q85,120 110,115"/>
          <path d="M186,125 Q160,95 140,80"/>
          <path d="M186,125 Q210,100 240,90"/>
        </g>
        <!-- Blossom clusters -->
        <g filter="url(#psoft)">
          <!-- Tree 1 blossoms -->
          <circle cx="10" cy="70" r="22" fill="#f0b0c8" opacity=".85"/>
          <circle cx="40" cy="55" r="28" fill="#f8c8d8" opacity=".9"/>
          <circle cx="80" cy="50" r="30" fill="#fad4e0" opacity=".88"/>
          <circle cx="115" cy="62" r="24" fill="#f0b0c8" opacity=".82"/>
          <circle cx="62" cy="85" r="20" fill="#f8c8d8" opacity=".75"/>
          <circle cx="108" cy="110" r="18" fill="#fad4e0" opacity=".7"/>
          <!-- Tree 2 -->
          <circle cx="140" cy="78" r="20" fill="#f0b0c8" opacity=".8"/>
          <circle cx="168" cy="68" r="25" fill="#f8c8d8" opacity=".85"/>
          <circle cx="200" cy="65" r="22" fill="#fad4e0" opacity=".8"/>
          <circle cx="225" cy="75" r="20" fill="#f0b0c8" opacity=".78"/>
          <!-- Tree 3 -->
          <circle cx="245" cy="90" r="18" fill="#f8c8d8" opacity=".8"/>
          <circle cx="270" cy="82" r="22" fill="#fad4e0" opacity=".82"/>
          <circle cx="290" cy="95" r="16" fill="#f0b0c8" opacity=".75"/>
        </g>
        <!-- Falling petals -->
        <g fill="#f8c8d8" opacity=".7">
          <ellipse cx="50" cy="140" rx="4" ry="2.5" transform="rotate(20,50,140)"/>
          <ellipse cx="130" cy="155" rx="3.5" ry="2" transform="rotate(-15,130,155)"/>
          <ellipse cx="180" cy="135" rx="4" ry="2.5" transform="rotate(35,180,135)"/>
          <ellipse cx="260" cy="150" rx="3" ry="2" transform="rotate(-25,260,150)"/>
          <ellipse cx="95" cy="170" rx="4" ry="2.5" transform="rotate(10,95,170)"/>
          <ellipse cx="220" cy="165" rx="3.5" ry="2" transform="rotate(40,220,165)"/>
        </g>
        <!-- Ground / path -->
        <ellipse cx="150" cy="225" rx="180" ry="30" fill="#e8c8d0" opacity=".5"/>
        <rect x="0" y="200" width="300" height="25" fill="#d4b0b8" opacity=".4"/>
        <!-- Petals on ground -->
        <g fill="#f0c0d0" opacity=".6">
          <ellipse cx="30" cy="215" rx="5" ry="2.5" transform="rotate(15,30,215)"/>
          <ellipse cx="100" cy="218" rx="4" ry="2" transform="rotate(-20,100,218)"/>
          <ellipse cx="170" cy="212" rx="5.5" ry="2.5" transform="rotate(30,170,212)"/>
          <ellipse cx="250" cy="216" rx="4" ry="2" transform="rotate(-10,250,216)"/>
        </g>
      </svg>
      <figcaption class="ig-01__caption"><span>Hanami Season</span><small>Botanical · Kyoto</small></figcaption>
    </figure>

    <!-- MID 1: Deep cave / crystal -->
    <figure class="ig-01__card ig-01__card--mid">
      <svg class="ig-01__scene" viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
        <defs>
          <radialGradient id="cavebg" cx="50%" cy="40%" r="60%">
            <stop offset="0%" stop-color="#1a2a5e"/>
            <stop offset="50%" stop-color="#0a1030"/>
            <stop offset="100%" stop-color="#050810"/>
          </radialGradient>
          <filter id="cglow"><feGaussianBlur stdDeviation="5"/></filter>
          <filter id="cglow2"><feGaussianBlur stdDeviation="2"/></filter>
        </defs>
        <rect width="300" height="300" fill="url(#cavebg)"/>
        <!-- Cave opening glow -->
        <ellipse cx="150" cy="130" rx="80" ry="60" fill="#2040a0" opacity=".3" filter="url(#cglow)"/>
        <!-- Crystal formations -->
        <g opacity=".9">
          <!-- Left cluster -->
          <polygon points="30,300 45,200 55,300" fill="#4060c0" opacity=".7"/>
          <polygon points="50,300 62,210 72,300" fill="#5070d0" opacity=".8"/>
          <polygon points="20,300 38,220 48,300" fill="#3050b0" opacity=".6"/>
          <polygon points="65,300 75,230 84,300" fill="#6080e0" opacity=".75"/>
          <!-- Right cluster -->
          <polygon points="220,300 232,195 245,300" fill="#4060c0" opacity=".7"/>
          <polygon points="240,300 250,215 260,300" fill="#5575d5" opacity=".8"/>
          <polygon points="255,300 265,225 278,300" fill="#3a55b5" opacity=".65"/>
          <polygon points="270,300 278,240 286,300" fill="#6080e0" opacity=".7"/>
          <!-- Center top crystals -->
          <polygon points="120,300 130,140 142,300" fill="#5878e0" opacity=".6"/>
          <polygon points="145,300 155,120 168,300" fill="#7090f0" opacity=".7"/>
          <polygon points="168,300 178,145 188,300" fill="#5070d0" opacity=".6"/>
        </g>
        <!-- Crystal glow highlights -->
        <g filter="url(#cglow2)">
          <line x1="155" y1="120" x2="155" y2="300" stroke="#a0c0ff" stroke-width="2" opacity=".4"/>
          <line x1="130" y1="140" x2="130" y2="300" stroke="#80a0ff" stroke-width="1.5" opacity=".35"/>
          <line x1="178" y1="145" x2="178" y2="300" stroke="#90b0ff" stroke-width="1.5" opacity=".35"/>
        </g>
        <!-- Cave ceiling -->
        <path d="M0,0 Q50,40 80,20 Q110,50 150,30 Q190,55 220,25 Q260,45 300,20 L300,0 Z" fill="#050810"/>
        <!-- Stalactites -->
        <g fill="#0a1225">
          <polygon points="30,20 40,80 50,20"/>
          <polygon points="80,15 88,65 96,15"/>
          <polygon points="130,20 138,70 146,20"/>
          <polygon points="165,18 172,60 180,18"/>
          <polygon points="210,22 218,72 226,22"/>
          <polygon points="255,16 262,58 270,16"/>
        </g>
        <!-- Glow light source at center -->
        <circle cx="152" cy="155" r="25" fill="#3060c0" opacity=".35" filter="url(#cglow)"/>
        <circle cx="152" cy="155" r="8" fill="#8090f0" opacity=".5"/>
        <!-- Reflection pool at bottom -->
        <ellipse cx="150" cy="285" rx="100" ry="15" fill="#3060c0" opacity=".25"/>
        <ellipse cx="150" cy="285" rx="60" ry="8" fill="#5080e0" opacity=".2"/>
      </svg>
      <figcaption class="ig-01__caption"><span>Crystal Cave</span><small>Geology · Iceland</small></figcaption>
    </figure>

    <!-- TALL 2: Lavender field sunset -->
    <figure class="ig-01__card ig-01__card--tall">
      <svg class="ig-01__scene" viewBox="0 0 300 400" xmlns="http://www.w3.org/2000/svg">
        <defs>
          <linearGradient id="sky3" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stop-color="#ff6b35"/>
            <stop offset="30%" stop-color="#f7a44a"/>
            <stop offset="55%" stop-color="#ffd580"/>
            <stop offset="75%" stop-color="#a85cb8"/>
            <stop offset="100%" stop-color="#6a3a8a"/>
          </linearGradient>
          <filter id="sf"><feGaussianBlur stdDeviation="4"/></filter>
        </defs>
        <rect width="300" height="400" fill="url(#sky3)"/>
        <!-- Sun -->
        <circle cx="150" cy="155" r="35" fill="#fff5c0" opacity=".9"/>
        <circle cx="150" cy="155" r="28" fill="#ffec90" opacity=".95"/>
        <!-- Sun rays -->
        <g stroke="#ffe070" stroke-width="2" opacity=".3" filter="url(#sf)">
          <line x1="150" y1="100" x2="150" y2="75"/>
          <line x1="195" y1="115" x2="212" y2="98"/>
          <line x1="210" y1="155" x2="235" y2="155"/>
          <line x1="195" y1="195" x2="212" y2="212"/>
          <line x1="150" y1="210" x2="150" y2="235"/>
          <line x1="105" y1="195" x2="88" y2="212"/>
          <line x1="90" y1="155" x2="65" y2="155"/>
          <line x1="105" y1="115" x2="88" y2="98"/>
        </g>
        <!-- Clouds -->
        <g opacity=".6" filter="url(#sf)">
          <ellipse cx="60" cy="90" rx="50" ry="18" fill="#ffcca0"/>
          <ellipse cx="250" cy="105" rx="55" ry="16" fill="#ffb880"/>
          <ellipse cx="160" cy="75" rx="40" ry="14" fill="#ffd0a0"/>
        </g>
        <!-- Distant hills -->
        <path d="M0,240 Q75,210 150,225 Q225,210 300,235 L300,400 L0,400 Z" fill="#5a2870" opacity=".6"/>
        <path d="M0,260 Q80,240 150,250 Q220,240 300,258 L300,400 L0,400 Z" fill="#4a1f60" opacity=".7"/>
        <!-- Lavender rows — perspective converging lines -->
        <g stroke="none">
          <!-- Row fills converging to center vanishing point -->
          <path d="M0,290 L300,270 L300,275 L0,295 Z" fill="#9b59b6" opacity=".9"/>
          <path d="M0,300 L300,278 L300,284 L0,307 Z" fill="#8e44ad" opacity=".85"/>
          <path d="M0,312 L300,287 L300,294 L0,320 Z" fill="#7d3c98" opacity=".88"/>
          <path d="M0,324 L300,297 L300,305 L0,334 Z" fill="#9b59b6" opacity=".9"/>
          <path d="M0,338 L300,308 L300,317 L0,350 Z" fill="#8e44ad" opacity=".88"/>
          <path d="M0,354 L300,320 L300,332 L0,368 Z" fill="#7d3c98" opacity=".85"/>
          <path d="M0,372 L300,336 L300,352 L0,390 Z" fill="#9b59b6" opacity=".9"/>
        </g>
        <!-- Lavender stalks detail (front rows) -->
        <g stroke="#c39bd3" stroke-width="1.2" opacity=".6">
          <line x1="10" y1="375" x2="12" y2="350"/><line x1="25" y1="378" x2="27" y2="352"/>
          <line x1="42" y1="376" x2="44" y2="349"/><line x1="58" y1="374" x2="60" y2="350"/>
          <line x1="75" y1="377" x2="77" y2="351"/><line x1="92" y1="375" x2="94" y2="348"/>
          <line x1="110" y1="376" x2="112" y2="350"/><line x1="128" y1="374" x2="130" y2="348"/>
          <line x1="147" y1="376" x2="149" y2="349"/><line x1="165" y1="375" x2="167" y2="350"/>
          <line x1="183" y1="377" x2="185" y2="351"/><line x1="200" y1="374" x2="202" y2="349"/>
          <line x1="218" y1="376" x2="220" y2="350"/><line x1="236" y1="375" x2="238" y2="348"/>
          <line x1="254" y1="377" x2="256" y2="352"/><line x1="272" y1="374" x2="274" y2="349"/>
          <line x1="288" y1="376" x2="290" y2="350"/>
        </g>
        <!-- Farmhouse silhouette -->
        <g fill="#2a1240">
          <rect x="120" y="255" width="45" height="25"/>
          <polygon points="115,255 150,238 185,255"/>
          <rect x="137" y="265" width="10" height="15"/>
        </g>
        <!-- Lone cypress tree -->
        <g fill="#1a0a30">
          <rect x="218" y="240" width="5" height="35"/>
          <ellipse cx="220" cy="235" rx="8" ry="18"/>
        </g>
      </svg>
      <figcaption class="ig-01__caption"><span>Provence at Dusk</span><small>Landscape · France</small></figcaption>
    </figure>

    <!-- SHORT 2: Coral reef underwater -->
    <figure class="ig-01__card ig-01__card--short">
      <svg class="ig-01__scene" viewBox="0 0 300 225" xmlns="http://www.w3.org/2000/svg">
        <defs>
          <linearGradient id="ocean" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stop-color="#0066aa"/>
            <stop offset="40%" stop-color="#004488"/>
            <stop offset="100%" stop-color="#002255"/>
          </linearGradient>
          <filter id="wf"><feGaussianBlur stdDeviation="2"/></filter>
        </defs>
        <rect width="300" height="225" fill="url(#ocean)"/>
        <!-- Light caustics from above -->
        <g opacity=".25" stroke="#a0e0ff" fill="none">
          <ellipse cx="60" cy="30" rx="18" ry="8" transform="rotate(-20,60,30)"/>
          <ellipse cx="120" cy="20" rx="22" ry="10" transform="rotate(15,120,20)"/>
          <ellipse cx="200" cy="35" rx="16" ry="7" transform="rotate(-10,200,35)"/>
          <ellipse cx="260" cy="25" rx="20" ry="9" transform="rotate(25,260,25)"/>
          <ellipse cx="90" cy="55" rx="14" ry="6" transform="rotate(5,90,55)"/>
          <ellipse cx="180" cy="45" rx="18" ry="7" transform="rotate(-15,180,45)"/>
        </g>
        <!-- Light shafts -->
        <g opacity=".08" fill="#a0e0ff">
          <polygon points="80,0 110,0 160,225 130,225"/>
          <polygon points="170,0 195,0 240,225 215,225"/>
        </g>
        <!-- Sand bottom -->
        <path d="M0,180 Q75,168 150,175 Q225,168 300,178 L300,225 L0,225 Z" fill="#c8a060"/>
        <!-- Coral formations -->
        <!-- Brain coral -->
        <ellipse cx="50" cy="180" rx="28" ry="18" fill="#e06030"/>
        <g stroke="#c05020" stroke-width="1" fill="none" opacity=".6">
          <path d="M28,180 Q40,172 50,180 Q60,188 72,180"/>
          <path d="M30,175 Q42,168 52,175 Q62,182 70,175"/>
          <path d="M32,185 Q44,178 54,185 Q62,192 68,185"/>
        </g>
        <!-- Fan coral -->
        <g stroke="#ff6090" stroke-width="1.5" fill="none">
          <path d="M130,225 Q125,180 120,150 Q115,120 130,100"/>
          <path d="M130,200 Q145,170 155,145 Q162,125 155,105"/>
          <path d="M130,195 Q112,168 108,145 Q106,125 115,108"/>
          <path d="M108,145 L155,145" stroke-width=".8" opacity=".5"/>
          <path d="M112,165 L158,162" stroke-width=".8" opacity=".5"/>
          <path d="M118,185 L152,182" stroke-width=".8" opacity=".5"/>
        </g>
        <!-- Staghorn coral -->
        <g stroke="#f0a050" stroke-width="2.5" fill="none" stroke-linecap="round">
          <line x1="200" y1="225" x2="205" y2="195"/>
          <line x1="205" y1="195" x2="195" y2="175"/><line x1="205" y1="195" x2="215" y2="178"/>
          <line x1="195" y1="175" x2="188" y2="158"/><line x1="195" y1="175" x2="200" y2="160"/>
          <line x1="215" y1="178" x2="210" y2="162"/><line x1="215" y1="178" x2="225" y2="165"/>
          <line x1="220" y1="225" x2="225" y2="192"/>
          <line x1="225" y1="192" x2="218" y2="172"/><line x1="225" y1="192" x2="235" y2="175"/>
        </g>
        <!-- Sea anemone -->
        <g transform="translate(255,185)">
          <ellipse cx="0" cy="8" rx="14" ry="8" fill="#4a1a6a"/>
          <g stroke="#c060e0" stroke-width="1.5" fill="none" stroke-linecap="round">
            <path d="M-8,5 Q-12,-5 -10,-18"/><path d="M-4,3 Q-5,-8 -2,-20"/>
            <path d="M0,2 Q2,-10 3,-22"/><path d="M4,3 Q8,-7 9,-19"/>
            <path d="M8,5 Q14,-3 14,-16"/>
          </g>
        </g>
        <!-- Tropical fish -->
        <g transform="translate(80,100)">
          <ellipse cx="0" cy="0" rx="12" ry="7" fill="#ff6b00"/>
          <polygon points="12,0 20,-6 20,6" fill="#ff6b00"/>
          <line x1="-8" y1="-7" x2="-8" y2="7" stroke="#fff" stroke-width="2"/>
          <line x1="-2" y1="-7" x2="-2" y2="7" stroke="#fff" stroke-width="2"/>
          <circle cx="-8" cy="-1" r="2" fill="#333"/>
        </g>
        <g transform="translate(220,80) scale(.8)">
          <ellipse cx="0" cy="0" rx="12" ry="7" fill="#ffdd00"/>
          <polygon points="12,0 20,-6 20,6" fill="#ffdd00"/>
          <line x1="-4" y1="-7" x2="-4" y2="7" stroke="#1a1a00" stroke-width="2"/>
          <circle cx="-8" cy="-1" r="2" fill="#333"/>
        </g>
        <!-- Sea turtle -->
        <g transform="translate(160,130)">
          <ellipse cx="0" cy="0" rx="16" ry="11" fill="#2d6a4f"/>
          <ellipse cx="0" cy="0" rx="12" ry="8" fill="#40916c" opacity=".8"/>
          <ellipse cx="-14" cy="-3" rx="6" ry="3" fill="#2d6a4f" transform="rotate(-30,-14,-3)"/>
          <ellipse cx="14" cy="-3" rx="6" ry="3" fill="#2d6a4f" transform="rotate(30,14,-3)"/>
          <ellipse cx="-12" cy="5" rx="5" ry="2.5" fill="#2d6a4f" transform="rotate(20,-12,5)"/>
          <ellipse cx="12" cy="5" rx="5" ry="2.5" fill="#2d6a4f" transform="rotate(-20,12,5)"/>
          <ellipse cx="-18" cy="0" rx="5" ry="3" fill="#1b4332"/>
          <circle cx="-21" cy="-1" r="1.5" fill="#333"/>
        </g>
      </svg>
      <figcaption class="ig-01__caption"><span>Coral Triangle</span><small>Marine · Raja Ampat</small></figcaption>
    </figure>

    <!-- MID 2: Milky Way desert -->
    <figure class="ig-01__card ig-01__card--mid">
      <svg class="ig-01__scene" viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
        <defs>
          <radialGradient id="mwbg" cx="50%" cy="30%" r="70%">
            <stop offset="0%" stop-color="#1a0a35"/>
            <stop offset="50%" stop-color="#0d0520"/>
            <stop offset="100%" stop-color="#05020e"/>
          </radialGradient>
          <filter id="mwf"><feGaussianBlur stdDeviation="3"/></filter>
          <filter id="mwf2"><feGaussianBlur stdDeviation="1"/></filter>
        </defs>
        <rect width="300" height="300" fill="url(#mwbg)"/>
        <!-- Milky Way band -->
        <ellipse cx="160" cy="130" rx="180" ry="60" fill="#a080c0" opacity=".12" transform="rotate(-30,160,130)" filter="url(#mwf)"/>
        <ellipse cx="150" cy="125" rx="150" ry="40" fill="#8060b0" opacity=".18" transform="rotate(-30,150,125)" filter="url(#mwf)"/>
        <ellipse cx="145" cy="120" rx="120" ry="28" fill="#c0a0e0" opacity=".15" transform="rotate(-30,145,120)" filter="url(#mwf2)"/>
        <!-- Stars — many tiny -->
        <g fill="#fff">
          <circle cx="20" cy="15" r="1.2" opacity=".9"/><circle cx="45" cy="8" r=".9" opacity=".8"/>
          <circle cx="70" cy="20" r="1.1" opacity=".85"/><circle cx="95" cy="10" r=".8" opacity=".7"/>
          <circle cx="120" cy="18" r="1" opacity=".9"/><circle cx="145" cy="5" r="1.3" opacity=".95"/>
          <circle cx="170" cy="22" r=".9" opacity=".8"/><circle cx="195" cy="12" r="1.1" opacity=".85"/>
          <circle cx="220" cy="20" r=".8" opacity=".75"/><circle cx="245" cy="8" r="1.2" opacity=".9"/>
          <circle cx="270" cy="18" r="1" opacity=".85"/><circle cx="285" cy="5" r=".9" opacity=".8"/>
          <circle cx="10" cy="40" r=".8" opacity=".7"/><circle cx="35" cy="50" r="1" opacity=".85"/>
          <circle cx="60" cy="38" r="1.2" opacity=".9"/><circle cx="88" cy="55" r=".9" opacity=".75"/>
          <circle cx="115" cy="42" r="1.1" opacity=".88"/><circle cx="140" cy="58" r=".8" opacity=".7"/>
          <circle cx="165" cy="48" r="1.3" opacity=".95"/><circle cx="192" cy="35" r=".9" opacity=".8"/>
          <circle cx="218" cy="52" r="1" opacity=".85"/><circle cx="243" cy="42" r="1.2" opacity=".9"/>
          <circle cx="265" cy="55" r=".8" opacity=".75"/><circle cx="290" cy="40" r="1.1" opacity=".88"/>
          <circle cx="25" cy="75" r="1" opacity=".8"/><circle cx="55" cy="80" r=".9" opacity=".75"/>
          <circle cx="80" cy="70" r="1.2" opacity=".9"/><circle cx="105" cy="85" r=".8" opacity=".7"/>
          <circle cx="130" cy="72" r="1.1" opacity=".85"/><circle cx="158" cy="88" r="1" opacity=".82"/>
          <circle cx="185" cy="75" r=".9" opacity=".78"/><circle cx="210" cy="82" r="1.2" opacity=".9"/>
          <circle cx="235" cy="70" r=".8" opacity=".72"/><circle cx="260" cy="85" r="1.1" opacity=".88"/>
          <circle cx="282" cy="72" r="1" opacity=".8"/>
          <!-- Bright stars -->
          <circle cx="50" cy="30" r="2" opacity=".95"/><circle cx="200" cy="55" r="1.8" opacity=".95"/>
          <circle cx="100" cy="25" r="1.7" opacity=".9"/><circle cx="260" cy="35" r="2.1" opacity=".98"/>
          <circle cx="155" cy="60" r="1.9" opacity=".92"/>
        </g>
        <!-- Shooting star -->
        <line x1="220" y1="40" x2="260" y2="20" stroke="rgba(255,255,220,.8)" stroke-width="1.5" stroke-linecap="round"/>
        <circle cx="220" cy="40" r="2" fill="#ffffc0" opacity=".9"/>
        <!-- Desert sand horizon -->
        <path d="M0,220 Q40,210 70,215 Q100,208 130,218 Q160,210 185,215 Q215,208 245,218 Q270,210 300,215 L300,300 L0,300 Z" fill="#c8a060"/>
        <!-- Sand dunes -->
        <path d="M0,235 Q60,218 120,228 Q180,218 240,232 Q270,225 300,228 L300,300 L0,300 Z" fill="#b89050"/>
        <path d="M0,255 Q80,238 160,248 Q230,238 300,250 L300,300 L0,300 Z" fill="#a07840"/>
        <!-- Desert rocks silhouettes -->
        <g fill="#5a3a18">
          <path d="M0,240 Q15,220 30,228 Q45,215 60,232"/>
          <path d="M245,235 Q258,218 272,226 Q285,215 300,230"/>
        </g>
        <!-- Lone cactus -->
        <g fill="#1a3a1a">
          <rect x="148" y="195" width="8" height="30"/>
          <rect x="135" y="203" width="20" height="5" rx="2"/>
          <rect x="135" y="203" width="5" height="12" rx="2"/>
          <rect x="163" y="203" width="5" height="10" rx="2"/>
        </g>
        <!-- Person silhouette stargazing -->
        <g fill="#0d0620">
          <ellipse cx="155" cy="237" rx="6" ry="8"/> <!-- body sitting -->
          <circle cx="155" cy="227" r="5"/> <!-- head -->
        </g>
      </svg>
      <figcaption class="ig-01__caption"><span>Milky Way, Sahara</span><small>Astrophoto · Morocco</small></figcaption>
    </figure>

    <!-- SHORT 3: Misty bamboo forest -->
    <figure class="ig-01__card ig-01__card--short">
      <svg class="ig-01__scene" viewBox="0 0 300 225" xmlns="http://www.w3.org/2000/svg">
        <defs>
          <linearGradient id="bamboo-sky" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stop-color="#d0e8c0"/>
            <stop offset="50%" stop-color="#e8f4d8"/>
            <stop offset="100%" stop-color="#c8dca8"/>
          </linearGradient>
          <filter id="mist"><feGaussianBlur stdDeviation="6"/></filter>
          <filter id="mist2"><feGaussianBlur stdDeviation="2"/></filter>
        </defs>
        <rect width="300" height="225" fill="url(#bamboo-sky)"/>
        <!-- Mist layers -->
        <rect x="0" y="140" width="300" height="50" fill="#e8f4d0" opacity=".6" filter="url(#mist)"/>
        <rect x="0" y="160" width="300" height="40" fill="#f0f8e0" opacity=".5" filter="url(#mist)"/>
        <rect x="0" y="180" width="300" height="45" fill="#f5faea" opacity=".55" filter="url(#mist)"/>
        <!-- Back bamboo (thin, lighter) -->
        <g stroke="#6a9a40" stroke-width="4" fill="none" opacity=".4">
          <line x1="15" y1="0" x2="15" y2="225"/>
          <line x1="35" y1="0" x2="33" y2="225"/>
          <line x1="55" y1="0" x2="57" y2="225"/>
          <line x1="85" y1="0" x2="83" y2="225"/>
          <line x1="105" y1="0" x2="107" y2="225"/>
          <line x1="140" y1="0" x2="138" y2="225"/>
          <line x1="175" y1="0" x2="177" y2="225"/>
          <line x1="210" y1="0" x2="208" y2="225"/>
          <line x1="240" y1="0" x2="242" y2="225"/>
          <line x1="265" y1="0" x2="263" y2="225"/>
          <line x1="285" y1="0" x2="287" y2="225"/>
        </g>
        <!-- Mid bamboo nodes -->
        <g fill="none">
          <g stroke="#5a8a30" stroke-width="6" opacity=".6">
            <line x1="25" y1="0" x2="23" y2="225"/>
            <line x1="70" y1="0" x2="72" y2="225"/>
            <line x1="120" y1="0" x2="118" y2="225"/>
            <line x1="160" y1="0" x2="162" y2="225"/>
            <line x1="200" y1="0" x2="198" y2="225"/>
            <line x1="250" y1="0" x2="252" y2="225"/>
            <line x1="295" y1="0" x2="293" y2="225"/>
          </g>
          <!-- Node rings -->
          <g stroke="#4a7a28" stroke-width="2" opacity=".5">
            <line x1="21" y1="40" x2="27" y2="40"/><line x1="21" y1="80" x2="27" y2="80"/>
            <line x1="21" y1="120" x2="27" y2="120"/><line x1="21" y1="160" x2="27" y2="160"/>
            <line x1="68" y1="55" x2="74" y2="55"/><line x1="68" y1="100" x2="74" y2="100"/>
            <line x1="68" y1="145" x2="74" y2="145"/><line x1="68" y1="190" x2="74" y2="190"/>
            <line x1="116" y1="35" x2="122" y2="35"/><line x1="116" y1="75" x2="122" y2="75"/>
            <line x1="116" y1="115" x2="122" y2="115"/><line x1="116" y1="155" x2="122" y2="155"/>
            <line x1="116" y1="200" x2="122" y2="200"/>
            <line x1="158" y1="45" x2="164" y2="45"/><line x1="158" y1="90" x2="164" y2="90"/>
            <line x1="158" y1="135" x2="164" y2="135"/><line x1="158" y1="180" x2="164" y2="180"/>
          </g>
        </g>
        <!-- Front bamboo (thick, dark) -->
        <g stroke="#3a6a1a" stroke-width="9" fill="none" opacity=".85">
          <line x1="48" y1="0" x2="46" y2="225"/>
          <line x1="148" y1="0" x2="150" y2="225"/>
          <line x1="225" y1="0" x2="223" y2="225"/>
        </g>
        <!-- Front bamboo nodes -->
        <g fill="none" stroke="#2d5412" stroke-width="3" opacity=".8">
          <line x1="44" y1="50" x2="50" y2="50"/><line x1="44" y1="110" x2="50" y2="110"/>
          <line x1="44" y1="170" x2="50" y2="170"/>
          <line x1="146" y1="60" x2="152" y2="60"/><line x1="146" y1="125" x2="152" y2="125"/>
          <line x1="146" y1="190" x2="152" y2="190"/>
          <line x1="221" y1="45" x2="227" y2="45"/><line x1="221" y1="105" x2="227" y2="105"/>
          <line x1="221" y1="165" x2="227" y2="165"/>
        </g>
        <!-- Bamboo leaves -->
        <g fill="#5a9a28" opacity=".7">
          <ellipse cx="38" cy="55" rx="18" ry="5" transform="rotate(-35,38,55)"/>
          <ellipse cx="55" cy="48" rx="20" ry="5" transform="rotate(25,55,48)"/>
          <ellipse cx="140" cy="68" rx="18" ry="5" transform="rotate(-40,140,68)"/>
          <ellipse cx="155" cy="58" rx="22" ry="5" transform="rotate(20,155,58)"/>
          <ellipse cx="215" cy="52" rx="18" ry="5" transform="rotate(-30,215,52)"/>
          <ellipse cx="230" cy="45" rx="20" ry="5" transform="rotate(35,230,45)"/>
          <ellipse cx="70" cy="108" rx="16" ry="4" transform="rotate(-25,70,108)"/>
          <ellipse cx="118" cy="78" rx="19" ry="5" transform="rotate(28,118,78)"/>
          <ellipse cx="200" cy="100" rx="17" ry="4" transform="rotate(-32,200,100)"/>
        </g>
        <!-- Ground -->
        <rect x="0" y="208" width="300" height="17" fill="#8aaa50" opacity=".5"/>
        <!-- Path stones -->
        <g fill="#a09070" opacity=".6">
          <ellipse cx="80" cy="216" rx="14" ry="6" transform="rotate(8,80,216)"/>
          <ellipse cx="140" cy="219" rx="16" ry="5" transform="rotate(-5,140,219)"/>
          <ellipse cx="210" cy="215" rx="12" ry="5" transform="rotate(12,210,215)"/>
        </g>
      </svg>
      <figcaption class="ig-01__caption"><span>Morning Mist</span><small>Forest · Arashiyama</small></figcaption>
    </figure>

  </div>
</div>
```

**CSS:**
```css
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
body{background:#f0ebe3;font-family:'DM Sans',sans-serif;padding:2rem}

.ig-01{--gap:.75rem;--radius:14px;font-family:'DM Sans',sans-serif}
.ig-01__grid{columns:3;column-gap:var(--gap)}
.ig-01__card{break-inside:avoid;margin-bottom:var(--gap);border-radius:var(--radius);overflow:hidden;position:relative;cursor:pointer;display:block}
.ig-01__card--tall .ig-01__scene{aspect-ratio:3/4}
.ig-01__card--mid  .ig-01__scene{aspect-ratio:1/1}
.ig-01__card--short .ig-01__scene{aspect-ratio:4/3}
.ig-01__scene{width:100%;display:block;transition:transform .5s cubic-bezier(.25,.46,.45,.94)}
.ig-01__card:hover .ig-01__scene{transform:scale(1.06)}
.ig-01__caption{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:1.25rem 1rem;background:linear-gradient(to top,rgba(15,10,5,.85),transparent 60%);opacity:0;transform:translateY(8px);transition:opacity .35s ease,transform .35s ease}
.ig-01__card:hover .ig-01__caption{opacity:1;transform:translateY(0)}
.ig-01__caption span{color:#fff;font-size:.9rem;font-weight:600;font-family:'Playfair Display',serif}
.ig-01__caption small{color:rgba(255,255,255,.6);font-size:.72rem;margin-top:.2rem;display:block;letter-spacing:.06em}
@media(prefers-reduced-motion:reduce){.ig-01__scene,.ig-01__caption{transition:none}}
```

### 02. CSS Lightbox Gallery Overlay

**Type:** Pure CSS
**Description:** A six-thumbnail grid where clicking any image opens a full-size overlay driven entirely by CSS :target pseudo-class — no JavaScript.

**HTML:**
```html
<div class="ig-02__grid">
  <a class="ig-02__thumb" href="#ig-02-1">
    <svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
      <defs><radialGradient id="vg1" cx="35%" cy="40%" r="65%"><stop offset="0%" stop-color="#ff6b35"/><stop offset="50%" stop-color="#c0392b"/><stop offset="100%" stop-color="#2c0a0a"/></radialGradient><filter id="vf1"><feGaussianBlur stdDeviation="4"/></filter></defs>
      <rect width="300" height="300" fill="url(#vg1)"/>
      <ellipse cx="105" cy="120" rx="80" ry="60" fill="#ff9060" opacity=".3" filter="url(#vf1)"/>
      <!-- Volcano silhouette -->
      <polygon points="0,300 80,150 120,200 150,130 180,200 220,150 300,300" fill="#1a0505"/>
      <polygon points="120,200 150,130 180,200" fill="#1a0505"/>
      <!-- Lava glow at crater -->
      <ellipse cx="150" cy="132" rx="18" ry="8" fill="#ff4400" opacity=".9" filter="url(#vf1)"/>
      <ellipse cx="150" cy="132" rx="8" ry="4" fill="#ffaa00"/>
      <!-- Lava streams -->
      <path d="M150,135 Q145,160 138,180 Q130,200 125,230" stroke="#ff5500" stroke-width="3" fill="none" opacity=".7"/>
      <path d="M150,135 Q155,158 162,175 Q170,195 172,225" stroke="#ff6600" stroke-width="2.5" fill="none" opacity=".6"/>
      <!-- Stars -->
      <g fill="#fff" opacity=".7"><circle cx="30" cy="20" r="1"/><circle cx="80" cy="10" r="1.2"/><circle cx="130" cy="25" r=".9"/><circle cx="200" cy="15" r="1.1"/><circle cx="255" cy="8" r="1"/><circle cx="280" cy="30" r=".8"/></g>
      <!-- Smoke plume -->
      <g filter="url(#vf1)" opacity=".4"><circle cx="150" cy="105" r="20" fill="#888"/><circle cx="145" cy="85" r="16" fill="#777"/><circle cx="152" cy="68" r="14" fill="#888"/><circle cx="148" cy="52" r="12" fill="#888"/></g>
    </svg>
    <span class="ig-02__badge">Eruption</span>
  </a>
  <a class="ig-02__thumb" href="#ig-02-2">
    <svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
      <defs><linearGradient id="tg2" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#001a33"/><stop offset="50%" stop-color="#003366"/><stop offset="100%" stop-color="#001a33"/></linearGradient><filter id="tf2"><feGaussianBlur stdDeviation="3"/></filter></defs>
      <rect width="300" height="300" fill="url(#tg2)"/>
      <!-- Underwater light rays -->
      <g opacity=".15" fill="#40aaff"><polygon points="100,0 130,0 200,300 170,300"/><polygon points="160,0 180,0 240,300 220,300"/><polygon points="60,0 75,0 120,300 105,300"/></g>
      <!-- Whale body -->
      <g transform="translate(150,155)">
        <ellipse cx="0" cy="0" rx="85" ry="30" fill="#1a3a5c"/>
        <ellipse cx="0" cy="0" rx="75" ry="24" fill="#234d7a"/>
        <!-- Belly -->
        <ellipse cx="10" cy="8" rx="50" ry="16" fill="#2d6a9f" opacity=".6"/>
        <!-- Tail fluke -->
        <path d="M85,0 Q105,-20 115,-15 Q120,0 105,5 Q118,8 118,20 Q108,25 90,5 Z" fill="#1a3a5c"/>
        <!-- Flippers -->
        <ellipse cx="-20" cy="20" rx="25" ry="8" fill="#1a3a5c" transform="rotate(25,-20,20)"/>
        <ellipse cx="-20" cy="-18" rx="22" ry="6" fill="#1a3a5c" transform="rotate(-20,-20,-18)"/>
        <!-- Eye -->
        <circle cx="-58" cy="-5" r="5" fill="#0d2040"/>
        <circle cx="-58" cy="-5" r="3" fill="#1a4060"/>
        <circle cx="-57" cy="-6" r="1.2" fill="#fff"/>
        <!-- Mouth line -->
        <path d="M-82,-2 Q-70,4 -55,2" stroke="#1a3a5c" stroke-width="1.5" fill="none"/>
        <!-- Barnacles -->
        <circle cx="-30" cy="-8" r="2" fill="#1a3a5c" opacity=".6"/>
        <circle cx="-45" cy="12" r="1.5" fill="#1a3a5c" opacity=".5"/>
      </g>
      <!-- Bubble trail -->
      <g fill="#80c8ff" opacity=".5"><circle cx="250" cy="120" r="4"/><circle cx="258" cy="100" r="3"/><circle cx="265" cy="82" r="5"/><circle cx="256" cy="65" r="2.5"/><circle cx="270" cy="48" r="4"/></g>
      <!-- Small fish school -->
      <g fill="#60aaee" opacity=".7">
        <ellipse cx="60" cy="80" rx="6" ry="3"/><ellipse cx="75" cy="75" rx="5" ry="2.5"/><ellipse cx="68" cy="68" rx="6" ry="3"/>
        <ellipse cx="82" cy="88" rx="5" ry="2.5"/><ellipse cx="55" cy="92" rx="6" ry="3"/>
      </g>
    </svg>
    <span class="ig-02__badge">Deep Blue</span>
  </a>
  <a class="ig-02__thumb" href="#ig-02-3">
    <svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
      <defs><linearGradient id="ag3" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#0a1520"/><stop offset="60%" stop-color="#0d1f2d"/><stop offset="100%" stop-color="#1a3a20"/></linearGradient><filter id="af3"><feGaussianBlur stdDeviation="5"/></filter><filter id="af3b"><feGaussianBlur stdDeviation="2"/></filter></defs>
      <rect width="300" height="300" fill="url(#ag3)"/>
      <!-- Aurora ribbons -->
      <g opacity=".7" filter="url(#af3)">
        <path d="M0,80 Q75,40 150,80 Q225,120 300,60" stroke="#00e8a0" stroke-width="30" fill="none"/>
        <path d="M0,110 Q80,65 160,100 Q240,135 300,85" stroke="#6040ff" stroke-width="20" fill="none"/>
        <path d="M0,65 Q60,35 120,70 Q190,105 300,52" stroke="#00c8e0" stroke-width="15" fill="none"/>
        <path d="M0,95 Q70,58 140,90 Q215,122 300,75" stroke="#40ff90" stroke-width="10" fill="none"/>
      </g>
      <g opacity=".4" filter="url(#af3b)">
        <path d="M0,80 Q75,40 150,80 Q225,120 300,60" stroke="#80ffcc" stroke-width="8" fill="none"/>
        <path d="M0,110 Q80,65 160,100 Q240,135 300,85" stroke="#a090ff" stroke-width="6" fill="none"/>
      </g>
      <!-- Stars -->
      <g fill="#fff" opacity=".8"><circle cx="20" cy="15" r="1.1"/><circle cx="55" cy="8" r=".9"/><circle cx="95" cy="20" r="1.2"/><circle cx="140" cy="5" r="1"/><circle cx="180" cy="18" r=".8"/><circle cx="225" cy="10" r="1.1"/><circle cx="265" cy="22" r="1"/><circle cx="290" cy="8" r=".9"/><circle cx="15" cy="45" r=".8"/><circle cx="75" cy="38" r="1"/><circle cx="200" cy="42" r="1.2"/></g>
      <!-- Pine forest silhouette -->
      <g fill="#0a1a0a">
        <polygon points="0,300 0,210 20,180 40,210 40,300"/><polygon points="30,300 30,215 50,182 70,215 70,300"/>
        <polygon points="60,300 60,205 82,170 104,205 104,300"/><polygon points="95,300 95,220 115,185 135,220 135,300"/>
        <polygon points="125,300 125,208 148,172 170,208 170,300"/><polygon points="160,300 160,215 180,180 200,215 200,300"/>
        <polygon points="190,300 190,210 212,175 234,210 234,300"/><polygon points="225,300 225,205 248,170 270,205 270,300"/>
        <polygon points="258,300 258,215 278,183 298,215 298,300"/><polygon points="288,300 288,220 308,185 328,220 328,300"/>
      </g>
      <!-- Snow ground -->
      <rect x="0" y="285" width="300" height="15" fill="#c8d8e8" opacity=".5"/>
      <!-- Log cabin -->
      <g fill="#1a0d05">
        <rect x="125" y="248" width="50" height="30"/>
        <polygon points="118,248 150,228 182,248"/>
        <rect x="140" y="258" width="10" height="20"/>
      </g>
      <!-- Cabin window glow -->
      <rect x="128" y="252" width="12" height="10" fill="#ff9040" opacity=".8"/>
      <ellipse cx="134" cy="257" rx="8" ry="6" fill="#ff9040" opacity=".3" filter="url(#af3b)"/>
    </svg>
    <span class="ig-02__badge">Aurora</span>
  </a>
  <a class="ig-02__thumb" href="#ig-02-4">
    <svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
      <defs><linearGradient id="dg4" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#e8d0a0"/><stop offset="40%" stop-color="#d4a840"/><stop offset="70%" stop-color="#c08020"/><stop offset="100%" stop-color="#8a5010"/></linearGradient><filter id="df4"><feGaussianBlur stdDeviation="4"/></filter></defs>
      <rect width="300" height="300" fill="url(#dg4)"/>
      <!-- Sun near horizon -->
      <circle cx="150" cy="190" r="40" fill="#fff5a0" opacity=".9"/>
      <circle cx="150" cy="190" r="32" fill="#fff0a0"/>
      <ellipse cx="150" cy="220" rx="160" ry="30" fill="#ffaa40" opacity=".4" filter="url(#df4)"/>
      <!-- Heat haze ripples -->
      <g stroke="#e8c060" stroke-width=".8" fill="none" opacity=".3">
        <path d="M0,170 Q75,160 150,170 Q225,180 300,170"/>
        <path d="M0,180 Q80,172 150,180 Q220,188 300,180"/>
        <path d="M0,190 Q70,183 150,190 Q230,197 300,190"/>
      </g>
      <!-- Dunes with shadows -->
      <path d="M0,240 Q50,200 100,220 Q150,240 200,205 Q250,175 300,210 L300,300 L0,300 Z" fill="#c89040"/>
      <path d="M0,260 Q60,235 120,250 Q180,265 240,238 Q270,228 300,240 L300,300 L0,300 Z" fill="#b07828"/>
      <path d="M0,278 Q80,262 160,272 Q230,282 300,268 L300,300 L0,300 Z" fill="#9a6018"/>
      <!-- Dune shadow sides -->
      <path d="M100,220 Q115,240 130,265 Q140,280 135,300 L100,300 Z" fill="#7a4808" opacity=".5"/>
      <path d="M200,205 Q215,225 225,255 Q230,272 225,300 L200,300 Z" fill="#7a4808" opacity=".45"/>
      <!-- Camel caravan silhouette -->
      <g fill="#3d1a05" transform="translate(30,230)">
        <!-- Camel 1 -->
        <ellipse cx="0" cy="10" rx="18" ry="10"/>
        <ellipse cx="5" cy="3" rx="10" ry="7"/> <!-- hump -->
        <rect x="-12" y="16" width="4" height="14" rx="2"/>
        <rect x="-4" y="16" width="4" height="14" rx="2"/>
        <rect x="6" y="16" width="4" height="14" rx="2"/>
        <rect x="14" y="16" width="4" height="12" rx="2"/>
        <ellipse cx="-14" cy="7" rx="7" ry="5"/> <!-- neck+head -->
        <ellipse cx="-20" cy="4" rx="5" ry="4"/> <!-- head -->
        <!-- Rider -->
        <ellipse cx="3" cy="-3" rx="5" ry="6" fill="#5a2a0a"/>
        <circle cx="3" cy="-11" r="4" fill="#5a2a0a"/>
        <!-- Camel 2 -->
        <ellipse cx="60" cy="12" rx="16" ry="9"/>
        <ellipse cx="64" cy="5" rx="9" ry="6"/>
        <rect x="48" y="18" width="3.5" height="12" rx="2"/>
        <rect x="55" y="18" width="3.5" height="12" rx="2"/>
        <rect x="64" y="18" width="3.5" height="12" rx="2"/>
        <rect x="72" y="18" width="3.5" height="11" rx="2"/>
        <ellipse cx="46" cy="9" rx="6" ry="4.5"/>
        <ellipse cx="41" cy="6" rx="4.5" ry="3.5"/>
        <ellipse cx="62" cy="-1" rx="4.5" ry="5.5" fill="#5a2a0a"/>
        <circle cx="62" cy="-8" r="3.5" fill="#5a2a0a"/>
      </g>
    </svg>
    <span class="ig-02__badge">Sahara</span>
  </a>
  <a class="ig-02__thumb" href="#ig-02-5">
    <svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
      <defs><radialGradient id="mg5" cx="50%" cy="50%" r="60%"><stop offset="0%" stop-color="#1a3a1a"/><stop offset="60%" stop-color="#0d200d"/><stop offset="100%" stop-color="#050d05"/></radialGradient><filter id="mf5"><feGaussianBlur stdDeviation="3"/></filter></defs>
      <rect width="300" height="300" fill="url(#mg5)"/>
      <!-- Fireflies -->
      <g filter="url(#mf5)">
        <circle cx="45" cy="120" r="5" fill="#e0ff40" opacity=".85"/>
        <circle cx="95" cy="85" r="4" fill="#c8ff20" opacity=".8"/>
        <circle cx="155" cy="105" r="6" fill="#e0ff40" opacity=".9"/>
        <circle cx="205" cy="75" r="4.5" fill="#d0ff30" opacity=".82"/>
        <circle cx="255" cy="115" r="5" fill="#e0ff40" opacity=".85"/>
        <circle cx="72" cy="160" r="4" fill="#c8ff20" opacity=".75"/>
        <circle cx="130" cy="145" r="5.5" fill="#e0ff40" opacity=".88"/>
        <circle cx="190" cy="135" r="4" fill="#d0ff30" opacity=".78"/>
        <circle cx="238" cy="155" r="6" fill="#e0ff40" opacity=".9"/>
        <circle cx="30" cy="200" r="4.5" fill="#c8ff20" opacity=".8"/>
        <circle cx="110" cy="190" r="5" fill="#e0ff40" opacity=".85"/>
        <circle cx="175" cy="185" r="4" fill="#d0ff30" opacity=".78"/>
        <circle cx="225" cy="205" r="5.5" fill="#e0ff40" opacity=".88"/>
        <circle cx="270" cy="190" r="4" fill="#c8ff20" opacity=".75"/>
        <circle cx="60" cy="240" r="5" fill="#e0ff40" opacity=".82"/>
        <circle cx="145" cy="230" r="4.5" fill="#d0ff30" opacity=".8"/>
        <circle cx="210" cy="245" r="5" fill="#c8ff20" opacity=".85"/>
      </g>
      <!-- Tree trunks in dark -->
      <g fill="#050d05">
        <rect x="0" y="150" width="10" height="150" rx="3"/>
        <rect x="30" y="100" width="12" height="200" rx="4"/>
        <rect x="75" y="120" width="10" height="180" rx="3"/>
        <rect x="120" y="90" width="13" height="210" rx="4"/>
        <rect x="170" y="110" width="11" height="190" rx="3"/>
        <rect x="215" y="95" width="12" height="205" rx="4"/>
        <rect x="258" y="130" width="10" height="170" rx="3"/>
        <rect x="285" y="105" width="12" height="195" rx="4"/>
      </g>
      <!-- Canopy silhouette top -->
      <path d="M0,0 Q35,50 70,30 Q105,60 140,40 Q175,65 210,38 Q245,60 300,35 L300,0 Z" fill="#050d05"/>
      <!-- Leaf fringe -->
      <path d="M0,50 Q25,30 50,45 Q80,25 110,40 Q140,22 165,38 Q195,20 225,35 Q255,18 285,32 Q300,28 300,50" fill="#0a1a0a" opacity=".9"/>
      <!-- Ground mist -->
      <rect x="0" y="260" width="300" height="40" fill="#1a2a1a" opacity=".7" filter="url(#mf5)"/>
      <!-- Moon -->
      <circle cx="230" cy="45" r="22" fill="#fff8d0" opacity=".9"/>
      <circle cx="238" cy="40" r="18" fill="#0d200d"/>
      <circle cx="232" cy="38" r="15" fill="#fff8d0" opacity=".9"/>
    </svg>
    <span class="ig-02__badge">Fireflies</span>
  </a>
  <a class="ig-02__thumb" href="#ig-02-6">
    <svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
      <defs><linearGradient id="gg6" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#002244"/><stop offset="50%" stop-color="#003366"/><stop offset="100%" stop-color="#112200"/></linearGradient><filter id="gf6"><feGaussianBlur stdDeviation="4"/></filter></defs>
      <rect width="300" height="300" fill="url(#gg6)"/>
      <!-- Glacier face -->
      <polygon points="0,80 60,50 120,70 180,45 240,65 300,50 300,220 0,220" fill="#c8ddf0"/>
      <polygon points="0,80 60,50 120,70 180,45 240,65 300,50 300,160 0,160" fill="#a8c8e8"/>
      <!-- Crevasse cracks -->
      <g stroke="#5588aa" stroke-width="1.5" fill="none" opacity=".7">
        <path d="M40,80 Q50,110 45,140 Q42,165 48,190"/>
        <path d="M90,70 Q98,105 92,140 Q88,160 95,190"/>
        <path d="M145,65 Q152,100 148,135 Q145,155 150,190"/>
        <path d="M200,60 Q208,95 203,130 Q200,152 205,185"/>
        <path d="M255,68 Q260,100 256,135 Q253,158 258,188"/>
      </g>
      <!-- Ice shading layers -->
      <polygon points="0,100 60,75 120,92 180,68 240,88 300,72 300,130 0,130" fill="#9ab8d8" opacity=".4"/>
      <!-- Meltwater lake at base -->
      <ellipse cx="150" cy="225" rx="180" ry="25" fill="#1a4a6a"/>
      <ellipse cx="150" cy="228" rx="160" ry="18" fill="#2a6080" opacity=".7"/>
      <!-- Glacier reflection in lake -->
      <polygon points="0,220 60,235 120,225 180,238 240,226 300,235 300,250 0,250" fill="#4a80a0" opacity=".3"/>
      <!-- Ice cave opening -->
      <path d="M110,145 Q150,118 190,145 Q195,165 150,168 Q105,165 110,145 Z" fill="#1a3a5c"/>
      <ellipse cx="150" cy="155" rx="30" ry="15" fill="#0a2040" opacity=".9"/>
      <ellipse cx="150" cy="158" rx="20" ry="10" fill="#1a4060" filter="url(#gf6)"/>
      <!-- Kayaker on lake -->
      <g transform="translate(80,232)">
        <ellipse cx="0" cy="0" rx="22" ry="5" fill="#e04020"/>
        <ellipse cx="0" cy="-3" rx="6" ry="6" fill="#1a1a1a"/>
        <rect x="-2" y="-3" width="4" height="16" fill="#8a6a40" rx="1"/>
      </g>
      <!-- Mountains far back -->
      <polygon points="0,80 0,50 40,20 80,55 80,80" fill="#8ab0c8" opacity=".4"/>
      <polygon points="220,50 260,18 300,48 300,50" fill="#8ab0c8" opacity=".4"/>
    </svg>
    <span class="ig-02__badge">Glacier</span>
  </a>
</div>

<!-- Overlays -->
<div class="ig-02__overlay" id="ig-02-1">
  <a class="ig-02__close" href="#ig-02-close">&times;</a>
  <div class="ig-02__full" style="position:relative">
    <svg viewBox="0 0 700 525" xmlns="http://www.w3.org/2000/svg" style="width:100%;height:100%">
      <defs><radialGradient id="lvg1" cx="35%" cy="40%" r="65%"><stop offset="0%" stop-color="#ff6b35"/><stop offset="50%" stop-color="#c0392b"/><stop offset="100%" stop-color="#2c0a0a"/></radialGradient><filter id="lvf1"><feGaussianBlur stdDeviation="8"/></filter></defs>
      <rect width="700" height="525" fill="url(#lvg1)"/>
      <ellipse cx="245" cy="200" rx="180" ry="130" fill="#ff9060" opacity=".3" filter="url(#lvf1)"/>
      <polygon points="0,525 180,260 280,350 350,220 420,350 520,260 700,525" fill="#1a0505"/>
      <ellipse cx="350" cy="225" rx="45" ry="20" fill="#ff4400" opacity=".9" filter="url(#lvf1)"/>
      <ellipse cx="350" cy="225" rx="20" ry="10" fill="#ffaa00"/>
      <path d="M350,235 Q340,290 320,340 Q305,385 298,430" stroke="#ff5500" stroke-width="6" fill="none" opacity=".7"/>
      <path d="M350,235 Q362,285 375,325 Q388,365 390,420" stroke="#ff6600" stroke-width="5" fill="none" opacity=".6"/>
      <g fill="#fff" opacity=".7"><circle cx="70" cy="35" r="2"/><circle cx="190" cy="20" r="2.5"/><circle cx="310" cy="42" r="1.8"/><circle cx="470" cy="28" r="2.2"/><circle cx="600" cy="18" r="2"/><circle cx="660" cy="40" r="1.8"/></g>
      <g filter="url(#lvf1)" opacity=".4"><circle cx="350" cy="180" r="45" fill="#888"/><circle cx="338" cy="148" r="38" fill="#777"/><circle cx="348" cy="115" r="32" fill="#888"/></g>
    </svg>
    <div class="ig-02__caption-lg" style="position:absolute"><h3>Kilauea Eruption</h3><p>Volcanic landscapes · Big Island, Hawaii</p></div>
  </div>
</div>
<div class="ig-02__overlay" id="ig-02-2">
  <a class="ig-02__close" href="#ig-02-close">&times;</a>
  <div class="ig-02__full" style="position:relative">
    <svg viewBox="0 0 700 525" xmlns="http://www.w3.org/2000/svg" style="width:100%;height:100%">
      <defs><linearGradient id="ltg2" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#001a33"/><stop offset="50%" stop-color="#003366"/><stop offset="100%" stop-color="#001a33"/></linearGradient></defs>
      <rect width="700" height="525" fill="url(#ltg2)"/>
      <g opacity=".12" fill="#40aaff"><polygon points="220,0 290,0 460,525 390,525"/><polygon points="360,0 410,0 550,525 500,525"/><polygon points="130,0 160,0 270,525 240,525"/></g>
      <g transform="translate(350,280)">
        <ellipse cx="0" cy="0" rx="200" ry="70" fill="#1a3a5c"/>
        <ellipse cx="0" cy="0" rx="175" ry="55" fill="#234d7a"/>
        <ellipse cx="25" cy="18" rx="118" ry="38" fill="#2d6a9f" opacity=".6"/>
        <path d="M200,0 Q245,-46 268,-35 Q280,0 245,12 Q276,20 276,46 Q252,58 210,12 Z" fill="#1a3a5c"/>
        <ellipse cx="-45" cy="46" rx="58" ry="18" fill="#1a3a5c" transform="rotate(25,-45,46)"/>
        <ellipse cx="-45" cy="-42" rx="52" ry="14" fill="#1a3a5c" transform="rotate(-20,-45,-42)"/>
        <circle cx="-135" cy="-12" r="12" fill="#0d2040"/>
        <circle cx="-135" cy="-12" r="7" fill="#1a4060"/>
        <circle cx="-132" cy="-15" r="3" fill="#fff"/>
        <path d="M-192,-5 Q-164,10 -128,5" stroke="#1a3a5c" stroke-width="3" fill="none"/>
      </g>
      <g fill="#80c8ff" opacity=".5"><circle cx="590" cy="210" r="9"/><circle cx="608" cy="175" r="7"/><circle cx="620" cy="143" r="11"/><circle cx="610" cy="112" r="6"/></g>
      <g fill="#60aaee" opacity=".7">
        <ellipse cx="140" cy="150" rx="14" ry="7"/><ellipse cx="172" cy="140" rx="12" ry="6"/><ellipse cx="158" cy="128" rx="14" ry="7"/>
        <ellipse cx="190" cy="165" rx="12" ry="6"/><ellipse cx="128" cy="175" rx="14" ry="7"/>
      </g>
    </svg>
    <div class="ig-02__caption-lg" style="position:absolute"><h3>Humpback Whale</h3><p>Marine photography · Tonga, South Pacific</p></div>
  </div>
</div>
<div class="ig-02__overlay" id="ig-02-3">
  <a class="ig-02__close" href="#ig-02-close">&times;</a>
  <div class="ig-02__full" style="position:relative">
    <svg viewBox="0 0 700 525" xmlns="http://www.w3.org/2000/svg" style="width:100%;height:100%">
      <defs><linearGradient id="lag3" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#0a1520"/><stop offset="60%" stop-color="#0d1f2d"/><stop offset="100%" stop-color="#1a3a20"/></linearGradient><filter id="laf3"><feGaussianBlur stdDeviation="10"/></filter><filter id="laf3b"><feGaussianBlur stdDeviation="3"/></filter></defs>
      <rect width="700" height="525" fill="url(#lag3)"/>
      <g opacity=".75" filter="url(#laf3)">
        <path d="M0,140 Q175,70 350,140 Q525,210 700,105" stroke="#00e8a0" stroke-width="55" fill="none"/>
        <path d="M0,195 Q185,120 370,175 Q555,230 700,150" stroke="#6040ff" stroke-width="38" fill="none"/>
        <path d="M0,115 Q140,65 280,125 Q445,185 700,92" stroke="#00c8e0" stroke-width="28" fill="none"/>
        <path d="M0,170 Q165,108 325,158 Q500,213 700,135" stroke="#40ff90" stroke-width="18" fill="none"/>
      </g>
      <g fill="#fff" opacity=".8"><circle cx="45" cy="28" r="2.2"/><circle cx="130" cy="14" r="1.8"/><circle cx="220" cy="38" r="2.4"/><circle cx="325" cy="10" r="2"/><circle cx="420" cy="32" r="1.6"/><circle cx="525" cy="18" r="2.2"/><circle cx="615" cy="40" r="2"/><circle cx="678" cy="16" r="1.8"/></g>
      <g fill="#0a1a0a">
        <polygon points="0,525 0,370 46,315 92,370 92,525"/><polygon points="70,525 70,378 117,320 164,378 164,525"/>
        <polygon points="140,525 140,360 192,300 244,360 244,525"/><polygon points="220,525 220,375 268,318 316,375 316,525"/>
        <polygon points="295,525 295,365 348,302 400,365 400,525"/><polygon points="375,525 375,372 422,315 470,372 470,525"/>
        <polygon points="448,525 448,360 498,298 548,360 548,525"/><polygon points="525,525 525,372 574,315 622,372 622,525"/>
        <polygon points="600,525 600,365 648,308 696,365 696,525"/>
      </g>
      <rect x="0" y="500" width="700" height="25" fill="#b8c8d8" opacity=".6"/>
      <rect x="290" y="432" width="120" height="68" fill="#1a0d05"/>
      <polygon points="278,432 350,398 422,432" fill="#120b04"/>
      <rect x="325" y="452" width="26" height="48" fill="#120b04"/>
      <rect x="295" y="438" width="30" height="24" fill="#ff8020" opacity=".8"/>
      <ellipse cx="310" cy="445" rx="20" ry="15" fill="#ff8020" opacity=".3" filter="url(#laf3b)"/>
    </svg>
    <div class="ig-02__caption-lg" style="position:absolute"><h3>Aurora Borealis</h3><p>Astrophotography · Tromsø, Norway</p></div>
  </div>
</div>
<div class="ig-02__overlay" id="ig-02-4">
  <a class="ig-02__close" href="#ig-02-close">&times;</a>
  <div class="ig-02__full" style="position:relative">
    <svg viewBox="0 0 700 525" xmlns="http://www.w3.org/2000/svg" style="width:100%;height:100%">
      <defs><linearGradient id="ldg4" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#e8d0a0"/><stop offset="40%" stop-color="#d4a840"/><stop offset="70%" stop-color="#c08020"/><stop offset="100%" stop-color="#8a5010"/></linearGradient><filter id="ldf4"><feGaussianBlur stdDeviation="8"/></filter></defs>
      <rect width="700" height="525" fill="url(#ldg4)"/>
      <circle cx="350" cy="330" r="92" fill="#fff5a0" opacity=".9"/>
      <circle cx="350" cy="330" r="74" fill="#fff0a0"/>
      <ellipse cx="350" cy="390" rx="380" ry="55" fill="#ffaa40" opacity=".4" filter="url(#ldf4)"/>
      <path d="M0,420 Q115,370 230,388 Q350,420 468,372 Q582,340 700,368 L700,525 L0,525 Z" fill="#c89040"/>
      <path d="M0,455 Q140,420 280,438 Q420,458 560,422 Q630,408 700,425 L700,525 L0,525 Z" fill="#b07828"/>
      <path d="M0,480 Q185,458 370,472 Q535,488 700,468 L700,525 L0,525 Z" fill="#9a6018"/>
      <path d="M230,388 Q268,428 305,468 Q325,495 315,525 L230,525 Z" fill="#7a4808" opacity=".5"/>
      <path d="M468,372 Q502,412 520,455 Q528,480 522,525 L468,525 Z" fill="#7a4808" opacity=".45"/>
      <g fill="#3d1a05" transform="translate(80,405)">
        <ellipse cx="0" cy="18" rx="42" ry="22"/><ellipse cx="12" cy="5" rx="23" ry="16"/>
        <rect x="-28" y="36" width="9" height="30" rx="4"/><rect x="-10" y="36" width="9" height="32" rx="4"/>
        <rect x="14" y="36" width="9" height="30" rx="4"/><rect x="32" y="36" width="9" height="26" rx="4"/>
        <ellipse cx="-32" cy="14" rx="16" ry="11"/><ellipse cx="-48" cy="8" rx="11" ry="9"/>
        <ellipse cx="145" cy="22" rx="38" ry="20"/><ellipse cx="155" cy="10" rx="20" ry="14"/>
        <rect x="120" y="38" width="8" height="26" rx="4"/><rect x="136" y="38" width="8" height="28" rx="4"/>
        <rect x="154" y="38" width="8" height="26" rx="4"/><rect x="170" y="38" width="8" height="24" rx="4"/>
        <ellipse cx="118" cy="16" rx="14" ry="10"/><ellipse cx="105" cy="12" rx="10" ry="8"/>
      </g>
    </svg>
    <div class="ig-02__caption-lg" style="position:absolute"><h3>Sahara Caravan</h3><p>Desert expedition · Erg Chebbi, Morocco</p></div>
  </div>
</div>
<div class="ig-02__overlay" id="ig-02-5">
  <a class="ig-02__close" href="#ig-02-close">&times;</a>
  <div class="ig-02__full" style="position:relative">
    <svg viewBox="0 0 700 525" xmlns="http://www.w3.org/2000/svg" style="width:100%;height:100%">
      <defs><radialGradient id="lmg5" cx="50%" cy="50%" r="60%"><stop offset="0%" stop-color="#1a3a1a"/><stop offset="60%" stop-color="#0d200d"/><stop offset="100%" stop-color="#050d05"/></radialGradient><filter id="lmf5"><feGaussianBlur stdDeviation="6"/></filter></defs>
      <rect width="700" height="525" fill="url(#lmg5)"/>
      <g filter="url(#lmf5)">
        <circle cx="105" cy="210" r="11" fill="#e0ff40" opacity=".88"/><circle cx="222" cy="148" r="9" fill="#c8ff20" opacity=".82"/>
        <circle cx="360" cy="185" r="13" fill="#e0ff40" opacity=".92"/><circle cx="478" cy="132" r="10" fill="#d0ff30" opacity=".84"/>
        <circle cx="595" cy="202" r="11" fill="#e0ff40" opacity=".88"/><circle cx="168" cy="285" r="9" fill="#c8ff20" opacity=".78"/>
        <circle cx="305" cy="258" r="12" fill="#e0ff40" opacity=".9"/><circle cx="445" cy="238" r="9" fill="#d0ff30" opacity=".8"/>
        <circle cx="555" cy="272" r="13" fill="#e0ff40" opacity=".92"/><circle cx="70" cy="350" r="10" fill="#c8ff20" opacity=".82"/>
        <circle cx="255" cy="332" r="11" fill="#e0ff40" opacity=".88"/><circle cx="408" cy="345" r="9" fill="#d0ff30" opacity=".8"/>
        <circle cx="490" cy="362" r="12" fill="#e0ff40" opacity=".9"/><circle cx="635" cy="338" r="10" fill="#c8ff20" opacity=".78"/>
      </g>
      <g fill="#050d05">
        <rect x="0" y="262" width="22" height="263" rx="5"/><rect x="70" y="175" width="28" height="350" rx="6"/>
        <rect x="175" y="210" width="23" height="315" rx="5"/><rect x="280" y="158" width="30" height="367" rx="7"/>
        <rect x="397" y="192" width="25" height="333" rx="5"/><rect x="502" y="166" width="28" height="359" rx="6"/>
        <rect x="602" y="228" width="23" height="297" rx="5"/><rect x="665" y="184" width="28" height="341" rx="6"/>
      </g>
      <path d="M0,0 Q80,88 160,55 Q245,105 325,70 Q408,112 490,67 Q572,105 700,61 L700,0 Z" fill="#050d05"/>
      <path d="M0,88 Q58,55 116,79 Q187,44 258,70 Q325,40 385,67 Q455,35 525,61 Q592,32 665,57 Q700,50 700,88" fill="#0a1a0a" opacity=".9"/>
      <circle cx="535" cy="80" r="50" fill="#fff8d0" opacity=".9"/>
      <circle cx="556" cy="70" r="40" fill="#050d05"/>
      <circle cx="542" cy="66" r="34" fill="#fff8d0" opacity=".9"/>
      <rect x="0" y="458" width="700" height="67" fill="#1a2a1a" opacity=".7" filter="url(#lmf5)"/>
    </svg>
    <div class="ig-02__caption-lg" style="position:absolute"><h3>Firefly Forest</h3><p>Night nature · Smoky Mountains, Tennessee</p></div>
  </div>
</div>
<div class="ig-02__overlay" id="ig-02-6">
  <a class="ig-02__close" href="#ig-02-close">&times;</a>
  <div class="ig-02__full" style="position:relative">
    <svg viewBox="0 0 700 525" xmlns="http://www.w3.org/2000/svg" style="width:100%;height:100%">
      <defs><linearGradient id="lgg6" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#002244"/><stop offset="50%" stop-color="#003366"/><stop offset="100%" stop-color="#112200"/></linearGradient><filter id="lgf6"><feGaussianBlur stdDeviation="7"/></filter></defs>
      <rect width="700" height="525" fill="url(#lgg6)"/>
      <polygon points="0,140 140,88 280,123 420,79 560,114 700,88 700,385 0,385" fill="#c8ddf0"/>
      <polygon points="0,140 140,88 280,123 420,79 560,114 700,88 700,280 0,280" fill="#a8c8e8"/>
      <g stroke="#5588aa" stroke-width="3" fill="none" opacity=".7">
        <path d="M92,140 Q116,193 105,245 Q98,290 112,332"/><path d="M210,123 Q228,183 215,245 Q206,280 220,332"/>
        <path d="M337,114 Q354,175 344,237 Q338,272 348,332"/><path d="M468,105 Q482,168 472,228 Q466,265 476,325"/>
        <path d="M595,120 Q606,178 597,237 Q592,273 600,328"/>
      </g>
      <polygon points="0,175 140,133 280,160 420,120 560,154 700,127 700,228 0,228" fill="#9ab8d8" opacity=".4"/>
      <ellipse cx="350" cy="400" rx="420" ry="44" fill="#1a4a6a"/>
      <ellipse cx="350" cy="408" rx="374" ry="32" fill="#2a6080" opacity=".7"/>
      <path d="M258,270 Q350,208 442,270 Q455,298 350,302 Q246,298 258,270 Z" fill="#1a3a5c"/>
      <ellipse cx="350" cy="285" rx="70" ry="26" fill="#0a2040" opacity=".9"/>
      <ellipse cx="350" cy="292" rx="48" ry="18" fill="#1a4060" filter="url(#lgf6)"/>
      <g transform="translate(185,408)">
        <ellipse cx="0" cy="0" rx="50" ry="11" fill="#e04020"/>
        <ellipse cx="0" cy="-6" rx="14" ry="14" fill="#1a1a1a"/>
        <rect x="-5" y="-6" width="10" height="36" fill="#8a6a40" rx="2"/>
      </g>
    </svg>
    <div class="ig-02__caption-lg" style="position:absolute"><h3>Perito Moreno</h3><p>Glacier expedition · Patagonia, Argentina</p></div>
  </div>
</div>
<div id="ig-02-close"></div>
```

**CSS:**
```css
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
body{background:#0a0a0f;font-family:'DM Sans',sans-serif;padding:2rem}
.ig-02__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}
.ig-02__thumb{border-radius:10px;overflow:hidden;cursor:pointer;display:block;text-decoration:none;position:relative;transition:transform .25s ease,box-shadow .25s ease;box-shadow:0 4px 20px rgba(0,0,0,.5)}
.ig-02__thumb:hover{transform:scale(1.04) translateY(-2px);box-shadow:0 16px 40px rgba(0,0,0,.6)}
.ig-02__thumb svg{display:block;width:100%;aspect-ratio:1}
.ig-02__badge{position:absolute;bottom:.7rem;left:.7rem;color:rgba(255,255,255,.9);font-size:.7rem;font-weight:600;background:rgba(0,0,0,.4);backdrop-filter:blur(6px);padding:.2rem .55rem;border-radius:5px;font-family:'Playfair Display',serif;font-style:italic}
.ig-02__overlay{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;background:rgba(5,5,10,.95);opacity:0;pointer-events:none;transition:opacity .35s ease}
.ig-02__overlay:target{opacity:1;pointer-events:all}
.ig-02__overlay:target .ig-02__full{transform:scale(1);opacity:1}
.ig-02__full{width:clamp(300px,85vw,700px);aspect-ratio:4/3;border-radius:18px;transform:scale(.88);opacity:0;transition:transform .4s cubic-bezier(.34,1.56,.64,1),opacity .35s ease;box-shadow:0 40px 100px rgba(0,0,0,.7);overflow:hidden}
.ig-02__full svg{width:100%;height:100%}
.ig-02__close{position:absolute;top:1.5rem;right:1.5rem;color:#fff;font-size:1.8rem;text-decoration:none;width:46px;height:46px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.12);border-radius:50%;backdrop-filter:blur(8px);transition:background .2s ease;line-height:1}
.ig-02__close:hover{background:rgba(255,255,255,.25)}
.ig-02__caption-lg{position:absolute;bottom:2rem;left:2rem;right:2rem;color:#fff;font-family:'Playfair Display',serif}
.ig-02__caption-lg h3{font-size:1.6rem;font-weight:700;margin-bottom:.3rem}
.ig-02__caption-lg p{font-size:.85rem;color:rgba(255,255,255,.6);font-style:italic;font-family:'DM Sans',sans-serif}
@media(prefers-reduced-motion:reduce){.ig-02__overlay,.ig-02__full,.ig-02__thumb{transition:none}}
```

### 03. CSS Infinite Scroll Image Strip

**Type:** CSS + JS
**Description:** An auto-scrolling horizontal filmstrip of illustrated world photography cards with a mask fade on each edge and JS-powered pause on hover.

**HTML:**
```html
<div class="ig-03">
  <p class="ig-03__label">Hover to pause · Auto-scrolling world photography</p>
  <div class="ig-03__viewport">
    <div class="ig-03__track" id="ig-03-track">
      <!-- 1: Icelandic waterfall -->
      <div class="ig-03__card">
        <svg viewBox="0 0 220 260" xmlns="http://www.w3.org/2000/svg">
          <defs><linearGradient id="wfg" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#2a4a6a"/><stop offset="60%" stop-color="#1a3a5a"/><stop offset="100%" stop-color="#0d2a40"/></linearGradient><filter id="wff"><feGaussianBlur stdDeviation="3"/></filter></defs>
          <rect width="220" height="260" fill="url(#wfg)"/>
          <!-- Cliff faces -->
          <rect x="0" y="0" width="60" height="200" fill="#3a3a2a"/>
          <rect x="160" y="0" width="60" height="220" fill="#2a2a1a"/>
          <!-- Mossy cliff detail -->
          <g fill="#2a4a1a" opacity=".7"><rect x="0" y="40" width="60" height="8"/><rect x="0" y="80" width="58" height="6"/><rect x="0" y="120" width="62" height="7"/><rect x="160" y="55" width="60" height="8"/><rect x="162" y="100" width="58" height="6"/><rect x="158" y="145" width="62" height="7"/></g>
          <!-- Waterfall main -->
          <g filter="url(#wff)">
            <rect x="75" y="0" width="30" height="180" fill="#c8e8f8" opacity=".85"/>
            <rect x="100" y="0" width="20" height="160" fill="#d8f0ff" opacity=".7"/>
            <rect x="68" y="0" width="12" height="140" fill="#b8d8f0" opacity=".6"/>
          </g>
          <!-- Waterfall detail streaks -->
          <g stroke="#e8f8ff" stroke-width="1" fill="none" opacity=".5">
            <line x1="80" y1="0" x2="76" y2="180"/><line x1="90" y1="0" x2="88" y2="175"/>
            <line x1="100" y1="0" x2="99" y2="160"/><line x1="110" y1="0" x2="112" y2="168"/>
            <line x1="120" y1="0" x2="122" y2="155"/>
          </g>
          <!-- Mist pool at base -->
          <ellipse cx="110" cy="185" rx="80" ry="25" fill="#c8e8ff" opacity=".5" filter="url(#wff)"/>
          <ellipse cx="110" cy="195" rx="60" ry="15" fill="#d8f0ff" opacity=".4"/>
          <!-- Pool water -->
          <ellipse cx="110" cy="210" rx="75" ry="22" fill="#2060a0" opacity=".8"/>
          <ellipse cx="110" cy="215" rx="55" ry="14" fill="#3070b0" opacity=".6"/>
          <!-- Rocks -->
          <g fill="#1a1a14">
            <ellipse cx="50" cy="220" rx="18" ry="9"/><ellipse cx="170" cy="218" rx="20" ry="10"/>
            <ellipse cx="100" cy="225" rx="10" ry="6"/><ellipse cx="140" cy="228" rx="12" ry="7"/>
          </g>
          <!-- Rainbow in mist -->
          <path d="M40,190 Q110,150 180,190" stroke="none" fill="none"/>
          <path d="M50,188 Q110,155 170,188" stroke="#ff6060" stroke-width="2" fill="none" opacity=".25"/>
          <path d="M52,191 Q110,158 168,191" stroke="#ff9900" stroke-width="2" fill="none" opacity=".22"/>
          <path d="M54,194 Q110,161 166,194" stroke="#ffee00" stroke-width="2" fill="none" opacity=".22"/>
          <path d="M56,197 Q110,164 164,197" stroke="#00cc44" stroke-width="2" fill="none" opacity=".2"/>
          <path d="M58,200 Q110,167 162,200" stroke="#0088ff" stroke-width="2" fill="none" opacity=".2"/>
          <!-- Fern foliage -->
          <g fill="#1a4a14" opacity=".8">
            <path d="M10,200 Q20,180 30,195 Q20,178 35,172 Q22,175 40,165 Q28,168 42,158"/>
            <path d="M180,195 Q192,175 200,188 Q190,172 208,165 Q194,168 210,158"/>
          </g>
        </svg>
        <div class="ig-03__card-label">Skógafoss · Iceland</div>
      </div>
      <!-- 2: Moroccan spice market -->
      <div class="ig-03__card">
        <svg viewBox="0 0 220 260" xmlns="http://www.w3.org/2000/svg">
          <defs><filter id="sf2"><feGaussianBlur stdDeviation="2"/></filter></defs>
          <rect width="220" height="260" fill="#1a0d05"/>
          <!-- Market stall awning -->
          <g>
            <polygon points="0,0 220,0 220,50 0,50" fill="#c43a10"/>
            <g fill="#e04818">
              <polygon points="0,50 22,35 44,50"/><polygon points="44,50 66,35 88,50"/>
              <polygon points="88,50 110,35 132,50"/><polygon points="132,50 154,35 176,50"/>
              <polygon points="176,50 198,35 220,50"/>
            </g>
          </g>
          <!-- Spice piles -->
          <!-- Saffron/yellow -->
          <ellipse cx="35" cy="135" rx="28" ry="14" fill="#f0c020"/>
          <ellipse cx="35" cy="128" rx="22" ry="10" fill="#f8d040"/>
          <!-- Paprika/red -->
          <ellipse cx="110" cy="130" rx="30" ry="15" fill="#d03020"/>
          <ellipse cx="110" cy="122" rx="24" ry="11" fill="#e04030"/>
          <!-- Turmeric/orange -->
          <ellipse cx="185" cy="133" rx="28" ry="13" fill="#e08020"/>
          <ellipse cx="185" cy="126" rx="22" ry="10" fill="#f09030"/>
          <!-- Cumin/brown -->
          <ellipse cx="60" cy="195" rx="26" ry="13" fill="#6a3a18"/>
          <ellipse cx="60" cy="188" rx="20" ry="9" fill="#8a5028"/>
          <!-- Coriander/green -->
          <ellipse cx="155" cy="192" rx="28" ry="14" fill="#4a8a1a"/>
          <ellipse cx="155" cy="185" rx="22" ry="10" fill="#5aa828"/>
          <!-- Cinnamon sticks jar -->
          <rect x="190" y="172" width="24" height="38" rx="4" fill="#8a4818"/>
          <rect x="192" y="170" width="20" height="8" rx="3" fill="#a05a28"/>
          <g stroke="#6a3010" stroke-width="2" opacity=".8">
            <line x1="194" y1="175" x2="212" y2="175"/><line x1="194" y1="181" x2="212" y2="181"/>
            <line x1="194" y1="187" x2="212" y2="187"/>
          </g>
          <!-- Metal bowls -->
          <g fill="none" stroke="#c0a030" stroke-width="1.5">
            <ellipse cx="35" cy="138" rx="28" ry="7"/><ellipse cx="110" cy="134" rx="30" ry="7"/>
            <ellipse cx="185" cy="137" rx="28" ry="7"/><ellipse cx="60" cy="198" rx="26" ry="7"/>
            <ellipse cx="155" cy="196" rx="28" ry="7"/>
          </g>
          <!-- Price tags -->
          <g fill="#f5e8c0" font-size="7" font-family="sans-serif">
            <rect x="18" y="108" width="24" height="12" rx="2" fill="#f5e8c0"/>
            <text x="22" y="117" fill="#4a1a05">15 DH</text>
            <rect x="94" y="104" width="24" height="12" rx="2" fill="#f5e8c0"/>
            <text x="98" y="113" fill="#4a1a05">20 DH</text>
          </g>
          <!-- Hanging lanterns -->
          <g>
            <line x1="55" y1="50" x2="55" y2="80" stroke="#8a6020" stroke-width="1.5"/>
            <ellipse cx="55" cy="80" rx="12" ry="16" fill="#c04010" opacity=".8"/>
            <ellipse cx="55" cy="80" rx="8" ry="12" fill="#e06020" opacity=".6"/>
            <circle cx="55" cy="80" r="4" fill="#ff8020" opacity=".7" filter="url(#sf2)"/>
            <line x1="150" y1="50" x2="150" y2="72" stroke="#8a6020" stroke-width="1.5"/>
            <ellipse cx="150" cy="72" rx="10" ry="14" fill="#c04010" opacity=".8"/>
            <circle cx="150" cy="72" r="3.5" fill="#ff8020" opacity=".7" filter="url(#sf2)"/>
          </g>
          <!-- Sunbeam from top -->
          <polygon points="80,0 140,0 180,260 140,260" fill="#fff8e0" opacity=".04"/>
        </svg>
        <div class="ig-03__card-label">Spice Souk · Marrakech</div>
      </div>
      <!-- 3: Patagonian peak -->
      <div class="ig-03__card">
        <svg viewBox="0 0 220 260" xmlns="http://www.w3.org/2000/svg">
          <defs><linearGradient id="ptg" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#1a3a5c"/><stop offset="40%" stop-color="#2a5a8a"/><stop offset="70%" stop-color="#3a7aaa"/><stop offset="100%" stop-color="#5a9aba"/></linearGradient><filter id="ptf"><feGaussianBlur stdDeviation="4"/></filter></defs>
          <rect width="220" height="260" fill="url(#ptg)"/>
          <!-- Dramatic clouds -->
          <g opacity=".85" filter="url(#ptf)">
            <ellipse cx="60" cy="55" rx="80" ry="35" fill="#c8d8e8"/>
            <ellipse cx="160" cy="42" rx="75" ry="30" fill="#d8e8f8"/>
            <ellipse cx="110" cy="38" rx="60" ry="25" fill="#e8f4ff"/>
          </g>
          <!-- Fitz Roy main peak -->
          <polygon points="80,260 75,180 90,130 100,100 110,70 120,100 130,130 145,180 140,260" fill="#4a4a4a"/>
          <!-- Snow patches on peak -->
          <polygon points="100,100 110,70 120,100 118,108 102,108" fill="#e8f0f8"/>
          <polygon points="90,130 100,100 102,108 95,140" fill="#d8e8f0" opacity=".7"/>
          <polygon points="128,108 120,100 130,130 125,140" fill="#d8e8f0" opacity=".7"/>
          <!-- Adjacent towers -->
          <polygon points="0,260 0,210 20,175 40,210 40,260" fill="#3a3a3a"/>
          <polygon points="175,260 175,195 192,165 210,195 210,260" fill="#3a3a3a"/>
          <polygon points="38,260 36,215 50,183 65,215 65,260" fill="#424242"/>
          <polygon points="155,260 153,200 168,172 183,200 183,260" fill="#424242"/>
          <!-- Rock detail/cracks -->
          <g stroke="#2a2a2a" stroke-width="1" fill="none" opacity=".6">
            <path d="M100,150 Q102,165 98,185"/><path d="M118,145 Q116,160 120,180"/>
            <path d="M108,130 Q110,140 107,155"/>
          </g>
          <!-- Lake in foreground -->
          <path d="M0,230 Q55,212 110,220 Q165,212 220,228 L220,260 L0,260 Z" fill="#2a6080"/>
          <path d="M0,238 Q55,225 110,232 Q165,225 220,236 L220,260 L0,260 Z" fill="#3a7090" opacity=".7"/>
          <!-- Peak reflection in lake -->
          <polygon points="80,260 75,240 100,240 110,252 120,240 145,240 140,260" fill="#3a6a88" opacity=".35"/>
          <!-- Windswept grass -->
          <g stroke="#5a8a2a" stroke-width="1.5" stroke-linecap="round" opacity=".7">
            <path d="M10,230 Q6,218 12,210"/><path d="M25,228 Q21,216 27,208"/>
            <path d="M185,228 Q181,216 187,208"/><path d="M200,232 Q196,220 202,212"/>
            <path d="M210,226 Q206,214 212,206"/>
          </g>
          <!-- Condor silhouette -->
          <g fill="#1a1a1a" transform="translate(155,88)">
            <path d="M0,-5 Q10,-15 20,-8 Q15,0 0,2 Q-15,0 -20,-8 Q-10,-15 0,-5 Z"/>
            <ellipse cx="0" cy="0" rx="5" ry="8"/>
            <path d="M0,8 Q-3,14 -2,18"/>
          </g>
          <!-- Stars visible in sky -->
          <g fill="#fff" opacity=".5"><circle cx="25" cy="18" r=".9"/><circle cx="185" cy="12" r="1"/><circle cx="205" cy="25" r=".8"/></g>
        </svg>
        <div class="ig-03__card-label">Fitz Roy · Patagonia</div>
      </div>
      <!-- 4: Japanese temple gate -->
      <div class="ig-03__card">
        <svg viewBox="0 0 220 260" xmlns="http://www.w3.org/2000/svg">
          <defs><linearGradient id="tpg" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#87ceeb"/><stop offset="60%" stop-color="#b0e0ff"/><stop offset="100%" stop-color="#d0ecf8"/></linearGradient><filter id="tpf"><feGaussianBlur stdDeviation="2"/></filter></defs>
          <rect width="220" height="260" fill="url(#tpg)"/>
          <!-- Cherry blossoms sky -->
          <g filter="url(#tpf)" opacity=".5">
            <circle cx="30" cy="40" r="20" fill="#f8c8d8"/><circle cx="60" cy="28" r="25" fill="#fad8e8"/>
            <circle cx="160" cy="35" r="22" fill="#f8c8d8"/><circle cx="195" cy="22" r="18" fill="#fad8e8"/>
            <circle cx="110" cy="20" r="15" fill="#f8d8e8"/>
          </g>
          <!-- Torii gate main -->
          <!-- Base pillars -->
          <rect x="50" y="80" width="18" height="180" fill="#cc2200"/>
          <rect x="152" y="80" width="18" height="180" fill="#cc2200"/>
          <!-- Pillar base rings -->
          <rect x="46" y="240" width="26" height="12" rx="2" fill="#aa1a00"/>
          <rect x="148" y="240" width="26" height="12" rx="2" fill="#aa1a00"/>
          <!-- Top horizontal beams -->
          <rect x="30" y="72" width="160" height="16" rx="4" fill="#cc2200"/>
          <rect x="30" y="82" width="160" height="5" rx="2" fill="#aa1a00" opacity=".6"/>
          <!-- Curved top beam -->
          <path d="M22,60 Q110,38 198,60 L195,72 Q110,50 25,72 Z" fill="#cc2200"/>
          <!-- Second horizontal strut -->
          <rect x="58" y="110" width="104" height="10" rx="3" fill="#aa1a00"/>
          <!-- Gold/metal detail -->
          <g fill="#cc8800" opacity=".8">
            <rect x="55" y="88" width="8" height="12" rx="2"/><rect x="157" y="88" width="8" height="12" rx="2"/>
            <circle cx="110" cy="55" r="6"/><circle cx="40" cy="66" r="4"/><circle cx="180" cy="66" r="4"/>
          </g>
          <!-- Stone path -->
          <g fill="#9a9080">
            <ellipse cx="110" cy="245" rx="22" ry="10"/><ellipse cx="110" cy="225" rx="18" ry="8"/>
            <ellipse cx="110" cy="208" rx="16" ry="7"/>
          </g>
          <!-- Stone lanterns flanking -->
          <g fill="#7a7060">
            <rect x="12" y="185" width="24" height="30" rx="2"/>
            <rect x="8" y="182" width="32" height="6" rx="2"/>
            <rect x="14" y="165" width="20" height="22" rx="1"/>
            <rect x="10" y="162" width="28" height="5" rx="2"/>
            <rect x="184" y="185" width="24" height="30" rx="2"/>
            <rect x="180" y="182" width="32" height="6" rx="2"/>
            <rect x="186" y="165" width="20" height="22" rx="1"/>
            <rect x="182" y="162" width="28" height="5" rx="2"/>
          </g>
          <!-- Lantern glow -->
          <rect x="16" y="168" width="16" height="18" fill="#ffcc40" opacity=".6" filter="url(#tpf)"/>
          <rect x="188" y="168" width="16" height="18" fill="#ffcc40" opacity=".6" filter="url(#tpf)"/>
          <!-- Temple in background -->
          <rect x="75" y="130" width="70" height="50" fill="#8a6a40" opacity=".4"/>
          <polygon points="65,130 110,108 155,130" fill="#6a5030" opacity=".4"/>
          <polygon points="60,128 110,104 160,128" fill="#8a6a40" opacity=".3"/>
          <!-- Falling petals -->
          <g fill="#f8c8d8" opacity=".6">
            <ellipse cx="80" cy="155" rx="4" ry="2.5" transform="rotate(25,80,155)"/>
            <ellipse cx="145" cy="140" rx="3.5" ry="2" transform="rotate(-18,145,140)"/>
            <ellipse cx="25" cy="175" rx="4" ry="2.5" transform="rotate(35,25,175)"/>
            <ellipse cx="192" cy="160" rx="3" ry="2" transform="rotate(-30,192,160)"/>
          </g>
        </svg>
        <div class="ig-03__card-label">Fushimi Inari · Kyoto</div>
      </div>
      <!-- 5: Antelope canyon -->
      <div class="ig-03__card">
        <svg viewBox="0 0 220 260" xmlns="http://www.w3.org/2000/svg">
          <defs>
            <linearGradient id="acg" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0%" stop-color="#c06010"/>
              <stop offset="30%" stop-color="#d07820"/>
              <stop offset="60%" stop-color="#e08830"/>
              <stop offset="100%" stop-color="#b05008"/>
            </linearGradient>
            <linearGradient id="acw" x1="0" y1="0" x2="1" y2="0">
              <stop offset="0%" stop-color="#8a3800"/>
              <stop offset="30%" stop-color="#e06010"/>
              <stop offset="70%" stop-color="#f08020"/>
              <stop offset="100%" stop-color="#a04010"/>
            </linearGradient>
            <filter id="acf"><feGaussianBlur stdDeviation="3"/></filter>
          </defs>
          <rect width="220" height="260" fill="url(#acg)"/>
          <!-- Canyon walls with undulating curves -->
          <!-- Left wall layers -->
          <path d="M0,0 Q25,80 10,160 Q0,220 20,260 L0,260 Z" fill="#6a2800"/>
          <path d="M0,0 Q40,60 22,140 Q8,210 30,260 L0,260 Z" fill="#8a3808"/>
          <path d="M0,0 Q55,50 35,130 Q18,200 40,260 L0,260 Z" fill="#aa4810" opacity=".8"/>
          <!-- Right wall layers -->
          <path d="M220,0 Q195,80 210,160 Q220,220 200,260 L220,260 Z" fill="#6a2800"/>
          <path d="M220,0 Q180,60 198,140 Q212,210 190,260 L220,260 Z" fill="#8a3808"/>
          <path d="M220,0 Q165,50 185,130 Q202,200 180,260 L220,260 Z" fill="#aa4810" opacity=".8"/>
          <!-- Central light beam from top -->
          <path d="M60,0 Q110,20 80,120 Q65,180 70,260 L150,260 Q155,180 140,120 Q110,20 160,0 Z" fill="url(#acw)" opacity=".7"/>
          <!-- Beam of light -->
          <polygon points="85,0 135,0 155,260 65,260" fill="#fff8e0" opacity=".08" filter="url(#acf)"/>
          <polygon points="95,0 125,0 140,260 80,260" fill="#fff8e0" opacity=".06" filter="url(#acf)"/>
          <!-- Sand swirls at bottom -->
          <g fill="#f0c060" opacity=".6">
            <ellipse cx="110" cy="248" rx="55" ry="8" filter="url(#acf)"/>
            <ellipse cx="110" cy="255" rx="40" ry="5"/>
          </g>
          <!-- Wave texture on walls -->
          <g stroke="#c06020" stroke-width="1.5" fill="none" opacity=".4">
            <path d="M18,60 Q35,75 28,95 Q22,110 35,125"/>
            <path d="M22,100 Q38,115 32,135 Q26,150 40,165"/>
            <path d="M202,55 Q186,70 192,90 Q198,108 185,122"/>
            <path d="M198,95 Q183,110 188,130 Q194,148 180,162"/>
          </g>
          <!-- Sky slit at top -->
          <path d="M62,0 L158,0 Q150,15 140,25 Q120,8 100,20 Q80,8 70,22 Q62,14 62,0 Z" fill="#6a9ac8" opacity=".6"/>
          <path d="M75,0 L145,0 Q140,12 130,18 Q110,8 100,15 Q88,8 80,16 Q75,10 75,0 Z" fill="#88b8e0" opacity=".5"/>
        </svg>
        <div class="ig-03__card-label">Antelope Canyon · Arizona</div>
      </div>
      <!-- 6: Tuscany hills -->
      <div class="ig-03__card">
        <svg viewBox="0 0 220 260" xmlns="http://www.w3.org/2000/svg">
          <defs><linearGradient id="tug" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#87b5d8"/><stop offset="40%" stop-color="#b8d4e8"/><stop offset="70%" stop-color="#d4e8c0"/><stop offset="100%" stop-color="#c8d8a0"/></linearGradient></defs>
          <rect width="220" height="260" fill="url(#tug)"/>
          <!-- Rolling hills -->
          <path d="M0,150 Q55,118 110,135 Q165,118 220,138 L220,260 L0,260 Z" fill="#8aaa3a"/>
          <path d="M0,168 Q50,148 100,158 Q155,145 220,162 L220,260 L0,260 Z" fill="#7a9a2a"/>
          <path d="M0,185 Q60,168 120,178 Q175,165 220,180 L220,260 L0,260 Z" fill="#6a8a1a"/>
          <path d="M0,200 Q70,185 140,195 Q185,185 220,195 L220,260 L0,260 Z" fill="#5a7a10"/>
          <!-- Farmhouse -->
          <g fill="#c8a060">
            <rect x="88" y="148" width="44" height="28"/>
            <polygon points="82,148 110,130 138,148" fill="#e8b060"/>
          </g>
          <!-- Roof tiles -->
          <g stroke="#a06030" stroke-width="1" fill="none" opacity=".5">
            <line x1="82" y1="148" x2="138" y2="148"/>
            <line x1="88" y1="142" x2="132" y2="142"/>
            <line x1="94" y1="136" x2="126" y2="136"/>
            <line x1="100" y1="130" x2="120" y2="130"/>
          </g>
          <!-- Windows -->
          <rect x="93" y="154" width="10" height="12" rx="2" fill="#6888aa"/>
          <rect x="117" y="154" width="10" height="12" rx="2" fill="#6888aa"/>
          <!-- Door -->
          <rect x="103" y="163" width="8" height="13" rx="1" fill="#6a4018"/>
          <!-- Cypress trees -->
          <g fill="#2a4a14">
            <ellipse cx="60" cy="148" rx="7" ry="22"/><rect x="57" y="168" width="6" height="12" rx="2"/>
            <ellipse cx="75" cy="152" rx="6" ry="18"/><rect x="72" y="168" width="5" height="12" rx="2"/>
            <ellipse cx="150" cy="150" rx="7" ry="22"/><rect x="147" y="170" width="6" height="10" rx="2"/>
            <ellipse cx="163" cy="153" rx="6" ry="18"/><rect x="160" y="170" width="5" height="10" rx="2"/>
            <ellipse cx="175" cy="148" rx="7" ry="22"/><rect x="172" y="168" width="6" height="12" rx="2"/>
          </g>
          <!-- Winding road -->
          <path d="M0,230 Q55,215 88,200 Q115,188 140,200 Q165,213 220,200" stroke="#c8b080" stroke-width="5" fill="none" opacity=".6"/>
          <!-- Vineyard rows -->
          <g stroke="#4a6a18" stroke-width="1.2" fill="none" opacity=".5">
            <path d="M0,218 Q30,210 60,215"/><path d="M0,224 Q30,216 60,221"/>
            <path d="M0,230 Q25,222 50,227"/><path d="M160,215 Q190,207 220,212"/>
            <path d="M165,222 Q195,214 220,219"/>
          </g>
          <!-- Sunflower field -->
          <g fill="#f0c000" opacity=".7">
            <circle cx="22" cy="210" r="4"/><circle cx="32" cy="206" r="3.5"/><circle cx="12" cy="215" r="3"/>
            <circle cx="42" cy="210" r="4"/><circle cx="52" cy="205" r="3.5"/>
          </g>
          <!-- Olive tree -->
          <g fill="#6a8a28" opacity=".8">
            <circle cx="190" cy="178" r="16"/><circle cx="200" cy="172" r="12"/>
            <circle cx="183" cy="172" r="11"/>
          </g>
          <rect x="192" y="190" width="5" height="20" rx="2" fill="#5a3a18"/>
        </svg>
        <div class="ig-03__card-label">Val d'Orcia · Tuscany</div>
      </div>
      <!-- 7: Maldives overwater bungalow -->
      <div class="ig-03__card">
        <svg viewBox="0 0 220 260" xmlns="http://www.w3.org/2000/svg">
          <defs><linearGradient id="mlg" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#0088cc"/><stop offset="35%" stop-color="#00aadd"/><stop offset="60%" stop-color="#20ccee"/><stop offset="100%" stop-color="#40ddee"/></linearGradient><filter id="mlf"><feGaussianBlur stdDeviation="3"/></filter></defs>
          <rect width="220" height="260" fill="url(#mlg)"/>
          <!-- Sky gradient top -->
          <rect width="220" height="100" fill="#4499cc" opacity=".4"/>
          <rect width="220" height="60" fill="#55aad4" opacity=".3"/>
          <!-- Horizon line / sea edge -->
          <rect x="0" y="98" width="220" height="2" fill="#0066aa" opacity=".3"/>
          <!-- Water reflections -->
          <g stroke="#40ccee" stroke-width=".8" fill="none" opacity=".3">
            <path d="M0,115 Q55,108 110,115 Q165,108 220,115"/>
            <path d="M0,128 Q50,122 110,128 Q170,122 220,128"/>
            <path d="M0,142 Q55,136 110,142 Q165,136 220,142"/>
            <path d="M0,158 Q50,152 110,158 Q170,152 220,158"/>
          </g>
          <!-- Dock/pier -->
          <rect x="95" y="95" width="30" height="165" fill="#8a6a3a" opacity=".9"/>
          <g stroke="#7a5a2a" stroke-width="1" fill="none" opacity=".5">
            <line x1="95" y1="110" x2="125" y2="110"/><line x1="95" y1="125" x2="125" y2="125"/>
            <line x1="95" y1="140" x2="125" y2="140"/><line x1="95" y1="155" x2="125" y2="155"/>
            <line x1="95" y1="170" x2="125" y2="170"/><line x1="95" y1="185" x2="125" y2="185"/>
          </g>
          <!-- Bungalow base -->
          <rect x="68" y="60" width="84" height="55" fill="#e8d4a0" rx="3"/>
          <!-- Thatched roof -->
          <path d="M55,65 Q110,35 165,65 L158,72 Q110,44 62,72 Z" fill="#a07830"/>
          <path d="M60,68 Q110,40 160,68 L154,74 Q110,46 66,74 Z" fill="#c09040" opacity=".7"/>
          <!-- Roof thatch lines -->
          <g stroke="#8a6020" stroke-width=".8" fill="none" opacity=".5">
            <line x1="80" y1="55" x2="78" y2="68"/><line x1="90" y1="48" x2="88" y2="65"/>
            <line x1="100" y1="44" x2="100" y2="63"/><line x1="110" y1="42" x2="110" y2="63"/>
            <line x1="120" y1="44" x2="122" y2="63"/><line x1="130" y1="48" x2="132" y2="65"/>
            <line x1="140" y1="55" x2="142" y2="68"/>
          </g>
          <!-- Windows -->
          <rect x="76" y="72" width="18" height="22" rx="2" fill="#88c8e8"/>
          <rect x="126" y="72" width="18" height="22" rx="2" fill="#88c8e8"/>
          <!-- Door -->
          <rect x="100" y="80" width="20" height="35" rx="2" fill="#6a4a20"/>
          <!-- Deck/balcony -->
          <rect x="62" y="105" width="96" height="12" rx="2" fill="#c8a860"/>
          <g fill="#a08840">
            <rect x="65" y="102" width="4" height="15"/><rect x="80" y="102" width="4" height="15"/>
            <rect x="95" y="102" width="4" height="15"/><rect x="110" y="102" width="4" height="15"/>
            <rect x="125" y="102" width="4" height="15"/><rect x="140" y="102" width="4" height="15"/>
            <rect x="152" y="102" width="4" height="15"/>
          </g>
          <!-- Palm tree on deck -->
          <g transform="translate(55,105)">
            <line x1="0" y1="0" x2="-5" y2="-35" stroke="#6a4a1a" stroke-width="3" stroke-linecap="round"/>
            <g fill="#2a6a18" opacity=".9">
              <ellipse cx="-12" cy="-38" rx="14" ry="5" transform="rotate(-30,-12,-38)"/>
              <ellipse cx="-3" cy="-42" rx="14" ry="5" transform="rotate(15,-3,-42)"/>
              <ellipse cx="-18" cy="-30" rx="12" ry="4" transform="rotate(-50,-18,-30)"/>
            </g>
          </g>
          <!-- Sea fish visible through clear water -->
          <g fill="#0055aa" opacity=".3">
            <ellipse cx="40" cy="180" rx="8" ry="4"/><ellipse cx="60" cy="195" rx="6" ry="3"/>
            <ellipse cx="175" cy="185" rx="7" ry="3.5"/><ellipse cx="195" cy="200" rx="8" ry="4"/>
          </g>
          <!-- Sky clouds -->
          <g fill="#fff" opacity=".6" filter="url(#mlf)">
            <ellipse cx="35" cy="30" rx="30" ry="12"/><ellipse cx="180" cy="22" rx="28" ry="10"/>
          </g>
        </svg>
        <div class="ig-03__card-label">Overwater Bungalow · Maldives</div>
      </div>
      <!-- 8: Norwegian fjord -->
      <div class="ig-03__card">
        <svg viewBox="0 0 220 260" xmlns="http://www.w3.org/2000/svg">
          <defs><linearGradient id="fjg" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#4a88b8"/><stop offset="40%" stop-color="#6aaad4"/><stop offset="60%" stop-color="#2a6088"/><stop offset="100%" stop-color="#1a4a6a"/></linearGradient><filter id="fjf"><feGaussianBlur stdDeviation="3"/></filter></defs>
          <rect width="220" height="260" fill="url(#fjg)"/>
          <!-- Dramatic cliff walls -->
          <polygon points="0,0 0,260 55,220 35,140 50,80 30,0" fill="#2a3a2a"/>
          <polygon points="0,0 40,0 55,80 38,150 58,225 0,260" fill="#3a4a3a"/>
          <polygon points="220,0 220,260 165,218 185,138 170,78 190,0" fill="#2a3a2a"/>
          <polygon points="220,0 180,0 165,78 182,148 162,222 220,260" fill="#3a4a3a"/>
          <!-- Waterfall on cliff -->
          <path d="M32,40 Q30,90 28,140 Q26,180 30,220" stroke="#c8e8f8" stroke-width="3" fill="none" opacity=".6" filter="url(#fjf)"/>
          <path d="M35,40 Q33,85 32,135 Q30,175 34,218" stroke="#d8f0ff" stroke-width="2" fill="none" opacity=".5"/>
          <!-- Snow on cliff tops -->
          <polygon points="0,0 40,0 38,22 20,18 0,14" fill="#e8f0f8" opacity=".8"/>
          <polygon points="180,0 220,0 220,18 200,22 182,18" fill="#e8f0f8" opacity=".8"/>
          <!-- Green on cliffs (vegetation) -->
          <g fill="#2a5a1a" opacity=".6">
            <ellipse cx="30" cy="90" rx="20" ry="12"/><ellipse cx="15" cy="110" rx="18" ry="10"/>
            <ellipse cx="195" cy="88" rx="18" ry="11"/><ellipse cx="208" cy="112" rx="16" ry="9"/>
          </g>
          <!-- Fjord water -->
          <path d="M50,130 Q110,118 170,130 L175,260 L45,260 Z" fill="#1a4a6a" opacity=".9"/>
          <path d="M55,140 Q110,130 165,140 L168,260 L52,260 Z" fill="#2a5a7a" opacity=".8"/>
          <!-- Water reflections -->
          <g stroke="#3a7a9a" stroke-width="1" fill="none" opacity=".4">
            <path d="M55,160 Q110,152 165,160"/><path d="M57,175 Q110,167 163,175"/>
            <path d="M60,190 Q110,182 160,190"/><path d="M62,208 Q110,200 158,208"/>
          </g>
          <!-- Cliff reflection in water -->
          <polygon points="50,130 55,260 0,260 0,130" fill="#2a3a2a" opacity=".2"/>
          <polygon points="170,130 165,260 220,260 220,130" fill="#2a3a2a" opacity=".2"/>
          <!-- Small village at base -->
          <g fill="#c8a860" opacity=".9">
            <rect x="62" y="215" width="22" height="18"/><polygon points="57,215 73,202 89,215" fill="#e8c070"/>
            <rect x="92" y="218" width="18" height="15"/><polygon points="88,218 101,207 114,218" fill="#e8c070"/>
            <rect x="118" y="215" width="20" height="18"/><polygon points="114,215 128,202 142,215" fill="#e8c070"/>
          </g>
          <!-- Boat on fjord -->
          <g transform="translate(100,200)">
            <path d="M-18,0 Q0,-4 18,0 Q14,8 -14,8 Z" fill="#d04020"/>
            <rect x="-2" y="-14" width="3" height="14" fill="#8a6030"/>
            <polygon points="-1,-14 -1,-4 8,-8" fill="#e8f4ff" opacity=".7"/>
          </g>
          <!-- Cloud reflections -->
          <g fill="#fff" opacity=".3" filter="url(#fjf)">
            <ellipse cx="110" cy="148" rx="30" ry="8"/>
          </g>
          <!-- Sky clouds -->
          <g fill="#fff" opacity=".7" filter="url(#fjf)">
            <ellipse cx="80" cy="25" rx="38" ry="14"/><ellipse cx="165" cy="18" rx="30" ry="11"/>
          </g>
        </svg>
        <div class="ig-03__card-label">Nærøyfjord · Norway</div>
      </div>
    </div>
  </div>
</div>
<script>
(function(){
  const track=document.getElementById('ig-03-track');
  const wrapper=track&&track.closest('.ig-03');
  if(!track||!wrapper)return;
  Array.from(track.children).forEach(el=>track.appendChild(el.cloneNode(true)));
  wrapper.addEventListener('mouseenter',()=>wrapper.style.setProperty('--play','paused'));
  wrapper.addEventListener('mouseleave',()=>wrapper.style.setProperty('--play','running'));
}());
</script>
```

**CSS:**
```css
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
body{background:#0a0a12;font-family:'DM Sans',sans-serif;padding:3rem 0;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;gap:2rem}
.ig-03{--play:running;width:100%}
.ig-03__label{color:rgba(255,255,255,.35);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;text-align:center;margin-bottom:1.2rem}
.ig-03__viewport{overflow:hidden;mask-image:linear-gradient(to right,transparent,black 8%,black 92%,transparent);-webkit-mask-image:linear-gradient(to right,transparent,black 8%,black 92%,transparent)}
.ig-03__track{display:flex;gap:1.2rem;width:max-content;animation:ig-03-scroll 24s linear infinite;animation-play-state:var(--play);will-change:transform}
.ig-03__card{flex-shrink:0;width:220px;height:260px;border-radius:16px;overflow:hidden;position:relative;box-shadow:0 8px 30px rgba(0,0,0,.4)}
.ig-03__card svg{width:100%;height:100%;display:block}
.ig-03__card-label{position:absolute;bottom:0;left:0;right:0;padding:.9rem 1rem;background:linear-gradient(to top,rgba(0,0,0,.8),transparent);color:#fff;font-size:.78rem;font-weight:600;letter-spacing:.04em}
@keyframes ig-03-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.ig-03__track{animation:none}}
```

**JS:**
```js
(function(){
  const track=document.getElementById('ig-03-track');
  const wrapper=track&&track.closest('.ig-03');
  if(!track||!wrapper)return;
  Array.from(track.children).forEach(el=>track.appendChild(el.cloneNode(true)));
  wrapper.addEventListener('mouseenter',()=>wrapper.style.setProperty('--play','paused'));
  wrapper.addEventListener('mouseleave',()=>wrapper.style.setProperty('--play','running'));
}());
```

### 04. CSS Polaroid Stack Gallery

**Type:** CSS + JS
**Description:** Five vintage-style polaroid photos stacked with random rotations that fan out on hover, with a flip animation triggered on click.

**HTML:**
```html
<div class="ig-04">
  <div class="ig-04__scene">
    <div class="ig-04__stack" id="ig-04-stack">
      <!-- Polaroid 1: Venice canal -->
      <div class="ig-04__card">
        <div class="ig-04__photo">
          <svg viewBox="0 0 150 150" xmlns="http://www.w3.org/2000/svg">
            <defs><linearGradient id="vg" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#6aaad4"/><stop offset="50%" stop-color="#3a88b8"/><stop offset="100%" stop-color="#2a6090"/></linearGradient></defs>
            <rect width="150" height="150" fill="url(#vg)"/>
            <!-- Buildings -->
            <g fill="#c8a870"><rect x="5" y="60" width="25" height="90"/><rect x="33" y="45" width="22" height="105"/><rect x="58" y="55" width="20" height="95"/><rect x="82" y="40" width="28" height="110"/><rect x="113" y="52" width="24" height="98"/></g>
            <g fill="#b89858"><rect x="5" y="60" width="25" height="10"/><rect x="33" y="45" width="22" height="10"/><rect x="58" y="55" width="20" height="10"/><rect x="82" y="40" width="28" height="10"/><rect x="113" y="52" width="24" height="10"/></g>
            <!-- Windows -->
            <g fill="#6888aa" opacity=".7"><rect x="10" y="72" width="6" height="8"/><rect x="20" y="72" width="6" height="8"/><rect x="38" y="58" width="6" height="8"/><rect x="48" y="58" width="6" height="8"/><rect x="88" y="52" width="7" height="10"/><rect x="100" y="52" width="7" height="10"/><rect x="118" y="62" width="7" height="8"/></g>
            <!-- Canal water -->
            <path d="M0,118 Q38,110 75,118 Q112,110 150,118 L150,150 L0,150 Z" fill="#1a4a7a"/>
            <!-- Gondola -->
            <g transform="translate(50,128)">
              <path d="M-25,0 Q-20,-6 0,-5 Q20,-6 28,0 Q22,7 -20,7 Z" fill="#0a0a0a"/>
              <rect x="-5" y="-15" width="2.5" height="15" fill="#8a6030"/>
              <ellipse cx="-4" cy="-16" rx="8" ry="4" fill="#c8a040" opacity=".7"/>
              <ellipse cx="-4" cy="-17" rx="5" ry="3" fill="#e8c060"/>
              <!-- Gondolier -->
              <ellipse cx="10" cy="-8" rx="4" ry="5" fill="#1a1a2a"/>
              <circle cx="10" cy="-14" r="3.5" fill="#c8a880"/>
            </g>
            <!-- Reflection -->
            <g opacity=".3"><rect x="5" y="120" width="25" height="30" fill="#c8a870"/><rect x="33" y="115" width="22" height="35" fill="#c8a870"/></g>
          </svg>
        </div>
        <div class="ig-04__meta">Venice, 1998</div>
      </div>
      <!-- Polaroid 2: Taj Mahal -->
      <div class="ig-04__card">
        <div class="ig-04__photo">
          <svg viewBox="0 0 150 150" xmlns="http://www.w3.org/2000/svg">
            <defs><linearGradient id="tmg" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#f5e8d8"/><stop offset="50%" stop-color="#e8d0b0"/><stop offset="100%" stop-color="#d4b890"/></linearGradient></defs>
            <rect width="150" height="150" fill="#c8e8f8"/>
            <!-- Sky -->
            <rect width="150" height="80" fill="#a8d8f0"/>
            <!-- Main dome -->
            <ellipse cx="75" cy="52" rx="22" ry="28" fill="#f5f0e8"/>
            <!-- Finial -->
            <rect x="73" y="24" width="4" height="14" fill="#d0c0a0"/>
            <circle cx="75" cy="22" r="4" fill="#c8b090"/>
            <!-- Main building -->
            <rect x="35" y="72" width="80" height="55" fill="#f0ece0"/>
            <!-- Arched entrance -->
            <path d="M65,127 Q65,98 75,95 Q85,98 85,127" fill="#d8ccc0"/>
            <ellipse cx="75" cy="95" rx="12" ry="5" fill="#d8ccc0"/>
            <!-- Side minarets -->
            <rect x="22" y="90" width="10" height="55" fill="#f0ece0"/>
            <ellipse cx="27" cy="87" rx="6" ry="10" fill="#f0ece0"/>
            <circle cx="27" cy="79" r="3" fill="#c8b090"/>
            <rect x="118" y="90" width="10" height="55" fill="#f0ece0"/>
            <ellipse cx="123" cy="87" rx="6" ry="10" fill="#f0ece0"/>
            <circle cx="123" cy="79" r="3" fill="#c8b090"/>
            <!-- Reflecting pool -->
            <rect x="55" y="127" width="40" height="23" fill="#88c8e8" opacity=".7"/>
            <!-- Marble inlay pattern -->
            <g fill="none" stroke="#d0c0a0" stroke-width=".8" opacity=".5">
              <rect x="40" y="76" width="70" height="50"/>
              <line x1="75" y1="76" x2="75" y2="126"/>
            </g>
          </svg>
        </div>
        <div class="ig-04__meta">Taj Mahal, 2002</div>
      </div>
      <!-- Polaroid 3: Santorini sunset -->
      <div class="ig-04__card">
        <div class="ig-04__photo">
          <svg viewBox="0 0 150 150" xmlns="http://www.w3.org/2000/svg">
            <defs><linearGradient id="ssg" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#ff6b35"/><stop offset="40%" stop-color="#ff9850"/><stop offset="70%" stop-color="#ffcc80"/><stop offset="100%" stop-color="#2266cc"/></linearGradient></defs>
            <rect width="150" height="150" fill="url(#ssg)"/>
            <circle cx="75" cy="60" r="18" fill="#fff5a0" opacity=".9"/>
            <!-- Whitewashed buildings -->
            <g fill="#f5f5f0">
              <rect x="0" y="90" width="30" height="60"/><rect x="28" y="80" width="28" height="70"/>
              <rect x="54" y="88" width="25" height="62"/><rect x="78" y="75" width="30" height="75"/>
              <rect x="107" y="85" width="28" height="65"/><rect x="133" y="92" width="17" height="58"/>
            </g>
            <!-- Blue domes -->
            <g fill="#2266cc">
              <ellipse cx="42" cy="78" rx="14" ry="10"/><ellipse cx="93" cy="73" rx="16" ry="12"/>
            </g>
            <!-- Windows, blue detail -->
            <g fill="#4488ee">
              <rect x="5" y="100" width="8" height="10" rx="2"/><rect x="18" y="100" width="8" height="10" rx="2"/>
              <rect x="33" y="88" width="8" height="10" rx="2"/><rect x="83" y="84" width="8" height="10" rx="2"/>
            </g>
            <!-- Sea -->
            <rect x="0" y="140" width="150" height="10" fill="#1144aa" opacity=".6"/>
          </svg>
        </div>
        <div class="ig-04__meta">Santorini, 2005</div>
      </div>
      <!-- Polaroid 4: Safari elephant -->
      <div class="ig-04__card">
        <div class="ig-04__photo">
          <svg viewBox="0 0 150 150" xmlns="http://www.w3.org/2000/svg">
            <defs><linearGradient id="sfg" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#e8c870"/><stop offset="50%" stop-color="#d4a840"/><stop offset="100%" stop-color="#8a5010"/></linearGradient></defs>
            <rect width="150" height="150" fill="url(#sfg)"/>
            <!-- Acacia tree -->
            <rect x="110" y="80" width="6" height="70" fill="#4a2808"/>
            <ellipse cx="113" cy="78" rx="28" ry="12" fill="#2a5a14"/>
            <ellipse cx="100" cy="72" rx="20" ry="9" fill="#3a7020"/>
            <ellipse cx="126" cy="70" rx="18" ry="8" fill="#2a5a14"/>
            <!-- Elephant -->
            <g transform="translate(20,80)" fill="#7a7060">
              <ellipse cx="40" cy="30" rx="38" ry="26"/> <!-- body -->
              <ellipse cx="14" cy="22" rx="18" ry="20"/> <!-- head -->
              <!-- Ear -->
              <ellipse cx="2" cy="18" rx="12" ry="15" fill="#8a8070"/>
              <!-- Trunk -->
              <path d="M5,32 Q-5,42 -2,58 Q0,65 5,60 Q8,52 5,42 Q12,38 10,32" fill="#7a7060"/>
              <!-- Legs -->
              <rect x="10" y="50" width="12" height="30" rx="5" fill="#6a6050"/>
              <rect x="26" y="50" width="12" height="32" rx="5" fill="#6a6050"/>
              <rect x="44" y="50" width="12" height="30" rx="5" fill="#6a6050"/>
              <rect x="60" y="50" width="12" height="28" rx="5" fill="#6a6050"/>
              <!-- Tusk -->
              <path d="M8,36 Q-2,44 -5,52" stroke="#f0e8c0" stroke-width="3" fill="none" stroke-linecap="round"/>
              <!-- Eye -->
              <circle cx="8" cy="16" r="3" fill="#1a1a14"/>
              <circle cx="9" cy="15" r="1" fill="#fff"/>
              <!-- Tail -->
              <path d="M78,32 Q88,35 90,44" stroke="#6a6050" stroke-width="2.5" fill="none"/>
            </g>
            <!-- Baby elephant -->
            <g transform="translate(72,100)" fill="#8a8070" opacity=".85">
              <ellipse cx="18" cy="16" rx="18" ry="13"/>
              <ellipse cx="5" cy="11" rx="9" ry="10"/>
              <path d="M2,15 Q-4,22 -2,30 Q0,34 3,30 Q5,24 2,18" fill="#8a8070"/>
              <rect x="4" y="25" width="6" height="14" rx="3" fill="#7a7060"/>
              <rect x="13" y="25" width="6" height="14" rx="3" fill="#7a7060"/>
              <rect x="22" y="25" width="6" height="14" rx="3" fill="#7a7060"/>
              <rect x="30" y="25" width="6" height="12" rx="3" fill="#7a7060"/>
            </g>
            <!-- Grass tufts -->
            <g stroke="#6a8a28" stroke-width="1.5" stroke-linecap="round" fill="none" opacity=".7">
              <line x1="5" y1="148" x2="3" y2="135"/><line x1="10" y1="148" x2="12" y2="136"/>
              <line x1="145" y1="148" x2="143" y2="134"/><line x1="138" y1="148" x2="140" y2="136"/>
            </g>
          </svg>
        </div>
        <div class="ig-04__meta">Amboseli, 2010</div>
      </div>
      <!-- Polaroid 5: Northern Lights cabin -->
      <div class="ig-04__card">
        <div class="ig-04__photo">
          <svg viewBox="0 0 150 150" xmlns="http://www.w3.org/2000/svg">
            <defs><linearGradient id="nlg" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#040820"/><stop offset="50%" stop-color="#0a1535"/><stop offset="100%" stop-color="#0d1e25"/></linearGradient><filter id="nlf"><feGaussianBlur stdDeviation="4"/></filter></defs>
            <rect width="150" height="150" fill="url(#nlg)"/>
            <g opacity=".7" filter="url(#nlf)">
              <path d="M0,45 Q38,22 75,45 Q112,62 150,32" stroke="#00e8a0" stroke-width="18" fill="none"/>
              <path d="M0,62 Q40,38 80,56 Q118,75 150,48" stroke="#6040ff" stroke-width="12" fill="none"/>
              <path d="M0,35 Q30,18 60,38 Q95,58 150,26" stroke="#00c8e0" stroke-width="8" fill="none"/>
            </g>
            <g fill="#fff" opacity=".7"><circle cx="10" cy="8" r=".8"/><circle cx="30" cy="4" r="1"/><circle cx="60" cy="10" r=".9"/><circle cx="90" cy="5" r="1.1"/><circle cx="120" cy="8" r=".8"/><circle cx="145" cy="4" r="1"/></g>
            <!-- Snow ground -->
            <rect x="0" y="115" width="150" height="35" fill="#c8d8e8"/>
            <path d="M0,112 Q38,104 75,110 Q112,104 150,108 L150,115 L0,115 Z" fill="#d8e8f5"/>
            <!-- Cabin -->
            <g fill="#2a1808"><rect x="50" y="95" width="50" height="28"/><polygon points="44,95 75,78 106,95"/></g>
            <rect x="55" y="100" width="12" height="12" fill="#ff9040" opacity=".9"/>
            <rect x="83" y="100" width="12" height="12" fill="#ff9040" opacity=".9"/>
            <rect x="67" y="105" width="10" height="18" fill="#5a2808"/>
            <!-- Window glow -->
            <rect x="55" y="100" width="12" height="12" fill="#ffaa60" opacity=".4" filter="url(#nlf)"/>
            <rect x="83" y="100" width="12" height="12" fill="#ffaa60" opacity=".4" filter="url(#nlf)"/>
            <!-- Pine trees -->
            <g fill="#0d1e10">
              <polygon points="15,115 22,88 29,115"/><polygon points="18,100 22,88 26,100"/>
              <polygon points="125,115 132,92 139,115"/><polygon points="128,102 132,92 136,102"/>
            </g>
            <!-- Chimney smoke -->
            <path d="M76,78 Q74,68 78,58 Q80,48 76,40" stroke="#888" stroke-width="3" fill="none" opacity=".5" stroke-linecap="round"/>
          </svg>
        </div>
        <div class="ig-04__meta">Lapland, 2015</div>
      </div>
    </div>
  </div>
  <p class="ig-04__hint">Hover to fan · Click to flip</p>
</div>
<script>
(function(){
  const stack=document.getElementById('ig-04-stack');
  if(!stack)return;
  const cards=Array.from(stack.querySelectorAll('.ig-04__card'));
  const rots=cards.map(()=>(Math.random()-.5)*16);
  cards.forEach((c,i)=>{c.style.transform=`rotate(${rots[i]}deg)`;c.style.zIndex=i;});
  stack.addEventListener('mouseenter',()=>{
    const spread=20,total=cards.length;
    cards.forEach((c,i)=>{
      const angle=-spread/2+(spread/(total-1))*i;
      const tx=-130+(260/(total-1))*i;
      c.style.transform=`translateX(${tx}px) rotate(${angle}deg)`;
      c.style.setProperty('--ft',`translateX(${tx}px) rotate(${angle}deg)`);
    });
  });
  stack.addEventListener('mouseleave',()=>{
    cards.forEach((c,i)=>{c.style.transform=`rotate(${rots[i]}deg)`;c.classList.remove('ig-04--active');});
  });
  cards.forEach((c,i)=>{
    c.addEventListener('click',()=>{
      cards.forEach((x,j)=>{x.classList.remove('ig-04--active');x.style.zIndex=j;});
      c.classList.add('ig-04--active');c.style.zIndex=cards.length+1;
      c.addEventListener('animationend',()=>c.classList.remove('ig-04--active'),{once:true});
    });
  });
}());
</script>
```

**CSS:**
```css
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
body{background:radial-gradient(ellipse at center,#3a2a1a 0%,#1a1008 100%);font-family:'DM Sans',sans-serif;display:flex;align-items:center;justify-content:center;min-height:100vh;padding:2rem}
.ig-04{--card-w:170px;display:flex;flex-direction:column;align-items:center;gap:1.8rem}
.ig-04__scene{perspective:900px;height:260px;width:100%;display:flex;align-items:center;justify-content:center}
.ig-04__stack{position:relative;width:var(--card-w);height:220px;cursor:pointer}
.ig-04__card{position:absolute;inset:0;background:#faf6ee;border-radius:3px;padding:10px 10px 44px;box-shadow:0 8px 30px rgba(0,0,0,.55),0 2px 6px rgba(0,0,0,.3);transition:transform .5s cubic-bezier(.34,1.56,.64,1),box-shadow .4s ease;will-change:transform;transform-origin:center bottom}
.ig-04__photo{width:100%;aspect-ratio:1;display:block}
.ig-04__photo svg{width:100%;height:100%;display:block}
.ig-04__meta{text-align:center;font-family:'Caveat',cursive;font-size:1rem;color:#4a3a28;margin-top:.4rem;letter-spacing:.02em}
.ig-04__card.ig-04--active{animation:ig-04-flip .65s cubic-bezier(.34,1.56,.64,1);box-shadow:0 28px 70px rgba(0,0,0,.65)}
@keyframes ig-04-flip{0%{transform:var(--ft,rotate(0deg)) scale(1)}50%{transform:var(--ft,rotate(0deg)) scale(1.18) rotateY(180deg)}100%{transform:var(--ft,rotate(0deg)) scale(1.1) rotateY(360deg)}}
.ig-04__hint{color:rgba(255,255,255,.3);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase}
@media(prefers-reduced-motion:reduce){.ig-04__card{transition:none}.ig-04__card.ig-04--active{animation:none}}
```

**JS:**
```js
(function(){
  const stack=document.getElementById('ig-04-stack');
  if(!stack)return;
  const cards=Array.from(stack.querySelectorAll('.ig-04__card'));
  const rots=cards.map(()=>(Math.random()-.5)*16);
  cards.forEach((c,i)=>{c.style.transform=`rotate(${rots[i]}deg)`;c.style.zIndex=i;});
  stack.addEventListener('mouseenter',()=>{
    const spread=20,total=cards.length;
    cards.forEach((c,i)=>{
      const angle=-spread/2+(spread/(total-1))*i;
      const tx=-130+(260/(total-1))*i;
      c.style.transform=`translateX(${tx}px) rotate(${angle}deg)`;
      c.style.setProperty('--ft',`translateX(${tx}px) rotate(${angle}deg)`);
    });
  });
  stack.addEventListener('mouseleave',()=>{
    cards.forEach((c,i)=>{c.style.transform=`rotate(${rots[i]}deg)`;c.classList.remove('ig-04--active');});
  });
  cards.forEach((c,i)=>{
    c.addEventListener('click',()=>{
      cards.forEach((x,j)=>{x.classList.remove('ig-04--active');x.style.zIndex=j;});
      c.classList.add('ig-04--active');c.style.zIndex=cards.length+1;
      c.addEventListener('animationend',()=>c.classList.remove('ig-04--active'),{once:true});
    });
  });
}());
```

### 05. CSS Tilt Parallax Image Cards

**Type:** Pure CSS
**Description:** Three architecture cards with a CSS 3D tilt effect on hover plus a shimmer light-sweep across the face — pure CSS, no JavaScript.

**HTML:**
```html
<div class="ig-05__grid">
  <!-- 1: Burj Khalifa at night -->
  <div class="ig-05__wrap">
    <div class="ig-05__card" style="--accent:#00aaff">
      <div class="ig-05__img">
        <svg viewBox="0 0 200 267" xmlns="http://www.w3.org/2000/svg">
          <defs><linearGradient id="bkg" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#010818"/><stop offset="60%" stop-color="#040c22"/><stop offset="100%" stop-color="#060d2a"/></linearGradient><filter id="bkf"><feGaussianBlur stdDeviation="4"/></filter></defs>
          <rect width="200" height="267" fill="url(#bkg)"/>
          <!-- City skyline bg -->
          <g fill="#080e1a"><rect x="0" y="160" width="30" height="107"/><rect x="28" y="140" width="22" height="127"/><rect x="145" y="145" width="28" height="122"/><rect x="170" y="155" width="30" height="112"/></g>
          <!-- Burj Khalifa -->
          <g fill="#1a2840">
            <polygon points="82,267 86,50 100,10 114,50 118,267"/>
            <polygon points="86,200 92,150 100,120 108,150 114,200"/>
          </g>
          <g fill="#2a3850" opacity=".7">
            <polygon points="90,267 93,100 100,30 107,100 110,267"/>
          </g>
          <!-- Window lights -->
          <g fill="#88aacc" opacity=".8">
            <rect x="92" y="220" width="4" height="3"/><rect x="98" y="220" width="4" height="3"/>
            <rect x="91" y="210" width="4" height="3"/><rect x="97" y="210" width="4" height="3"/><rect x="103" y="210" width="4" height="3"/>
            <rect x="90" y="200" width="4" height="3"/><rect x="96" y="200" width="4" height="3"/><rect x="102" y="200" width="4" height="3"/>
            <rect x="90" y="190" width="4" height="3"/><rect x="96" y="190" width="4" height="3"/><rect x="102" y="190" width="4" height="3"/>
            <rect x="91" y="180" width="3.5" height="2.5"/><rect x="97" y="180" width="3.5" height="2.5"/><rect x="102" y="180" width="3.5" height="2.5"/>
            <rect x="92" y="170" width="3.5" height="2.5"/><rect x="98" y="170" width="3.5" height="2.5"/>
            <rect x="93" y="160" width="3" height="2.5"/><rect x="99" y="160" width="3" height="2.5"/>
            <rect x="94" y="150" width="3" height="2"/><rect x="100" y="150" width="3" height="2"/>
          </g>
          <!-- Antenna glow -->
          <circle cx="100" cy="10" r="4" fill="#00aaff" opacity=".9" filter="url(#bkf)"/>
          <circle cx="100" cy="10" r="2" fill="#88ccff"/>
          <!-- Stars -->
          <g fill="#fff" opacity=".6"><circle cx="15" cy="20" r=".9"/><circle cx="50" cy="12" r="1"/><circle cx="160" cy="18" r=".9"/><circle cx="185" cy="8" r="1.1"/><circle cx="30" cy="45" r=".7"/><circle cx="175" cy="38" r=".8"/></g>
          <!-- Ground glow -->
          <ellipse cx="100" cy="265" rx="100" ry="12" fill="#0044aa" opacity=".4" filter="url(#bkf)"/>
        </svg>
      </div>
      <span class="ig-05__badge">Sky</span>
      <div class="ig-05__info"><strong>Burj Khalifa</strong><span>Dubai, UAE · 828m</span></div>
    </div>
  </div>
  <!-- 2: Colosseum golden hour -->
  <div class="ig-05__wrap">
    <div class="ig-05__card" style="--accent:#ff8c00">
      <div class="ig-05__img">
        <svg viewBox="0 0 200 267" xmlns="http://www.w3.org/2000/svg">
          <defs><linearGradient id="cog" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#ff9840"/><stop offset="40%" stop-color="#e07020"/><stop offset="100%" stop-color="#a04810"/></linearGradient><filter id="cof"><feGaussianBlur stdDeviation="3"/></filter></defs>
          <rect width="200" height="267" fill="url(#cog)"/>
          <circle cx="100" cy="80" r="40" fill="#ffe080" opacity=".8"/>
          <circle cx="100" cy="80" r="32" fill="#fff4a0" opacity=".9"/>
          <ellipse cx="100" cy="110" rx="130" ry="30" fill="#ffaa40" opacity=".4" filter="url(#cof)"/>
          <!-- Colosseum elliptical form -->
          <ellipse cx="100" cy="190" rx="90" ry="50" fill="#c89050" opacity=".95"/>
          <ellipse cx="100" cy="175" rx="88" ry="48" fill="#d8a060"/>
          <ellipse cx="100" cy="170" rx="82" ry="44" fill="#c09050"/>
          <!-- Arcade arches - bottom tier -->
          <g fill="#a07040">
            <path d="M15,215 Q25,200 35,215"/><path d="M38,215 Q48,200 58,215"/>
            <path d="M62,213 Q72,198 82,213"/><path d="M86,212 Q96,197 106,212"/>
            <path d="M110,212 Q120,197 130,212"/><path d="M134,213 Q144,198 154,213"/>
            <path d="M158,215 Q168,200 178,215"/>
          </g>
          <!-- Second tier arches -->
          <g fill="#b08050" opacity=".7">
            <path d="M20,200 Q28,188 36,200"/><path d="M44,198 Q52,186 60,198"/>
            <path d="M68,197 Q76,185 84,197"/><path d="M92,196 Q100,184 108,196"/>
            <path d="M116,196 Q124,184 132,196"/><path d="M140,198 Q148,186 156,198"/>
            <path d="M162,200 Q170,188 178,200"/>
          </g>
          <!-- Broken section -->
          <polygon points="165,170 190,160 195,185 188,220 160,225" fill="#a07040" opacity=".6"/>
          <!-- Rubble at base -->
          <g fill="#7a5030" opacity=".5">
            <ellipse cx="40" cy="235" rx="15" ry="6"/><ellipse cx="160" cy="238" rx="12" ry="5"/>
            <ellipse cx="100" cy="240" rx="10" ry="4"/>
          </g>
          <!-- Ground shadow -->
          <path d="M10,240 Q100,228 190,240 L200,267 L0,267 Z" fill="#5a2808" opacity=".5"/>
        </svg>
      </div>
      <span class="ig-05__badge">Ancient</span>
      <div class="ig-05__info"><strong>Colosseum</strong><span>Rome, Italy · 70 CE</span></div>
    </div>
  </div>
  <!-- 3: Machu Picchu misty -->
  <div class="ig-05__wrap">
    <div class="ig-05__card" style="--accent:#00cc88">
      <div class="ig-05__img">
        <svg viewBox="0 0 200 267" xmlns="http://www.w3.org/2000/svg">
          <defs><linearGradient id="mpg" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#2a4a2a"/><stop offset="40%" stop-color="#3a6a3a"/><stop offset="70%" stop-color="#4a7a4a"/><stop offset="100%" stop-color="#3a5a2a"/></linearGradient><filter id="mpf"><feGaussianBlur stdDeviation="5"/></filter><filter id="mpf2"><feGaussianBlur stdDeviation="2"/></filter></defs>
          <rect width="200" height="267" fill="url(#mpg)"/>
          <!-- Misty mountains bg -->
          <g filter="url(#mpf)">
            <polygon points="0,80 50,30 100,65 150,25 200,55 200,120 0,120" fill="#3a5a2a" opacity=".7"/>
            <polygon points="50,267 90,60 130,267" fill="#4a6a30" opacity=".5"/>
          </g>
          <!-- Huayna Picchu peak -->
          <polygon points="130,0 155,60 180,0" fill="#2a3a20" opacity=".9"/>
          <polygon points="135,0 155,55 175,0" fill="#3a4a28" opacity=".7"/>
          <!-- Mist layers -->
          <rect x="0" y="70" width="200" height="30" fill="#c8d8c0" opacity=".25" filter="url(#mpf)"/>
          <rect x="0" y="90" width="200" height="25" fill="#d0dcc8" opacity=".2" filter="url(#mpf)"/>
          <!-- Terraces -->
          <g fill="#4a6a30">
            <path d="M0,145 Q50,138 100,143 Q150,138 200,145 L200,155 L0,155 Z"/>
            <path d="M0,158 Q50,151 100,156 Q150,151 200,158 L200,168 L0,168 Z"/>
            <path d="M0,171 Q50,164 100,169 Q150,164 200,171 L200,181 L0,181 Z"/>
            <path d="M0,184 Q50,177 100,182 Q150,177 200,184 L200,194 L0,194 Z"/>
            <path d="M0,197 Q50,190 100,195 Q150,190 200,197 L200,207 L0,207 Z"/>
          </g>
          <!-- Stone walls -->
          <g stroke="#2a3a18" stroke-width="1" fill="none" opacity=".5">
            <line x1="0" y1="155" x2="200" y2="155"/><line x1="0" y1="168" x2="200" y2="168"/>
            <line x1="0" y1="181" x2="200" y2="181"/><line x1="0" y1="194" x2="200" y2="194"/>
          </g>
          <!-- Inca structures -->
          <g fill="#5a7840">
            <rect x="40" y="125" width="30" height="22"/><polygon points="35,125 55,112 75,125" fill="#4a6830"/>
            <rect x="80" y="122" width="28" height="24"/><polygon points="76,122 94,109 112,122" fill="#4a6830"/>
            <rect x="118" y="128" width="26" height="20"/><polygon points="114,128 131,116 148,128" fill="#4a6830"/>
          </g>
          <!-- Llama silhouette -->
          <g fill="#2a3a18" transform="translate(155,185)">
            <ellipse cx="0" cy="0" rx="12" ry="7"/>
            <rect x="-4" y="6" width="3" height="10" rx="2"/>
            <rect x="3" y="6" width="3" height="10" rx="2"/>
            <ellipse cx="-10" cy="-4" rx="5" ry="7"/>
            <ellipse cx="-13" cy="-10" rx="3" ry="4"/>
          </g>
          <!-- Green vegetation on terraces -->
          <g fill="#2a5a14" opacity=".6">
            <ellipse cx="20" cy="148" rx="12" ry="5"/><ellipse cx="80" cy="145" rx="10" ry="4"/>
            <ellipse cx="150" cy="148" rx="11" ry="4.5"/>
          </g>
        </svg>
      </div>
      <span class="ig-05__badge">Wonder</span>
      <div class="ig-05__info"><strong>Machu Picchu</strong><span>Cusco, Peru · 2430m</span></div>
    </div>
  </div>
</div>
```

**CSS:**
```css
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
body{background:#080c14;font-family:'Space Grotesk',sans-serif;display:flex;align-items:center;justify-content:center;min-height:100vh;padding:2.5rem}
.ig-05__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1.5rem;width:100%;max-width:720px}
.ig-05__wrap{perspective:700px}
.ig-05__card{border-radius:18px;overflow:hidden;position:relative;transform-style:preserve-3d;transition:transform .45s cubic-bezier(.25,.46,.45,.94),box-shadow .45s ease;box-shadow:0 8px 28px rgba(0,0,0,.5);cursor:pointer}
.ig-05__card::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,transparent 40%,rgba(255,255,255,.16) 50%,transparent 60%);transform:translateX(-120%);transition:transform .5s ease;pointer-events:none}
.ig-05__wrap:hover .ig-05__card{transform:rotateX(8deg) rotateY(-8deg) scale(1.04);box-shadow:0 28px 64px rgba(0,0,0,.6)}
.ig-05__wrap:hover .ig-05__card::after{transform:translateX(120%)}
.ig-05__img{width:100%;aspect-ratio:3/4;display:block}
.ig-05__img svg{width:100%;height:100%;display:block}
.ig-05__badge{position:absolute;top:1.1rem;right:1.1rem;transform:translateZ(28px);background:var(--accent);color:#fff;font-size:.65rem;font-weight:700;letter-spacing:.1em;padding:.22rem .55rem;border-radius:6px;box-shadow:0 4px 14px rgba(0,0,0,.35);text-transform:uppercase}
.ig-05__info{padding:1rem;background:#0f1420}
.ig-05__info strong{color:#fff;font-size:.9rem;font-weight:700;display:block;margin-bottom:.2rem}
.ig-05__info span{color:rgba(255,255,255,.45);font-size:.75rem}
@media(prefers-reduced-motion:reduce){.ig-05__card,.ig-05__card::after{transition:none}}
```

### 06. CSS Filmstrip Carousel Gallery

**Type:** Pure CSS
**Description:** A horizontally scrollable filmstrip of vintage-era illustrated frames with sprocket-hole styling and snap scrolling — pure CSS.

**HTML:**
```html
<div class="ig-06">
  <div class="ig-06__reel">
    <div class="ig-06__strip">
      <!-- Frame 1: 1950s diner -->
      <div class="ig-06__frame">
        <div class="ig-06__img">
          <svg viewBox="0 0 310 175" xmlns="http://www.w3.org/2000/svg">
            <defs><filter id="grain"><feTurbulence type="fractalNoise" baseFrequency=".65" numOctaves="3" stitchTiles="stitch"/><feColorMatrix type="saturate" values="0"/><feBlend mode="multiply" in="SourceGraphic"/><feComposite in2="SourceGraphic"/></filter></defs>
            <!-- Sepia tones for vintage feel -->
            <rect width="310" height="175" fill="#c8a870"/>
            <rect width="310" height="175" fill="#8a6030" opacity=".3"/>
            <!-- Diner counter -->
            <rect x="0" y="100" width="310" height="75" fill="#8a5a28"/>
            <rect x="0" y="100" width="310" height="12" fill="#c8a060"/>
            <!-- Bar stools -->
            <g fill="#4a2810">
              <circle cx="45" cy="102" r="16"/><rect x="37" y="118" width="4" height="30" rx="2"/><rect x="47" y="118" width="4" height="30" rx="2"/>
              <circle cx="110" cy="102" r="16"/><rect x="102" y="118" width="4" height="30" rx="2"/><rect x="112" y="118" width="4" height="30" rx="2"/>
              <circle cx="175" cy="102" r="16"/><rect x="167" y="118" width="4" height="30" rx="2"/><rect x="177" y="118" width="4" height="30" rx="2"/>
              <circle cx="240" cy="102" r="16"/><rect x="232" y="118" width="4" height="30" rx="2"/><rect x="242" y="118" width="4" height="30" rx="2"/>
            </g>
            <!-- Milkshake glasses on counter -->
            <g fill="#e8d0a0">
              <path d="M60,80 Q65,60 70,80 L72,102 L58,102 Z"/>
              <path d="M130,75 Q136,55 141,75 L143,102 L128,102 Z"/>
            </g>
            <!-- Jukebox -->
            <g fill="#c84020">
              <rect x="262" y="60" width="40" height="80" rx="4"/>
              <rect x="266" y="64" width="32" height="25" rx="2" fill="#c0d8f0" opacity=".7"/>
              <g fill="#ffdd00"><circle cx="282" cy="108" r="4"/><circle cx="282" cy="120" r="4"/><circle cx="282" cy="132" r="4"/></g>
              <g stroke="#ffdd00" stroke-width="1" fill="none">
                <path d="M268,98 Q282,90 296,98"/><path d="M268,103 Q282,96 296,103"/>
              </g>
            </g>
            <!-- Neon sign -->
            <g>
              <text x="20" y="55" font-family="serif" font-size="20" fill="#e03020" opacity=".9" font-weight="bold">PAT'S DINER</text>
              <rect x="15" y="38" width="180" height="25" rx="4" fill="none" stroke="#e03020" stroke-width="1.5" opacity=".6"/>
            </g>
            <!-- Ceiling lights -->
            <g fill="#fff0a0" opacity=".7">
              <circle cx="60" cy="20" r="6"/><line x1="60" y1="0" x2="60" y2="14" stroke="#8a6030" stroke-width="2"/>
              <circle cx="155" cy="20" r="6"/><line x1="155" y1="0" x2="155" y2="14" stroke="#8a6030" stroke-width="2"/>
              <circle cx="250" cy="20" r="6"/><line x1="250" y1="0" x2="250" y2="14" stroke="#8a6030" stroke-width="2"/>
            </g>
            <!-- Film grain overlay -->
            <rect width="310" height="175" fill="#8a6030" opacity=".08" filter="url(#grain)"/>
          </svg>
        </div>
        <span class="ig-06__title">PAT'S DINER — Chicago, 1955</span>
      </div>
      <!-- Frame 2: Route 66 road -->
      <div class="ig-06__frame">
        <div class="ig-06__img">
          <svg viewBox="0 0 310 175" xmlns="http://www.w3.org/2000/svg">
            <defs><linearGradient id="r66g" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#e8d0a0"/><stop offset="50%" stop-color="#d4a840"/><stop offset="100%" stop-color="#8a5010"/></linearGradient></defs>
            <rect width="310" height="175" fill="url(#r66g)"/>
            <!-- Vast desert sky -->
            <rect width="310" height="90" fill="#c8b898" opacity=".5"/>
            <!-- Road vanishing perspective -->
            <polygon points="145,90 165,90 310,175 0,175" fill="#5a5048"/>
            <polygon points="150,90 160,90 260,175 50,175" fill="#6a6058"/>
            <!-- Road lines center dashes -->
            <g fill="#e8e0c0" opacity=".7">
              <polygon points="152,100 158,100 155,112 149,112"/><polygon points="151,118 157,118 153,132 147,132"/>
              <polygon points="148,140 155,140 150,158 143,158"/>
            </g>
            <!-- Desert horizon -->
            <path d="M0,88 Q78,80 155,86 Q232,80 310,84 L310,90 L0,90 Z" fill="#b89868" opacity=".5"/>
            <!-- Mesa/buttes silhouette -->
            <g fill="#7a4820" opacity=".8">
              <polygon points="0,88 0,50 30,42 55,55 70,30 85,48 100,88"/>
              <polygon points="220,88 230,45 248,38 265,50 285,32 305,48 310,88"/>
            </g>
            <!-- Saguaro cacti -->
            <g fill="#3a6a18" opacity=".8">
              <g transform="translate(115,58)">
                <rect x="-3" y="-28" width="6" height="28" rx="3"/>
                <rect x="-10" y="-18" width="14" height="5" rx="2.5"/>
                <rect x="-14" y="-22" width="5" height="12" rx="2.5"/>
                <rect x="3" y="-15" width="14" height="5" rx="2.5"/>
                <rect x="9" y="-20" width="5" height="12" rx="2.5"/>
              </g>
              <g transform="translate(200,62)">
                <rect x="-2.5" y="-24" width="5" height="24" rx="2.5"/>
                <rect x="-8" y="-16" width="12" height="4" rx="2"/>
                <rect x="-11" y="-20" width="4" height="9" rx="2"/>
                <rect x="3" y="-12" width="12" height="4" rx="2"/>
                <rect x="7" y="-16" width="4" height="9" rx="2"/>
              </g>
            </g>
            <!-- Road sign -->
            <g transform="translate(40,45)">
              <rect x="0" y="0" width="32" height="32" rx="4" fill="#1a44aa"/>
              <text x="4" y="14" font-family="sans-serif" font-size="7" fill="#fff" font-weight="bold">ROUTE</text>
              <text x="6" y="26" font-family="sans-serif" font-size="12" fill="#fff" font-weight="bold">66</text>
              <rect x="-2" y="-2" width="36" height="36" rx="5" fill="none" stroke="#fff" stroke-width="2"/>
              <rect x="14" y="32" width="4" height="25" fill="#888"/>
            </g>
            <!-- Classic car silhouette -->
            <g fill="#1a1610" transform="translate(185,128)">
              <rect x="-35" y="-12" width="70" height="20" rx="6"/>
              <path d="M-28,-12 Q-20,-28 -5,-28 Q10,-28 18,-12 Z" fill="#1a1610"/>
              <path d="M-25,-12 Q-18,-24 -4,-24 Q9,-24 16,-12 Z" fill="#2a2620" opacity=".5"/>
              <circle cx="-22" cy="10" r="8" fill="#0a0a0a"/><circle cx="-22" cy="10" r="5" fill="#555"/>
              <circle cx="22" cy="10" r="8" fill="#0a0a0a"/><circle cx="22" cy="10" r="5" fill="#555"/>
              <circle cx="-22" cy="10" r="2.5" fill="#888"/>
              <circle cx="22" cy="10" r="2.5" fill="#888"/>
            </g>
          </svg>
        </div>
        <span class="ig-06__title">ROUTE 66 — Arizona, 1962</span>
      </div>
      <!-- Frame 3: Parisian café -->
      <div class="ig-06__frame">
        <div class="ig-06__img">
          <svg viewBox="0 0 310 175" xmlns="http://www.w3.org/2000/svg">
            <rect width="310" height="175" fill="#2a1a0a"/>
            <!-- Stone building facade -->
            <rect width="310" height="175" fill="#c8b898" opacity=".15"/>
            <!-- Awning -->
            <polygon points="0,0 310,0 310,55 0,55" fill="#c82020"/>
            <g fill="#e03030">
              <polygon points="0,55 25,38 50,55"/><polygon points="50,55 75,38 100,55"/>
              <polygon points="100,55 125,38 150,55"/><polygon points="150,55 175,38 200,55"/>
              <polygon points="200,55 225,38 250,55"/><polygon points="250,55 275,38 300,55"/>
            </g>
            <!-- Café sign -->
            <text x="60" y="30" font-family="serif" font-size="22" fill="#fff8e0" font-style="italic">Café de Flore</text>
            <!-- Building limestone blocks -->
            <g fill="none" stroke="#a89060" stroke-width=".8" opacity=".4">
              <line x1="0" y1="70" x2="310" y2="70"/><line x1="0" y1="90" x2="310" y2="90"/>
              <line x1="0" y1="110" x2="310" y2="110"/><line x1="0" y1="130" x2="310" y2="130"/>
              <line x1="55" y1="55" x2="55" y2="175"/><line x1="110" y1="55" x2="110" y2="175"/>
              <line x1="165" y1="55" x2="165" y2="175"/><line x1="220" y1="55" x2="220" y2="175"/>
              <line x1="265" y1="55" x2="265" y2="175"/>
            </g>
            <!-- Windows with shutters -->
            <g>
              <rect x="20" y="72" width="32" height="38" rx="2" fill="#6888aa" opacity=".7"/>
              <rect x="18" y="72" width="7" height="38" rx="1" fill="#4a3a18" opacity=".8"/>
              <rect x="47" y="72" width="7" height="38" rx="1" fill="#4a3a18" opacity=".8"/>
              <rect x="125" y="72" width="32" height="38" rx="2" fill="#6888aa" opacity=".7"/>
              <rect x="123" y="72" width="7" height="38" rx="1" fill="#4a3a18" opacity=".8"/>
              <rect x="152" y="72" width="7" height="38" rx="1" fill="#4a3a18" opacity=".8"/>
              <rect x="240" y="72" width="32" height="38" rx="2" fill="#6888aa" opacity=".7"/>
            </g>
            <!-- Café tables on sidewalk -->
            <g>
              <!-- Table 1 -->
              <ellipse cx="55" cy="155" rx="20" ry="8" fill="#8a6a30"/>
              <rect x="52" y="155" width="6" height="20" fill="#6a5020"/>
              <circle cx="48" cy="148" r="6" fill="#e8c870"/> <!-- coffee cup top -->
              <ellipse cx="48" cy="150" rx="5" ry="2" fill="#c8a850"/>
              <!-- Chair -->
              <rect x="28" y="148" width="18" height="14" rx="2" fill="#5a3a18"/>
              <g stroke="#4a2a10" stroke-width="1.5" fill="none"><line x1="30" y1="162" x2="28" y2="175"/><line x1="44" y1="162" x2="46" y2="175"/></g>
              <!-- Table 2 -->
              <ellipse cx="175" cy="158" rx="20" ry="8" fill="#8a6a30"/>
              <rect x="172" y="158" width="6" height="17" fill="#6a5020"/>
              <circle cx="168" cy="150" r="6" fill="#e8c870"/>
              <ellipse cx="168" cy="152" rx="5" ry="2" fill="#c8a850"/>
            </g>
            <!-- Flower boxes under windows -->
            <g fill="#5a2a10"><rect x="20" y="108" width="32" height="6" rx="2"/><rect x="125" y="108" width="32" height="6" rx="2"/><rect x="240" y="108" width="32" height="6" rx="2"/></g>
            <g fill="#e04060" opacity=".8"><circle cx="28" cy="107" r="3"/><circle cx="35" cy="107" r="3"/><circle cx="42" cy="107" r="3"/><circle cx="48" cy="107" r="3"/><circle cx="133" cy="107" r="3"/><circle cx="140" cy="107" r="3"/><circle cx="147" cy="107" r="3"/></g>
            <!-- Person sitting at café -->
            <g fill="#2a1a0a" transform="translate(35,148)">
              <ellipse cx="0" cy="0" rx="6" ry="8"/>
              <circle cx="0" cy="-10" r="6"/>
            </g>
          </svg>
        </div>
        <span class="ig-06__title">CAFÉ DE FLORE — Paris, 1968</span>
      </div>
      <!-- Frame 4: Old Havana street -->
      <div class="ig-06__frame">
        <div class="ig-06__img">
          <svg viewBox="0 0 310 175" xmlns="http://www.w3.org/2000/svg">
            <defs><linearGradient id="hvg" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#88c0e8"/><stop offset="40%" stop-color="#aad4f0"/><stop offset="100%" stop-color="#c8e8f8"/></linearGradient></defs>
            <rect width="310" height="175" fill="url(#hvg)"/>
            <!-- Crumbling colorful buildings -->
            <g>
              <rect x="0" y="35" width="55" height="140" fill="#e85040"/>
              <rect x="0" y="35" width="55" height="10" fill="#c83828"/>
              <rect x="53" y="42" width="60" height="133" fill="#e8b840"/>
              <rect x="53" y="42" width="60" height="10" fill="#c89820"/>
              <rect x="111" y="30" width="50" height="145" fill="#48a8d0"/>
              <rect x="111" y="30" width="50" height="10" fill="#3088b0"/>
              <rect x="159" y="38" width="55" height="137" fill="#e06040"/>
              <rect x="159" y="38" width="55" height="10" fill="#c04020"/>
              <rect x="212" y="25" width="48" height="150" fill="#88c050"/>
              <rect x="212" y="25" width="48" height="10" fill="#68a030"/>
              <rect x="258" y="40" width="52" height="135" fill="#d0a040"/>
              <rect x="258" y="40" width="52" height="10" fill="#b08020"/>
            </g>
            <!-- Peeling paint texture -->
            <g fill="#fff" opacity=".05">
              <rect x="5" y="60" width="40" height="3"/><rect x="8" y="75" width="30" height="2"/>
              <rect x="60" y="55" width="45" height="3"/><rect x="170" y="65" width="35" height="2"/>
            </g>
            <!-- Ornate balconies -->
            <g fill="#5a3818">
              <rect x="8" y="78" width="36" height="5" rx="1"/><rect x="10" y="68" width="4" height="10"/><rect x="20" y="68" width="4" height="10"/><rect x="30" y="68" width="4" height="10"/><rect x="38" y="68" width="4" height="10"/>
              <rect x="62" y="85" width="38" height="5" rx="1"/><rect x="64" y="75" width="4" height="10"/><rect x="74" y="75" width="4" height="10"/><rect x="84" y="75" width="4" height="10"/><rect x="94" y="75" width="4" height="10"/>
              <rect x="118" y="72" width="36" height="5" rx="1"/>
            </g>
            <!-- Windows with shutters -->
            <g fill="#1a3a5a" opacity=".7">
              <rect x="12" y="55" width="12" height="16" rx="1"/><rect x="30" y="55" width="12" height="16" rx="1"/>
              <rect x="66" y="62" width="12" height="16" rx="1"/><rect x="84" y="62" width="12" height="16" rx="1"/>
              <rect x="120" y="50" width="12" height="16" rx="1"/><rect x="138" y="50" width="12" height="16" rx="1"/>
            </g>
            <!-- Cobblestone street -->
            <rect x="0" y="148" width="310" height="27" fill="#8a7858"/>
            <g fill="none" stroke="#6a5838" stroke-width=".8" opacity=".5">
              <line x1="0" y1="155" x2="310" y2="155"/><line x1="0" y1="163" x2="310" y2="163"/>
              <line x1="0" y1="170" x2="310" y2="170"/>
              <line x1="25" y1="148" x2="25" y2="175"/><line x1="55" y1="148" x2="55" y2="175"/>
              <line x1="85" y1="148" x2="85" y2="175"/><line x1="115" y1="148" x2="115" y2="175"/>
              <line x1="145" y1="148" x2="145" y2="175"/><line x1="175" y1="148" x2="175" y2="175"/>
              <line x1="205" y1="148" x2="205" y2="175"/><line x1="235" y1="148" x2="235" y2="175"/>
              <line x1="265" y1="148" x2="265" y2="175"/>
            </g>
            <!-- Classic car -->
            <g fill="#c02020" transform="translate(130,138)">
              <rect x="-40" y="-14" width="80" height="22" rx="7"/>
              <path d="M-32,-14 Q-24,-30 -6,-30 Q12,-30 22,-14" fill="#b01818"/>
              <circle cx="-26" cy="10" r="9" fill="#1a1a1a"/><circle cx="-26" cy="10" r="6" fill="#444"/>
              <circle cx="26" cy="10" r="9" fill="#1a1a1a"/><circle cx="26" cy="10" r="6" fill="#444"/>
            </g>
            <!-- Laundry hanging between buildings -->
            <g>
              <path d="M55,60 Q85,68 113,58" stroke="#8a6838" stroke-width=".8" fill="none"/>
              <g fill="#e8a030" opacity=".8"><rect x="63" y="55" width="6" height="12" rx="1"/></g>
              <g fill="#4a88cc" opacity=".8"><rect x="75" y="58" width="5" height="14" rx="1"/></g>
              <g fill="#e84030" opacity=".8"><rect x="87" y="56" width="6" height="12" rx="1"/></g>
              <g fill="#f0f0f0" opacity=".8"><rect x="100" y="55" width="6" height="11" rx="1"/></g>
            </g>
          </svg>
        </div>
        <span class="ig-06__title">OLD HAVANA — Cuba, 1975</span>
      </div>
      <!-- Frame 5: Tokyo at night rain -->
      <div class="ig-06__frame">
        <div class="ig-06__img">
          <svg viewBox="0 0 310 175" xmlns="http://www.w3.org/2000/svg">
            <defs><filter id="nf"><feGaussianBlur stdDeviation="3"/></filter></defs>
            <rect width="310" height="175" fill="#04040e"/>
            <!-- Building silhouettes -->
            <g fill="#060810">
              <rect x="0" y="50" width="35" height="125"/><rect x="33" y="30" width="28" height="145"/>
              <rect x="59" y="55" width="24" height="120"/><rect x="81" y="20" width="38" height="155"/>
              <rect x="117" y="42" width="26" height="133"/><rect x="141" y="15" width="44" height="160"/>
              <rect x="183" y="38" width="30" height="137"/><rect x="211" y="48" width="26" height="127"/>
              <rect x="235" y="22" width="40" height="153"/><rect x="273" y="45" width="37" height="130"/>
            </g>
            <!-- Window lights grid warm -->
            <g fill="#ffd060" opacity=".75">
              <rect x="4" y="60" width="5" height="5"/><rect x="12" y="60" width="5" height="5"/><rect x="20" y="60" width="5" height="5"/>
              <rect x="4" y="72" width="5" height="5"/><rect x="20" y="72" width="5" height="5"/>
              <rect x="38" y="38" width="5" height="6"/><rect x="46" y="38" width="5" height="6"/>
              <rect x="38" y="52" width="5" height="6"/><rect x="46" y="52" width="5" height="6"/>
              <rect x="87" y="30" width="6" height="6"/><rect x="96" y="30" width="6" height="6"/><rect x="105" y="30" width="6" height="6"/>
              <rect x="87" y="44" width="6" height="6"/><rect x="96" y="44" width="6" height="6"/>
              <rect x="148" y="22" width="6" height="6"/><rect x="158" y="22" width="6" height="6"/><rect x="168" y="22" width="6" height="6"/>
              <rect x="148" y="35" width="6" height="6"/><rect x="158" y="35" width="6" height="6"/><rect x="168" y="35" width="6" height="6"/>
              <rect x="148" y="48" width="6" height="6"/><rect x="168" y="48" width="6" height="6"/>
              <rect x="240" y="30" width="6" height="6"/><rect x="250" y="30" width="6" height="6"/><rect x="260" y="30" width="6" height="6"/>
              <rect x="240" y="44" width="6" height="6"/><rect x="260" y="44" width="6" height="6"/>
            </g>
            <!-- Neon signs -->
            <g filter="url(#nf)">
              <text x="62" y="90" font-size="9" fill="#ff2090" font-family="monospace" font-weight="bold">ラーメン</text>
              <text x="145" y="80" font-size="8" fill="#00ffcc" font-family="monospace" font-weight="bold">OPEN</text>
              <text x="218" y="88" font-size="7" fill="#ff8020" font-family="monospace" font-weight="bold">居酒屋</text>
            </g>
            <g>
              <text x="62" y="90" font-size="9" fill="#ff80cc" font-family="monospace" font-weight="bold" opacity=".7">ラーメン</text>
              <text x="145" y="80" font-size="8" fill="#80ffe8" font-family="monospace" font-weight="bold" opacity=".7">OPEN</text>
              <text x="218" y="88" font-size="7" fill="#ffbb80" font-family="monospace" font-weight="bold" opacity=".7">居酒屋</text>
            </g>
            <!-- Wet street / reflection -->
            <rect x="0" y="142" width="310" height="33" fill="#05060f"/>
            <!-- Reflections -->
            <g filter="url(#nf)" opacity=".45" transform="translate(0,290) scale(1,-1)">
              <text x="62" y="90" font-size="9" fill="#ff2090" font-family="monospace" font-weight="bold">ラーメン</text>
              <text x="145" y="80" font-size="8" fill="#00ffcc" font-family="monospace" font-weight="bold">OPEN</text>
            </g>
            <!-- Rain streaks -->
            <g stroke="rgba(180,200,255,.12)" stroke-width=".6">
              <line x1="15" y1="0" x2="13" y2="175"/><line x1="45" y1="0" x2="43" y2="175"/>
              <line x1="80" y1="0" x2="78" y2="175"/><line x1="120" y1="0" x2="118" y2="175"/>
              <line x1="160" y1="0" x2="158" y2="175"/><line x1="200" y1="0" x2="198" y2="175"/>
              <line x1="240" y1="0" x2="238" y2="175"/><line x1="280" y1="0" x2="278" y2="175"/>
            </g>
            <!-- Pedestrian -->
            <g fill="#0a0a18" transform="translate(100,140)">
              <ellipse cx="0" cy="-8" rx="5" ry="7"/>
              <circle cx="0" cy="-17" r="4.5"/>
              <!-- Umbrella -->
              <path d="M-15,-22 Q0,-38 15,-22 Z" fill="#c02020"/>
              <line x1="0" y1="-22" x2="0" y2="-38" stroke="#8a1818" stroke-width="1.5"/>
            </g>
          </svg>
        </div>
        <span class="ig-06__title">SHINJUKU RAIN — Tokyo, 1988</span>
      </div>
    </div>
  </div>
</div>
<p class="ig-06__hint">← Scroll the filmstrip →</p>
```

**CSS:**
```css
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
body{background:#0a0805;font-family:'DM Sans',sans-serif;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;padding:2rem 0;gap:1rem}
.ig-06{width:100%}
.ig-06__reel{background:#100a02;border-top:5px solid #0a0602;border-bottom:5px solid #0a0602;position:relative;overflow:hidden}
.ig-06__reel::before,.ig-06__reel::after{content:'';position:absolute;left:0;right:0;height:20px;z-index:2;pointer-events:none;background:#100a02 repeating-linear-gradient(to right,transparent 0,transparent 5px,#000 5px,#000 7px,transparent 7px,transparent 12px,#1a0e04 12px,#1a0e04 22px,transparent 22px,transparent 28px)}
.ig-06__reel::before{top:0}.ig-06__reel::after{bottom:0}
.ig-06__strip{display:flex;gap:.6rem;overflow-x:scroll;scroll-snap-type:x mandatory;scrollbar-width:none;padding:26px 1.2rem;-webkit-overflow-scrolling:touch}
.ig-06__strip::-webkit-scrollbar{display:none}
.ig-06__frame{flex-shrink:0;min-width:clamp(220px,58vw,310px);scroll-snap-align:center;border:3px solid #2a1a08;border-radius:2px;overflow:hidden;position:relative;background:#000;transition:border-color .3s ease}
.ig-06__frame:hover{border-color:#d4a840}
.ig-06__img{width:100%;aspect-ratio:16/9;display:block}
.ig-06__img svg{width:100%;height:100%;display:block}
.ig-06__title{display:block;text-align:center;color:rgba(255,200,80,.75);font-size:.7rem;font-family:'Special Elite',cursive;letter-spacing:.1em;padding:.4rem;background:#0a0602}
.ig-06__hint{color:rgba(255,255,255,.28);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;text-align:center}
@media(prefers-reduced-motion:reduce){.ig-06__frame{transition:none}}
```

### 07. CSS Mosaic Zoom Gallery

**Type:** CSS + JS
**Description:** Editorial &quot;Earth's Biomes&quot; mosaic dashboard — 8 illustrated biome tiles in a 4×3 grid where clicking any tile expands it to a 2×2 featured hero. Persistent caption strip on every tile (no mystery-meat), monospace section numbers, per-tile category accent stripe, live counter chip in the header that updates with the featured tile's name (e.g. &quot;Featured · 03 / 08 · Sahara Dunes&quot;), and a status bar footer.

**HTML:**
```html
<div class="ig-07">

  <!-- Gallery chrome -->
  <header class="ig-07__chrome">
    <div class="ig-07__chrome-l">
      <span class="ig-07__title">Earth's Biomes</span>
      <span class="ig-07__sub">8 scenes · Click any tile to feature</span>
    </div>
    <div class="ig-07__chrome-r">
      <span class="ig-07__pill" id="ig-07-counter">Featured · 01 / 08</span>
    </div>
  </header>

  <div class="ig-07__grid" id="ig-07-grid">

    <!-- 1: Amazon rainforest canopy -->
    <div class="ig-07__tile ig-07__tile--active" data-idx="0" data-cap="Amazon Canopy" data-loc="Brazil · Rainforest" data-color="#2a9018">
      <svg viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg">
        <defs><radialGradient id="rfg" cx="50%" cy="30%" r="70%"><stop offset="0%" stop-color="#1a5a0a"/><stop offset="60%" stop-color="#0d3a05"/><stop offset="100%" stop-color="#051a02"/></radialGradient><filter id="rff"><feGaussianBlur stdDeviation="5"/></filter></defs>
        <rect width="400" height="400" fill="url(#rfg)"/>
        <g opacity=".2" fill="#60ff20"><polygon points="140,0 160,0 240,400 220,400"/><polygon points="200,0 215,0 280,400 265,400"/></g>
        <!-- Dense canopy layers -->
        <g fill="#0a4008"><ellipse cx="60" cy="60" rx="75" ry="55"/><ellipse cx="170" cy="40" rx="90" ry="60"/><ellipse cx="290" cy="55" rx="80" ry="58"/><ellipse cx="370" cy="45" rx="65" ry="50"/><ellipse cx="30" cy="130" rx="60" ry="45"/><ellipse cx="130" cy="120" rx="80" ry="55"/><ellipse cx="250" cy="110" rx="85" ry="58"/><ellipse cx="370" cy="125" rx="65" ry="48"/></g>
        <g fill="#1a7010"><ellipse cx="60" cy="48" rx="65" ry="48"/><ellipse cx="170" cy="28" rx="80" ry="52"/><ellipse cx="290" cy="42" rx="70" ry="50"/><ellipse cx="365" cy="32" rx="58" ry="44"/><ellipse cx="115" cy="108" rx="70" ry="48"/><ellipse cx="245" cy="98" rx="75" ry="50"/></g>
        <g fill="#2a9018"><ellipse cx="60" cy="38" rx="55" ry="40"/><ellipse cx="170" cy="18" rx="68" ry="44"/><ellipse cx="290" cy="30" rx="62" ry="42"/><ellipse cx="365" cy="22" rx="50" ry="36"/></g>
        <!-- Bromeliads and epiphytes -->
        <g fill="#50c030" opacity=".7"><ellipse cx="195" cy="30" rx="18" ry="8" transform="rotate(-25,195,30)"/><ellipse cx="310" cy="22" rx="16" ry="7" transform="rotate(20,310,22)"/><ellipse cx="85" cy="40" rx="14" ry="6" transform="rotate(-15,85,40)"/></g>
        <!-- Macaw pair -->
        <g transform="translate(200,220)">
          <ellipse cx="0" cy="0" rx="14" ry="20" fill="#2266cc"/>
          <ellipse cx="0" cy="-5" rx="9" ry="12" fill="#1a55bb"/>
          <path d="M-8,5 Q-20,5 -25,12" stroke="#2266cc" stroke-width="5" fill="none" stroke-linecap="round"/>
          <path d="M8,5 Q20,8 25,14" stroke="#2266cc" stroke-width="5" fill="none" stroke-linecap="round"/>
          <ellipse cx="0" cy="10" rx="8" ry="6" fill="#ff6600"/>
          <circle cx="-5" cy="-12" r="4" fill="#1a1a14"/>
          <circle cx="-4" cy="-13" r="1.5" fill="#fff"/>
          <path d="M-10,-10 Q-14,-6 -12,-4" fill="#ffcc00" stroke="none"/>
        </g>
        <!-- Hanging vine -->
        <path d="M320,0 Q310,100 330,200 Q315,300 325,400" stroke="#1a5a0a" stroke-width="4" fill="none"/>
        <g fill="#2a8020" opacity=".6"><ellipse cx="316" cy="85" rx="12" ry="6" transform="rotate(-30,316,85)"/><ellipse cx="324" cy="170" rx="11" ry="5" transform="rotate(25,324,170)"/><ellipse cx="320" cy="270" rx="12" ry="6" transform="rotate(-20,320,270)"/></g>
        <!-- Mist at ground level -->
        <rect x="0" y="340" width="400" height="60" fill="#88cc68" opacity=".15" filter="url(#rff)"/>
        <!-- Blue morpho butterfly -->
        <g transform="translate(120,310)">
          <ellipse cx="-12" cy="0" rx="18" ry="12" fill="#1a88ff" transform="rotate(25,-12,0)"/>
          <ellipse cx="12" cy="0" rx="18" ry="12" fill="#1a88ff" transform="rotate(-25,12,0)"/>
          <ellipse cx="-8" cy="2" rx="10" ry="7" fill="#44aaff" opacity=".6" transform="rotate(25,-8,2)"/>
          <ellipse cx="8" cy="2" rx="10" ry="7" fill="#44aaff" opacity=".6" transform="rotate(-25,8,2)"/>
          <rect x="-1.5" y="-10" width="3" height="20" rx="1.5" fill="#0a1a0a"/>
          <path d="M0,-10 Q5,-18 8,-22 M0,-10 Q-5,-18 -8,-22" stroke="#0a1a0a" stroke-width="1" fill="none"/>
        </g>
      </svg>
      <span class="ig-07__cap"><strong>Amazon Canopy</strong><em>Brazil · Rainforest</em></span>
      <span class="ig-07__num">01</span>
    </div>

    <!-- 2: Arctic tundra -->
    <div class="ig-07__tile" data-idx="1" data-cap="Arctic Tundra" data-loc="Svalbard · 78° N" data-color="#88ccdd">
      <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
        <defs><linearGradient id="atg" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#b8d8f0"/><stop offset="50%" stop-color="#d0e8f8"/><stop offset="100%" stop-color="#c8d8e8"/></linearGradient><filter id="atf"><feGaussianBlur stdDeviation="4"/></filter></defs>
        <rect width="200" height="200" fill="url(#atg)"/>
        <!-- Aurora hint -->
        <path d="M0,60 Q100,30 200,55" stroke="#40e8a0" stroke-width="18" fill="none" opacity=".3" filter="url(#atf)"/>
        <!-- Snow plain -->
        <path d="M0,130 Q50,118 100,125 Q150,118 200,128 L200,200 L0,200 Z" fill="#e0eef8"/>
        <path d="M0,148 Q50,138 100,144 Q150,138 200,146 L200,200 L0,200 Z" fill="#d0e4f4"/>
        <!-- Ice formations -->
        <g fill="#b8d0e8"><polygon points="25,130 35,108 45,130"/><polygon points="150,128 158,110 166,128"/></g>
        <!-- Musk ox herd silhouette -->
        <g fill="#2a1a08" transform="translate(30,148)">
          <ellipse cx="0" cy="0" rx="16" ry="10"/><ellipse cx="-8" cy="-6" rx="8" ry="9"/><rect x="-14" y="8" width="5" height="12" rx="2"/><rect x="-4" y="8" width="5" height="12" rx="2"/><rect x="5" y="8" width="5" height="12" rx="2"/><rect x="12" y="8" width="5" height="10" rx="2"/>
        </g>
        <g fill="#2a1a08" transform="translate(90,152)">
          <ellipse cx="0" cy="0" rx="13" ry="8"/><ellipse cx="-6" cy="-5" rx="6" ry="7"/><rect x="-11" y="7" width="4" height="10" rx="2"/><rect x="-3" y="7" width="4" height="10" rx="2"/><rect x="5" y="7" width="4" height="10" rx="2"/><rect x="11" y="7" width="4" height="8" rx="2"/>
        </g>
        <!-- Stars -->
        <g fill="#fff" opacity=".8"><circle cx="20" cy="15" r="1"/><circle cx="55" cy="8" r=".9"/><circle cx="100" cy="18" r="1.1"/><circle cx="145" cy="5" r=".9"/><circle cx="185" cy="14" r="1"/></g>
      </svg>
      <span class="ig-07__cap"><strong>Arctic Tundra</strong><em>Svalbard · 78° N</em></span>
      <span class="ig-07__num">02</span>
    </div>

    <!-- 3: Sahara dune -->
    <div class="ig-07__tile" data-idx="2" data-cap="Sahara Dunes" data-loc="Morocco · Erg Chebbi" data-color="#e8a838">
      <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
        <defs><linearGradient id="sdg" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#e8b840"/><stop offset="50%" stop-color="#d09828"/><stop offset="100%" stop-color="#8a5010"/></linearGradient></defs>
        <rect width="200" height="200" fill="url(#sdg)"/>
        <circle cx="100" cy="55" r="28" fill="#fff8c0" opacity=".9"/>
        <!-- Dune silhouettes -->
        <path d="M0,120 Q50,85 100,100 Q150,82 200,105 L200,200 L0,200 Z" fill="#c08828"/>
        <path d="M0,145 Q60,125 120,138 Q170,126 200,140 L200,200 L0,200 Z" fill="#a87020"/>
        <path d="M0,165 Q80,150 160,162 Q185,156 200,162 L200,200 L0,200 Z" fill="#8a5810"/>
        <!-- Ripple texture -->
        <g stroke="#c09030" stroke-width=".8" fill="none" opacity=".4">
          <path d="M0,132 Q50,125 100,130 Q150,124 200,128"/><path d="M0,142 Q50,136 100,140 Q150,135 200,138"/>
        </g>
        <!-- Scorpion -->
        <g fill="#5a3810" transform="translate(140,160)">
          <ellipse cx="0" cy="0" rx="6" ry="4"/><ellipse cx="-6" cy="0" rx="4" ry="3"/>
          <path d="M6,0 Q12,2 14,8 Q14,14 10,15" stroke="#5a3810" stroke-width="2" fill="none"/>
          <circle cx="10" cy="15" r="2" fill="#5a3810"/>
          <g stroke="#5a3810" stroke-width="1" fill="none"><line x1="-4" y1="-2" x2="-8" y2="-6"/><line x1="-4" y1="2" x2="-8" y2="6"/><line x1="-2" y1="-3" x2="-5" y2="-8"/><line x1="-2" y1="3" x2="-5" y2="8"/></g>
        </g>
      </svg>
      <span class="ig-07__cap"><strong>Sahara Dunes</strong><em>Morocco · Erg Chebbi</em></span>
      <span class="ig-07__num">03</span>
    </div>

    <!-- 4: Deep ocean trench -->
    <div class="ig-07__tile" data-idx="3" data-cap="Deep Ocean" data-loc="Pacific · Hadal zone" data-color="#2a8aee">
      <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
        <defs><radialGradient id="dog" cx="50%" cy="50%" r="60%"><stop offset="0%" stop-color="#0a1a2a"/><stop offset="100%" stop-color="#020508"/></radialGradient><filter id="dof"><feGaussianBlur stdDeviation="3"/></filter></defs>
        <rect width="200" height="200" fill="url(#dog)"/>
        <!-- Bioluminescent creatures -->
        <g filter="url(#dof)">
          <circle cx="60" cy="80" r="8" fill="#00e8ff" opacity=".8"/>
          <circle cx="140" cy="60" r="6" fill="#8040ff" opacity=".8"/>
          <circle cx="100" cy="120" r="10" fill="#00ffaa" opacity=".7"/>
          <circle cx="40" cy="150" r="7" fill="#00e8ff" opacity=".75"/>
          <circle cx="165" cy="140" r="8" fill="#ff40aa" opacity=".8"/>
          <circle cx="90" cy="170" r="6" fill="#40ffcc" opacity=".7"/>
          <circle cx="155" cy="180" r="5" fill="#00e8ff" opacity=".75"/>
        </g>
        <!-- Anglerfish lure -->
        <g transform="translate(110,90)">
          <ellipse cx="0" cy="8" rx="22" ry="14" fill="#0a1520"/>
          <path d="M0,0 Q5,-15 8,-28" stroke="#2a3a4a" stroke-width="2" fill="none"/>
          <circle cx="8" cy="-28" r="6" fill="#00ff88" filter="url(#dof)"/>
          <circle cx="8" cy="-28" r="3" fill="#80ffcc"/>
          <!-- Teeth -->
          <g fill="#a0b8c0"><polygon points="-15,2 -12,-4 -9,2"/><polygon points="-6,2 -3,-5 0,2"/><polygon points="3,2 6,-4 9,2"/><polygon points="12,2 15,-3 18,2"/></g>
          <!-- Eye -->
          <circle cx="-12" cy="2" r="4" fill="#0a0a14"/><circle cx="-11" cy="1" r="1.5" fill="#00ffaa" opacity=".8"/>
        </g>
        <!-- Tube worms -->
        <g stroke="#ff6080" stroke-width="2" fill="none" opacity=".6" stroke-linecap="round">
          <path d="M20,200 Q18,170 22,155 Q26,145 22,130"/><path d="M30,200 Q28,168 32,152 Q36,142 30,128"/>
          <path d="M168,200 Q172,172 168,158 Q165,148 170,134"/>
          <!-- Tube tops -->
          <circle cx="22" cy="130" r="4" fill="#ff4060" stroke="none"/><circle cx="30" cy="128" r="4" fill="#ff4060" stroke="none"/>
          <circle cx="170" cy="134" r="4" fill="#ff4060" stroke="none"/>
        </g>
        <!-- Particles drifting -->
        <g fill="#80c8ff" opacity=".4"><circle cx="50" cy="40" r="1.2"/><circle cx="120" cy="35" r="1"/><circle cx="175" cy="55" r="1.3"/><circle cx="30" cy="100" r="1.1"/><circle cx="180" cy="110" r="1.2"/></g>
      </svg>
      <span class="ig-07__cap"><strong>Deep Ocean</strong><em>Pacific · Hadal zone</em></span>
      <span class="ig-07__num">04</span>
    </div>

    <!-- 5: Aerial city -->
    <div class="ig-07__tile" data-idx="4" data-cap="City Aerial" data-loc="Manhattan · Night" data-color="#7c6cff">
      <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
        <rect width="200" height="200" fill="#0a0c18"/>
        <!-- City grid from above -->
        <g fill="none" stroke="#1a2a4a" stroke-width="1.5"><line x1="0" y1="40" x2="200" y2="40"/><line x1="0" y1="80" x2="200" y2="80"/><line x1="0" y1="120" x2="200" y2="120"/><line x1="0" y1="160" x2="200" y2="160"/><line x1="40" y1="0" x2="40" y2="200"/><line x1="80" y1="0" x2="80" y2="200"/><line x1="120" y1="0" x2="120" y2="200"/><line x1="160" y1="0" x2="160" y2="200"/></g>
        <!-- Building blocks (top-down) -->
        <g fill="#1a2a3a"><rect x="5" y="5" width="30" height="30" rx="2"/><rect x="45" y="5" width="28" height="30" rx="2"/><rect x="85" y="5" width="30" height="30" rx="2"/><rect x="45" y="45" width="30" height="30" rx="2"/><rect x="85" y="45" width="28" height="30" rx="2"/><rect x="125" y="5" width="30" height="30" rx="2"/><rect x="165" y="5" width="28" height="30" rx="2"/><rect x="5" y="45" width="30" height="30" rx="2"/><rect x="125" y="45" width="30" height="30" rx="2"/><rect x="165" y="45" width="28" height="30" rx="2"/><rect x="5" y="85" width="30" height="30" rx="2"/><rect x="45" y="85" width="30" height="30" rx="2"/><rect x="85" y="85" width="28" height="30" rx="2"/><rect x="125" y="85" width="30" height="30" rx="2"/><rect x="165" y="85" width="28" height="30" rx="2"/><rect x="5" y="125" width="30" height="30" rx="2"/><rect x="45" y="125" width="28" height="30" rx="2"/><rect x="85" y="125" width="30" height="30" rx="2"/><rect x="125" y="125" width="28" height="30" rx="2"/><rect x="165" y="125" width="30" height="30" rx="2"/><rect x="5" y="165" width="30" height="28" rx="2"/><rect x="45" y="165" width="30" height="28" rx="2"/><rect x="85" y="165" width="28" height="28" rx="2"/><rect x="125" y="165" width="30" height="28" rx="2"/><rect x="165" y="165" width="28" height="28" rx="2"/></g>
        <!-- Lit windows -->
        <g fill="#ffd060" opacity=".7"><rect x="8" y="8" width="4" height="4"/><rect x="16" y="8" width="4" height="4"/><rect x="24" y="8" width="4" height="4"/><rect x="48" y="8" width="4" height="4"/><rect x="56" y="8" width="4" height="4"/><rect x="90" y="8" width="4" height="4"/><rect x="98" y="8" width="4" height="4"/><rect x="128" y="8" width="4" height="4"/><rect x="136" y="8" width="4" height="4"/><rect x="48" y="50" width="4" height="4"/><rect x="60" y="50" width="4" height="4"/><rect x="88" y="52" width="4" height="4"/><rect x="96" y="50" width="4" height="4"/><rect x="168" y="8" width="4" height="4"/><rect x="176" y="8" width="4" height="4"/></g>
        <!-- Car lights on roads (streaks) -->
        <g fill="#ff8020" opacity=".6"><rect x="0" y="37" width="12" height="3" rx="1"/><rect x="100" y="77" width="10" height="3" rx="1"/></g>
        <g fill="#ffffff" opacity=".4"><rect x="185" y="42" width="12" height="3" rx="1"/><rect x="70" y="82" width="10" height="3" rx="1"/></g>
        <!-- Park (green block) -->
        <rect x="85" y="125" width="30" height="30" rx="2" fill="#1a4a18"/>
        <g fill="#2a6a28" opacity=".7"><circle cx="95" cy="135" r="5"/><circle cx="108" cy="132" r="4"/><circle cx="100" cy="148" r="5"/></g>
      </svg>
      <span class="ig-07__cap"><strong>City Aerial</strong><em>Manhattan · Night</em></span>
      <span class="ig-07__num">05</span>
    </div>

    <!-- 6: Volcanic island -->
    <div class="ig-07__tile" data-idx="5" data-cap="Volcanic Island" data-loc="Iceland · Fagradalsfjall" data-color="#ff5a32">
      <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
        <defs><radialGradient id="vig" cx="50%" cy="40%" r="60%"><stop offset="0%" stop-color="#2255aa"/><stop offset="50%" stop-color="#1a4488"/><stop offset="100%" stop-color="#0a1a3a"/></radialGradient><filter id="vif"><feGaussianBlur stdDeviation="3"/></filter></defs>
        <rect width="200" height="200" fill="url(#vig)"/>
        <!-- Ocean waves -->
        <g stroke="#3388cc" stroke-width="1.5" fill="none" opacity=".5"><path d="M0,155 Q50,145 100,152 Q150,145 200,150"/><path d="M0,165 Q50,156 100,162 Q150,156 200,160"/><path d="M0,175 Q50,167 100,172 Q150,167 200,172"/></g>
        <!-- Island volcano -->
        <polygon points="50,200 80,130 100,95 120,130 150,200" fill="#2a2010"/>
        <polygon points="60,200 80,130 100,95 120,130 140,200" fill="#3a3018"/>
        <!-- Lava flow -->
        <path d="M100,97 Q95,120 88,145 Q82,165 85,200" stroke="#ff4400" stroke-width="4" fill="none" opacity=".8"/>
        <path d="M100,97 Q104,118 110,140 Q115,162 112,200" stroke="#ff6600" stroke-width="3" fill="none" opacity=".6"/>
        <!-- Eruption glow -->
        <circle cx="100" cy="95" r="12" fill="#ff4400" opacity=".8" filter="url(#vif)"/>
        <circle cx="100" cy="95" r="5" fill="#ffaa00"/>
        <!-- Smoke plume -->
        <g filter="url(#vif)" opacity=".45"><circle cx="100" cy="78" r="14" fill="#555"/><circle cx="96" cy="62" r="12" fill="#666"/><circle cx="102" cy="46" r="10" fill="#555"/><circle cx="98" cy="32" r="8" fill="#666"/></g>
        <!-- Palm on shore -->
        <line x1="55" y1="200" x2="50" y2="170" stroke="#3a2808" stroke-width="3"/>
        <g fill="#2a6018"><ellipse cx="38" cy="167" rx="14" ry="5" transform="rotate(-30,38,167)"/><ellipse cx="48" cy="162" rx="14" ry="5" transform="rotate(15,48,162)"/><ellipse cx="60" cy="164" rx="12" ry="4" transform="rotate(45,60,164)"/></g>
        <!-- Stars/sky -->
        <g fill="#fff" opacity=".7"><circle cx="20" cy="18" r="1"/><circle cx="60" cy="8" r=".9"/><circle cx="155" cy="12" r="1.1"/><circle cx="185" cy="25" r=".8"/><circle cx="140" cy="35" r="1"/></g>
      </svg>
      <span class="ig-07__cap"><strong>Volcanic Island</strong><em>Iceland · Fagradalsfjall</em></span>
      <span class="ig-07__num">06</span>
    </div>

    <!-- 7: Cherry orchard -->
    <div class="ig-07__tile" data-idx="6" data-cap="Cherry Orchard" data-loc="Kyoto · Spring bloom" data-color="#ff8ab8">
      <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
        <defs><linearGradient id="cog2" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#fce4ec"/><stop offset="50%" stop-color="#f8bbd0"/><stop offset="100%" stop-color="#e8a0b8"/></linearGradient><filter id="cof2"><feGaussianBlur stdDeviation="2"/></filter></defs>
        <rect width="200" height="200" fill="url(#cog2)"/>
        <!-- Tree row in perspective -->
        <g fill="#4a1a08"><rect x="8" y="80" width="8" height="120"/><rect x="55" y="85" width="7" height="115"/><rect x="98" y="88" width="7" height="112"/><rect x="138" y="86" width="7" height="114"/><rect x="178" y="84" width="7" height="116"/></g>
        <!-- Blossom clouds -->
        <g filter="url(#cof2)">
          <circle cx="12" cy="68" r="32" fill="#f48fb1" opacity=".9"/><circle cx="12" cy="55" r="25" fill="#f8c4d4" opacity=".85"/>
          <circle cx="58" cy="72" r="28" fill="#f48fb1" opacity=".88"/><circle cx="58" cy="60" r="22" fill="#f8c4d4" opacity=".8"/>
          <circle cx="101" cy="75" r="26" fill="#f48fb1" opacity=".85"/><circle cx="101" cy="64" r="20" fill="#f8c4d4" opacity=".78"/>
          <circle cx="141" cy="73" r="24" fill="#f48fb1" opacity=".85"/><circle cx="141" cy="62" r="18" fill="#f8c4d4" opacity=".78"/>
          <circle cx="181" cy="70" r="22" fill="#f48fb1" opacity=".82"/><circle cx="181" cy="60" r="17" fill="#f8c4d4" opacity=".75"/>
        </g>
        <!-- Ground cover / grass -->
        <path d="M0,168 Q50,160 100,165 Q150,160 200,165 L200,200 L0,200 Z" fill="#7ab840" opacity=".7"/>
        <!-- Fallen petals -->
        <g fill="#f8c4d4" opacity=".8"><ellipse cx="25" cy="175" rx="5" ry="2.5" transform="rotate(15,25,175)"/><ellipse cx="70" cy="178" rx="4" ry="2" transform="rotate(-20,70,178)"/><ellipse cx="120" cy="172" rx="5" ry="2.5" transform="rotate(28,120,172)"/><ellipse cx="168" cy="176" rx="4" ry="2" transform="rotate(-12,168,176)"/></g>
        <!-- Person with basket -->
        <g fill="#3a1a08" transform="translate(48,165)">
          <ellipse cx="0" cy="-6" rx="5" ry="7"/><circle cx="0" cy="-15" r="5"/>
          <path d="M-5,-5 Q-10,0 -8,5" stroke="#3a1a08" stroke-width="2" fill="none"/>
          <path d="M5,-5 Q8,-2 10,2 Q12,4 10,6" stroke="#3a1a08" stroke-width="2" fill="none"/>
          <ellipse cx="12" cy="7" rx="6" ry="4" fill="#8a5028"/>
        </g>
        <!-- Cherries on branch -->
        <g><circle cx="145" cy="58" r="5" fill="#cc1a20"/><circle cx="155" cy="55" r="5" fill="#cc1a20"/><circle cx="150" cy="62" r="5" fill="#cc1a20"/><path d="M150,52 Q148,44 145,40" stroke="#2a5a10" stroke-width="1.5" fill="none"/><path d="M155,50 Q157,42 155,38" stroke="#2a5a10" stroke-width="1.5" fill="none"/></g>
      </svg>
      <span class="ig-07__cap"><strong>Cherry Orchard</strong><em>Kyoto · Spring bloom</em></span>
      <span class="ig-07__num">07</span>
    </div>

    <!-- 8: Snowy mountain summit -->
    <div class="ig-07__tile" data-idx="7" data-cap="Summit Climb" data-loc="K2 · 8,611 m" data-color="#cdd6e0">
      <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
        <defs><linearGradient id="smg" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#1a2a3a"/><stop offset="40%" stop-color="#2a3a50"/><stop offset="100%" stop-color="#3a5060"/></linearGradient><filter id="smf"><feGaussianBlur stdDeviation="3"/></filter></defs>
        <rect width="200" height="200" fill="url(#smg)"/>
        <!-- Stars dense -->
        <g fill="#fff"><circle cx="10" cy="8" r=".9" opacity=".8"/><circle cx="30" cy="4" r="1" opacity=".9"/><circle cx="55" cy="12" r=".8" opacity=".7"/><circle cx="80" cy="5" r="1.1" opacity=".85"/><circle cx="105" cy="9" r=".9" opacity=".8"/><circle cx="130" cy="3" r="1" opacity=".88"/><circle cx="155" cy="11" r=".8" opacity=".75"/><circle cx="178" cy="5" r="1.1" opacity=".85"/><circle cx="195" cy="14" r=".9" opacity=".8"/><circle cx="20" cy="28" r=".8" opacity=".7"/><circle cx="48" cy="22" r="1" opacity=".82"/><circle cx="75" cy="30" r=".9" opacity=".78"/><circle cx="115" cy="24" r=".8" opacity=".8"/><circle cx="160" cy="28" r="1" opacity=".82"/><circle cx="188" cy="22" r=".9" opacity=".78"/></g>
        <!-- Mountain face -->
        <polygon points="0,200 40,100 100,45 160,100 200,200" fill="#c8d8e8"/>
        <polygon points="40,100 100,45 160,100 140,200 60,200" fill="#d8e8f8"/>
        <!-- Summit snow cap -->
        <polygon points="82,80 100,45 118,80 110,88 90,88" fill="#f0f8ff"/>
        <polygon points="85,78 100,48 115,78" fill="#ffffff"/>
        <!-- Crevasse shadows -->
        <g fill="#a0b8cc" opacity=".6"><path d="M55,130 Q65,120 75,132 Q70,142 60,140 Z"/><path d="M130,125 Q140,115 148,127 Q144,137 133,135 Z"/></g>
        <!-- Climber rope line -->
        <path d="M100,45 Q95,80 88,115 Q82,145 78,175" stroke="#ff4020" stroke-width="1.5" fill="none" stroke-dasharray="4,3" opacity=".7"/>
        <!-- Climber at summit -->
        <g transform="translate(100,45)">
          <circle cx="0" cy="-10" r="4" fill="#1a1a2a"/>
          <ellipse cx="0" cy="-3" rx="5" ry="6" fill="#ff4020"/>
          <path d="M-5,-4 Q-10,0 -10,5" stroke="#1a1a2a" stroke-width="2" fill="none"/>
          <path d="M5,-4 Q10,-2 12,3" stroke="#1a1a2a" stroke-width="2" fill="none"/>
          <!-- Flag -->
          <line x1="12" y1="3" x2="12" y2="-12" stroke="#888" stroke-width="1.2"/>
          <polygon points="12,-12 20,-10 12,-6" fill="#ff4020"/>
        </g>
        <!-- Snow ridgeline -->
        <path d="M0,160 Q40,140 100,125 Q160,140 200,150" stroke="#e0ecf8" stroke-width="2" fill="none" opacity=".5"/>
      </svg>
      <span class="ig-07__cap"><strong>Summit Climb</strong><em>K2 · 8,611 m</em></span>
      <span class="ig-07__num">08</span>
    </div>

  </div>

  <footer class="ig-07__statusbar">
    <span>↑ Click a tile to feature</span>
    <span class="ig-07__hint">SVG scale(1.08) on hover · grid-column span 2 on click</span>
    <span>MIT · prefers-reduced-motion ✓</span>
  </footer>

</div>
```

**CSS:**
```css
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
body{background:#0a0a0e;font-family:'DM Sans',sans-serif;padding:1rem;min-height:100vh;display:flex;align-items:center;justify-content:center;color:#fff}
.ig-07{width:100%;max-width:860px;background:#0a0a0e;padding:1rem 1.1rem;display:flex;flex-direction:column;gap:.7rem}
.ig-07__chrome{display:flex;justify-content:space-between;align-items:center;padding-bottom:.55rem;border-bottom:1px solid #1c1c24;flex-wrap:wrap;gap:.5rem}
.ig-07__chrome-l{display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap}
.ig-07__title{font-family:'Playfair Display',serif;font-style:italic;font-weight:700;font-size:1.5rem;color:#fff;letter-spacing:-0.01em}
.ig-07__sub{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:#7a7a8a;font-weight:600}
.ig-07__pill{font-size:.65rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#0a0a0e;background:#fff;padding:.35rem .7rem;border-radius:999px}
.ig-07__grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:100px;gap:5px}
.ig-07__tile{overflow:hidden;border-radius:6px;cursor:pointer;position:relative;outline:1px solid rgba(255,255,255,.05);transition:outline-color .3s ease;background:#0a0a0e}
.ig-07__tile:hover{outline-color:var(--accent,#fff);outline-width:2px}
.ig-07__tile svg{width:100%;height:100%;display:block;position:absolute;inset:0;transition:transform .55s cubic-bezier(.25,.46,.45,.94)}
.ig-07__tile:hover svg{transform:scale(1.1)}
.ig-07__tile--active{grid-column:span 2;grid-row:span 2;outline-color:var(--accent,#fff);outline-width:2px}
.ig-07__tile--active svg{transform:scale(1)}
.ig-07__tile--active:hover svg{transform:scale(1.04)}
.ig-07__tile[data-color="#2a9018"]{--accent:#3aa628}
.ig-07__tile[data-color="#88ccdd"]{--accent:#88ccdd}
.ig-07__tile[data-color="#e8a838"]{--accent:#e8a838}
.ig-07__tile[data-color="#2a8aee"]{--accent:#2a8aee}
.ig-07__tile[data-color="#7c6cff"]{--accent:#7c6cff}
.ig-07__tile[data-color="#ff5a32"]{--accent:#ff5a32}
.ig-07__tile[data-color="#ff8ab8"]{--accent:#ff8ab8}
.ig-07__tile[data-color="#cdd6e0"]{--accent:#cdd6e0}
.ig-07__num{position:absolute;top:.45rem;right:.5rem;z-index:3;font-family:'Courier New',monospace;font-size:.6rem;font-weight:700;color:#fff;background:rgba(0,0,0,.55);padding:.18rem .42rem;border-radius:3px;letter-spacing:.1em;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.ig-07__cap{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:.55rem .65rem .5rem;display:flex;flex-direction:column;background:linear-gradient(to top,rgba(0,0,0,.92) 0%,rgba(0,0,0,.55) 60%,rgba(0,0,0,0) 100%);pointer-events:none;transform:translateY(0);transition:padding .35s ease}
.ig-07__cap strong{font-size:.72rem;font-weight:700;color:#fff;line-height:1.15;letter-spacing:-0.005em;text-shadow:0 1px 4px rgba(0,0,0,.7)}
.ig-07__cap em{font-style:normal;font-size:.55rem;font-weight:500;color:rgba(255,255,255,.7);letter-spacing:.1em;margin-top:.15rem;opacity:0;max-height:0;transition:opacity .3s ease,max-height .3s ease}
.ig-07__tile--active .ig-07__cap{padding:1rem 1.2rem 1rem}
.ig-07__tile--active .ig-07__cap strong{font-size:1.5rem;line-height:1.1;border-left:3px solid var(--accent,#fff);padding-left:.7rem;margin-bottom:.3rem}
.ig-07__tile--active .ig-07__cap em{opacity:1;max-height:24px;font-size:.66rem;padding-left:.85rem}
.ig-07__tile:not(.ig-07__tile--active):hover .ig-07__cap em{opacity:1;max-height:24px}
.ig-07__statusbar{display:flex;justify-content:space-between;align-items:center;font-size:.6rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:#5a5a6a;padding-top:.5rem;border-top:1px solid #1c1c24;flex-wrap:wrap;gap:.5rem}
.ig-07__hint{color:#9a9aaa;font-family:'Courier New',monospace;letter-spacing:.05em;text-transform:none}
@media(prefers-reduced-motion:reduce){.ig-07__tile svg,.ig-07__tile,.ig-07__cap,.ig-07__cap em{transition:none}.ig-07__tile:hover svg{transform:none}}
```

**JS:**
```js
(function(){
  const grid=document.getElementById('ig-07-grid');
  const counter=document.getElementById('ig-07-counter');
  if(!grid)return;
  const tiles=Array.from(grid.querySelectorAll('.ig-07__tile'));
  const total=String(tiles.length).padStart(2,'0');
  function syncCounter(){
    if(!counter)return;
    const active=grid.querySelector('.ig-07__tile--active');
    if(!active){counter.textContent='Featured · — / '+total;return;}
    const idx=tiles.indexOf(active)+1;
    const cap=active.getAttribute('data-cap')||'';
    counter.textContent='Featured · '+String(idx).padStart(2,'0')+' / '+total+' · '+cap;
  }
  tiles.forEach(t=>{
    t.addEventListener('click',()=>{
      const active=grid.querySelector('.ig-07__tile--active');
      if(active&&active!==t)active.classList.remove('ig-07__tile--active');
      t.classList.toggle('ig-07__tile--active');
      syncCounter();
    });
  });
  syncCounter();
}());
```

### 08. CSS Metro Tile Grid Gallery

**Type:** Pure CSS
**Description:** A real Windows Metro / Live Tile dashboard: start-screen chrome with username + pin count + signal/time, six bold sans-serif tiles in a 4-column grid with mixed span-1/span-2 sizing, category accent stripes on the left edge, in-tile metadata (category badge, photo count, big light-weight title, subtitle), and a live-tile flip on hover that swaps the chrome for a full metadata panel (mission, capture date, resolution, distance, telescope) with a VIEW → CTA in the accent color.

**HTML:**
```html
<div class="ig-08">

  <!-- Start screen chrome -->
  <header class="ig-08__chrome">
    <div class="ig-08__chrome-l">
      <span class="ig-08__user">★ COSMOS COLLECTION</span>
      <span class="ig-08__pinned">6 tiles pinned · all sky</span>
    </div>
    <div class="ig-08__chrome-r">
      <span class="ig-08__time">14:45 · TUE</span>
      <span class="ig-08__signal">▮▮▮▯</span>
    </div>
  </header>

  <div class="ig-08__grid">

    <!-- 1 LARGE: Nebula -->
    <div class="ig-08__tile" data-cat="NEBULA" data-color="#e91e63">
      <svg viewBox="0 0 360 500" xmlns="http://www.w3.org/2000/svg" style="aspect-ratio:360/500">
        <defs>
          <radialGradient id="nb1" cx="40%" cy="45%" r="55%"><stop offset="0%" stop-color="#ff6080" stop-opacity=".9"/><stop offset="50%" stop-color="#8020e0" stop-opacity=".7"/><stop offset="100%" stop-color="#020408" stop-opacity="1"/></radialGradient>
          <radialGradient id="nb2" cx="65%" cy="55%" r="45%"><stop offset="0%" stop-color="#4080ff" stop-opacity=".8"/><stop offset="60%" stop-color="#0020a0" stop-opacity=".5"/><stop offset="100%" stop-color="#020408" stop-opacity="0"/></radialGradient>
          <filter id="nbf"><feGaussianBlur stdDeviation="12"/></filter>
          <filter id="nbf2"><feGaussianBlur stdDeviation="4"/></filter>
        </defs>
        <rect width="360" height="500" fill="#020408"/>
        <rect width="360" height="500" fill="url(#nb1)" filter="url(#nbf)"/>
        <rect width="360" height="500" fill="url(#nb2)" filter="url(#nbf)"/>
        <!-- Extra glow wisps -->
        <ellipse cx="120" cy="200" rx="100" ry="80" fill="#ff2060" opacity=".2" filter="url(#nbf)"/>
        <ellipse cx="240" cy="280" rx="90" ry="70" fill="#2040ff" opacity=".25" filter="url(#nbf)"/>
        <ellipse cx="180" cy="150" rx="60" ry="50" fill="#ff80aa" opacity=".15" filter="url(#nbf)"/>
        <!-- Dense star field -->
        <g fill="#fff">
          <circle cx="12" cy="18" r=".8" opacity=".9"/><circle cx="35" cy="8" r="1.2" opacity=".95"/><circle cx="68" cy="22" r=".9" opacity=".8"/>
          <circle cx="95" cy="10" r="1.1" opacity=".88"/><circle cx="130" cy="28" r=".8" opacity=".75"/><circle cx="162" cy="8" r="1.3" opacity=".95"/>
          <circle cx="198" cy="18" r=".9" opacity=".85"/><circle cx="230" cy="6" r="1.1" opacity=".9"/><circle cx="265" cy="24" r=".8" opacity=".78"/>
          <circle cx="298" cy="12" r="1.2" opacity=".88"/><circle cx="330" cy="20" r=".9" opacity=".82"/><circle cx="355" cy="8" r=".8" opacity=".8"/>
          <circle cx="20" cy="55" r="1" opacity=".85"/><circle cx="50" cy="48" r=".9" opacity=".8"/><circle cx="82" cy="62" r="1.1" opacity=".88"/>
          <circle cx="118" cy="50" r=".8" opacity=".75"/><circle cx="145" cy="68" r="1" opacity=".85"/><circle cx="180" cy="52" r="1.2" opacity=".9"/>
          <circle cx="215" cy="60" r=".9" opacity=".82"/><circle cx="248" cy="45" r="1.1" opacity=".88"/><circle cx="282" cy="58" r=".8" opacity=".78"/>
          <circle cx="318" cy="48" r="1" opacity=".85"/><circle cx="348" cy="65" r=".9" opacity=".8"/>
          <!-- Brighter star clusters -->
          <circle cx="80" cy="160" r="2" opacity=".95"/><circle cx="200" cy="100" r="2.2" opacity=".98"/>
          <circle cx="310" cy="200" r="1.8" opacity=".9"/><circle cx="60" cy="350" r="2" opacity=".92"/>
          <circle cx="280" cy="380" r="2.1" opacity=".95"/><circle cx="160" cy="420" r="1.8" opacity=".88"/>
          <!-- Scatter mid -->
          <circle cx="30" cy="120" r=".8"/><circle cx="70" cy="100" r=".9" opacity=".8"/><circle cx="110" cy="130" r=".8" opacity=".85"/>
          <circle cx="150" cy="110" r=".9" opacity=".8"/><circle cx="190" cy="135" r=".8" opacity=".75"/><circle cx="230" cy="115" r="1" opacity=".85"/>
          <circle cx="270" cy="125" r=".8" opacity=".82"/><circle cx="310" cy="108" r=".9" opacity=".88"/><circle cx="340" cy="130" r=".8" opacity=".78"/>
        </g>
        <!-- Dust lanes (dark) -->
        <path d="M80,180 Q140,220 180,200 Q230,175 290,210" stroke="#020408" stroke-width="18" fill="none" opacity=".5"/>
        <path d="M60,260 Q100,300 160,285 Q220,268 270,300" stroke="#020408" stroke-width="12" fill="none" opacity=".4"/>
        <!-- Bright core -->
        <circle cx="160" cy="250" r="25" fill="#ffccee" opacity=".6" filter="url(#nbf2)"/>
        <circle cx="160" cy="250" r="8" fill="#fff" opacity=".8"/>
      </svg>
      <div class="ig-08__tile-chrome">
        <div class="ig-08__tile-top">
          <span class="ig-08__cat">NEBULA</span>
          <span class="ig-08__count">12 photos</span>
        </div>
        <div class="ig-08__tile-bottom">
          <h3 class="ig-08__title">Carina<br/>Nebula</h3>
          <p class="ig-08__sub">NGC 3372 · 7,500 light-years</p>
        </div>
      </div>
      <div class="ig-08__flip">
        <p class="ig-08__flip-line"><span>Mission</span><strong>James Webb</strong></p>
        <p class="ig-08__flip-line"><span>Captured</span><strong>2022.07.12</strong></p>
        <p class="ig-08__flip-line"><span>Resolution</span><strong>4536 × 6244</strong></p>
        <p class="ig-08__flip-line"><span>Constellation</span><strong>Carina</strong></p>
        <span class="ig-08__flip-cta">VIEW ALBUM →</span>
      </div>
    </div>

    <!-- 2: Planet with rings -->
    <div class="ig-08__tile" data-cat="PLANET" data-color="#ff9800">
      <svg viewBox="0 0 180 240" xmlns="http://www.w3.org/2000/svg" style="aspect-ratio:180/240">
        <defs><radialGradient id="plg" cx="38%" cy="35%" r="62%"><stop offset="0%" stop-color="#c8a060"/><stop offset="50%" stop-color="#a87830"/><stop offset="100%" stop-color="#5a3808"/></radialGradient><filter id="plf"><feGaussianBlur stdDeviation="5"/></filter></defs>
        <rect width="180" height="240" fill="#030508"/>
        <g fill="#fff" opacity=".7"><circle cx="15" cy="12" r=".8"/><circle cx="45" cy="5" r="1"/><circle cx="90" cy="8" r=".9"/><circle cx="140" cy="14" r=".8"/><circle cx="168" cy="6" r="1.1"/><circle cx="25" cy="35" r=".9"/><circle cx="75" cy="28" r=".8"/><circle cx="125" cy="32" r="1"/><circle cx="160" cy="40" r=".8"/></g>
        <!-- Rings (behind planet) -->
        <ellipse cx="90" cy="130" rx="80" ry="22" fill="none" stroke="#c8a060" stroke-width="8" opacity=".35"/>
        <ellipse cx="90" cy="130" rx="80" ry="22" fill="none" stroke="#e0b870" stroke-width="4" opacity=".25"/>
        <!-- Planet body -->
        <circle cx="90" cy="120" r="55" fill="url(#plg)"/>
        <!-- Storm bands -->
        <g fill="none"><path d="M38,108 Q90,98 142,108" stroke="#8a5820" stroke-width="6" opacity=".5"/><path d="M36,120 Q90,112 144,120" stroke="#7a4818" stroke-width="8" opacity=".4"/><path d="M38,132 Q90,126 142,132" stroke="#8a5820" stroke-width="5" opacity=".45"/></g>
        <!-- Great storm spot -->
        <ellipse cx="110" cy="118" rx="12" ry="9" fill="#6a3810" opacity=".7"/>
        <ellipse cx="110" cy="118" rx="7" ry="5" fill="#c08040" opacity=".5"/>
        <!-- Rings (front) -->
        <ellipse cx="90" cy="130" rx="80" ry="22" fill="none" stroke="#c8a060" stroke-width="8" opacity=".25" clip-path="none"/>
        <path d="M10,140 Q90,152 170,140" stroke="#c8a060" stroke-width="8" fill="none" opacity=".3"/>
        <!-- Ring shadow on planet -->
        <ellipse cx="90" cy="130" rx="45" ry="6" fill="#3a1a08" opacity=".4"/>
        <!-- Moon -->
        <circle cx="155" cy="55" r="12" fill="#888a8c"/>
        <circle cx="158" cy="52" r="9" fill="#9a9c9e"/>
        <g fill="#6a6c6e" opacity=".7"><circle cx="152" cy="50" r="2.5"/><circle cx="160" cy="58" r="2"/><circle cx="156" cy="54" r="1.5"/></g>
      </svg>
      <div class="ig-08__tile-chrome">
        <div class="ig-08__tile-top">
          <span class="ig-08__cat">PLANET</span>
          <span class="ig-08__count">8</span>
        </div>
        <div class="ig-08__tile-bottom">
          <h3 class="ig-08__title">Saturn</h3>
          <p class="ig-08__sub">Ringed gas giant</p>
        </div>
      </div>
      <div class="ig-08__flip">
        <p class="ig-08__flip-line"><span>Mission</span><strong>Cassini</strong></p>
        <p class="ig-08__flip-line"><span>Distance</span><strong>1.4 B km</strong></p>
        <p class="ig-08__flip-line"><span>Moons</span><strong>146</strong></p>
        <span class="ig-08__flip-cta">VIEW →</span>
      </div>
    </div>

    <!-- 3: Galaxy spiral -->
    <div class="ig-08__tile" data-cat="GALAXY" data-color="#9c27b0">
      <svg viewBox="0 0 180 240" xmlns="http://www.w3.org/2000/svg" style="aspect-ratio:180/240">
        <defs><radialGradient id="glg" cx="50%" cy="50%" r="50%"><stop offset="0%" stop-color="#fff8e0" stop-opacity=".9"/><stop offset="30%" stop-color="#ffd080" stop-opacity=".7"/><stop offset="70%" stop-color="#8040c0" stop-opacity=".4"/><stop offset="100%" stop-color="#020408" stop-opacity="0"/></radialGradient><filter id="glf"><feGaussianBlur stdDeviation="6"/></filter><filter id="glf2"><feGaussianBlur stdDeviation="2"/></filter></defs>
        <rect width="180" height="240" fill="#020408"/>
        <g fill="#fff" opacity=".6"><circle cx="10" cy="10" r=".8"/><circle cx="35" cy="5" r=".9"/><circle cx="70" cy="15" r=".8"/><circle cx="110" cy="8" r="1"/><circle cx="150" cy="12" r=".8"/><circle cx="170" cy="5" r=".9"/><circle cx="20" cy="32" r=".9"/><circle cx="60" cy="28" r=".8"/><circle cx="95" cy="35" r="1"/><circle cx="135" cy="30" r=".8"/><circle cx="165" cy="38" r=".9"/></g>
        <!-- Galaxy core -->
        <ellipse cx="90" cy="120" rx="80" ry="80" fill="url(#glg)" filter="url(#glf)"/>
        <!-- Spiral arms -->
        <path d="M90,120 Q110,80 130,60 Q155,42 165,55 Q175,70 160,85 Q145,100 125,105 Q105,110 90,120" stroke="#c080ff" stroke-width="3" fill="none" opacity=".6" filter="url(#glf2)"/>
        <path d="M90,120 Q70,160 50,180 Q25,198 15,185 Q5,170 20,155 Q35,140 55,135 Q75,130 90,120" stroke="#c080ff" stroke-width="3" fill="none" opacity=".6" filter="url(#glf2)"/>
        <path d="M90,120 Q130,110 155,125 Q178,138 172,155 Q165,170 148,165 Q130,158 118,145 Q106,132 90,120" stroke="#8040ff" stroke-width="2" fill="none" opacity=".5" filter="url(#glf2)"/>
        <path d="M90,120 Q50,130 25,115 Q2,102 8,85 Q15,70 32,75 Q50,82 62,95 Q74,108 90,120" stroke="#8040ff" stroke-width="2" fill="none" opacity=".5" filter="url(#glf2)"/>
        <!-- Bright core center -->
        <circle cx="90" cy="120" r="12" fill="#fff8e0" opacity=".8" filter="url(#glf2)"/>
        <circle cx="90" cy="120" r="5" fill="#fff"/>
        <!-- Satellite galaxy -->
        <circle cx="145" cy="55" r="8" fill="#a070d0" opacity=".5" filter="url(#glf2)"/>
        <circle cx="145" cy="55" r="4" fill="#c0a0e0" opacity=".7" filter="url(#glf2)"/>
      </svg>
      <div class="ig-08__tile-chrome">
        <div class="ig-08__tile-top">
          <span class="ig-08__cat">GALAXY</span>
          <span class="ig-08__count">14</span>
        </div>
        <div class="ig-08__tile-bottom">
          <h3 class="ig-08__title">Andromeda</h3>
          <p class="ig-08__sub">M31 spiral · 2.5 M ly</p>
        </div>
      </div>
      <div class="ig-08__flip">
        <p class="ig-08__flip-line"><span>Type</span><strong>Spiral Sb</strong></p>
        <p class="ig-08__flip-line"><span>Stars</span><strong>~1 trillion</strong></p>
        <p class="ig-08__flip-line"><span>Diameter</span><strong>220,000 ly</strong></p>
        <span class="ig-08__flip-cta">VIEW →</span>
      </div>
    </div>

    <!-- 4: Aurora from space -->
    <div class="ig-08__tile" data-cat="EARTH" data-color="#00bcd4">
      <svg viewBox="0 0 180 240" xmlns="http://www.w3.org/2000/svg" style="aspect-ratio:180/240">
        <defs><radialGradient id="eag" cx="50%" cy="80%" r="60%"><stop offset="0%" stop-color="#1a3a5a"/><stop offset="50%" stop-color="#0a1a2a"/><stop offset="100%" stop-color="#020408"/></radialGradient><filter id="eaf"><feGaussianBlur stdDeviation="8"/></filter><filter id="eaf2"><feGaussianBlur stdDeviation="3"/></filter></defs>
        <rect width="180" height="240" fill="#020408"/>
        <g fill="#fff" opacity=".65"><circle cx="15" cy="18" r=".8"/><circle cx="40" cy="8" r="1"/><circle cx="80" cy="15" r=".8"/><circle cx="115" cy="6" r=".9"/><circle cx="155" cy="20" r=".8"/><circle cx="172" cy="10" r="1"/><circle cx="25" cy="40" r=".9"/><circle cx="65" cy="32" r=".8"/><circle cx="100" cy="42" r="1"/><circle cx="140" cy="35" r=".8"/><circle cx="168" cy="45" r=".9"/></g>
        <!-- Earth curve from space -->
        <path d="M0,180 Q90,155 180,178 L180,240 L0,240 Z" fill="url(#eag)"/>
        <path d="M0,185 Q90,162 180,183" stroke="#1a4a7a" stroke-width="2" fill="none" opacity=".5"/>
        <!-- Atmosphere glow edge -->
        <path d="M0,178 Q90,152 180,175" stroke="#4488cc" stroke-width="6" fill="none" opacity=".3" filter="url(#eaf2)"/>
        <!-- Aurora bands from space -->
        <g filter="url(#eaf)" opacity=".7">
          <path d="M0,140 Q45,110 90,130 Q135,148 180,125" stroke="#00ff88" stroke-width="22" fill="none"/>
          <path d="M0,158 Q50,132 95,148 Q140,163 180,142" stroke="#4040ff" stroke-width="14" fill="none"/>
          <path d="M0,125 Q40,100 85,118 Q130,135 180,112" stroke="#00e8d0" stroke-width="10" fill="none"/>
        </g>
        <!-- Space / stars above -->
        <g fill="#fff" opacity=".8"><circle cx="20" cy="65" r="1.2"/><circle cx="55" cy="58" r=".9"/><circle cx="90" cy="70" r="1.1"/><circle cx="130" cy="60" r=".9"/><circle cx="160" cy="72" r="1.2"/><circle cx="40" cy="88" r=".8"/><circle cx="78" cy="92" r="1"/><circle cx="118" cy="85" r=".9"/><circle cx="152" cy="93" r=".8"/></g>
        <!-- ISS silhouette -->
        <g transform="translate(130,85)" fill="#aaa">
          <rect x="-18" y="-2" width="36" height="4" rx="1"/>
          <rect x="-3" y="-8" width="6" height="16" rx="1"/>
          <rect x="-22" y="-1" width="8" height="2" rx="1"/>
          <rect x="14" y="-1" width="8" height="2" rx="1"/>
        </g>
      </svg>
      <div class="ig-08__tile-chrome">
        <div class="ig-08__tile-top">
          <span class="ig-08__cat">EARTH</span>
          <span class="ig-08__count">23</span>
        </div>
        <div class="ig-08__tile-bottom">
          <h3 class="ig-08__title">Aurora from Orbit</h3>
          <p class="ig-08__sub">ISS · LEO 400 km</p>
        </div>
      </div>
      <div class="ig-08__flip">
        <p class="ig-08__flip-line"><span>Captured</span><strong>2024.03.18</strong></p>
        <p class="ig-08__flip-line"><span>Crew</span><strong>Expedition 70</strong></p>
        <p class="ig-08__flip-line"><span>Altitude</span><strong>408 km</strong></p>
        <span class="ig-08__flip-cta">VIEW →</span>
      </div>
    </div>

    <!-- 5: Black hole -->
    <div class="ig-08__tile" data-cat="ANOMALY" data-color="#7c4dff">
      <svg viewBox="0 0 180 240" xmlns="http://www.w3.org/2000/svg" style="aspect-ratio:180/240">
        <defs>
          <radialGradient id="bhg" cx="50%" cy="50%" r="50%"><stop offset="0%" stop-color="#000000"/><stop offset="40%" stop-color="#080410"/><stop offset="75%" stop-color="#300a60" stop-opacity=".9"/><stop offset="100%" stop-color="#020408" stop-opacity="0"/></radialGradient>
          <radialGradient id="bhd" cx="50%" cy="50%" r="50%"><stop offset="0%" stop-color="#ff8020" stop-opacity=".8"/><stop offset="60%" stop-color="#ff4000" stop-opacity=".4"/><stop offset="100%" stop-color="#020408" stop-opacity="0"/></radialGradient>
          <filter id="bhf"><feGaussianBlur stdDeviation="6"/></filter>
          <filter id="bhf2"><feGaussianBlur stdDeviation="2"/></filter>
        </defs>
        <rect width="180" height="240" fill="#020408"/>
        <g fill="#fff" opacity=".7"><circle cx="10" cy="15" r=".9"/><circle cx="38" cy="5" r="1.1"/><circle cx="72" cy="18" r=".8"/><circle cx="108" cy="8" r="1"/><circle cx="148" cy="20" r=".9"/><circle cx="170" cy="8" r=".8"/><circle cx="25" cy="40" r=".8"/><circle cx="62" cy="32" r="1"/><circle cx="100" cy="44" r=".9"/><circle cx="138" cy="35" r=".8"/><circle cx="165" cy="48" r="1"/></g>
        <!-- Accretion disk glow -->
        <ellipse cx="90" cy="125" rx="78" ry="28" fill="url(#bhd)" filter="url(#bhf)"/>
        <ellipse cx="90" cy="118" rx="65" ry="20" fill="#ff6010" opacity=".3" filter="url(#bhf2)"/>
        <!-- Disk detail streaks -->
        <g stroke="#ffa040" stroke-width="1.5" fill="none" opacity=".5" filter="url(#bhf2)">
          <path d="M12,120 Q50,108 90,115 Q130,108 168,120"/>
          <path d="M18,128 Q55,118 90,124 Q125,118 162,128"/>
        </g>
        <!-- Event horizon -->
        <circle cx="90" cy="120" r="48" fill="url(#bhg)"/>
        <circle cx="90" cy="120" r="36" fill="#000"/>
        <circle cx="90" cy="120" r="38" fill="none" stroke="#6020a0" stroke-width="3" opacity=".3" filter="url(#bhf2)"/>
        <!-- Gravitational lensing arc -->
        <path d="M20,100 Q60,70 110,80 Q140,88 160,105" stroke="#c0a0e0" stroke-width="1.5" fill="none" opacity=".4"/>
        <path d="M22,140 Q62,165 110,162 Q140,158 162,148" stroke="#c0a0e0" stroke-width="1.5" fill="none" opacity=".3"/>
        <!-- Jet -->
        <path d="M90,82 Q88,60 90,30 Q92,10 90,0" stroke="#8040ff" stroke-width="4" fill="none" opacity=".5" filter="url(#bhf2)"/>
        <path d="M90,158 Q88,180 90,210 Q92,230 90,240" stroke="#8040ff" stroke-width="4" fill="none" opacity=".5" filter="url(#bhf2)"/>
      </svg>
      <div class="ig-08__tile-chrome">
        <div class="ig-08__tile-top">
          <span class="ig-08__cat">ANOMALY</span>
          <span class="ig-08__count">7</span>
        </div>
        <div class="ig-08__tile-bottom">
          <h3 class="ig-08__title">Black Hole</h3>
          <p class="ig-08__sub">M87* · supermassive</p>
        </div>
      </div>
      <div class="ig-08__flip">
        <p class="ig-08__flip-line"><span>Mass</span><strong>6.5 B M☉</strong></p>
        <p class="ig-08__flip-line"><span>Telescope</span><strong>Event Horizon</strong></p>
        <p class="ig-08__flip-line"><span>Distance</span><strong>55 M ly</strong></p>
        <span class="ig-08__flip-cta">VIEW →</span>
      </div>
    </div>

    <!-- 6: Comet tail -->
    <div class="ig-08__tile" data-cat="COMET" data-color="#4caf50">
      <svg viewBox="0 0 180 240" xmlns="http://www.w3.org/2000/svg" style="aspect-ratio:180/240">
        <defs><filter id="cmf"><feGaussianBlur stdDeviation="5"/></filter><filter id="cmf2"><feGaussianBlur stdDeviation="2"/></filter></defs>
        <rect width="180" height="240" fill="#020408"/>
        <g fill="#fff" opacity=".7"><circle cx="12" cy="12" r=".9"/><circle cx="40" cy="6" r=".8"/><circle cx="75" cy="18" r="1"/><circle cx="112" cy="8" r=".9"/><circle cx="148" cy="15" r=".8"/><circle cx="170" cy="5" r="1"/><circle cx="22" cy="38" r=".8"/><circle cx="58" cy="30" r="1"/><circle cx="95" cy="42" r=".9"/><circle cx="132" cy="34" r=".8"/><circle cx="165" cy="44" r="1"/><circle cx="30" cy="65" r=".9"/><circle cx="70" cy="58" r=".8"/><circle cx="108" cy="68" r="1"/><circle cx="145" cy="60" r=".9"/><circle cx="172" cy="70" r=".8"/></g>
        <!-- Comet tail glow -->
        <path d="M140,60 Q90,100 20,180 Q5,200 0,240" stroke="#88ccff" stroke-width="30" fill="none" opacity=".15" filter="url(#cmf)"/>
        <path d="M140,60 Q92,98 25,172 Q10,192 5,230" stroke="#a0ddff" stroke-width="16" fill="none" opacity=".2" filter="url(#cmf2)"/>
        <path d="M140,60 Q94,96 30,165 Q18,184 14,218" stroke="#c0eeff" stroke-width="8" fill="none" opacity=".3" filter="url(#cmf2)"/>
        <path d="M140,60 Q96,94 35,158 Q25,176 22,205" stroke="#e0f8ff" stroke-width="3" fill="none" opacity=".5"/>
        <!-- Comet nucleus glow -->
        <circle cx="140" cy="60" r="20" fill="#80ccff" opacity=".5" filter="url(#cmf)"/>
        <circle cx="140" cy="60" r="12" fill="#c0eeff" opacity=".6" filter="url(#cmf2)"/>
        <circle cx="140" cy="60" r="6" fill="#e8f8ff" opacity=".9"/>
        <circle cx="140" cy="60" r="3" fill="#fff"/>
        <!-- Ion tail (blue, faint) -->
        <path d="M138,55 Q80,70 20,60 Q8,58 0,55" stroke="#4088ff" stroke-width="2" fill="none" opacity=".3" filter="url(#cmf2)"/>
        <!-- Stars bright in path -->
        <circle cx="50" cy="100" r="1.5" fill="#fff" opacity=".9"/><circle cx="80" cy="145" r="1.2" fill="#fff" opacity=".85"/><circle cx="35" cy="195" r="1.5" fill="#fff" opacity=".9"/>
      </svg>
      <div class="ig-08__tile-chrome">
        <div class="ig-08__tile-top">
          <span class="ig-08__cat">COMET</span>
          <span class="ig-08__count">19</span>
        </div>
        <div class="ig-08__tile-bottom">
          <h3 class="ig-08__title">Halley's Comet</h3>
          <p class="ig-08__sub">Returns 2061</p>
        </div>
      </div>
      <div class="ig-08__flip">
        <p class="ig-08__flip-line"><span>Period</span><strong>76 years</strong></p>
        <p class="ig-08__flip-line"><span>Last seen</span><strong>1986</strong></p>
        <p class="ig-08__flip-line"><span>Discovered</span><strong>240 BC</strong></p>
        <span class="ig-08__flip-cta">VIEW →</span>
      </div>
    </div>

  </div>

  <footer class="ig-08__statusbar">
    <span>↑ Pin · Drag tiles to reorder</span>
    <span>HOVER ANY TILE</span>
    <span>Live tiles · 6/6 active</span>
  </footer>

</div>
```

**CSS:**
```css
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
body{background:#0a0a0e;font-family:'Segoe UI','Roboto',system-ui,sans-serif;padding:1rem;min-height:100vh;display:flex;align-items:center;justify-content:center;color:#fff}
.ig-08{width:100%;max-width:820px;background:#0a0a0e;padding:1.1rem 1.2rem 1rem;display:flex;flex-direction:column;gap:.8rem}
.ig-08__chrome{display:flex;justify-content:space-between;align-items:baseline;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;padding-bottom:.55rem;border-bottom:1px solid #1c1c24;flex-wrap:wrap;gap:.5rem}
.ig-08__chrome-l{display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap}
.ig-08__user{font-size:1rem;font-weight:300;letter-spacing:.08em;color:#fff}
.ig-08__pinned{font-size:.65rem;font-weight:400;color:#7a7a8a;letter-spacing:.16em}
.ig-08__chrome-r{display:flex;gap:1rem;color:#7a7a8a;font-size:.65rem;font-weight:500;letter-spacing:.16em}
.ig-08__signal{color:#46d160;letter-spacing:.05em;font-size:.75rem}
.ig-08__grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:128px;gap:6px}
.ig-08__tile{overflow:hidden;border-radius:0;position:relative;cursor:pointer;perspective:1000px;background:#0a0a0e;outline:1px solid rgba(255,255,255,.04)}
.ig-08__tile:nth-child(1){grid-column:span 2;grid-row:span 2}
.ig-08__tile:nth-child(2){grid-column:span 2}
.ig-08__tile:nth-child(3){grid-column:span 1}
.ig-08__tile:nth-child(4){grid-column:span 1}
.ig-08__tile:nth-child(5){grid-column:span 2}
.ig-08__tile:nth-child(6){grid-column:span 2}
.ig-08__tile svg{width:100%;height:100%;display:block;transition:transform .55s cubic-bezier(.25,.46,.45,.94);position:absolute;inset:0;backface-visibility:hidden}
.ig-08__tile:hover svg{transform:scale(1.04)}
.ig-08__tile::before{content:'';position:absolute;top:0;left:0;width:4px;height:100%;background:var(--accent,#7c4dff);z-index:2;transition:width .35s ease}
.ig-08__tile:hover::before{width:6px;box-shadow:0 0 18px var(--accent,#7c4dff)}
.ig-08__tile[data-color="#e91e63"]{--accent:#e91e63}
.ig-08__tile[data-color="#ff9800"]{--accent:#ff9800}
.ig-08__tile[data-color="#9c27b0"]{--accent:#9c27b0}
.ig-08__tile[data-color="#00bcd4"]{--accent:#00bcd4}
.ig-08__tile[data-color="#7c4dff"]{--accent:#7c4dff}
.ig-08__tile[data-color="#4caf50"]{--accent:#4caf50}
.ig-08__tile-chrome{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;justify-content:space-between;padding:.7rem .85rem .8rem 1.05rem;background:linear-gradient(180deg,rgba(0,0,0,.45) 0%,rgba(0,0,0,0) 30%,rgba(0,0,0,0) 50%,rgba(0,0,0,.85) 100%);transition:opacity .4s ease,transform .4s ease;backface-visibility:hidden}
.ig-08__tile:hover .ig-08__tile-chrome{opacity:0;transform:translateY(-6px)}
.ig-08__tile-top{display:flex;justify-content:space-between;align-items:flex-start;gap:.5rem}
.ig-08__cat{font-size:.6rem;font-weight:700;letter-spacing:.18em;color:var(--accent,#fff);background:rgba(0,0,0,.4);padding:.22rem .5rem;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.ig-08__count{font-size:.62rem;font-weight:600;color:rgba(255,255,255,.85);letter-spacing:.08em;background:rgba(0,0,0,.4);padding:.22rem .5rem;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.ig-08__tile-bottom{}
.ig-08__title{font-size:1.2rem;font-weight:300;line-height:1.05;color:#fff;letter-spacing:-0.005em;margin-bottom:.25rem;text-shadow:0 1px 4px rgba(0,0,0,.65)}
.ig-08__tile:nth-child(1) .ig-08__title{font-size:1.85rem;font-weight:200}
.ig-08__sub{font-size:.66rem;color:rgba(255,255,255,.7);letter-spacing:.08em;font-weight:500;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.ig-08__flip{position:absolute;inset:0;z-index:4;background:linear-gradient(135deg,rgba(8,4,20,.96),rgba(20,4,30,.96));display:flex;flex-direction:column;justify-content:center;padding:1rem 1.1rem 1rem 1.3rem;gap:.45rem;opacity:0;transform:translateY(12px);transition:opacity .4s ease .05s,transform .4s ease .05s;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.ig-08__tile:hover .ig-08__flip{opacity:1;transform:translateY(0)}
.ig-08__flip-line{display:flex;justify-content:space-between;align-items:baseline;font-size:.7rem;border-bottom:1px solid rgba(255,255,255,.08);padding-bottom:.32rem}
.ig-08__flip-line span{color:rgba(255,255,255,.55);letter-spacing:.1em;text-transform:uppercase;font-size:.58rem;font-weight:600}
.ig-08__flip-line strong{color:#fff;font-weight:600;font-size:.78rem;font-feature-settings:'tnum'}
.ig-08__flip-cta{margin-top:.5rem;font-size:.62rem;font-weight:700;letter-spacing:.2em;color:var(--accent,#fff);align-self:flex-end;cursor:pointer}
.ig-08__statusbar{display:flex;justify-content:space-between;align-items:center;font-size:.6rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:#5a5a6a;padding-top:.55rem;margin-top:.2rem;border-top:1px solid #1c1c24;flex-wrap:wrap;gap:.5rem}
.ig-08__statusbar > :nth-child(2){color:var(--accent,#7c4dff);color:#7c4dff;font-weight:700}
@media(prefers-reduced-motion:reduce){.ig-08__tile svg,.ig-08__tile-chrome,.ig-08__flip,.ig-08__tile::before{transition:none}.ig-08__tile:hover svg{transform:none}}
```

### 09. CSS Magazine Layout Gallery

**Type:** Pure CSS
**Description:** A real editorial-magazine page in CSS — italic serif masthead, issue number, four ranked stories (hero spread + two column cards + side-by-side feature), drop-cap excerpts, byline rules, monospace section numbers, and a paper-stock footer rule.

**HTML:**
```html
<div class="ig-09">

  <!-- Masthead -->
  <header class="ig-09__masthead">
    <div class="ig-09__brand">
      <span class="ig-09__logo">Voyageur</span>
      <span class="ig-09__issue">Issue 09 · Markets of the World</span>
    </div>
    <div class="ig-09__date">Summer 2026</div>
  </header>
  <hr class="ig-09__rule"/>

  <!-- Hero: Bangkok night market -->
  <div class="ig-09__card">
    <div class="ig-09__img ig-09__img--hero">
      <svg viewBox="0 0 500 325" xmlns="http://www.w3.org/2000/svg">
        <defs><linearGradient id="bmg" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#1a0a05"/><stop offset="50%" stop-color="#2a1008"/><stop offset="100%" stop-color="#150808"/></linearGradient><filter id="bmf"><feGaussianBlur stdDeviation="4"/></filter></defs>
        <rect width="500" height="325" fill="url(#bmg)"/>
        <!-- String lights overhead -->
        <g>
          <path d="M0,40 Q125,55 250,42 Q375,55 500,40" stroke="#c8a030" stroke-width="1.5" fill="none"/>
          <path d="M0,70 Q125,82 250,68 Q375,82 500,70" stroke="#c8a030" stroke-width="1.5" fill="none"/>
          <!-- Bulbs -->
          <g fill="#ffdd60" opacity=".9">
            <circle cx="25" cy="42" r="4" filter="url(#bmf)"/><circle cx="25" cy="42" r="2.5"/>
            <circle cx="75" cy="47" r="4" filter="url(#bmf)"/><circle cx="75" cy="47" r="2.5"/>
            <circle cx="125" cy="55" r="4" filter="url(#bmf)"/><circle cx="125" cy="55" r="2.5"/>
            <circle cx="175" cy="50" r="4" filter="url(#bmf)"/><circle cx="175" cy="50" r="2.5"/>
            <circle cx="225" cy="44" r="4" filter="url(#bmf)"/><circle cx="225" cy="44" r="2.5"/>
            <circle cx="275" cy="42" r="4" filter="url(#bmf)"/><circle cx="275" cy="42" r="2.5"/>
            <circle cx="325" cy="48" r="4" filter="url(#bmf)"/><circle cx="325" cy="48" r="2.5"/>
            <circle cx="375" cy="55" r="4" filter="url(#bmf)"/><circle cx="375" cy="55" r="2.5"/>
            <circle cx="425" cy="48" r="4" filter="url(#bmf)"/><circle cx="425" cy="48" r="2.5"/>
            <circle cx="475" cy="42" r="4" filter="url(#bmf)"/><circle cx="475" cy="42" r="2.5"/>
            <circle cx="25" cy="73" r="4" filter="url(#bmf)"/><circle cx="25" cy="73" r="2.5"/>
            <circle cx="85" cy="80" r="4" filter="url(#bmf)"/><circle cx="85" cy="80" r="2.5"/>
            <circle cx="175" cy="82" r="4" filter="url(#bmf)"/><circle cx="175" cy="82" r="2.5"/>
            <circle cx="265" cy="78" r="4" filter="url(#bmf)"/><circle cx="265" cy="78" r="2.5"/>
            <circle cx="355" cy="82" r="4" filter="url(#bmf)"/><circle cx="355" cy="82" r="2.5"/>
            <circle cx="445" cy="76" r="4" filter="url(#bmf)"/><circle cx="445" cy="76" r="2.5"/>
          </g>
        </g>
        <!-- Market stalls -->
        <g>
          <!-- Stall 1 canopy -->
          <polygon points="10,90 110,90 110,105 10,105" fill="#c82020"/>
          <g fill="#e03030"><polygon points="10,105 30,90 50,105"/><polygon points="50,105 70,90 90,105"/><polygon points="90,105 110,90 130,105"/></g>
          <!-- Stall 2 -->
          <polygon points="115,92 215,92 215,107 115,107" fill="#2268cc"/>
          <g fill="#3378dd"><polygon points="115,107 135,92 155,107"/><polygon points="155,107 175,92 195,107"/></g>
          <!-- Stall 3 -->
          <polygon points="220,90 320,90 320,105 220,105" fill="#22aa44"/>
          <g fill="#33bb55"><polygon points="220,105 240,90 260,105"/><polygon points="260,105 280,90 300,105"/></g>
          <!-- Stall 4 -->
          <polygon points="325,92 425,92 425,107 325,107" fill="#cc8820"/>
          <!-- Stall 5 -->
          <polygon points="430,90 500,90 500,105 430,105" fill="#cc2266"/>
        </g>
        <!-- Food on tables: Pad Thai -->
        <g>
          <!-- Table surfaces -->
          <rect x="15" y="180" width="90" height="55" rx="3" fill="#8a5a28" opacity=".9"/>
          <rect x="120" y="183" width="88" height="52" rx="3" fill="#7a4a1a" opacity=".9"/>
          <rect x="225" y="178" width="92" height="58" rx="3" fill="#8a5a28" opacity=".9"/>
          <rect x="330" y="180" width="85" height="55" rx="3" fill="#7a4a1a" opacity=".9"/>
          <rect x="428" y="182" width="68" height="52" rx="3" fill="#8a5a28" opacity=".9"/>
          <!-- Food items -->
          <!-- Wok with flames -->
          <ellipse cx="60" cy="190" rx="28" ry="12" fill="#1a1a0a"/>
          <ellipse cx="60" cy="188" rx="22" ry="9" fill="#ff6600" opacity=".8"/>
          <ellipse cx="60" cy="186" rx="16" ry="6" fill="#ff9900" opacity=".7"/>
          <g fill="#ff4400" opacity=".5" filter="url(#bmf)"><circle cx="52" cy="180" r="5"/><circle cx="60" cy="177" r="6"/><circle cx="68" cy="180" r="5"/></g>
          <!-- Bowls of noodles -->
          <ellipse cx="160" cy="196" rx="20" ry="10" fill="#e8c060"/>
          <ellipse cx="160" cy="194" rx="16" ry="7" fill="#f0d080"/>
          <!-- Mango sticky rice -->
          <ellipse cx="270" cy="192" rx="22" ry="10" fill="#d4a020"/>
          <ellipse cx="280" cy="190" rx="10" ry="6" fill="#ffdd00" opacity=".8"/>
          <!-- Skewers -->
          <g stroke="#c87020" stroke-width="2" fill="none">
            <line x1="365" y1="175" x2="368" y2="220"/><line x1="375" y1="175" x2="378" y2="220"/>
            <line x1="385" y1="175" x2="388" y2="220"/><line x1="395" y1="175" x2="398" y2="220"/>
          </g>
          <g fill="#ff6020" opacity=".8"><ellipse cx="366" cy="180" rx="5" ry="4"/><ellipse cx="376" cy="178" rx="5" ry="4"/><ellipse cx="386" cy="181" rx="5" ry="4"/><ellipse cx="396" cy="179" rx="5" ry="4"/></g>
          <!-- Fruit display -->
          <g fill="#ff4466" opacity=".8"><circle cx="448" cy="193" r="6"/><circle cx="460" cy="190" r="6"/><circle cx="454" cy="202" r="6"/></g>
          <g fill="#88cc22" opacity=".8"><circle cx="472" cy="194" r="5"/><circle cx="480" cy="188" r="5"/></g>
        </g>
        <!-- Crowd silhouettes -->
        <g fill="#100a05">
          <ellipse cx="50" cy="270" rx="12" ry="16"/><circle cx="50" cy="252" r="10"/>
          <ellipse cx="100" cy="268" rx="11" ry="15"/><circle cx="100" cy="251" r="9"/>
          <ellipse cx="155" cy="272" rx="12" ry="16"/><circle cx="155" cy="254" r="10"/>
          <ellipse cx="210" cy="268" rx="11" ry="14"/><circle cx="210" cy="252" r="9"/>
          <ellipse cx="265" cy="270" rx="12" ry="16"/><circle cx="265" cy="252" r="10"/>
          <ellipse cx="320" cy="267" rx="10" ry="14"/><circle cx="320" cy="251" r="9"/>
          <ellipse cx="375" cy="270" rx="12" ry="15"/><circle cx="375" cy="253" r="10"/>
          <ellipse cx="430" cy="268" rx="11" ry="14"/><circle cx="430" cy="252" r="9"/>
          <ellipse cx="478" cy="272" rx="10" ry="16"/><circle cx="478" cy="254" r="10"/>
        </g>
        <!-- Thai lanterns rising -->
        <g>
          <ellipse cx="80" cy="130" rx="12" ry="18" fill="#ff8820" opacity=".7" filter="url(#bmf)"/>
          <ellipse cx="80" cy="130" rx="8" ry="13" fill="#ffaa40" opacity=".5"/>
          <ellipse cx="200" cy="115" rx="10" ry="15" fill="#ff4444" opacity=".65" filter="url(#bmf)"/>
          <ellipse cx="350" cy="125" rx="11" ry="17" fill="#ff8820" opacity=".7" filter="url(#bmf)"/>
          <ellipse cx="460" cy="110" rx="9" ry="14" fill="#ffcc44" opacity=".65" filter="url(#bmf)"/>
        </g>
        <!-- Buddhist temple spire bg -->
        <g fill="#150808" opacity=".4">
          <polygon points="240,0 248,60 232,60"/><rect x="234" y="60" width="12" height="40"/>
          <polygon points="270,10 278,55 262,55"/><rect x="264" y="55" width="12" height="35"/>
        </g>
      </svg>
    </div>
    <div class="ig-09__body">
      <span class="ig-09__num">01</span>
      <p class="ig-09__tag">Street Food · Bangkok</p>
      <h2 class="ig-09__title">Night Market<br/>Yaowarat</h2>
      <p class="ig-09__byline">By Mei Tanaka · Photographs by R. Singh · 6 min read</p>
      <p class="ig-09__desc">A sensory labyrinth of woks and lanterns, where centuries-old recipes become street theatre under a canopy of lights — and every alley is its own kitchen.</p>
      <a class="ig-09__more">Read the story →</a>
    </div>
  </div>

  <!-- Card 2: Istanbul bazaar -->
  <div class="ig-09__card">
    <div class="ig-09__img ig-09__img--sq">
      <svg viewBox="0 0 250 250" xmlns="http://www.w3.org/2000/svg">
        <rect width="250" height="250" fill="#1a0a02"/>
        <!-- Vaulted arched ceiling -->
        <g fill="#3a2010">
          <path d="M0,0 Q62,40 62,80 L62,250 L0,250 Z"/>
          <path d="M62,0 Q124,40 124,80 L124,250 L62,250 Z"/>
          <path d="M124,0 Q186,40 186,80 L186,250 L124,250 Z"/>
          <path d="M186,0 Q248,40 248,80 L248,250 L186,250 Z"/>
        </g>
        <g fill="#2a1808">
          <path d="M0,0 Q62,35 62,75 L62,250 L0,250 Z"/>
          <path d="M62,0 Q124,35 124,75 L124,250 L62,250 Z"/>
          <path d="M124,0 Q186,35 186,75 L186,250 L124,250 Z"/>
          <path d="M186,0 Q248,35 248,75 L248,250 L186,250 Z"/>
        </g>
        <!-- Skylights -->
        <g fill="#c8a830" opacity=".7"><circle cx="31" cy="25" r="15"/><circle cx="93" cy="22" r="13"/><circle cx="155" cy="25" r="15"/><circle cx="218" cy="22" r="12"/></g>
        <g fill="#ffe88a" opacity=".5"><circle cx="31" cy="25" r="9"/><circle cx="93" cy="22" r="8"/><circle cx="155" cy="25" r="9"/><circle cx="218" cy="22" r="7"/></g>
        <!-- Hanging carpets/textiles -->
        <g>
          <rect x="5" y="70" width="30" height="55" rx="2" fill="#c82020" opacity=".9"/>
          <g stroke="#e83030" stroke-width="1.5" fill="none" opacity=".6"><line x1="5" y1="84" x2="35" y2="84"/><line x1="5" y1="99" x2="35" y2="99"/><line x1="5" y1="114" x2="35" y2="114"/></g>
          <rect x="40" y="65" width="28" height="62" rx="2" fill="#c87a20" opacity=".9"/>
          <rect x="72" y="68" width="25" height="58" rx="2" fill="#2268cc" opacity=".9"/>
          <rect x="100" y="72" width="28" height="54" rx="2" fill="#22aa44" opacity=".9"/>
          <rect x="132" y="65" width="30" height="62" rx="2" fill="#8822cc" opacity=".9"/>
          <rect x="166" y="70" width="26" height="55" rx="2" fill="#cc2266" opacity=".9"/>
          <rect x="196" y="67" width="30" height="60" rx="2" fill="#c87a20" opacity=".9"/>
        </g>
        <!-- Spice urns/ceramics on shelves -->
        <g>
          <rect x="0" y="155" width="250" height="8" fill="#5a3010"/>
          <!-- Ceramics -->
          <g fill="#2268cc"><path d="M12,140 Q18,120 24,140 Q22,155 14,155 Z"/><path d="M28,142 Q32,125 36,142 Q34,154 30,154 Z"/></g>
          <g fill="#cc2266"><path d="M42,138 Q48,116 55,138 Q53,156 44,156 Z"/></g>
          <g fill="#22aa44"><path d="M62,140 Q67,122 72,140 Q70,155 64,155 Z"/></g>
          <g fill="#c87a20"><path d="M78,136 Q85,112 92,136 Q90,157 80,157 Z"/></g>
          <!-- Lanterns hanging -->
          <g fill="#cc6820" opacity=".8">
            <ellipse cx="124" cy="142" rx="10" ry="14"/><ellipse cx="124" cy="142" rx="7" ry="10" fill="#ffaa40" opacity=".6"/>
            <ellipse cx="185" cy="138" rx="9" ry="12"/><ellipse cx="185" cy="138" rx="6" ry="8" fill="#ffaa40" opacity=".6"/>
          </g>
          <g fill="#8822cc" opacity=".8"><ellipse cx="218" cy="144" rx="8" ry="11"/></g>
        </g>
        <!-- Merchant silhouette -->
        <g fill="#0a0502" transform="translate(140,190)">
          <ellipse cx="0" cy="-5" rx="14" ry="18"/>
          <circle cx="0" cy="-25" r="12"/>
          <!-- Turban -->
          <ellipse cx="0" cy="-30" rx="14" ry="8" fill="#c82020"/>
        </g>
        <!-- Floor pattern -->
        <g fill="none" stroke="#3a2010" stroke-width=".8" opacity=".5">
          <line x1="0" y1="220" x2="250" y2="220"/><line x1="0" y1="235" x2="250" y2="235"/>
          <line x1="40" y1="200" x2="40" y2="250"/><line x1="80" y1="200" x2="80" y2="250"/>
          <line x1="120" y1="200" x2="120" y2="250"/><line x1="160" y1="200" x2="160" y2="250"/>
          <line x1="200" y1="200" x2="200" y2="250"/>
        </g>
      </svg>
    </div>
    <div class="ig-09__body">
      <span class="ig-09__num">02</span>
      <p class="ig-09__tag">Bazaar · Istanbul</p>
      <h2 class="ig-09__title">Grand Bazaar</h2>
      <p class="ig-09__byline">Y. Ozkan · 4 min</p>
      <p class="ig-09__desc">4,000 shops beneath Ottoman vaults — a living museum of craft and commerce.</p>
    </div>
  </div>

  <!-- Card 3: Mexican mercado -->
  <div class="ig-09__card">
    <div class="ig-09__img ig-09__img--sq">
      <svg viewBox="0 0 250 250" xmlns="http://www.w3.org/2000/svg">
        <rect width="250" height="250" fill="#c8a030"/>
        <rect width="250" height="250" fill="#f5e0a0" opacity=".2"/>
        <!-- Colonial arch facade -->
        <g fill="#e8c870">
          <rect x="0" y="0" width="250" height="80"/>
          <path d="M60,80 Q80,50 100,80 Z" fill="#d4a840"/>
          <path d="M130,80 Q150,50 170,80 Z" fill="#d4a840"/>
        </g>
        <!-- Arched windows -->
        <g>
          <path d="M15,20 Q30,5 45,20 L45,60 L15,60 Z" fill="#88aacc" opacity=".7"/>
          <path d="M65,18 Q80,3 95,18 L95,58 L65,58 Z" fill="#88aacc" opacity=".7"/>
          <path d="M115,20 Q130,5 145,20 L145,60 L115,60 Z" fill="#88aacc" opacity=".7"/>
          <path d="M165,18 Q180,3 195,18 L195,58 L165,58 Z" fill="#88aacc" opacity=".7"/>
          <path d="M205,20 Q220,5 235,20 L235,60 L205,60 Z" fill="#88aacc" opacity=".7"/>
        </g>
        <!-- Papel picado banners -->
        <path d="M0,85 Q62,92 125,85 Q187,92 250,85" stroke="#4a2808" stroke-width="1.2" fill="none"/>
        <g fill="#e82020" opacity=".8"><polygon points="12,88 20,82 28,88 24,96 16,96"/><polygon points="52,90 60,84 68,90 64,98 56,98"/><polygon points="95,87 103,81 111,87 107,95 99,95"/></g>
        <g fill="#2288ee" opacity=".8"><polygon points="32,90 40,84 48,90 44,98 36,98"/><polygon points="72,88 80,82 88,88 84,96 76,96"/></g>
        <g fill="#22aa44" opacity=".8"><polygon points="138,88 146,82 154,88 150,96 142,96"/></g>
        <g fill="#ee9922" opacity=".8"><polygon points="162,90 170,84 178,90 174,98 166,98"/><polygon points="200,87 208,81 216,87 212,95 204,95"/></g>
        <!-- Fruit/veg stalls -->
        <!-- Avocados -->
        <g fill="#2a6a10"><ellipse cx="30" cy="150" rx="10" ry="14"/><ellipse cx="48" cy="148" rx="10" ry="14"/><ellipse cx="38" cy="162" rx="10" ry="13"/></g>
        <g fill="#1a4a08" opacity=".7"><ellipse cx="34" cy="152" rx="5" ry="7"/><ellipse cx="52" cy="150" rx="5" ry="7"/></g>
        <!-- Chilli peppers -->
        <g fill="#cc2020"><path d="M65,138 Q72,128 76,140 Q74,148 68,148 Q64,144 65,138 Z"/><path d="M75,135 Q82,124 86,137 Q84,145 78,145 Q74,141 75,135 Z"/><path d="M85,138 Q92,128 96,140 Q94,148 88,148 Z"/></g>
        <!-- Corn / maiz -->
        <g><rect x="108" y="130" width="12" height="30" rx="4" fill="#f0c020"/><g fill="#e0a810" opacity=".7"><rect x="110" y="132" width="3" height="26"/><rect x="115" y="132" width="3" height="26"/></g><rect x="108" y="125" width="12" height="8" fill="#2a6a10" rx="2"/><rect x="123" y="128" width="12" height="30" rx="4" fill="#f0c020"/><rect x="123" y="123" width="12" height="8" fill="#2a6a10" rx="2"/></g>
        <!-- Mangoes -->
        <g fill="#ff8820"><ellipse cx="158" cy="148" rx="14" ry="10"/><ellipse cx="180" cy="145" rx="13" ry="10"/><ellipse cx="170" cy="158" rx="12" ry="9"/></g>
        <g fill="#cc5010" opacity=".5"><ellipse cx="162" cy="145" rx="6" ry="4"/><ellipse cx="184" cy="142" rx="5" ry="4"/></g>
        <!-- Pottery blue talavera -->
        <g fill="#2268cc"><ellipse cx="220" cy="148" rx="12" ry="15"/><ellipse cx="220" cy="145" rx="9" ry="10" fill="#3388ee" opacity=".6"/></g>
        <g fill="#4488ee" opacity=".7">
          <line x1="214" y1="138" x2="226" y2="138" stroke="#4488ee" stroke-width="1.5"/><line x1="213" y1="143" x2="227" y2="143" stroke="#4488ee" stroke-width="1.5"/>
        </g>
        <!-- Tables -->
        <rect x="5" y="168" width="240" height="6" rx="2" fill="#8a5020"/>
        <!-- Person browsing -->
        <g fill="#3a1a08" transform="translate(195,195)">
          <ellipse cx="0" cy="0" rx="10" ry="14"/><circle cx="0" cy="-16" r="9"/>
          <!-- Hat -->
          <ellipse cx="0" cy="-24" rx="12" ry="4" fill="#5a2a08"/><rect x="-6" y="-30" width="12" height="8" rx="2" fill="#6a3a10"/>
        </g>
        <!-- Ground tiles -->
        <g fill="none" stroke="#c8a030" stroke-width=".8" opacity=".4">
          <line x1="0" y1="215" x2="250" y2="215"/><line x1="50" y1="185" x2="50" y2="250"/><line x1="100" y1="185" x2="100" y2="250"/><line x1="150" y1="185" x2="150" y2="250"/><line x1="200" y1="185" x2="200" y2="250"/>
        </g>
      </svg>
    </div>
    <div class="ig-09__body">
      <span class="ig-09__num">03</span>
      <p class="ig-09__tag">Mercado · Oaxaca</p>
      <h2 class="ig-09__title">Mercado Benito Juárez</h2>
      <p class="ig-09__byline">L. Velázquez · 5 min</p>
      <p class="ig-09__desc">Beneath colonial arches and papel picado, the colours of Mexico spill into the street.</p>
    </div>
  </div>

  <!-- Wide strip: Moroccan tannery -->
  <div class="ig-09__card">
    <div class="ig-09__img ig-09__img--wide">
      <svg viewBox="0 0 780 285" xmlns="http://www.w3.org/2000/svg">
        <rect width="780" height="285" fill="#c8a030"/>
        <!-- Rooftop view of dye pits -->
        <g>
          <!-- Vat circles in rows -->
          <!-- Row 1 -->
          <ellipse cx="55" cy="70" rx="38" ry="28" fill="#c82020"/><ellipse cx="55" cy="68" rx="30" ry="22" fill="#e83030"/>
          <ellipse cx="150" cy="72" rx="38" ry="28" fill="#2268cc"/><ellipse cx="150" cy="70" rx="30" ry="22" fill="#4488ee"/>
          <ellipse cx="248" cy="68" rx="38" ry="28" fill="#22aa44"/><ellipse cx="248" cy="66" rx="30" ry="22" fill="#44cc66"/>
          <ellipse cx="345" cy="72" rx="38" ry="28" fill="#ffee20"/><ellipse cx="345" cy="70" rx="30" ry="22" fill="#fff060"/>
          <ellipse cx="442" cy="68" rx="38" ry="28" fill="#cc2266"/><ellipse cx="442" cy="66" rx="30" ry="22" fill="#ee4488"/>
          <ellipse cx="540" cy="72" rx="38" ry="28" fill="#8822cc"/><ellipse cx="540" cy="70" rx="30" ry="22" fill="#aa44ee"/>
          <ellipse cx="635" cy="68" rx="38" ry="28" fill="#c87a20"/><ellipse cx="635" cy="66" rx="30" ry="22" fill="#ee9940"/>
          <ellipse cx="725" cy="72" rx="38" ry="28" fill="#22aaaa"/><ellipse cx="725" cy="70" rx="30" ry="22" fill="#44cccc"/>
          <!-- Row 2 -->
          <ellipse cx="100" cy="155" rx="38" ry="28" fill="#2268cc"/><ellipse cx="100" cy="153" rx="30" ry="22" fill="#4488ee"/>
          <ellipse cx="198" cy="152" rx="38" ry="28" fill="#c82020"/><ellipse cx="198" cy="150" rx="30" ry="22" fill="#e83030"/>
          <ellipse cx="295" cy="155" rx="38" ry="28" fill="#c87a20"/><ellipse cx="295" cy="153" rx="30" ry="22" fill="#ee9940"/>
          <ellipse cx="392" cy="152" rx="38" ry="28" fill="#22aa44"/><ellipse cx="392" cy="150" rx="30" ry="22" fill="#44cc66"/>
          <ellipse cx="490" cy="155" rx="38" ry="28" fill="#ffee20"/><ellipse cx="490" cy="153" rx="30" ry="22" fill="#fff060"/>
          <ellipse cx="587" cy="152" rx="38" ry="28" fill="#8822cc"/><ellipse cx="587" cy="150" rx="30" ry="22" fill="#aa44ee"/>
          <ellipse cx="683" cy="155" rx="38" ry="28" fill="#cc2266"/><ellipse cx="683" cy="153" rx="30" ry="22" fill="#ee4488"/>
        </g>
        <!-- Workers on ledges -->
        <g fill="#3a1a08">
          <ellipse cx="90" cy="100" rx="7" ry="10"/><circle cx="90" cy="88" r="6"/>
          <ellipse cx="245" cy="96" rx="7" ry="10"/><circle cx="245" cy="84" r="6"/>
          <ellipse cx="440" cy="98" rx="7" ry="10"/><circle cx="440" cy="86" r="6"/>
          <ellipse cx="635" cy="100" rx="7" ry="10"/><circle cx="635" cy="88" r="6"/>
          <ellipse cx="195" cy="185" rx="7" ry="10"/><circle cx="195" cy="173" r="6"/>
          <ellipse cx="490" cy="188" rx="7" ry="10"/><circle cx="490" cy="176" r="6"/>
        </g>
        <!-- Stone dividers between vats -->
        <g fill="#a87838" opacity=".7"><rect x="0" y="110" width="780" height="14"/></g>
        <!-- Hides on racks above -->
        <g>
          <rect x="10" y="230" width="30" height="40" fill="#8a5028" rx="2"/>
          <rect x="48" y="225" width="25" height="45" fill="#6a3810" rx="2"/>
          <rect x="80" y="232" width="28" height="38" fill="#8a5028" rx="2" transform="rotate(5,80,232)"/>
          <rect x="620" y="228" width="30" height="42" fill="#8a5028" rx="2"/>
          <rect x="658" y="225" width="26" height="45" fill="#6a3810" rx="2"/>
          <rect x="692" y="230" width="28" height="40" fill="#8a5028" rx="2" transform="rotate(-4,692,230)"/>
          <rect x="730" y="226" width="28" height="44" fill="#8a5028" rx="2"/>
        </g>
        <!-- Bamboo poles -->
        <g stroke="#4a2808" stroke-width="3" fill="none" opacity=".6">
          <line x1="25" y1="200" x2="25" y2="285"/><line x1="63" y1="200" x2="63" y2="285"/>
          <line x1="635" y1="200" x2="635" y2="285"/><line x1="673" y1="200" x2="673" y2="285"/>
          <line x1="706" y1="200" x2="706" y2="285"/><line x1="744" y1="200" x2="744" y2="285"/>
        </g>
        <!-- Background wall - medina -->
        <g fill="#c89840" opacity=".3">
          <rect x="0" y="0" width="780" height="25"/>
          <g fill="#e8b060" opacity=".5"><rect x="0" y="0" width="30" height="25"/><rect x="35" y="0" width="30" height="25"/><rect x="70" y="0" width="30" height="25"/><rect x="105" y="0" width="30" height="25"/></g>
        </g>
      </svg>
    </div>
    <div class="ig-09__body">
      <span class="ig-09__num">04</span>
      <p class="ig-09__tag">Craft · Fes</p>
      <h2 class="ig-09__title">Chouara Tannery — The Living Palette of Fes</h2>
      <p class="ig-09__byline">By A. El Idrissi · Photographs by H. Karim · 7 min read</p>
      <p class="ig-09__desc">Morocco's oldest tannery has been dyeing leather in these stone vats since the 11th century — a spectacle unchanged by time, where artisans still mix indigo, saffron, and pomegranate by hand.</p>
      <a class="ig-09__more">Read the story →</a>
    </div>
  </div>

  <!-- Footer rule -->
  <hr class="ig-09__rule ig-09__rule--bottom"/>
  <footer class="ig-09__footer">
    <span>VOYAGEUR MAGAZINE · ESTABLISHED 1998</span>
    <span>Page 09 — 14</span>
  </footer>

</div>
```

**CSS:**
```css
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
body{background:#f5f0e8;font-family:'DM Sans',sans-serif;padding:1.2rem;min-height:100vh;color:#1a1614}
.ig-09{max-width:820px;margin:0 auto;background:#f5f0e8;padding:1.2rem;color:#1a1614}
.ig-09__masthead{display:flex;justify-content:space-between;align-items:baseline;padding:.1rem 0 .4rem;flex-wrap:wrap;gap:.5rem}
.ig-09__brand{display:flex;align-items:baseline;gap:.85rem;flex-wrap:wrap}
.ig-09__logo{font-family:'Playfair Display',serif;font-style:italic;font-weight:700;font-size:1.5rem;color:#1a1614;letter-spacing:-0.01em}
.ig-09__issue{font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:#8a7f74;font-weight:600}
.ig-09__date{font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:#8a7f74;font-weight:600}
.ig-09__rule{border:none;border-top:2px solid #1a1614;margin:.25rem 0 .9rem}
.ig-09__rule--bottom{border-top-width:1px;border-color:#cdc3b5;margin:.9rem 0 .3rem}
.ig-09__footer{display:flex;justify-content:space-between;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:#8a7f74;font-weight:600}
.ig-09{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.85rem}
.ig-09__masthead,.ig-09__rule,.ig-09__footer{grid-column:span 3}
.ig-09__card{overflow:hidden;border-radius:6px;position:relative;background:#fff;box-shadow:0 2px 12px rgba(0,0,0,.06);border:1px solid #ece4d5;display:flex;flex-direction:column;transition:box-shadow .35s ease,transform .35s ease}
.ig-09__card:hover{box-shadow:0 8px 26px rgba(0,0,0,.12);transform:translateY(-2px)}
.ig-09__card:nth-child(3){grid-column:span 2;grid-row:span 2;display:grid;grid-template-rows:auto 1fr}
.ig-09__card:nth-child(6){grid-column:span 3;display:grid;grid-template-columns:1.4fr 1fr;align-items:stretch}
.ig-09__card:nth-child(6) .ig-09__img--wide{aspect-ratio:auto;height:100%;min-height:170px}
.ig-09__img{display:block;width:100%;overflow:hidden;position:relative}
.ig-09__img svg{width:100%;height:100%;display:block;transition:transform .55s cubic-bezier(.25,.46,.45,.94)}
.ig-09__card:hover .ig-09__img svg{transform:scale(1.05)}
.ig-09__img--hero{aspect-ratio:2/1}
.ig-09__img--sq{aspect-ratio:1}
.ig-09__body{padding:.85rem 1rem 1rem;position:relative;flex:1;display:flex;flex-direction:column}
.ig-09__num{position:absolute;top:.85rem;right:1rem;font-family:'Courier New',monospace;font-size:.66rem;font-weight:700;color:#c0472a;letter-spacing:.1em}
.ig-09__tag{font-size:.6rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#c0472a;margin-bottom:.45rem;padding-bottom:.4rem;border-bottom:1px solid #ece4d5;display:inline-block;padding-right:1rem}
.ig-09__title{font-family:'Playfair Display',serif;font-size:.95rem;font-weight:700;color:#1a1614;line-height:1.2;margin-bottom:.4rem;letter-spacing:-0.005em}
.ig-09__card:nth-child(3) .ig-09__title{font-size:1.4rem;line-height:1.1;margin-bottom:.5rem}
.ig-09__card:nth-child(6) .ig-09__title{font-size:1.4rem;line-height:1.15}
.ig-09__byline{font-size:.62rem;color:#8a7f74;letter-spacing:.04em;margin-bottom:.5rem;font-style:italic}
.ig-09__desc{font-size:.75rem;color:#3a342e;line-height:1.55;flex:1}
.ig-09__card:nth-child(3) .ig-09__desc{font-size:.82rem;line-height:1.6}
.ig-09__card:nth-child(3) .ig-09__desc::first-letter{font-family:'Playfair Display',serif;font-size:2.6em;font-weight:700;float:left;line-height:.85;padding:.1rem .35rem 0 0;color:#c0472a}
.ig-09__card:nth-child(6) .ig-09__desc{font-size:.78rem;line-height:1.6}
.ig-09__card:nth-child(6) .ig-09__desc::first-letter{font-family:'Playfair Display',serif;font-size:2.4em;font-weight:700;float:left;line-height:.85;padding:.1rem .3rem 0 0;color:#c0472a}
.ig-09__more{display:inline-block;margin-top:.7rem;font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#1a1614;border-bottom:1.5px solid #c0472a;padding-bottom:.15rem;align-self:flex-start;cursor:pointer;transition:color .25s ease}
.ig-09__more:hover{color:#c0472a}
@media(prefers-reduced-motion:reduce){.ig-09__img svg,.ig-09__card{transition:none}.ig-09__card:hover{transform:none}}
```

### 10. CSS Perspective Depth Stack Gallery

**Type:** Pure CSS
**Description:** Five illustrated ancient-wonder cards stacked in a true CSS 3D perspective scene — each card peeks at rest so you see all five at once; hover any card to pop it forward toward the viewer while the others dim and recede.

**HTML:**
```html
<div class="ig-10">
  <div class="ig-10__stage">

    <!-- Card 5 (back): Angkor Wat -->
    <div class="ig-10__card" style="aspect-ratio:16/9">
      <svg viewBox="0 0 520 292" xmlns="http://www.w3.org/2000/svg">
        <defs><linearGradient id="awg" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#ff8840"/><stop offset="40%" stop-color="#c06820"/><stop offset="100%" stop-color="#603010"/></linearGradient></defs>
        <rect width="520" height="292" fill="url(#awg)"/>
        <circle cx="260" cy="100" r="50" fill="#ffee80" opacity=".9"/>
        <!-- Temple complex reflection -->
        <g fill="#2a1808" opacity=".85">
          <rect x="180" y="162" width="160" height="130"/>
          <rect x="165" y="175" width="15" height="117"/>
          <rect x="340" y="175" width="15" height="117"/>
          <!-- Towers -->
          <polygon points="218,162 236,100 254,162"/>
          <polygon points="248,158 262,90 276,158"/>
          <polygon points="266,162 284,100 302,162"/>
          <!-- Outer galleries -->
          <rect x="100" y="200" width="60" height="92"/>
          <rect x="360" y="200" width="60" height="92"/>
          <!-- Causeway -->
          <rect x="235" y="248" width="50" height="44"/>
          <rect x="200" y="260" width="8" height="32"/>
          <rect x="312" y="260" width="8" height="32"/>
        </g>
        <!-- Reflection in moat -->
        <ellipse cx="260" cy="290" rx="260" ry="12" fill="#2a1808" opacity=".2"/>
        <rect x="100" y="275" width="320" height="17" fill="#603010" opacity=".25"/>
        <!-- Palm trees -->
        <g fill="#1a3808"><line x1="80" y1="292" x2="72" y2="248" stroke="#2a1808" stroke-width="4"/><ellipse cx="68" cy="244" rx="20" ry="8" transform="rotate(-25,68,244)"/><ellipse cx="75" cy="240" rx="18" ry="7" transform="rotate(10,75,240)"/></g>
      </svg>
      <div class="ig-10__label"><strong>Angkor Wat</strong><span>Cambodia · 12th C.</span></div>
    </div>

    <!-- Card 4: Petra -->
    <div class="ig-10__card" style="aspect-ratio:16/9">
      <svg viewBox="0 0 520 292" xmlns="http://www.w3.org/2000/svg">
        <defs><linearGradient id="ptg2" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#c87840"/><stop offset="50%" stop-color="#b06030"/><stop offset="100%" stop-color="#783018"/></linearGradient></defs>
        <rect width="520" height="292" fill="url(#ptg2)"/>
        <!-- Rose-red cliff faces -->
        <g fill="#a85020">
          <rect x="0" y="0" width="120" height="292"/>
          <rect x="400" y="0" width="120" height="292"/>
        </g>
        <g fill="#c86030">
          <rect x="0" y="0" width="80" height="292"/>
          <rect x="440" y="0" width="80" height="292"/>
        </g>
        <!-- Cliff strata lines -->
        <g stroke="#8a3818" stroke-width="2" fill="none" opacity=".5">
          <line x1="0" y1="55" x2="130" y2="55"/><line x1="0" y1="110" x2="130" y2="110"/>
          <line x1="0" y1="165" x2="130" y2="165"/><line x1="0" y1="220" x2="130" y2="220"/>
          <line x1="390" y1="60" x2="520" y2="60"/><line x1="390" y1="118" x2="520" y2="118"/>
          <line x1="390" y1="175" x2="520" y2="175"/>
        </g>
        <!-- Al-Khazneh (Treasury facade) -->
        <g fill="#d07040">
          <!-- Main facade columns -->
          <rect x="155" y="60" width="18" height="162"/>
          <rect x="185" y="60" width="18" height="162"/>
          <rect x="318" y="60" width="18" height="162"/>
          <rect x="348" y="60" width="18" height="162"/>
          <!-- Frieze top -->
          <rect x="148" y="58" width="226" height="16" rx="3"/>
          <!-- Pediment -->
          <polygon points="148,58 260,22 372,58"/>
          <!-- Upper tholos (round temple) -->
          <ellipse cx="260" cy="38" rx="28" ry="22" fill="#e08050"/>
          <ellipse cx="260" cy="38" rx="20" ry="16" fill="#c86830"/>
          <!-- Urns on pediment -->
          <g fill="#c07030"><ellipse cx="188" cy="55" rx="8" ry="14"/><ellipse cx="332" cy="55" rx="8" ry="14"/></g>
          <!-- Main doorway arch -->
          <path d="M220,222 Q260,180 300,222 L300,292 L220,292 Z" fill="#1a0808"/>
          <!-- Side niches -->
          <path d="M160,160 Q173,140 186,160 L186,220 L160,220 Z" fill="#1a0808" opacity=".7"/>
          <path d="M334,160 Q347,140 360,160 L360,220 L334,220 Z" fill="#1a0808" opacity=".7"/>
          <!-- Decorative relief -->
          <g fill="#b86020" opacity=".6">
            <rect x="200" y="80" width="16" height="8" rx="2"/><rect x="220" y="80" width="16" height="8" rx="2"/>
            <rect x="286" y="80" width="16" height="8" rx="2"/><rect x="306" y="80" width="16" height="8" rx="2"/>
          </g>
        </g>
        <!-- Sandy floor -->
        <path d="M120,265 Q200,255 260,260 Q320,255 400,265 L400,292 L120,292 Z" fill="#c8a060"/>
        <!-- Camel in foreground -->
        <g fill="#7a3a10" transform="translate(115,258)" opacity=".7">
          <ellipse cx="0" cy="0" rx="22" ry="12"/><ellipse cx="6" cy="-8" rx="12" ry="10"/>
          <rect x="-14" y="10" width="5" height="16" rx="2"/><rect x="-5" y="10" width="5" height="16" rx="2"/>
          <rect x="7" y="10" width="5" height="16" rx="2"/><rect x="16" y="10" width="5" height="14" rx="2"/>
          <ellipse cx="-16" cy="-4" rx="8" ry="6"/>
        </g>
      </svg>
      <div class="ig-10__label"><strong>Petra</strong><span>Jordan · 4th C. BC</span></div>
    </div>

    <!-- Card 3: Machu Picchu (different angle to demo-05) -->
    <div class="ig-10__card" style="aspect-ratio:16/9">
      <svg viewBox="0 0 520 292" xmlns="http://www.w3.org/2000/svg">
        <defs><linearGradient id="mpg2" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#1a3a5a"/><stop offset="50%" stop-color="#2a5060"/><stop offset="100%" stop-color="#3a6040"/></linearGradient><filter id="mpf2"><feGaussianBlur stdDeviation="6"/></filter></defs>
        <rect width="520" height="292" fill="url(#mpg2)"/>
        <!-- Mountain peaks -->
        <polygon points="0,292 0,180 80,120 160,175 180,292" fill="#1a2a1a" opacity=".85"/>
        <polygon points="380,292 360,175 390,120 460,180 520,180 520,292" fill="#1a2a1a" opacity=".85"/>
        <!-- Huayna Picchu -->
        <polygon points="340,0 380,80 420,0" fill="#2a3a28" opacity=".8"/>
        <polygon points="345,0 380,75 415,0" fill="#3a4a35" opacity=".6"/>
        <!-- Mist clouds -->
        <g filter="url(#mpf2)" opacity=".35"><ellipse cx="150" cy="160" rx="100" ry="35"/><ellipse cx="380" cy="175" rx="95" ry="30"/></g>
        <!-- Citadel on ridge -->
        <rect x="155" y="148" width="210" height="144" fill="#5a7040"/>
        <!-- Terrace steps up to city -->
        <g fill="#4a6030">
          <path d="M155,200 Q205,190 260,196 Q315,190 365,200 L365,212 L155,212 Z"/>
          <path d="M155,215 Q205,205 260,210 Q315,205 365,215 L365,226 L155,226 Z"/>
          <path d="M155,228 Q205,220 260,224 Q315,220 365,228 L365,238 L155,238 Z"/>
        </g>
        <!-- Inca stone structures -->
        <g fill="#6a8050">
          <rect x="168" y="148" width="30" height="22"/><polygon points="163,148 183,136 203,148"/>
          <rect x="210" y="150" width="28" height="20"/><polygon points="205,150 224,138 243,150"/>
          <rect x="250" y="148" width="30" height="22"/><polygon points="245,148 265,136 285,148"/>
          <rect x="295" y="150" width="28" height="20"/><polygon points="290,150 309,138 328,150"/>
        </g>
        <!-- Sunlight breaking through mist -->
        <g opacity=".12" fill="#ffe080"><polygon points="230,0 260,0 330,292 300,292"/></g>
        <!-- Sun ray -->
        <ellipse cx="280" cy="50" rx="60" ry="40" fill="#ffe080" opacity=".08" filter="url(#mpf2)"/>
        <!-- Llamas grazing on terrace -->
        <g fill="#3a2a18" transform="translate(170,240)">
          <ellipse cx="0" cy="0" rx="10" ry="6"/><ellipse cx="-8" cy="-4" rx="4" ry="5.5"/><ellipse cx="-10" cy="-9" rx="2.5" ry="3.5"/>
          <rect x="-3" y="5" width="3" height="8" rx="1.5"/><rect x="3" y="5" width="3" height="8" rx="1.5"/>
          <rect x="-12" y="5" width="3" height="8" rx="1.5"/><rect x="-7" y="5" width="3" height="8" rx="1.5"/>
        </g>
      </svg>
      <div class="ig-10__label"><strong>Machu Picchu</strong><span>Peru · 15th C.</span></div>
    </div>

    <!-- Card 2: Easter Island -->
    <div class="ig-10__card" style="aspect-ratio:16/9">
      <svg viewBox="0 0 520 292" xmlns="http://www.w3.org/2000/svg">
        <defs><linearGradient id="eig" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#ff7040"/><stop offset="40%" stop-color="#d05020"/><stop offset="70%" stop-color="#802808"/><stop offset="100%" stop-color="#401408"/></linearGradient></defs>
        <rect width="520" height="292" fill="url(#eig)"/>
        <!-- Dramatic sunset sky -->
        <ellipse cx="260" cy="140" rx="280" ry="80" fill="#ff9040" opacity=".3"/>
        <circle cx="260" cy="138" r="45" fill="#fff080" opacity=".8"/>
        <circle cx="260" cy="138" r="38" fill="#ffee80"/>
        <!-- Ocean -->
        <path d="M0,232 Q130,218 260,228 Q390,218 520,230 L520,292 L0,292 Z" fill="#1a3a6a"/>
        <path d="M0,248 Q130,235 260,244 Q390,235 520,246 L520,292 L0,292 Z" fill="#2a4a7a"/>
        <!-- Wave crests -->
        <g stroke="#5588aa" stroke-width="1.5" fill="none" opacity=".5">
          <path d="M0,240 Q65,232 130,238 Q195,232 260,238 Q325,232 390,238 Q455,232 520,238"/>
        </g>
        <!-- Grass hillock -->
        <path d="M0,232 Q80,210 160,220 Q240,212 320,220 Q400,210 520,218 L520,232 L0,232 Z" fill="#4a6820"/>
        <!-- Moai statues silhouettes -->
        <g fill="#1a0c05">
          <!-- Moai 1 (foreground, tallest) -->
          <rect x="180" y="160" width="28" height="72"/>
          <rect x="178" y="200" width="32" height="8" rx="2"/><!-- platform top -->
          <path d="M180,160 Q194,140 208,160" fill="#1a0c05"/><!-- head top -->
          <rect x="183" y="155" width="22" height="12"/><!-- forehead -->
          <rect x="186" y="148" width="16" height="10" rx="2"/><!-- crown/hat -->
          <!-- Eyes indented -->
          <rect x="186" y="162" width="7" height="5" rx="1" fill="#2a1808"/>
          <rect x="195" y="162" width="7" height="5" rx="1" fill="#2a1808"/>
          <!-- Moai 2 -->
          <rect x="240" y="172" width="24" height="60"/>
          <rect x="238" y="208" width="28" height="7" rx="2"/>
          <path d="M240,172 Q252,153 264,172" fill="#1a0c05"/>
          <rect x="243" y="167" width="18" height="9"/>
          <rect x="245" y="161" width="14" height="8" rx="2"/>
          <!-- Moai 3 (smaller, distance) -->
          <rect x="298" y="182" width="18" height="48"/>
          <rect x="296" y="212" width="22" height="6" rx="2"/>
          <path d="M298,182 Q307,166 316,182" fill="#1a0c05"/>
          <rect x="300" y="177" width="14" height="7"/>
          <!-- Moai 4 (farther) -->
          <rect x="340" y="190" width="14" height="40"/>
          <rect x="338" y="215" width="18" height="5" rx="2"/>
          <path d="M340,190 Q347,176 354,190" fill="#1a0c05"/>
          <!-- Moai 5 (far) -->
          <rect x="375" y="196" width="12" height="34"/>
          <rect x="373" y="218" width="16" height="4" rx="2"/>
          <path d="M375,196 Q381,183 387,196" fill="#1a0c05"/>
        </g>
        <!-- Stars emerging -->
        <g fill="#fff" opacity=".6"><circle cx="30" cy="18" r="1"/><circle cx="80" cy="8" r="1.2"/><circle cx="440" cy="22" r="1"/><circle cx="495" cy="10" r="1.2"/></g>
      </svg>
      <div class="ig-10__label"><strong>Easter Island</strong><span>Chile · 13th C.</span></div>
    </div>

    <!-- Card 1 (front): Stonehenge -->
    <div class="ig-10__card" style="aspect-ratio:16/9">
      <svg viewBox="0 0 520 292" xmlns="http://www.w3.org/2000/svg">
        <defs><linearGradient id="sthg" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#2a3a5a"/><stop offset="50%" stop-color="#1a2a4a"/><stop offset="100%" stop-color="#0a1828"/></linearGradient><filter id="sthf"><feGaussianBlur stdDeviation="5"/></filter></defs>
        <rect width="520" height="292" fill="url(#sthg)"/>
        <!-- Full moon rising -->
        <circle cx="260" cy="100" r="48" fill="#fff8e0" opacity=".9"/>
        <circle cx="260" cy="100" r="42" fill="#fffae8"/>
        <g fill="rgba(200,190,160,.3)"><circle cx="248" cy="88" r="8"/><circle cx="272" cy="105" r="6"/><circle cx="255" cy="115" r="5"/></g>
        <!-- Moonlit glow on clouds -->
        <g opacity=".25" filter="url(#sthf)"><ellipse cx="140" cy="85" rx="120" ry="40" fill="#e0e8f0"/><ellipse cx="400" cy="78" rx="110" ry="38" fill="#e0e8f0"/></g>
        <!-- Moorland -->
        <path d="M0,230 Q130,215 260,222 Q390,215 520,224 L520,292 L0,292 Z" fill="#1a2a18"/>
        <path d="M0,248 Q130,235 260,240 Q390,235 520,244 L520,292 L0,292 Z" fill="#0e1a10"/>
        <!-- Heather tufts -->
        <g fill="#3a2a4a" opacity=".6"><ellipse cx="30" cy="238" rx="14" ry="6"/><ellipse cx="80" cy="240" rx="12" ry="5"/><ellipse cx="440" cy="236" rx="14" ry="6"/><ellipse cx="490" cy="240" rx="11" ry="5"/></g>
        <!-- Stonehenge stones -->
        <g fill="#3a3a4a">
          <!-- Outer ring uprights (pairs with lintels) -->
          <rect x="125" y="185" width="20" height="55"/>
          <rect x="160" y="178" width="22" height="62"/>
          <rect x="196" y="183" width="20" height="57"/>
          <rect x="302" y="183" width="20" height="57"/>
          <rect x="338" y="178" width="22" height="62"/>
          <rect x="373" y="185" width="20" height="55"/>
          <!-- Lintels connecting pairs -->
          <rect x="122" y="182" width="61" height="12" rx="2"/>
          <rect x="193" y="180" width="60" height="11" rx="2"/>
          <rect x="299" y="180" width="60" height="11" rx="2"/>
          <rect x="370" y="182" width="61" height="12" rx="2"/>
          <!-- Trilithon inner horseshoe (larger) -->
          <rect x="198" y="168" width="25" height="70"/>
          <rect x="297" y="168" width="25" height="70"/>
          <rect x="195" y="165" width="130" height="14" rx="3"/>
          <!-- Altar stone -->
          <rect x="240" y="238" width="40" height="8" rx="2"/>
          <!-- Fallen stone -->
          <rect x="170" y="248" width="50" height="12" rx="3" transform="rotate(-8,170,248)"/>
        </g>
        <!-- Stone lighter faces (moonlit) -->
        <g fill="#5a5a6a" opacity=".6">
          <rect x="126" y="185" width="8" height="55"/><rect x="161" y="178" width="9" height="62"/>
          <rect x="197" y="183" width="8" height="57"/><rect x="303" y="183" width="8" height="57"/>
          <rect x="339" y="178" width="9" height="62"/><rect x="374" y="185" width="8" height="55"/>
          <rect x="199" y="168" width="10" height="70"/><rect x="298" y="168" width="10" height="70"/>
        </g>
        <!-- Dramatic shadows cast -->
        <g fill="#080e18" opacity=".5">
          <polygon points="145,240 165,240 180,280 155,280"/>
          <polygon points="370,240 393,240 405,285 380,285"/>
        </g>
        <!-- Stars -->
        <g fill="#fff" opacity=".7"><circle cx="20" cy="15" r=".9"/><circle cx="60" cy="8" r="1.1"/><circle cx="105" cy="22" r=".8"/><circle cx="415" cy="18" r=".9"/><circle cx="460" cy="10" r="1"/><circle cx="495" cy="25" r=".8"/></g>
        <!-- Lone druid figure -->
        <g fill="#0a0e18" transform="translate(252,230)">
          <ellipse cx="0" cy="0" rx="7" ry="10"/>
          <circle cx="0" cy="-12" r="6"/>
          <!-- Hooded cloak -->
          <path d="M-7,0 Q-12,8 -8,12 Q-4,8 0,8 Q4,8 8,12 Q12,8 7,0" fill="#0a0e18"/>
        </g>
      </svg>
      <div class="ig-10__label"><strong>Stonehenge</strong><span>England · 3000 BC</span></div>
    </div>

  </div>
</div>
```

**CSS:**
```css
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
body{background:radial-gradient(ellipse at 50% 30%,#241a14,#0c0608 75%);font-family:'DM Sans',sans-serif;display:flex;align-items:center;justify-content:center;min-height:100vh;padding:2rem}
.ig-10{width:100%;max-width:720px;display:flex;align-items:center;justify-content:center}
.ig-10__stage{position:relative;width:100%;height:420px;perspective:1400px;perspective-origin:50% 50%;display:flex;align-items:center;justify-content:center}
.ig-10__card{position:absolute;width:74%;aspect-ratio:16/9;border-radius:12px;overflow:hidden;box-shadow:0 18px 50px rgba(0,0,0,.55);cursor:pointer;transform-origin:center center;transition:transform .55s cubic-bezier(.25,.8,.3,1),box-shadow .55s ease,filter .35s ease;will-change:transform;border:1px solid rgba(255,255,255,.08)}
.ig-10__card svg{width:100%;height:100%;display:block}
.ig-10__card:nth-child(5){transform:translateZ(-220px) translateY(-92px) rotateX(8deg);z-index:1}
.ig-10__card:nth-child(4){transform:translateZ(-160px) translateY(-46px) rotateX(6deg);z-index:2}
.ig-10__card:nth-child(3){transform:translateZ(-100px) translateY(0) rotateX(4deg);z-index:3}
.ig-10__card:nth-child(2){transform:translateZ(-50px) translateY(48px) rotateX(2deg);z-index:4}
.ig-10__card:nth-child(1){transform:translateZ(0) translateY(94px) rotateX(0);z-index:5;box-shadow:0 28px 70px rgba(0,0,0,.7)}
.ig-10__stage:hover .ig-10__card{filter:brightness(.55) saturate(.7)}
.ig-10__card:hover{transform:translateZ(160px) translateY(0) rotateX(-2deg) scale(1.04)!important;z-index:10!important;filter:none!important;box-shadow:0 40px 100px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.12)}
.ig-10__label{position:absolute;left:1rem;right:1rem;bottom:.85rem;display:flex;justify-content:space-between;align-items:flex-end;gap:.5rem;pointer-events:none;opacity:0;transform:translateY(8px);transition:opacity .35s ease .1s,transform .35s ease .1s}
.ig-10__card:nth-child(1) .ig-10__label,.ig-10__card:hover .ig-10__label{opacity:1;transform:translateY(0)}
.ig-10__label strong{color:#fff;font-family:'IM Fell English',serif;font-size:1.15rem;text-shadow:0 2px 8px rgba(0,0,0,.7)}
.ig-10__label span{color:rgba(255,255,255,.65);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;text-shadow:0 1px 4px rgba(0,0,0,.6)}
@media(prefers-reduced-motion:reduce){.ig-10__card,.ig-10__label{transition:none}.ig-10__stage:hover .ig-10__card{filter:none}.ig-10__card:hover{transform:none!important}}
```

### 11. CSS Diagonal Slice Reveal Gallery

**Type:** Pure CSS
**Description:** Six before/after pairs where hovering sweeps a skewed clip-path divider from center to edge, revealing the second scene behind the first.

**HTML:**
```html
<div class="ig-11">
  <div class="ig-11__grid">

    <!-- Slice 1: Forest Spring vs Winter -->
    <div class="ig-11__slice">
      <div class="ig-11__under">
        <svg viewBox="0 0 250 250" xmlns="http://www.w3.org/2000/svg">
          <defs><linearGradient id="spg" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#a8d8a8"/><stop offset="100%" stop-color="#68a868"/></linearGradient><filter id="spf"><feGaussianBlur stdDeviation="2"/></filter></defs>
          <rect width="250" height="250" fill="url(#spg)"/>
          <!-- Spring forest: light green, blossom -->
          <g fill="#3a7a18"><rect x="15" y="120" width="12" height="130"/><rect x="60" y="105" width="14" height="145"/><rect x="110" y="118" width="12" height="132"/><rect x="158" y="108" width="14" height="142"/><rect x="200" y="115" width="12" height="135"/></g>
          <g filter="url(#spf)"><ellipse cx="21" cy="108" rx="32" ry="24" fill="#5aaa28" opacity=".9"/><ellipse cx="67" cy="92" rx="36" ry="28" fill="#6acc30" opacity=".88"/><ellipse cx="116" cy="105" rx="32" ry="24" fill="#5aaa28" opacity=".88"/><ellipse cx="165" cy="95" rx="36" ry="26" fill="#7acc38" opacity=".9"/><ellipse cx="206" cy="102" rx="30" ry="22" fill="#5aaa28" opacity=".85"/></g>
          <!-- Blossoms -->
          <g filter="url(#spf)" opacity=".5"><circle cx="21" cy="98" rx="18" ry="14" fill="#f8d0e0"/><circle cx="67" cy="82" rx="20" ry="15" fill="#fad8e8"/><circle cx="165" cy="85" rx="22" ry="16" fill="#f8d0e0"/></g>
          <!-- Ground flowers -->
          <g fill="#ffdd20" opacity=".7"><circle cx="30" cy="240" r="4"/><circle cx="80" cy="235" r="3.5"/><circle cx="140" cy="242" r="4"/><circle cx="190" cy="238" r="3.5"/><circle cx="230" cy="244" r="4"/></g>
          <!-- Ground -->
          <rect x="0" y="230" width="250" height="20" fill="#5a8a28" opacity=".7"/>
          <!-- Sun -->
          <circle cx="200" cy="30" r="22" fill="#fff5a0" opacity=".9"/><circle cx="200" cy="30" r="17" fill="#ffee80"/>
          <!-- Birds -->
          <g stroke="#1a1a14" stroke-width="1.5" fill="none"><path d="M70,50 Q76,45 82,50"/><path d="M95,38 Q101,33 107,38"/></g>
        </svg>
      </div>
      <div class="ig-11__over">
        <svg viewBox="0 0 250 250" xmlns="http://www.w3.org/2000/svg">
          <defs><linearGradient id="wng" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#9ab8d8"/><stop offset="100%" stop-color="#c8d8e8"/></linearGradient><filter id="wnf"><feGaussianBlur stdDeviation="3"/></filter></defs>
          <rect width="250" height="250" fill="url(#wng)"/>
          <!-- Winter: bare dark trees, snow -->
          <g fill="#1a1410"><rect x="15" y="80" width="12" height="170" rx="3"/><rect x="60" y="65" width="14" height="185" rx="3"/><rect x="110" y="78" width="12" height="172" rx="3"/><rect x="158" y="68" width="14" height="182" rx="3"/><rect x="200" y="75" width="12" height="175" rx="3"/></g>
          <!-- Bare branches -->
          <g stroke="#1a1410" stroke-width="3" fill="none" stroke-linecap="round"><path d="M21,80 Q10,55 5,35 M21,90 Q35,65 45,42 M21,100 Q5,85 -2,70"/><path d="M67,65 Q55,40 50,18 M67,75 Q82,48 90,28 M67,85 Q50,72 42,60"/><path d="M164,68 Q152,42 148,20 M164,78 Q178,52 188,32 M164,88 Q148,75 140,62"/></g>
          <!-- Snow on branches -->
          <g fill="#fff" opacity=".8" filter="url(#wnf)"><rect x="2" y="34" width="18" height="4" rx="2"/><rect x="36" y="40" width="16" height="4" rx="2"/><rect x="48" y="17" width="14" height="4" rx="2"/><rect x="145" y="19" width="14" height="4" rx="2"/><rect x="183" y="31" width="16" height="4" rx="2"/></g>
          <!-- Snow ground -->
          <path d="M0,215 Q62,205 125,212 Q187,205 250,210 L250,250 L0,250 Z" fill="#e8f0f8"/>
          <path d="M0,228 Q62,220 125,225 Q187,220 250,224 L250,250 L0,250 Z" fill="#f0f8ff"/>
          <!-- Snowflakes falling -->
          <g fill="#fff" opacity=".7"><circle cx="25" cy="130" r="2"/><circle cx="80" cy="115" r="2.5"/><circle cx="145" cy="140" r="2"/><circle cx="195" cy="125" r="2.5"/><circle cx="60" cy="175" r="2"/><circle cx="175" cy="185" r="2.5"/></g>
          <!-- Dark sky hint -->
          <rect x="0" y="0" width="250" height="30" fill="#6a88a8" opacity=".3"/>
        </svg>
      </div>
      <div class="ig-11__divider"></div>
      <div class="ig-11__label"><span class="ig-11__label-a">Spring</span><span class="ig-11__label-b">Winter</span></div>
    </div>

    <!-- Slice 2: Autumn vs Dawn -->
    <div class="ig-11__slice">
      <div class="ig-11__under">
        <svg viewBox="0 0 250 250" xmlns="http://www.w3.org/2000/svg">
          <defs><linearGradient id="atg2" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#c87020"/><stop offset="50%" stop-color="#e89030"/><stop offset="100%" stop-color="#f5b840"/></linearGradient><filter id="atf2"><feGaussianBlur stdDeviation="2"/></filter></defs>
          <rect width="250" height="250" fill="url(#atg2)"/>
          <!-- Autumn: fiery orange trees -->
          <g fill="#5a2808"><rect x="15" y="115" width="14" height="135"/><rect x="65" y="100" width="16" height="150"/><rect x="115" y="112" width="14" height="138"/><rect x="165" y="102" width="15" height="148"/><rect x="210" y="110" width="14" height="140"/></g>
          <g filter="url(#atf2)"><ellipse cx="22" cy="100" rx="36" ry="26" fill="#c84010" opacity=".9"/><ellipse cx="73" cy="84" rx="40" ry="30" fill="#e06018" opacity=".88"/><ellipse cx="122" cy="98" rx="36" ry="26" fill="#d05014" opacity=".88"/><ellipse cx="172" cy="88" rx="38" ry="28" fill="#e87018" opacity=".9"/><ellipse cx="217" cy="95" rx="34" ry="25" fill="#c84010" opacity=".85"/></g>
          <!-- Brighter canopy layer -->
          <g filter="url(#atf2)"><ellipse cx="22" cy="88" rx="28" ry="20" fill="#f08028" opacity=".7"/><ellipse cx="73" cy="72" rx="32" ry="24" fill="#f09030" opacity=".7"/><ellipse cx="172" cy="76" rx="30" ry="22" fill="#f5a030" opacity=".7"/></g>
          <!-- Falling leaves -->
          <g fill="#e06018" opacity=".75"><ellipse cx="45" cy="155" rx="6" ry="3.5" transform="rotate(25,45,155)"/><ellipse cx="95" cy="165" rx="5" ry="3" transform="rotate(-18,95,165)"/><ellipse cx="145" cy="148" rx="6" ry="3.5" transform="rotate(35,145,148)"/><ellipse cx="195" cy="158" rx="5" ry="3" transform="rotate(-28,195,158)"/><ellipse cx="235" cy="142" rx="6" ry="3.5" transform="rotate(15,235,142)"/></g>
          <!-- Ground leaves -->
          <rect x="0" y="228" width="250" height="22" fill="#8a4810" opacity=".6"/>
          <g fill="#c06020" opacity=".6"><ellipse cx="30" cy="234" rx="8" ry="4" transform="rotate(12,30,234)"/><ellipse cx="80" cy="236" rx="7" ry="3.5" transform="rotate(-15,80,236)"/><ellipse cx="150" cy="232" rx="8" ry="4" transform="rotate(20,150,232)"/><ellipse cx="220" cy="235" rx="7" ry="3.5" transform="rotate(-8,220,235)"/></g>
          <!-- Sunbeam shafts -->
          <g opacity=".12" fill="#ffe080"><polygon points="90,0 120,0 180,250 150,250"/><polygon points="150,0 170,0 220,250 200,250"/></g>
        </svg>
      </div>
      <div class="ig-11__over">
        <svg viewBox="0 0 250 250" xmlns="http://www.w3.org/2000/svg">
          <defs><linearGradient id="dng" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#1a0830"/><stop offset="40%" stop-color="#3a1860"/><stop offset="70%" stop-color="#8040a0"/><stop offset="100%" stop-color="#d080c0"/></linearGradient><filter id="dnf"><feGaussianBlur stdDeviation="4"/></filter></defs>
          <rect width="250" height="250" fill="url(#dng)"/>
          <!-- Dawn: purple to pink sky -->
          <!-- Venus / morning star -->
          <circle cx="200" cy="25" r="4" fill="#fff8d0" opacity=".95"/>
          <circle cx="200" cy="25" r="7" fill="#fff8d0" opacity=".3" filter="url(#dnf)"/>
          <!-- Dawn glow on horizon -->
          <ellipse cx="125" cy="175" rx="180" ry="50" fill="#ff8040" opacity=".4" filter="url(#dnf)"/>
          <ellipse cx="125" cy="185" rx="140" ry="30" fill="#ff6020" opacity=".3" filter="url(#dnf)"/>
          <!-- Tree silhouettes (same forest, dawn light) -->
          <g fill="#0a0618"><rect x="15" y="115" width="14" height="135"/><rect x="65" y="100" width="16" height="150"/><rect x="115" y="112" width="14" height="138"/><rect x="165" y="102" width="15" height="148"/><rect x="210" y="110" width="14" height="140"/></g>
          <g fill="#0d081c"><ellipse cx="22" cy="100" rx="36" ry="26"/><ellipse cx="73" cy="84" rx="40" ry="30"/><ellipse cx="122" cy="98" rx="36" ry="26"/><ellipse cx="172" cy="88" rx="38" ry="28"/><ellipse cx="217" cy="95" rx="34" ry="25"/></g>
          <!-- Mist at ground -->
          <rect x="0" y="200" width="250" height="50" fill="#8040a0" opacity=".2" filter="url(#dnf)"/>
          <rect x="0" y="220" width="250" height="30" fill="#d080c0" opacity=".15" filter="url(#dnf)"/>
          <!-- Stars fading -->
          <g fill="#fff" opacity=".6"><circle cx="30" cy="15" r=".9"/><circle cx="70" cy="8" r="1"/><circle cx="115" cy="18" r=".8"/><circle cx="160" cy="10" r=".9"/></g>
          <!-- Owl silhouette on branch -->
          <g fill="#0a0618" transform="translate(50,135)">
            <ellipse cx="0" cy="0" rx="8" ry="10"/><ellipse cx="0" cy="-10" rx="7" ry="7"/>
            <g fill="#0a0618"><polygon points="-6,-16 -3,-8 -6,-8"/><polygon points="6,-16 3,-8 6,-8"/></g>
            <circle cx="-3" cy="-10" r="2.5" fill="#1a0a30"/><circle cx="3" cy="-10" r="2.5" fill="#1a0a30"/>
            <path d="M-8,5 Q-12,8 -14,6" stroke="#0a0618" stroke-width="2" fill="none"/>
            <path d="M8,5 Q12,8 14,6" stroke="#0a0618" stroke-width="2" fill="none"/>
          </g>
        </svg>
      </div>
      <div class="ig-11__divider"></div>
      <div class="ig-11__label"><span class="ig-11__label-a">Autumn</span><span class="ig-11__label-b">Dawn</span></div>
    </div>

    <!-- Slice 3: Summer vs Night -->
    <div class="ig-11__slice">
      <div class="ig-11__under">
        <svg viewBox="0 0 250 250" xmlns="http://www.w3.org/2000/svg">
          <defs><linearGradient id="smg2" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#4aa8e0"/><stop offset="50%" stop-color="#88c8f0"/><stop offset="100%" stop-color="#c8e8f8"/></linearGradient><filter id="smf2"><feGaussianBlur stdDeviation="2"/></filter></defs>
          <rect width="250" height="250" fill="url(#smg2)"/>
          <!-- Fluffy summer clouds -->
          <g filter="url(#smf2)"><ellipse cx="60" cy="45" rx="48" ry="22" fill="#fff"/><ellipse cx="85" cy="35" rx="38" ry="18" fill="#fff"/><ellipse cx="45" cy="38" rx="30" ry="15" fill="#fff"/><ellipse cx="195" cy="52" rx="42" ry="19" fill="#fff"/><ellipse cx="215" cy="42" rx="32" ry="16" fill="#fff"/></g>
          <!-- Summer: deep green full canopy -->
          <g fill="#1a5a08"><rect x="15" y="125" width="14" height="125"/><rect x="65" y="108" width="16" height="142"/><rect x="115" y="120" width="14" height="130"/><rect x="165" y="110" width="15" height="140"/><rect x="210" y="118" width="14" height="132"/></g>
          <g filter="url(#smf2)"><ellipse cx="22" cy="108" rx="38" ry="28" fill="#1a6008" opacity=".95"/><ellipse cx="73" cy="90" rx="42" ry="32" fill="#228010" opacity=".93"/><ellipse cx="122" cy="105" rx="38" ry="28" fill="#1a6008" opacity=".93"/><ellipse cx="172" cy="95" rx="40" ry="30" fill="#2a8814" opacity=".95"/><ellipse cx="217" cy="102" rx="36" ry="26" fill="#1a6008" opacity=".90"/></g>
          <!-- Rich top canopy -->
          <g filter="url(#smf2)"><ellipse cx="22" cy="95" rx="30" ry="22" fill="#3aaa20" opacity=".6"/><ellipse cx="73" cy="78" rx="34" ry="25" fill="#42b828" opacity=".6"/><ellipse cx="172" cy="83" rx="32" ry="24" fill="#3aaa20" opacity=".6"/></g>
          <!-- Dappled light on ground -->
          <g fill="#c8e880" opacity=".4"><ellipse cx="40" cy="200" rx="20" ry="8"/><ellipse cx="110" cy="210" rx="18" ry="7"/><ellipse cx="185" cy="205" rx="16" ry="7"/></g>
          <!-- Ground cover -->
          <rect x="0" y="228" width="250" height="22" fill="#2a7014" opacity=".7"/>
          <!-- Sunlight shaft -->
          <polygon points="100,0 130,0 195,250 165,250" fill="#fff8e0" opacity=".06"/>
          <!-- Dragonfly -->
          <g transform="translate(160,155)" fill="#2288aa" opacity=".8">
            <ellipse cx="0" cy="0" rx="1.5" ry="9"/>
            <ellipse cx="-12" cy="-2" rx="14" ry="5" transform="rotate(10,-12,-2)"/>
            <ellipse cx="12" cy="-2" rx="14" ry="5" transform="rotate(-10,12,-2)"/>
            <ellipse cx="-10" cy="4" rx="12" ry="4" transform="rotate(15,-10,4)"/>
            <ellipse cx="10" cy="4" rx="12" ry="4" transform="rotate(-15,10,4)"/>
          </g>
        </svg>
      </div>
      <div class="ig-11__over">
        <svg viewBox="0 0 250 250" xmlns="http://www.w3.org/2000/svg">
          <defs><radialGradient id="ntg" cx="50%" cy="50%" r="60%"><stop offset="0%" stop-color="#0d1830"/><stop offset="100%" stop-color="#020508"/></radialGradient><filter id="ntf"><feGaussianBlur stdDeviation="3"/></filter></defs>
          <rect width="250" height="250" fill="url(#ntg)"/>
          <!-- Full moon night forest -->
          <circle cx="125" cy="45" r="30" fill="#fff8e0" opacity=".9"/>
          <circle cx="125" cy="45" r="25" fill="#fffae8"/>
          <g fill="rgba(200,190,160,.3)"><circle cx="115" cy="38" r="5"/><circle cx="132" cy="50" r="4"/></g>
          <!-- Moon glow -->
          <circle cx="125" cy="45" r="55" fill="#ffe8c0" opacity=".12" filter="url(#ntf)"/>
          <!-- Night forest silhouettes -->
          <g fill="#040810"><rect x="15" y="80" width="14" height="170"/><rect x="65" y="65" width="16" height="185"/><rect x="115" y="78" width="14" height="172"/><rect x="165" y="68" width="15" height="182"/><rect x="210" y="75" width="14" height="175"/></g>
          <g fill="#060c18"><ellipse cx="22" cy="65" rx="36" ry="26"/><ellipse cx="73" cy="50" rx="40" ry="30"/><ellipse cx="122" cy="63" rx="36" ry="26"/><ellipse cx="172" cy="53" rx="38" ry="28"/><ellipse cx="217" cy="60" rx="34" ry="25"/></g>
          <!-- Fireflies -->
          <g filter="url(#ntf)"><circle cx="40" cy="155" r="4" fill="#e0ff40" opacity=".85"/><circle cx="88" cy="140" r="4" fill="#c8ff20" opacity=".8"/><circle cx="145" cy="165" r="4" fill="#e0ff40" opacity=".85"/><circle cx="200" cy="148" r="4" fill="#d0ff30" opacity=".82"/><circle cx="65" cy="200" r="3.5" fill="#e0ff40" opacity=".78"/><circle cx="175" cy="195" r="4" fill="#c8ff20" opacity=".8"/></g>
          <!-- Stars -->
          <g fill="#fff" opacity=".7"><circle cx="15" cy="15" r=".9"/><circle cx="45" cy="6" r="1"/><circle cx="80" cy="18" r=".8"/><circle cx="200" cy="10" r=".9"/><circle cx="235" cy="22" r="1"/></g>
          <!-- Ground mist -->
          <rect x="0" y="215" width="250" height="35" fill="#1a3050" opacity=".4" filter="url(#ntf)"/>
          <!-- Fox silhouette -->
          <g fill="#040810" transform="translate(100,220)">
            <ellipse cx="0" cy="0" rx="16" ry="8"/>
            <ellipse cx="-10" cy="-6" rx="8" ry="9"/><ellipse cx="-15" cy="-14" rx="3" ry="4"/>
            <path d="M16,0 Q24,0 28,-5" stroke="#040810" stroke-width="3" fill="none" stroke-linecap="round"/>
            <rect x="-6" y="7" width="4" height="10" rx="2"/><rect x="2" y="7" width="4" height="10" rx="2"/>
            <rect x="-14" y="7" width="4" height="10" rx="2"/><rect x="-10" y="7" width="4" height="10" rx="2"/>
          </g>
        </svg>
      </div>
      <div class="ig-11__divider"></div>
      <div class="ig-11__label"><span class="ig-11__label-a">Summer</span><span class="ig-11__label-b">Night</span></div>
    </div>

    <!-- Slice 4: Misty Morning vs Rain -->
    <div class="ig-11__slice">
      <div class="ig-11__under">
        <svg viewBox="0 0 250 250" xmlns="http://www.w3.org/2000/svg">
          <defs><linearGradient id="mmg" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#d0e0c8"/><stop offset="100%" stop-color="#e8f0e0"/></linearGradient><filter id="mmf"><feGaussianBlur stdDeviation="5"/></filter></defs>
          <rect width="250" height="250" fill="url(#mmg)"/>
          <!-- Mist layers -->
          <rect x="0" y="140" width="250" height="50" fill="#e8f0e8" opacity=".6" filter="url(#mmf)"/>
          <rect x="0" y="165" width="250" height="50" fill="#f0f8f0" opacity=".55" filter="url(#mmf)"/>
          <rect x="0" y="190" width="250" height="60" fill="#f5faf5" opacity=".6" filter="url(#mmf)"/>
          <!-- Misty forest trees -->
          <g fill="#4a6a38" opacity=".7"><rect x="15" y="90" width="12" height="160"/><rect x="60" y="80" width="14" height="170"/><rect x="108" y="92" width="12" height="158"/><rect x="155" y="82" width="14" height="168"/><rect x="200" y="88" width="12" height="162"/></g>
          <g fill="#5a7a48" opacity=".6" filter="url(#mmf)"><ellipse cx="21" cy="75" rx="34" ry="24"/><ellipse cx="67" cy="62" rx="38" ry="28"/><ellipse cx="114" cy="74" rx="34" ry="24"/><ellipse cx="162" cy="65" rx="36" ry="26"/><ellipse cx="206" cy="72" rx="32" ry="23"/></g>
          <!-- Soft light in mist -->
          <ellipse cx="125" cy="55" rx="90" ry="35" fill="#fffae0" opacity=".2" filter="url(#mmf)"/>
          <!-- Dew drops on grass -->
          <g fill="#88c8e8" opacity=".6"><circle cx="25" cy="238" r="2"/><circle cx="55" cy="240" r="1.5"/><circle cx="90" cy="236" r="2"/><circle cx="130" cy="238" r="2"/><circle cx="165" cy="240" r="1.5"/><circle cx="200" cy="237" r="2"/><circle cx="230" cy="239" r="1.5"/></g>
          <!-- Ground -->
          <rect x="0" y="232" width="250" height="18" fill="#6a9040" opacity=".4"/>
          <!-- Deer silhouette -->
          <g fill="#3a5028" opacity=".6" transform="translate(140,205)">
            <ellipse cx="0" cy="0" rx="16" ry="10"/><ellipse cx="-12" cy="-8" rx="8" ry="10"/>
            <path d="M-16,-10 Q-20,-20 -18,-28 M-16,-10 Q-12,-22 -14,-30" stroke="#3a5028" stroke-width="1.5" fill="none"/>
            <rect x="-4" y="9" width="4" height="14" rx="2"/><rect x="4" y="9" width="4" height="14" rx="2"/><rect x="-14" y="9" width="4" height="14" rx="2"/><rect x="-10" y="9" width="4" height="14" rx="2"/>
          </g>
        </svg>
      </div>
      <div class="ig-11__over">
        <svg viewBox="0 0 250 250" xmlns="http://www.w3.org/2000/svg">
          <defs><linearGradient id="rng" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#1a2a1a"/><stop offset="100%" stop-color="#2a3a2a"/></linearGradient><filter id="rnf"><feGaussianBlur stdDeviation="2"/></filter></defs>
          <rect width="250" height="250" fill="url(#rng)"/>
          <!-- Storm clouds -->
          <g fill="#0a1208" opacity=".9"><ellipse cx="60" cy="35" rx="80" ry="38"/><ellipse cx="180" cy="28" rx="70" ry="32"/><ellipse cx="125" cy="20" rx="60" ry="28"/></g>
          <!-- Rain forest: dark green -->
          <g fill="#0d2a08"><rect x="15" y="90" width="12" height="160"/><rect x="60" y="78" width="14" height="172"/><rect x="108" y="92" width="12" height="158"/><rect x="155" y="80" width="14" height="170"/><rect x="200" y="88" width="12" height="162"/></g>
          <g fill="#0d3208"><ellipse cx="21" cy="75" rx="34" ry="24"/><ellipse cx="67" cy="62" rx="38" ry="28"/><ellipse cx="114" cy="74" rx="34" ry="24"/><ellipse cx="162" cy="65" rx="36" ry="26"/><ellipse cx="206" cy="72" rx="32" ry="23"/></g>
          <!-- Heavy rain streaks -->
          <g stroke="rgba(160,200,180,.28)" stroke-width=".8">
            <line x1="10" y1="0" x2="7" y2="250"/><line x1="30" y1="0" x2="27" y2="250"/>
            <line x1="52" y1="0" x2="49" y2="250"/><line x1="75" y1="0" x2="72" y2="250"/>
            <line x1="98" y1="0" x2="95" y2="250"/><line x1="118" y1="0" x2="115" y2="250"/>
            <line x1="140" y1="0" x2="137" y2="250"/><line x1="162" y1="0" x2="159" y2="250"/>
            <line x1="185" y1="0" x2="182" y2="250"/><line x1="208" y1="0" x2="205" y2="250"/>
            <line x1="228" y1="0" x2="225" y2="250"/><line x1="248" y1="0" x2="245" y2="250"/>
          </g>
          <!-- Puddles -->
          <g fill="#1a3a2a" opacity=".6"><ellipse cx="40" cy="238" rx="18" ry="7" filter="url(#rnf)"/><ellipse cx="130" cy="240" rx="22" ry="8" filter="url(#rnf)"/><ellipse cx="210" cy="236" rx="16" ry="6" filter="url(#rnf)"/></g>
          <!-- Lightning -->
          <polyline points="170,0 160,45 172,45 155,90" stroke="#e0f8c0" stroke-width="1.5" fill="none" opacity=".7"/>
          <polyline points="170,0 160,45 172,45 155,90" stroke="#fff" stroke-width=".8" fill="none" opacity=".5"/>
          <!-- Glow from lightning -->
          <ellipse cx="162" cy="45" rx="40" ry="20" fill="#c0e890" opacity=".08" filter="url(#rnf)"/>
        </svg>
      </div>
      <div class="ig-11__divider"></div>
      <div class="ig-11__label"><span class="ig-11__label-a">Morning Mist</span><span class="ig-11__label-b">Storm</span></div>
    </div>

    <!-- Slice 5: Dusk vs Frost -->
    <div class="ig-11__slice">
      <div class="ig-11__under">
        <svg viewBox="0 0 250 250" xmlns="http://www.w3.org/2000/svg">
          <defs><linearGradient id="dkg" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#1a0a30"/><stop offset="40%" stop-color="#5a1a60"/><stop offset="70%" stop-color="#c04050"/><stop offset="100%" stop-color="#f07040"/></linearGradient><filter id="dkf"><feGaussianBlur stdDeviation="3"/></filter></defs>
          <rect width="250" height="250" fill="url(#dkg)"/>
          <!-- Dusk: purple-red sky -->
          <ellipse cx="125" cy="170" rx="180" ry="50" fill="#ff6030" opacity=".35" filter="url(#dkf)"/>
          <!-- Silhouette forest against sunset -->
          <g fill="#0a0518"><rect x="15" y="100" width="14" height="150"/><rect x="60" y="85" width="16" height="165"/><rect x="110" y="98" width="14" height="152"/><rect x="155" y="88" width="15" height="162"/><rect x="200" y="96" width="14" height="154"/></g>
          <g fill="#100820"><ellipse cx="22" cy="84" rx="36" ry="26"/><ellipse cx="68" cy="68" rx="40" ry="30"/><ellipse cx="117" cy="82" rx="36" ry="26"/><ellipse cx="162" cy="72" rx="38" ry="28"/><ellipse cx="207" cy="80" rx="34" ry="25"/></g>
          <!-- Silhouette reflected in water below -->
          <rect x="30" y="225" width="190" height="25" fill="#2a0a40" opacity=".5"/>
          <g fill="#1a0828" opacity=".4"><ellipse cx="22" cy="236" rx="20" ry="6"/><ellipse cx="68" cy="232" rx="24" ry="8"/><ellipse cx="117" cy="236" rx="20" ry="6"/></g>
          <!-- Bats -->
          <g fill="#0a0518" transform="translate(80,60)"><path d="M0,0 Q-8,8 -14,4 Q-8,0 0,0 Q8,0 14,4 Q8,8 0,0 Z"/><ellipse cx="0" cy="1" rx="3" ry="4"/></g>
          <g fill="#0a0518" transform="translate(170,45)"><path d="M0,0 Q-6,6 -10,3 Q-6,0 0,0 Q6,0 10,3 Q6,6 0,0 Z"/><ellipse cx="0" cy="1" rx="2.5" ry="3.5"/></g>
          <!-- First stars -->
          <g fill="#fff" opacity=".6"><circle cx="30" cy="20" r="1.1"/><circle cx="85" cy="12" r="1"/><circle cx="155" cy="18" r="1.2"/><circle cx="215" cy="10" r="1"/></g>
        </svg>
      </div>
      <div class="ig-11__over">
        <svg viewBox="0 0 250 250" xmlns="http://www.w3.org/2000/svg">
          <defs><linearGradient id="frg" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#8ab0d0"/><stop offset="50%" stop-color="#b0d0e8"/><stop offset="100%" stop-color="#d0e8f8"/></linearGradient><filter id="frf"><feGaussianBlur stdDeviation="2"/></filter></defs>
          <rect width="250" height="250" fill="url(#frg)"/>
          <!-- Frost/ice forest -->
          <!-- Trees with frost crystals -->
          <g fill="#2a3a2a" opacity=".8"><rect x="15" y="100" width="14" height="150"/><rect x="60" y="85" width="16" height="165"/><rect x="110" y="98" width="14" height="152"/><rect x="155" y="88" width="15" height="162"/><rect x="200" y="96" width="14" height="154"/></g>
          <g fill="#3a4a3a" filter="url(#frf)"><ellipse cx="22" cy="84" rx="36" ry="26"/><ellipse cx="68" cy="68" rx="40" ry="30"/><ellipse cx="117" cy="82" rx="36" ry="26"/><ellipse cx="162" cy="72" rx="38" ry="28"/><ellipse cx="207" cy="80" rx="34" ry="25"/></g>
          <!-- Frost crystals on branches -->
          <g fill="#e0eff8" opacity=".8"><ellipse cx="22" cy="72" rx="28" ry="10"/><ellipse cx="68" cy="56" rx="32" ry="12"/><ellipse cx="117" cy="70" rx="28" ry="10"/><ellipse cx="162" cy="60" rx="30" ry="11"/><ellipse cx="207" cy="68" rx="26" ry="10"/></g>
          <!-- Icicles hanging -->
          <g fill="#c8e0f0" opacity=".7">
            <polygon points="18,85 20,108 22,85"/><polygon points="26,82 28,102 30,82"/>
            <polygon points="65,68 67,90 69,68"/><polygon points="73,65 75,86 77,65"/>
            <polygon points="115,72 117,94 119,72"/><polygon points="160,62 162,84 164,62"/>
            <polygon points="205,70 207,92 209,70"/>
          </g>
          <!-- Snow ground -->
          <path d="M0,218 Q62,208 125,214 Q187,208 250,212 L250,250 L0,250 Z" fill="#e0eef8"/>
          <path d="M0,232 Q62,224 125,228 Q187,224 250,228 L250,250 L0,250 Z" fill="#eef6ff"/>
          <!-- Ice crystals on snow -->
          <g stroke="#b0d0e8" stroke-width=".8" fill="none" opacity=".6">
            <path d="M40,225 L44,221 M40,225 L36,221 M40,225 L40,219 M40,225 L44,229 M40,225 L36,229"/>
            <path d="M120,228 L124,224 M120,228 L116,224 M120,228 L120,222 M120,228 L124,232 M120,228 L116,232"/>
            <path d="M200,226 L204,222 M200,226 L196,222 M200,226 L200,220 M200,226 L204,230 M200,226 L196,230"/>
          </g>
          <!-- Frozen sun pale -->
          <circle cx="125" cy="30" r="24" fill="#d0e8f8" opacity=".8"/>
          <circle cx="125" cy="30" r="18" fill="#e0f0ff" opacity=".9"/>
        </svg>
      </div>
      <div class="ig-11__divider"></div>
      <div class="ig-11__label"><span class="ig-11__label-a">Dusk</span><span class="ig-11__label-b">Deep Frost</span></div>
    </div>

    <!-- Slice 6: Flood vs Drought -->
    <div class="ig-11__slice">
      <div class="ig-11__under">
        <svg viewBox="0 0 250 250" xmlns="http://www.w3.org/2000/svg">
          <defs><linearGradient id="flg" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#2255aa"/><stop offset="50%" stop-color="#3377cc"/><stop offset="100%" stop-color="#4499dd"/></linearGradient><filter id="flf"><feGaussianBlur stdDeviation="3"/></filter></defs>
          <rect width="250" height="250" fill="url(#flg)"/>
          <!-- Flooded forest: trees half-submerged -->
          <g fill="#1a2808" opacity=".85"><rect x="15" y="140" width="12" height="110"/><rect x="60" y="130" width="14" height="120"/><rect x="108" y="138" width="12" height="112"/><rect x="155" y="132" width="14" height="118"/><rect x="200" y="136" width="12" height="114"/></g>
          <!-- Tree tops above water -->
          <g fill="#2a4010"><ellipse cx="21" cy="120" rx="32" ry="22"/><ellipse cx="67" cy="108" rx="36" ry="26"/><ellipse cx="114" cy="118" rx="32" ry="22"/><ellipse cx="162" cy="110" rx="34" ry="24"/><ellipse cx="206" cy="116" rx="30" ry="21"/></g>
          <g fill="#3a5a18" filter="url(#flf)"><ellipse cx="21" cy="108" rx="24" ry="17"/><ellipse cx="67" cy="96" rx="28" ry="20"/><ellipse cx="114" cy="106" rx="24" ry="17"/></g>
          <!-- Flood water surface -->
          <path d="M0,162 Q62,150 125,158 Q187,150 250,155 L250,200 L0,200 Z" fill="#2255aa" opacity=".9"/>
          <path d="M0,180 Q62,170 125,176 Q187,170 250,174 L250,250 L0,250 Z" fill="#1a4499" opacity=".95"/>
          <!-- Water reflections/ripples -->
          <g stroke="#88aacc" stroke-width="1" fill="none" opacity=".4">
            <path d="M0,168 Q62,160 125,166 Q187,160 250,164"/><path d="M0,185 Q62,178 125,183 Q187,178 250,181"/>
          </g>
          <!-- Submerged fence -->
          <g stroke="#5a3818" stroke-width="2" fill="none" opacity=".4">
            <line x1="0" y1="175" x2="250" y2="175"/>
            <line x1="30" y1="162" x2="30" y2="188"/><line x1="70" y1="162" x2="70" y2="188"/><line x1="110" y1="162" x2="110" y2="188"/><line x1="150" y1="162" x2="150" y2="188"/><line x1="190" y1="162" x2="190" y2="188"/>
          </g>
          <!-- Heron on branch above water -->
          <g fill="#1a1a2a" transform="translate(195,142)">
            <ellipse cx="0" cy="0" rx="5" ry="9"/><ellipse cx="-1" cy="-10" rx="3" ry="5"/>
            <path d="M-4,-10 Q-8,-12 -10,-8" stroke="#1a1a2a" stroke-width="2" fill="none"/><!-- beak -->
            <path d="M0,8 Q2,14 1,20" stroke="#1a1a2a" stroke-width="2.5" fill="none"/><!-- legs in water -->
          </g>
          <!-- Sky with rain hint -->
          <g fill="#6688bb" opacity=".4"><ellipse cx="60" cy="20" rx="60" ry="20"/><ellipse cx="180" cy="15" rx="55" ry="18"/></g>
        </svg>
      </div>
      <div class="ig-11__over">
        <svg viewBox="0 0 250 250" xmlns="http://www.w3.org/2000/svg">
          <defs><linearGradient id="drg" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#d09020"/><stop offset="50%" stop-color="#c07818"/><stop offset="100%" stop-color="#8a4808"/></linearGradient></defs>
          <rect width="250" height="250" fill="url(#drg)"/>
          <!-- Drought: cracked earth, dead trees -->
          <!-- Cracked earth texture -->
          <g fill="#a06018" opacity=".6">
            <path d="M0,180 Q25,170 50,180 L50,250 L0,250 Z"/>
            <path d="M50,175 Q80,165 110,175 L110,250 L50,250 Z"/>
            <path d="M110,178 Q140,168 170,178 L170,250 L110,250 Z"/>
            <path d="M170,175 Q200,165 230,175 L230,250 L170,250 Z"/>
          </g>
          <!-- Crack lines in earth -->
          <g stroke="#7a3a08" stroke-width="1.5" fill="none" opacity=".7">
            <path d="M20,200 Q30,212 25,230 Q22,242 28,250"/><path d="M55,195 Q65,208 60,225 Q58,238 65,250"/>
            <path d="M95,198 Q105,214 100,232"/><path d="M140,196 Q150,210 145,228 Q142,240 150,250"/>
            <path d="M180,200 Q188,215 184,232"/><path d="M215,198 Q225,212 220,228"/>
            <path d="M10,215 Q40,220 70,215"/><path d="M100,208 Q130,212 160,208"/>
            <path d="M175,215 Q200,220 230,215"/><path d="M40,230 Q75,235 105,228"/>
          </g>
          <!-- Dead trees -->
          <g fill="#3a2008" opacity=".8">
            <rect x="15" y="100" width="12" height="130"/><rect x="60" y="88" width="14" height="142"/>
            <rect x="108" y="98" width="12" height="132"/><rect x="155" y="90" width="15" height="140"/>
            <rect x="200" y="96" width="12" height="134"/>
          </g>
          <!-- Bare dead branches -->
          <g stroke="#3a2008" stroke-width="2.5" fill="none" opacity=".7" stroke-linecap="round">
            <path d="M21,100 Q8,78 4,55 M21,110 Q36,85 44,62 M21,120 Q5,105 0,90"/>
            <path d="M67,88 Q54,65 50,42 M67,98 Q82,73 90,52"/>
            <path d="M162,90 Q150,66 146,44 M162,100 Q176,76 186,56"/>
          </g>
          <!-- Vulture silhouette circling -->
          <g fill="#1a0a04" transform="translate(125,50)">
            <path d="M0,0 Q-15,10 -26,5 Q-18,0 0,0 Q18,0 26,5 Q15,10 0,0 Z"/>
            <ellipse cx="0" cy="1" rx="5" ry="7"/>
            <ellipse cx="0" cy="-3" rx="3" ry="4"/><!-- head -->
          </g>
          <!-- Dry sun bleaching sky -->
          <circle cx="200" cy="32" r="32" fill="#fff080" opacity=".8"/>
          <circle cx="200" cy="32" r="24" fill="#ffee60" opacity=".9"/>
          <!-- Heat haze -->
          <g stroke="#c07018" stroke-width=".8" fill="none" opacity=".2">
            <path d="M0,155 Q62,148 125,154 Q187,148 250,152"/>
            <path d="M0,162 Q62,155 125,161 Q187,155 250,159"/>
          </g>
        </svg>
      </div>
      <div class="ig-11__divider"></div>
      <div class="ig-11__label"><span class="ig-11__label-a">Flood</span><span class="ig-11__label-b">Drought</span></div>
    </div>

  </div>
</div>
```

**CSS:**
```css
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
body{background:#0a0a0a;font-family:'DM Sans',sans-serif;display:flex;align-items:center;justify-content:center;min-height:100vh;padding:1.5rem}
.ig-11{width:100%;max-width:760px}
.ig-11__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.ig-11__slice{position:relative;overflow:hidden;border-radius:6px;cursor:pointer;aspect-ratio:1}
.ig-11__under,.ig-11__over{position:absolute;inset:0}
.ig-11__under svg,.ig-11__over svg{width:100%;height:100%;display:block}
.ig-11__over{clip-path:polygon(45% 0,100% 0,100% 100%,55% 100%);transition:clip-path .55s cubic-bezier(.77,0,.18,1)}
.ig-11__slice:hover .ig-11__over{clip-path:polygon(105% 0,100% 0,100% 100%,105% 100%)}
.ig-11__label{position:absolute;bottom:.7rem;left:.75rem;right:.75rem;display:flex;justify-content:space-between;pointer-events:none;z-index:3}
.ig-11__label-a,.ig-11__label-b{color:rgba(255,255,255,.85);font-size:.65rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;text-shadow:0 1px 4px rgba(0,0,0,.7);transition:opacity .3s}
.ig-11__label-b{text-align:right;opacity:0}
.ig-11__slice:hover .ig-11__label-a{opacity:0}
.ig-11__slice:hover .ig-11__label-b{opacity:1}
.ig-11__divider{position:absolute;top:0;bottom:0;left:0;right:0;pointer-events:none;z-index:2}
.ig-11__divider::after{content:'';position:absolute;top:0;bottom:0;left:44%;width:3px;background:rgba(255,255,255,.9);transform:skewX(-8deg);box-shadow:0 0 12px rgba(255,255,255,.5);transition:left .55s cubic-bezier(.77,0,.18,1)}
.ig-11__slice:hover .ig-11__divider::after{left:99%}
@media(prefers-reduced-motion:reduce){.ig-11__over,.ig-11__divider::after,.ig-11__label-a,.ig-11__label-b{transition:none}}
```

### 12. CSS Glassmorphism Hover Cards

**Type:** CSS + JS
**Description:** Four ocean-zone cards floating above a vivid sunset-aurora SVG background — the frosted-glass blur reveals the colors behind, and hover slides up an info panel with species detail and a CTA chip while sibling cards dim to focus attention.

**HTML:**
```html
<div class="ig-12">
  <!-- Full bg: vivid sunset/aurora so glass blur actually has something to blur -->
  <div class="ig-12__bg">
    <svg viewBox="0 0 900 600" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice">
      <defs>
        <linearGradient id="obg" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stop-color="#1b0a3a"/>
          <stop offset="50%" stop-color="#4a1066"/>
          <stop offset="100%" stop-color="#0a1a4a"/>
        </linearGradient>
        <filter id="obf" x="-20%" y="-20%" width="140%" height="140%"><feGaussianBlur stdDeviation="60"/></filter>
      </defs>
      <rect width="900" height="600" fill="url(#obg)"/>
      <!-- Big vivid blurred color blobs — the blur effect is the whole reason this demo exists -->
      <g filter="url(#obf)">
        <circle cx="160" cy="180" r="170" fill="#ff3b8a"/>
        <circle cx="720" cy="120" r="200" fill="#ffb020"/>
        <circle cx="780" cy="460" r="190" fill="#00d4ff"/>
        <circle cx="220" cy="500" r="180" fill="#a040ff"/>
        <circle cx="460" cy="300" r="160" fill="#22e0a0" opacity=".85"/>
      </g>
      <!-- Subtle drifting particles -->
      <g fill="#fff" opacity=".55"><circle cx="80" cy="120" r="1.5"/><circle cx="240" cy="80" r="1.2"/><circle cx="440" cy="60" r="1.5"/><circle cx="640" cy="90" r="1.2"/><circle cx="820" cy="140" r="1.5"/><circle cx="120" cy="400" r="1.2"/><circle cx="380" cy="460" r="1.5"/><circle cx="600" cy="490" r="1.2"/><circle cx="840" cy="350" r="1.2"/></g>
    </svg>
  </div>

  <div class="ig-12__grid">

    <!-- 1: Surface zone -->
    <div class="ig-12__card">
      <div class="ig-12__img">
        <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
          <defs><linearGradient id="szg" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#4488cc"/><stop offset="50%" stop-color="#2266aa"/><stop offset="100%" stop-color="#1144aa"/></linearGradient><filter id="szf"><feGaussianBlur stdDeviation="3"/></filter></defs>
          <rect width="200" height="200" fill="url(#szg)"/>
          <!-- Sunlight from above -->
          <g opacity=".3" fill="#88ddff"><polygon points="60,0 90,0 160,200 130,200"/><polygon points="100,0 120,0 180,200 160,200"/></g>
          <!-- Surface waves -->
          <g stroke="#6ac8f8" stroke-width="1.5" fill="none" opacity=".5"><path d="M0,30 Q50,18 100,28 Q150,18 200,28"/><path d="M0,42 Q50,32 100,40 Q150,32 200,40"/></g>
          <!-- Seaweed -->
          <g stroke="#2a8a18" stroke-width="3" fill="none" stroke-linecap="round"><path d="M25,200 Q18,170 25,145 Q30,125 22,105 Q18,88 25,70"/><path d="M42,200 Q48,172 42,148 Q38,130 44,110 Q48,92 42,75"/></g>
          <g fill="#3aaa28" opacity=".7"><ellipse cx="22" cy="100" rx="10" ry="5" transform="rotate(-30,22,100)"/><ellipse cx="28" cy="120" rx="9" ry="4" transform="rotate(25,28,120)"/><ellipse cx="40" cy="108" rx="10" ry="4" transform="rotate(-20,40,108)"/></g>
          <!-- Dolphins -->
          <g transform="translate(120,80)">
            <path d="M-28,0 Q-10,-12 10,-8 Q22,-5 28,5 Q20,12 5,8 Q-10,10 -28,5 Z" fill="#3a6a9a"/>
            <path d="M28,5 Q36,2 38,-5 Q36,-8 30,-5" fill="#3a6a9a"/>
            <ellipse cx="5" cy="0" rx="6" ry="8" fill="#4a7aaa" opacity=".6"/>
            <circle cx="-18" cy="-2" r="2.5" fill="#1a1a2a"/>
          </g>
          <!-- Surface kelp forest -->
          <g stroke="#1a5a0a" stroke-width="4" fill="none" stroke-linecap="round" opacity=".6"><path d="M155,200 Q160,165 155,135 Q152,115 158,90"/><path d="M170,200 Q165,168 170,142 Q174,122 168,98"/><path d="M185,200 Q190,170 186,145 Q183,125 188,100"/></g>
          <!-- Flying fish jumping -->
          <g fill="#60aacc" transform="translate(100,35)">
            <ellipse cx="0" cy="0" rx="12" ry="4"/>
            <path d="M-8,-3 Q-16,-12 -20,-8 Q-14,-3 -8,-3 Z" fill="#60aacc"/>
            <path d="M-8,3 Q-16,10 -18,7 Q-12,3 -8,3 Z" fill="#60aacc"/>
          </g>
        </svg>
      </div>
      <div class="ig-12__info">
        <p class="ig-12__zone">Sunlight Zone</p>
        <p class="ig-12__name">Surface Waters</p>
        <p class="ig-12__depth">0 – 200m depth</p>
        <p class="ig-12__species">Dolphins · Tuna · Flying fish · Kelp forests</p>
        <span class="ig-12__cta">Explore zone →</span>
      </div>
    </div>

    <!-- 2: Coral reef -->
    <div class="ig-12__card">
      <div class="ig-12__img">
        <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
          <defs><linearGradient id="crg" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#1a5588"/><stop offset="100%" stop-color="#0a2a55"/></linearGradient><filter id="crf"><feGaussianBlur stdDeviation="2"/></filter></defs>
          <rect width="200" height="200" fill="url(#crg)"/>
          <g opacity=".2" fill="#88ddff"><polygon points="70,0 90,0 150,200 130,200"/></g>
          <!-- Brain coral center -->
          <ellipse cx="100" cy="155" rx="40" ry="28" fill="#d04820"/>
          <g stroke="#a83010" stroke-width="1.2" fill="none" opacity=".7">
            <path d="M65,155 Q80,145 100,155 Q120,165 135,155"/><path d="M68,148 Q82,139 100,148 Q118,157 132,148"/><path d="M70,162 Q84,153 100,162 Q116,171 130,162"/>
          </g>
          <!-- Fan coral -->
          <g stroke="#ff2288" stroke-width="1.5" fill="none"><path d="M165,200 Q162,155 158,120 Q154,92 162,70"/><path d="M162,140 Q145,115 140,90 Q138,72 146,58"/><path d="M162,135 Q180,110 182,85 Q182,68 175,55"/><path d="M140,90 L182,85"/><path d="M143,110 L180,105"/><path d="M147,130 L177,126"/><path d="M153,150 L173,146"/></g>
          <!-- Staghorn coral -->
          <g stroke="#f0a030" stroke-width="3" fill="none" stroke-linecap="round"><line x1="20" y1="200" x2="24" y2="165"/><line x1="24" y1="165" x2="16" y2="148"/><line x1="24" y1="165" x2="32" y2="150"/><line x1="16" y1="148" x2="10" y2="132"/><line x1="16" y1="148" x2="22" y2="135"/><line x1="32" y1="150" x2="28" y2="133"/><line x1="32" y1="150" x2="40" y2="136"/><line x1="35" y1="200" x2="40" y2="168"/><line x1="40" y1="168" x2="33" y2="152"/><line x1="40" y1="168" x2="48" y2="155"/></g>
          <!-- Clownfish among anemone -->
          <g transform="translate(80,125)">
            <ellipse cx="0" cy="0" rx="10" ry="6" fill="#ff6600"/>
            <line x1="-6" y1="-6" x2="-6" y2="6" stroke="#fff" stroke-width="2"/>
            <line x1="0" y1="-6" x2="0" y2="6" stroke="#fff" stroke-width="2"/>
            <polygon points="10,0 17,-5 17,5" fill="#ff6600"/>
            <circle cx="-7" cy="-1" r="2" fill="#1a1a14"/>
          </g>
          <!-- Sea anemone -->
          <g transform="translate(110,165)">
            <ellipse cx="0" cy="5" rx="12" ry="7" fill="#3a0a5a"/>
            <g stroke="#cc44ff" stroke-width="1.5" fill="none" stroke-linecap="round"><path d="M-8,2 Q-12,-8 -10,-18"/><path d="M-3,1 Q-4,-10 -2,-20"/><path d="M2,0 Q4,-12 5,-22"/><path d="M7,1 Q10,-8 12,-18"/></g>
          </g>
          <!-- Light caustics -->
          <g stroke="#88c8ff" stroke-width="1" fill="none" opacity=".25"><ellipse cx="80" cy="35" rx="18" ry="8" transform="rotate(-20,80,35)"/><ellipse cx="140" cy="28" rx="14" ry="6" transform="rotate(15,140,28)"/></g>
        </svg>
      </div>
      <div class="ig-12__info">
        <p class="ig-12__zone">Twilight Edge</p>
        <p class="ig-12__name">Coral Reef</p>
        <p class="ig-12__depth">40 – 150m depth</p>
        <p class="ig-12__species">Clownfish · Sea anemone · Brain coral · Fan coral</p>
        <span class="ig-12__cta">Explore zone →</span>
      </div>
    </div>

    <!-- 3: Twilight zone -->
    <div class="ig-12__card">
      <div class="ig-12__img">
        <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
          <defs><radialGradient id="tzg" cx="50%" cy="50%" r="60%"><stop offset="0%" stop-color="#0a1a35"/><stop offset="100%" stop-color="#040a18"/></radialGradient><filter id="tzf"><feGaussianBlur stdDeviation="3"/></filter></defs>
          <rect width="200" height="200" fill="url(#tzg)"/>
          <!-- Faint light from above -->
          <g opacity=".1" fill="#88aaff"><polygon points="70,0 90,0 140,200 120,200"/></g>
          <!-- Siphonophore (chain organism) -->
          <g stroke="#00ffaa" stroke-width="1.5" fill="none" opacity=".7"><path d="M100,0 Q95,40 102,80 Q97,120 104,160 Q99,180 100,200"/></g>
          <g fill="#00ffaa" opacity=".6" filter="url(#tzf)"><circle cx="100" cy="15" r="5"/><circle cx="97" cy="35" r="4"/><circle cx="102" cy="55" r="5"/><circle cx="99" cy="75" r="4"/><circle cx="103" cy="95" r="5"/><circle cx="100" cy="115" r="4"/><circle cx="103" cy="135" r="5"/><circle cx="100" cy="155" r="4"/><circle cx="101" cy="175" r="4"/></g>
          <!-- Bioluminescent squid -->
          <g transform="translate(48,90)">
            <path d="M-5,-20 Q-8,-5 -12,5 Q-8,15 0,18 Q8,15 12,5 Q8,-5 5,-20 Z" fill="#1a2a4a"/>
            <ellipse cx="0" cy="0" rx="12" ry="18" fill="#1a2a50" opacity=".8"/>
            <g stroke="#4488ff" stroke-width="1" fill="none" opacity=".7"><path d="M-10,10 Q-20,15 -25,10"/><path d="M-8,14 Q-18,22 -20,16"/><path d="M10,10 Q20,15 25,10"/><path d="M8,14 Q18,22 20,16"/></g>
            <g fill="#4488ff" opacity=".5" filter="url(#tzf)"><circle cx="-5" cy="0" r="3"/><circle cx="5" cy="0" r="3"/><circle cx="0" cy="8" r="4"/><circle cx="-8" cy="5" r="2"/><circle cx="8" cy="5" r="2"/></g>
            <circle cx="-5" cy="-5" r="3.5" fill="#0a0a1a"/><circle cx="-4" cy="-6" r="1.2" fill="#4488ff" opacity=".8"/>
            <circle cx="5" cy="-5" r="3.5" fill="#0a0a1a"/><circle cx="6" cy="-6" r="1.2" fill="#4488ff" opacity=".8"/>
          </g>
          <!-- Deep sea shrimp -->
          <g fill="#ff4488" opacity=".7" transform="translate(150,130)">
            <ellipse cx="0" cy="0" rx="8" ry="4"/>
            <g stroke="#ff4488" stroke-width="1" fill="none"><path d="M-8,0 Q-14,-4 -16,-8"/><path d="M-8,0 Q-14,2 -16,6"/><path d="M-4,-3 Q-8,-8 -8,-12"/><path d="M8,0 Q14,-2 16,-6"/><path d="M8,0 Q14,2 16,6"/></g>
            <path d="M8,0 Q14,2 18,0 Q22,-2 20,-6 Q18,-2 14,-1" fill="#ff4488"/>
          </g>
          <!-- Particles -->
          <g fill="#88aaff" opacity=".4"><circle cx="30" cy="50" r="1.5"/><circle cx="80" cy="30" r="1.2"/><circle cx="160" cy="65" r="1.5"/><circle cx="170" cy="40" r="1.2"/><circle cx="20" cy="140" r="1.5"/><circle cx="170" cy="160" r="1.2"/></g>
        </svg>
      </div>
      <div class="ig-12__info">
        <p class="ig-12__zone">Midnight Zone</p>
        <p class="ig-12__name">Twilight Waters</p>
        <p class="ig-12__depth">200 – 1000m depth</p>
        <p class="ig-12__species">Bioluminescent squid · Siphonophore · Deep shrimp</p>
        <span class="ig-12__cta">Explore zone →</span>
      </div>
    </div>

    <!-- 4: Abyss zone -->
    <div class="ig-12__card">
      <div class="ig-12__img">
        <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
          <defs><radialGradient id="azg" cx="50%" cy="50%" r="50%"><stop offset="0%" stop-color="#080418"/><stop offset="100%" stop-color="#020208"/></radialGradient><filter id="azf"><feGaussianBlur stdDeviation="4"/></filter><filter id="azf2"><feGaussianBlur stdDeviation="2"/></filter></defs>
          <rect width="200" height="200" fill="url(#azg)"/>
          <!-- Anglerfish -->
          <g transform="translate(105,100)">
            <!-- Body -->
            <ellipse cx="0" cy="5" rx="35" ry="22" fill="#0d1528"/>
            <!-- Belly slightly lighter -->
            <ellipse cx="5" cy="12" rx="20" ry="12" fill="#1a2540" opacity=".6"/>
            <!-- Lure -->
            <path d="M0,-17 Q5,-35 8,-50" stroke="#2a3a4a" stroke-width="2" fill="none"/>
            <circle cx="8" cy="-50" r="8" fill="#00ff88" filter="url(#azf)"/>
            <circle cx="8" cy="-50" r="4" fill="#80ffcc"/>
            <!-- Teeth rows -->
            <g fill="#c8d0d8">
              <polygon points="-28,0 -24,-8 -20,0"/><polygon points="-18,-2 -14,-10 -10,-2"/>
              <polygon points="-5,-3 -1,-11 3,-3"/><polygon points="8,-1 12,-9 16,-1"/>
              <polygon points="20,2 24,-6 28,2"/>
              <!-- Lower jaw -->
              <polygon points="-25,10 -21,18 -17,10"/><polygon points="-12,8 -8,16 -4,8"/>
              <polygon points="0,7 4,15 8,7"/><polygon points="13,8 17,16 21,8"/>
            </g>
            <!-- Eyes -->
            <circle cx="-20" cy="-3" r="6" fill="#080818"/><circle cx="-19" cy="-4" r="2" fill="#0a8a60" opacity=".7"/>
            <!-- Tail fin -->
            <path d="M35,5 Q48,-8 52,-5 Q48,5 52,16 Q48,12 35,5 Z" fill="#0d1528"/>
            <!-- Pectoral fins -->
            <ellipse cx="-15" cy="20" rx="18" ry="7" fill="#0d1528" transform="rotate(25,-15,20)"/>
          </g>
          <!-- Viper fish below -->
          <g transform="translate(50,165)" fill="#0a1020">
            <ellipse cx="0" cy="0" rx="22" ry="7"/>
            <g fill="#8888aa" opacity=".5"><polygon points="-20,-4 -16,-12 -12,-4"/><polygon points="-10,-5 -6,-13 -2,-5"/><polygon points="2,-4 6,-12 10,-4"/><polygon points="14,-3 18,-11 22,-3"/></g>
            <circle cx="-15" cy="-2" r="3" fill="#050510"/><circle cx="-14" cy="-3" r="1" fill="#0044ff" opacity=".8"/>
            <path d="M22,0 Q32,-5 36,-8 Q32,-2 36,5 Q32,3 22,0 Z" fill="#0a1020"/>
          </g>
          <!-- Particles drifting -->
          <g fill="#6080ff" opacity=".3"><circle cx="20" cy="30" r="1.5"/><circle cx="60" cy="18" r="1.2"/><circle cx="140" cy="45" r="1.5"/><circle cx="175" cy="25" r="1.2"/><circle cx="15" cy="120" r="1.5"/><circle cx="180" cy="145" r="1.2"/><circle cx="25" cy="185" r="1.5"/></g>
          <!-- Sea floor rubble -->
          <g fill="#0a0a18" opacity=".8"><ellipse cx="30" cy="192" rx="18" ry="8"/><ellipse cx="80" cy="195" rx="15" ry="7"/><ellipse cx="150" cy="190" rx="22" ry="9"/><ellipse cx="190" cy="194" rx="14" ry="7"/></g>
        </svg>
      </div>
      <div class="ig-12__info">
        <p class="ig-12__zone">Abyssal Zone</p>
        <p class="ig-12__name">Deep Abyss</p>
        <p class="ig-12__depth">1000 – 4000m depth</p>
        <p class="ig-12__species">Anglerfish · Viper fish · Sea floor rubble</p>
        <span class="ig-12__cta">Explore zone →</span>
      </div>
    </div>

  </div>
</div>
```

**CSS:**
```css
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
body{font-family:'DM Sans',sans-serif;min-height:100vh;padding:2rem;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#0a0418}
.ig-12{position:relative;width:100%;max-width:780px;perspective:1200px}
.ig-12__bg{position:absolute;inset:-60px;z-index:0;border-radius:24px;overflow:hidden}
.ig-12__bg svg{width:100%;height:100%;display:block}
.ig-12__grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:1.1rem;padding:.4rem}
.ig-12__card{position:relative;border-radius:18px;overflow:hidden;cursor:pointer;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.08);backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%);transition:transform .45s cubic-bezier(.25,.8,.3,1),filter .35s ease,box-shadow .45s ease,border-color .35s ease;box-shadow:0 8px 28px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.18);transform-style:preserve-3d;aspect-ratio:3/4}
.ig-12__grid:hover .ig-12__card:not(:hover){filter:brightness(.55) saturate(.7);transform:scale(.97)}
.ig-12__card:hover{transform:translateY(-12px) rotateX(2deg) scale(1.04);border-color:rgba(255,255,255,.45);box-shadow:0 26px 60px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.15),inset 0 1px 0 rgba(255,255,255,.35)}
.ig-12__img{position:absolute;inset:0;width:100%;height:100%;display:block}
.ig-12__img svg{width:100%;height:100%;display:block}
.ig-12__info{position:absolute;left:0;right:0;bottom:0;padding:1rem 1.05rem 1.05rem;background:linear-gradient(to top,rgba(8,4,24,.92) 0%,rgba(8,4,24,.65) 55%,rgba(8,4,24,0) 100%);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transform:translateY(calc(100% - 78px));transition:transform .45s cubic-bezier(.25,.8,.3,1)}
.ig-12__card:hover .ig-12__info{transform:translateY(0)}
.ig-12__zone{font-size:.58rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#a8e0ff;margin-bottom:.3rem;text-shadow:0 1px 4px rgba(0,0,0,.5)}
.ig-12__name{font-size:1rem;font-weight:700;color:#fff;line-height:1.2;text-shadow:0 1px 4px rgba(0,0,0,.55)}
.ig-12__depth{font-size:.72rem;color:rgba(255,255,255,.7);margin-top:.25rem}
.ig-12__species{font-size:.68rem;color:rgba(255,255,255,.75);margin-top:.55rem;line-height:1.35;opacity:0;transform:translateY(6px);transition:opacity .35s ease .12s,transform .35s ease .12s}
.ig-12__card:hover .ig-12__species{opacity:1;transform:translateY(0)}
.ig-12__cta{display:inline-block;margin-top:.65rem;padding:.32rem .65rem;font-size:.65rem;font-weight:600;letter-spacing:.06em;color:#fff;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.3);border-radius:999px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);opacity:0;transform:translateY(6px);transition:opacity .35s ease .2s,transform .35s ease .2s,background .25s ease}
.ig-12__card:hover .ig-12__cta{opacity:1;transform:translateY(0)}
.ig-12__cta:hover{background:rgba(255,255,255,.3)}
@media(prefers-reduced-motion:reduce){.ig-12__card,.ig-12__info,.ig-12__species,.ig-12__cta{transition:none}.ig-12__grid:hover .ig-12__card:not(:hover){transform:none}.ig-12__card:hover{transform:none}}
```

### 13. CSS 3D Cube Image Viewer

**Type:** CSS + JS
**Description:** A CSS 3D cube with six faces each showing an iconic world bridge illustration — buttons rotate the cube to any face via JS-applied transforms.

**HTML:**
```html
<div class="ig-13">
  <div class="ig-13__viewport">
    <div class="ig-13__cube" id="ig-13-cube">

      <!-- Front: Golden Gate Bridge -->
      <div class="ig-13__face ig-13__face--front">
        <svg viewBox="0 0 260 260" xmlns="http://www.w3.org/2000/svg">
          <defs><linearGradient id="ggg" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#4488cc"/><stop offset="50%" stop-color="#88aacc"/><stop offset="100%" stop-color="#2a5a7a"/></linearGradient><filter id="ggf"><feGaussianBlur stdDeviation="4"/></filter></defs>
          <rect width="260" height="260" fill="url(#ggg)"/>
          <g filter="url(#ggf)" opacity=".4"><ellipse cx="130" cy="90" rx="100" ry="30" fill="#c8d8e8"/></g>
          <!-- Bay -->
          <path d="M0,185 Q65,172 130,180 Q195,172 260,182 L260,260 L0,260 Z" fill="#1a4a6a"/>
          <!-- Bridge towers -->
          <g fill="#cc3010">
            <rect x="70" y="80" width="14" height="110"/><rect x="176" y="80" width="14" height="110"/>
            <!-- Tower details -->
            <rect x="66" y="80" width="22" height="10"/><rect x="172" y="80" width="22" height="10"/>
            <rect x="66" y="100" width="22" height="8"/><rect x="172" y="100" width="22" height="8"/>
            <rect x="66" y="120" width="22" height="8"/><rect x="172" y="120" width="22" height="8"/>
            <!-- Tops -->
            <rect x="74" y="72" width="6" height="12"/><rect x="180" y="72" width="6" height="12"/>
          </g>
          <!-- Main cables -->
          <g stroke="#cc3010" stroke-width="4" fill="none">
            <path d="M0,145 Q77,105 130,130 Q183,105 260,130"/>
            <path d="M0,150 Q77,110 130,135 Q183,110 260,135"/>
          </g>
          <!-- Hanger cables -->
          <g stroke="#cc3010" stroke-width="1" fill="none" opacity=".7">
            <line x1="20" y1="148" x2="20" y2="178"/><line x1="40" y1="138" x2="40" y2="178"/>
            <line x1="60" y1="132" x2="60" y2="178"/><line x1="100" y1="125" x2="100" y2="178"/>
            <line x1="120" y1="125" x2="120" y2="178"/><line x1="140" y1="125" x2="140" y2="178"/>
            <line x1="160" y1="126" x2="160" y2="178"/><line x1="200" y1="130" x2="200" y2="178"/>
            <line x1="220" y1="136" x2="220" y2="178"/><line x1="240" y1="142" x2="240" y2="178"/>
          </g>
          <!-- Deck -->
          <rect x="0" y="178" width="260" height="8" fill="#aa2808"/>
          <!-- Hills bg -->
          <g fill="#1a3a1a" opacity=".5"><polygon points="0,185 0,160 45,140 90,160 90,185"/><polygon points="170,185 170,158 215,138 260,158 260,185"/></g>
          <!-- Fog wisps -->
          <g opacity=".3" fill="#c8d8e8" filter="url(#ggf)"><ellipse cx="40" cy="160" rx="50" ry="18"/><ellipse cx="215" cy="155" rx="45" ry="16"/></g>
        </svg>
      </div>

      <!-- Right: Sydney Harbour Bridge -->
      <div class="ig-13__face ig-13__face--right">
        <svg viewBox="0 0 260 260" xmlns="http://www.w3.org/2000/svg">
          <defs><linearGradient id="shg" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#1a3a5c"/><stop offset="50%" stop-color="#2a5a80"/><stop offset="100%" stop-color="#1a3050"/></linearGradient></defs>
          <rect width="260" height="260" fill="url(#shg)"/>
          <!-- Harbour water -->
          <path d="M0,190 Q65,178 130,185 Q195,178 260,188 L260,260 L0,260 Z" fill="#1a3a5a"/>
          <!-- Sydney Opera House in bg -->
          <g fill="#d8d0c8" opacity=".7">
            <path d="M10,190 Q30,160 50,185 Z"/><path d="M22,190 Q45,155 68,185 Z"/>
            <path d="M55,190 Q72,165 90,185 Z"/>
          </g>
          <!-- Bridge arch -->
          <path d="M30,195 Q130,40 230,195" stroke="#555566" stroke-width="22" fill="none"/>
          <path d="M30,195 Q130,45 230,195" stroke="#888898" stroke-width="8" fill="none"/>
          <!-- Pylons -->
          <g fill="#3a3a4a"><rect x="22" y="160" width="18" height="40"/><rect x="220" y="160" width="18" height="40"/><rect x="18" y="157" width="26" height="10" rx="2"/><rect x="216" y="157" width="26" height="10" rx="2"/></g>
          <!-- Hanger rods -->
          <g stroke="#555566" stroke-width="1.5" fill="none">
            <line x1="50" y1="152" x2="50" y2="190"/><line x1="70" y1="120" x2="70" y2="190"/>
            <line x1="90" y1="100" x2="90" y2="190"/><line x1="110" y1="88" x2="110" y2="190"/>
            <line x1="130" y1="82" x2="130" y2="190"/><line x1="150" y1="88" x2="150" y2="190"/>
            <line x1="170" y1="100" x2="170" y2="190"/><line x1="190" y1="120" x2="190" y2="190"/>
            <line x1="210" y1="152" x2="210" y2="190"/>
          </g>
          <!-- Bridge deck -->
          <rect x="25" y="185" width="210" height="10" fill="#4a4a5a"/>
          <!-- City skyline -->
          <g fill="#1a2a3a"><rect x="120" y="155" width="25" height="35"/><rect x="148" y="148" width="20" height="42"/><rect x="170" y="158" width="18" height="32"/><rect x="190" y="152" width="22" height="38"/><rect x="215" y="160" width="15" height="30"/></g>
          <!-- Stars -->
          <g fill="#fff" opacity=".6"><circle cx="25" cy="20" r="1"/><circle cx="70" cy="8" r="1.1"/><circle cx="120" cy="15" r=".9"/><circle cx="185" cy="8" r="1"/><circle cx="235" cy="20" r=".9"/></g>
          <!-- Fireworks glow -->
          <circle cx="130" cy="55" r="30" fill="#ff4020" opacity=".08"/>
        </svg>
      </div>

      <!-- Back: Tower Bridge -->
      <div class="ig-13__face ig-13__face--back">
        <svg viewBox="0 0 260 260" xmlns="http://www.w3.org/2000/svg">
          <defs><linearGradient id="tbg" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#c8d8e8"/><stop offset="40%" stop-color="#a0b8cc"/><stop offset="100%" stop-color="#3a5a6a"/></linearGradient><filter id="tbf"><feGaussianBlur stdDeviation="4"/></filter></defs>
          <rect width="260" height="260" fill="url(#tbg)"/>
          <!-- Overcast fog -->
          <g filter="url(#tbf)" opacity=".5"><ellipse cx="80" cy="50" rx="80" ry="30" fill="#d0dce8"/><ellipse cx="190" cy="40" rx="70" ry="25" fill="#c8d8e8"/></g>
          <!-- Thames river -->
          <path d="M0,195 Q65,183 130,190 Q195,183 260,192 L260,260 L0,260 Z" fill="#3a5a70"/>
          <!-- Victorian towers -->
          <g fill="#5a4a30">
            <!-- Left tower -->
            <rect x="60" y="120" width="34" height="80"/>
            <rect x="55" y="118" width="44" height="12"/>
            <!-- Tower turrets -->
            <rect x="58" y="90" width="10" height="32"/><rect x="76" y="90" width="10" height="32"/>
            <polygon points="55,90 63,72 71,90"/><polygon points="73,90 81,72 89,90"/>
            <!-- Windows -->
            <g fill="#6888aa" opacity=".7"><rect x="63" y="128" width="8" height="12" rx="2"/><rect x="75" y="128" width="8" height="12" rx="2"/><rect x="63" y="148" width="8" height="12" rx="2"/><rect x="75" y="148" width="8" height="12" rx="2"/></g>
          </g>
          <g fill="#5a4a30">
            <!-- Right tower -->
            <rect x="166" y="120" width="34" height="80"/>
            <rect x="161" y="118" width="44" height="12"/>
            <rect x="164" y="90" width="10" height="32"/><rect x="182" y="90" width="10" height="32"/>
            <polygon points="161,90 169,72 177,90"/><polygon points="179,90 187,72 195,90"/>
            <g fill="#6888aa" opacity=".7"><rect x="169" y="128" width="8" height="12" rx="2"/><rect x="181" y="128" width="8" height="12" rx="2"/><rect x="169" y="148" width="8" height="12" rx="2"/><rect x="181" y="148" width="8" height="12" rx="2"/></g>
          </g>
          <!-- High walkway -->
          <rect x="70" y="108" width="120" height="8" fill="#6a5a40"/>
          <!-- Bridge deck with bascules -->
          <rect x="0" y="185" width="60" height="10" fill="#5a4a30"/>
          <rect x="200" y="185" width="60" height="10" fill="#5a4a30"/>
          <!-- Open bascules (raised) -->
          <path d="M60,190 Q72,170 80,140 L94,195" fill="#6a5a40" opacity=".9"/>
          <path d="M200,190 Q188,170 180,140 L166,195" fill="#6a5a40" opacity=".9"/>
          <!-- Suspension cables -->
          <g stroke="#6a5a40" stroke-width="3" fill="none"><path d="M0,178 Q65,165 94,185"/><path d="M260,178 Q195,165 166,185"/></g>
          <!-- City / St Paul's in background -->
          <g fill="#4a4838" opacity=".4"><rect x="100" y="150" width="60" height="45"/><polygon points="95,150 130,130 165,150"/><circle cx="130" cy="130" r="12" fill="none" stroke="#4a4838" stroke-width="3" opacity=".4"/></g>
          <!-- River reflections -->
          <g stroke="#6a8898" stroke-width="1" fill="none" opacity=".4"><path d="M0,205 Q65,198 130,203 Q195,198 260,202"/></g>
        </svg>
      </div>

      <!-- Left: Millau Viaduct -->
      <div class="ig-13__face ig-13__face--left">
        <svg viewBox="0 0 260 260" xmlns="http://www.w3.org/2000/svg">
          <defs><linearGradient id="mvg" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#8ab0c8"/><stop offset="40%" stop-color="#b0c8d8"/><stop offset="100%" stop-color="#d0e0e8"/></linearGradient></defs>
          <rect width="260" height="260" fill="url(#mvg)"/>
          <!-- Valley mist -->
          <g opacity=".4"><ellipse cx="130" cy="215" rx="200" ry="55" fill="#d8e8f0"/></g>
          <!-- Mountain cliffs each side -->
          <polygon points="0,260 0,140 55,100 80,160 80,260" fill="#6a7a6a"/>
          <polygon points="260,260 260,135 205,95 180,155 180,260" fill="#6a7a6a"/>
          <!-- Valley -->
          <path d="M75,230 Q130,215 185,230 L185,260 L75,260 Z" fill="#3a5a3a" opacity=".5"/>
          <!-- Mast towers -->
          <g fill="#bbbbc0">
            <!-- 7 masts -->
            <rect x="30" y="130" width="6" height="80"/><line x1="33" y1="100" x2="33" y2="135" stroke="#bbbbc0" stroke-width="6"/>
            <rect x="65" y="118" width="6" height="82"/><line x1="68" y1="88" x2="68" y2="122" stroke="#bbbbc0" stroke-width="6"/>
            <rect x="100" y="108" width="6" height="82"/><line x1="103" y1="78" x2="103" y2="112" stroke="#bbbbc0" stroke-width="6"/>
            <rect x="127" y="105" width="6" height="80"/><line x1="130" y1="75" x2="130" y2="109" stroke="#bbbbc0" stroke-width="6"/>
            <rect x="154" y="108" width="6" height="82"/><line x1="157" y1="78" x2="157" y2="112" stroke="#bbbbc0" stroke-width="6"/>
            <rect x="189" y="118" width="6" height="82"/><line x1="192" y1="88" x2="192" y2="122" stroke="#bbbbc0" stroke-width="6"/>
            <rect x="224" y="130" width="6" height="80"/><line x1="227" y1="100" x2="227" y2="135" stroke="#bbbbc0" stroke-width="6"/>
          </g>
          <!-- Stay cables from mast tops -->
          <g stroke="#aaaaaf" stroke-width="1" fill="none" opacity=".7">
            <path d="M33,100 Q50,155 65,160"/><path d="M33,100 Q18,155 10,165"/>
            <path d="M68,88 Q84,148 100,158"/><path d="M68,88 Q52,148 40,158"/>
            <path d="M130,75 Q115,148 100,160"/><path d="M130,75 Q145,148 160,160"/>
            <path d="M192,88 Q176,148 160,158"/><path d="M192,88 Q208,148 220,158"/>
            <path d="M227,100 Q210,155 195,160"/><path d="M227,100 Q242,155 250,165"/>
          </g>
          <!-- Deck -->
          <rect x="8" y="160" width="244" height="8" fill="#b0b8be"/>
          <!-- Pier legs taper down into mist -->
          <g stroke="#bbbbc0" stroke-width="8" fill="none" opacity=".6">
            <line x1="33" y1="167" x2="33" y2="230"/><line x1="68" y1="167" x2="68" y2="225"/>
            <line x1="103" y1="167" x2="103" y2="220"/><line x1="130" y1="167" x2="130" y2="218"/>
            <line x1="157" y1="167" x2="157" y2="220"/><line x1="192" y1="167" x2="192" y2="225"/>
            <line x1="227" y1="167" x2="227" y2="230"/>
          </g>
          <!-- Clouds in valley -->
          <g fill="#e8f0f8" opacity=".5"><ellipse cx="80" cy="218" rx="55" ry="22"/><ellipse cx="180" cy="215" rx="50" ry="20"/></g>
        </svg>
      </div>

      <!-- Top: Rialto Bridge -->
      <div class="ig-13__face ig-13__face--top">
        <svg viewBox="0 0 260 260" xmlns="http://www.w3.org/2000/svg">
          <defs><linearGradient id="rbg" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#6aaad4"/><stop offset="50%" stop-color="#88c4e8"/><stop offset="100%" stop-color="#4488b0"/></linearGradient></defs>
          <rect width="260" height="260" fill="url(#rbg)"/>
          <!-- Venetian canal -->
          <!-- Buildings flanking canal -->
          <g fill="#c8a870"><rect x="0" y="60" width="65" height="200"/><rect x="195" y="55" width="65" height="205"/></g>
          <g fill="#b89858"><rect x="0" y="60" width="65" height="12"/><rect x="195" y="55" width="65" height="12"/></g>
          <!-- Windows -->
          <g fill="#6888aa" opacity=".7"><rect x="8" y="75" width="10" height="14" rx="2"/><rect x="24" y="75" width="10" height="14" rx="2"/><rect x="40" y="75" width="10" height="14" rx="2"/><rect x="8" y="100" width="10" height="14" rx="2"/><rect x="24" y="100" width="10" height="14" rx="2"/><rect x="205" y="70" width="10" height="14" rx="2"/><rect x="220" y="70" width="10" height="14" rx="2"/><rect x="238" y="70" width="10" height="14" rx="2"/></g>
          <!-- Canal water -->
          <rect x="65" y="0" width="130" height="260" fill="#4488aa"/>
          <!-- Canal reflections -->
          <g stroke="#5599bb" stroke-width="1" fill="none" opacity=".4"><path d="M65,80 Q130,72 195,80"/><path d="M65,110 Q130,103 195,110"/><path d="M65,140 Q130,133 195,140"/><path d="M65,170 Q130,163 195,170"/></g>
          <!-- Rialto bridge arch -->
          <g fill="#d4b080">
            <path d="M65,140 Q95,90 130,75 Q165,90 195,140 L195,155 Q165,105 130,90 Q95,105 65,155 Z"/>
            <rect x="65" y="155" width="130" height="12"/>
          </g>
          <!-- Bridge arcade shops -->
          <g fill="#8a6030">
            <rect x="80" y="100" width="12" height="35" rx="2"/><rect x="96" y="95" width="12" height="40" rx="2"/>
            <rect x="112" y="92" width="12" height="42" rx="2"/><rect x="128" y="91" width="12" height="42" rx="2"/>
            <rect x="144" y="92" width="12" height="40" rx="2"/><rect x="160" y="95" width="12" height="38" rx="2"/>
          </g>
          <!-- Center arch opening -->
          <path d="M107,100 Q130,80 153,100 L153,145 L107,145 Z" fill="#4488aa" opacity=".8"/>
          <!-- Gondola beneath -->
          <g transform="translate(130,210)">
            <path d="M-20,0 Q-15,-5 0,-4 Q15,-5 22,0 Q18,6 -18,6 Z" fill="#0a0a0a"/>
            <rect x="-2" y="-12" width="3" height="12" fill="#6a4020"/>
          </g>
        </svg>
      </div>

      <!-- Bottom: Brooklyn Bridge -->
      <div class="ig-13__face ig-13__face--bottom">
        <svg viewBox="0 0 260 260" xmlns="http://www.w3.org/2000/svg">
          <defs><linearGradient id="bbg" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#1a2a4a"/><stop offset="50%" stop-color="#2a4060"/><stop offset="100%" stop-color="#1a2a3a"/></linearGradient></defs>
          <rect width="260" height="260" fill="url(#bbg)"/>
          <!-- City lights distant -->
          <g fill="#ffd060" opacity=".6"><rect x="5" y="185" width="4" height="6"/><rect x="14" y="180" width="4" height="8"/><rect x="22" y="183" width="4" height="5"/><rect x="220" y="180" width="4" height="8"/><rect x="230" y="184" width="4" height="6"/><rect x="240" y="178" width="4" height="10"/><rect x="250" y="182" width="4" height="7"/></g>
          <!-- East River -->
          <path d="M0,195 Q65,183 130,190 Q195,183 260,192 L260,260 L0,260 Z" fill="#141e30"/>
          <g stroke="#1e3040" stroke-width="1.5" fill="none" opacity=".5"><path d="M0,210 Q65,202 130,207 Q195,202 260,206"/></g>
          <!-- Gothic towers -->
          <g fill="#8a7050">
            <!-- Left tower -->
            <rect x="72" y="100" width="36" height="100"/>
            <rect x="69" y="98" width="42" height="12"/>
            <!-- Gothic arches at top -->
            <path d="M72,98 Q90,78 108,98" fill="#7a6040"/>
            <path d="M75,98 Q90,81 105,98" fill="none" stroke="#6a5030" stroke-width="2"/>
            <!-- Windows -->
            <g fill="#3a5070" opacity=".8"><path d="M78,110 Q85,100 92,110 L92,128 L78,128 Z"/><path d="M96,112 Q103,102 110,112 L110,128 L96,128 Z"/></g>
            <!-- Right tower -->
            <rect x="152" y="100" width="36" height="100"/>
            <rect x="149" y="98" width="42" height="12"/>
            <path d="M152,98 Q170,78 188,98" fill="#7a6040"/>
            <path d="M155,98 Q170,81 185,98" fill="none" stroke="#6a5030" stroke-width="2"/>
            <g fill="#3a5070" opacity=".8"><path d="M158,110 Q165,100 172,110 L172,128 L158,128 Z"/><path d="M176,112 Q183,102 190,112 L190,128 L176,128 Z"/></g>
          </g>
          <!-- Main cables -->
          <g stroke="#8a7050" stroke-width="5" fill="none"><path d="M0,158 Q90,118 130,140 Q170,118 260,145"/></g>
          <!-- Suspender cables fan -->
          <g stroke="#6a5840" stroke-width="1.2" fill="none" opacity=".7">
            <line x1="90" y1="118" x2="40" y2="190"/><line x1="90" y1="118" x2="58" y2="190"/><line x1="90" y1="118" x2="76" y2="190"/><line x1="90" y1="118" x2="95" y2="190"/>
            <line x1="170" y1="118" x2="165" y2="190"/><line x1="170" y1="118" x2="184" y2="190"/><line x1="170" y1="118" x2="202" y2="190"/><line x1="170" y1="118" x2="220" y2="190"/>
            <line x1="130" y1="128" x2="112" y2="190"/><line x1="130" y1="128" x2="130" y2="190"/><line x1="130" y1="128" x2="148" y2="190"/>
          </g>
          <!-- Road deck -->
          <rect x="0" y="190" width="260" height="8" fill="#5a5040"/>
          <!-- Stars -->
          <g fill="#fff" opacity=".6"><circle cx="20" cy="25" r="1"/><circle cx="60" cy="15" r="1.1"/><circle cx="105" cy="28" r=".9"/><circle cx="165" cy="18" r="1"/><circle cx="215" cy="25" r=".9"/><circle cx="248" cy="12" r="1.1"/></g>
          <!-- Water taxi -->
          <g transform="translate(60,222)">
            <rect x="-18" y="-5" width="36" height="10" rx="4" fill="#cc2020"/>
            <rect x="-8" y="-12" width="18" height="8" rx="2" fill="#aa1818"/>
          </g>
        </svg>
      </div>

    </div>
  </div>

  <div class="ig-13__controls" id="ig-13-controls">
    <button class="ig-13__btn ig-13--active" data-y="0" data-x="-10">Front</button>
    <button class="ig-13__btn" data-y="90" data-x="-10">Right</button>
    <button class="ig-13__btn" data-y="180" data-x="-10">Back</button>
    <button class="ig-13__btn" data-y="-90" data-x="-10">Left</button>
    <button class="ig-13__btn" data-y="0" data-x="-90">Top</button>
    <button class="ig-13__btn" data-y="0" data-x="90">Bottom</button>
  </div>
  <p class="ig-13__label">6 iconic bridges of the world</p>
</div>
<script>
(function(){
  const cube=document.getElementById('ig-13-cube');
  const btns=document.querySelectorAll('#ig-13-controls .ig-13__btn');
  if(!cube)return;
  btns.forEach(btn=>{
    btn.addEventListener('click',()=>{
      btns.forEach(b=>b.classList.remove('ig-13--active'));
      btn.classList.add('ig-13--active');
      const y=Number(btn.dataset.y)||0;
      const x=Number(btn.dataset.x)||-10;
      cube.style.transform=`rotateX(${x}deg) rotateY(${y}deg)`;
    });
  });
}());
</script>
```

**CSS:**
```css
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
body{background:#0a0c10;font-family:'DM Sans',sans-serif;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;gap:2rem;padding:2rem}
.ig-13{display:flex;flex-direction:column;align-items:center;gap:1.8rem}
.ig-13__viewport{perspective:900px;width:260px;height:260px}
.ig-13__cube{width:100%;height:100%;position:relative;transform-style:preserve-3d;transform:rotateX(-10deg) rotateY(0deg);transition:transform .65s cubic-bezier(.25,.46,.45,.94)}
.ig-13__face{position:absolute;width:100%;height:100%;backface-visibility:hidden;border-radius:8px;overflow:hidden;border:2px solid rgba(255,255,255,.12)}
.ig-13__face svg{width:100%;height:100%;display:block}
.ig-13__face--front {transform:translateZ(130px)}
.ig-13__face--back  {transform:rotateY(180deg) translateZ(130px)}
.ig-13__face--right {transform:rotateY(90deg)  translateZ(130px)}
.ig-13__face--left  {transform:rotateY(-90deg) translateZ(130px)}
.ig-13__face--top   {transform:rotateX(90deg)  translateZ(130px)}
.ig-13__face--bottom{transform:rotateX(-90deg) translateZ(130px)}
.ig-13__controls{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:center}
.ig-13__btn{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);color:rgba(255,255,255,.75);font-size:.72rem;font-weight:600;letter-spacing:.08em;padding:.4rem .9rem;border-radius:8px;cursor:pointer;font-family:'DM Sans',sans-serif;transition:background .2s ease,color .2s ease;text-transform:uppercase}
.ig-13__btn:hover{background:rgba(255,255,255,.18);color:#fff}
.ig-13__btn.ig-13--active{background:rgba(255,255,255,.22);color:#fff;border-color:rgba(255,255,255,.4)}
.ig-13__label{color:rgba(255,255,255,.35);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase}
@media(prefers-reduced-motion:reduce){.ig-13__cube{transition:none}}
```

**JS:**
```js
(function(){
  const cube=document.getElementById('ig-13-cube');
  const btns=document.querySelectorAll('#ig-13-controls .ig-13__btn');
  if(!cube)return;
  btns.forEach(btn=>{
    btn.addEventListener('click',()=>{
      btns.forEach(b=>b.classList.remove('ig-13--active'));
      btn.classList.add('ig-13--active');
      const y=Number(btn.dataset.y)||0;
      const x=Number(btn.dataset.x)||-10;
      cube.style.transform=`rotateX(${x}deg) rotateY(${y}deg)`;
    });
  });
}());
```

### 14. CSS Scattered Photos Gallery

**Type:** CSS + JS
**Description:** Six vintage postcards scattered with random CSS rotations on a cork-board surface — hover zooms them in, click brings one to front.

**HTML:**
```html
<div class="ig-14" id="ig-14-board">

  <!-- Postcard 1: Rome — Colosseum golden hour -->
  <div class="ig-14__photo" style="width:190px;left:28px;top:40px;transform:rotate(-8deg);z-index:3">
    <div class="ig-14__tape"></div>
    <svg viewBox="0 0 170 130" xmlns="http://www.w3.org/2000/svg">
      <defs><linearGradient id="rmg" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#ff8c40"/><stop offset="50%" stop-color="#d06018"/><stop offset="100%" stop-color="#8a3808"/></linearGradient></defs>
      <rect width="170" height="130" fill="url(#rmg)"/>
      <circle cx="85" cy="48" r="28" fill="#ffe080" opacity=".85"/>
      <!-- Colosseum ellipse form -->
      <ellipse cx="85" cy="88" rx="65" ry="36" fill="#b87030" opacity=".95"/>
      <ellipse cx="85" cy="78" rx="63" ry="34" fill="#c88040"/>
      <!-- Arcade arches -->
      <g fill="#a06028">
        <path d="M25,100 Q32,88 39,100"/><path d="M42,100 Q49,88 56,100"/>
        <path d="M59,98 Q66,86 73,98"/><path d="M76,97 Q83,85 90,97"/>
        <path d="M93,97 Q100,85 107,97"/><path d="M110,98 Q117,86 124,98"/>
        <path d="M127,100 Q134,88 141,100"/>
      </g>
      <g fill="#b87030" opacity=".6">
        <path d="M28,90 Q33,82 38,90"/><path d="M45,88 Q50,80 55,88"/>
        <path d="M62,87 Q67,79 72,87"/><path d="M79,86 Q84,78 89,86"/>
        <path d="M96,86 Q101,78 106,86"/><path d="M113,87 Q118,79 123,87"/>
        <path d="M130,90 Q135,82 140,90"/>
      </g>
      <!-- Ground shadow -->
      <path d="M20,108 Q85,98 150,108 L150,130 L20,130 Z" fill="#6a2808" opacity=".5"/>
      <!-- Pine tree -->
      <g fill="#0a2005"><rect x="148" y="88" width="5" height="42"/><ellipse cx="150" cy="84" rx="12" ry="18"/><ellipse cx="150" cy="74" rx="9" ry="12"/></g>
    </svg>
    <div class="ig-14__caption">Roma, 1994<br><small style="font-size:.8rem;color:#8a7a68">Grazie mille!</small></div>
  </div>

  <!-- Postcard 2: Paris — Eiffel Tower at dusk -->
  <div class="ig-14__photo" style="width:185px;left:195px;top:18px;transform:rotate(5deg);z-index:5">
    <div class="ig-14__tape"></div>
    <svg viewBox="0 0 165 125" xmlns="http://www.w3.org/2000/svg">
      <defs><linearGradient id="psg" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#1a0a2e"/><stop offset="40%" stop-color="#5a1a60"/><stop offset="70%" stop-color="#c04050"/><stop offset="100%" stop-color="#f07858"/></linearGradient></defs>
      <rect width="165" height="125" fill="url(#psg)"/>
      <!-- Seine river dark strip -->
      <path d="M0,100 Q82,92 165,98 L165,125 L0,125 Z" fill="#1a2a4a"/>
      <!-- Eiffel tower silhouette -->
      <g fill="#0a0518">
        <!-- Leg 1 left -->
        <polygon points="55,125 62,80 75,80 70,125"/>
        <!-- Leg 2 right -->
        <polygon points="95,125 90,80 103,80 110,125"/>
        <!-- Platform 1 (lower) -->
        <rect x="52" y="80" width="61" height="7" rx="1"/>
        <!-- Body mid -->
        <polygon points="62,80 68,50 97,50 103,80"/>
        <!-- Platform 2 (upper) -->
        <rect x="60" y="50" width="45" height="6" rx="1"/>
        <!-- Tapered shaft -->
        <polygon points="68,50 73,25 92,25 97,50"/>
        <!-- Top -->
        <polygon points="73,25 80,8 85,8 92,25"/>
        <rect x="80" y="0" width="5" height="10"/>
      </g>
      <!-- Light spark at top -->
      <circle cx="82" cy="4" r="3" fill="#fff8a0" opacity=".9"/>
      <!-- City silhouette bg -->
      <g fill="#0a0518" opacity=".6">
        <rect x="0" y="95" width="40" height="30"/><rect x="125" y="90" width="40" height="35"/>
        <rect x="0" y="85" width="20" height="15"/><rect x="8" y="78" width="10" height="8"/>
      </g>
      <!-- Bridge reflection in Seine -->
      <rect x="60" y="100" width="45" height="25" fill="#0a0518" opacity=".2"/>
    </svg>
    <div class="ig-14__caption">Paris, 1997<br><small style="font-size:.8rem;color:#8a7a68">Magnifique!</small></div>
  </div>

  <!-- Postcard 3: New York — Manhattan skyline night -->
  <div class="ig-14__photo" style="width:200px;left:355px;top:30px;transform:rotate(-4deg);z-index:4">
    <div class="ig-14__tape"></div>
    <svg viewBox="0 0 180 135" xmlns="http://www.w3.org/2000/svg">
      <defs><linearGradient id="nyg" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#0a0c1a"/><stop offset="50%" stop-color="#0f1228"/><stop offset="100%" stop-color="#1a1a2a"/></linearGradient></defs>
      <rect width="180" height="135" fill="url(#nyg)"/>
      <!-- Hudson River -->
      <rect x="0" y="108" width="180" height="27" fill="#080e18"/>
      <!-- Manhattan skyline silhouette -->
      <g fill="#121528">
        <rect x="0" y="60" width="16" height="75"/><rect x="14" y="45" width="14" height="90"/>
        <rect x="26" y="55" width="12" height="80"/><rect x="36" y="38" width="18" height="97"/>
        <!-- Empire State -->
        <rect x="52" y="30" width="16" height="105"/>
        <rect x="55" y="18" width="10" height="16"/>
        <rect x="57" y="8" width="6" height="12"/>
        <rect x="59" y="0" width="2" height="10"/>
        <rect x="66" y="40" width="14" height="95"/>
        <rect x="78" y="50" width="16" height="85"/>
        <!-- Chrysler -->
        <rect x="92" y="32" width="14" height="103"/>
        <path d="M92,32 Q99,16 106,32" fill="#121528"/>
        <rect x="97" y="8" width="4" height="10"/>
        <rect x="108" y="45" width="14" height="90"/>
        <rect x="120" y="38" width="18" height="97"/>
        <rect x="136" y="52" width="12" height="83"/>
        <rect x="146" y="42" width="16" height="93"/>
        <rect x="160" y="55" width="14" height="80"/>
        <rect x="172" y="60" width="8" height="75"/>
      </g>
      <!-- Window lights warm -->
      <g fill="#ffd060" opacity=".7">
        <rect x="2" y="64" width="4" height="4"/><rect x="8" y="64" width="4" height="4"/><rect x="2" y="74" width="4" height="4"/>
        <rect x="16" y="50" width="4" height="4"/><rect x="23" y="50" width="4" height="4"/><rect x="16" y="60" width="4" height="4"/>
        <rect x="38" y="42" width="5" height="4"/><rect x="46" y="42" width="5" height="4"/>
        <rect x="54" y="34" width="4" height="4"/><rect x="60" y="34" width="4" height="4"/><rect x="54" y="44" width="4" height="4"/>
        <rect x="68" y="44" width="4" height="4"/><rect x="74" y="44" width="4" height="4"/>
        <rect x="94" y="38" width="4" height="4"/><rect x="100" y="38" width="4" height="4"/>
        <rect x="110" y="48" width="4" height="4"/><rect x="116" y="48" width="5" height="4"/>
        <rect x="122" y="42" width="5" height="4"/><rect x="130" y="42" width="5" height="4"/>
        <rect x="148" y="46" width="4" height="4"/><rect x="154" y="46" width="4" height="4"/>
        <rect x="162" y="58" width="4" height="4"/><rect x="168" y="58" width="4" height="4"/>
      </g>
      <!-- Stars -->
      <g fill="#fff" opacity=".5"><circle cx="15" cy="8" r=".8"/><circle cx="50" cy="4" r="1"/><circle cx="130" cy="6" r=".9"/><circle cx="170" cy="10" r=".8"/></g>
      <!-- Water reflection -->
      <g fill="#ffd060" opacity=".2"><rect x="54" y="110" width="4" height="8"/><rect x="94" y="112" width="4" height="6"/></g>
    </svg>
    <div class="ig-14__caption">New York, 2001<br><small style="font-size:.8rem;color:#8a7a68">The city that never sleeps</small></div>
  </div>

  <!-- Postcard 4: Tokyo — Shibuya crossing day -->
  <div class="ig-14__photo" style="width:195px;left:60px;top:230px;transform:rotate(6deg);z-index:6">
    <div class="ig-14__tape"></div>
    <svg viewBox="0 0 175 130" xmlns="http://www.w3.org/2000/svg">
      <defs><linearGradient id="tjg" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#c8d8e8"/><stop offset="60%" stop-color="#e8f0f8"/><stop offset="100%" stop-color="#b0c0d0"/></linearGradient></defs>
      <rect width="175" height="130" fill="url(#tjg)"/>
      <!-- Overhead: looking down at crossing -->
      <!-- Road black base -->
      <rect x="0" y="0" width="175" height="130" fill="#2a2a2a"/>
      <!-- Sidewalk corners -->
      <g fill="#aaaaaa">
        <rect x="0" y="0" width="50" height="45"/>
        <rect x="125" y="0" width="50" height="45"/>
        <rect x="0" y="85" width="50" height="45"/>
        <rect x="125" y="85" width="50" height="45"/>
      </g>
      <!-- Zebra crossing stripes horizontal -->
      <g fill="#f5f5f5" opacity=".8">
        <rect x="50" y="5" width="75" height="8" rx="1"/>
        <rect x="50" y="17" width="75" height="8" rx="1"/>
        <rect x="50" y="29" width="75" height="8" rx="1"/>
        <rect x="50" y="41" width="75" height="8" rx="1"/>
        <!-- Vertical crossing -->
        <rect x="5" y="45" width="8" height="40" rx="1"/>
        <rect x="17" y="45" width="8" height="40" rx="1"/>
        <rect x="29" y="45" width="8" height="40" rx="1"/>
        <rect x="41" y="45" width="8" height="40" rx="1"/>
        <rect x="126" y="45" width="8" height="40" rx="1"/>
        <rect x="138" y="45" width="8" height="40" rx="1"/>
        <rect x="150" y="45" width="8" height="40" rx="1"/>
        <rect x="162" y="45" width="8" height="40" rx="1"/>
        <!-- Bottom horizontal -->
        <rect x="50" y="85" width="75" height="8" rx="1"/>
        <rect x="50" y="97" width="75" height="8" rx="1"/>
        <rect x="50" y="109" width="75" height="8" rx="1"/>
        <rect x="50" y="121" width="75" height="8" rx="1"/>
      </g>
      <!-- People dots on crossings (aerial view) -->
      <g fill="#ff4444" opacity=".8"><circle cx="60" cy="22" r="3"/><circle cx="78" cy="15" r="3"/><circle cx="95" cy="28" r="3"/><circle cx="110" cy="12" r="3"/><circle cx="68" cy="38" r="3"/><circle cx="90" cy="35" r="3"/><circle cx="118" cy="30" r="3"/></g>
      <g fill="#4444ff" opacity=".7"><circle cx="65" cy="92" r="3"/><circle cx="85" cy="100" r="3"/><circle cx="105" cy="88" r="3"/><circle cx="120" cy="95" r="3"/></g>
      <g fill="#44aa44" opacity=".7"><circle cx="18" cy="55" r="3"/><circle cx="26" cy="70" r="3"/><circle cx="12" cy="75" r="3"/><circle cx="35" cy="62" r="3"/></g>
      <g fill="#ffaa00" opacity=".8"><circle cx="138" cy="58" r="3"/><circle cx="150" cy="70" r="3"/><circle cx="160" cy="55" r="3"/><circle cx="168" cy="78" r="3"/></g>
      <!-- Traffic signal circles -->
      <g fill="#ff4020" opacity=".9"><circle cx="55" cy="47" r="4"/><circle cx="120" cy="47" r="4"/><circle cx="55" cy="83" r="4"/><circle cx="120" cy="83" r="4"/></g>
      <!-- Building corner shops -->
      <g fill="#888888" opacity=".4">
        <rect x="2" y="2" width="46" height="41"/><rect x="127" y="2" width="46" height="41"/>
        <rect x="2" y="87" width="46" height="41"/><rect x="127" y="87" width="46" height="41"/>
      </g>
    </svg>
    <div class="ig-14__caption">Tokyo, 2003<br><small style="font-size:.8rem;color:#8a7a68">Shibuya scramble</small></div>
  </div>

  <!-- Postcard 5: Cairo — Pyramids + camel -->
  <div class="ig-14__photo" style="width:200px;left:255px;top:215px;transform:rotate(-5deg);z-index:2">
    <div class="ig-14__tape"></div>
    <svg viewBox="0 0 180 135" xmlns="http://www.w3.org/2000/svg">
      <defs><linearGradient id="cag" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#e8c870"/><stop offset="40%" stop-color="#d4a840"/><stop offset="100%" stop-color="#8a5010"/></linearGradient></defs>
      <rect width="180" height="135" fill="url(#cag)"/>
      <!-- Hot sky -->
      <rect width="180" height="60" fill="#e8d898" opacity=".3"/>
      <!-- Sun white-hot -->
      <circle cx="145" cy="22" r="16" fill="#fff5c0" opacity=".9"/>
      <circle cx="145" cy="22" r="12" fill="#fffce0"/>
      <!-- Desert horizon shimmer -->
      <path d="M0,80 Q45,72 90,78 Q135,72 180,76 L180,90 L0,90 Z" fill="#c09030" opacity=".4"/>
      <!-- Great Pyramid (largest) -->
      <polygon points="10,135 75,45 140,135" fill="#c89040"/>
      <polygon points="10,135 75,45 140,135" fill="#b07828" opacity=".3"/>
      <!-- Pyramid 2 (mid) -->
      <polygon points="90,135 142,58 195,135" fill="#c09030"/>
      <!-- Pyramid 3 (small, left) -->
      <polygon points="0,120 32,80 65,120" fill="#d4a840" opacity=".8"/>
      <!-- Sphinx body (silhouette) -->
      <g fill="#8a5018" transform="translate(80,108)">
        <ellipse cx="0" cy="0" rx="22" ry="10"/>
        <rect x="-12" y="-18" width="12" height="20"/>
        <ellipse cx="-6" cy="-22" rx="12" ry="14"/>
        <rect x="-14" y="-12" width="4" height="16" rx="2"/>
        <!-- Headdress -->
        <path d="M-18,-22 Q-6,-38 6,-22 L4,-16 Q-6,-28 -16,-16 Z" fill="#8a5018"/>
        <circle cx="-4" cy="-30" r="3" fill="#7a4010"/>
      </g>
      <!-- Camel with rider -->
      <g fill="#7a3a10" transform="translate(148,105)">
        <ellipse cx="0" cy="0" rx="18" ry="10"/>
        <ellipse cx="4" cy="-8" rx="10" ry="8"/>
        <path d="M-14,-4 Q-18,5 -15,14 Q-10,10 -8,4" fill="#7a3a10"/>
        <path d="M14,-2 Q18,5 16,12 Q12,8 10,2" fill="#7a3a10"/>
        <!-- Rider -->
        <ellipse cx="2" cy="-14" rx="5" ry="6" fill="#5a2808"/>
        <circle cx="2" cy="-21" r="4" fill="#c8a880"/>
        <!-- Turban -->
        <ellipse cx="2" cy="-24" rx="5" ry="3" fill="#e8c040"/>
      </g>
      <!-- Sand dune curve -->
      <path d="M0,118 Q45,108 90,115 Q135,108 180,115 L180,135 L0,135 Z" fill="#b07828" opacity=".5"/>
    </svg>
    <div class="ig-14__caption">Cairo, 2006<br><small style="font-size:.8rem;color:#8a7a68">Land of the pharaohs</small></div>
  </div>

  <!-- Postcard 6: Istanbul — Blue Mosque at dusk -->
  <div class="ig-14__photo" style="width:188px;left:460px;top:225px;transform:rotate(7deg);z-index:7">
    <div class="ig-14__tape"></div>
    <svg viewBox="0 0 168 128" xmlns="http://www.w3.org/2000/svg">
      <defs><linearGradient id="isg" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#1a0830"/><stop offset="35%" stop-color="#4a1850"/><stop offset="65%" stop-color="#9a3858"/><stop offset="100%" stop-color="#d06858"/></linearGradient><filter id="isf"><feGaussianBlur stdDeviation="3"/></filter></defs>
      <rect width="168" height="128" fill="url(#isg)"/>
      <!-- Crescent moon -->
      <circle cx="140" cy="18" r="12" fill="#fff8d0" opacity=".9"/>
      <circle cx="145" cy="15" r="9" fill="#4a1850"/>
      <circle cx="143" cy="13" r="7" fill="#fff8d0" opacity=".9"/>
      <!-- Blue Mosque silhouette -->
      <g fill="#0a0518">
        <!-- Main dome -->
        <ellipse cx="84" cy="58" rx="30" ry="24"/>
        <!-- Semi-domes cascading -->
        <ellipse cx="84" cy="72" rx="36" ry="14"/>
        <ellipse cx="57" cy="72" rx="16" ry="10"/><ellipse cx="111" cy="72" rx="16" ry="10"/>
        <ellipse cx="84" cy="62" rx="28" ry="16"/>
        <!-- Main body -->
        <rect x="48" y="72" width="72" height="56"/>
        <!-- 6 minarets -->
        <rect x="30" y="30" width="7" height="72"/><circle cx="33" cy="28" r="5"/>
        <rect x="41" y="40" width="7" height="60"/><circle cx="44" cy="38" r="4.5"/>
        <rect x="120" y="40" width="7" height="60"/><circle cx="123" cy="38" r="4.5"/>
        <rect x="131" y="30" width="7" height="72"/><circle cx="134" cy="28" r="5"/>
        <!-- Front minarets -->
        <rect x="52" y="45" width="6" height="45"/><circle cx="55" cy="43" r="4"/>
        <rect x="110" y="45" width="6" height="45"/><circle cx="113" cy="43" r="4"/>
        <!-- Minaret tips -->
        <g fill="#0a0518">
          <polygon points="30,28 33,18 36,28"/><polygon points="131,28 134,18 137,28"/>
          <polygon points="41,38 44,29 47,38"/><polygon points="120,38 123,29 126,38"/>
          <polygon points="52,43 55,34 58,43"/><polygon points="110,43 113,34 116,43"/>
        </g>
        <!-- Arched windows -->
        <g fill="#2a1848" opacity=".7">
          <path d="M55,80 Q62,70 69,80 L69,95 L55,95 Z"/>
          <path d="M73,80 Q80,70 87,80 L87,95 L73,95 Z"/>
          <path d="M91,80 Q98,70 105,80 L105,95 L91,95 Z"/>
          <path d="M109,80 Q116,70 123,80 L123,95 L109,95 Z"/>
        </g>
      </g>
      <!-- Reflection in Bosphorus water -->
      <path d="M0,115 Q84,108 168,113 L168,128 L0,128 Z" fill="#1a0828" opacity=".6"/>
      <g fill="#0a0518" opacity=".3" transform="translate(0,235) scale(1,-1)">
        <ellipse cx="84" cy="58" rx="25" ry="18"/>
        <rect x="52" y="72" width="64" height="30"/>
      </g>
      <!-- Stars emerging -->
      <g fill="#fff" opacity=".6"><circle cx="20" cy="10" r=".9"/><circle cx="60" cy="5" r="1"/><circle cx="100" cy="8" r=".8"/></g>
      <!-- Warm ground lights -->
      <ellipse cx="84" cy="125" rx="80" ry="8" fill="#c04828" opacity=".2" filter="url(#isf)"/>
    </svg>
    <div class="ig-14__caption">Istanbul, 2009<br><small style="font-size:.8rem;color:#8a7a68">Where East meets West</small></div>
  </div>

</div>
```

**CSS:**
```css
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
body{background:radial-gradient(ellipse at 30% 70%,#2a1a0a,#0a0805 70%);min-height:100vh;display:flex;align-items:center;justify-content:center;padding:2rem;font-family:'DM Sans',sans-serif}
.ig-14{position:relative;width:min(680px,100%);height:520px}
.ig-14__photo{position:absolute;background:#f5f0e8;padding:10px 10px 42px;box-shadow:0 8px 32px rgba(0,0,0,.55),0 2px 6px rgba(0,0,0,.3);border-radius:2px;cursor:pointer;transition:transform .35s cubic-bezier(.34,1.56,.64,1),box-shadow .3s ease,z-index 0s;will-change:transform}
.ig-14__photo:hover{box-shadow:0 24px 60px rgba(0,0,0,.65);z-index:10}
.ig-14__photo svg{display:block;width:100%;height:auto}
.ig-14__caption{text-align:center;font-family:'Caveat',cursive;font-size:1rem;color:#4a3a28;margin-top:.4rem;line-height:1.2}
.ig-14__tape{position:absolute;top:-12px;left:50%;transform:translateX(-50%);width:38px;height:16px;background:rgba(255,240,200,.55);border-radius:2px}
@media(prefers-reduced-motion:reduce){.ig-14__photo{transition:none}}
```

**JS:**
```js
(function(){
  const root=document.getElementById('ig-14-board');
  if(!root)return;
  const photos=root.querySelectorAll('.ig-14__photo');
  photos.forEach((p,i)=>{
    p.addEventListener('mouseenter',()=>{p.style.transform=p.style.transform.replace(/scale\([^)]*\)/,'')+'scale(1.06)'});
    p.addEventListener('mouseleave',()=>{p.style.transform=p.style.transform.replace(/scale\([^)]*\)/,'')});
    p.addEventListener('click',()=>{
      photos.forEach((x,j)=>{
        const base=parseInt(x.style.zIndex)||j+1;
        x.style.zIndex=j===i?20:base>10?base-1:base;
      });
    });
  });
}());
```

### 15. CSS Ken Burns Slideshow Gallery

**Type:** CSS + JS
**Description:** A six-slide arctic wildlife slideshow with the Ken Burns zoom-pan effect on each active slide, auto-advancing with JS dot navigation and manual controls.

**HTML:**
```html
<div class="ig-15" id="ig-15">

  <!-- Slide 1: Polar bear on sea ice -->
  <div class="ig-15__slide ig-15--active">
    <div class="ig-15__img">
      <svg viewBox="0 0 760 428" xmlns="http://www.w3.org/2000/svg">
        <defs>
          <linearGradient id="pbg" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#2a4060"/><stop offset="40%" stop-color="#3a5878"/><stop offset="70%" stop-color="#4a6888"/><stop offset="100%" stop-color="#1a2a40"/></linearGradient>
          <radialGradient id="pbig" cx="35%" cy="60%" r="50%"><stop offset="0%" stop-color="#d8e8f8"/><stop offset="60%" stop-color="#c0d4e8"/><stop offset="100%" stop-color="#a8c4d8"/></radialGradient>
          <filter id="pbf"><feGaussianBlur stdDeviation="6"/></filter>
          <filter id="pbf2"><feGaussianBlur stdDeviation="2"/></filter>
        </defs>
        <rect width="760" height="428" fill="url(#pbg)"/>
        <!-- Aurora hint -->
        <g opacity=".25" filter="url(#pbf)">
          <path d="M0,100 Q190,55 380,100 Q570,145 760,80" stroke="#00e8a0" stroke-width="40" fill="none"/>
          <path d="M0,130 Q200,82 400,122 Q580,162 760,108" stroke="#6040ff" stroke-width="25" fill="none"/>
        </g>
        <!-- Stars -->
        <g fill="#fff" opacity=".7">
          <circle cx="30" cy="25" r="1.2"/><circle cx="80" cy="12" r="1"/><circle cx="145" cy="30" r="1.3"/><circle cx="220" cy="8" r="1.1"/><circle cx="300" cy="20" r="1.2"/><circle cx="380" cy="5" r="1.4"/><circle cx="460" cy="18" r="1.1"/><circle cx="540" cy="8" r="1.2"/><circle cx="620" cy="25" r="1"/><circle cx="700" cy="12" r="1.3"/><circle cx="745" cy="30" r="1.1"/>
          <circle cx="55" cy="52" r=".9"/><circle cx="130" cy="45" r="1"/><circle cx="200" cy="58" r=".9"/><circle cx="280" cy="42" r="1.1"/><circle cx="420" cy="48" r=".9"/><circle cx="500" cy="38" r="1"/><circle cx="590" cy="52" r=".9"/><circle cx="670" cy="44" r="1.1"/>
        </g>
        <!-- Sea ice floe -->
        <path d="M0,300 Q80,270 160,282 Q240,268 320,278 Q400,265 480,275 Q560,265 640,272 Q700,265 760,270 L760,428 L0,428 Z" fill="url(#pbig)"/>
        <!-- Ice texture / cracks -->
        <g stroke="#88a8c8" stroke-width="1" fill="none" opacity=".4">
          <path d="M80,305 Q100,315 95,330 Q90,342 100,355"/><path d="M200,300 Q220,312 215,328"/><path d="M350,295 Q365,308 360,325 Q355,338 365,352"/><path d="M500,298 Q515,310 510,325"/><path d="M650,302 Q668,316 662,332"/>
        </g>
        <!-- Snow mounds -->
        <g fill="#d0e4f8" opacity=".7" filter="url(#pbf2)">
          <ellipse cx="150" cy="310" rx="80" ry="25"/><ellipse cx="580" cy="305" rx="70" ry="22"/><ellipse cx="380" cy="320" rx="60" ry="20"/>
        </g>
        <!-- Open water lead (dark gap) -->
        <path d="M0,340 Q380,328 760,338 L760,360 Q380,348 0,360 Z" fill="#1a3050" opacity=".5"/>
        <!-- Polar bear (large, detailed) -->
        <g transform="translate(280,295)">
          <!-- Body -->
          <ellipse cx="0" cy="15" rx="65" ry="38" fill="#e8f0f8"/>
          <ellipse cx="5" cy="12" rx="58" ry="32" fill="#f0f8ff" opacity=".8"/>
          <!-- Head -->
          <ellipse cx="-50" cy="5" rx="32" ry="26" fill="#e8f0f8"/>
          <ellipse cx="-55" cy="2" rx="25" ry="20" fill="#f0f8ff" opacity=".8"/>
          <!-- Muzzle -->
          <ellipse cx="-72" cy="10" rx="14" ry="10" fill="#dde8f0"/>
          <!-- Nose -->
          <ellipse cx="-82" cy="8" rx="6" ry="4" fill="#2a2a2a"/>
          <!-- Eyes -->
          <circle cx="-62" cy="-5" r="4" fill="#1a1a1a"/><circle cx="-61" cy="-6" r="1.5" fill="#fff"/>
          <!-- Ears -->
          <ellipse cx="-42" cy="-18" rx="9" ry="7" fill="#e0eaf8"/>
          <ellipse cx="-42" cy="-18" rx="5" ry="4" fill="#d0e0f0"/>
          <!-- Front legs extended (lying pose) -->
          <ellipse cx="-40" cy="46" rx="22" ry="9" fill="#dde8f4" transform="rotate(-15,-40,46)"/>
          <ellipse cx="-20" cy="50" rx="18" ry="8" fill="#dde8f4" transform="rotate(-10,-20,50)"/>
          <!-- Back legs -->
          <ellipse cx="48" cy="46" rx="20" ry="9" fill="#dde8f4" transform="rotate(15,48,46)"/>
          <ellipse cx="65" cy="48" rx="16" ry="8" fill="#dde8f4" transform="rotate(10,65,48)"/>
          <!-- Paw details -->
          <g fill="#c8d8e8"><ellipse cx="-55" cy="52" rx="12" ry="6"/><ellipse cx="62" cy="54" rx="10" ry="5"/></g>
          <!-- Fur texture highlights -->
          <g stroke="#c0d4e8" stroke-width=".8" fill="none" opacity=".4">
            <path d="M-30,5 Q-20,0 -10,5"/><path d="M-10,10 Q0,6 10,10"/><path d="M10,15 Q20,11 30,15"/><path d="M-20,-5 Q-10,-9 0,-5"/>
          </g>
          <!-- Cub behind! -->
          <ellipse cx="55" cy="5" rx="28" ry="20" fill="#e8f0f8"/>
          <ellipse cx="44" cy="0" rx="16" ry="14" fill="#f0f8ff" opacity=".8"/>
          <ellipse cx="38" cy="2" rx="8" ry="7" fill="#dde8f0"/>
          <ellipse cx="32" cy="1" rx="4" ry="3" fill="#2a2a2a"/>
          <circle cx="40" cy="-5" r="2.5" fill="#1a1a1a"/><circle cx="40" cy="-6" r="1" fill="#fff"/>
          <ellipse cx="52" cy="-12" rx="5" ry="4" fill="#e0eaf8"/>
        </g>
        <!-- Distant icebergs -->
        <g fill="#c8dced" opacity=".7">
          <polygon points="600,278 625,248 650,278"/><polygon points="640,280 660,258 680,280"/>
          <polygon points="50,282 75,255 100,282"/><polygon points="100,278 115,262 130,278"/>
        </g>
        <!-- Ice edge sparkle -->
        <g fill="#e8f4ff" opacity=".6" filter="url(#pbf2)">
          <ellipse cx="200" cy="295" rx="30" ry="8"/><ellipse cx="520" cy="292" rx="25" ry="7"/>
        </g>
      </svg>
    </div>
    <div class="ig-15__caption"><h3>Polar Bear & Cub</h3><p>Sea ice, Svalbard Archipelago · Arctic Ocean</p></div>
  </div>

  <!-- Slide 2: Narwhal pod under ice -->
  <div class="ig-15__slide">
    <div class="ig-15__img">
      <svg viewBox="0 0 760 428" xmlns="http://www.w3.org/2000/svg">
        <defs>
          <radialGradient id="nwg" cx="50%" cy="40%" r="60%"><stop offset="0%" stop-color="#1a3a5a"/><stop offset="60%" stop-color="#0a1a30"/><stop offset="100%" stop-color="#040810"/></radialGradient>
          <filter id="nwf"><feGaussianBlur stdDeviation="6"/></filter>
          <filter id="nwf2"><feGaussianBlur stdDeviation="2"/></filter>
        </defs>
        <rect width="760" height="428" fill="url(#nwg)"/>
        <!-- Underside of ice sheet (ceiling) -->
        <path d="M0,0 Q80,25 160,12 Q240,30 320,15 Q400,32 480,18 Q560,34 640,20 Q700,30 760,18 L760,65 L0,65 Z" fill="#b8d4ec" opacity=".9"/>
        <path d="M0,0 Q95,20 190,8 Q280,24 370,10 Q460,26 550,12 Q640,28 760,14 L760,50 L0,50 Z" fill="#c8e0f4" opacity=".7"/>
        <!-- Ice cracks with light shining through -->
        <g fill="#88ccff" opacity=".5" filter="url(#nwf)">
          <rect x="120" y="0" width="8" height="65" transform="rotate(5,124,32)"/>
          <rect x="320" y="0" width="6" height="60" transform="rotate(-3,323,30)"/>
          <rect x="540" y="0" width="7" height="58" transform="rotate(4,543,29)"/>
        </g>
        <!-- Light shafts through cracks -->
        <g opacity=".15" fill="#a0d8ff">
          <polygon points="118,12 128,12 160,428 150,428"/>
          <polygon points="318,8 326,8 355,428 347,428"/>
          <polygon points="537,10 545,10 572,428 564,428"/>
        </g>
        <!-- Pod of narwhals -->
        <!-- Narwhal 1 (main, horizontal center) -->
        <g transform="translate(380,200)">
          <ellipse cx="0" cy="0" rx="90" ry="25" fill="#4a6a8a"/>
          <ellipse cx="10" cy="-5" rx="70" ry="18" fill="#5a7a9a" opacity=".7"/>
          <!-- Belly lighter -->
          <ellipse cx="5" cy="8" rx="60" ry="12" fill="#8aaa c0" opacity=".4"/>
          <!-- Tusk (long straight horn) -->
          <line x1="-90" y1="-3" x2="-230" y2="-8" stroke="#d8e0e8" stroke-width="5" stroke-linecap="round"/>
          <line x1="-90" y1="-3" x2="-230" y2="-8" stroke="#eef4f8" stroke-width="2" stroke-linecap="round"/>
          <!-- Dorsal ridge (narwhals have no fin) -->
          <path d="M-20,-18 Q10,-22 40,-18" stroke="#3a5a7a" stroke-width="3" fill="none"/>
          <!-- Flukes -->
          <path d="M90,0 Q105,-18 115,-14 Q108,0 115,14 Q105,18 90,0 Z" fill="#4a6a8a"/>
          <!-- Flippers -->
          <ellipse cx="-30" cy="18" rx="20" ry="8" fill="#4a6a8a" transform="rotate(20,-30,18)"/>
          <!-- Eye -->
          <circle cx="-70" cy="-5" r="5" fill="#1a2a3a"/><circle cx="-69" cy="-6" r="2" fill="#fff"/>
          <!-- Spotted pattern -->
          <g fill="#3a5a78" opacity=".4"><circle cx="-20" cy="5" r="6"/><circle cx="0" cy="8" r="5"/><circle cx="20" cy="6" r="6"/><circle cx="40" cy="4" r="5"/><circle cx="-45" cy="3" r="5"/></g>
        </g>
        <!-- Narwhal 2 (angled, lower) -->
        <g transform="translate(180,300) rotate(-12)">
          <ellipse cx="0" cy="0" rx="75" ry="20" fill="#3a5a7a"/>
          <line x1="-75" y1="-2" x2="-185" y2="-6" stroke="#d0d8e0" stroke-width="4" stroke-linecap="round"/>
          <path d="M75,0 Q86,-15 94,-12 Q88,0 94,12 Q86,15 75,0 Z" fill="#3a5a7a"/>
          <ellipse cx="-25" cy="14" rx="16" ry="7" fill="#3a5a7a" transform="rotate(18,-25,14)"/>
          <circle cx="-58" cy="-4" r="4" fill="#1a2a3a"/><circle cx="-57" cy="-5" r="1.5" fill="#fff"/>
        </g>
        <!-- Narwhal 3 (calf, small, upper right) -->
        <g transform="translate(580,140) rotate(8)">
          <ellipse cx="0" cy="0" rx="45" ry="13" fill="#5a7a9a"/>
          <line x1="-45" y1="-2" x2="-105" y2="-4" stroke="#c8d4dc" stroke-width="3" stroke-linecap="round"/>
          <path d="M45,0 Q52,-10 58,-8 Q54,0 58,8 Q52,10 45,0 Z" fill="#5a7a9a"/>
          <circle cx="-35" cy="-3" r="3" fill="#1a2a3a"/>
        </g>
        <!-- Bubbles rising -->
        <g fill="#88ccff" opacity=".5"><circle cx="200" cy="180" r="5"/><circle cx="210" cy="155" r="4"/><circle cx="205" cy="132" r="6"/><circle cx="395" cy="160" r="4"/><circle cx="400" cy="138" r="5"/><circle cx="402" cy="115" r="3"/><circle cx="590" cy="175" r="4"/><circle cx="595" cy="150" r="5"/></g>
        <!-- Particles / plankton -->
        <g fill="#60aaff" opacity=".3"><circle cx="80" cy="150" r="2"/><circle cx="150" cy="200" r="2.5"/><circle cx="300" cy="120" r="2"/><circle cx="450" cy="250" r="2.5"/><circle cx="600" cy="120" r="2"/><circle cx="680" cy="200" r="2.5"/><circle cx="720" cy="300" r="2"/></g>
        <!-- Deep darkness below -->
        <rect x="0" y="350" width="760" height="78" fill="#040810" opacity=".5"/>
        <!-- Water surface light play -->
        <g stroke="#80c8ff" stroke-width="1" fill="none" opacity=".2">
          <path d="M0,90 Q95,80 190,90 Q285,80 380,90 Q475,80 570,90 Q665,80 760,88"/>
          <path d="M0,120 Q95,112 190,120 Q285,112 380,120 Q475,112 570,120 Q665,112 760,118"/>
        </g>
      </svg>
    </div>
    <div class="ig-15__caption"><h3>Narwhal Pod</h3><p>Below Arctic sea ice, Baffin Bay · Canada</p></div>
  </div>

  <!-- Slide 3: Arctic fox in snow storm -->
  <div class="ig-15__slide">
    <div class="ig-15__img">
      <svg viewBox="0 0 760 428" xmlns="http://www.w3.org/2000/svg">
        <defs>
          <linearGradient id="afg" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#6a88a0"/><stop offset="50%" stop-color="#8aaac0"/><stop offset="100%" stop-color="#c0d4e4"/></linearGradient>
          <filter id="aff"><feGaussianBlur stdDeviation="8"/></filter>
          <filter id="aff2"><feGaussianBlur stdDeviation="3"/></filter>
        </defs>
        <rect width="760" height="428" fill="url(#afg)"/>
        <!-- Blizzard snow fill -->
        <rect width="760" height="428" fill="#d0e4f0" opacity=".25" filter="url(#aff)"/>
        <!-- Snow ground -->
        <path d="M0,310 Q95,290 190,302 Q285,288 380,298 Q475,285 570,295 Q665,283 760,292 L760,428 L0,428 Z" fill="#e8f2fa"/>
        <path d="M0,340 Q190,328 380,336 Q570,325 760,334 L760,428 L0,428 Z" fill="#f0f8ff"/>
        <!-- Drifted snow shapes -->
        <g fill="#dceef8" opacity=".7" filter="url(#aff2)">
          <ellipse cx="120" cy="328" rx="120" ry="30"/><ellipse cx="500" cy="320" rx="100" ry="28"/><ellipse cx="680" cy="332" rx="90" ry="25"/>
        </g>
        <!-- Arctic fox (curled, fluffy, white winter coat) -->
        <g transform="translate(340,320)">
          <!-- Curled body -->
          <ellipse cx="0" cy="-10" rx="70" ry="42" fill="#f5f8fc"/>
          <ellipse cx="5" cy="-12" rx="60" ry="35" fill="#fff" opacity=".8"/>
          <!-- Fluffy tail curled around body -->
          <path d="M65,-8 Q88,18 70,40 Q45,58 18,48 Q0,42 -5,30" stroke="#e8f0f8" stroke-width="22" fill="none" stroke-linecap="round"/>
          <path d="M65,-8 Q85,14 68,36 Q44,53 18,44 Q2,38 -3,27" stroke="#fff" stroke-width="14" fill="none" stroke-linecap="round"/>
          <!-- Tail tip (darker) -->
          <circle cx="-4" cy="28" r="12" fill="#d8e8f4"/>
          <!-- Head (lowered, tucked) -->
          <ellipse cx="-60" cy="-18" rx="30" ry="24" fill="#f5f8fc"/>
          <ellipse cx="-65" cy="-20" rx="22" ry="18" fill="#fff" opacity=".8"/>
          <!-- Muzzle -->
          <ellipse cx="-85" cy="-12" rx="14" ry="10" fill="#edf4fa"/>
          <!-- Nose -->
          <ellipse cx="-96" cy="-10" rx="5" ry="4" fill="#1a1a1a"/>
          <!-- Eyes (squinting in wind) -->
          <path d="M-72,-22 Q-68,-18 -64,-22" stroke="#1a1a1a" stroke-width="2.5" fill="none" stroke-linecap="round"/>
          <!-- Ears (pressed back) -->
          <ellipse cx="-48" cy="-40" rx="10" ry="8" fill="#e8f0f8" transform="rotate(-30,-48,-40)"/>
          <ellipse cx="-48" cy="-40" rx="6" ry="4" fill="#f8e8e8" transform="rotate(-30,-48,-40)"/>
          <!-- Paws tucked under -->
          <ellipse cx="-35" cy="20" rx="18" ry="10" fill="#edf4fa" transform="rotate(15,-35,20)"/>
          <ellipse cx="25" cy="28" rx="16" ry="9" fill="#edf4fa" transform="rotate(-10,25,28)"/>
          <!-- Fur texture -->
          <g stroke="#d8e8f4" stroke-width=".8" fill="none" opacity=".5">
            <path d="M-40,-10 Q-25,-14 -10,-10"/><path d="M-10,-8 Q8,-12 25,-8"/><path d="M25,-5 Q42,-9 58,-5"/>
            <path d="M-50,-5 Q-38,-10 -25,-5"/><path d="M-55,5 Q-40,1 -28,5"/>
          </g>
        </g>
        <!-- Storm snow particles -->
        <g fill="#fff" opacity=".8">
          <circle cx="50" cy="80" r="3"/><circle cx="120" cy="45" r="2.5"/><circle cx="200" cy="100" r="3.5"/><circle cx="280" cy="60" r="2"/><circle cx="350" cy="120" r="3"/><circle cx="430" cy="40" r="2.5"/><circle cx="510" cy="90" r="3"/><circle cx="590" cy="55" r="2"/><circle cx="660" cy="110" r="3.5"/><circle cx="730" cy="70" r="2.5"/>
          <circle cx="80" cy="160" r="2"/><circle cx="170" cy="200" r="3"/><circle cx="260" cy="145" r="2.5"/><circle cx="340" cy="185" r="2"/><circle cx="450" cy="170" r="3"/><circle cx="540" cy="140" r="2.5"/><circle cx="630" cy="190" r="2"/><circle cx="720" cy="155" r="3"/>
          <circle cx="30" cy="250" r="3.5"/><circle cx="140" cy="280" r="2"/><circle cx="240" cy="240" r="3"/><circle cx="400" cy="265" r="2.5"/><circle cx="500" cy="248" r="2"/><circle cx="610" cy="270" r="3"/><circle cx="700" cy="255" r="2.5"/>
        </g>
        <!-- Blizzard streaks (horizontal) -->
        <g stroke="#e8f4ff" stroke-width=".6" opacity=".3">
          <line x1="0" y1="100" x2="760" y2="95"/><line x1="0" y1="200" x2="760" y2="195"/>
          <line x1="0" y1="140" x2="760" y2="136"/><line x1="0" y1="240" x2="760" y2="236"/>
        </g>
        <!-- Distant trees barely visible in storm -->
        <g fill="#8aaac0" opacity=".25" filter="url(#aff)">
          <polygon points="0,310 18,265 36,310"/><polygon points="25,310 45,270 65,310"/>
          <polygon points="680,310 698,268 716,310"/><polygon points="706,310 724,272 742,310"/>
          <polygon points="730,310 748,278 760,310"/>
        </g>
      </svg>
    </div>
    <div class="ig-15__caption"><h3>Arctic Fox in Blizzard</h3><p>Winter tundra, Wrangel Island · Siberia</p></div>
  </div>

  <!-- Slide 4: Snowy owl in flight -->
  <div class="ig-15__slide">
    <div class="ig-15__img">
      <svg viewBox="0 0 760 428" xmlns="http://www.w3.org/2000/svg">
        <defs>
          <linearGradient id="sog" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#2a3a4a"/><stop offset="50%" stop-color="#3a5060"/><stop offset="100%" stop-color="#5a7080"/></linearGradient>
          <filter id="sof"><feGaussianBlur stdDeviation="5"/></filter>
        </defs>
        <rect width="760" height="428" fill="url(#sog)"/>
        <!-- Overcast sky texture -->
        <g fill="#4a6070" opacity=".3" filter="url(#sof)"><ellipse cx="200" cy="80" rx="200" ry="60"/><ellipse cx="560" cy="100" rx="180" ry="55"/><ellipse cx="380" cy="50" rx="160" ry="45"/></g>
        <!-- Snow tundra below -->
        <path d="M0,310 Q95,295 190,305 Q285,292 380,300 Q475,288 570,298 Q665,285 760,294 L760,428 L0,428 Z" fill="#c8d8e4"/>
        <path d="M0,345 Q190,332 380,340 Q570,328 760,338 L760,428 L0,428 Z" fill="#d8e8f0"/>
        <!-- Distant mountains -->
        <g fill="#5a7080" opacity=".4"><polygon points="0,310 50,260 100,310"/><polygon points="60,310 115,252 170,310"/><polygon points="580,310 638,255 696,310"/><polygon points="630,308 688,250 746,308"/></g>
        <!-- Snowy owl in flight (large, dramatic wings spread) -->
        <g transform="translate(380,180)">
          <!-- LEFT WING (spread wide, downstroke) -->
          <path d="M-20,-10 Q-100,-30 -170,-55 Q-230,-70 -280,-60 Q-250,-40 -200,-15 Q-140,5 -70,12 Q-40,18 -20,15 Z" fill="#f0f4f8"/>
          <path d="M-20,-10 Q-100,-28 -168,-52 Q-225,-66 -272,-56 Q-246,-38 -198,-14 Q-138,6 -68,13 Q-38,19 -20,15 Z" fill="#fff" opacity=".7"/>
          <!-- Wing barring patterns left -->
          <g fill="#c8d4dc" opacity=".4">
            <ellipse cx="-120" cy="-35" rx="20" ry="8" transform="rotate(-15,-120,-35)"/>
            <ellipse cx="-180" cy="-52" rx="18" ry="7" transform="rotate(-10,-180,-52)"/>
            <ellipse cx="-240" cy="-62" rx="16" ry="6" transform="rotate(-5,-240,-62)"/>
            <ellipse cx="-90" cy="-22" rx="15" ry="6" transform="rotate(-20,-90,-22)"/>
          </g>
          <!-- RIGHT WING -->
          <path d="M20,-10 Q100,-30 170,-55 Q230,-70 280,-60 Q250,-40 200,-15 Q140,5 70,12 Q40,18 20,15 Z" fill="#f0f4f8"/>
          <path d="M20,-10 Q100,-28 168,-52 Q225,-66 272,-56 Q246,-38 198,-14 Q138,6 68,13 Q38,19 20,15 Z" fill="#fff" opacity=".7"/>
          <g fill="#c8d4dc" opacity=".4">
            <ellipse cx="120" cy="-35" rx="20" ry="8" transform="rotate(15,120,-35)"/>
            <ellipse cx="180" cy="-52" rx="18" ry="7" transform="rotate(10,180,-52)"/>
            <ellipse cx="240" cy="-62" rx="16" ry="6" transform="rotate(5,240,-62)"/>
            <ellipse cx="90" cy="-22" rx="15" ry="6" transform="rotate(20,90,-22)"/>
          </g>
          <!-- Body -->
          <ellipse cx="0" cy="15" rx="35" ry="48" fill="#f0f4f8"/>
          <ellipse cx="0" cy="12" rx="28" ry="40" fill="#fff" opacity=".8"/>
          <!-- Facial disc (round owl face) -->
          <ellipse cx="0" cy="-5" rx="28" ry="26" fill="#e8eef4"/>
          <ellipse cx="0" cy="-5" rx="24" ry="22" fill="#f0f4f8"/>
          <!-- Facial disc outline (darker) -->
          <path d="M0,-31 Q18,-28 28,-10 Q30,5 25,18 Q12,28 0,30 Q-12,28 -25,18 Q-30,5 -28,-10 Q-18,-28 0,-31 Z" fill="none" stroke="#c8d4e0" stroke-width="2"/>
          <!-- Eyes (bright yellow) -->
          <circle cx="-10" cy="-5" r="10" fill="#1a1a14"/>
          <circle cx="-10" cy="-5" r="8" fill="#f0c020"/>
          <circle cx="-10" cy="-5" r="5" fill="#0a0a0a"/>
          <circle cx="-8" cy="-7" r="2" fill="#fff"/>
          <circle cx="10" cy="-5" r="10" fill="#1a1a14"/>
          <circle cx="10" cy="-5" r="8" fill="#f0c020"/>
          <circle cx="10" cy="-5" r="5" fill="#0a0a0a"/>
          <circle cx="12" cy="-7" r="2" fill="#fff"/>
          <!-- Beak -->
          <path d="M-3,5 Q0,12 3,5 Q0,2 -3,5 Z" fill="#d0a040"/>
          <!-- Feet (talons, forward) -->
          <g fill="#c89030">
            <path d="M-15,55 Q-20,68 -22,80 M-15,55 Q-12,70 -10,82 M-15,55 Q-8,66 -5,78 M-15,55 Q-22,58 -28,62" stroke="#c89030" stroke-width="3" fill="none" stroke-linecap="round"/>
            <path d="M15,55 Q20,68 22,80 M15,55 Q12,70 10,82 M15,55 Q8,66 5,78 M15,55 Q22,58 28,62" stroke="#c89030" stroke-width="3" fill="none" stroke-linecap="round"/>
          </g>
          <!-- Speckling on chest -->
          <g fill="#b0c0cc" opacity=".35"><circle cx="-8" cy="25" r="4"/><circle cx="5" cy="30" r="3.5"/><circle cx="15" cy="22" r="4"/><circle cx="-15" cy="35" r="3"/><circle cx="0" cy="42" r="4"/><circle cx="18" cy="38" r="3"/></g>
          <!-- Tail feathers down -->
          <path d="M-18,55 Q-10,72 0,78 Q10,72 18,55" fill="#e8eef4"/>
          <path d="M-14,55 Q-6,70 0,75 Q6,70 14,55" fill="#fff" opacity=".7"/>
        </g>
        <!-- Snowflakes -->
        <g fill="#fff" opacity=".6"><circle cx="80" cy="80" r="3"/><circle cx="180" cy="45" r="2.5"/><circle cx="280" cy="100" r="3.5"/><circle cx="550" cy="70" r="3"/><circle cx="650" cy="40" r="2.5"/><circle cx="700" cy="110" r="3"/><circle cx="100" cy="200" r="2"/><circle cx="620" cy="220" r="2.5"/></g>
      </svg>
    </div>
    <div class="ig-15__caption"><h3>Snowy Owl in Flight</h3><p>Arctic tundra, Churchill · Manitoba, Canada</p></div>
  </div>

  <!-- Slide 5: Walrus on rocky shore -->
  <div class="ig-15__slide">
    <div class="ig-15__img">
      <svg viewBox="0 0 760 428" xmlns="http://www.w3.org/2000/svg">
        <defs>
          <linearGradient id="wlg" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#3a5878"/><stop offset="40%" stop-color="#4a6888"/><stop offset="70%" stop-color="#5a7898"/><stop offset="100%" stop-color="#4a6070"/></linearGradient>
          <filter id="wlf"><feGaussianBlur stdDeviation="5"/></filter>
        </defs>
        <rect width="760" height="428" fill="url(#wlg)"/>
        <!-- Cloudy arctic sky -->
        <g fill="#88a8c8" opacity=".3" filter="url(#wlf)"><ellipse cx="180" cy="70" rx="180" ry="55"/><ellipse cx="540" cy="55" rx="160" ry="48"/><ellipse cx="380" cy="90" rx="140" ry="42"/></g>
        <!-- Rocky shoreline -->
        <path d="M0,270 Q80,255 160,265 Q240,252 320,260 Q400,248 480,258 Q560,246 640,255 Q700,248 760,253 L760,428 L0,428 Z" fill="#4a3a2a"/>
        <path d="M0,295 Q80,282 160,290 Q240,278 320,285 Q400,272 480,280 Q560,268 640,277 Q700,270 760,274 L760,428 L0,428 Z" fill="#3a2a1a"/>
        <!-- Rocks detail -->
        <g fill="#2a1a0a" opacity=".8">
          <ellipse cx="80" cy="280" rx="55" ry="22"/><ellipse cx="200" cy="275" rx="45" ry="18"/><ellipse cx="550" cy="278" rx="50" ry="20"/><ellipse cx="680" cy="272" rx="48" ry="19"/><ellipse cx="380" cy="282" rx="40" ry="15"/>
        </g>
        <!-- Haul-out: pile of walruses (overlapping) -->
        <!-- Back walruses (smaller, lighter) -->
        <g transform="translate(200,300)" fill="#8a5a38" opacity=".7">
          <ellipse cx="0" cy="0" rx="50" ry="25"/><ellipse cx="-30" cy="-12" rx="22" ry="18"/>
          <path d="M-40,-8 Q-48,5 -44,18" stroke="#8a5a38" stroke-width="6" fill="none"/>
        </g>
        <g transform="translate(550,295)" fill="#7a4a28" opacity=".7">
          <ellipse cx="0" cy="0" rx="55" ry="28"/><ellipse cx="-32" cy="-14" rx="24" ry="20"/>
          <path d="M-44,-10 Q-52,4 -48,18" stroke="#7a4a28" stroke-width="6" fill="none"/>
        </g>
        <!-- Main walrus (large, front) -->
        <g transform="translate(380,310)">
          <!-- Body (massive) -->
          <ellipse cx="0" cy="0" rx="110" ry="55" fill="#7a4a28"/>
          <ellipse cx="5" cy="-5" rx="95" ry="45" fill="#8a5a38" opacity=".7"/>
          <!-- Wrinkled skin folds -->
          <g stroke="#5a3010" stroke-width="1.5" fill="none" opacity=".4">
            <path d="M-60,10 Q-40,18 -20,10"/><path d="M-40,20 Q-20,28 0,20"/><path d="M0,15 Q20,22 40,15"/>
            <path d="M-50,-5 Q-30,2 -10,-5"/><path d="M20,-8 Q40,-2 60,-8"/>
          </g>
          <!-- Head -->
          <ellipse cx="-90" cy="-18" rx="38" ry="32" fill="#7a4a28"/>
          <ellipse cx="-95" cy="-20" rx="30" ry="25" fill="#8a5a38" opacity=".7"/>
          <!-- Whisker pad (moustache) -->
          <ellipse cx="-115" cy="-12" rx="18" ry="12" fill="#6a3a18"/>
          <!-- Whiskers -->
          <g stroke="#d0b080" stroke-width="1" fill="none" opacity=".7">
            <line x1="-128" y1="-16" x2="-155" y2="-20"/><line x1="-128" y1="-12" x2="-156" y2="-12"/><line x1="-128" y1="-8" x2="-154" y2="-5"/>
            <line x1="-125" y1="-18" x2="-150" y2="-24"/><line x1="-125" y1="-6" x2="-150" y2="-2"/>
          </g>
          <!-- Tusks (ivory white) -->
          <path d="M-115,-8 Q-122,10 -118,30" stroke="#f0e8d0" stroke-width="9" fill="none" stroke-linecap="round"/>
          <path d="M-110,-8 Q-116,12 -112,32" stroke="#fffde8" stroke-width="6" fill="none" stroke-linecap="round"/>
          <path d="M-100,-8 Q-105,10 -102,28" stroke="#f0e8d0" stroke-width="9" fill="none" stroke-linecap="round"/>
          <path d="M-95,-8 Q-100,12 -97,30" stroke="#fffde8" stroke-width="6" fill="none" stroke-linecap="round"/>
          <!-- Eyes (small, deep-set) -->
          <circle cx="-80" cy="-28" r="6" fill="#1a0a04"/><circle cx="-79" cy="-29" r="2" fill="#3a2a18"/>
          <!-- Nostrils -->
          <ellipse cx="-120" cy="-18" rx="4" ry="3" fill="#3a1808"/>
          <ellipse cx="-112" cy="-18" rx="4" ry="3" fill="#3a1808"/>
          <!-- Flippers -->
          <path d="M80,20 Q105,35 110,55 Q95,55 75,45 Z" fill="#6a3a18"/>
          <path d="M-75,30 Q-95,44 -98,62 Q-82,60 -65,50 Z" fill="#6a3a18"/>
        </g>
        <!-- Sea water lapping shore -->
        <path d="M0,260 Q95,250 190,258 Q285,248 380,255 Q475,246 570,253 Q665,244 760,250 L760,270 Q665,260 570,268 Q475,262 380,270 Q285,264 190,273 Q95,266 0,275 Z" fill="#2a5070" opacity=".5"/>
        <g stroke="#5088aa" stroke-width="1.5" fill="none" opacity=".3"><path d="M0,255 Q380,244 760,252"/></g>
        <!-- Icebergs distant -->
        <polygon points="50,255 70,228 90,255" fill="#b8d4e8" opacity=".6"/>
        <polygon points="650,252 672,226 694,252" fill="#b8d4e8" opacity=".6"/>
        <!-- Seagull -->
        <g fill="#f0f0f0" transform="translate(480,200)">
          <ellipse cx="0" cy="0" rx="18" ry="7"/>
          <path d="M-18,0 Q-28,-8 -38,-4"/><path d="M18,0 Q28,-8 38,-4"/>
          <ellipse cx="-22" cy="-5" rx="12" ry="5" transform="rotate(-20,-22,-5)"/>
          <ellipse cx="22" cy="-5" rx="12" ry="5" transform="rotate(20,22,-5)"/>
        </g>
      </svg>
    </div>
    <div class="ig-15__caption"><h3>Walrus Colony</h3><p>Rocky haul-out, Round Island · Alaska</p></div>
  </div>

  <!-- Slide 6: Atlantic puffin on cliff -->
  <div class="ig-15__slide">
    <div class="ig-15__img">
      <svg viewBox="0 0 760 428" xmlns="http://www.w3.org/2000/svg">
        <defs>
          <linearGradient id="pfg" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#2a4a6a"/><stop offset="40%" stop-color="#3a5a80"/><stop offset="70%" stop-color="#5a8aaa"/><stop offset="100%" stop-color="#3a5870"/></linearGradient>
          <filter id="pff"><feGaussianBlur stdDeviation="5"/></filter>
        </defs>
        <rect width="760" height="428" fill="url(#pfg)"/>
        <!-- Ocean waves below -->
        <g stroke="#4a7898" stroke-width="2" fill="none" opacity=".5">
          <path d="M0,380 Q95,368 190,378 Q285,365 380,375 Q475,362 570,372 Q665,360 760,368"/>
          <path d="M0,400 Q95,388 190,398 Q285,386 380,395 Q475,383 570,392 Q665,380 760,388"/>
        </g>
        <!-- Coastal cliff -->
        <path d="M0,0 Q0,200 0,350 L50,350 Q48,200 52,0 Z" fill="#5a4a3a"/>
        <path d="M0,0 L52,0 Q55,200 58,350 L0,350 Z" fill="#6a5a48"/>
        <!-- Cliff face texture strata -->
        <g fill="#4a3a28" opacity=".6"><rect x="0" y="80" width="55" height="6"/><rect x="0" y="145" width="55" height="5"/><rect x="0" y="215" width="55" height="7"/><rect x="0" y="280" width="55" height="5"/></g>
        <!-- Grass on cliff top -->
        <g stroke="#4a8018" stroke-width="2" stroke-linecap="round" fill="none" opacity=".8">
          <line x1="8" y1="0" x2="5" y2="-12"/><line x1="15" y1="0" x2="18" y2="-14"/><line x1="22" y1="0" x2="19" y2="-10"/><line x1="30" y1="0" x2="33" y2="-12"/><line x1="38" y1="0" x2="35" y2="-14"/><line x1="46" y1="0" x2="49" y2="-10"/>
        </g>
        <!-- Sea stretching to horizon -->
        <rect x="55" y="320" width="705" height="108" fill="#2a4a6a" opacity=".8"/>
        <!-- Puffin colony on cliff ledge (multiple birds) -->
        <!-- Puffin (main, large, front-facing) -->
        <g transform="translate(220,200)">
          <!-- Body rounded black -->
          <ellipse cx="0" cy="0" rx="45" ry="55" fill="#1a1a1a"/>
          <!-- White chest/belly -->
          <ellipse cx="0" cy="15" rx="28" ry="35" fill="#f5f5f5"/>
          <!-- Head -->
          <ellipse cx="0" cy="-48" rx="32" ry="28" fill="#1a1a1a"/>
          <!-- White face cheek patches -->
          <ellipse cx="-5" cy="-45" rx="22" ry="16" fill="#f0f0f0"/>
          <!-- Beak (colourful) -->
          <path d="M-8,-38 Q0,-28 8,-38 Q12,-30 8,-22 Q4,-18 0,-20 Q-4,-18 -8,-22 Q-12,-30 -8,-38 Z" fill="#ff6600"/>
          <path d="M-6,-35 Q0,-27 6,-35 Q9,-29 6,-23 Q3,-20 0,-21 Q-3,-20 -6,-23 Q-9,-29 -6,-35 Z" fill="#ffaa00"/>
          <path d="M-5,-33 Q0,-27 5,-33 Q7,-28 5,-24 Q2,-22 0,-22 Q-2,-22 -5,-24 Q-7,-28 -5,-33 Z" fill="#cc4400" opacity=".5"/>
          <!-- Blue/grey beak base -->
          <rect x="-10" y="-40" width="20" height="4" rx="2" fill="#8888aa"/>
          <!-- Eyes (bright orange-red ring) -->
          <circle cx="-15" cy="-50" r="9" fill="#2a1a0a"/>
          <circle cx="-15" cy="-50" r="7" fill="#ff4400" opacity=".8"/>
          <circle cx="-15" cy="-50" r="4" fill="#0a0a0a"/>
          <circle cx="-13" cy="-52" r="2" fill="#fff"/>
          <!-- Webbed feet (orange) -->
          <path d="M-18,52 Q-22,65 -26,68 Q-22,70 -18,65 Q-15,70 -10,65 Q-8,70 -5,65 Q-2,62 -18,52 Z" fill="#ff6600"/>
          <path d="M18,52 Q22,65 26,68 Q22,70 18,65 Q15,70 10,65 Q8,70 5,65 Q2,62 18,52 Z" fill="#ff6600"/>
          <!-- Wing outline visible -->
          <path d="M-40,0 Q-44,30 -40,55 Q-30,58 -18,52" stroke="#0a0a0a" stroke-width="2" fill="none" opacity=".5"/>
        </g>
        <!-- Second puffin (side profile, smaller) -->
        <g transform="translate(340,230) scale(.72)">
          <ellipse cx="0" cy="0" rx="42" ry="50" fill="#1a1a1a"/>
          <ellipse cx="5" cy="12" rx="25" ry="32" fill="#f0f0f0"/>
          <ellipse cx="0" cy="-44" rx="30" ry="26" fill="#1a1a1a"/>
          <ellipse cx="-8" cy="-42" rx="18" ry="14" fill="#f0f0f0"/>
          <path d="M20,-35 Q28,-25 34,-28 Q32,-38 24,-40 Q20,-38 20,-35 Z" fill="#ff6600"/>
          <circle cx="-15" cy="-46" r="6" fill="#ff4400" opacity=".7"/><circle cx="-15" cy="-46" r="3" fill="#0a0a0a"/><circle cx="-13" cy="-47" r="1.2" fill="#fff"/>
          <path d="M-15,48 Q-18,58 -22,62 Q-17,63 -14,58 Q-10,62 -6,58 Q-3,55 -15,48 Z" fill="#ff6600"/>
          <path d="M15,48 Q18,58 22,62 Q17,63 14,58 Q10,62 6,58 Q3,55 15,48 Z" fill="#ff6600"/>
        </g>
        <!-- Third puffin (distant, tiny) -->
        <g transform="translate(120,280) scale(.5)">
          <ellipse cx="0" cy="0" rx="42" ry="50" fill="#1a1a1a"/>
          <ellipse cx="5" cy="12" rx="25" ry="32" fill="#f0f0f0"/>
          <ellipse cx="0" cy="-44" rx="30" ry="26" fill="#1a1a1a"/>
          <ellipse cx="-8" cy="-42" rx="18" ry="14" fill="#f0f0f0"/>
          <path d="M20,-35 Q28,-25 34,-28 Q32,-38 24,-40 Q20,-38 20,-35 Z" fill="#ff6600"/>
          <circle cx="-15" cy="-46" r="6" fill="#ff4400" opacity=".7"/><circle cx="-15" cy="-46" r="3" fill="#0a0a0a"/>
        </g>
        <!-- Flying puffin in distance -->
        <g transform="translate(550,150)" fill="#1a1a1a">
          <ellipse cx="0" cy="0" rx="20" ry="8"/>
          <ellipse cx="-22" cy="-4" rx="22" ry="7" transform="rotate(-20,-22,-4)"/>
          <ellipse cx="22" cy="-4" rx="22" ry="7" transform="rotate(20,22,-4)"/>
          <ellipse cx="0" cy="-6" rx="10" ry="9"/>
        </g>
        <!-- Sea spray -->
        <g fill="#88c8e8" opacity=".4" filter="url(#pff)"><ellipse cx="400" cy="395" rx="80" ry="18"/><ellipse cx="600" cy="405" rx="60" ry="14"/></g>
        <!-- Distant sea cliffs -->
        <g fill="#4a6070" opacity=".4"><polygon points="550,320 590,265 630,320"/><polygon points="610,320 652,270 694,320"/><polygon points="680,320 718,278 756,320"/></g>
        <!-- White-capped waves -->
        <g stroke="#88c8e8" stroke-width="2.5" fill="none" opacity=".4"><path d="M60,355 Q115,345 170,355"/><path d="M280,360 Q335,350 390,360"/><path d="M490,355 Q545,345 600,355"/><path d="M650,362 Q705,352 760,362"/></g>
      </svg>
    </div>
    <div class="ig-15__caption"><h3>Atlantic Puffins</h3><p>Sea-cliff colony, Látrabjarg · Iceland</p></div>
  </div>

  <!-- Nav -->
  <button class="ig-15__nav ig-15__nav--prev" id="ig-15-prev">&#8249;</button>
  <button class="ig-15__nav ig-15__nav--next" id="ig-15-next">&#8250;</button>
  <div class="ig-15__dots" id="ig-15-dots">
    <div class="ig-15__dot ig-15--on"></div><div class="ig-15__dot"></div><div class="ig-15__dot"></div>
    <div class="ig-15__dot"></div><div class="ig-15__dot"></div><div class="ig-15__dot"></div>
  </div>
</div>
<script>
(function(){
  const el=document.getElementById('ig-15');
  if(!el)return;
  const slides=el.querySelectorAll('.ig-15__slide');
  const dots=el.querySelectorAll('.ig-15__dot');
  let cur=0,timer,running=true;
  function go(n){
    slides[cur].classList.remove('ig-15--active');dots[cur].classList.remove('ig-15--on');
    cur=(n+slides.length)%slides.length;
    slides[cur].classList.add('ig-15--active');dots[cur].classList.add('ig-15--on');
  }
  function startAuto(){timer=setInterval(()=>go(cur+1),6000)}
  function stopAuto(){clearInterval(timer)}
  el.querySelector('#ig-15-prev').addEventListener('click',()=>{stopAuto();go(cur-1);startAuto()});
  el.querySelector('#ig-15-next').addEventListener('click',()=>{stopAuto();go(cur+1);startAuto()});
  dots.forEach((d,i)=>d.addEventListener('click',()=>{stopAuto();go(i);startAuto()}));
  el.addEventListener('mouseenter',stopAuto);el.addEventListener('mouseleave',startAuto);
  startAuto();
}());
</script>
```

**CSS:**
```css
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
body{background:#040408;font-family:'DM Sans',sans-serif;display:flex;align-items:center;justify-content:center;min-height:100vh;padding:0}
.ig-15{position:relative;width:min(760px,100vw);aspect-ratio:16/9;overflow:hidden;background:#040408}
.ig-15__slide{position:absolute;inset:0;opacity:0;transition:opacity .8s ease}
.ig-15__slide.ig-15--active{opacity:1;z-index:1}
.ig-15__slide.ig-15--prev{opacity:0;z-index:0}
.ig-15__img{position:absolute;inset:-8%;width:116%;height:116%;animation:none}
.ig-15--active .ig-15__img{animation:ig-15-zoom 8s ease-in-out forwards}
@keyframes ig-15-zoom{
  0%{transform:scale(1) translate(0,0)}
  100%{transform:scale(1.12) translate(-3%,-2%)}
}
.ig-15__img svg{width:100%;height:100%;display:block}
.ig-15__caption{position:absolute;bottom:0;left:0;right:0;z-index:3;padding:2rem 2.5rem 1.5rem;background:linear-gradient(to top,rgba(4,4,8,.9) 0%,rgba(4,4,8,.5) 50%,transparent);pointer-events:none}
.ig-15__caption h3{font-family:'Playfair Display',serif;color:#fff;font-size:clamp(1.1rem,3vw,1.6rem);font-weight:700;margin-bottom:.3rem}
.ig-15__caption p{color:rgba(255,255,255,.55);font-size:clamp(.68rem,1.8vw,.82rem);font-style:italic;font-family:'Playfair Display',serif}
.ig-15__dots{position:absolute;bottom:1rem;right:1.5rem;z-index:5;display:flex;gap:.5rem;align-items:center}
.ig-15__dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.3);cursor:pointer;transition:background .3s,transform .3s}
.ig-15__dot.ig-15--on{background:#fff;transform:scale(1.4)}
.ig-15__nav{position:absolute;top:50%;z-index:5;transform:translateY(-50%);background:rgba(255,255,255,.1);border:none;color:rgba(255,255,255,.7);width:40px;height:40px;border-radius:50%;cursor:pointer;font-size:1.2rem;backdrop-filter:blur(6px);transition:background .2s;display:flex;align-items:center;justify-content:center}
.ig-15__nav:hover{background:rgba(255,255,255,.22)}
.ig-15__nav--prev{left:1rem}
.ig-15__nav--next{right:1rem}
@media(prefers-reduced-motion:reduce){.ig-15__img{animation:none!important}.ig-15__slide,.ig-15__dot{transition:none}}
```

**JS:**
```js
(function(){
  const el=document.getElementById('ig-15');
  if(!el)return;
  const slides=el.querySelectorAll('.ig-15__slide');
  const dots=el.querySelectorAll('.ig-15__dot');
  let cur=0,timer,running=true;
  function go(n){
    slides[cur].classList.remove('ig-15--active');dots[cur].classList.remove('ig-15--on');
    cur=(n+slides.length)%slides.length;
    slides[cur].classList.add('ig-15--active');dots[cur].classList.add('ig-15--on');
  }
  function startAuto(){timer=setInterval(()=>go(cur+1),6000)}
  function stopAuto(){clearInterval(timer)}
  el.querySelector('#ig-15-prev').addEventListener('click',()=>{stopAuto();go(cur-1);startAuto()});
  el.querySelector('#ig-15-next').addEventListener('click',()=>{stopAuto();go(cur+1);startAuto()});
  dots.forEach((d,i)=>d.addEventListener('click',()=>{stopAuto();go(i);startAuto()}));
  el.addEventListener('mouseenter',stopAuto);el.addEventListener('mouseleave',startAuto);
  startAuto();
}());
```

### 16. CSS Accordion Image Gallery

**Type:** CSS + JS
**Description:** Six desert landscape panels in a horizontal accordion — clicking any panel expands it to 5× width while the others compress, driven by CSS flex transitions.

**HTML:**
```html
<div class="ig-16" id="ig-16">

  <!-- Panel 1: Delicate Arch, Utah -->
  <div class="ig-16__panel ig-16--open" data-idx="0">
    <svg viewBox="0 0 180 420" preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <linearGradient id="utg" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stop-color="#1a0830"/>
          <stop offset="35%" stop-color="#6a1a28"/>
          <stop offset="65%" stop-color="#c04828"/>
          <stop offset="100%" stop-color="#e07840"/>
        </linearGradient>
        <filter id="utf"><feGaussianBlur stdDeviation="5"/></filter>
      </defs>
      <rect width="180" height="420" fill="url(#utg)"/>
      <!-- Stars -->
      <g fill="#fff" opacity=".7"><circle cx="20" cy="22" r="1"/><circle cx="55" cy="10" r="1.2"/><circle cx="90" cy="28" r=".9"/><circle cx="130" cy="8" r="1.1"/><circle cx="165" cy="20" r="1"/><circle cx="40" cy="50" r=".8"/><circle cx="115" cy="42" r="1"/><circle cx="155" cy="55" r=".9"/></g>
      <!-- Milky Way hint -->
      <ellipse cx="90" cy="120" rx="100" ry="60" fill="#8060c0" opacity=".08" filter="url(#utf)" transform="rotate(-30,90,120)"/>
      <!-- Distant canyon walls -->
      <g fill="#5a2a08" opacity=".7">
        <polygon points="0,250 0,200 30,175 55,210 55,250"/>
        <polygon points="125,250 125,195 150,168 175,200 180,250"/>
      </g>
      <!-- The Arch (Delicate Arch) -->
      <g fill="#d06028">
        <!-- Left leg -->
        <path d="M45,420 Q42,380 40,340 Q38,310 45,285 Q52,268 60,262 Q68,258 72,265 Q76,275 74,295 Q72,320 72,355 L72,420 Z"/>
        <!-- Right leg -->
        <path d="M110,420 L110,355 Q108,325 106,298 Q104,278 108,268 Q112,258 118,258 Q126,260 132,272 Q138,288 136,315 Q134,345 132,380 Q130,400 130,420 Z"/>
        <!-- Arch span -->
        <path d="M72,265 Q91,228 110,268 Q100,238 91,230 Q82,238 72,265 Z" fill="#d06028"/>
        <path d="M76,278 Q90,240 106,275 Q98,248 90,242 Q82,248 76,278 Z" fill="#e07840" opacity=".7"/>
      </g>
      <!-- Rocky slickrock platform -->
      <path d="M15,380 Q90,362 165,378 L165,420 L15,420 Z" fill="#8a4010"/>
      <!-- Smaller rock hoodoos -->
      <g fill="#7a3808" opacity=".7">
        <polygon points="10,380 16,345 22,380"/>
        <polygon points="155,380 162,350 168,380"/>
      </g>
      <!-- Venus / bright star near arch -->
      <circle cx="91" cy="218" r="4" fill="#fff8d0" opacity=".9"/>
      <circle cx="91" cy="218" r="7" fill="#fff8d0" opacity=".2" filter="url(#utf)"/>
      <!-- Moon slim crescent -->
      <g transform="translate(148,45)">
        <circle cx="0" cy="0" r="11" fill="#fff8d0" opacity=".9"/>
        <circle cx="5" cy="-2" r="9" fill="#6a1a28"/>
        <circle cx="4" cy="-3" r="8" fill="#fff8d0" opacity=".9"/>
      </g>
    </svg>
    <div class="ig-16__label"><h3>Delicate Arch</h3><p>Arches National Park · Utah, USA</p></div>
    <span class="ig-16__tab">Delicate Arch</span>
  </div>

  <!-- Panel 2: Namib Desert dunes (orange/red) -->
  <div class="ig-16__panel" data-idx="1">
    <svg viewBox="0 0 180 420" preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <linearGradient id="nmg" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stop-color="#c87820"/>
          <stop offset="40%" stop-color="#d88828"/>
          <stop offset="70%" stop-color="#e09838"/>
          <stop offset="100%" stop-color="#b06018"/>
        </linearGradient>
      </defs>
      <rect width="180" height="420" fill="url(#nmg)"/>
      <!-- Sky gradient top -->
      <rect width="180" height="130" fill="#8ab8d8" opacity=".5"/>
      <rect width="180" height="80" fill="#a8cce0" opacity=".4"/>
      <!-- Sun intense white -->
      <circle cx="145" cy="35" r="20" fill="#fff9e0" opacity=".92"/>
      <circle cx="145" cy="35" r="14" fill="#fffce0"/>
      <!-- Dune 1: massive star dune Sossusvlei -->
      <path d="M0,220 Q45,165 90,185 Q135,165 180,210 L180,420 L0,420 Z" fill="#c87020"/>
      <path d="M0,240 Q50,195 90,212 Q130,195 180,232 L180,420 L0,420 Z" fill="#b86018"/>
      <path d="M0,270 Q60,240 90,252 Q120,240 180,262 L180,420 L0,420 Z" fill="#a85010"/>
      <path d="M0,305 Q70,280 90,290 Q110,280 180,298 L180,420 L0,420 Z" fill="#985008"/>
      <!-- Dune crest line (bright) -->
      <path d="M0,240 Q45,196 90,212 Q135,196 180,232" stroke="#e0a040" stroke-width="2.5" fill="none" opacity=".6"/>
      <!-- Shadow side of dune (dark) -->
      <path d="M90,185 Q100,220 112,265 Q118,295 115,340 L90,340 Z" fill="#5a2008" opacity=".5"/>
      <!-- Far dune silhouettes -->
      <g fill="#b06018" opacity=".6"><path d="M0,220 Q-10,180 20,170 Q40,165 60,185 Q75,172 90,185"/><path d="M90,185 Q105,172 120,182 Q140,165 160,178 Q175,168 190,190"/></g>
      <!-- Dead tree (Deadvlei) -->
      <g fill="#2a1208" transform="translate(35,280)">
        <rect x="-2" y="-80" width="4" height="80" rx="2"/>
        <g stroke="#2a1208" stroke-width="2.5" fill="none" stroke-linecap="round">
          <path d="M0,-65 Q-15,-55 -22,-42"/><path d="M0,-55 Q12,-45 18,-32"/>
          <path d="M0,-45 Q-10,-38 -14,-28"/><path d="M0,-38 Q8,-32 11,-22"/>
          <path d="M0,-70 Q-8,-62 -12,-52"/><path d="M0,-72 Q10,-65 15,-55"/>
        </g>
      </g>
      <!-- Second dead tree far -->
      <g fill="#2a1208" opacity=".6" transform="translate(145,300)">
        <rect x="-1.5" y="-55" width="3" height="55" rx="1.5"/>
        <g stroke="#2a1208" stroke-width="1.8" fill="none" stroke-linecap="round">
          <path d="M0,-45 Q-10,-38 -14,-28"/><path d="M0,-38 Q9,-32 12,-22"/>
        </g>
      </g>
      <!-- Oryx silhouette on ridge -->
      <g fill="#1a0808" transform="translate(95,202)">
        <ellipse cx="0" cy="0" rx="12" ry="7"/>
        <ellipse cx="-8" cy="-6" rx="6" ry="7.5"/>
        <ellipse cx="-10" cy="-13" rx="2.5" ry="3.5"/>
        <!-- Horns straight up -->
        <line x1="-12" y1="-16" x2="-14" y2="-32" stroke="#1a0808" stroke-width="1.5"/>
        <line x1="-8" y1="-16" x2="-6" y2="-32" stroke="#1a0808" stroke-width="1.5"/>
        <rect x="-4" y="6" width="3" height="10" rx="1.5"/>
        <rect x="2" y="6" width="3" height="10" rx="1.5"/>
        <rect x="-11" y="6" width="3" height="12" rx="1.5"/>
        <rect x="-16" y="6" width="3" height="10" rx="1.5"/>
      </g>
    </svg>
    <div class="ig-16__label"><h3>Sossusvlei Dunes</h3><p>Namib-Naukluft Park · Namibia</p></div>
    <span class="ig-16__tab">Namib Desert</span>
  </div>

  <!-- Panel 3: Atacama salt flat -->
  <div class="ig-16__panel" data-idx="2">
    <svg viewBox="0 0 180 420" preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <linearGradient id="atcg" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stop-color="#1a3a6a"/>
          <stop offset="40%" stop-color="#3a6aaa"/>
          <stop offset="60%" stop-color="#5a8ac8"/>
          <stop offset="100%" stop-color="#88aad0"/>
        </linearGradient>
        <filter id="atcf"><feGaussianBlur stdDeviation="4"/></filter>
      </defs>
      <rect width="180" height="420" fill="url(#atcg)"/>
      <!-- Vast white salt flat with perfect mirror reflection -->
      <!-- Sky and reflection symmetric -->
      <!-- Real sky -->
      <rect width="180" height="210" fill="#4a88c8" opacity=".2"/>
      <!-- Wispy clouds -->
      <g fill="#fff" opacity=".4" filter="url(#atcf)">
        <ellipse cx="35" cy="55" rx="50" ry="16"/><ellipse cx="145" cy="40" rx="40" ry="13"/>
        <ellipse cx="88" cy="72" rx="35" ry="11"/>
      </g>
      <!-- Andes volcano silhouette (distant) -->
      <polygon points="0,210 0,165 32,130 65,170 65,210" fill="#2a1a2a" opacity=".6"/>
      <polygon points="65,210 65,158 95,120 125,162 125,210" fill="#1a0a1a" opacity=".7"/>
      <polygon points="115,210 115,168 142,138 165,172 180,165 180,210" fill="#2a1a2a" opacity=".6"/>
      <!-- Eternal snow on volcano tops -->
      <polygon points="32,130 40,122 48,130 44,133 36,133" fill="#e8eef8" opacity=".7"/>
      <polygon points="95,120 103,112 111,120 107,124 99,124" fill="#e8eef8" opacity=".7"/>
      <!-- Salt flat (mirror surface) -->
      <rect x="0" y="210" width="180" height="210" fill="#c8d8e8" opacity=".85"/>
      <!-- Hexagonal salt crust patterns -->
      <g fill="none" stroke="#a8b8c8" stroke-width=".8" opacity=".5">
        <polygon points="45,240 62,231 79,240 79,258 62,267 45,258"/>
        <polygon points="79,240 96,231 113,240 113,258 96,267 79,258"/>
        <polygon points="113,240 130,231 147,240 147,258 130,267 113,258"/>
        <polygon points="62,267 79,258 96,267 96,285 79,294 62,285"/>
        <polygon points="96,267 113,258 130,267 130,285 113,294 96,285"/>
        <polygon points="45,294 62,285 79,294 79,312 62,321 45,312"/>
        <polygon points="79,294 96,285 113,294 113,312 96,321 79,312"/>
        <polygon points="113,294 130,285 147,294 147,312 130,321 113,312"/>
        <polygon points="28,321 45,312 62,321 62,339 45,348 28,339"/>
        <polygon points="62,321 79,312 96,321 96,339 79,348 62,339"/>
        <polygon points="96,321 113,312 130,321 130,339 113,348 96,339"/>
        <polygon points="130,321 147,312 164,321 164,339 147,348 130,339"/>
        <polygon points="45,348 62,339 79,348 79,366 62,375 45,366"/>
        <polygon points="79,348 96,339 113,348 113,366 96,375 79,366"/>
        <polygon points="113,348 130,339 147,348 147,366 130,375 113,366"/>
        <polygon points="62,375 79,366 96,375 96,393 79,402 62,393"/>
        <polygon points="96,375 113,366 130,375 130,393 113,402 96,393"/>
      </g>
      <!-- Perfect reflection of sky in water layer -->
      <rect x="0" y="210" width="180" height="210" fill="#5a8ac8" opacity=".18"/>
      <!-- Reflection of mountains (inverted) -->
      <polygon points="0,210 0,255 32,290 65,250 65,210" fill="#2a1a2a" opacity=".25"/>
      <polygon points="65,210 65,252 95,292 125,248 125,210" fill="#1a0a1a" opacity=".3"/>
      <!-- Flamingos in distance -->
      <g fill="#e06080" opacity=".7">
        <g transform="translate(65,225)">
          <ellipse cx="0" cy="0" rx="5" ry="3.5"/><ellipse cx="-3" cy="-5" rx="2.5" ry="3"/>
          <line x1="0" y1="3" x2="0" y2="12" stroke="#e06080" stroke-width="1.2"/>
          <line x1="0" y1="8" x2="-3" y2="14" stroke="#e06080" stroke-width="1"/>
        </g>
        <g transform="translate(75,222)">
          <ellipse cx="0" cy="0" rx="4.5" ry="3"/><ellipse cx="-2.5" cy="-4.5" rx="2" ry="2.5"/>
          <line x1="0" y1="3" x2="0" y2="11" stroke="#e06080" stroke-width="1.2"/>
        </g>
        <g transform="translate(88,226)">
          <ellipse cx="0" cy="0" rx="5" ry="3.5"/><ellipse cx="-3" cy="-5" rx="2.5" ry="3"/>
          <line x1="0" y1="3" x2="0" y2="12" stroke="#e06080" stroke-width="1.2"/>
          <line x1="0" y1="8" x2="3" y2="14" stroke="#e06080" stroke-width="1"/>
        </g>
      </g>
    </svg>
    <div class="ig-16__label"><h3>Salar de Atacama</h3><p>Atacama Desert · Chile</p></div>
    <span class="ig-16__tab">Atacama</span>
  </div>

  <!-- Panel 4: Wadi Rum canyon at golden hour -->
  <div class="ig-16__panel" data-idx="3">
    <svg viewBox="0 0 180 420" preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <linearGradient id="wrg" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stop-color="#c87820"/>
          <stop offset="35%" stop-color="#e09030"/>
          <stop offset="65%" stop-color="#b86818"/>
          <stop offset="100%" stop-color="#7a3808"/>
        </linearGradient>
        <filter id="wrf"><feGaussianBlur stdDeviation="4"/></filter>
      </defs>
      <rect width="180" height="420" fill="url(#wrg)"/>
      <!-- Sky strip warm at top -->
      <rect width="180" height="80" fill="#d08830" opacity=".3"/>
      <circle cx="155" cy="28" r="22" fill="#fff580" opacity=".85"/>
      <circle cx="155" cy="28" r="16" fill="#fff8a0"/>
      <!-- Sunbeam rays -->
      <g stroke="#ffe060" stroke-width="1.5" opacity=".15">
        <line x1="155" y1="28" x2="0" y2="100"/><line x1="155" y1="28" x2="0" y2="180"/>
        <line x1="155" y1="28" x2="0" y2="260"/><line x1="155" y1="28" x2="80" y2="420"/>
        <line x1="155" y1="28" x2="140" y2="420"/>
      </g>
      <!-- Wadi Rum jebels (sandstone monoliths) -->
      <!-- Right jebel (massive) -->
      <path d="M120,0 Q128,40 135,100 Q140,160 138,230 Q136,300 140,380 L180,380 L180,0 Z" fill="#9a4808"/>
      <path d="M130,0 Q138,45 145,110 Q150,170 148,240 L180,240 L180,0 Z" fill="#c05a18"/>
      <!-- Left jebel -->
      <path d="M0,0 L0,380 L38,380 Q36,300 34,230 Q32,160 38,100 Q44,50 42,0 Z" fill="#8a4008"/>
      <path d="M0,0 L22,0 Q28,50 32,105 Q36,165 34,235 L0,235 Z" fill="#b05018"/>
      <!-- Rock strata horizontal lines -->
      <g stroke="#7a3008" stroke-width="1.2" fill="none" opacity=".5">
        <path d="M120,80 Q150,82 180,80"/><path d="M120,160 Q150,162 180,160"/>
        <path d="M120,240 Q150,242 180,240"/>
        <path d="M0,90 Q30,92 42,90"/><path d="M0,175 Q30,177 42,175"/>
        <path d="M0,258 Q30,260 42,258"/>
      </g>
      <!-- Middle distance rock formations -->
      <g fill="#7a3a10" opacity=".8">
        <polygon points="50,300 65,240 80,300"/>
        <polygon points="100,298 118,245 136,298"/>
      </g>
      <!-- Sand floor of Wadi -->
      <path d="M38,400 Q90,385 142,400 L142,420 L38,420 Z" fill="#d09040"/>
      <rect x="38" y="400" width="104" height="20" fill="#c08030"/>
      <!-- Desert sand ripples -->
      <g stroke="#b07020" stroke-width=".8" fill="none" opacity=".4">
        <path d="M42,408 Q90,402 138,408"/><path d="M45,415 Q90,410 135,415"/>
      </g>
      <!-- Jeep silhouette on sand -->
      <g fill="#1a0808" transform="translate(85,396)">
        <rect x="-18" y="-8" width="36" height="12" rx="3"/>
        <rect x="-10" y="-14" width="22" height="8" rx="2"/>
        <circle cx="-12" cy="5" r="5"/><circle cx="12" cy="5" r="5"/>
        <circle cx="-12" cy="5" r="3" fill="#2a1a0a"/><circle cx="12" cy="5" r="3" fill="#2a1a0a"/>
      </g>
      <!-- Bedouin camp -->
      <g fill="#5a3010" transform="translate(60,398)">
        <polygon points="-15,0 0,-12 15,0"/><rect x="-14" y="0" width="28" height="6"/>
        <g stroke="#8a5020" stroke-width="1" fill="none"><line x1="-15" y1="0" x2="-18" y2="-6"/><line x1="15" y1="0" x2="18" y2="-6"/></g>
      </g>
      <!-- Stars (visible in daytime desert sky hint) -->
      <g fill="#fff" opacity=".2"><circle cx="45" cy="18" r=".9"/><circle cx="75" cy="8" r=".8"/><circle cx="108" cy="22" r=".9"/></g>
    </svg>
    <div class="ig-16__label"><h3>Wadi Rum Valley</h3><p>Valley of the Moon · Jordan</p></div>
    <span class="ig-16__tab">Wadi Rum</span>
  </div>

  <!-- Panel 5: White Sands New Mexico at dusk -->
  <div class="ig-16__panel" data-idx="4">
    <svg viewBox="0 0 180 420" preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <linearGradient id="wsg" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stop-color="#1a0830"/>
          <stop offset="30%" stop-color="#5a1850"/>
          <stop offset="60%" stop-color="#d05870"/>
          <stop offset="80%" stop-color="#f0a080"/>
          <stop offset="100%" stop-color="#e8e0d8"/>
        </linearGradient>
        <filter id="wsf"><feGaussianBlur stdDeviation="5"/></filter>
      </defs>
      <rect width="180" height="420" fill="url(#wsg)"/>
      <!-- Stars emerging -->
      <g fill="#fff" opacity=".7"><circle cx="18" cy="18" r="1"/><circle cx="50" cy="8" r="1.1"/><circle cx="88" cy="22" r=".9"/><circle cx="130" cy="10" r="1.2"/><circle cx="162" cy="25" r="1"/><circle cx="35" cy="40" r=".8"/><circle cx="110" cy="35" r="1"/><circle cx="155" cy="48" r=".9"/></g>
      <!-- Venus bright -->
      <circle cx="142" cy="62" r="4.5" fill="#fff8c0" opacity=".95"/>
      <circle cx="142" cy="62" r="8" fill="#fff8c0" opacity=".2" filter="url(#wsf)"/>
      <!-- Distant San Andres mountains -->
      <g fill="#3a1a28" opacity=".6"><polygon points="0,230 0,195 28,168 55,195 55,230"/><polygon points="40,230 55,190 80,165 105,192 105,230"/><polygon points="90,230 105,188 128,162 152,190 152,230"/><polygon points="138,230 152,188 168,168 180,182 180,230"/></g>
      <!-- White gypsum dunes (luminous) -->
      <path d="M0,290 Q45,255 90,272 Q135,255 180,285 L180,420 L0,420 Z" fill="#f0eee8"/>
      <path d="M0,310 Q50,280 90,292 Q130,280 180,302 L180,420 L0,420 Z" fill="#f5f4f0"/>
      <path d="M0,335 Q55,312 90,320 Q125,312 180,325 L180,420 L0,420 Z" fill="#fafaf8"/>
      <path d="M0,365 Q65,348 90,355 Q115,348 180,358 L180,420 L0,420 Z" fill="#fff"/>
      <!-- Dune shadows (subtle lavender) -->
      <path d="M90,272 Q100,300 108,340 Q112,368 108,400 L90,400 Z" fill="#c8b8d8" opacity=".25"/>
      <!-- Crest highlight -->
      <path d="M0,310 Q50,281 90,292 Q130,281 180,302" stroke="#fff" stroke-width="1.5" fill="none" opacity=".6"/>
      <!-- Yucca plant silhouette -->
      <g fill="#2a1a08" transform="translate(40,322)">
        <rect x="-2" y="-28" width="4" height="28" rx="2"/>
        <!-- Yucca spiky fronds -->
        <g stroke="#2a1a08" stroke-width="1.5" fill="none" stroke-linecap="round">
          <path d="M0,-24 Q-10,-18 -16,-10"/><path d="M0,-24 Q10,-18 16,-10"/>
          <path d="M0,-18 Q-12,-12 -18,-5"/><path d="M0,-18 Q12,-12 18,-5"/>
          <path d="M0,-12 Q-8,-8 -12,-2"/><path d="M0,-12 Q8,-8 12,-2"/>
          <path d="M0,-28 Q-5,-22 -8,-16"/><path d="M0,-28 Q5,-22 8,-16"/>
        </g>
      </g>
      <!-- Second yucca far -->
      <g fill="#2a1a08" opacity=".6" transform="translate(145,340)">
        <rect x="-1.5" y="-20" width="3" height="20" rx="1.5"/>
        <g stroke="#2a1a08" stroke-width="1.2" fill="none" stroke-linecap="round">
          <path d="M0,-18 Q-7,-13 -11,-7"/><path d="M0,-18 Q7,-13 11,-7"/>
          <path d="M0,-12 Q-8,-8 -12,-3"/><path d="M0,-12 Q8,-8 12,-3"/>
        </g>
      </g>
      <!-- Person on dune crest (tiny silhouette) -->
      <g fill="#1a0a18" transform="translate(88,280)">
        <ellipse cx="0" cy="0" rx="3.5" ry="5"/>
        <circle cx="0" cy="-7" r="3.5"/>
      </g>
      <!-- Pink glow from horizon -->
      <ellipse cx="90" cy="240" rx="120" ry="35" fill="#d06870" opacity=".2" filter="url(#wsf)"/>
    </svg>
    <div class="ig-16__label"><h3>White Sands at Dusk</h3><p>White Sands NM · New Mexico, USA</p></div>
    <span class="ig-16__tab">White Sands</span>
  </div>

  <!-- Panel 6: Cappadocia hot air balloons sunrise -->
  <div class="ig-16__panel" data-idx="5">
    <svg viewBox="0 0 180 420" preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <linearGradient id="cpcg" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stop-color="#ff8040"/>
          <stop offset="30%" stop-color="#ffaa60"/>
          <stop offset="55%" stop-color="#ffd080"/>
          <stop offset="75%" stop-color="#c87040"/>
          <stop offset="100%" stop-color="#8a4010"/>
        </linearGradient>
        <filter id="cpcf"><feGaussianBlur stdDeviation="4"/></filter>
      </defs>
      <rect width="180" height="420" fill="url(#cpcg)"/>
      <!-- Rising sun -->
      <circle cx="90" cy="160" r="35" fill="#fff5a0" opacity=".85"/>
      <circle cx="90" cy="160" r="28" fill="#ffee80"/>
      <!-- Sun rays -->
      <g stroke="#ffe050" stroke-width="1.5" opacity=".2">
        <line x1="90" y1="115" x2="90" y2="95"/><line x1="120" y1="128" x2="132" y2="116"/>
        <line x1="130" y1="158" x2="150" y2="158"/><line x1="120" y1="188" x2="132" y2="200"/>
        <line x1="60" y1="128" x2="48" y2="116"/><line x1="50" y1="158" x2="30" y2="158"/>
        <line x1="60" y1="188" x2="48" y2="200"/>
      </g>
      <!-- Fairy chimney hoodoos -->
      <g fill="#9a5a28">
        <g transform="translate(15,300)">
          <polygon points="-10,120 0,0 10,120"/><ellipse cx="0" cy="-2" rx="14" ry="10"/>
        </g>
        <g transform="translate(40,285)">
          <polygon points="-8,135 0,0 8,135"/><ellipse cx="0" cy="-2" rx="12" ry="8"/>
        </g>
        <g transform="translate(62,295)">
          <polygon points="-7,125 0,0 7,125"/><ellipse cx="0" cy="-2" rx="10" ry="7"/>
        </g>
        <g transform="translate(100,280)">
          <polygon points="-9,140 0,0 9,140"/><ellipse cx="0" cy="-2" rx="13" ry="9"/>
        </g>
        <g transform="translate(125,292)">
          <polygon points="-8,128 0,0 8,128"/><ellipse cx="0" cy="-2" rx="11" ry="8"/>
        </g>
        <g transform="translate(150,288)">
          <polygon points="-10,132 0,0 10,132"/><ellipse cx="0" cy="-2" rx="14" ry="10"/>
        </g>
        <g transform="translate(170,298)">
          <polygon points="-6,122 0,0 6,122"/><ellipse cx="0" cy="-2" rx="9" ry="7"/>
        </g>
      </g>
      <!-- Cave dwellings windows -->
      <g fill="#5a2808" opacity=".7">
        <rect x="8" y="335" width="8" height="10" rx="2"/><rect x="20" y="342" width="6" height="8" rx="2"/>
        <rect x="35" y="328" width="7" height="9" rx="2"/><rect x="56" y="335" width="6" height="8" rx="2"/>
        <rect x="95" y="322" width="8" height="10" rx="2"/><rect x="108" y="330" width="6" height="8" rx="2"/>
        <rect x="120" y="338" width="7" height="9" rx="2"/>
      </g>
      <!-- Hot air balloons! (multiple) -->
      <!-- Balloon 1 (large, center) -->
      <g transform="translate(85,52)">
        <ellipse cx="0" cy="0" rx="22" ry="28" fill="#e82020"/>
        <g fill="#ff8020" opacity=".8"><path d="M-22,0 Q-22,-28 0,-28 Q22,-28 22,0 Q11,-12 0,-8 Q-11,-12 -22,0 Z"/></g>
        <g fill="#ffdd20" opacity=".7"><path d="M-22,0 Q-11,-12 0,-8 Q11,-12 22,0 Q11,12 0,8 Q-11,12 -22,0 Z"/></g>
        <g fill="#2288ee" opacity=".7"><path d="M-22,0 Q-11,12 0,8 Q11,12 22,0 Q22,28 0,28 Q-22,28 -22,0 Z"/></g>
        <rect x="-10" y="26" width="20" height="6" rx="2" fill="#8a5020"/>
        <g stroke="#8a5020" stroke-width="1" fill="none"><line x1="-9" y1="26" x2="-6" y2="14"/><line x1="9" y1="26" x2="6" y2="14"/></g>
        <rect x="-8" y="32" width="16" height="7" rx="2" fill="#6a3810"/>
        <ellipse cx="0" cy="35" rx="9" ry="4" fill="#4a2208"/>
      </g>
      <!-- Balloon 2 (smaller, left, higher) -->
      <g transform="translate(32,32)">
        <ellipse cx="0" cy="0" rx="15" ry="20" fill="#22aa44"/>
        <g fill="#88dd44" opacity=".7"><path d="M-15,0 Q-15,-20 0,-20 Q15,-20 15,0 Q7,-8 0,-6 Q-7,-8 -15,0 Z"/></g>
        <g fill="#ffdd20" opacity=".6"><path d="M-15,0 Q-7,-8 0,-6 Q7,-8 15,0 Q7,8 0,6 Q-7,8 -15,0 Z"/></g>
        <g fill="#ee4422" opacity=".6"><path d="M-15,0 Q-7,8 0,6 Q7,8 15,0 Q15,20 0,20 Q-15,20 -15,0 Z"/></g>
        <rect x="-7" y="18" width="14" height="5" rx="2" fill="#8a5020"/>
        <rect x="-5" y="23" width="10" height="5" rx="2" fill="#6a3810"/>
      </g>
      <!-- Balloon 3 (right, higher) -->
      <g transform="translate(148,20)">
        <ellipse cx="0" cy="0" rx="14" ry="18" fill="#8822cc"/>
        <g fill="#cc44ff" opacity=".7"><path d="M-14,0 Q-14,-18 0,-18 Q14,-18 14,0 Q7,-7 0,-5 Q-7,-7 -14,0 Z"/></g>
        <g fill="#ffdd20" opacity=".6"><path d="M-14,0 Q-7,-7 0,-5 Q7,-7 14,0 Q7,7 0,5 Q-7,7 -14,0 Z"/></g>
        <g fill="#2288ee" opacity=".6"><path d="M-14,0 Q-7,7 0,5 Q7,7 14,0 Q14,18 0,18 Q-14,18 -14,0 Z"/></g>
        <rect x="-6" y="16" width="12" height="5" rx="2" fill="#8a5020"/>
        <rect x="-4" y="21" width="8" height="5" rx="2" fill="#6a3810"/>
      </g>
      <!-- Distant balloons (tiny) -->
      <g fill="#cc2020" opacity=".6"><ellipse cx="60" cy="15" rx="8" ry="10"/></g>
      <g fill="#2266cc" opacity=".6"><ellipse cx="162" cy="55" rx="7" ry="9"/></g>
      <g fill="#22aa44" opacity=".5"><ellipse cx="110" cy="8" rx="7" ry="8"/></g>
      <g fill="#cc8820" opacity=".5"><ellipse cx="20" cy="65" rx="6" ry="8"/></g>
    </svg>
    <div class="ig-16__label"><h3>Cappadocia Balloons</h3><p>Göreme Valley · Central Turkey</p></div>
    <span class="ig-16__tab">Cappadocia</span>
  </div>

</div>
```

**CSS:**
```css
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
body{background:#0c0a08;font-family:'DM Sans',sans-serif;display:flex;align-items:center;justify-content:center;min-height:100vh;padding:1.5rem}
.ig-16{width:100%;max-width:780px;height:420px;display:flex;gap:5px}
.ig-16__panel{flex:1;position:relative;overflow:hidden;border-radius:10px;cursor:pointer;transition:flex .55s cubic-bezier(.25,.46,.45,.94);min-width:52px}
.ig-16__panel.ig-16--open{flex:5}
.ig-16__panel svg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .55s ease}
.ig-16__panel:hover:not(.ig-16--open) svg{transform:scale(1.05)}
.ig-16__panel.ig-16--open svg{transform:scale(1)}
.ig-16__label{position:absolute;bottom:0;left:0;right:0;padding:1.2rem 1.4rem .9rem;background:linear-gradient(to top,rgba(0,0,0,.85) 0%,transparent);transform:translateY(100%);transition:transform .4s .1s ease;pointer-events:none}
.ig-16__panel.ig-16--open .ig-16__label{transform:translateY(0)}
.ig-16__label h3{color:#fff;font-size:1.05rem;font-weight:600;margin-bottom:.2rem}
.ig-16__label p{color:rgba(255,255,255,.5);font-size:.73rem;font-style:italic;font-family:'Playfair Display',serif}
.ig-16__tab{position:absolute;bottom:1rem;left:50%;transform:translateX(-50%);white-space:nowrap;color:rgba(255,255,255,.7);font-size:.6rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;writing-mode:vertical-lr;transition:opacity .3s}
.ig-16__panel.ig-16--open .ig-16__tab{opacity:0}
@media(prefers-reduced-motion:reduce){.ig-16__panel,.ig-16__panel svg,.ig-16__label{transition:none}}
```

**JS:**
```js
(function(){
  const root=document.getElementById('ig-16');
  if(!root)return;
  const panels=root.querySelectorAll('.ig-16__panel');
  panels.forEach(p=>{
    p.addEventListener('click',()=>{
      const isOpen=p.classList.contains('ig-16--open');
      panels.forEach(x=>x.classList.remove('ig-16--open'));
      if(!isOpen)p.classList.add('ig-16--open');
    });
  });
}());
```

---
## 28 CSS Input Field Designs

URL: https://codefronts.com/components/css-input-fields/
Description: 28 hand-coded CSS input field designs — floating label, OTP, password strength, voice search, autocomplete, range slider, credit card and more. Semantic HTML, copy-paste ready.
Demo count: 28

### 01. Floating Label

**Type:** Pure CSS
**Description:** Classic floating label input. The placeholder lifts and shrinks above the field on focus — a calm, accessible pattern used across every modern product surface.

**HTML:**
```html
<label class="if-float">
  <input type="email" name="email" autocomplete="email" placeholder=" " required />
  <span class="if-float-label">Email address</span>
</label>
```

**CSS:**
```css
.if-float {
  position: relative;
  display: block;
  width: 100%;
  max-width: 280px;
}

.if-float input {
  width: 100%;
  box-sizing: border-box;
  padding: 18px 14px 8px;
  background: #1a1a22;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  color: #f0eeff;
  font-size: 14px;
  outline: none;
  transition:
    border-color 0.2s,
    background 0.2s;
}

.if-float input:focus {
  border-color: #7c6cff;
  background: #1f1f2a;
}

.if-float-label {
  position: absolute;
  left: 14px;
  top: 14px;
  font-size: 13px;
  color: #b8b6d4;
  pointer-events: none;
  transition:
    transform 0.2s,
    font-size 0.2s,
    color 0.2s;
}

.if-float input:focus + .if-float-label,
.if-float input:not(:placeholder-shown) + .if-float-label {
  transform: translateY(-9px);
  font-size: 10px;
  color: #a78bfa;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
```

### 02. Underline Sweep

**Type:** Pure CSS
**Description:** Minimal underline-style input. The bottom border draws outward from the centre on focus — a subtle, premium touch driven by `:focus-within`.

**HTML:**
```html
<label class="if-line">
  <span class="if-line-label">Username</span>
  <span class="if-line-wrap">
    <input type="text" name="username" autocomplete="username" placeholder="@codefronts" required />
  </span>
</label>
```

**CSS:**
```css
.if-line {
  display: grid;
  gap: 6px;
  width: 100%;
  max-width: 280px;
  font-size: 11px;
  color: #b8b6d4;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.if-line-wrap {
  position: relative;
  display: block;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.if-line-wrap::after {
  content: "";
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, #ff6c8a, #ff9a76);
  transition:
    left 0.3s ease,
    right 0.3s ease;
}

.if-line-wrap:focus-within::after {
  left: 0;
  right: 0;
}

.if-line input {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 0 9px;
  background: transparent;
  border: 0;
  outline: none;
  color: #f0eeff;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
}

.if-line input::placeholder {
  color: #b8b6d4;
}
```

### 03. Neon Glow

**Type:** Pure CSS
**Description:** Cyan neon-glow input. The border crisps and the box-shadow blooms on focus — perfect for dark dashboards, gaming UIs, and developer tools.

**HTML:**
```html
<label class="if-neon">
  <span class="if-neon-label">SECURE TOKEN</span>
  <input type="text" name="token" placeholder="sk_live_••••••••••••" required />
</label>
```

**CSS:**
```css
.if-neon {
  display: grid;
  gap: 6px;
  width: 100%;
  max-width: 280px;
}

.if-neon-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: #6cffff;
  text-shadow: 0 0 8px rgba(108, 255, 255, 0.5);
}

.if-neon input {
  width: 100%;
  box-sizing: border-box;
  background: #0a0a14;
  border: 1px solid rgba(108, 255, 255, 0.4);
  border-radius: 6px;
  padding: 11px 14px;
  color: #fff;
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  outline: none;
  transition:
    border-color 0.2s,
    box-shadow 0.2s,
    background 0.2s;
}

.if-neon input::placeholder {
  color: rgba(108, 255, 255, 0.45);
}

.if-neon input:focus {
  border-color: #6cffff;
  background: #0d1820;
  box-shadow:
    0 0 0 1px #6cffff,
    0 0 16px rgba(108, 255, 255, 0.45),
    inset 0 0 12px rgba(108, 255, 255, 0.12);
}
```

### 04. Glass Frosted

**Type:** Pure CSS
**Description:** Frosted-glass input on a soft gradient. Translucent surface with `backdrop-filter` blur and an inner highlight — an elegant fit for hero sections.

**HTML:**
```html
<div class="if-glass">
  <div class="if-glass-bg" aria-hidden="true"></div>
  <label class="if-glass-field">
    <span>Search</span>
    <input type="search" name="q" placeholder="Search anything…" />
  </label>
</div>
```

**CSS:**
```css
.if-glass {
  position: relative;
  width: 100%;
  max-width: 280px;
  border-radius: 14px;
  padding: 14px;
  isolation: isolate;
  overflow: hidden;
}

.if-glass-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(40% 60% at 30% 30%, #f59e0b 0%, transparent 60%),
    radial-gradient(50% 60% at 80% 70%, #7c3aed 0%, transparent 60%), #0a0a14;
  filter: blur(24px);
  transform: scale(1.2);
}

.if-glass-field {
  display: grid;
  gap: 6px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.if-glass-field input {
  width: 100%;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-radius: 10px;
  padding: 10px 12px;
  color: #fff;
  font-size: 14px;
  text-transform: none;
  letter-spacing: 0;
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transition:
    border-color 0.2s,
    background 0.2s;
}

.if-glass-field input::placeholder {
  color: rgba(255, 255, 255, 0.45);
}

.if-glass-field input:focus {
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.16);
}
```

### 05. Notched Outline

**Type:** Pure CSS
**Description:** Material-style notched outline. The label sits inside a gap cut into the border. Subtle, professional, and works beautifully for forms with dense fields.

**HTML:**
```html
<label class="if-notch">
  <span class="if-notch-label">Full name</span>
  <input type="text" name="name" autocomplete="name" placeholder=" " required />
  <span class="if-notch-frame" aria-hidden="true">
    <span class="if-notch-l"></span>
    <span class="if-notch-cut"><span>Full name</span></span>
    <span class="if-notch-r"></span>
  </span>
</label>
```

**CSS:**
```css
.if-notch {
  position: relative;
  display: block;
  width: 100%;
  max-width: 280px;
}

.if-notch input {
  width: 100%;
  box-sizing: border-box;
  padding: 13px 14px;
  background: transparent;
  border: 0;
  outline: none;
  color: #f0eeff;
  font-size: 14px;
  position: relative;
  z-index: 1;
}

.if-notch input::placeholder {
  color: transparent;
}

.if-notch-label {
  position: absolute;
  left: 14px;
  top: 13px;
  font-size: 13px;
  color: #b8b6d4;
  pointer-events: none;
  transition: opacity 0.15s;
  z-index: 2;
}

.if-notch input:focus ~ .if-notch-label,
.if-notch input:not(:placeholder-shown) ~ .if-notch-label {
  opacity: 0;
}

.if-notch-frame {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 12px auto 1fr;
  pointer-events: none;
}

.if-notch-l,
.if-notch-cut,
.if-notch-r {
  border: 1px solid rgba(46, 184, 138, 0.35);
  transition: border-color 0.2s;
}

.if-notch-l {
  border-right: 0;
  border-radius: 8px 0 0 8px;
}

.if-notch-r {
  border-left: 0;
  border-radius: 0 8px 8px 0;
}

.if-notch-cut {
  border-left: 0;
  border-right: 0;
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 6px;
}

.if-notch-cut > span {
  font-size: 10px;
  color: rgba(46, 184, 138, 0.85);
  font-weight: 600;
  background: #07070f;
  padding: 0 4px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transform: translateY(-13px) scale(0);
  transform-origin: left center;
  transition: transform 0.2s ease;
}

.if-notch input:focus ~ .if-notch-frame .if-notch-cut > span,
.if-notch input:not(:placeholder-shown) ~ .if-notch-frame .if-notch-cut > span {
  transform: translateY(-13px) scale(1);
}

.if-notch:focus-within .if-notch-l,
.if-notch:focus-within .if-notch-cut,
.if-notch:focus-within .if-notch-r {
  border-color: #2eb88a;
}
```

### 06. Liquid Border

**Type:** Pure CSS
**Description:** Animated stroke that draws around the field on focus. A small flourish that makes a single text input feel deliberate and premium.

**HTML:**
```html
<label class="if-liquid">
  <span class="if-liquid-label">Project name</span>
  <input type="text" name="project" placeholder="My next big idea…" required />
</label>
```

**CSS:**
```css
.if-liquid {
  display: grid;
  gap: 6px;
  width: 100%;
  max-width: 280px;
  font-size: 11px;
  color: #b8b6d4;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.if-liquid input {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 14px;
  background: #1a1a22;
  border: 1px solid #2a2a36;
  border-radius: 8px;
  color: #f0eeff;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  outline: none;
  background-image:
    linear-gradient(90deg, #fbbf24, #fbbf24), linear-gradient(0deg, #fbbf24, #fbbf24),
    linear-gradient(90deg, #fbbf24, #fbbf24), linear-gradient(0deg, #fbbf24, #fbbf24);
  background-repeat: no-repeat;
  background-size:
    0 2px,
    2px 0,
    0 2px,
    2px 0;
  background-position:
    0 0,
    100% 0,
    100% 100%,
    0 100%;
  transition:
    background-size 0.35s linear,
    border-color 0.2s;
}

.if-liquid input::placeholder {
  color: #b8b6d4;
}

.if-liquid input:focus {
  border-color: transparent;
  background-size:
    100% 2px,
    2px 100%,
    100% 2px,
    2px 100%;
  transition-delay: 0s, 0.35s, 0.7s, 1.05s;
  transition-duration: 0.35s;
}
```

### 07. Inline Validation

**Type:** Pure CSS
**Description:** Live `:valid` / `:invalid` feedback. Green tick when correct, red cross when not — driven by `:has()` and pseudo-elements, no JavaScript required.

**HTML:**
```html
<label class="if-val">
  <span class="if-val-label">Email</span>
  <span class="if-val-wrap">
    <input type="email" name="email" autocomplete="email" placeholder="name@company.com" required />
  </span>
  <span class="if-val-help">We'll never share your address.</span>
</label>
```

**CSS:**
```css
.if-val {
  display: grid;
  gap: 6px;
  width: 100%;
  max-width: 280px;
  font-size: 11px;
  color: #b8b6d4;
}

.if-val-label {
  font-weight: 600;
  letter-spacing: 0.04em;
}

.if-val-wrap {
  position: relative;
  display: block;
}

.if-val input {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 38px 11px 14px;
  background: #1a1a22;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: #f0eeff;
  font-size: 14px;
  outline: none;
  transition:
    border-color 0.2s,
    background 0.2s;
}

.if-val input:focus {
  border-color: #7c6cff;
}

.if-val-wrap::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%) scale(0.5);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  opacity: 0;
  transition:
    transform 0.2s,
    opacity 0.2s,
    background 0.2s;
}

.if-val:has(input:not(:placeholder-shown):invalid) input {
  border-color: rgba(239, 68, 68, 0.55);
}

.if-val:has(input:not(:placeholder-shown):invalid) .if-val-wrap::after {
  opacity: 1;
  transform: translateY(-50%) scale(1);
  background: #ef4444
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round'><path d='M2 2 L8 8 M8 2 L2 8'/></svg>")
    center/10px no-repeat;
}

.if-val:has(input:not(:placeholder-shown):valid) input {
  border-color: rgba(34, 197, 94, 0.55);
}

.if-val:has(input:not(:placeholder-shown):valid) .if-val-wrap::after {
  opacity: 1;
  transform: translateY(-50%) scale(1);
  background: #22c55e
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M2 5 L4.2 7.2 L8 3'/></svg>")
    center/10px no-repeat;
}

.if-val-help {
  font-size: 10.5px;
  color: #b8b6d4;
}
```

### 08. Search with Clear

**Type:** Pure CSS
**Description:** Search input with a leading magnifier icon and a trailing clear button. The clear control appears only when the field has content — handled with `:placeholder-shown`.

**HTML:**
```html
<form class="if-search" role="search">
  <span class="if-search-icon" aria-hidden="true">
    <svg viewBox="0 0 16 16" width="14" height="14">
      <path
        fill="none"
        stroke="currentColor"
        stroke-width="1.6"
        stroke-linecap="round"
        d="M11 11l3 3M7 12a5 5 0 1 1 0-10 5 5 0 0 1 0 10z"
      />
    </svg>
  </span>
  <input type="search" name="q" placeholder="Search projects, people, files…" aria-label="Search" />
  <button type="reset" class="if-search-clear" aria-label="Clear search">
    <svg viewBox="0 0 12 12" width="10" height="10" aria-hidden="true">
      <path
        fill="none"
        stroke="currentColor"
        stroke-width="1.6"
        stroke-linecap="round"
        d="M2 2l8 8M10 2l-8 8"
      />
    </svg>
  </button>
</form>
```

**CSS:**
```css
.if-search {
  position: relative;
  width: 100%;
  max-width: 280px;
  display: flex;
  align-items: center;
  background: #1a1a22;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  padding: 0 8px 0 36px;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}

.if-search:focus-within {
  border-color: #60a5fa;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.18);
}

.if-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #b8b6d4;
  display: grid;
  place-items: center;
}

.if-search:focus-within .if-search-icon {
  color: #60a5fa;
}

.if-search input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: none;
  color: #f0eeff;
  font-size: 14px;
  padding: 11px 0;
}

.if-search input::placeholder {
  color: #b8b6d4;
}

.if-search input::-webkit-search-cancel-button {
  display: none;
}

.if-search-clear {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  background: rgba(255, 255, 255, 0.06);
  border: 0;
  border-radius: 50%;
  color: #b8b6d4;
  cursor: pointer;
  transition:
    opacity 0.15s,
    background 0.15s,
    color 0.15s;
}

.if-search:has(input:placeholder-shown) .if-search-clear,
.if-search:has(input[value=""]) .if-search-clear {
  opacity: 0;
  pointer-events: none;
}

.if-search-clear:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #f0eeff;
}
```

### 09. Password Strength

**Type:** Pure CSS
**Description:** Sign-up password input with a live strength bar that grades red → amber → green. Driven by `:has(input:valid/:invalid)` — zero scoring JavaScript.

**HTML:**
```html
<label class="if-pw">
  <span class="if-pw-label">Password</span>
  <input
    type="password"
    name="password"
    autocomplete="new-password"
    placeholder="At least 12 characters"
    minlength="6"
    required
  />
  <span class="if-pw-meter" aria-hidden="true"><span class="if-pw-fill"></span></span>
  <span class="if-pw-hint">Use 12+ characters with letters, numbers, and a symbol.</span>
</label>
```

**CSS:**
```css
.if-pw {
  display: grid;
  gap: 6px;
  width: 100%;
  max-width: 280px;
  font-size: 11px;
  color: #b8b6d4;
}

.if-pw-label {
  font-weight: 600;
}

.if-pw input {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 14px;
  background: #1a1a22;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: #f0eeff;
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s;
}

.if-pw input:focus {
  border-color: #c084fc;
}

.if-pw-meter {
  position: relative;
  height: 4px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.if-pw-fill {
  position: absolute;
  inset: 0;
  width: 0;
  background: linear-gradient(90deg, #ef4444, #f59e0b, #22c55e);
  border-radius: inherit;
  transition: width 0.3s ease;
}

.if-pw:has(input:placeholder-shown) .if-pw-fill {
  width: 0;
}

.if-pw:has(input:not(:placeholder-shown):invalid) .if-pw-fill {
  width: 30%;
}

.if-pw:has(input:not(:placeholder-shown):valid) .if-pw-fill {
  width: 65%;
}

.if-pw:has(input:focus:valid) .if-pw-fill {
  width: 100%;
}

.if-pw-hint {
  font-size: 10.5px;
  color: #b8b6d4;
}

.if-pw {
  display: grid;
  gap: 6px;
  width: 100%;
  max-width: 280px;
}

.if-pw-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: #b8b6d4;
  text-transform: uppercase;
}

.if-pw-wrap {
  display: inline-flex;
  align-items: center;
  padding: 0 6px 0 14px;
  background: #1a1a22;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  transition: border-color 0.2s;
}

.if-pw-wrap:focus-within {
  border-color: #7c6cff;
}

.if-pw input {
  flex: 1;
  min-width: 0;
  padding: 12px 0;
  border: 0;
  outline: none;
  background: transparent;
  color: #f0eeff;
  font:
    500 14px/1 system-ui,
    sans-serif;
  letter-spacing: 0.08em;
}

.if-pw input::placeholder {
  color: #b8b6d4;
}

.if-pw-toggle {
  width: 32px;
  height: 32px;
  border: 0;
  cursor: pointer;
  background: transparent;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}

.if-pw-toggle:hover {
  background: rgba(255, 255, 255, 0.05);
}

.if-pw-toggle svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: #b8b6d4;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.if-pw-eye-off {
  display: none;
}

.if-pw-toggle[aria-pressed="true"] .if-pw-eye {
  display: none;
}

.if-pw-toggle[aria-pressed="true"] .if-pw-eye-off {
  display: block;
}

.if-pw-toggle[aria-pressed="true"] svg {
  stroke: #7c6cff;
}
```

### 10. OTP Code

**Type:** Light JS
**Description:** One-time-passcode entry split across six boxes inside a single `<fieldset>`. Auto-advance, backspace step-back, and full paste-to-fill — `autocomplete="one-time-code"` drives SMS auto-suggest.

**HTML:**
```html
<fieldset class="if-otp">
  <legend class="if-otp-legend">Verification code</legend>
  <input
    type="text"
    inputmode="numeric"
    maxlength="1"
    autocomplete="one-time-code"
    pattern="[0-9]"
    aria-label="Digit 1"
    data-if-otp
  />
  <input
    type="text"
    inputmode="numeric"
    maxlength="1"
    pattern="[0-9]"
    aria-label="Digit 2"
    data-if-otp
  />
  <input
    type="text"
    inputmode="numeric"
    maxlength="1"
    pattern="[0-9]"
    aria-label="Digit 3"
    data-if-otp
  />
  <input
    type="text"
    inputmode="numeric"
    maxlength="1"
    pattern="[0-9]"
    aria-label="Digit 4"
    data-if-otp
  />
  <input
    type="text"
    inputmode="numeric"
    maxlength="1"
    pattern="[0-9]"
    aria-label="Digit 5"
    data-if-otp
  />
  <input
    type="text"
    inputmode="numeric"
    maxlength="1"
    pattern="[0-9]"
    aria-label="Digit 6"
    data-if-otp
  />
</fieldset>
```

**CSS:**
```css
.if-otp {
  border: 0;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  width: 100%;
  max-width: 280px;
  position: relative;
}

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

.if-otp input {
  width: 100%;
  box-sizing: border-box;
  aspect-ratio: 1 / 1;
  background: #1a1a22;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  color: #f0eeff;
  outline: none;
  caret-color: #7c6cff;
  transition:
    border-color 0.15s,
    background 0.15s,
    transform 0.12s;
}

.if-otp input:focus {
  border-color: #7c6cff;
  background: rgba(124, 108, 255, 0.1);
  transform: translateY(-1px);
}
```

**JS:**
```js
// OTP — auto-advance, backspace step-back, full paste-to-fill
document.querySelectorAll(".if-otp").forEach(function (row) {
  var inputs = Array.prototype.slice.call(row.querySelectorAll("[data-if-otp]"));
  inputs.forEach(function (input, i) {
    input.addEventListener("input", function () {
      input.value = (input.value || "").replace(/\\D/g, "").slice(0, 1);
      if (input.value && inputs[i + 1]) inputs[i + 1].focus();
    });
    input.addEventListener("keydown", function (e) {
      if (e.key === "Backspace" && !input.value && inputs[i - 1]) inputs[i - 1].focus();
    });
    input.addEventListener("paste", function (e) {
      var data = (e.clipboardData || window.clipboardData).getData("text");
      var digits = (data || "").replace(/\\D/g, "").slice(0, inputs.length);
      if (!digits) return;
      e.preventDefault();
      for (var j = 0; j < digits.length; j++) {
        if (inputs[i + j]) inputs[i + j].value = digits[j];
      }
      inputs[Math.min(i + digits.length, inputs.length - 1)].focus();
    });
  });
});
```

### 11. Rotating Placeholder

**Type:** Light JS
**Description:** The native placeholder attribute itself rotates through four sample queries every 2.5 seconds — "Search products…" → "Search docs…" → "Search people…" → "Search settings…". Light JS swaps the attribute; the browser does the rest. Stops the moment the user focuses or starts typing.

**HTML:**
```html
<label class="if-anim">
  <span class="if-anim-cap">Search</span>
  <input
    type="search"
    name="q"
    inputmode="search"
    placeholder="Search products…"
    aria-label="Search"
    data-if-rotate='["Search products…","Search docs…","Search people…","Search settings…"]'
  />
</label>
```

**CSS:**
```css
.if-anim {
  display: grid;
  gap: 6px;
  width: 100%;
  max-width: 280px;
}

.if-anim-cap {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: #b8b6d4;
  text-transform: uppercase;
}

.if-anim input {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  background: #1a1a22;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  color: #f0eeff;
  font:
    500 14px/1 system-ui,
    sans-serif;
  outline: none;
  transition:
    border-color 0.25s,
    background 0.2s;
}

.if-anim input:focus {
  border-color: #c084fc;
  background: #1f1f2a;
}

.if-anim input::placeholder {
  color: #b8b6d4;
  transition: opacity 0.25s ease;
}

.if-anim input.is-fading::placeholder {
  opacity: 0;
}
```

**JS:**
```js
// Rotating Placeholder — swap the input's placeholder attribute on a 2.5s loop
document.querySelectorAll("[data-if-rotate]").forEach(function (input) {
  var phrases;
  try {
    phrases = JSON.parse(input.getAttribute("data-if-rotate") || "[]");
  } catch (e) {
    phrases = [];
  }
  if (!phrases.length) return;
  var i = 0,
    paused = false;
  function tick() {
    if (paused || document.activeElement === input || input.value) return;
    input.classList.add("is-fading");
    setTimeout(function () {
      i = (i + 1) % phrases.length;
      input.setAttribute("placeholder", phrases[i]);
      input.classList.remove("is-fading");
    }, 250);
  }
  setInterval(tick, 2500);
  input.addEventListener("focus", function () {
    paused = true;
  });
  input.addEventListener("blur", function () {
    paused = !!input.value;
  });
});
```

### 12. Tag Input

**Type:** Light JS
**Description:** Type a tag and press Enter or comma to commit it as a chip. Backspace on an empty input removes the last chip — a polished pattern for filters and email recipients.

**HTML:**
```html
<label class="if-tag">
  <span class="if-tag-label">Tags</span>
  <span class="if-tag-wrap" data-if-tags>
    <span class="if-tag-list"></span>
    <input type="text" placeholder="Add a tag…" aria-label="Tags" />
  </span>
  <span class="if-tag-help">Press <kbd>Enter</kbd> or <kbd>,</kbd> to add</span>
</label>
```

**CSS:**
```css
.if-tag {
  display: grid;
  gap: 6px;
  width: 100%;
  max-width: 280px;
  font-size: 11px;
  color: #b8b6d4;
}

.if-tag-label {
  font-weight: 600;
}

.if-tag-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  background: #1a1a22;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 8px 10px;
  align-items: center;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}

.if-tag-wrap:focus-within {
  border-color: #fb923c;
  box-shadow: 0 0 0 3px rgba(251, 146, 60, 0.15);
}

.if-tag-list {
  display: contents;
}

.if-tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(251, 146, 60, 0.12);
  border: 1px solid rgba(251, 146, 60, 0.35);
  color: #fdba74;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 99px;
  font-weight: 500;
}

.if-tag-chip button {
  background: transparent;
  border: 0;
  padding: 0;
  color: inherit;
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  opacity: 0.7;
}

.if-tag-chip button:hover {
  opacity: 1;
}

.if-tag input {
  flex: 1;
  min-width: 80px;
  background: transparent;
  border: 0;
  outline: none;
  color: #f0eeff;
  font-size: 14px;
  padding: 2px 0;
}

.if-tag input::placeholder {
  color: #b8b6d4;
}

.if-tag-help {
  font-size: 10.5px;
  color: #b8b6d4;
}

.if-tag-help kbd {
  display: inline-block;
  background: #2a2a36;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  padding: 0 4px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
}
```

**JS:**
```js
// Tag input — Enter/comma commits a chip, Backspace removes the last
document.querySelectorAll("[data-if-tags]").forEach(function (wrap) {
  var input = wrap.querySelector("input");
  var list = wrap.querySelector(".if-tag-list");
  if (!input || !list) return;

  function addChip(value) {
    value = (value || "").trim();
    if (!value) return;
    var chip = document.createElement("span");
    chip.className = "if-tag-chip";
    chip.textContent = value + " ";
    var x = document.createElement("button");
    x.type = "button";
    x.setAttribute("aria-label", "Remove tag " + value);
    x.textContent = "×";
    x.addEventListener("click", function () {
      chip.remove();
    });
    chip.appendChild(x);
    list.appendChild(chip);
  }

  input.addEventListener("keydown", function (e) {
    if (e.key === "Enter" || e.key === ",") {
      e.preventDefault();
      addChip(input.value);
      input.value = "";
    } else if (e.key === "Backspace" && !input.value) {
      var last = list.querySelector(".if-tag-chip:last-child");
      if (last) last.remove();
    }
  });
});
```

### 13. Phone with Country

**Type:** Pure CSS
**Description:** Phone number input with a native `<select>` for the country dialling code. Semantic, accessible by default, and styled to match the input seamlessly.

**HTML:**
```html
<label class="if-phone">
  <span class="if-phone-label">Phone</span>
  <span class="if-phone-wrap">
    <select aria-label="Country code" name="country">
      <option value="+44">🇬🇧 +44</option>
      <option value="+1" selected>🇺🇸 +1</option>
      <option value="+91">🇮🇳 +91</option>
      <option value="+33">🇫🇷 +33</option>
      <option value="+49">🇩🇪 +49</option>
      <option value="+81">🇯🇵 +81</option>
    </select>
    <input type="tel" name="phone" autocomplete="tel" placeholder="(555) 123-4567" required />
  </span>
</label>
```

**CSS:**
```css
.if-phone {
  display: grid;
  gap: 6px;
  width: 100%;
  max-width: 280px;
  font-size: 11px;
  color: #b8b6d4;
}

.if-phone-label {
  font-weight: 600;
}

.if-phone-wrap {
  display: grid;
  grid-template-columns: auto 1fr;
  background: #1a1a22;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  overflow: hidden;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}

.if-phone-wrap:focus-within {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

.if-phone select {
  background: rgba(255, 255, 255, 0.04);
  border: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  outline: none;
  color: #f0eeff;
  font-size: 13px;
  padding: 10px 28px 10px 12px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none' stroke='%239d9bbf' stroke-width='1.5' stroke-linecap='round'><path d='M1 1l4 4 4-4'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
}

.if-phone select option {
  background: #1a1a22;
  color: #f0eeff;
}

.if-phone input {
  background: transparent;
  border: 0;
  outline: none;
  color: #f0eeff;
  font-size: 14px;
  padding: 10px 12px;
  min-width: 0;
}

.if-phone input::placeholder {
  color: #b8b6d4;
}
```

### 14. Stepper Number

**Type:** Light JS
**Description:** Quantity input with custom −/+ controls. Native `<input type="number">` underneath keeps keyboard arrows, validation, and screen-reader semantics intact.

**HTML:**
```html
<label class="if-step">
  <span class="if-step-label">Quantity</span>
  <span class="if-step-wrap">
    <button type="button" class="if-step-btn" data-if-step="-1" aria-label="Decrease">−</button>
    <input type="number" name="qty" min="0" max="99" value="1" aria-label="Quantity" />
    <button type="button" class="if-step-btn" data-if-step="1" aria-label="Increase">+</button>
  </span>
</label>
```

**CSS:**
```css
.if-step {
  display: grid;
  gap: 6px;
  width: 100%;
  max-width: 220px;
  font-size: 11px;
  color: #b8b6d4;
}

.if-step-label {
  font-weight: 600;
}

.if-step-wrap {
  display: grid;
  grid-template-columns: 36px 1fr 36px;
  background: #1a1a22;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  overflow: hidden;
  transition: border-color 0.2s;
}

.if-step-wrap:focus-within {
  border-color: #14b8a6;
}

.if-step-btn {
  background: rgba(20, 184, 166, 0.06);
  border: 0;
  color: #5eead4;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s;
}

.if-step-btn:hover {
  background: rgba(20, 184, 166, 0.18);
  color: #fff;
}

.if-step-btn:active {
  background: rgba(20, 184, 166, 0.28);
}

.if-step input {
  background: transparent;
  border: 0;
  outline: none;
  color: #f0eeff;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  padding: 10px 0;
  -moz-appearance: textfield;
}

.if-step input::-webkit-outer-spin-button,
.if-step input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
```

**JS:**
```js
// Stepper +/- buttons — clamp to min/max
document.querySelectorAll(".if-step-wrap").forEach(function (wrap) {
  var input = wrap.querySelector('input[type="number"]');
  if (!input) return;
  wrap.querySelectorAll("[data-if-step]").forEach(function (btn) {
    btn.addEventListener("click", function () {
      var dir = parseInt(btn.dataset.ifStep, 10) || 0;
      var min = input.min !== "" ? Number(input.min) : -Infinity;
      var max = input.max !== "" ? Number(input.max) : Infinity;
      var val = (Number(input.value) || 0) + dir;
      if (val < min) val = min;
      if (val > max) val = max;
      input.value = String(val);
    });
  });
});
```

### 15. File Drop Zone

**Type:** Pure CSS
**Description:** Drag-and-drop file input with a custom dashed boundary. Native `<input type="file">` underneath, the visible filename appearing via `:has()` — accessible, keyboard-friendly, and minimal.

**HTML:**
```html
<label class="if-file">
  <input type="file" name="upload" accept="image/*,.pdf" />
  <span class="if-file-icon" aria-hidden="true">
    <svg
      viewBox="0 0 24 24"
      width="22"
      height="22"
      fill="none"
      stroke="currentColor"
      stroke-width="1.6"
      stroke-linecap="round"
      stroke-linejoin="round"
    >
      <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
      <polyline points="17 8 12 3 7 8" />
      <line x1="12" y1="3" x2="12" y2="15" />
    </svg>
  </span>
  <span class="if-file-text">
    <strong>Click to upload</strong> or drag &amp; drop
    <span class="if-file-types">PNG, JPG, or PDF · max 10 MB</span>
  </span>
</label>
```

**CSS:**
```css
.if-file {
  position: relative;
  display: block;
  width: 100%;
  max-width: 320px;
  cursor: pointer;
  border: 1.5px dashed rgba(99, 102, 241, 0.5);
  border-radius: 12px;
  padding: 22px 18px;
  background: rgba(99, 102, 241, 0.05);
  text-align: center;
  transition:
    border-color 0.2s,
    background 0.2s,
    transform 0.15s;
}

.if-file:hover {
  border-color: #818cf8;
  background: rgba(99, 102, 241, 0.1);
}

.if-file:focus-within {
  border-color: #818cf8;
  background: rgba(99, 102, 241, 0.12);
  box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.18);
}

.if-file input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.if-file-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin: 0 auto 8px;
  border-radius: 10px;
  background: rgba(99, 102, 241, 0.18);
  color: #a5b4fc;
}

.if-file-text {
  display: block;
  font-size: 13px;
  color: #c8c0ff;
}

.if-file-text strong {
  color: #a5b4fc;
  font-weight: 600;
}

.if-file-types {
  display: block;
  font-size: 11px;
  color: #b8b6d4;
  margin-top: 4px;
}
```

### 16. Currency Input

**Type:** Pure CSS
**Description:** Right-aligned numeric input with an inline `$` prefix. `inputmode="decimal"` brings up the right mobile keyboard; `:focus-within` lights the prefix to match the field accent.

**HTML:**
```html
<label class="if-curr">
  <span class="if-curr-label">Amount</span>
  <span class="if-curr-wrap">
    <span class="if-curr-prefix">$</span>
    <input type="text" name="amount" inputmode="decimal" pattern="[0-9.,]*" placeholder="0.00" />
    <span class="if-curr-suffix">USD</span>
  </span>
</label>
```

**CSS:**
```css
.if-curr {
  display: grid;
  gap: 6px;
  width: 100%;
  max-width: 280px;
}

.if-curr-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: #b8b6d4;
  text-transform: uppercase;
}

.if-curr-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  background: #1a1a22;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  transition:
    border-color 0.2s,
    background 0.2s;
}

.if-curr-wrap:focus-within {
  border-color: #f5a84a;
  background: #1f1f2a;
}

.if-curr-prefix {
  color: #b8b6d4;
  font:
    600 14px/1 system-ui,
    sans-serif;
  transition: color 0.2s;
}

.if-curr-wrap:focus-within .if-curr-prefix {
  color: #f5a84a;
}

.if-curr input {
  flex: 1;
  min-width: 0;
  padding: 12px 0;
  border: 0;
  outline: none;
  background: transparent;
  color: #f0eeff;
  font:
    600 14px/1 system-ui,
    sans-serif;
  text-align: right;
  -moz-appearance: textfield;
}

.if-curr input::-webkit-outer-spin-button,
.if-curr input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.if-curr input::placeholder {
  color: #b8b6d4;
}

.if-curr-suffix {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  color: #b8b6d4;
  letter-spacing: 0.06em;
}
```

### 17. Date Picker Native

**Type:** Pure CSS
**Description:** A styled `<input type="date">` keeps every native picker behaviour (keyboard, accessibility, browser/OS calendars) while the chrome matches the rest of your form. `::-webkit-calendar-picker-indicator` is recoloured to match the accent.

**HTML:**
```html
<label class="if-date">
  <span class="if-date-label">Start date</span>
  <input type="date" name="start" />
</label>
```

**CSS:**
```css
.if-date {
  display: grid;
  gap: 6px;
  width: 100%;
  max-width: 280px;
}

.if-date-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: #b8b6d4;
  text-transform: uppercase;
}

.if-date input {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  background: #1a1a22;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  color: #f0eeff;
  font:
    500 14px/1 system-ui,
    sans-serif;
  outline: none;
  transition:
    border-color 0.2s,
    background 0.2s;
  color-scheme: dark;
}

.if-date input:focus {
  border-color: #06b6d4;
  background: #1f1f2a;
}

.if-date input::-webkit-calendar-picker-indicator {
  filter: invert(0.7) sepia(1) saturate(5) hue-rotate(150deg);
  cursor: pointer;
  opacity: 0.8;
}

.if-date input::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}
```

### 18. Time Range

**Type:** Pure CSS
**Description:** Two `<input type="time">` paired with a typographic `→` divider. Single visual unit while remaining two independent fields for keyboard nav and form submission.

**HTML:**
```html
<fieldset class="if-time">
  <legend class="if-time-legend">Quiet hours</legend>
  <span class="if-time-row">
    <label
      ><span class="if-time-cap">From</span><input type="time" name="from" value="22:00"
    /></label>
    <span class="if-time-sep" aria-hidden="true">→</span>
    <label><span class="if-time-cap">To</span><input type="time" name="to" value="07:00" /></label>
  </span>
</fieldset>
```

**CSS:**
```css
.if-time {
  width: 100%;
  max-width: 320px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 12px 14px;
  background: #1a1a22;
}

.if-time-legend {
  padding: 0 6px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: #b8b6d4;
  text-transform: uppercase;
}

.if-time-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.if-time label {
  flex: 1;
  display: grid;
  gap: 4px;
}

.if-time-cap {
  font-size: 10px;
  color: #b8b6d4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.if-time input {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  background: #0c0c12;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: #f0eeff;
  font:
    600 13px/1 "JetBrains Mono",
    monospace;
  outline: none;
  color-scheme: dark;
}

.if-time input:focus {
  border-color: #a78bfa;
}

.if-time-sep {
  color: #a78bfa;
  font-size: 14px;
  align-self: end;
  padding-bottom: 9px;
}
```

### 19. Color Picker

**Type:** Pure CSS
**Description:** A `<input type="color">` swatch chip paired with a hex text field — both accept the same `name` and submit value via the underlying form. Sibling-`+` selectors mirror the swatch state.

**HTML:**
```html
<label class="if-color">
  <span class="if-color-label">Brand colour</span>
  <span class="if-color-wrap">
    <input type="color" id="if-color-c" value="#7c6cff" aria-label="Pick colour" />
    <input
      type="text"
      id="if-color-t"
      value="#7c6cff"
      aria-label="Hex value"
      pattern="^#[0-9A-Fa-f]{6}$"
    />
  </span>
</label>
```

**CSS:**
```css
.if-color {
  display: grid;
  gap: 6px;
  width: 100%;
  max-width: 280px;
}

.if-color-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: #b8b6d4;
  text-transform: uppercase;
}

.if-color-wrap {
  display: inline-flex;
  align-items: stretch;
  gap: 0;
  background: #1a1a22;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 0.2s;
}

.if-color-wrap:focus-within {
  border-color: #7c6cff;
}

.if-color input[type="color"] {
  width: 44px;
  height: 44px;
  padding: 6px;
  border: 0;
  outline: none;
  cursor: pointer;
  background: transparent;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.if-color input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}

.if-color input[type="color"]::-webkit-color-swatch {
  border: 0;
  border-radius: 6px;
}

.if-color input[type="text"] {
  flex: 1;
  min-width: 0;
  padding: 0 14px;
  border: 0;
  outline: none;
  background: transparent;
  color: #f0eeff;
  font:
    600 13px/1 "JetBrains Mono",
    monospace;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
```

### 20. Search with Voice

**Type:** Light JS
**Description:** Search field with a microphone trigger that toggles a recording state — pulses a halo while "listening". Real `<input type="search">` so AT announces it as a search field.

**HTML:**
```html
<form class="if-voice" role="search" autocomplete="off">
  <label class="if-voice-label" for="if-voice-input">Voice search</label>
  <span class="if-voice-wrap">
    <svg viewBox="0 0 24 24" aria-hidden="true" class="if-voice-glass">
      <circle cx="11" cy="11" r="7" />
      <path d="m20 20-3.5-3.5" />
    </svg>
    <input
      id="if-voice-input"
      type="search"
      name="q"
      inputmode="search"
      placeholder="Speak or type to search..."
    />
    <button
      type="button"
      class="if-voice-mic"
      aria-label="Start voice input"
      aria-pressed="false"
      data-if-voice
    >
      <svg viewBox="0 0 24 24" aria-hidden="true">
        <rect x="9" y="3" width="6" height="11" rx="3" />
        <path d="M5 11a7 7 0 0 0 14 0M12 18v3" />
      </svg>
    </button>
  </span>
</form>
```

**CSS:**
```css
.if-voice {
  display: grid;
  gap: 6px;
  width: 100%;
  max-width: 320px;
}

.if-voice-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: #b8b6d4;
  text-transform: uppercase;
}

.if-voice-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 4px 4px 14px;
  background: #1a1a22;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  transition: border-color 0.2s;
}

.if-voice-wrap:focus-within {
  border-color: #ff6c8a;
}

.if-voice-glass {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  fill: none;
  stroke: #6b6987;
  stroke-width: 2;
  stroke-linecap: round;
}

.if-voice input {
  flex: 1;
  min-width: 0;
  padding: 8px 0;
  border: 0;
  outline: none;
  background: transparent;
  color: #f0eeff;
  font:
    500 14px/1 system-ui,
    sans-serif;
}

.if-voice input::placeholder {
  color: #b8b6d4;
}

.if-voice-mic {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border: 0;
  cursor: pointer;
  background: transparent;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: background 0.2s;
}

.if-voice-mic:hover {
  background: rgba(255, 108, 138, 0.1);
}

.if-voice-mic svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: #a78bfa;
  stroke-width: 2;
  stroke-linecap: round;
}

.if-voice-mic[aria-pressed="true"] svg {
  stroke: #ff6c8a;
}

.if-voice-mic[aria-pressed="true"]::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 6px;
  border: 1.5px solid #ff6c8a;
  animation: if-voice-pulse 1.2s ease-out infinite;
}

@keyframes if-voice-pulse {
  0%   { transform: scale(0.8); opacity: 1; }
  100% { transform: scale(1.4); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .if-voice-mic[aria-pressed="true"]::after {
    animation: none !important;
  }
}
```

**JS:**
```js
// Voice button — toggle aria-pressed (mock recording state for the demo)
document.querySelectorAll("[data-if-voice]").forEach(function (btn) {
  btn.addEventListener("click", function () {
    var on = btn.getAttribute("aria-pressed") === "true";
    btn.setAttribute("aria-pressed", on ? "false" : "true");
    btn.setAttribute("aria-label", on ? "Start voice input" : "Stop voice input");
    // Hook real Web Speech API here if you want actual voice input:
    // const rec = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
  });
});
```

### 21. Email with Suggestions

**Type:** Light JS
**Description:** When the user types `@`, common email domains are suggested in a keyboard-navigable dropdown. `aria-controls` + `aria-expanded` + `role="listbox"` make it a proper combobox.

**HTML:**
```html
<label class="if-mail">
  <span class="if-mail-label">Work email</span>
  <span class="if-mail-wrap">
    <input
      id="if-mail-input"
      type="email"
      name="email"
      autocomplete="email"
      placeholder="you@example.com"
      aria-controls="if-mail-list"
      aria-expanded="false"
      aria-autocomplete="list"
    />
    <ul id="if-mail-list" class="if-mail-list" role="listbox" hidden></ul>
  </span>
</label>
```

**CSS:**
```css
.if-mail {
  display: grid;
  gap: 6px;
  width: 100%;
  max-width: 280px;
}

.if-mail-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: #b8b6d4;
  text-transform: uppercase;
}

.if-mail-wrap {
  position: relative;
  display: block;
}

.if-mail input {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  background: #1a1a22;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  color: #f0eeff;
  font:
    500 14px/1 system-ui,
    sans-serif;
  outline: none;
  transition:
    border-color 0.2s,
    border-radius 0.15s;
}

.if-mail input:focus {
  border-color: #2eb88a;
}

.if-mail input[aria-expanded="true"] {
  border-radius: 10px 10px 0 0;
  border-bottom-color: transparent;
}

.if-mail-list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: #1a1a22;
  border: 1px solid #2eb88a;
  border-top: 0;
  border-radius: 0 0 10px 10px;
  z-index: 10;
  max-height: 180px;
  overflow-y: auto;
}

.if-mail-list li {
  padding: 7px 10px;
  font:
    500 13px/1.2 system-ui,
    sans-serif;
  color: #cbd5e1;
  cursor: pointer;
  border-radius: 6px;
}

.if-mail-list li[aria-selected="true"],
.if-mail-list li:hover {
  background: rgba(46, 184, 138, 0.15);
  color: #fff;
}

.if-mail-list li b {
  color: #2eb88a;
  font-weight: 600;
}
```

**JS:**
```js
// Email Suggestions — show common domains after the user types '@'
(function () {
  var input = document.getElementById("if-mail-input");
  var list = document.getElementById("if-mail-list");
  if (!input || !list) return;
  var DOMAINS = ["gmail.com", "outlook.com", "icloud.com", "protonmail.com", "fastmail.com"];
  var idx = -1;

  function close() {
    list.hidden = true;
    input.setAttribute("aria-expanded", "false");
    idx = -1;
  }
  function render(local) {
    list.innerHTML = "";
    DOMAINS.forEach(function (d) {
      var li = document.createElement("li");
      li.setAttribute("role", "option");
      li.innerHTML = (local || "") + "<b>@" + d + "</b>";
      list.appendChild(li);
    });
  }
  function open(local) {
    render(local);
    list.hidden = false;
    input.setAttribute("aria-expanded", "true");
  }
  function select(n) {
    var items = list.querySelectorAll("li");
    items.forEach(function (li) {
      li.removeAttribute("aria-selected");
    });
    idx = (n + items.length) % items.length;
    items[idx].setAttribute("aria-selected", "true");
  }

  input.addEventListener("input", function () {
    var v = input.value,
      at = v.indexOf("@");
    if (at >= 0) open(v.substring(0, at + 1));
    else close();
  });
  input.addEventListener("blur", function () {
    setTimeout(close, 150);
  });
  input.addEventListener("keydown", function (e) {
    if (list.hidden) return;
    var items = list.querySelectorAll("li");
    if (e.key === "ArrowDown") {
      e.preventDefault();
      select(idx + 1);
    } else if (e.key === "ArrowUp") {
      e.preventDefault();
      select(idx - 1);
    } else if (e.key === "Escape") {
      close();
    } else if (e.key === "Enter" && idx >= 0) {
      e.preventDefault();
      input.value = items[idx].textContent;
      close();
    }
  });
  list.addEventListener("mousedown", function (e) {
    var li = e.target.closest('li[role="option"]');
    if (li) {
      input.value = li.textContent;
      close();
    }
  });
})();
```

### 22. Auto-Grow Textarea

**Type:** Pure CSS
**Description:** A multi-line `<textarea>` that grows with its content using `field-sizing: content` — no JS observer needed. Falls back to a min-height on browsers without support.

**HTML:**
```html
<label class="if-grow">
  <span class="if-grow-label">Notes</span>
  <textarea name="notes" rows="2" placeholder="Type as much as you need..."></textarea>
  <span class="if-grow-hint">Field grows as you type</span>
</label>
```

**CSS:**
```css
.if-grow {
  display: grid;
  gap: 6px;
  width: 100%;
  max-width: 320px;
}

.if-grow-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: #b8b6d4;
  text-transform: uppercase;
}

.if-grow textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  background: #1a1a22;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  color: #f0eeff;
  font:
    500 14px/1.55 system-ui,
    sans-serif;
  outline: none;
  resize: none;
  min-height: 64px;
  field-sizing: content;
  transition:
    border-color 0.2s,
    background 0.2s;
}

.if-grow textarea:focus {
  border-color: #a78bfa;
  background: #1f1f2a;
}

.if-grow textarea::placeholder {
  color: #b8b6d4;
}

.if-grow-hint {
  font-size: 11px;
  color: #b8b6d4;
}
```

### 23. Inline Edit

**Type:** Light JS
**Description:** Click-to-edit text that swaps between a static value and an editable input. Saves on Enter, cancels on Escape, blurs to commit — the canonical pattern from Notion and Linear.

**HTML:**
```html
<label class="if-edit">
  <span class="if-edit-label">Project name</span>
  <span class="if-edit-wrap" data-if-edit data-value="Aurora Dashboard">
    <span class="if-edit-display" tabindex="0" role="button" aria-label="Edit project name"
      >Aurora Dashboard</span
    >
    <input class="if-edit-input" type="text" value="Aurora Dashboard" hidden />
    <span class="if-edit-pencil" aria-hidden="true">✎</span>
  </span>
</label>
```

**CSS:**
```css
.if-edit {
  display: grid;
  gap: 6px;
  width: 100%;
  max-width: 280px;
}

.if-edit-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: #b8b6d4;
  text-transform: uppercase;
}

.if-edit-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: transparent;
  border: 1px dashed transparent;
  border-radius: 8px;
  cursor: text;
  transition:
    background 0.15s,
    border-color 0.15s;
}

.if-edit-wrap:hover {
  background: rgba(124, 108, 255, 0.06);
  border-color: rgba(124, 108, 255, 0.2);
}

.if-edit-display,
.if-edit-input {
  font:
    600 14px/1.3 system-ui,
    sans-serif;
  color: #f0eeff;
  flex: 1;
  min-width: 0;
}

.if-edit-display {
  outline: none;
}

.if-edit-input {
  border: 0;
  outline: none;
  background: transparent;
  padding: 0;
}

.if-edit-pencil {
  font-size: 12px;
  color: #7a7899;
  opacity: 0;
  transition: opacity 0.15s;
}

.if-edit-wrap:hover .if-edit-pencil {
  opacity: 1;
}

.if-edit-wrap.is-editing {
  background: #1a1a22;
  border-color: #7c6cff;
  border-style: solid;
}

.if-edit-wrap.is-editing .if-edit-pencil {
  display: none;
}
```

**JS:**
```js
// Inline Edit — click to edit, Enter saves, Escape cancels, blur commits
document.querySelectorAll("[data-if-edit]").forEach(function (wrap) {
  var display = wrap.querySelector(".if-edit-display");
  var input = wrap.querySelector(".if-edit-input");

  function enter() {
    wrap.classList.add("is-editing");
    display.hidden = true;
    input.hidden = false;
    input.value = display.textContent;
    input.focus();
    input.select();
  }
  function commit() {
    var v = input.value.trim();
    if (v) {
      display.textContent = v;
      wrap.dataset.value = v;
    } else {
      input.value = display.textContent;
    }
    exit();
  }
  function cancel() {
    input.value = display.textContent;
    exit();
  }
  function exit() {
    wrap.classList.remove("is-editing");
    input.hidden = true;
    display.hidden = false;
  }

  display.addEventListener("click", enter);
  display.addEventListener("keydown", function (e) {
    if (e.key === "Enter" || e.key === " ") {
      e.preventDefault();
      enter();
    }
  });
  input.addEventListener("blur", commit);
  input.addEventListener("keydown", function (e) {
    if (e.key === "Enter") {
      e.preventDefault();
      commit();
    }
    if (e.key === "Escape") {
      e.preventDefault();
      cancel();
    }
  });
});
```

### 24. Range Slider Pro

**Type:** Light JS
**Description:** A native `<input type="range">` with custom track/thumb styling and a live value bubble that follows the thumb. Honest accessibility — keyboard arrows, screen-reader announcement, real form value.

**HTML:**
```html
<label class="if-range" for="if-range-input">
  <span class="if-range-label">Volume <span class="if-range-bubble" data-if-bubble>50</span></span>
  <input
    id="if-range-input"
    type="range"
    name="volume"
    min="0"
    max="100"
    value="50"
    data-if-range
  />
</label>
```

**CSS:**
```css
.if-range {
  display: grid;
  gap: 8px;
  width: 100%;
  max-width: 280px;
}

.if-range-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: #b8b6d4;
  text-transform: uppercase;
}

.if-range-bubble {
  font:
    700 11px/1 "JetBrains Mono",
    monospace;
  color: #f0eeff;
  background: #7c6cff;
  padding: 3px 7px;
  border-radius: 999px;
  letter-spacing: 0;
}

.if-range input {
  width: 100%;
  height: 6px;
  -webkit-appearance: none;
  appearance: none;
  background: linear-gradient(
    90deg,
    #7c6cff 0%,
    #7c6cff var(--if-range-fill, 50%),
    rgba(255, 255, 255, 0.08) var(--if-range-fill, 50%),
    rgba(255, 255, 255, 0.08) 100%
  );
  border-radius: 999px;
  outline: none;
  cursor: pointer;
}

.if-range input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  background: #fff;
  border: 0;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(124, 108, 255, 0.5);
  cursor: pointer;
  transition: transform 0.15s;
}

.if-range input::-webkit-slider-thumb:hover {
  transform: scale(1.12);
}

.if-range input::-moz-range-thumb {
  width: 18px;
  height: 18px;
  background: #fff;
  border: 0;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(124, 108, 255, 0.5);
  cursor: pointer;
}
```

**JS:**
```js
// Range Slider Pro — sync the live value bubble + paint the gradient fill via custom property
document.querySelectorAll("[data-if-range]").forEach(function (input) {
  var bubble = input.closest(".if-range").querySelector("[data-if-bubble]");
  function update() {
    var min = Number(input.min) || 0;
    var max = Number(input.max) || 100;
    var pct = ((Number(input.value) - min) / (max - min)) * 100;
    input.style.setProperty("--if-range-fill", pct + "%");
    if (bubble) bubble.textContent = String(input.value);
  }
  input.addEventListener("input", update);
  update();
});
```

### 25. URL with Protocol

**Type:** Pure CSS
**Description:** URL input with a non-editable `https://` prefix that visually integrates with the field. Submit value is the full URL; users only type the host portion.

**HTML:**
```html
<label class="if-url">
  <span class="if-url-label">Website</span>
  <span class="if-url-wrap">
    <span class="if-url-prefix">https://</span>
    <input
      type="text"
      name="url-host"
      inputmode="url"
      placeholder="codefronts.com"
      pattern="[a-zA-Z0-9.-]+\\\\.[a-zA-Z]{2,}.*"
    />
  </span>
</label>
```

**CSS:**
```css
.if-url {
  display: grid;
  gap: 6px;
  width: 100%;
  max-width: 320px;
}

.if-url-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: #b8b6d4;
  text-transform: uppercase;
}

.if-url-wrap {
  display: inline-flex;
  align-items: stretch;
  background: #1a1a22;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 0.2s;
}

.if-url-wrap:focus-within {
  border-color: #06b6d4;
}

.if-url-prefix {
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  background: rgba(6, 182, 212, 0.08);
  color: #06b6d4;
  font:
    600 12px/1 "JetBrains Mono",
    monospace;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.if-url input {
  flex: 1;
  min-width: 0;
  padding: 12px 14px;
  border: 0;
  outline: none;
  background: transparent;
  color: #f0eeff;
  font:
    500 14px/1 system-ui,
    sans-serif;
}

.if-url input::placeholder {
  color: #b8b6d4;
}
```

### 26. Credit Card

**Type:** Light JS
**Description:** Auto-formatted 16-digit card number with brand-aware accent (Visa, Mastercard, Amex). `inputmode="numeric"` on mobile; pattern validation; `autocomplete="cc-number"`.

**HTML:**
```html
<label class="if-card">
  <span class="if-card-label">Card number</span>
  <span class="if-card-wrap" data-if-card>
    <span class="if-card-brand" aria-hidden="true">CARD</span>
    <input
      type="text"
      name="cc"
      inputmode="numeric"
      autocomplete="cc-number"
      maxlength="19"
      placeholder="•••• •••• •••• ••••"
    />
  </span>
</label>
```

**CSS:**
```css
.if-card {
  display: grid;
  gap: 6px;
  width: 100%;
  max-width: 320px;
}

.if-card-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: #b8b6d4;
  text-transform: uppercase;
}

.if-card-wrap {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px 0 14px;
  background: #1a1a22;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  transition: border-color 0.2s;
}

.if-card-wrap:focus-within {
  border-color: #f5a84a;
}

.if-card-brand {
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 3px 7px;
  background: rgba(245, 168, 74, 0.12);
  color: #f5a84a;
  border-radius: 4px;
  flex-shrink: 0;
  transition:
    background 0.2s,
    color 0.2s;
}

.if-card-wrap[data-brand="visa"] .if-card-brand {
  background: rgba(67, 127, 193, 0.18);
  color: #6aa3e0;
}

.if-card-wrap[data-brand="mastercard"] .if-card-brand {
  background: rgba(255, 90, 90, 0.16);
  color: #ff7a7a;
}

.if-card-wrap[data-brand="amex"] .if-card-brand {
  background: rgba(46, 184, 138, 0.16);
  color: #2eb88a;
}

.if-card input {
  flex: 1;
  min-width: 0;
  padding: 13px 0;
  border: 0;
  outline: none;
  background: transparent;
  color: #f0eeff;
  font:
    600 14px/1 "JetBrains Mono",
    monospace;
  letter-spacing: 0.08em;
}

.if-card input::placeholder {
  color: #b8b6d4;
}
```

**JS:**
```js
// Credit Card — auto-format groups of 4 + brand detection
document.querySelectorAll("[data-if-card] input").forEach(function (input) {
  var wrap = input.closest("[data-if-card]");
  var brand = wrap.querySelector(".if-card-brand");

  function detect(digits) {
    if (/^4/.test(digits)) return ["visa", "VISA"];
    if (/^(5[1-5]|2[2-7])/.test(digits)) return ["mastercard", "MC"];
    if (/^3[47]/.test(digits)) return ["amex", "AMEX"];
    if (/^6(011|5)/.test(digits)) return ["discover", "DISC"];
    return ["", "CARD"];
  }

  input.addEventListener("input", function () {
    var digits = input.value.replace(/\\D/g, "").slice(0, 19);
    input.value = (digits.match(/.{1,4}/g) || [""]).join(" ");
    var info = detect(digits);
    if (info[0]) wrap.setAttribute("data-brand", info[0]);
    else wrap.removeAttribute("data-brand");
    brand.textContent = info[1];
  });
});
```

### 27. Toggle Password

**Type:** Light JS
**Description:** Password field with an eye toggle that swaps `type="password"` ↔ `type="text"`. `aria-pressed` reflects state for screen readers; `autocomplete="new-password"` for sign-up flows.

**HTML:**
```html
<label class="if-pw">
  <span class="if-pw-label">Password</span>
  <span class="if-pw-wrap">
    <input
      type="password"
      name="pw"
      autocomplete="new-password"
      placeholder="At least 8 characters"
      minlength="8"
      data-if-pw
    />
    <button
      type="button"
      class="if-pw-toggle"
      aria-label="Show password"
      aria-pressed="false"
      data-if-pw-toggle
    >
      <svg class="if-pw-eye" viewBox="0 0 24 24" aria-hidden="true">
        <path d="M2 12s4-7 10-7 10 7 10 7-4 7-10 7-10-7-10-7Z" />
        <circle cx="12" cy="12" r="3" />
      </svg>
      <svg class="if-pw-eye-off" viewBox="0 0 24 24" aria-hidden="true">
        <path
          d="M3 3l18 18M9.9 5.1A10 10 0 0 1 22 12a16 16 0 0 1-2.7 3.7M6.7 6.7A16 16 0 0 0 2 12s4 7 10 7a10 10 0 0 0 4.1-.9"
        />
      </svg>
    </button>
  </span>
</label>
```

**CSS:**
```css
.if-pw {
  display: grid;
  gap: 6px;
  width: 100%;
  max-width: 280px;
  font-size: 11px;
  color: #b8b6d4;
}

.if-pw-label {
  font-weight: 600;
}

.if-pw input {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 14px;
  background: #1a1a22;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: #f0eeff;
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s;
}

.if-pw input:focus {
  border-color: #c084fc;
}

.if-pw-meter {
  position: relative;
  height: 4px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.if-pw-fill {
  position: absolute;
  inset: 0;
  width: 0;
  background: linear-gradient(90deg, #ef4444, #f59e0b, #22c55e);
  border-radius: inherit;
  transition: width 0.3s ease;
}

.if-pw:has(input:placeholder-shown) .if-pw-fill {
  width: 0;
}

.if-pw:has(input:not(:placeholder-shown):invalid) .if-pw-fill {
  width: 30%;
}

.if-pw:has(input:not(:placeholder-shown):valid) .if-pw-fill {
  width: 65%;
}

.if-pw:has(input:focus:valid) .if-pw-fill {
  width: 100%;
}

.if-pw-hint {
  font-size: 10.5px;
  color: #b8b6d4;
}

.if-pw {
  display: grid;
  gap: 6px;
  width: 100%;
  max-width: 280px;
}

.if-pw-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: #b8b6d4;
  text-transform: uppercase;
}

.if-pw-wrap {
  display: inline-flex;
  align-items: center;
  padding: 0 6px 0 14px;
  background: #1a1a22;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  transition: border-color 0.2s;
}

.if-pw-wrap:focus-within {
  border-color: #7c6cff;
}

.if-pw input {
  flex: 1;
  min-width: 0;
  padding: 12px 0;
  border: 0;
  outline: none;
  background: transparent;
  color: #f0eeff;
  font:
    500 14px/1 system-ui,
    sans-serif;
  letter-spacing: 0.08em;
}

.if-pw input::placeholder {
  color: #b8b6d4;
}

.if-pw-toggle {
  width: 32px;
  height: 32px;
  border: 0;
  cursor: pointer;
  background: transparent;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}

.if-pw-toggle:hover {
  background: rgba(255, 255, 255, 0.05);
}

.if-pw-toggle svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: #b8b6d4;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.if-pw-eye-off {
  display: none;
}

.if-pw-toggle[aria-pressed="true"] .if-pw-eye {
  display: none;
}

.if-pw-toggle[aria-pressed="true"] .if-pw-eye-off {
  display: block;
}

.if-pw-toggle[aria-pressed="true"] svg {
  stroke: #7c6cff;
}
```

**JS:**
```js
// Toggle Password — swap input type + reflect state via aria-pressed
document.querySelectorAll("[data-if-pw-toggle]").forEach(function (btn) {
  var input = btn.closest(".if-pw-wrap").querySelector("input");
  btn.addEventListener("click", function () {
    var on = btn.getAttribute("aria-pressed") === "true";
    btn.setAttribute("aria-pressed", on ? "false" : "true");
    btn.setAttribute("aria-label", on ? "Show password" : "Hide password");
    input.type = on ? "password" : "text";
  });
});
```

### 28. Brutalist Input

**Type:** Pure CSS
**Description:** Bold offset-shadow stamp with hard edges and monospace type — a confident input that doesn't apologize for itself. Press collapses into the shadow on focus.

**HTML:**
```html
<label class="if-brut">
  <span class="if-brut-label">USERNAME_</span>
  <input type="text" name="user-brut" placeholder="enter handle..." />
</label>
```

**CSS:**
```css
.if-brut {
  display: grid;
  gap: 8px;
  width: 100%;
  max-width: 280px;
}

.if-brut-label {
  font-family: "Courier New", monospace;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #f0eeff;
}

.if-brut input {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  background: #f0eeff;
  border: 2.5px solid #1a1a2e;
  border-radius: 0;
  color: #1a1a2e;
  font:
    700 13px/1 "Courier New",
    monospace;
  letter-spacing: 0.06em;
  outline: none;
  box-shadow: 5px 5px 0 #ff6c8a;
  transition:
    transform 0.1s,
    box-shadow 0.1s;
}

.if-brut input::placeholder {
  color: rgba(26, 26, 46, 0.5);
}

.if-brut input:focus {
  transform: translate(2px, 2px);
  box-shadow: 3px 3px 0 #ff6c8a;
}

.if-brut input:invalid:not(:placeholder-shown) {
  box-shadow: 5px 5px 0 #ff5d6c;
}
```

---
## 30 CSS Keyframe Animations

URL: https://codefronts.com/motion/css-keyframe-animations/
Description: 30 hand-coded CSS @keyframes animations covering every production motion pattern in 2026 — loading spinners (6 variants), typewriter text effect, bouncing ball, pulse-glow buttons, morphing blobs, particle burst, ocean waves, 3D flip cards, neon flicker, skeleton loading shimmer, glitch text, solar-system orbit, liquid-fill progress, stagger list reveal, fire animation, ripple click, floating elements, infinite-scroll ticker (marquee replacement), countdown timer, path drawing, spotlight, spring bounce, confetti explosion (no canvas), breathing meditation pulse, typewriter-delete loop, aurora borealis background, card stack reveal, kinetic typography, morphing progress steps, and animated gradient mesh background. All 30 are 100% pure CSS — zero JavaScript, zero libraries, zero dependencies. GPU-accelerated via transform + opacity (compositor-thread, 60fps on mid-tier mobile, INP-friendly). Each demo uses scoped .kf-NN__* class names + prefixed @keyframes names so all 30 coexist on the same page. Respects prefers-reduced-motion. MIT-licensed.
Demo count: 30

### 01. CSS Keyframe Loading Spinners

**Type:** Pure CSS
**Description:** Nine animated CSS loading spinners — ring, dual-rotate, dot orbit, morph shape, pulse dots, audio wave, comet trail, folding grid, and progress sweep — each driven by a single scoped keyframe.

**HTML:**
```html
<div class="kf-01">
  <div class="kf-01__stage">
    <div class="kf-01__cell">
      <div class="kf-01__ring"></div>
      <span class="kf-01__label">Classic Ring</span>
    </div>
    <div class="kf-01__cell">
      <div class="kf-01__dual"><i></i><i></i></div>
      <span class="kf-01__label">Dual Rotate</span>
    </div>
    <div class="kf-01__cell">
      <div class="kf-01__orbit"><span></span><span></span><span></span><span></span></div>
      <span class="kf-01__label">Dot Orbit</span>
    </div>
    <div class="kf-01__cell">
      <div class="kf-01__morph"></div>
      <span class="kf-01__label">Morph Shape</span>
    </div>
    <div class="kf-01__cell">
      <div class="kf-01__dots"><span></span><span></span><span></span></div>
      <span class="kf-01__label">Pulse Dots</span>
    </div>
    <div class="kf-01__cell">
      <div class="kf-01__wave"><span></span><span></span><span></span><span></span><span></span></div>
      <span class="kf-01__label">Audio Wave</span>
    </div>
    <div class="kf-01__cell">
      <div class="kf-01__comet"></div>
      <span class="kf-01__label">Comet Trail</span>
    </div>
    <div class="kf-01__cell">
      <div class="kf-01__fold"><span></span><span></span><span></span><span></span></div>
      <span class="kf-01__label">Folding Grid</span>
    </div>
    <div class="kf-01__cell">
      <div class="kf-01__bar"><div class="kf-01__bar-track"><div class="kf-01__bar-fill"></div></div></div>
      <span class="kf-01__label">Progress Sweep</span>
    </div>
  </div>
</div>
```

**CSS:**
```css
.kf-01,.kf-01 *,.kf-01 *::before,.kf-01 *::after{box-sizing:border-box;margin:0;padding:0}
.kf-01 ::selection{background:#6c63ff;color:#fff}
.kf-01{
  --bg:#0f0e17;
  --purple:#6c63ff;
  --pink:#ff6584;
  --cyan:#43e8d8;
  --gold:#ffd166;
  --white:#fffffe;
  font-family:'Segoe UI',sans-serif;
  background:var(--bg);
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  padding:40px 20px;
  color:var(--white);
}
.kf-01__stage{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:40px;
  max-width:860px;
  width:100%;
}
.kf-01__cell{
  display:flex;flex-direction:column;align-items:center;gap:20px;
  padding:32px 20px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
}
.kf-01__label{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.4);text-align:center}

/* 1 — classic ring */
.kf-01__ring{
  width:64px;height:64px;border-radius:50%;
  border:4px solid rgba(108,99,255,.2);
  border-top-color:var(--purple);
  animation:kf-01-spin .9s linear infinite;
}
@keyframes kf-01-spin{to{transform:rotate(360deg)}}

/* 2 — dual counter-rotate */
.kf-01__dual{width:64px;height:64px;position:relative}
.kf-01__dual i{position:absolute;inset:0;border-radius:50%;border:4px solid transparent}
.kf-01__dual i:nth-child(1){border-top-color:var(--pink);border-right-color:var(--pink);animation:kf-01-spin .8s linear infinite}
.kf-01__dual i:nth-child(2){inset:12px;border-bottom-color:var(--cyan);border-left-color:var(--cyan);animation:kf-01-spin .8s linear infinite reverse}

/* 3 — dotted orbit */
.kf-01__orbit{width:64px;height:64px;position:relative;animation:kf-01-spin 1.4s linear infinite}
.kf-01__orbit span{position:absolute;width:12px;height:12px;border-radius:50%;background:var(--gold);top:0;left:50%;transform:translateX(-50%)}
.kf-01__orbit span:nth-child(2){animation:kf-01-spin 1.4s linear infinite reverse;background:var(--purple);top:auto;bottom:0}
.kf-01__orbit span:nth-child(3){top:50%;left:0;transform:translateY(-50%);background:var(--pink)}
.kf-01__orbit span:nth-child(4){top:50%;right:0;left:auto;transform:translateY(-50%);background:var(--cyan)}

/* 4 — morphing square */
.kf-01__morph{
  width:52px;height:52px;
  background:var(--purple);
  animation:kf-01-morph 1.6s ease-in-out infinite;
}
@keyframes kf-01-morph{
  0%{border-radius:0;transform:rotate(0)}
  25%{border-radius:50%;transform:rotate(90deg)}
  50%{border-radius:0;transform:rotate(180deg) scaleX(.5)}
  75%{border-radius:50%;transform:rotate(270deg)}
  100%{border-radius:0;transform:rotate(360deg)}
}

/* 5 — pulse dots */
.kf-01__dots{display:flex;gap:10px;align-items:center}
.kf-01__dots span{width:14px;height:14px;border-radius:50%;background:var(--cyan);animation:kf-01-pulse 1.2s ease-in-out infinite}
.kf-01__dots span:nth-child(2){animation-delay:.2s;background:var(--purple)}
.kf-01__dots span:nth-child(3){animation-delay:.4s;background:var(--pink)}
@keyframes kf-01-pulse{0%,80%,100%{transform:scale(.6);opacity:.4}40%{transform:scale(1);opacity:1}}

/* 6 — wave bars */
.kf-01__wave{display:flex;gap:5px;align-items:flex-end;height:48px}
.kf-01__wave span{width:8px;border-radius:4px 4px 0 0;background:var(--gold);animation:kf-01-wave 1s ease-in-out infinite}
.kf-01__wave span:nth-child(1){animation-delay:0s}
.kf-01__wave span:nth-child(2){animation-delay:.1s}
.kf-01__wave span:nth-child(3){animation-delay:.2s}
.kf-01__wave span:nth-child(4){animation-delay:.3s}
.kf-01__wave span:nth-child(5){animation-delay:.4s}
@keyframes kf-01-wave{0%,100%{height:12px;opacity:.4}50%{height:42px;opacity:1}}

/* 7 — comet trail */
.kf-01__comet{width:64px;height:64px;position:relative}
.kf-01__comet::before{
  content:'';position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(transparent 60%,var(--pink));
  animation:kf-01-spin .8s linear infinite;
}
.kf-01__comet::after{
  content:'';position:absolute;top:50%;left:50%;
  width:10px;height:10px;margin:-5px 0 0 -5px;
  border-radius:50%;background:var(--white);
  box-shadow:0 0 12px var(--pink);
}

/* 8 — folding squares */
.kf-01__fold{width:40px;height:40px;position:relative;transform:rotate(45deg)}
.kf-01__fold span{position:absolute;width:50%;height:50%;background:var(--purple)}
.kf-01__fold span:nth-child(1){top:0;left:0;animation:kf-01-fold 2s ease-in-out infinite}
.kf-01__fold span:nth-child(2){top:0;right:0;background:var(--cyan);animation:kf-01-fold 2s ease-in-out infinite .5s}
.kf-01__fold span:nth-child(3){bottom:0;right:0;background:var(--pink);animation:kf-01-fold 2s ease-in-out infinite 1s}
.kf-01__fold span:nth-child(4){bottom:0;left:0;background:var(--gold);animation:kf-01-fold 2s ease-in-out infinite 1.5s}
@keyframes kf-01-fold{0%,10%,90%,100%{opacity:1;transform:scale(1)}50%{opacity:0;transform:scale(0)}}

/* 9 — progress bar */
.kf-01__bar{width:100%;max-width:160px}
.kf-01__bar-track{height:6px;background:rgba(255,255,255,.1);border-radius:3px;overflow:hidden}
.kf-01__bar-fill{height:100%;border-radius:3px;background:linear-gradient(90deg,var(--purple),var(--pink));animation:kf-01-bar 2s ease-in-out infinite}
@keyframes kf-01-bar{0%{width:0%;margin-left:0}50%{width:80%}100%{width:0%;margin-left:100%}}

@media(max-width:640px){.kf-01__stage{grid-template-columns:repeat(2,1fr)}}
@media(max-width:380px){.kf-01__stage{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.kf-01 *{animation:none!important}}
```

### 02. CSS Typing Typewriter Text Effect

**Type:** Pure CSS
**Description:** Classic typewriter cursor, multi-word loop, code-line reveal and glitch-reveal text animations using CSS width + border-right keyframes only, zero JS.

**HTML:**
```html
<div class="kf-02">
  <div class="kf-02__classic">Hello, world! — pure CSS typing.</div>

  <div class="kf-02__multi">
    <b>I build</b>
    <div class="kf-02__loop">
      <span>
        <div>websites.</div>
        <div>animations.</div>
        <div>experiences.</div>
      </span>
    </div>
  </div>

  <div class="kf-02__code">
    <div class="kf-02__code-line">const animate = (el, props) => {</div>
    <div class="kf-02__code-line">&nbsp;&nbsp;el.style.transform = 'translateY(0)';</div>
    <div class="kf-02__code-line">&nbsp;&nbsp;el.style.opacity = '1';</div>
    <div class="kf-02__code-line">&nbsp;&nbsp;return Promise.resolve(true);</div>
    <div class="kf-02__code-line">};</div>
  </div>

  <div class="kf-02__glitch" data-text="TYPOGRAPHIC">TYPOGRAPHIC</div>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&family=Playfair+Display:ital,wght@0,700;1,400&display=swap');
.kf-02,.kf-02 *,.kf-02 *::before,.kf-02 *::after{box-sizing:border-box;margin:0;padding:0}
.kf-02 ::selection{background:#e8ff45;color:#111}
.kf-02{
  --bg:#111014;
  --lime:#e8ff45;
  --orange:#ff6b35;
  --blue:#4cc9f0;
  --white:#f0eee8;
  --dim:#555;
  font-family:'JetBrains Mono',monospace;
  background:var(--bg);
  min-height:100vh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:60px 24px;
  gap:56px;
  color:var(--white);
}

/* 1 — Classic typewriter */
.kf-02__classic{font-size:clamp(1.4rem,4vw,2.2rem);font-weight:700;color:var(--lime);
  overflow:hidden;white-space:nowrap;
  border-right:3px solid var(--lime);
  width:0;
  animation:kf-02-type1 3s steps(28) 0.5s forwards, kf-02-cur 0.7s steps(2) infinite;
}
@keyframes kf-02-type1{to{width:28ch}}
@keyframes kf-02-cur{50%{border-color:transparent}}

/* 2 — Multi-line loop */
.kf-02__multi{
  font-size:clamp(1rem,3vw,1.5rem);
  color:var(--white);
  position:relative;
  height:2em;
  display:flex;align-items:center;gap:8px;
}
.kf-02__multi b{color:var(--orange)}
.kf-02__loop{
  display:inline-block;overflow:hidden;white-space:nowrap;vertical-align:bottom;
  border-right:2px solid var(--orange);
  animation:kf-02-loop 9s steps(1) infinite;
}
.kf-02__loop span{display:block;animation:kf-02-slide 9s steps(1) infinite}
@keyframes kf-02-loop{
  0%,30%{width:14ch}31%,35%{width:0}36%,65%{width:12ch}66%,70%{width:0}71%,99%{width:16ch}
}
@keyframes kf-02-slide{
  0%,32%{transform:translateY(0)}
  33%,65%{transform:translateY(-2.1em)}
  66%,99%{transform:translateY(-4.2em)}
}
/* 3 — Code reveal */
.kf-02__code{
  background:#1a1a1f;
  border:1px solid rgba(255,255,255,.1);
  border-left:3px solid var(--blue);
  border-radius:8px;
  padding:28px 32px;
  width:min(600px,100%);
}
.kf-02__code-line{overflow:hidden;white-space:nowrap;color:#8ecae6;font-size:.95rem;line-height:1.8}
.kf-02__code-line:nth-child(1){width:0;animation:kf-02-codeline 14s steps(22) 0.2s infinite}
.kf-02__code-line:nth-child(2){width:0;color:#a8dadc;animation:kf-02-codeline2 14s steps(28) 0.7s infinite}
.kf-02__code-line:nth-child(3){width:0;color:var(--lime);animation:kf-02-codeline3 14s steps(32) 1.2s infinite}
.kf-02__code-line:nth-child(4){width:0;color:#ff6b35;animation:kf-02-codeline4 14s steps(24) 1.7s infinite}
.kf-02__code-line:nth-child(5){width:0;color:#8ecae6;animation:kf-02-codeline5 14s steps(18) 2.2s infinite}
@keyframes kf-02-codeline{0%,6%{width:0}18%,90%{width:22ch}96%,100%{width:0}}
@keyframes kf-02-codeline2{0%,8%{width:0}22%,90%{width:28ch}96%,100%{width:0}}
@keyframes kf-02-codeline3{0%,10%{width:0}26%,90%{width:32ch}96%,100%{width:0}}
@keyframes kf-02-codeline4{0%,12%{width:0}30%,90%{width:24ch}96%,100%{width:0}}
@keyframes kf-02-codeline5{0%,14%{width:0}34%,90%{width:18ch}96%,100%{width:0}}

/* 4 — Big headline glitch-type */
.kf-02__glitch{
  font-family:'Playfair Display',serif;
  font-size:clamp(2.5rem,10vw,5rem);
  font-weight:700;
  color:var(--white);
  position:relative;
  overflow:hidden;
  white-space:nowrap;
  width:0;
  animation:kf-02-reveal 2s cubic-bezier(.2,.6,.4,1) 0.3s forwards;
}
.kf-02__glitch::after{
  content:attr(data-text);
  position:absolute;
  inset:0;
  color:var(--blue);
  clip-path:inset(0 0 60% 0);
  transform:translateX(-3px);
  animation:kf-02-glitch 4s steps(1) 2.5s infinite;
}
@keyframes kf-02-reveal{to{width:100%}}
@keyframes kf-02-glitch{
  0%,90%,100%{clip-path:inset(0 0 100% 0);transform:translateX(0)}
  92%{clip-path:inset(20% 0 50% 0);transform:translateX(-4px)}
  94%{clip-path:inset(55% 0 10% 0);transform:translateX(3px)}
  96%{clip-path:inset(0 0 100% 0)}
}
@keyframes kf-02-blinkOrange{50%{border-color:transparent}}

@media(prefers-reduced-motion:reduce){.kf-02 *{animation:none!important;width:auto!important}}
```

### 03. CSS Bouncing Ball Animation

**Type:** Pure CSS
**Description:** Realistic bouncing ball physics with squash-and-stretch, pendulum swing, stagger trio and rolling ball — all driven by cubic-bezier keyframes, no JavaScript.

**HTML:**
```html
<div class="kf-03">
  <div class="kf-03__title">CSS Bouncing Ball <span>Physics</span> Animations</div>

  <div class="kf-03__row">
    <div class="kf-03__scene">
      <div class="kf-03__arena">
        <div class="kf-03__ball kf-03__ball--1"></div>
        <div class="kf-03__shadow kf-03__shadow--1"></div>
      </div>
      <div class="kf-03__floor"></div>
      <div class="kf-03__label">Simple<br>Bounce</div>
    </div>

    <div class="kf-03__scene">
      <div class="kf-03__arena">
        <div class="kf-03__ball kf-03__ball--2"></div>
        <div class="kf-03__shadow kf-03__shadow--2"></div>
      </div>
      <div class="kf-03__floor"></div>
      <div class="kf-03__label">Squash &<br>Stretch</div>
    </div>

    <div class="kf-03__scene" style="width:80px">
      <div class="kf-03__pend" style="overflow:visible">
        <div class="kf-03__string">
          <div class="kf-03__pball"></div>
        </div>
      </div>
      <div class="kf-03__floor"></div>
      <div class="kf-03__label">Pendulum<br>Swing</div>
    </div>

    <div class="kf-03__scene" style="width:80px">
      <div class="kf-03__arena" style="width:80px">
        <div class="kf-03__triple">
          <div class="kf-03__ball--t"></div>
          <div class="kf-03__ball--t"></div>
          <div class="kf-03__ball--t"></div>
        </div>
      </div>
      <div class="kf-03__floor"></div>
      <div class="kf-03__label">Stagger<br>Trio</div>
    </div>
  </div>

  <div style="display:flex;flex-direction:column;align-items:center;gap:8px">
    <div class="kf-03__roll-wrap">
      <div class="kf-03__ball kf-03__ball--r"></div>
    </div>
    <div class="kf-03__label">Rolling Ball</div>
  </div>
</div>
```

**CSS:**
```css
.kf-03,.kf-03 *,.kf-03 *::before,.kf-03 *::after{box-sizing:border-box;margin:0;padding:0}
.kf-03 ::selection{background:#f72585;color:#fff}
.kf-03{
  --bg:#fafaf8;
  --floor:#e8e5e0;
  --red:#f72585;
  --orange:#fb8500;
  --blue:#3a86ff;
  --green:#06d6a0;
  --purple:#7b2d8b;
  --shadow:rgba(0,0,0,.18);
  font-family:'Segoe UI',sans-serif;
  background:var(--bg);
  min-height:100vh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:40px 24px;
  gap:48px;
  color:#1a1a1a;
}
.kf-03__label{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#999;text-align:center;margin-top:16px}
.kf-03__title{font-size:clamp(1.4rem,4vw,2rem);font-weight:700;letter-spacing:-.02em;text-align:center;color:#1a1a1a}
.kf-03__title span{color:var(--red)}

/* Scene container */
.kf-03__row{display:flex;gap:48px;flex-wrap:wrap;justify-content:center;align-items:flex-end}
.kf-03__scene{display:flex;flex-direction:column;align-items:center;gap:0;width:80px}
.kf-03__arena{width:80px;height:180px;position:relative;display:flex;justify-content:center}
.kf-03__floor{width:100%;height:4px;background:var(--floor);border-radius:2px;box-shadow:0 2px 0 #d8d5d0}

/* Ball base */
.kf-03__ball{
  position:absolute;
  border-radius:50%;
  left:50%;transform:translateX(-50%);
}
/* Shadow base */
.kf-03__shadow{
  position:absolute;bottom:4px;left:50%;transform:translateX(-50%);
  background:var(--shadow);border-radius:50%;
}

/* 1 — Simple bounce */
.kf-03__ball--1{width:42px;height:42px;bottom:4px;background:radial-gradient(circle at 36% 28%,#ff9eb5,var(--red));
  animation:kf-03-bounce1 0.7s cubic-bezier(.33,0,.66,0) infinite alternate}
.kf-03__shadow--1{width:36px;height:10px;animation:kf-03-sh1 0.7s ease-in-out infinite alternate}
@keyframes kf-03-bounce1{to{bottom:130px}}
@keyframes kf-03-sh1{from{opacity:.3;transform:translateX(-50%) scaleX(1)}to{opacity:.06;transform:translateX(-50%) scaleX(.4)}}

/* 2 — Squash & stretch */
.kf-03__ball--2{width:44px;height:44px;bottom:4px;background:radial-gradient(circle at 36% 28%,#ffc06a,var(--orange));
  animation:kf-03-squash 0.8s ease-in-out infinite}
.kf-03__shadow--2{width:36px;height:10px;animation:kf-03-sh2 0.8s ease-in-out infinite}
@keyframes kf-03-squash{
  0%{bottom:4px;height:30px;width:52px;border-radius:50%/30%}
  20%{bottom:100px;height:48px;width:36px;border-radius:50%}
  40%{bottom:140px;height:52px;width:34px}
  60%{bottom:80px;height:48px;width:36px}
  80%{bottom:4px;height:26px;width:56px;border-radius:50%/30%}
  100%{bottom:4px;height:30px;width:52px;border-radius:50%/30%}
}
@keyframes kf-03-sh2{0%,80%,100%{opacity:.4;transform:translateX(-50%) scaleX(1.2)}40%{opacity:.06;transform:translateX(-50%) scaleX(.3)}}

/* 3 — Pendulum swing */
.kf-03__pend{width:80px;height:180px;position:relative;display:flex;justify-content:center;overflow:visible}
.kf-03__string{position:absolute;top:8px;left:50%;width:2px;height:110px;background:#ccc;transform-origin:top center;animation:kf-03-pend 1.2s ease-in-out infinite alternate}
@keyframes kf-03-pend{from{transform:rotate(-35deg)}to{transform:rotate(35deg)}}
.kf-03__pball{position:absolute;bottom:0;left:50%;transform:translateX(-50%);
  width:36px;height:36px;border-radius:50%;
  background:radial-gradient(circle at 36% 28%,#90e0ef,var(--blue))}

/* 4 — Triple bounce stagger */
.kf-03__triple{display:flex;gap:12px;align-items:flex-end;position:relative;height:180px;padding:0 4px}
.kf-03__ball--t{width:26px;height:26px;border-radius:50%;position:absolute;bottom:4px}
.kf-03__ball--t:nth-child(1){left:4px;background:var(--green);animation:kf-03-bounce1 0.7s cubic-bezier(.33,0,.66,0) infinite alternate}
.kf-03__ball--t:nth-child(2){left:27px;background:var(--blue);animation:kf-03-bounce1 0.7s cubic-bezier(.33,0,.66,0) .15s infinite alternate}
.kf-03__ball--t:nth-child(3){left:50px;background:var(--purple);animation:kf-03-bounce1 0.7s cubic-bezier(.33,0,.66,0) .3s infinite alternate}

/* 5 — Rolling ball */
.kf-03__roll-wrap{width:180px;height:70px;position:relative;border-bottom:4px solid var(--floor);border-radius:0 0 4px 4px}
.kf-03__ball--r{
  width:46px;height:46px;bottom:4px;position:absolute;border-radius:50%;
  background:radial-gradient(circle at 36% 28%,#c9b8ff,var(--purple));
  animation:kf-03-roll-x 2s linear infinite,kf-03-roll-spin 2s linear infinite;
}
@keyframes kf-03-roll-x{0%{left:-46px}100%{left:180px}}
@keyframes kf-03-roll-spin{to{transform:rotate(360deg)}}

@media(max-width:600px){.kf-03__row{gap:24px}}
@media(prefers-reduced-motion:reduce){.kf-03 *{animation:none!important}}
```

### 04. CSS Pulse Glow Animation Button

**Type:** Pure CSS
**Description:** Nine glowing button animation styles: ripple pulse, neon glow, heartbeat, shimmer sweep, border spin, breath expand, lightning flash, radar sweep and glow bloom.

**HTML:**
```html
<div class="kf-04">
  <div class="kf-04__grid">
    <div class="kf-04__cell">
      <button class="kf-04__btn kf-04__btn--1">Launch</button>
      <span class="kf-04__sublabel">Ripple Pulse</span>
    </div>
    <div class="kf-04__cell">
      <button class="kf-04__btn kf-04__btn--2">Connect</button>
      <span class="kf-04__sublabel">Neon Glow</span>
    </div>
    <div class="kf-04__cell">
      <button class="kf-04__btn kf-04__btn--3">❤ Like</button>
      <span class="kf-04__sublabel">Heartbeat</span>
    </div>
    <div class="kf-04__cell">
      <button class="kf-04__btn kf-04__btn--4">Upgrade</button>
      <span class="kf-04__sublabel">Shimmer Sweep</span>
    </div>
    <div class="kf-04__cell">
      <button class="kf-04__btn kf-04__btn--5">Premium</button>
      <span class="kf-04__sublabel">Border Spin</span>
    </div>
    <div class="kf-04__cell">
      <button class="kf-04__btn kf-04__btn--6">Inhale</button>
      <span class="kf-04__sublabel">Breath Expand</span>
    </div>
    <div class="kf-04__cell">
      <button class="kf-04__btn kf-04__btn--7">Strike</button>
      <span class="kf-04__sublabel">Lightning Flash</span>
    </div>
    <div class="kf-04__cell">
      <div class="kf-04__radar"><div class="kf-04__radar-beam"></div><div class="kf-04__radar-dot"></div></div>
      <span class="kf-04__sublabel">Radar Sweep</span>
    </div>
    <div class="kf-04__cell">
      <button class="kf-04__btn kf-04__btn--9">Get Started</button>
      <span class="kf-04__sublabel">Glow Bloom</span>
    </div>
  </div>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@500;700&display=swap');
.kf-04,.kf-04 *,.kf-04 *::before,.kf-04 *::after{box-sizing:border-box;margin:0;padding:0}
.kf-04 ::selection{background:#00ff88;color:#000}
.kf-04{
  --bg:#06070a;
  --green:#00ff88;
  --blue:#00b4ff;
  --purple:#a855f7;
  --red:#ff3366;
  --gold:#ffbe0b;
  --white:#f8f9fa;
  font-family:'Inter',sans-serif;
  background:var(--bg);
  min-height:100vh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:60px 24px;
  gap:40px;
}
.kf-04__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;max-width:820px;width:100%}
.kf-04__cell{display:flex;flex-direction:column;align-items:center;gap:16px}
.kf-04__sublabel{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:#444}

/* Base button */
.kf-04__btn{
  position:relative;
  padding:14px 32px;
  border:none;border-radius:8px;
  font-family:'Inter';font-weight:700;font-size:.95rem;letter-spacing:.04em;
  cursor:pointer;
  overflow:visible;
  text-transform:uppercase;
}

/* 1 — Ripple pulse */
.kf-04__btn--1{background:var(--green);color:#000}
.kf-04__btn--1::before,.kf-04__btn--1::after{
  content:'';position:absolute;inset:0;border-radius:8px;
  background:var(--green);opacity:.5;
  animation:kf-04-ripple 2s ease-out infinite;
}
.kf-04__btn--1::after{animation-delay:.6s}
@keyframes kf-04-ripple{
  0%{transform:scale(1);opacity:.6}
  100%{transform:scale(1.8);opacity:0}
}

/* 2 — Neon glow pulse */
.kf-04__btn--2{
  background:transparent;
  color:var(--blue);
  border:2px solid var(--blue);
  animation:kf-04-neon 2s ease-in-out infinite alternate;
}
@keyframes kf-04-neon{
  from{box-shadow:0 0 8px var(--blue),0 0 20px var(--blue),inset 0 0 8px rgba(0,180,255,.1)}
  to{box-shadow:0 0 20px var(--blue),0 0 50px var(--blue),0 0 80px rgba(0,180,255,.3),inset 0 0 20px rgba(0,180,255,.15)}
}

/* 3 — Heartbeat */
.kf-04__btn--3{
  background:var(--red);color:#fff;
  animation:kf-04-heart 1.2s ease-in-out infinite;
}
@keyframes kf-04-heart{
  0%,100%{transform:scale(1);box-shadow:0 0 0 rgba(255,51,102,.4)}
  14%{transform:scale(1.1);box-shadow:0 0 0 rgba(255,51,102,.2)}
  28%{transform:scale(1);box-shadow:0 0 0 rgba(255,51,102,.4)}
  42%{transform:scale(1.06);box-shadow:0 0 20px rgba(255,51,102,.5)}
  70%{transform:scale(1)}
}

/* 4 — Shimmer sweep */
.kf-04__btn--4{
  background:linear-gradient(135deg,#1a1a2e,#16213e,#0f3460);
  color:var(--purple);
  border:1px solid rgba(168,85,247,.3);
  overflow:hidden;
}
.kf-04__btn--4::before{
  content:'';position:absolute;
  top:0;left:-100%;width:60%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(168,85,247,.4),transparent);
  animation:kf-04-shimmer 2.5s ease-in-out infinite;
}
@keyframes kf-04-shimmer{to{left:160%}}

/* 5 — Border spin */
.kf-04__btn--5{
  background:#0d0d0d;color:var(--gold);
  border:2px solid transparent;
  background-clip:padding-box;
}
.kf-04__btn--5::before{
  content:'';position:absolute;inset:-2px;border-radius:10px;z-index:-1;
  background:conic-gradient(from 0deg,var(--gold),transparent,var(--gold));
  animation:kf-04-borderspin 2s linear infinite;
}
@keyframes kf-04-borderspin{to{transform:rotate(360deg)}}

/* 6 — Breath expand */
.kf-04__btn--6{
  background:var(--purple);color:#fff;
  animation:kf-04-breath 3s ease-in-out infinite;
}
@keyframes kf-04-breath{
  0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(168,85,247,.4)}
  50%{transform:scale(1.05);box-shadow:0 0 0 18px rgba(168,85,247,0)}
}

/* 7 — Lightning flash */
.kf-04__btn--7{
  background:linear-gradient(135deg,#1a1a1a,#222);
  color:var(--gold);
  border:1px solid #333;
}
.kf-04__btn--7::before{
  content:'⚡';position:absolute;
  left:-14px;top:50%;transform:translateY(-50%);
  font-size:16px;
  animation:kf-04-lightning 2s steps(1) infinite;
}
.kf-04__btn--7::after{
  content:'';position:absolute;inset:0;border-radius:8px;
  background:var(--gold);opacity:0;
  animation:kf-04-flash 2s steps(1) infinite;
}
@keyframes kf-04-lightning{0%,90%,100%{opacity:0}92%{opacity:1}94%{opacity:0}96%{opacity:1}}
@keyframes kf-04-flash{0%,90%,100%{opacity:0}92%{opacity:.15}94%{opacity:0}96%{opacity:.1}}

/* 8 — Radar sweep */
.kf-04__radar{
  width:100px;height:100px;border-radius:50%;position:relative;
  border:2px solid rgba(0,255,136,.3);
  background:radial-gradient(circle,rgba(0,255,136,.05),transparent);
}
.kf-04__radar::before,.kf-04__radar::after{content:'';position:absolute;border-radius:50%;border:1px solid rgba(0,255,136,.2)}
.kf-04__radar::before{inset:18px}
.kf-04__radar::after{inset:36px}
.kf-04__radar-beam{
  position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg,rgba(0,255,136,.6) 0deg,rgba(0,255,136,.1) 40deg,transparent 40deg);
  animation:kf-04-borderspin 2s linear infinite;
}
.kf-04__radar-dot{
  position:absolute;width:6px;height:6px;border-radius:50%;background:var(--green);
  top:22%;left:62%;box-shadow:0 0 6px var(--green);
  animation:kf-04-blink 2s steps(1) infinite;
}
@keyframes kf-04-blink{0%,50%{opacity:1}51%,100%{opacity:0}}

/* 9 — CTA with particles */
.kf-04__btn--9{background:linear-gradient(135deg,var(--red),var(--purple));color:#fff;padding:16px 40px;font-size:1rem;border-radius:50px}
.kf-04__btn--9::before{content:'';position:absolute;inset:-3px;border-radius:52px;background:linear-gradient(135deg,var(--red),var(--purple));z-index:-1;filter:blur(10px);opacity:.6;animation:kf-04-glow 2s ease-in-out infinite alternate}
@keyframes kf-04-glow{to{filter:blur(18px);opacity:.9}}

@media(max-width:640px){.kf-04__grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:400px){.kf-04__grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.kf-04 *{animation:none!important}}
```

### 05. CSS Morphing Blob Animation

**Type:** Pure CSS
**Description:** Six organic morphing blob animations — duo-colour, gradient shift, blend cluster, breathing ring and labelled blob — using staggered border-radius keyframes.

**HTML:**
```html
<div class="kf-05">
  <div class="kf-05__row">
    <div class="kf-05__cell">
      <div class="kf-05__blob--1"></div>
      <span class="kf-05__label">Classic Blob</span>
    </div>
    <div class="kf-05__cell">
      <div class="kf-05__blob--2"></div>
      <span class="kf-05__label">Duo-Color</span>
    </div>
    <div class="kf-05__cell">
      <div class="kf-05__blob--3"></div>
      <span class="kf-05__label">Gradient Shift</span>
    </div>
  </div>
  <div class="kf-05__row">
    <div class="kf-05__cell">
      <div class="kf-05__cluster"><div class="kf-05__cluster-b"></div><div class="kf-05__cluster-b"></div><div class="kf-05__cluster-b"></div></div>
      <span class="kf-05__label">Blend Cluster</span>
    </div>
    <div class="kf-05__cell">
      <div class="kf-05__blob--5"></div>
      <span class="kf-05__label">Breathing Ring</span>
    </div>
    <div class="kf-05__cell">
      <div class="kf-05__blob--6">FLUID<br>DESIGN</div>
      <span class="kf-05__label">Label Blob</span>
    </div>
  </div>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;700;800&display=swap');
.kf-05,.kf-05 *,.kf-05 *::before,.kf-05 *::after{box-sizing:border-box;margin:0;padding:0}
.kf-05 ::selection{background:#ff6bd6;color:#fff}
.kf-05{
  --bg:#fff8f5;
  --coral:#ff6b6b;
  --teal:#06d6a0;
  --indigo:#3d5af1;
  --pink:#ff6bd6;
  --yellow:#ffe45e;
  --dark:#1a1a2e;
  font-family:'Syne',sans-serif;
  background:var(--bg);
  min-height:100vh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:60px 24px;
  gap:64px;
  overflow:hidden;
  position:relative;
}
/* Soft BG blobs */
.kf-05::before{content:'';position:absolute;top:-10%;right:-5%;width:500px;height:500px;border-radius:63% 37% 54% 46%/55% 48% 52% 45%;
  background:rgba(255,107,214,.08);animation:kf-05-bg 12s ease-in-out infinite;z-index:0}
.kf-05::after{content:'';position:absolute;bottom:-10%;left:-5%;width:400px;height:400px;border-radius:42% 58% 37% 63%/55% 38% 62% 45%;
  background:rgba(6,214,160,.07);animation:kf-05-bg 10s ease-in-out infinite reverse;z-index:0}
@keyframes kf-05-bg{
  0%,100%{border-radius:63% 37% 54% 46%/55% 48% 52% 45%}
  50%{border-radius:37% 63% 46% 54%/45% 55% 48% 52%;transform:scale(1.08)}
}

.kf-05__row{display:flex;gap:48px;flex-wrap:wrap;justify-content:center;position:relative;z-index:1}
.kf-05__cell{display:flex;flex-direction:column;align-items:center;gap:20px}
.kf-05__label{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#aaa}

/* 1 — Classic blob */
.kf-05__blob--1{
  width:140px;height:140px;
  background:linear-gradient(135deg,var(--coral),var(--pink));
  animation:kf-05-blob1 6s ease-in-out infinite;
}
@keyframes kf-05-blob1{
  0%,100%{border-radius:63% 37% 54% 46%/55% 48% 52% 45%}
  25%{border-radius:40% 60% 35% 65%/60% 30% 70% 40%}
  50%{border-radius:55% 45% 65% 35%/35% 65% 45% 55%}
  75%{border-radius:30% 70% 50% 50%/40% 60% 70% 30%}
}

/* 2 — Duo-color blob */
.kf-05__blob--2{
  width:140px;height:140px;
  position:relative;
  animation:kf-05-blob2 7s ease-in-out infinite;
}
.kf-05__blob--2::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,var(--indigo),var(--teal));
  animation:kf-05-blob1 7s ease-in-out infinite;
  border-radius:63% 37% 54% 46%/55% 48% 52% 45%;
}
.kf-05__blob--2::after{
  content:'';position:absolute;inset:20px;
  background:rgba(255,248,245,.6);
  animation:kf-05-blob1 5s ease-in-out infinite reverse;
  border-radius:50%;
}

/* 3 — Gradient shift blob */
.kf-05__blob--3{
  width:140px;height:140px;
  animation:kf-05-blob3 8s ease-in-out infinite;
  background:linear-gradient(0deg,var(--yellow),var(--coral));
  background-size:100% 200%;
}
@keyframes kf-05-blob3{
  0%,100%{border-radius:60% 40% 55% 45%/50% 55% 45% 50%;background-position:0% 0%}
  33%{border-radius:40% 60% 30% 70%/60% 40% 60% 40%;background-position:0% 50%}
  66%{border-radius:55% 45% 68% 32%/38% 68% 32% 62%;background-position:0% 100%}
}

/* 4 — Multi-blob cluster */
.kf-05__cluster{width:180px;height:180px;position:relative}
.kf-05__cluster-b{position:absolute;border-radius:63% 37% 54% 46%/55% 48% 52% 45%;mix-blend-mode:multiply}
.kf-05__cluster-b:nth-child(1){width:100px;height:100px;background:rgba(255,107,107,.7);top:0;left:0;animation:kf-05-blob1 5s ease-in-out infinite}
.kf-05__cluster-b:nth-child(2){width:100px;height:100px;background:rgba(61,90,241,.7);top:30px;left:50px;animation:kf-05-blob1 6s ease-in-out infinite .5s}
.kf-05__cluster-b:nth-child(3){width:100px;height:100px;background:rgba(255,228,94,.7);top:60px;left:20px;animation:kf-05-blob1 7s ease-in-out infinite 1s}

/* 5 — Breathing ring blob */
.kf-05__blob--5{
  width:140px;height:140px;
  border:12px solid var(--pink);
  background:transparent;
  animation:kf-05-blob1 6s ease-in-out infinite 0.5s,kf-05-ring 3s ease-in-out infinite;
}
@keyframes kf-05-ring{
  0%,100%{border-width:12px;box-shadow:0 0 0 0 rgba(255,107,214,.3)}
  50%{border-width:4px;box-shadow:0 0 0 20px rgba(255,107,214,0)}
}

/* 6 — Text inside blob */
.kf-05__blob--6{
  width:160px;height:160px;
  background:linear-gradient(135deg,var(--indigo),#7c3aed);
  display:grid;place-items:center;
  color:#fff;
  font-weight:800;font-size:1.2rem;text-align:center;line-height:1.2;
  animation:kf-05-blob1 7s ease-in-out infinite;
  box-shadow:0 20px 60px rgba(61,90,241,.35);
}

@media(max-width:600px){.kf-05__row{gap:24px}.kf-05__blob--1,.kf-05__blob--2,.kf-05__blob--3,.kf-05__blob--5,.kf-05__blob--6{width:110px;height:110px}}
@media(prefers-reduced-motion:reduce){.kf-05 *{animation:none!important;border-radius:50%!important}}
```

### 06. CSS Particle Burst Animation

**Type:** Pure CSS
**Description:** Four particle burst effects: shockwave rings, firework sparks, spinning petals and confetti rain — all pure CSS translate + scale keyframes, no canvas.

**HTML:**
```html
<div class="kf-06">
  <div class="kf-06__row">
    <div class="kf-06__cell">
      <div class="kf-06__burst">
        <div class="kf-06__burst-ring"></div>
        <div class="kf-06__burst-ring"></div>
        <div class="kf-06__burst-ring"></div>
        <div class="kf-06__burst-dot"></div>
      </div>
      <span class="kf-06__label">Shockwave</span>
    </div>
    <div class="kf-06__cell">
      <div class="kf-06__firework">
        <div class="kf-06__spark"></div><div class="kf-06__spark"></div>
        <div class="kf-06__spark"></div><div class="kf-06__spark"></div>
        <div class="kf-06__spark"></div><div class="kf-06__spark"></div>
        <div class="kf-06__spark"></div><div class="kf-06__spark"></div>
      </div>
      <span class="kf-06__label">Firework Sparks</span>
    </div>
    <div class="kf-06__cell">
      <div class="kf-06__starburst">
        <div class="kf-06__petal"></div><div class="kf-06__petal"></div>
        <div class="kf-06__petal"></div><div class="kf-06__petal"></div>
        <div class="kf-06__petal"></div><div class="kf-06__petal"></div>
        <div class="kf-06__petal"></div><div class="kf-06__petal"></div>
      </div>
      <span class="kf-06__label">Spinning Petals</span>
    </div>
  </div>
  <div class="kf-06__cell">
    <div class="kf-06__confetti">
      <div class="kf-06__c"></div><div class="kf-06__c"></div>
      <div class="kf-06__c"></div><div class="kf-06__c"></div>
      <div class="kf-06__c"></div><div class="kf-06__c"></div>
      <div class="kf-06__c"></div><div class="kf-06__c"></div>
    </div>
    <span class="kf-06__label">Confetti Rain</span>
  </div>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&display=swap');
.kf-06,.kf-06 *,.kf-06 *::before,.kf-06 *::after{box-sizing:border-box;margin:0;padding:0}
.kf-06 ::selection{background:#ff9f1c;color:#000}
.kf-06{
  --bg:#09090b;
  --orange:#ff9f1c;
  --teal:#2ec4b6;
  --pink:#e71d73;
  --lime:#cbff4d;
  --white:#f4f4f5;
  font-family:'Space Grotesk',sans-serif;
  background:var(--bg);
  min-height:100vh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:60px 24px;gap:72px;
  overflow:hidden;
}

/* ——— Burst 1: radial lines ——— */
.kf-06__burst{position:relative;width:120px;height:120px;display:grid;place-items:center}
.kf-06__burst-ring{
  position:absolute;inset:0;border-radius:50%;
  border:3px solid var(--orange);
  animation:kf-06-expand 2s ease-out infinite;
}
.kf-06__burst-ring:nth-child(2){animation-delay:.4s;border-color:rgba(255,159,28,.6)}
.kf-06__burst-ring:nth-child(3){animation-delay:.8s;border-color:rgba(255,159,28,.3)}
@keyframes kf-06-expand{
  0%{transform:scale(.1);opacity:1}
  100%{transform:scale(2.5);opacity:0}
}
.kf-06__burst-dot{width:20px;height:20px;border-radius:50%;background:var(--orange);box-shadow:0 0 20px var(--orange)}

/* ——— Burst 2: firework sparks ——— */
.kf-06__firework{position:relative;width:140px;height:140px}
.kf-06__spark{
  position:absolute;top:50%;left:50%;
  width:6px;height:6px;border-radius:50%;
  margin:-3px 0 0 -3px;
  animation:kf-06-spark 1.8s ease-out infinite;
}
.kf-06__spark:nth-child(1){background:var(--teal);--angle:0deg;animation-delay:0s}
.kf-06__spark:nth-child(2){background:var(--pink);--angle:45deg;animation-delay:.05s}
.kf-06__spark:nth-child(3){background:var(--lime);--angle:90deg;animation-delay:.1s}
.kf-06__spark:nth-child(4){background:var(--orange);--angle:135deg;animation-delay:.15s}
.kf-06__spark:nth-child(5){background:var(--teal);--angle:180deg;animation-delay:.2s}
.kf-06__spark:nth-child(6){background:var(--pink);--angle:225deg;animation-delay:.25s}
.kf-06__spark:nth-child(7){background:var(--lime);--angle:270deg;animation-delay:.3s}
.kf-06__spark:nth-child(8){background:var(--orange);--angle:315deg;animation-delay:.35s}
@keyframes kf-06-spark{
  0%{transform:rotate(var(--angle)) translateX(0);opacity:1;width:6px;height:6px}
  60%{opacity:1}
  100%{transform:rotate(var(--angle)) translateX(60px);opacity:0;width:3px;height:3px}
}

/* ——— Burst 3: starburst petals ——— */
.kf-06__starburst{position:relative;width:120px;height:120px;animation:kf-06-rotate 6s linear infinite}
@keyframes kf-06-rotate{to{transform:rotate(360deg)}}
.kf-06__petal{
  position:absolute;top:50%;left:50%;
  width:12px;height:40px;
  border-radius:50%;
  margin:-20px 0 0 -6px;
  transform-origin:50% 100%;
  opacity:.8;
}
.kf-06__petal:nth-child(1){background:var(--teal);transform:rotate(0deg);animation:kf-06-petal 2s ease-in-out infinite}
.kf-06__petal:nth-child(2){background:var(--pink);transform:rotate(45deg);animation:kf-06-petal 2s ease-in-out infinite .25s}
.kf-06__petal:nth-child(3){background:var(--lime);transform:rotate(90deg);animation:kf-06-petal 2s ease-in-out infinite .5s}
.kf-06__petal:nth-child(4){background:var(--orange);transform:rotate(135deg);animation:kf-06-petal 2s ease-in-out infinite .75s}
.kf-06__petal:nth-child(5){background:var(--teal);transform:rotate(180deg);animation:kf-06-petal 2s ease-in-out infinite 1s}
.kf-06__petal:nth-child(6){background:var(--pink);transform:rotate(225deg);animation:kf-06-petal 2s ease-in-out infinite 1.25s}
.kf-06__petal:nth-child(7){background:var(--lime);transform:rotate(270deg);animation:kf-06-petal 2s ease-in-out infinite 1.5s}
.kf-06__petal:nth-child(8){background:var(--orange);transform:rotate(315deg);animation:kf-06-petal 2s ease-in-out infinite 1.75s}
@keyframes kf-06-petal{
  0%,100%{height:30px;opacity:.6}
  50%{height:50px;opacity:1}
}

/* ——— Burst 4: confetti fall ——— */
.kf-06__confetti{position:relative;width:200px;height:100px;overflow:hidden}
.kf-06__c{
  position:absolute;
  width:8px;height:8px;
  animation:kf-06-fall linear infinite;
}
.kf-06__c:nth-child(1){left:10%;background:var(--teal);animation-duration:2.4s;animation-delay:0s;border-radius:2px}
.kf-06__c:nth-child(2){left:25%;background:var(--pink);animation-duration:2s;animation-delay:.3s;border-radius:50%}
.kf-06__c:nth-child(3){left:40%;background:var(--lime);animation-duration:2.8s;animation-delay:.6s}
.kf-06__c:nth-child(4){left:55%;background:var(--orange);animation-duration:2.2s;animation-delay:.9s;border-radius:50%}
.kf-06__c:nth-child(5){left:70%;background:var(--teal);animation-duration:2.6s;animation-delay:.2s}
.kf-06__c:nth-child(6){left:85%;background:var(--pink);animation-duration:2.1s;animation-delay:.7s;border-radius:2px}
.kf-06__c:nth-child(7){left:15%;background:var(--lime);animation-duration:2.9s;animation-delay:1.1s;border-radius:50%}
.kf-06__c:nth-child(8){left:60%;background:var(--orange);animation-duration:2.3s;animation-delay:.4s}
@keyframes kf-06-fall{
  0%{top:-8px;transform:rotate(0) translateX(0);opacity:1}
  100%{top:100%;transform:rotate(720deg) translateX(20px);opacity:0}
}

.kf-06__row{display:flex;gap:56px;flex-wrap:wrap;justify-content:center;align-items:center}
.kf-06__cell{display:flex;flex-direction:column;align-items:center;gap:18px}
.kf-06__label{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#555}

@media(prefers-reduced-motion:reduce){.kf-06 *{animation:none!important}}
```

### 07. CSS Wave Animation

**Type:** Pure CSS
**Description:** Ocean waves with animated boat, gradient wave, liquid-level vial and expanding pulse rings using CSS clip-path and sinusoidal keyframe paths.

**HTML:**
```html
<div class="kf-07">
  <div class="kf-07__cell" style="width:100%;max-width:700px">
    <div class="kf-07__ocean">
      <div class="kf-07__wave kf-07__wave--1"></div>
      <div class="kf-07__wave kf-07__wave--2"></div>
      <div class="kf-07__wave kf-07__wave--3"></div>
      <div class="kf-07__ship">⛵</div>
    </div>
    <span class="kf-07__label">Ocean Waves</span>
  </div>

  <div class="kf-07__cell" style="width:100%;max-width:600px">
    <div class="kf-07__grad-wave">
      <div class="kf-07__grad-text">FLOWING</div>
    </div>
    <span class="kf-07__label">Gradient Wave</span>
  </div>

  <div class="kf-07__row">
    <div class="kf-07__cell">
      <div class="kf-07__vial"><div class="kf-07__liquid"></div><div class="kf-07__pct">65%</div></div>
      <span class="kf-07__label">Liquid Level</span>
    </div>
    <div class="kf-07__cell">
      <div class="kf-07__rings">
        <div class="kf-07__ring"></div><div class="kf-07__ring"></div>
        <div class="kf-07__ring"></div><div class="kf-07__ring"></div>
      </div>
      <span class="kf-07__label">Pulse Rings</span>
    </div>
  </div>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;700&display=swap');
.kf-07,.kf-07 *,.kf-07 *::before,.kf-07 *::after{box-sizing:border-box;margin:0;padding:0}
.kf-07 ::selection{background:#0077b6;color:#fff}
.kf-07{
  --bg:#03045e;
  --deep:#0077b6;
  --mid:#00b4d8;
  --light:#90e0ef;
  --foam:#caf0f8;
  --white:#fff;
  --gold:#ffd60a;
  font-family:'DM Sans',sans-serif;
  background:linear-gradient(180deg,#03045e 0%,#0096c7 60%,#00b4d8 100%);
  min-height:100vh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:40px 20px;gap:56px;
  overflow:hidden;
  position:relative;
  color:var(--white);
}

/* 1 — Ocean waves stacked */
.kf-07__ocean{
  position:relative;width:100%;max-width:700px;height:180px;
  background:linear-gradient(180deg,rgba(0,150,199,.3),rgba(0,77,110,.6));
  border-radius:12px;overflow:hidden;
}
.kf-07__wave{
  position:absolute;bottom:0;left:0;right:0;
  background:var(--mid);
  border-radius:100% 100% 0 0/40px;
}
.kf-07__wave--1{height:60px;background:rgba(0,180,216,.7);animation:kf-07-wave1 4s ease-in-out infinite}
.kf-07__wave--2{height:50px;background:rgba(144,224,239,.5);animation:kf-07-wave2 5s ease-in-out infinite .3s}
.kf-07__wave--3{height:40px;background:rgba(202,240,248,.4);animation:kf-07-wave1 6s ease-in-out infinite .6s}
@keyframes kf-07-wave1{
  0%,100%{transform:translateX(-50px) scaleY(1)}
  50%{transform:translateX(30px) scaleY(1.1)}
}
@keyframes kf-07-wave2{
  0%,100%{transform:translateX(40px) scaleY(1)}
  50%{transform:translateX(-30px) scaleY(.9)}
}
.kf-07__ship{position:absolute;top:16px;left:0;font-size:28px;animation:kf-07-sail 8s linear infinite}
@keyframes kf-07-sail{from{left:-40px}to{left:calc(100% + 40px)}}

/* 2 — Sine wave line */
.kf-07__sine{width:100%;max-width:600px;height:80px;position:relative;overflow:hidden}
.kf-07__sine-line{
  position:absolute;bottom:0;left:-100%;width:300%;height:100%;
  background:none;
  border-top:3px solid var(--mid);
  border-radius:100%;
  animation:kf-07-sine 3s linear infinite;
}
.kf-07__sine-line--2{border-top-color:var(--light);animation-delay:.5s;opacity:.6}
.kf-07__sine-line--3{border-top-color:var(--foam);animation-delay:1s;opacity:.3}
@keyframes kf-07-sine{to{transform:translateX(33.33%)}}

/* 3 — Animated gradient wave bg */
.kf-07__grad-wave{
  width:100%;max-width:700px;height:120px;position:relative;border-radius:12px;overflow:hidden;
}
.kf-07__grad-wave::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,#03045e,var(--deep),var(--mid),var(--light),var(--mid),var(--deep),#03045e);
  background-size:400% 100%;
  animation:kf-07-gradwave 4s linear infinite;
}
@keyframes kf-07-gradwave{to{background-position:-400% 0}}
.kf-07__grad-text{position:relative;z-index:1;height:100%;display:flex;align-items:center;justify-content:center;font-size:2rem;font-weight:700;letter-spacing:.1em}

/* 4 — Liquid level */
.kf-07__vial{width:90px;height:180px;border:3px solid var(--foam);border-radius:45px;position:relative;overflow:hidden;background:rgba(0,0,0,.2)}
.kf-07__liquid{
  position:absolute;bottom:0;left:0;right:0;height:65%;
  background:linear-gradient(180deg,var(--mid),var(--deep));
}
.kf-07__liquid::before{
  content:'';position:absolute;top:-18px;left:-50%;width:200%;height:36px;
  background:var(--mid);border-radius:50%;
  animation:kf-07-liq 2.5s ease-in-out infinite;
}
@keyframes kf-07-liq{
  0%,100%{transform:translateX(-10px) rotateZ(-2deg)}
  50%{transform:translateX(10px) rotateZ(2deg)}
}
.kf-07__pct{position:absolute;inset:0;display:grid;place-items:center;font-weight:700;font-size:1.1rem;color:var(--white)}

/* 5 — Pulse ring wave */
.kf-07__rings{position:relative;width:120px;height:120px;display:grid;place-items:center}
.kf-07__ring{position:absolute;border-radius:50%;border:2px solid var(--mid);animation:kf-07-ring 2.4s ease-out infinite}
.kf-07__ring:nth-child(1){inset:40px;animation-delay:0s}
.kf-07__ring:nth-child(2){inset:30px;animation-delay:.4s;border-color:var(--light)}
.kf-07__ring:nth-child(3){inset:20px;animation-delay:.8s;border-color:var(--foam)}
.kf-07__ring:nth-child(4){inset:10px;animation-delay:1.2s}
@keyframes kf-07-ring{
  0%{transform:scale(1);opacity:1}
  100%{transform:scale(3);opacity:0}
}

.kf-07__row{display:flex;gap:40px;flex-wrap:wrap;justify-content:center;align-items:center;width:100%;max-width:700px}
.kf-07__cell{display:flex;flex-direction:column;align-items:center;gap:14px}
.kf-07__label{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:rgba(202,240,248,.6)}

@media(prefers-reduced-motion:reduce){.kf-07 *{animation:none!important}}
```

### 08. CSS 3D Flip Card Animation

**Type:** Pure CSS
**Description:** Four CSS 3D card flip animations: auto-flip Y-axis, hover-triggered flip, X-axis flip and diagonal flip using CSS perspective and rotateY/X keyframes.

**HTML:**
```html
<div class="kf-08">
  <div class="kf-08__grid">

    <div class="kf-08__cell">
      <div class="kf-08__card">
        <div class="kf-08__inner kf-08__inner--auto">
          <div class="kf-08__front kf-08__f1">
            <span class="icon">🎧</span>
            <h3>Pro Headset X</h3>
            <p>Studio quality. Wireless freedom.</p>
          </div>
          <div class="kf-08__back kf-08__b1">
            <div class="price">$129</div>
            <div class="cta">Buy Now</div>
          </div>
        </div>
      </div>
      <span class="kf-08__label">Auto Flip Y</span>
    </div>

    <div class="kf-08__cell">
      <div class="kf-08__card">
        <div class="kf-08__inner kf-08__inner--hover">
          <div class="kf-08__front kf-08__f2">
            <div class="avatar">👩‍🎨</div>
            <h3>Mara Solano</h3>
            <small>Creative Director</small>
          </div>
          <div class="kf-08__back kf-08__b2">
            <div class="stats">
              <div class="stat"><b>142</b><small>Projects</small></div>
              <div class="stat"><b>98%</b><small>Rating</small></div>
            </div>
          </div>
        </div>
      </div>
      <span class="kf-08__label">Hover Flip</span>
    </div>

    <div class="kf-08__cell">
      <div class="kf-08__card">
        <div class="kf-08__inner kf-08__inner--x">
          <div class="kf-08__front kf-08__f3">
            <span class="icon">✨</span>
            <h3>Magic Card</h3>
          </div>
          <div class="kf-08__back kf-08__b3 kf-08__back--x">
            <p>Flip on the X axis for a fresh perspective on card reveals.</p>
          </div>
        </div>
      </div>
      <span class="kf-08__label">Flip X Axis</span>
    </div>

    <div class="kf-08__cell">
      <div class="kf-08__card">
        <div class="kf-08__inner kf-08__inner--diag">
          <div class="kf-08__front kf-08__f4">
            <div class="num">42</div>
            <p>Diagonal axis flip</p>
          </div>
          <div class="kf-08__back kf-08__b4 kf-08__back--diag">
            <span class="check">✅</span>
            <p>Task complete!</p>
          </div>
        </div>
      </div>
      <span class="kf-08__label">Diagonal Flip</span>
    </div>

  </div>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;700;900&display=swap');
.kf-08,.kf-08 *,.kf-08 *::before,.kf-08 *::after{box-sizing:border-box;margin:0;padding:0}
.kf-08 ::selection{background:#f4a261;color:#fff}
.kf-08{
  --bg:#1c1c1e;
  --orange:#f4a261;
  --teal:#2a9d8f;
  --sand:#e9c46a;
  --red:#e76f51;
  --blue:#264653;
  --white:#f8f9fa;
  font-family:'Raleway',sans-serif;
  background:var(--bg);
  min-height:100vh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:60px 24px;gap:48px;
  color:var(--white);
}
.kf-08__grid{display:flex;gap:32px;flex-wrap:wrap;justify-content:center}
.kf-08__label{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#666;text-align:center}
.kf-08__cell{display:flex;flex-direction:column;align-items:center;gap:16px}

/* 3D card base */
.kf-08__card{perspective:800px;width:180px;height:240px;cursor:pointer}
.kf-08__inner{
  width:100%;height:100%;position:relative;transform-style:preserve-3d;
  transition:transform .6s ease;
}
.kf-08__front,.kf-08__back{
  position:absolute;inset:0;border-radius:16px;
  backface-visibility:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;padding:24px;
}
.kf-08__back{transform:rotateY(180deg)}

/* Auto-flip animation */
.kf-08__inner--auto{animation:kf-08-flip 4s ease-in-out infinite}
@keyframes kf-08-flip{
  0%,40%{transform:rotateY(0deg)}
  50%,90%{transform:rotateY(180deg)}
  100%{transform:rotateY(0deg)}
}

/* Hover flip */
.kf-08__card:hover .kf-08__inner--hover{transform:rotateY(180deg)}

/* X-axis flip */
.kf-08__inner--x{animation:kf-08-flipx 4s ease-in-out infinite 1s}
@keyframes kf-08-flipx{
  0%,40%{transform:rotateX(0deg)}
  50%,90%{transform:rotateX(180deg)}
  100%{transform:rotateX(0deg)}
}
.kf-08__back--x{transform:rotateX(180deg)}

/* 4 — diagonal flip */
.kf-08__inner--diag{animation:kf-08-diag 4s ease-in-out infinite 0.5s}
@keyframes kf-08-diag{
  0%,40%{transform:rotate3d(1,1,0,0deg)}
  50%,90%{transform:rotate3d(1,1,0,180deg)}
  100%{transform:rotate3d(1,1,0,0deg)}
}
.kf-08__back--diag{transform:rotate3d(1,1,0,180deg)}

/* Card 1 — Product card */
.kf-08__f1{background:linear-gradient(135deg,#264653,#2a9d8f);box-shadow:0 20px 40px rgba(0,0,0,.4)}
.kf-08__f1 .icon{font-size:3rem}
.kf-08__f1 h3{font-size:1.1rem;font-weight:900;text-align:center}
.kf-08__f1 p{font-size:.8rem;opacity:.7;text-align:center}
.kf-08__b1{background:linear-gradient(135deg,#e9c46a,#f4a261);color:#1c1c1e;box-shadow:0 20px 40px rgba(0,0,0,.4)}
.kf-08__b1 .price{font-size:2.2rem;font-weight:900}
.kf-08__b1 .cta{background:#1c1c1e;color:#f4a261;border-radius:8px;padding:8px 20px;font-weight:700;font-size:.85rem}

/* Card 2 — Profile card */
.kf-08__f2{background:linear-gradient(135deg,#e76f51,#f4a261);box-shadow:0 20px 40px rgba(231,111,81,.3)}
.kf-08__f2 .avatar{width:72px;height:72px;border-radius:50%;background:rgba(255,255,255,.3);display:grid;place-items:center;font-size:2.2rem}
.kf-08__f2 h3{font-weight:900}
.kf-08__f2 small{opacity:.7;font-size:.8rem}
.kf-08__b2{background:linear-gradient(135deg,#264653,#023e8a);box-shadow:0 20px 40px rgba(0,0,0,.4)}
.kf-08__b2 .stat{text-align:center}
.kf-08__b2 .stat b{display:block;font-size:1.6rem;font-weight:900;color:var(--sand)}
.kf-08__b2 .stat small{font-size:.7rem;opacity:.6}
.kf-08__b2 .stats{display:flex;gap:16px}

/* Card 3 */
.kf-08__f3{background:linear-gradient(135deg,#7b2d8b,#c264f0);box-shadow:0 20px 40px rgba(123,45,139,.4)}
.kf-08__f3 .icon{font-size:3rem}
.kf-08__f3 h3{font-weight:900;font-size:1.2rem;text-align:center}
.kf-08__b3{background:linear-gradient(135deg,#ff6b6b,#ffd166);color:#1c1c1e;box-shadow:0 20px 40px rgba(0,0,0,.3)}
.kf-08__b3 p{font-size:.88rem;text-align:center;line-height:1.5}

/* Card 4 — diagonal */
.kf-08__f4{background:linear-gradient(135deg,#0d1b2a,#1b4332);box-shadow:0 20px 40px rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.05)}
.kf-08__f4 .num{font-size:4rem;font-weight:900;color:var(--teal);line-height:1}
.kf-08__f4 p{font-size:.8rem;opacity:.5;text-align:center}
.kf-08__b4{background:linear-gradient(135deg,#2d6a4f,#40916c);box-shadow:0 20px 40px rgba(0,0,0,.4)}
.kf-08__b4 .check{font-size:2.5rem}
.kf-08__b4 p{font-size:.9rem;text-align:center;font-weight:700}

@media(max-width:500px){.kf-08__card{width:150px;height:200px}}
@media(prefers-reduced-motion:reduce){.kf-08 *{animation:none!important;transition:none!important}}
```

### 09. CSS Neon Sign Flicker Animation

**Type:** Pure CSS
**Description:** Five neon sign animations: cursive pink glow, cyan monospace, OPEN sign box, script yellow hum and multi-word stagger flicker using box-shadow and opacity keyframes.

**HTML:**
```html
<div class="kf-09">
  <div class="kf-09__sign">
    <div class="kf-09__s1">Electric Dreams</div>
  </div>

  <div class="kf-09__sign">
    <div class="kf-09__s2">NEON DISTRICT</div>
  </div>

  <div class="kf-09__sign">
    <div class="kf-09__sign-box">
      <div class="kf-09__s3">OPEN</div>
    </div>
  </div>

  <div class="kf-09__sign">
    <div class="kf-09__s4">Late Night Vibes</div>
  </div>

  <div class="kf-09__sign">
    <div class="kf-09__multirow">
      <span class="kf-09__word">LIVE</span>
      <span class="kf-09__word">·</span>
      <span class="kf-09__word">CODE</span>
      <span class="kf-09__word">·</span>
      <span class="kf-09__word">CREATE</span>
    </div>
  </div>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Pacifico&family=Bebas+Neue&family=Sacramento&display=swap');
.kf-09,.kf-09 *,.kf-09 *::before,.kf-09 *::after{box-sizing:border-box;margin:0;padding:0}
.kf-09 ::selection{background:#ff2dce;color:#fff}
.kf-09{
  --bg:#0a0008;
  --pink:#ff2dce;
  --cyan:#00fff5;
  --red:#ff3030;
  --yellow:#fff200;
  --blue:#4d79ff;
  --green:#39ff14;
  font-family:'Bebas Neue',sans-serif;
  background:radial-gradient(circle at 50% 40%,#1a0b2e 0%,#0a0008 70%);
  min-height:100vh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:60px 24px;gap:56px;
  overflow:hidden;
  position:relative;
}
/* Brick wall texture */
.kf-09::before{
  content:'';position:absolute;inset:0;
  background-image:
    repeating-linear-gradient(rgba(255,255,255,.02) 0 2px,transparent 2px 40px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.015) 0 2px,transparent 2px 80px);
  pointer-events:none;
}
/* Floor reflection */
.kf-09::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:30%;
  background:linear-gradient(0deg,rgba(255,45,206,.08),transparent);
  pointer-events:none;
}

/* Shared neon base */
.kf-09__sign{text-align:center;position:relative}

/* 1 — Pink cursive */
.kf-09__s1{
  font-family:'Pacifico',cursive;
  font-size:clamp(2.4rem,10vw,5rem);
  color:var(--pink);
  text-shadow:
    0 0 7px var(--pink),
    0 0 20px var(--pink),
    0 0 45px var(--pink),
    0 0 80px rgba(255,45,206,.5);
  animation:kf-09-flicker1 6s steps(1) infinite;
}
@keyframes kf-09-flicker1{
  0%,18%,22%,25%,53%,57%,100%{
    text-shadow:0 0 7px var(--pink),0 0 20px var(--pink),0 0 45px var(--pink),0 0 80px rgba(255,45,206,.5);
    opacity:1;
  }
  20%,24%{text-shadow:none;opacity:.4}
  54%{opacity:.7;text-shadow:0 0 7px var(--pink)}
  55%,56%{text-shadow:none;opacity:.3}
}

/* 2 — Cyan mono */
.kf-09__s2{
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(2rem,8vw,4rem);
  letter-spacing:.2em;
  color:var(--cyan);
  text-shadow:
    0 0 5px var(--cyan),
    0 0 15px var(--cyan),
    0 0 30px rgba(0,255,245,.4);
  animation:kf-09-flicker2 8s steps(1) infinite 1s;
}
@keyframes kf-09-flicker2{
  0%,49%,51%,100%{opacity:1;text-shadow:0 0 5px var(--cyan),0 0 15px var(--cyan),0 0 30px rgba(0,255,245,.4)}
  50%{opacity:.1;text-shadow:none}
}

/* 3 — Red OPEN sign */
.kf-09__sign-box{
  border:4px solid var(--red);
  border-radius:8px;
  padding:12px 32px;
  display:inline-block;
  position:relative;
  box-shadow:
    0 0 12px var(--red),
    0 0 30px rgba(255,48,48,.4),
    inset 0 0 12px rgba(255,48,48,.1);
  animation:kf-09-box 5s steps(1) infinite 2s;
}
@keyframes kf-09-box{
  0%,89%,91%,93%,100%{box-shadow:0 0 12px var(--red),0 0 30px rgba(255,48,48,.4),inset 0 0 12px rgba(255,48,48,.1)}
  90%,92%{box-shadow:none}
}
.kf-09__s3{
  font-size:clamp(1.8rem,6vw,3rem);
  color:var(--red);
  letter-spacing:.3em;
  text-shadow:0 0 8px var(--red),0 0 20px rgba(255,48,48,.5);
  animation:kf-09-box 5s steps(1) infinite 2s;
}
/* Dots on box */
.kf-09__sign-box::before,.kf-09__sign-box::after{
  content:'●';position:absolute;top:50%;transform:translateY(-50%);
  font-size:12px;color:var(--red);
  text-shadow:0 0 6px var(--red);
}
.kf-09__sign-box::before{left:-20px}
.kf-09__sign-box::after{right:-20px}

/* 4 — Script + glow halo */
.kf-09__s4{
  font-family:'Sacramento',cursive;
  font-size:clamp(2.4rem,8vw,4.5rem);
  color:var(--yellow);
  text-shadow:
    0 0 6px var(--yellow),
    0 0 18px var(--yellow),
    0 0 40px rgba(255,242,0,.5);
  animation:kf-09-hum 2.5s ease-in-out infinite;
}
@keyframes kf-09-hum{
  0%,100%{text-shadow:0 0 6px var(--yellow),0 0 18px var(--yellow),0 0 40px rgba(255,242,0,.5)}
  50%{text-shadow:0 0 8px var(--yellow),0 0 25px var(--yellow),0 0 60px rgba(255,242,0,.7),0 0 90px rgba(255,242,0,.3)}
}

/* 5 — Multi-word stagger flicker */
.kf-09__multirow{display:flex;gap:20px;justify-content:center;flex-wrap:wrap}
.kf-09__word{
  font-size:clamp(1.4rem,5vw,2.8rem);
  letter-spacing:.15em;
}
.kf-09__word:nth-child(1){color:var(--pink);text-shadow:0 0 10px var(--pink),0 0 30px rgba(255,45,206,.5);animation:kf-09-flicker1 7s steps(1) infinite 0s}
.kf-09__word:nth-child(2){color:var(--blue);text-shadow:0 0 10px var(--blue),0 0 30px rgba(77,121,255,.5);animation:kf-09-flicker2 9s steps(1) infinite .5s}
.kf-09__word:nth-child(3){color:var(--green);text-shadow:0 0 10px var(--green),0 0 30px rgba(57,255,20,.5);animation:kf-09-flicker1 5s steps(1) infinite 1s}

@media(prefers-reduced-motion:reduce){.kf-09 *{animation:none!important}}
```

### 10. CSS Skeleton Loading Animation

**Type:** Pure CSS
**Description:** Shimmer skeleton loading placeholders for blog cards, profile layouts, list rows and dashboard stat cards using a scoped linear-gradient sweep keyframe.

**HTML:**
```html
<div class="kf-10">
  <div class="kf-10__title">Skeleton <span>Loading</span> Screens</div>
  <div class="kf-10__grid">

    <!-- Blog card skeletons -->
    <div class="kf-10__card">
      <div class="kf-10__skel kf-10__img-skel"></div>
      <div class="kf-10__skel kf-10__line"></div>
      <div class="kf-10__skel kf-10__line--sm"></div>
      <div class="kf-10__skel kf-10__line--xs"></div>
      <div class="kf-10__avatar-row">
        <div class="kf-10__skel kf-10__av-skel"></div>
        <div class="kf-10__skel kf-10__name-skel"></div>
      </div>
    </div>
    <div class="kf-10__card">
      <div class="kf-10__skel kf-10__img-skel"></div>
      <div class="kf-10__skel kf-10__line"></div>
      <div class="kf-10__skel kf-10__line--sm"></div>
      <div class="kf-10__skel kf-10__line--xs"></div>
      <div class="kf-10__avatar-row">
        <div class="kf-10__skel kf-10__av-skel"></div>
        <div class="kf-10__skel kf-10__name-skel"></div>
      </div>
    </div>

    <!-- Profile skeleton -->
    <div class="kf-10__profile">
      <div class="kf-10__skel kf-10__profile-av"></div>
      <div class="kf-10__skel kf-10__profile-name"></div>
      <div class="kf-10__skel kf-10__profile-sub"></div>
      <div class="kf-10__profile-bars">
        <div class="kf-10__skel" style="height:11px"></div>
        <div class="kf-10__skel" style="height:11px;width:85%"></div>
        <div class="kf-10__skel" style="height:11px;width:70%"></div>
        <div class="kf-10__skel" style="height:11px;width:90%"></div>
      </div>
    </div>

    <!-- List skeleton -->
    <div class="kf-10__list" style="grid-column:span 2">
      <div class="kf-10__list-item"><div class="kf-10__skel kf-10__li-icon"></div><div class="kf-10__li-body"><div class="kf-10__skel kf-10__li-t"></div><div class="kf-10__skel kf-10__li-s"></div></div></div>
      <div class="kf-10__list-item"><div class="kf-10__skel kf-10__li-icon"></div><div class="kf-10__li-body"><div class="kf-10__skel kf-10__li-t"></div><div class="kf-10__skel kf-10__li-s"></div></div></div>
      <div class="kf-10__list-item"><div class="kf-10__skel kf-10__li-icon"></div><div class="kf-10__li-body"><div class="kf-10__skel kf-10__li-t"></div><div class="kf-10__skel kf-10__li-s"></div></div></div>
    </div>

    <div class="kf-10__card">
      <div class="kf-10__skel kf-10__img-skel"></div>
      <div class="kf-10__skel kf-10__line"></div>
      <div class="kf-10__skel kf-10__line--sm"></div>
    </div>

    <!-- Dashboard -->
    <div class="kf-10__dash">
      <div class="kf-10__stat-card"><div class="kf-10__skel kf-10__stat-num"></div><div class="kf-10__skel kf-10__stat-label"></div><div class="kf-10__skel kf-10__stat-bar"></div></div>
      <div class="kf-10__stat-card"><div class="kf-10__skel kf-10__stat-num"></div><div class="kf-10__skel kf-10__stat-label"></div><div class="kf-10__skel kf-10__stat-bar"></div></div>
      <div class="kf-10__stat-card"><div class="kf-10__skel kf-10__stat-num"></div><div class="kf-10__skel kf-10__stat-label"></div><div class="kf-10__skel kf-10__stat-bar"></div></div>
      <div class="kf-10__stat-card"><div class="kf-10__skel kf-10__stat-num"></div><div class="kf-10__skel kf-10__stat-label"></div><div class="kf-10__skel kf-10__stat-bar"></div></div>
    </div>
  </div>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');
.kf-10,.kf-10 *,.kf-10 *::before,.kf-10 *::after{box-sizing:border-box;margin:0;padding:0}
.kf-10 ::selection{background:#7c3aed;color:#fff}
.kf-10{
  --bg:#f5f3ff;
  --card:#fff;
  --base:#e5e7eb;
  --shine:rgba(255,255,255,.9);
  --purple:#7c3aed;
  --purple-light:#ede9fe;
  font-family:'Inter',sans-serif;
  background:var(--bg);
  min-height:100vh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:40px 20px;gap:40px;
  color:#1f2937;
}
.kf-10__title{font-size:1.6rem;font-weight:600;color:#1f2937;letter-spacing:-.02em}
.kf-10__title span{color:var(--purple)}
.kf-10__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:900px;width:100%}

/* Shimmer core */
.kf-10__skel{
  background:var(--base);
  border-radius:6px;
  position:relative;
  overflow:hidden;
}
.kf-10__skel::after{
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(90deg,transparent 0%,var(--shine) 50%,transparent 100%);
  animation:kf-10-shimmer 1.6s ease-in-out infinite;
}
@keyframes kf-10-shimmer{
  0%{transform:translateX(-100%)}
  100%{transform:translateX(100%)}
}

/* 1 — Blog card skeleton */
.kf-10__card{background:var(--card);border-radius:16px;padding:20px;box-shadow:0 1px 3px rgba(0,0,0,.08);display:flex;flex-direction:column;gap:12px}
.kf-10__img-skel{height:140px;border-radius:10px}
.kf-10__line{height:14px}
.kf-10__line--sm{height:12px;width:70%}
.kf-10__line--xs{height:10px;width:50%}
.kf-10__avatar-row{display:flex;gap:10px;align-items:center;margin-top:4px}
.kf-10__av-skel{width:32px;height:32px;border-radius:50%;flex:0 0 32px}
.kf-10__name-skel{height:11px;flex:0 0 90px}

/* 2 — Profile skeleton */
.kf-10__profile{background:var(--card);border-radius:16px;padding:24px;box-shadow:0 1px 3px rgba(0,0,0,.08);display:flex;flex-direction:column;align-items:center;gap:14px}
.kf-10__profile-av{width:72px;height:72px;border-radius:50%}
.kf-10__profile-name{height:16px;width:120px}
.kf-10__profile-sub{height:12px;width:80px}
.kf-10__profile-bars{width:100%;display:flex;flex-direction:column;gap:8px}

/* 3 — List skeleton */
.kf-10__list{background:var(--card);border-radius:16px;padding:20px;box-shadow:0 1px 3px rgba(0,0,0,.08);display:flex;flex-direction:column;gap:0}
.kf-10__list-item{display:flex;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--bg)}
.kf-10__list-item:last-child{border:0;padding-bottom:0}
.kf-10__li-icon{width:40px;height:40px;border-radius:10px;flex:0 0 40px}
.kf-10__li-body{flex:1;display:flex;flex-direction:column;gap:7px}
.kf-10__li-t{height:13px}
.kf-10__li-s{height:10px;width:65%}

/* 4 — Dashboard skeleton */
.kf-10__dash{grid-column:span 3;background:var(--card);border-radius:16px;padding:24px;box-shadow:0 1px 3px rgba(0,0,0,.08);display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.kf-10__stat-card{background:var(--purple-light);border-radius:12px;padding:18px;display:flex;flex-direction:column;gap:10px}
.kf-10__stat-num{height:28px;width:80px}
.kf-10__stat-label{height:11px;width:60%}
.kf-10__stat-bar{height:5px;border-radius:3px;margin-top:4px}

/* Stagger delays for variety */
.kf-10__card:nth-child(2) .kf-10__skel::after{animation-delay:.2s}
.kf-10__card:nth-child(3) .kf-10__skel::after{animation-delay:.4s}
.kf-10__list-item:nth-child(2) .kf-10__skel::after{animation-delay:.15s}
.kf-10__list-item:nth-child(3) .kf-10__skel::after{animation-delay:.3s}
.kf-10__stat-card:nth-child(2) .kf-10__skel::after{animation-delay:.1s}
.kf-10__stat-card:nth-child(3) .kf-10__skel::after{animation-delay:.2s}
.kf-10__stat-card:nth-child(4) .kf-10__skel::after{animation-delay:.3s}

@media(max-width:700px){.kf-10__grid{grid-template-columns:1fr}.kf-10__dash{grid-column:span 1;grid-template-columns:repeat(2,1fr)}}
@media(prefers-reduced-motion:reduce){.kf-10__skel::after{animation:none}}
```

### 11. CSS Glitch Text Animation Effect

**Type:** Pure CSS
**Description:** Four CSS glitch text effects: RGB channel split, terminal ghost, slice glitch and noise word distortion — using clip-path and translate keyframes with no JS.

**HTML:**
```html
<div class="kf-11">
  <div class="kf-11__glitch" data-text="GLITCH">GLITCH</div>
  <div class="kf-11__terminal" data-text=">> SYSTEM_OVERRIDE.exe">&#62;&#62; SYSTEM_OVERRIDE.exe</div>
  <div class="kf-11__slice" data-text="CORRUPT">CORRUPT</div>
  <div class="kf-11__noise" data-text="SYSTEM">SYSTEM</div>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@700;900&family=Share+Tech+Mono&display=swap');
.kf-11,.kf-11 *,.kf-11 *::before,.kf-11 *::after{box-sizing:border-box;margin:0;padding:0}
.kf-11 ::selection{background:#00ff41;color:#000}
.kf-11{
  --bg:#0a0a0a;
  --green:#00ff41;
  --red:#ff0055;
  --cyan:#00e5ff;
  --white:#f0f0f0;
  font-family:'Orbitron',monospace;
  background:var(--bg);
  min-height:100vh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:60px 24px;gap:72px;
  overflow:hidden;
  position:relative;
}
/* Scanline overlay */
.kf-11::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:10;
  background:repeating-linear-gradient(0deg,transparent 0 2px,rgba(0,255,65,.02) 2px 4px);
}

/* 1 — Classic RGB split glitch */
.kf-11__glitch{
  font-size:clamp(2.5rem,10vw,6rem);
  font-weight:900;
  color:var(--white);
  position:relative;
  letter-spacing:.05em;
  animation:kf-11-shudder 4s steps(1) infinite;
}
.kf-11__glitch::before{
  content:attr(data-text);
  position:absolute;inset:0;
  color:var(--red);
  clip-path:polygon(0 30%,100% 30%,100% 55%,0 55%);
  transform:translateX(-4px);
  animation:kf-11-glitch-r 4s steps(1) infinite;
}
.kf-11__glitch::after{
  content:attr(data-text);
  position:absolute;inset:0;
  color:var(--cyan);
  clip-path:polygon(0 55%,100% 55%,100% 80%,0 80%);
  transform:translateX(4px);
  animation:kf-11-glitch-c 4s steps(1) infinite .05s;
}
@keyframes kf-11-glitch-r{
  0%,85%,100%{opacity:0;transform:translateX(0)}
  86%{opacity:1;transform:translateX(-6px)}
  87%{opacity:1;transform:translateX(-2px);clip-path:polygon(0 20%,100% 20%,100% 40%,0 40%)}
  88%{opacity:0}
  92%{opacity:1;transform:translateX(-8px);clip-path:polygon(0 60%,100% 60%,100% 80%,0 80%)}
  94%{opacity:0}
}
@keyframes kf-11-glitch-c{
  0%,85%,100%{opacity:0;transform:translateX(0)}
  86%{opacity:1;transform:translateX(5px)}
  88%{opacity:0}
  92%{opacity:1;transform:translateX(3px);clip-path:polygon(0 40%,100% 40%,100% 60%,0 60%)}
  94%{opacity:0}
}
@keyframes kf-11-shudder{
  0%,84%,100%{transform:skewX(0)}
  85%{transform:skewX(-2deg)}
  87%{transform:skewX(2deg)}
  89%,90%{transform:skewX(0)}
}

/* 2 — Green terminal glitch */
.kf-11__terminal{
  font-family:'Share Tech Mono',monospace;
  font-size:clamp(1.2rem,4vw,2rem);
  color:var(--green);
  text-shadow:0 0 8px rgba(0,255,65,.5);
  position:relative;
  animation:kf-11-term 5s steps(1) infinite;
}
.kf-11__terminal::before{
  content:attr(data-text);
  position:absolute;inset:0;
  color:rgba(0,255,65,.3);
  animation:kf-11-term-ghost 5s steps(1) infinite;
  overflow:hidden;
}
@keyframes kf-11-term{
  0%,78%,100%{transform:none;filter:none}
  79%{transform:translateX(-3px);filter:brightness(1.3)}
  80%{transform:translateX(2px);filter:brightness(.8)}
  81%{transform:none;filter:none}
  91%{transform:translateX(-1px) scaleY(1.02)}
  92%{transform:none}
}
@keyframes kf-11-term-ghost{
  0%,78%,100%{opacity:0;transform:none}
  79%,80%,81%{opacity:1;transform:translateY(3px)}
  82%{opacity:0}
}

/* 3 — Slice glitch */
.kf-11__slice{
  font-size:clamp(2rem,8vw,4.5rem);
  font-weight:700;
  color:var(--white);
  position:relative;
  line-height:1;
}
.kf-11__slice::before{
  content:attr(data-text);
  position:absolute;inset:0;
  background:linear-gradient(var(--bg) 45%,transparent 45%,transparent 55%,var(--bg) 55%);
  color:var(--cyan);
  animation:kf-11-slice 3s steps(1) infinite 1s;
}
@keyframes kf-11-slice{
  0%,89%,100%{transform:translateX(0);opacity:0}
  90%{transform:translateX(-8px);opacity:1}
  91%{transform:translateX(6px)}
  92%{transform:translateX(0);opacity:0}
  95%{transform:translateX(4px);opacity:.6}
  96%{opacity:0}
}

/* 4 — Noise word */
.kf-11__noise{
  font-size:clamp(1.8rem,7vw,4rem);
  font-weight:900;
  color:var(--white);
  position:relative;
  overflow:hidden;
}
.kf-11__noise::before{
  content:'S!Yst3m#FaIL';
  position:absolute;inset:0;
  color:var(--red);
  font-family:'Share Tech Mono';
  font-size:.8em;
  letter-spacing:.2em;
  animation:kf-11-noise 4s steps(1) infinite 0.5s;
  opacity:0;
}
@keyframes kf-11-noise{
  0%,87%,100%{opacity:0;transform:none}
  88%{opacity:1;transform:translateY(-2px) scaleX(1.04)}
  89%{transform:translateY(2px) scaleX(.98)}
  90%,92%{opacity:0}
  91%{opacity:.8;transform:translateX(-4px)}
}

@media(prefers-reduced-motion:reduce){.kf-11 *,.kf-11 *::before,.kf-11 *::after{animation:none!important}}
```

### 12. CSS Orbit Animation Solar System

**Type:** Pure CSS
**Description:** Animated solar system with Sun, Mercury, Venus, Earth, Mars, Jupiter and Saturn orbiting at variable speeds on a starfield background — pure CSS rotate keyframes.

**HTML:**
```html
<div class="kf-12">
  <div class="kf-12__system">
    <!-- Sun -->
    <div class="kf-12__sun"></div>
    <!-- Orbits -->
    <div class="kf-12__orbit kf-12__o-mercury"><div class="kf-12__planet kf-12__p-mercury" data-name="MERCURY"></div></div>
    <div class="kf-12__orbit kf-12__o-venus"><div class="kf-12__planet kf-12__p-venus" data-name="VENUS"></div></div>
    <div class="kf-12__orbit kf-12__o-earth"><div class="kf-12__planet kf-12__p-earth" data-name="EARTH"></div></div>
    <div class="kf-12__orbit kf-12__o-mars"><div class="kf-12__planet kf-12__p-mars" data-name="MARS"></div></div>
    <div class="kf-12__orbit kf-12__o-jupiter"><div class="kf-12__planet kf-12__p-jupiter" data-name="JUPITER"></div></div>
    <div class="kf-12__orbit kf-12__o-saturn"><div class="kf-12__planet kf-12__p-saturn" data-name="SATURN"></div></div>
  </div>
  <div class="kf-12__label">CSS KEYFRAME ORBIT — SOLAR SYSTEM</div>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap');
.kf-12,.kf-12 *,.kf-12 *::before,.kf-12 *::after{box-sizing:border-box;margin:0;padding:0}
.kf-12 ::selection{background:#ffd166;color:#000}
.kf-12{
  --bg:#04050f;
  --star:#fff;
  --sun:#ffd166;
  --mercury:#a8a8a8;
  --venus:#e5c07b;
  --earth:#4cc9f0;
  --mars:#e57373;
  --jupiter:#c99b5f;
  --saturn:#f0d080;
  font-family:'Space Mono',monospace;
  background:var(--bg);
  min-height:100vh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:40px 20px;
  gap:24px;
  overflow:hidden;
  position:relative;
  color:#fff;
}
/* Starfield */
.kf-12::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:
    radial-gradient(1px 1px at 10% 15%,#fff,transparent),
    radial-gradient(1px 1px at 25% 60%,rgba(255,255,255,.8),transparent),
    radial-gradient(1.5px 1.5px at 55% 20%,#fff,transparent),
    radial-gradient(1px 1px at 75% 75%,rgba(255,255,255,.9),transparent),
    radial-gradient(1px 1px at 40% 90%,rgba(255,255,255,.7),transparent),
    radial-gradient(1px 1px at 88% 35%,#fff,transparent),
    radial-gradient(1.5px 1.5px at 18% 80%,rgba(255,255,255,.6),transparent),
    radial-gradient(1px 1px at 65% 50%,rgba(255,255,255,.8),transparent),
    radial-gradient(1px 1px at 92% 10%,#fff,transparent),
    radial-gradient(1px 1px at 5% 45%,rgba(255,255,255,.7),transparent);
}

/* ——— System ——— */
.kf-12__system{position:relative;width:min(560px,90vw);height:min(560px,90vw);display:flex;align-items:center;justify-content:center}

/* Sun */
.kf-12__sun{
  width:52px;height:52px;border-radius:50%;
  background:radial-gradient(circle at 38% 35%,#fff9c4,var(--sun) 60%,#e65100);
  box-shadow:0 0 20px var(--sun),0 0 50px rgba(255,209,102,.4),0 0 80px rgba(255,209,102,.15);
  animation:kf-12-pulse 3s ease-in-out infinite;
  position:relative;z-index:5;flex:0 0 52px;
}
@keyframes kf-12-pulse{
  0%,100%{box-shadow:0 0 20px var(--sun),0 0 50px rgba(255,209,102,.4)}
  50%{box-shadow:0 0 30px var(--sun),0 0 70px rgba(255,209,102,.6),0 0 100px rgba(255,209,102,.2)}
}

/* Orbit rings + planets */
.kf-12__orbit{
  position:absolute;border-radius:50%;border:1px solid rgba(255,255,255,.06);
  display:flex;align-items:flex-start;justify-content:center;
}
.kf-12__planet{
  border-radius:50%;
  margin-top:-1px;
  position:relative;
  box-shadow:inset -3px -2px 6px rgba(0,0,0,.6);
}
.kf-12__planet::after{
  content:attr(data-name);
  position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%);
  font-size:9px;white-space:nowrap;color:rgba(255,255,255,.5);letter-spacing:.1em;
}

/* Mercury */
.kf-12__o-mercury{width:14%;height:14%;animation:kf-12-orbit 2.4s linear infinite}
.kf-12__p-mercury{width:10px;height:10px;background:radial-gradient(circle at 38% 35%,#ddd,var(--mercury))}
/* Venus */
.kf-12__o-venus{width:24%;height:24%;animation:kf-12-orbit 6s linear infinite}
.kf-12__p-venus{width:14px;height:14px;background:radial-gradient(circle at 38% 35%,#fff3c4,var(--venus))}
/* Earth */
.kf-12__o-earth{width:36%;height:36%;animation:kf-12-orbit 10s linear infinite}
.kf-12__p-earth{width:16px;height:16px;background:radial-gradient(circle at 38% 35%,#90d8ff,var(--earth))}
/* Mars */
.kf-12__o-mars{width:50%;height:50%;animation:kf-12-orbit 19s linear infinite}
.kf-12__p-mars{width:12px;height:12px;background:radial-gradient(circle at 38% 35%,#ff9e9e,var(--mars))}
/* Jupiter */
.kf-12__o-jupiter{width:68%;height:68%;animation:kf-12-orbit 118s linear infinite}
.kf-12__p-jupiter{width:26px;height:26px;background:radial-gradient(circle at 38% 35%,#f5d9a8,var(--jupiter))}
/* Saturn */
.kf-12__o-saturn{width:86%;height:86%;animation:kf-12-orbit 294s linear infinite}
.kf-12__p-saturn{width:22px;height:22px;background:radial-gradient(circle at 38% 35%,#fff5c0,var(--saturn));position:relative}
.kf-12__p-saturn::before{
  content:'';position:absolute;top:50%;left:50%;
  width:38px;height:8px;
  transform:translate(-50%,-50%) rotateX(65deg);
  border:3px solid rgba(240,208,128,.6);border-radius:50%;
  box-shadow:0 0 0 4px rgba(240,208,128,.15);
}

@keyframes kf-12-orbit{to{transform:rotate(360deg)}}

.kf-12__label{font-size:.7rem;letter-spacing:.2em;color:rgba(255,255,255,.35)}

@media(max-width:420px){.kf-12__system{width:320px;height:320px}}
@media(prefers-reduced-motion:reduce){.kf-12 *{animation:none!important}}
```

### 13. CSS Liquid Fill Animation Progress Bar

**Type:** Pure CSS
**Description:** Liquid-fill progress bars with wave-bubble effect and circular liquid-fill widgets using CSS clip-path, pseudo-element waves and scoped keyframes.

**HTML:**
```html
<div class="kf-13">
  <div class="kf-13__title">Liquid Fill <span>Progress</span> Bars</div>

  <div class="kf-13__grid">
    <div class="kf-13__row">
      <span class="kf-13__row-label">Design</span>
      <div class="kf-13__track"><div class="kf-13__fill"></div></div>
      <span class="kf-13__pct">87%</span>
    </div>
    <div class="kf-13__row">
      <span class="kf-13__row-label">Frontend</span>
      <div class="kf-13__track"><div class="kf-13__fill kf-13__fill--2"></div></div>
      <span class="kf-13__pct">65%</span>
    </div>
    <div class="kf-13__row">
      <span class="kf-13__row-label">Backend</span>
      <div class="kf-13__track"><div class="kf-13__fill kf-13__fill--3"></div></div>
      <span class="kf-13__pct">42%</span>
    </div>
    <div class="kf-13__row">
      <span class="kf-13__row-label">DevOps</span>
      <div class="kf-13__track"><div class="kf-13__fill kf-13__fill--4"></div></div>
      <span class="kf-13__pct">78%</span>
    </div>
    <div class="kf-13__row">
      <span class="kf-13__row-label">Testing</span>
      <div class="kf-13__track"><div class="kf-13__fill kf-13__fill--5"></div></div>
      <span class="kf-13__pct">55%</span>
    </div>
  </div>

  <div class="kf-13__circles">
    <div class="kf-13__circle-wrap">
      <div class="kf-13__circle kf-13__circle--blue">
        <div class="kf-13__liquid"></div>
        <span class="kf-13__num">70%</span>
      </div>
      <span class="kf-13__circle-label">CPU</span>
    </div>
    <div class="kf-13__circle-wrap">
      <div class="kf-13__circle kf-13__circle--teal">
        <div class="kf-13__liquid"></div>
        <span class="kf-13__num">45%</span>
      </div>
      <span class="kf-13__circle-label">Memory</span>
    </div>
    <div class="kf-13__circle-wrap">
      <div class="kf-13__circle kf-13__circle--orange">
        <div class="kf-13__liquid"></div>
        <span class="kf-13__num">82%</span>
      </div>
      <span class="kf-13__circle-label">Storage</span>
    </div>
  </div>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@600;800;900&display=swap');
.kf-13,.kf-13 *,.kf-13 *::before,.kf-13 *::after{box-sizing:border-box;margin:0;padding:0}
.kf-13 ::selection{background:#4361ee;color:#fff}
.kf-13{
  --bg:#f0f4ff;
  --blue:#4361ee;
  --teal:#06d6a0;
  --red:#ef233c;
  --orange:#fb8500;
  --purple:#7209b7;
  font-family:'Nunito',sans-serif;
  background:var(--bg);
  min-height:100vh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:60px 24px;gap:40px;
  color:#1a1a2e;
}
.kf-13__title{font-size:clamp(1.4rem,4vw,2rem);font-weight:900;letter-spacing:-.02em;text-align:center}
.kf-13__title span{color:var(--blue)}
.kf-13__grid{display:flex;flex-direction:column;gap:28px;width:100%;max-width:560px}
.kf-13__row{display:flex;align-items:center;gap:16px}
.kf-13__row-label{font-weight:800;font-size:.88rem;width:80px;text-align:right;flex:0 0 80px}
.kf-13__pct{font-weight:900;font-size:.9rem;width:42px;color:var(--blue)}

/* Liquid fill bar */
.kf-13__track{
  flex:1;height:28px;border-radius:14px;
  background:rgba(0,0,0,.06);
  position:relative;overflow:hidden;
  box-shadow:inset 0 2px 4px rgba(0,0,0,.1);
}
.kf-13__fill{
  height:100%;border-radius:14px;position:relative;
  background:linear-gradient(90deg,var(--blue),#6c8fff);
  box-shadow:inset 0 2px 4px rgba(255,255,255,.3);
  animation:kf-13-fill1 3s cubic-bezier(.4,0,.2,1) forwards;
}
.kf-13__fill--2{background:linear-gradient(90deg,var(--teal),#43efa0);animation:kf-13-fill2 3s cubic-bezier(.4,0,.2,1) 0.3s forwards;width:0}
.kf-13__fill--3{background:linear-gradient(90deg,var(--red),#ff7096);animation:kf-13-fill3 3s cubic-bezier(.4,0,.2,1) 0.6s forwards;width:0}
.kf-13__fill--4{background:linear-gradient(90deg,var(--orange),#ffd166);animation:kf-13-fill4 3s cubic-bezier(.4,0,.2,1) 0.9s forwards;width:0}
.kf-13__fill--5{background:linear-gradient(90deg,var(--purple),#b040f5);animation:kf-13-fill5 3s cubic-bezier(.4,0,.2,1) 1.2s forwards;width:0}
@keyframes kf-13-fill1{from{width:0}to{width:87%}}
@keyframes kf-13-fill2{from{width:0}to{width:65%}}
@keyframes kf-13-fill3{from{width:0}to{width:42%}}
@keyframes kf-13-fill4{from{width:0}to{width:78%}}
@keyframes kf-13-fill5{from{width:0}to{width:55%}}

/* Liquid wave top */
.kf-13__fill::after{
  content:'';position:absolute;
  top:-8px;right:-10px;
  width:24px;height:24px;border-radius:50%;
  background:inherit;
  animation:kf-13-bubble 2s ease-in-out infinite;
}
@keyframes kf-13-bubble{
  0%,100%{transform:scaleY(1) translateY(0)}
  50%{transform:scaleY(1.3) translateY(-3px)}
}

/* Circular liquid fill */
.kf-13__circles{display:flex;gap:32px;flex-wrap:wrap;justify-content:center}
.kf-13__circle-wrap{display:flex;flex-direction:column;align-items:center;gap:12px}
.kf-13__circle{
  width:110px;height:110px;border-radius:50%;
  border:4px solid;
  position:relative;overflow:hidden;
  display:grid;place-items:center;
}
.kf-13__circle--blue{border-color:var(--blue);background:rgba(67,97,238,.08)}
.kf-13__circle--teal{border-color:var(--teal);background:rgba(6,214,160,.08)}
.kf-13__circle--orange{border-color:var(--orange);background:rgba(251,133,0,.08)}
.kf-13__liquid{
  position:absolute;bottom:0;left:-10%;width:120%;
  border-radius:50% 50% 0 0/20px;
}
.kf-13__liquid::before{
  content:'';position:absolute;
  top:-12px;left:0;right:0;height:24px;
  border-radius:50%;
  animation:kf-13-liq-wave 2.5s ease-in-out infinite;
}
.kf-13__circle--blue .kf-13__liquid{height:70%;background:rgba(67,97,238,.25);animation:kf-13-liq-fill 2s ease-out forwards}
.kf-13__circle--blue .kf-13__liquid::before{background:rgba(67,97,238,.4)}
.kf-13__circle--teal .kf-13__liquid{height:45%;background:rgba(6,214,160,.3);animation:kf-13-liq-fill 2s ease-out .3s forwards}
.kf-13__circle--teal .kf-13__liquid::before{background:rgba(6,214,160,.5)}
.kf-13__circle--orange .kf-13__liquid{height:82%;background:rgba(251,133,0,.2);animation:kf-13-liq-fill 2s ease-out .6s forwards}
.kf-13__circle--orange .kf-13__liquid::before{background:rgba(251,133,0,.4)}
@keyframes kf-13-liq-fill{from{height:0}}
@keyframes kf-13-liq-wave{
  0%,100%{transform:translateX(-8px)}
  50%{transform:translateX(8px)}
}
.kf-13__num{position:relative;z-index:1;font-size:1.4rem;font-weight:900}
.kf-13__circle--blue .kf-13__num{color:var(--blue)}
.kf-13__circle--teal .kf-13__num{color:var(--teal)}
.kf-13__circle--orange .kf-13__num{color:var(--orange)}
.kf-13__circle-label{font-size:.75rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#888}

@media(prefers-reduced-motion:reduce){.kf-13 *{animation:none!important}.kf-13__fill{width:87%}.kf-13__fill--2{width:65%}.kf-13__fill--3{width:42%}.kf-13__fill--4{width:78%}.kf-13__fill--5{width:55%}.kf-13__liquid{height:50%}}
```

### 14. CSS Stagger Animation List Items

**Type:** Pure CSS
**Description:** Three stagger animation patterns: slide-from-left list items, scale-and-fade cards and cascade drop timeline entries using nth-child animation-delay.

**HTML:**
```html
<div class="kf-14">

  <div class="kf-14__col">
    <div class="kf-14__col-title">Slide from Left</div>
    <div class="kf-14__item"><div class="kf-14__icon kf-14__icon--1">🎨</div><div class="kf-14__info"><b>UI Design</b><span>Figma · 24 components</span></div></div>
    <div class="kf-14__item"><div class="kf-14__icon kf-14__icon--2">⚡</div><div class="kf-14__info"><b>Animation</b><span>CSS keyframes</span></div></div>
    <div class="kf-14__item"><div class="kf-14__icon kf-14__icon--3">🧪</div><div class="kf-14__info"><b>Testing</b><span>Coverage 94%</span></div></div>
    <div class="kf-14__item"><div class="kf-14__icon kf-14__icon--4">🚀</div><div class="kf-14__info"><b>Deploy</b><span>CI/CD pipeline</span></div></div>
    <div class="kf-14__item"><div class="kf-14__icon kf-14__icon--5">📊</div><div class="kf-14__info"><b>Analytics</b><span>Live dashboard</span></div></div>
    <div class="kf-14__item"><div class="kf-14__icon kf-14__icon--6">🔐</div><div class="kf-14__info"><b>Security</b><span>Auth + tokens</span></div></div>
  </div>

  <div class="kf-14__cards">
    <div class="kf-14__col-title">Scale + Fade</div>
    <div class="kf-14__card"><h3>Motion Design</h3><p>Spring-based animations for delightful micro-interactions.</p><span class="kf-14__card-tag">CSS</span></div>
    <div class="kf-14__card"><h3>Glassmorphism</h3><p>Frosted glass layers with backdrop-filter blur.</p><span class="kf-14__card-tag">DESIGN</span></div>
    <div class="kf-14__card"><h3>Dark Mode</h3><p>Adaptive color palettes with CSS custom properties.</p><span class="kf-14__card-tag">THEME</span></div>
    <div class="kf-14__card"><h3>Accessibility</h3><p>prefers-reduced-motion and focus management.</p><span class="kf-14__card-tag">A11Y</span></div>
  </div>

  <div class="kf-14__timeline">
    <div class="kf-14__col-title">Cascade Drop</div>
    <div class="kf-14__titem"><div class="kf-14__dot"></div><div class="kf-14__tbody"><b>Project Kickoff</b><span>Jan 2025 · Initial scope</span></div></div>
    <div class="kf-14__titem"><div class="kf-14__dot"></div><div class="kf-14__tbody"><b>Design Sprint</b><span>Feb 2025 · 12 screens</span></div></div>
    <div class="kf-14__titem"><div class="kf-14__dot"></div><div class="kf-14__tbody"><b>Dev Phase</b><span>Mar 2025 · Component library</span></div></div>
    <div class="kf-14__titem"><div class="kf-14__dot"></div><div class="kf-14__tbody"><b>Beta Launch</b><span>Apr 2025 · 500 users</span></div></div>
    <div class="kf-14__titem"><div class="kf-14__dot"></div><div class="kf-14__tbody"><b>Go Live</b><span>May 2025 · Public release</span></div></div>
  </div>

</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;700;800&display=swap');
.kf-14,.kf-14 *,.kf-14 *::before,.kf-14 *::after{box-sizing:border-box;margin:0;padding:0}
.kf-14 ::selection{background:#f72585;color:#fff}
.kf-14{
  --bg:#0f0f23;
  --pink:#f72585;
  --cyan:#4cc9f0;
  --green:#80ffdb;
  --gold:#ffd60a;
  --white:#e8e8ff;
  --card:#16162a;
  font-family:'Plus Jakarta Sans',sans-serif;
  background:var(--bg);
  min-height:100vh;
  display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:center;
  padding:60px 24px;gap:48px;
  color:var(--white);
}

/* ——— 1: Slide-in from left ——— */
.kf-14__col{display:flex;flex-direction:column;gap:12px;min-width:240px;max-width:320px;flex:1}
.kf-14__col-title{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:#555;margin-bottom:4px}
.kf-14__item{
  background:var(--card);
  border-radius:12px;padding:16px 20px;
  display:flex;align-items:center;gap:14px;
  border:1px solid rgba(255,255,255,.05);
  opacity:0;transform:translateX(-30px);
  animation:kf-14-slide-in .5s cubic-bezier(.2,.8,.2,1) forwards;
}
.kf-14__item:nth-child(2){animation-delay:.1s}
.kf-14__item:nth-child(3){animation-delay:.2s}
.kf-14__item:nth-child(4){animation-delay:.3s}
.kf-14__item:nth-child(5){animation-delay:.4s}
.kf-14__item:nth-child(6){animation-delay:.5s}
@keyframes kf-14-slide-in{to{opacity:1;transform:translateX(0)}}
.kf-14__icon{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;font-size:1.1rem;flex:0 0 40px}
.kf-14__info{flex:1}
.kf-14__info b{display:block;font-size:.9rem;font-weight:700}
.kf-14__info span{font-size:.75rem;color:#888;margin-top:2px;display:block}

/* ——— 2: Fade + scale up ——— */
.kf-14__cards{display:flex;flex-direction:column;gap:12px;min-width:240px;max-width:320px;flex:1}
.kf-14__card{
  background:linear-gradient(135deg,rgba(247,37,133,.1),rgba(76,201,240,.08));
  border:1px solid rgba(247,37,133,.2);
  border-radius:16px;padding:20px;
  opacity:0;transform:scale(.88);
  animation:kf-14-pop .5s cubic-bezier(.34,1.56,.64,1) forwards;
}
.kf-14__card:nth-child(2){animation-delay:.12s}
.kf-14__card:nth-child(3){animation-delay:.24s}
.kf-14__card:nth-child(4){animation-delay:.36s}
@keyframes kf-14-pop{to{opacity:1;transform:scale(1)}}
.kf-14__card h3{font-size:.95rem;font-weight:800;margin-bottom:6px}
.kf-14__card p{font-size:.78rem;color:#888;line-height:1.4}
.kf-14__card-tag{display:inline-block;font-size:.65rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:3px 8px;border-radius:4px;margin-top:10px}

/* ——— 3: Cascade drop ——— */
.kf-14__timeline{display:flex;flex-direction:column;gap:0;min-width:240px;max-width:300px;flex:1;position:relative}
.kf-14__timeline::before{content:'';position:absolute;left:19px;top:0;bottom:0;width:2px;background:rgba(128,255,219,.15)}
.kf-14__titem{
  display:flex;gap:16px;align-items:flex-start;padding:12px 0;
  opacity:0;transform:translateY(-20px);
  animation:kf-14-drop .4s cubic-bezier(.4,0,.2,1) forwards;
}
.kf-14__titem:nth-child(1){animation-delay:.05s}
.kf-14__titem:nth-child(2){animation-delay:.2s}
.kf-14__titem:nth-child(3){animation-delay:.35s}
.kf-14__titem:nth-child(4){animation-delay:.5s}
.kf-14__titem:nth-child(5){animation-delay:.65s}
@keyframes kf-14-drop{to{opacity:1;transform:translateY(0)}}
.kf-14__dot{width:16px;height:16px;border-radius:50%;flex:0 0 16px;margin-top:2px;border:2px solid}
.kf-14__tbody{flex:1}
.kf-14__tbody b{font-size:.88rem;font-weight:700;display:block}
.kf-14__tbody span{font-size:.72rem;color:#666;display:block;margin-top:2px}

/* Icon colors */
.kf-14__icon--1{background:rgba(247,37,133,.15);color:var(--pink)}
.kf-14__icon--2{background:rgba(76,201,240,.15);color:var(--cyan)}
.kf-14__icon--3{background:rgba(128,255,219,.15);color:var(--green)}
.kf-14__icon--4{background:rgba(255,214,10,.15);color:var(--gold)}
.kf-14__icon--5{background:rgba(247,37,133,.1);color:var(--pink)}
.kf-14__icon--6{background:rgba(76,201,240,.1);color:var(--cyan)}
.kf-14__card:nth-child(1) .kf-14__card-tag{background:rgba(247,37,133,.2);color:var(--pink)}
.kf-14__card:nth-child(2) .kf-14__card-tag{background:rgba(76,201,240,.2);color:var(--cyan)}
.kf-14__card:nth-child(3) .kf-14__card-tag{background:rgba(128,255,219,.2);color:var(--green)}
.kf-14__card:nth-child(4) .kf-14__card-tag{background:rgba(255,214,10,.2);color:var(--gold)}
.kf-14__dot:nth-child(1){border-color:var(--pink);background:rgba(247,37,133,.2)}
.kf-14__titem:nth-child(1) .kf-14__dot{border-color:var(--pink)}
.kf-14__titem:nth-child(2) .kf-14__dot{border-color:var(--cyan)}
.kf-14__titem:nth-child(3) .kf-14__dot{border-color:var(--green)}
.kf-14__titem:nth-child(4) .kf-14__dot{border-color:var(--gold)}
.kf-14__titem:nth-child(5) .kf-14__dot{border-color:var(--pink)}

@media(prefers-reduced-motion:reduce){.kf-14 *{animation:none!important;opacity:1!important;transform:none!important}}
```

### 15. CSS Fire Animation Pure CSS

**Type:** Pure CSS
**Description:** Pure CSS fire: flickering candle with wick and wax, campfire with log base and IGNITE flame text — radial gradient bodies animated with scale and blur keyframes.

**HTML:**
```html
<div class="kf-15">
  <div class="kf-15__text">IGNITE</div>
  <div class="kf-15__row">
    <div>
      <div class="kf-15__candle">
        <div class="kf-15__flame-wrap">
          <div class="kf-15__flame kf-15__f1"></div>
          <div class="kf-15__flame kf-15__f2"></div>
          <div class="kf-15__flame kf-15__f3"></div>
          <div class="kf-15__glow"></div>
        </div>
        <div class="kf-15__wick"></div>
        <div class="kf-15__wax"></div>
      </div>
      <div class="kf-15__label">Candle</div>
    </div>
    <div>
      <div class="kf-15__camp">
        <div class="kf-15__camp-flame">
          <div class="kf-15__cf kf-15__cf--5"></div>
          <div class="kf-15__cf kf-15__cf--4"></div>
          <div class="kf-15__cf kf-15__cf--1"></div>
          <div class="kf-15__cf kf-15__cf--2"></div>
          <div class="kf-15__cf kf-15__cf--3"></div>
        </div>
        <div class="kf-15__logs">
          <div class="kf-15__log"></div>
          <div class="kf-15__log"></div>
          <div class="kf-15__log"></div>
        </div>
      </div>
      <div class="kf-15__label">Campfire</div>
    </div>
  </div>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Black+Ops+One&family=Roboto+Mono:wght@500&display=swap');
.kf-15,.kf-15 *,.kf-15 *::before,.kf-15 *::after{box-sizing:border-box;margin:0;padding:0}
.kf-15 ::selection{background:#ff4500;color:#fff}
.kf-15{
  --bg:#0d0800;
  --flame1:#ff4500;
  --flame2:#ff8c00;
  --flame3:#ffd700;
  --flame4:#fff5c0;
  font-family:'Black Ops One',sans-serif;
  background:radial-gradient(circle at 50% 80%,#1a0800 0%,#0d0800 60%);
  min-height:100vh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:60px 24px;gap:60px;
  overflow:hidden;
  position:relative;
  color:#ffd700;
}
/* ember particles */
.kf-15::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:
    radial-gradient(1px 1px at 20% 40%,rgba(255,69,0,.8),transparent),
    radial-gradient(1px 1px at 60% 20%,rgba(255,140,0,.6),transparent),
    radial-gradient(1.5px 1.5px at 80% 50%,rgba(255,215,0,.5),transparent);
  animation:kf-15-ember 3s linear infinite;
}
@keyframes kf-15-ember{to{background-position:0 -200px;opacity:0}}

/* ——— Candle flame ——— */
.kf-15__candle{display:flex;flex-direction:column;align-items:center;gap:0}
.kf-15__flame-wrap{position:relative;width:60px;height:100px;display:flex;justify-content:center;align-items:flex-end}
.kf-15__flame{
  position:absolute;bottom:0;
  border-radius:50% 50% 20% 20%/60% 60% 40% 40%;
  filter:blur(1px);
  transform-origin:50% 100%;
}
.kf-15__f1{width:28px;height:80px;background:linear-gradient(180deg,var(--flame4) 0%,var(--flame3) 30%,var(--flame2) 65%,var(--flame1) 100%);animation:kf-15-flicker 0.8s ease-in-out infinite}
.kf-15__f2{width:22px;height:64px;background:linear-gradient(180deg,#fff 0%,var(--flame4) 30%,var(--flame3) 70%,transparent 100%);animation:kf-15-flicker 0.6s ease-in-out infinite reverse}
.kf-15__f3{width:14px;height:48px;background:linear-gradient(180deg,#fff 0%,rgba(255,245,192,.8) 50%,transparent 100%);animation:kf-15-flicker 0.9s ease-in-out infinite 0.2s}
@keyframes kf-15-flicker{
  0%,100%{transform:scaleX(1) scaleY(1) rotate(-2deg)}
  25%{transform:scaleX(0.88) scaleY(1.06) rotate(2deg)}
  50%{transform:scaleX(1.05) scaleY(0.96) rotate(-1deg)}
  75%{transform:scaleX(0.92) scaleY(1.04) rotate(1.5deg)}
}
.kf-15__wick{width:3px;height:14px;background:linear-gradient(180deg,#333,#888);margin-top:0;z-index:2;position:relative}
.kf-15__wax{width:50px;height:100px;background:linear-gradient(90deg,#f0ebe0,#e8e0d0 50%,#d8d0c0);border-radius:4px;position:relative;display:flex;justify-content:center}
.kf-15__wax::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:30px;height:8px;border-radius:50%;background:rgba(255,220,180,.4);animation:kf-15-melt 3s ease-in-out infinite}
@keyframes kf-15-melt{50%{transform:translateX(-50%) scaleX(1.1);background:rgba(255,200,150,.3)}}
.kf-15__glow{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:80px;height:40px;background:radial-gradient(ellipse,rgba(255,140,0,.3),transparent);filter:blur(8px);animation:kf-15-glow 0.8s ease-in-out infinite alternate}
@keyframes kf-15-glow{to{opacity:.6;transform:translateX(-50%) scale(1.2)}}

/* ——— Campfire ——— */
.kf-15__camp{display:flex;flex-direction:column;align-items:center;gap:0}
.kf-15__logs{width:120px;height:24px;position:relative}
.kf-15__log{position:absolute;width:80px;height:12px;border-radius:6px;background:linear-gradient(180deg,#5a3a1a,#3a2010)}
.kf-15__log:nth-child(1){bottom:0;left:20px}
.kf-15__log:nth-child(2){bottom:0;left:20px;transform:rotate(40deg);transform-origin:40% 50%}
.kf-15__log:nth-child(3){bottom:0;left:20px;transform:rotate(-40deg);transform-origin:60% 50%}
.kf-15__camp-flame{position:relative;width:120px;height:120px;display:flex;justify-content:center;align-items:flex-end}
.kf-15__cf{
  position:absolute;bottom:0;
  border-radius:50% 50% 20% 20%/60% 60% 40% 40%;
  transform-origin:50% 100%;
  filter:blur(2px);
}
.kf-15__cf--1{width:60px;height:100px;background:linear-gradient(180deg,var(--flame4),var(--flame3) 30%,var(--flame2) 65%,var(--flame1));animation:kf-15-flicker 1.1s ease-in-out infinite}
.kf-15__cf--2{width:44px;height:82px;background:linear-gradient(180deg,#fff,var(--flame4) 30%,var(--flame3) 70%,transparent);animation:kf-15-flicker 0.7s ease-in-out infinite 0.1s}
.kf-15__cf--3{width:28px;height:60px;background:linear-gradient(180deg,#fff,rgba(255,245,192,.9),transparent);animation:kf-15-flicker 0.9s ease-in-out infinite 0.3s}
.kf-15__cf--4{width:70px;height:60px;left:0;right:0;margin:0 auto;background:linear-gradient(180deg,transparent,var(--flame1) 50%,transparent);animation:kf-15-flicker 1.3s ease-in-out infinite;filter:blur(3px)}
.kf-15__cf--5{width:50px;height:40px;left:0;right:0;margin:0 auto;background:var(--flame2);border-radius:50%;bottom:0;animation:kf-15-flicker 0.6s ease-in-out infinite 0.4s;filter:blur(4px)}

/* ——— Torch text ——— */
.kf-15__text{
  font-size:clamp(2.5rem,10vw,5rem);
  letter-spacing:.1em;
  color:var(--flame2);
  text-shadow:
    0 0 10px var(--flame1),
    0 0 30px var(--flame2),
    0 0 60px rgba(255,140,0,.4);
  animation:kf-15-text 2s ease-in-out infinite alternate;
  position:relative;
}
@keyframes kf-15-text{
  from{text-shadow:0 0 10px var(--flame1),0 0 30px var(--flame2),0 0 60px rgba(255,140,0,.4)}
  to{text-shadow:0 0 15px var(--flame3),0 0 40px var(--flame3),0 0 80px rgba(255,200,0,.5),0 0 120px rgba(255,140,0,.3)}
}

.kf-15__row{display:flex;gap:60px;flex-wrap:wrap;justify-content:center;align-items:flex-end}
.kf-15__label{font-family:'Roboto Mono';font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,140,0,.4);text-align:center;margin-top:12px}

@media(prefers-reduced-motion:reduce){.kf-15 *{animation:none!important}}
```

### 16. CSS Ripple Click Animation Effect

**Type:** Pure CSS
**Description:** Material Design ripple animations on six button variants, FAB, chip groups and icon buttons using ::after pseudo-element scale + opacity keyframes.

**HTML:**
```html
<div class="kf-16">
  <div style="text-align:center">
    <div class="kf-16__title">CSS Ripple Click Animations</div>
    <div class="kf-16__subtitle">Material Design ripple effect — pure CSS keyframes</div>
  </div>
  <div class="kf-16__grid">
    <div class="kf-16__cell">
      <button class="kf-16__btn kf-16__btn--1">🚀 Launch</button>
      <span class="kf-16__label">Filled</span>
    </div>
    <div class="kf-16__cell">
      <button class="kf-16__btn kf-16__btn--2">♥ Like</button>
      <span class="kf-16__label">Filled Pink</span>
    </div>
    <div class="kf-16__cell">
      <button class="kf-16__btn kf-16__btn--3">Subscribe</button>
      <span class="kf-16__label">Outlined</span>
    </div>
    <div class="kf-16__cell">
      <button class="kf-16__btn kf-16__btn--4">Follow</button>
      <span class="kf-16__label">Pill Shape</span>
    </div>
    <div class="kf-16__cell">
      <button class="kf-16__btn kf-16__btn--5">Deploy →</button>
      <span class="kf-16__label">Orange Flat</span>
    </div>
    <div class="kf-16__cell">
      <button class="kf-16__btn kf-16__btn--6">✓ Confirm</button>
      <span class="kf-16__label">Rounded</span>
    </div>
    <div class="kf-16__cell">
      <button class="kf-16__fab">+</button>
      <span class="kf-16__label">FAB</span>
    </div>
    <div class="kf-16__cell">
      <div class="kf-16__chips">
        <button class="kf-16__chip">Design</button>
        <button class="kf-16__chip">React</button>
        <button class="kf-16__chip">CSS</button>
      </div>
      <span class="kf-16__label">Chips</span>
    </div>
    <div class="kf-16__cell">
      <div class="kf-16__icon-row">
        <button class="kf-16__iconbtn">🏠</button>
        <button class="kf-16__iconbtn">🔍</button>
        <button class="kf-16__iconbtn">⚙️</button>
        <button class="kf-16__iconbtn">👤</button>
      </div>
      <span class="kf-16__label">Icon Buttons</span>
    </div>
  </div>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');
.kf-16,.kf-16 *,.kf-16 *::before,.kf-16 *::after{box-sizing:border-box;margin:0;padding:0}
.kf-16 ::selection{background:#6200ea;color:#fff}
.kf-16{
  --bg:#fafafa;
  --dp:#6200ea;
  --purple:#7c4dff;
  --pink:#e91e63;
  --teal:#00bcd4;
  --orange:#ff6d00;
  --green:#00c853;
  --ink:#212121;
  font-family:'Roboto',sans-serif;
  background:var(--bg);
  min-height:100vh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:60px 24px;gap:48px;
  color:var(--ink);
}
.kf-16__title{font-size:clamp(1.2rem,4vw,1.8rem);font-weight:700;letter-spacing:-.01em}
.kf-16__subtitle{font-size:.88rem;color:#666;margin-top:4px;text-align:center}
.kf-16__grid{display:flex;flex-wrap:wrap;gap:24px;justify-content:center;max-width:800px}
.kf-16__cell{display:flex;flex-direction:column;align-items:center;gap:14px}
.kf-16__label{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:#999}

/* Material ripple base */
.kf-16__btn{
  position:relative;overflow:hidden;
  border:none;border-radius:4px;
  cursor:pointer;
  font-family:'Roboto';font-weight:500;font-size:.9rem;letter-spacing:.08em;text-transform:uppercase;
  padding:14px 28px;
  display:flex;align-items:center;justify-content:center;gap:8px;
}
.kf-16__btn::after{
  content:'';
  position:absolute;
  top:50%;left:50%;
  width:0;height:0;
  border-radius:50%;
  transform:translate(-50%,-50%);
  animation:kf-16-ripple 1.4s ease-out infinite;
}

/* Button variants */
.kf-16__btn--1{background:var(--dp);color:#fff;box-shadow:0 3px 6px rgba(98,0,234,.35)}
.kf-16__btn--1::after{background:rgba(255,255,255,.4)}
.kf-16__btn--2{background:var(--pink);color:#fff;box-shadow:0 3px 6px rgba(233,30,99,.35)}
.kf-16__btn--2::after{background:rgba(255,255,255,.35)}
.kf-16__btn--3{background:#fff;color:var(--dp);border:2px solid var(--dp);box-shadow:0 2px 4px rgba(0,0,0,.1)}
.kf-16__btn--3::after{background:rgba(98,0,234,.2)}
.kf-16__btn--4{background:var(--teal);color:#fff;border-radius:50px;box-shadow:0 3px 8px rgba(0,188,212,.35)}
.kf-16__btn--4::after{background:rgba(255,255,255,.35)}
.kf-16__btn--5{background:var(--orange);color:#fff;border-radius:2px;box-shadow:0 4px 8px rgba(255,109,0,.35)}
.kf-16__btn--5::after{background:rgba(255,255,255,.3);animation-delay:.2s}
.kf-16__btn--6{background:var(--green);color:#fff;border-radius:8px;box-shadow:0 3px 6px rgba(0,200,83,.35)}
.kf-16__btn--6::after{background:rgba(255,255,255,.3)}
@keyframes kf-16-ripple{
  0%{width:0;height:0;opacity:.8}
  100%{width:220px;height:220px;opacity:0}
}

/* FAB ripple */
.kf-16__fab{
  width:56px;height:56px;border-radius:50%;
  border:none;background:var(--dp);color:#fff;
  font-size:1.4rem;cursor:pointer;
  position:relative;overflow:hidden;
  box-shadow:0 6px 16px rgba(98,0,234,.45);
  display:grid;place-items:center;
  flex:0 0 56px;
}
.kf-16__fab::after{
  content:'';position:absolute;top:50%;left:50%;
  width:0;height:0;border-radius:50%;
  transform:translate(-50%,-50%);
  background:rgba(255,255,255,.4);
  animation:kf-16-ripple 1.4s ease-out infinite .3s;
}

/* Chip ripple */
.kf-16__chip{
  padding:8px 18px;border-radius:50px;
  border:1.5px solid #ddd;background:#fff;
  font-size:.85rem;font-weight:500;cursor:pointer;
  position:relative;overflow:hidden;
  color:var(--ink);
}
.kf-16__chip::after{
  content:'';position:absolute;top:50%;left:50%;
  width:0;height:0;border-radius:50%;
  transform:translate(-50%,-50%);
  background:rgba(98,0,234,.12);
  animation:kf-16-ripple 1.2s ease-out infinite;
}
.kf-16__chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.kf-16__chip:nth-child(2)::after{animation-delay:.25s;background:rgba(233,30,99,.12)}
.kf-16__chip:nth-child(3)::after{animation-delay:.5s;background:rgba(0,188,212,.12)}

/* Icon button ripple */
.kf-16__iconbtn{
  width:48px;height:48px;border-radius:50%;
  border:none;background:transparent;
  font-size:1.3rem;cursor:pointer;
  position:relative;overflow:hidden;
  display:grid;place-items:center;
}
.kf-16__iconbtn::after{
  content:'';position:absolute;top:50%;left:50%;
  width:0;height:0;border-radius:50%;
  transform:translate(-50%,-50%);
  background:rgba(0,0,0,.1);
  animation:kf-16-ripple 1.2s ease-out infinite;
}
.kf-16__icon-row{display:flex;gap:8px}
.kf-16__iconbtn:nth-child(2)::after{animation-delay:.2s}
.kf-16__iconbtn:nth-child(3)::after{animation-delay:.4s}
.kf-16__iconbtn:nth-child(4)::after{animation-delay:.6s}

@media(max-width:500px){.kf-16__grid{gap:16px}}
@media(prefers-reduced-motion:reduce){.kf-16 *{animation:none!important}}
```

### 17. CSS Floating Elements Animation

**Type:** Pure CSS
**Description:** Hero section with six floating stat cards and a floating icon grid using staggered translateY + rotate keyframe animations with unique durations per element.

**HTML:**
```html
<div class="kf-17">
  <div class="kf-17__hero">
    <!-- Floating cards -->
    <div class="kf-17__float kf-17__f1">
      <div class="kf-17__badge"><div class="kf-17__badge-dot" style="background:#34d399"></div><b style="color:#34d399">+24.6%</b> Growth</div>
    </div>
    <div class="kf-17__float kf-17__f2">
      <div class="kf-17__badge"><span>⚡</span><b>98ms</b> response</div>
    </div>
    <div class="kf-17__float kf-17__f3">
      <div class="kf-17__stat">2.4M</div>
      <div class="kf-17__stat-l">Active Users</div>
    </div>
    <div class="kf-17__float kf-17__f4">
      <div class="kf-17__badge"><div class="kf-17__badge-dot" style="background:#f472b6"></div>Live</div>
      <div class="kf-17__stat" style="font-size:1.2rem">Production</div>
    </div>
    <div class="kf-17__float kf-17__f5">
      <div class="kf-17__badge">🏆 <b>#1</b> Ranked</div>
    </div>
    <div class="kf-17__float kf-17__f6">
      <div class="kf-17__badge">🔒 <b>SSL</b> Secured</div>
    </div>

    <div class="kf-17__center">
      <h1>Build <span>Faster.</span><br>Ship Smarter.</h1>
      <p>CSS floating elements animation — pure keyframes.</p>
      <a href="#" class="kf-17__cta">Get Started →</a>
    </div>
  </div>

  <div class="kf-17__icons">
    <div class="kf-17__icon">🎨</div>
    <div class="kf-17__icon">⚡</div>
    <div class="kf-17__icon">🚀</div>
    <div class="kf-17__icon">🔐</div>
    <div class="kf-17__icon">📊</div>
  </div>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;800&display=swap');
.kf-17,.kf-17 *,.kf-17 *::before,.kf-17 *::after{box-sizing:border-box;margin:0;padding:0}
.kf-17 ::selection{background:#a855f7;color:#fff}
.kf-17{
  --bg:#0c0118;
  --purple:#a855f7;
  --blue:#38bdf8;
  --pink:#f472b6;
  --green:#34d399;
  --gold:#fbbf24;
  --white:#f0f0ff;
  font-family:'Manrope',sans-serif;
  background:var(--bg);
  min-height:100vh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:40px 20px;gap:40px;
  position:relative;overflow:hidden;
  color:var(--white);
}
/* BG glow */
.kf-17::before{content:'';position:absolute;top:20%;left:30%;width:400px;height:400px;background:radial-gradient(circle,rgba(168,85,247,.1),transparent 60%);pointer-events:none}

/* ——— Hero section with floating UI elements ——— */
.kf-17__hero{
  width:min(700px,100%);
  position:relative;
  min-height:420px;
  display:flex;align-items:center;justify-content:center;
}
.kf-17__center{text-align:center;z-index:5;position:relative}
.kf-17__center h1{font-size:clamp(2rem,7vw,4rem);font-weight:800;letter-spacing:-.03em;line-height:1}
.kf-17__center h1 span{background:linear-gradient(135deg,var(--purple),var(--blue));-webkit-background-clip:text;background-clip:text;color:transparent}
.kf-17__center p{font-size:.95rem;color:rgba(240,240,255,.6);margin-top:12px}
.kf-17__cta{display:inline-block;margin-top:20px;background:linear-gradient(135deg,var(--purple),var(--blue));color:#fff;border-radius:8px;padding:12px 28px;font-weight:700;font-size:.9rem;text-decoration:none;box-shadow:0 8px 24px rgba(168,85,247,.35)}

/* Floating cards */
.kf-17__float{
  position:absolute;
  border-radius:16px;
  background:rgba(255,255,255,.04);
  backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.08);
  padding:16px 20px;
  font-size:.82rem;
  white-space:nowrap;
  box-shadow:0 8px 32px rgba(0,0,0,.3);
}
.kf-17__f1{top:5%;left:2%;animation:kf-17-float1 6s ease-in-out infinite}
.kf-17__f2{top:8%;right:2%;animation:kf-17-float2 7s ease-in-out infinite 0.5s}
.kf-17__f3{top:50%;left:0%;transform:translateY(-50%);animation:kf-17-float1 8s ease-in-out infinite 1s}
.kf-17__f4{top:50%;right:0%;transform:translateY(-50%);animation:kf-17-float2 6.5s ease-in-out infinite 1.5s}
.kf-17__f5{bottom:5%;left:8%;animation:kf-17-float1 7.5s ease-in-out infinite 0.8s}
.kf-17__f6{bottom:5%;right:8%;animation:kf-17-float2 6s ease-in-out infinite 0.3s}

@keyframes kf-17-float1{
  0%,100%{transform:translateY(0) rotate(-1deg)}
  50%{transform:translateY(-16px) rotate(1deg)}
}
@keyframes kf-17-float2{
  0%,100%{transform:translateY(0) rotate(1deg)}
  50%{transform:translateY(-12px) rotate(-1deg)}
}
/* Adjust for f3/f4 which have extra transform */
.kf-17__f3{animation:kf-17-float-mid1 8s ease-in-out infinite 1s}
.kf-17__f4{animation:kf-17-float-mid2 6.5s ease-in-out infinite 1.5s}
@keyframes kf-17-float-mid1{
  0%,100%{transform:translateY(calc(-50% + 0px))}
  50%{transform:translateY(calc(-50% - 14px))}
}
@keyframes kf-17-float-mid2{
  0%,100%{transform:translateY(calc(-50% + 0px))}
  50%{transform:translateY(calc(-50% - 10px))}
}

.kf-17__badge{display:flex;align-items:center;gap:8px}
.kf-17__badge-dot{width:8px;height:8px;border-radius:50%}
.kf-17__badge b{font-weight:700;font-size:.9rem}
.kf-17__stat{font-weight:800;font-size:1.6rem;color:var(--white)}
.kf-17__stat-l{font-size:.7rem;color:rgba(240,240,255,.5);letter-spacing:.1em;text-transform:uppercase;margin-top:2px}

/* ——— Floating icon grid ——— */
.kf-17__icons{display:flex;gap:24px;flex-wrap:wrap;justify-content:center}
.kf-17__icon{
  width:72px;height:72px;border-radius:20px;
  display:grid;place-items:center;font-size:1.8rem;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  box-shadow:0 8px 24px rgba(0,0,0,.2);
}
.kf-17__icon:nth-child(1){animation:kf-17-float1 5s ease-in-out infinite 0s;background:rgba(168,85,247,.1);border-color:rgba(168,85,247,.2)}
.kf-17__icon:nth-child(2){animation:kf-17-float2 6s ease-in-out infinite 0.4s;background:rgba(56,189,248,.1);border-color:rgba(56,189,248,.2)}
.kf-17__icon:nth-child(3){animation:kf-17-float1 7s ease-in-out infinite 0.8s;background:rgba(244,114,182,.1);border-color:rgba(244,114,182,.2)}
.kf-17__icon:nth-child(4){animation:kf-17-float2 5.5s ease-in-out infinite 1.2s;background:rgba(52,211,153,.1);border-color:rgba(52,211,153,.2)}
.kf-17__icon:nth-child(5){animation:kf-17-float1 6.5s ease-in-out infinite 0.6s;background:rgba(251,191,36,.1);border-color:rgba(251,191,36,.2)}

@media(max-width:640px){.kf-17__f3,.kf-17__f4{display:none}}
@media(prefers-reduced-motion:reduce){.kf-17 *{animation:none!important}}
```

### 18. CSS Infinite Scroll Ticker Animation

**Type:** Pure CSS
**Description:** Stock price ticker, brand logo marquee, bidirectional word scroll rows and breaking-news headline ticker using CSS translateX keyframes on duplicated content.

**HTML:**
```html
<div class="kf-18">

  <!-- Stock ticker -->
  <div class="kf-18__ticker">
    <div class="kf-18__ticker-inner">
      <!-- Duplicate for seamless loop -->
      <div class="kf-18__stock"><span class="kf-18__stock-sym">AAPL</span><span class="kf-18__stock-price">$192.30</span><span class="kf-18__stock-chg kf-18__stock-chg--up">+2.4%</span></div>
      <div class="kf-18__stock"><span class="kf-18__stock-sym">GOOG</span><span class="kf-18__stock-price">$145.80</span><span class="kf-18__stock-chg kf-18__stock-chg--up">+0.9%</span></div>
      <div class="kf-18__stock"><span class="kf-18__stock-sym">TSLA</span><span class="kf-18__stock-price">$248.10</span><span class="kf-18__stock-chg kf-18__stock-chg--dn">-1.3%</span></div>
      <div class="kf-18__stock"><span class="kf-18__stock-sym">MSFT</span><span class="kf-18__stock-price">$420.55</span><span class="kf-18__stock-chg kf-18__stock-chg--up">+1.7%</span></div>
      <div class="kf-18__stock"><span class="kf-18__stock-sym">NVDA</span><span class="kf-18__stock-price">$875.40</span><span class="kf-18__stock-chg kf-18__stock-chg--up">+4.2%</span></div>
      <div class="kf-18__stock"><span class="kf-18__stock-sym">META</span><span class="kf-18__stock-price">$510.20</span><span class="kf-18__stock-chg kf-18__stock-chg--dn">-0.6%</span></div>
      <div class="kf-18__stock"><span class="kf-18__stock-sym">AMZN</span><span class="kf-18__stock-price">$185.90</span><span class="kf-18__stock-chg kf-18__stock-chg--up">+1.1%</span></div>
      <!-- Duplicate -->
      <div class="kf-18__stock"><span class="kf-18__stock-sym">AAPL</span><span class="kf-18__stock-price">$192.30</span><span class="kf-18__stock-chg kf-18__stock-chg--up">+2.4%</span></div>
      <div class="kf-18__stock"><span class="kf-18__stock-sym">GOOG</span><span class="kf-18__stock-price">$145.80</span><span class="kf-18__stock-chg kf-18__stock-chg--up">+0.9%</span></div>
      <div class="kf-18__stock"><span class="kf-18__stock-sym">TSLA</span><span class="kf-18__stock-price">$248.10</span><span class="kf-18__stock-chg kf-18__stock-chg--dn">-1.3%</span></div>
      <div class="kf-18__stock"><span class="kf-18__stock-sym">MSFT</span><span class="kf-18__stock-price">$420.55</span><span class="kf-18__stock-chg kf-18__stock-chg--up">+1.7%</span></div>
      <div class="kf-18__stock"><span class="kf-18__stock-sym">NVDA</span><span class="kf-18__stock-price">$875.40</span><span class="kf-18__stock-chg kf-18__stock-chg--up">+4.2%</span></div>
      <div class="kf-18__stock"><span class="kf-18__stock-sym">META</span><span class="kf-18__stock-price">$510.20</span><span class="kf-18__stock-chg kf-18__stock-chg--dn">-0.6%</span></div>
      <div class="kf-18__stock"><span class="kf-18__stock-sym">AMZN</span><span class="kf-18__stock-price">$185.90</span><span class="kf-18__stock-chg kf-18__stock-chg--up">+1.1%</span></div>
    </div>
  </div>

  <!-- Brand logos -->
  <div class="kf-18__brands">
    <div class="kf-18__brand-row">
      <span class="kf-18__brand kf-18__brand--colored">CODEFRONTS</span>
      <span class="kf-18__brand">VERCEL</span><span class="kf-18__brand">NETLIFY</span>
      <span class="kf-18__brand">SUPABASE</span><span class="kf-18__brand">FIGMA</span>
      <span class="kf-18__brand">LINEAR</span><span class="kf-18__brand">NOTION</span>
      <span class="kf-18__brand kf-18__brand--colored">CODEFRONTS</span>
      <span class="kf-18__brand">VERCEL</span><span class="kf-18__brand">NETLIFY</span>
      <span class="kf-18__brand">SUPABASE</span><span class="kf-18__brand">FIGMA</span>
      <span class="kf-18__brand">LINEAR</span><span class="kf-18__brand">NOTION</span>
    </div>
  </div>

  <!-- Word scroll -->
  <div class="kf-18__words">
    <div class="kf-18__word-row kf-18__word-row--1">
      <span class="kf-18__word">DESIGN</span><span class="kf-18__word--dot"></span>
      <span class="kf-18__word kf-18__word--outline">CODE</span><span class="kf-18__word--dot"></span>
      <span class="kf-18__word">ANIMATE</span><span class="kf-18__word--dot"></span>
      <span class="kf-18__word kf-18__word--outline">SHIP</span><span class="kf-18__word--dot"></span>
      <span class="kf-18__word">DESIGN</span><span class="kf-18__word--dot"></span>
      <span class="kf-18__word kf-18__word--outline">CODE</span><span class="kf-18__word--dot"></span>
      <span class="kf-18__word">ANIMATE</span><span class="kf-18__word--dot"></span>
      <span class="kf-18__word kf-18__word--outline">SHIP</span><span class="kf-18__word--dot"></span>
    </div>
    <div class="kf-18__word-row kf-18__word-row--2">
      <span class="kf-18__word kf-18__word--outline">MOTION</span><span class="kf-18__word--dot"></span>
      <span class="kf-18__word" style="color:var(--orange)">CRAFT</span><span class="kf-18__word--dot"></span>
      <span class="kf-18__word kf-18__word--outline">BUILD</span><span class="kf-18__word--dot"></span>
      <span class="kf-18__word" style="color:var(--blue)">CREATE</span><span class="kf-18__word--dot"></span>
      <span class="kf-18__word kf-18__word--outline">MOTION</span><span class="kf-18__word--dot"></span>
      <span class="kf-18__word" style="color:var(--orange)">CRAFT</span><span class="kf-18__word--dot"></span>
      <span class="kf-18__word kf-18__word--outline">BUILD</span><span class="kf-18__word--dot"></span>
      <span class="kf-18__word" style="color:var(--blue)">CREATE</span><span class="kf-18__word--dot"></span>
    </div>
  </div>

  <!-- News ticker -->
  <div class="kf-18__news">
    <span class="kf-18__news-label">LIVE</span>
    <div class="kf-18__news-inner">
      <span class="kf-18__news-item"><strong>BREAKING:</strong> CSS animations performance improved in Chrome 124 · </span>
      <span class="kf-18__news-item"><strong>UPDATE:</strong> New @keyframes at-rules land in Firefox 130 · </span>
      <span class="kf-18__news-item"><strong>GUIDE:</strong> Infinite marquee ticker using pure CSS — no JavaScript · </span>
      <span class="kf-18__news-item"><strong>TIP:</strong> Use animation-play-state: paused on hover for better UX · </span>
      <span class="kf-18__news-item"><strong>BREAKING:</strong> CSS animations performance improved in Chrome 124 · </span>
      <span class="kf-18__news-item"><strong>UPDATE:</strong> New @keyframes at-rules land in Firefox 130 · </span>
    </div>
  </div>

</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;900&display=swap');
.kf-18,.kf-18 *,.kf-18 *::before,.kf-18 *::after{box-sizing:border-box;margin:0;padding:0}
.kf-18 ::selection{background:#ff6b00;color:#fff}
.kf-18{
  --bg:#f9f6f2;
  --dark:#111;
  --orange:#ff6b00;
  --yellow:#ffe135;
  --green:#00c896;
  --red:#ff3355;
  --blue:#0057ff;
  font-family:'Inter',sans-serif;
  background:var(--bg);
  min-height:100vh;
  display:flex;flex-direction:column;align-items:stretch;justify-content:center;
  gap:0;
  overflow:hidden;
  color:var(--dark);
}

/* ——— Stock ticker ——— */
.kf-18__ticker{
  background:var(--dark);color:#fff;
  padding:12px 0;overflow:hidden;
  border-bottom:3px solid var(--orange);
  position:relative;
}
.kf-18__ticker-inner{
  display:flex;width:max-content;
  animation:kf-18-scroll-l 30s linear infinite;
}
.kf-18__ticker-inner:hover{animation-play-state:paused}
.kf-18__stock{display:flex;align-items:center;gap:10px;padding:0 32px;white-space:nowrap;font-size:.9rem;border-right:1px solid rgba(255,255,255,.1)}
.kf-18__stock-sym{font-weight:700;letter-spacing:.05em}
.kf-18__stock-price{font-family:monospace}
.kf-18__stock-chg{font-size:.8rem;font-weight:700;padding:2px 7px;border-radius:3px}
.kf-18__stock-chg--up{background:rgba(0,200,150,.2);color:var(--green)}
.kf-18__stock-chg--dn{background:rgba(255,51,85,.2);color:var(--red)}

@keyframes kf-18-scroll-l{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ——— Logo / brand marquee ——— */
.kf-18__brands{
  padding:32px 0;overflow:hidden;
  border-bottom:1px solid rgba(0,0,0,.08);
  position:relative;
}
.kf-18__brands::before,.kf-18__brands::after{
  content:'';position:absolute;top:0;bottom:0;width:100px;z-index:1;pointer-events:none;
}
.kf-18__brands::before{left:0;background:linear-gradient(90deg,var(--bg),transparent)}
.kf-18__brands::after{right:0;background:linear-gradient(-90deg,var(--bg),transparent)}
.kf-18__brand-row{display:flex;width:max-content;animation:kf-18-scroll-l 20s linear infinite}
.kf-18__brand-row--r{animation:kf-18-scroll-r 22s linear infinite}
@keyframes kf-18-scroll-r{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.kf-18__brand{display:flex;align-items:center;justify-content:center;padding:0 40px;font-weight:900;font-size:1.1rem;letter-spacing:-.02em;white-space:nowrap;opacity:.3}
.kf-18__brand--colored{opacity:1;color:var(--orange)}

/* ——— Text word scroll ——— */
.kf-18__words{
  padding:60px 0;overflow:hidden;
  display:flex;flex-direction:column;gap:16px;
}
.kf-18__word-row{display:flex;width:max-content;gap:32px;align-items:center}
.kf-18__word-row--1{animation:kf-18-scroll-l 18s linear infinite}
.kf-18__word-row--2{animation:kf-18-scroll-r 22s linear infinite}
.kf-18__word{
  font-size:clamp(2rem,6vw,4rem);font-weight:900;
  text-transform:uppercase;letter-spacing:-.02em;
  white-space:nowrap;
}
.kf-18__word--outline{-webkit-text-stroke:2px var(--dark);color:transparent}
.kf-18__word--dot{width:10px;height:10px;border-radius:50%;background:var(--orange);flex:0 0 10px}

/* ——— News ticker ——— */
.kf-18__news{
  background:var(--blue);color:#fff;
  padding:14px 0;overflow:hidden;
  border-top:3px solid var(--yellow);
}
.kf-18__news-label{position:absolute;left:0;background:var(--yellow);color:var(--dark);font-weight:900;font-size:.8rem;padding:0 14px;height:100%;display:flex;align-items:center;letter-spacing:.1em;text-transform:uppercase;z-index:2}
.kf-18__news-inner{
  display:flex;width:max-content;padding-left:120px;
  animation:kf-18-scroll-l 40s linear infinite;
}
.kf-18__news-item{padding:0 48px;font-size:.88rem;white-space:nowrap;border-right:1px solid rgba(255,255,255,.2)}
.kf-18__news-item strong{color:var(--yellow)}
.kf-18__news{position:relative}

@media(prefers-reduced-motion:reduce){.kf-18 *{animation:none!important}}
```

### 19. CSS Countdown Timer Animation

**Type:** Pure CSS
**Description:** Arc ring countdown timers × 4, an animated flip clock and three linear progress countdown bars — all stroke-dashoffset or scaleX keyframes, pure CSS.

**HTML:**
```html
<div class="kf-19">

  <div class="kf-19__arc-wrap">
    <div class="kf-19__arc kf-19__arc--days">
      <div class="kf-19__arc-ring"></div>
      <div class="kf-19__arc-inner"><span class="kf-19__num" style="color:#a78bfa">03</span><span class="kf-19__unit">Days</span></div>
    </div>
    <div class="kf-19__arc kf-19__arc--hours">
      <div class="kf-19__arc-ring"></div>
      <div class="kf-19__arc-inner"><span class="kf-19__num" style="color:#22d3ee">15</span><span class="kf-19__unit">Hours</span></div>
    </div>
    <div class="kf-19__arc kf-19__arc--mins">
      <div class="kf-19__arc-ring"></div>
      <div class="kf-19__arc-inner"><span class="kf-19__num" style="color:#4ade80">25</span><span class="kf-19__unit">Mins</span></div>
    </div>
    <div class="kf-19__arc kf-19__arc--secs">
      <div class="kf-19__arc-ring"></div>
      <div class="kf-19__arc-inner"><span class="kf-19__num" style="color:#f87171">48</span><span class="kf-19__unit">Secs</span></div>
    </div>
  </div>

  <div class="kf-19__flip-clock">
    <div class="kf-19__flip-unit">
      <div class="kf-19__flip-pair">
        <div class="kf-19__flip-digit">0</div>
        <div class="kf-19__flip-digit">3</div>
      </div>
      <span class="kf-19__flip-label">Days</span>
    </div>
    <div class="kf-19__flip-sep">:</div>
    <div class="kf-19__flip-unit">
      <div class="kf-19__flip-pair">
        <div class="kf-19__flip-digit">1</div>
        <div class="kf-19__flip-digit">5</div>
      </div>
      <span class="kf-19__flip-label">Hours</span>
    </div>
    <div class="kf-19__flip-sep">:</div>
    <div class="kf-19__flip-unit">
      <div class="kf-19__flip-pair">
        <div class="kf-19__flip-digit">2</div>
        <div class="kf-19__flip-digit">5</div>
      </div>
      <span class="kf-19__flip-label">Minutes</span>
    </div>
  </div>

  <div class="kf-19__bar-wrap">
    <div class="kf-19__bar-row">
      <div class="kf-19__bar-head"><span>Days Remaining</span><span>15%</span></div>
      <div class="kf-19__bar-track"><div class="kf-19__bar-fill kf-19__b1"></div></div>
    </div>
    <div class="kf-19__bar-row">
      <div class="kf-19__bar-head"><span>Budget Used</span><span>62%</span></div>
      <div class="kf-19__bar-track"><div class="kf-19__bar-fill kf-19__b2"></div></div>
    </div>
    <div class="kf-19__bar-row">
      <div class="kf-19__bar-head"><span>Time Elapsed</span><span>80%</span></div>
      <div class="kf-19__bar-track kf-19__b3-wrap"><div class="kf-19__bar-fill kf-19__b3"></div></div>
    </div>
  </div>

</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@700&family=Inter:wght@400;600&display=swap');
.kf-19,.kf-19 *,.kf-19 *::before,.kf-19 *::after{box-sizing:border-box;margin:0;padding:0}
.kf-19 ::selection{background:#22d3ee;color:#000}
.kf-19{
  --bg:#020617;
  --cyan:#22d3ee;
  --purple:#a78bfa;
  --green:#4ade80;
  --red:#f87171;
  --white:#f1f5f9;
  font-family:'Oswald',sans-serif;
  background:var(--bg);
  min-height:100vh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:60px 24px;gap:64px;
  color:var(--white);
  position:relative;overflow:hidden;
}
.kf-19::before{content:'';position:absolute;top:10%;left:20%;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(34,211,238,.06),transparent 60%);pointer-events:none}
.kf-19::after{content:'';position:absolute;bottom:10%;right:15%;width:250px;height:250px;border-radius:50%;background:radial-gradient(circle,rgba(167,139,250,.06),transparent 60%);pointer-events:none}

/* ——— 1: SVG-style arc timer ——— */
.kf-19__arc-wrap{display:flex;gap:32px;flex-wrap:wrap;justify-content:center}
.kf-19__arc{position:relative;width:120px;height:120px;display:grid;place-items:center;flex-direction:column}
.kf-19__arc-ring{
  position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(var(--cyan) var(--pct),rgba(255,255,255,.06) 0);
  animation:kf-19-ring 60s linear infinite;
}
.kf-19__arc--days .kf-19__arc-ring{--pct:0%;background:conic-gradient(var(--purple) var(--pct),rgba(255,255,255,.06) 0);animation-duration:3600s}
.kf-19__arc--hours .kf-19__arc-ring{--pct:62.5%;background:conic-gradient(var(--cyan) 62.5%,rgba(255,255,255,.06) 0);animation-duration:86400s}
.kf-19__arc--mins .kf-19__arc-ring{background:conic-gradient(var(--green) 41.67%,rgba(255,255,255,.06) 0);animation:kf-19-ring 3600s linear infinite}
.kf-19__arc--secs .kf-19__arc-ring{background:conic-gradient(var(--red) 80%,rgba(255,255,255,.06) 0);animation:kf-19-ring 60s linear infinite}
@keyframes kf-19-ring{to{transform:rotate(360deg)}}
.kf-19__arc-inner{width:90px;height:90px;border-radius:50%;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:1;position:relative}
.kf-19__num{font-size:1.9rem;line-height:1}
.kf-19__unit{font-family:'Inter';font-size:.6rem;letter-spacing:.15em;color:rgba(255,255,255,.4);text-transform:uppercase;margin-top:2px}

/* ——— 2: Flip clock digits ——— */
.kf-19__flip-clock{display:flex;gap:12px;align-items:center}
.kf-19__flip-sep{font-size:2rem;color:rgba(255,255,255,.3);margin-bottom:8px}
.kf-19__flip-unit{display:flex;flex-direction:column;align-items:center;gap:6px}
.kf-19__flip-pair{display:flex;gap:4px}
.kf-19__flip-digit{
  width:52px;height:72px;border-radius:8px;
  background:linear-gradient(180deg,#1e293b,#0f172a);
  border:1px solid rgba(255,255,255,.08);
  display:grid;place-items:center;
  font-size:2.4rem;
  box-shadow:0 4px 12px rgba(0,0,0,.4);
  position:relative;overflow:hidden;
  animation:kf-19-flip 1s ease-in-out infinite;
}
.kf-19__flip-digit::after{
  content:'';position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(0,0,0,.4);
}
.kf-19__flip-digit:nth-child(2){animation-delay:.05s}
.kf-19__flip-unit:nth-child(1) .kf-19__flip-digit{animation-duration:60s}
.kf-19__flip-unit:nth-child(3) .kf-19__flip-digit{animation-duration:3600s}
@keyframes kf-19-flip{
  0%,92%{transform:rotateX(0);background:linear-gradient(180deg,#1e293b,#0f172a)}
  96%{transform:rotateX(-90deg);background:linear-gradient(180deg,#0f172a,#1e293b)}
  100%{transform:rotateX(0)}
}
.kf-19__flip-label{font-family:'Inter';font-size:.6rem;letter-spacing:.15em;color:rgba(255,255,255,.35);text-transform:uppercase}

/* ——— 3: Linear countdown bar ——— */
.kf-19__bar-wrap{width:min(480px,100%);display:flex;flex-direction:column;gap:16px}
.kf-19__bar-row{display:flex;flex-direction:column;gap:6px}
.kf-19__bar-head{display:flex;justify-content:space-between;font-family:'Inter';font-size:.8rem}
.kf-19__bar-head span:first-child{color:rgba(255,255,255,.6);font-weight:600}
.kf-19__bar-head span:last-child{color:var(--cyan);font-weight:600}
.kf-19__bar-track{height:8px;border-radius:4px;background:rgba(255,255,255,.08);overflow:hidden}
.kf-19__bar-fill{height:100%;border-radius:4px}
.kf-19__b1{background:linear-gradient(90deg,var(--purple),var(--cyan));width:15%;animation:kf-19-fill1 linear infinite}
.kf-19__b2{background:linear-gradient(90deg,var(--green),var(--cyan));width:62%;animation:kf-19-fill2 linear infinite 0.5s}
.kf-19__b3{background:linear-gradient(90deg,var(--red),var(--purple));width:80%;animation:kf-19-fill3 linear infinite 1s}
@keyframes kf-19-fill1{0%,100%{width:15%}50%{width:5%}}
@keyframes kf-19-fill2{0%,100%{width:62%}50%{width:45%}}
@keyframes kf-19-fill3{0%{width:80%}100%{width:0%}}

.kf-19__b3-wrap{overflow:hidden}
@media(prefers-reduced-motion:reduce){.kf-19 *{animation:none!important}}
```

### 20. CSS Path Drawing Animation

**Type:** Pure CSS
**Description:** SVG stroke-drawing animations: signature handwriting, success checkmark, map route, logo outline, circuit trace and infinite symbol — stroke-dashoffset keyframes only.

**HTML:**
```html
<div class="kf-20">
  <h2>CSS Path Drawing Animations</h2>
  <div class="grid">

    <!-- Signature -->
    <div class="card">
      <svg class="sig-svg" width="200" height="100" viewBox="0 0 200 100">
        <path d="M20,70 C30,20 50,20 60,50 C70,80 80,80 90,50 C100,20 110,30 120,60 C130,80 140,70 160,40 C170,25 180,40 185,60"/>
      </svg>
      <label>Signature Draw</label>
    </div>

    <!-- Check mark -->
    <div class="card">
      <svg class="check-svg" width="100" height="100" viewBox="0 0 100 100">
        <circle cx="50" cy="50" r="40"/>
        <polyline points="28,52 42,66 72,36"/>
      </svg>
      <label>Success Check</label>
    </div>

    <!-- Map route -->
    <div class="card">
      <div class="route-wrap">
        <svg class="route-svg" width="200" height="130" viewBox="0 0 200 130">
          <polyline points="20,110 20,60 80,60 80,30 160,30 160,80 140,80"/>
          <circle class="dot-start" cx="20" cy="110" r="6" fill="#ff6b35"/>
          <circle class="dot-end" cx="140" cy="80" r="6" fill="#ff6b35"/>
        </svg>
      </div>
      <label>Map Route</label>
    </div>

    <!-- Logo outline -->
    <div class="card">
      <svg class="logo-svg" width="120" height="120" viewBox="0 0 120 120">
        <path d="M60,10 L110,95 L10,95 Z"/>
        <path d="M60,30 L90,80 L30,80 Z"/>
        <path d="M60,50 L75,75 L45,75 Z"/>
      </svg>
      <label>Logo Outline</label>
    </div>

    <!-- Circuit board -->
    <div class="card">
      <svg class="circuit-svg" width="200" height="120" viewBox="0 0 200 120">
        <line class="trace" x1="10" y1="60" x2="190" y2="60"/>
        <line class="trace" x1="60" y1="10" x2="60" y2="110"/>
        <line class="trace" x1="130" y1="10" x2="130" y2="110"/>
        <path class="trace" d="M60,60 Q95,20 130,60"/>
        <circle class="node" cx="60" cy="60" r="5"/>
        <circle class="node" cx="130" cy="60" r="5"/>
        <circle class="node" cx="10" cy="60" r="4"/>
        <circle class="node" cx="190" cy="60" r="4"/>
      </svg>
      <label>Circuit Trace</label>
    </div>

    <!-- Infinity -->
    <div class="card">
      <svg class="inf-svg" width="200" height="100" viewBox="0 0 200 100">
        <defs>
          <linearGradient id="kf20grad" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" stop-color="#7c6af7"/>
            <stop offset="50%" stop-color="#e91e8c"/>
            <stop offset="100%" stop-color="#00d4ff"/>
          </linearGradient>
        </defs>
        <path d="M50,50 C50,25 75,10 100,50 C125,90 150,75 150,50 C150,25 125,10 100,50 C75,90 50,75 50,50 Z"/>
      </svg>
      <label>Infinity Stroke</label>
    </div>

  </div>
</div>
```

**CSS:**
```css
.kf-20 *, .kf-20 *::before, .kf-20 *::after { box-sizing: border-box; margin: 0; padding: 0; }
.kf-20 {
  font-family: 'Segoe UI', sans-serif;
  background: #0d0d1a;
  color: #fff;
  padding: 40px 20px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
}
.kf-20 h2 {
  font-size: 1.1rem;
  color: #888;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-align: center;
}
.kf-20 .grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 32px;
  width: 100%;
  max-width: 900px;
}
.kf-20 .card {
  background: #13132a;
  border: 1px solid #2a2a4a;
  border-radius: 16px;
  padding: 32px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.kf-20 .card label {
  font-size: 0.8rem;
  color: #666;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* 1: Signature handwriting */
.kf-20 .sig-svg path {
  fill: none;
  stroke: #7c6af7;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  animation: kf-20-draw 2.5s ease forwards infinite;
}
@keyframes kf-20-draw {
  0% { stroke-dashoffset: 600; opacity: 1; }
  70% { stroke-dashoffset: 0; opacity: 1; }
  85% { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: -600; opacity: 0; }
}

/* 2: Check mark */
.kf-20 .check-svg circle {
  fill: none;
  stroke: #00d46a;
  stroke-width: 4;
  stroke-dasharray: 251;
  stroke-dashoffset: 251;
  animation: kf-20-circle 0.6s ease forwards infinite;
  animation-delay: 0.2s;
  transform-origin: center;
  transform: rotate(-90deg);
}
.kf-20 .check-svg polyline {
  fill: none;
  stroke: #00d46a;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 80;
  stroke-dashoffset: 80;
  animation: kf-20-check 0.4s ease forwards infinite;
  animation-delay: 0.8s;
}
@keyframes kf-20-circle {
  0% { stroke-dashoffset: 251; }
  70% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 0; }
}
@keyframes kf-20-check {
  0% { stroke-dashoffset: 80; }
  100% { stroke-dashoffset: 0; }
}
.kf-20 .check-svg {
  animation: kf-20-checkloop 2.5s ease infinite;
}
@keyframes kf-20-checkloop {
  0%, 30% { opacity: 0; }
  35%, 80% { opacity: 1; }
  90%, 100% { opacity: 0; }
}

/* 3: Map route */
.kf-20 .route-svg polyline {
  fill: none;
  stroke: #ff6b35;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
  animation: kf-20-route 3s ease forwards infinite;
}
.kf-20 .route-svg .dot-start,
.kf-20 .route-svg .dot-end {
  animation: kf-20-dotpop 0.3s ease forwards;
  transform-origin: center;
}
.kf-20 .route-svg .dot-start { animation-delay: 0s; }
.kf-20 .route-svg .dot-end { animation-delay: 2.8s; }
@keyframes kf-20-route {
  0% { stroke-dashoffset: 400; }
  80% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 0; }
}
@keyframes kf-20-dotpop {
  0% { r: 0; }
  70% { r: 8; }
  100% { r: 6; }
}
.kf-20 .route-wrap { animation: kf-20-routeloop 4s ease infinite; }
@keyframes kf-20-routeloop {
  0% { opacity: 0; }
  5%, 85% { opacity: 1; }
  95%, 100% { opacity: 0; }
}

/* 4: Logo outline */
.kf-20 .logo-svg path {
  fill: none;
  stroke: #e91e8c;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 800;
  stroke-dashoffset: 800;
  animation: kf-20-logo 3s ease forwards infinite;
}
.kf-20 .logo-svg path:nth-child(2) { animation-delay: 1s; stroke: #7c6af7; }
.kf-20 .logo-svg path:nth-child(3) { animation-delay: 2s; stroke: #00d4ff; }
@keyframes kf-20-logo {
  0% { stroke-dashoffset: 800; }
  60% { stroke-dashoffset: 0; }
  80% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -800; }
}

/* 5: Circuit board */
.kf-20 .circuit-svg line,
.kf-20 .circuit-svg path {
  fill: none;
  stroke: #00d4ff;
  stroke-width: 2;
  stroke-linecap: square;
}
.kf-20 .circuit-svg .trace {
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  animation: kf-20-circuit 2s linear infinite;
}
.kf-20 .circuit-svg .trace:nth-child(2) { animation-delay: 0.3s; stroke: #7c6af7; }
.kf-20 .circuit-svg .trace:nth-child(3) { animation-delay: 0.6s; stroke: #00d46a; }
.kf-20 .circuit-svg .trace:nth-child(4) { animation-delay: 0.9s; stroke: #ff6b35; }
@keyframes kf-20-circuit {
  0% { stroke-dashoffset: 300; }
  100% { stroke-dashoffset: -300; }
}
.kf-20 .circuit-svg .node {
  fill: #00d4ff;
  animation: kf-20-nodeflash 2s ease infinite;
}
@keyframes kf-20-nodeflash {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

/* 6: Infinity symbol */
.kf-20 .inf-svg path {
  fill: none;
  stroke: url(#kf20grad);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 500;
  stroke-dashoffset: 0;
  animation: kf-20-inf 3s linear infinite;
}
@keyframes kf-20-inf {
  0% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -500; }
}

@media (prefers-reduced-motion: reduce) {
  .kf-20 .sig-svg path,
  .kf-20 .check-svg circle,
  .kf-20 .check-svg polyline,
  .kf-20 .check-svg,
  .kf-20 .route-svg polyline,
  .kf-20 .route-wrap,
  .kf-20 .logo-svg path,
  .kf-20 .circuit-svg .trace,
  .kf-20 .circuit-svg .node,
  .kf-20 .inf-svg path {
    animation: none;
    stroke-dashoffset: 0;
    opacity: 1;
  }
}
```

### 21. CSS Spotlight Animation Effect

**Type:** Pure CSS
**Description:** Six spotlight effects: roving text highlight, stage light cones, security scan beam, product reveal orb, grid cell highlight and club sweep — radial-gradient keyframes.

**HTML:**
```html
<div class="kf-21">
  <h2>CSS Spotlight Animations</h2>
  <div class="demos">
    <!-- Roving text spotlight -->
    <div class="spotlight-text">
      <h3>SPOTLIGHT</h3>
    </div>

    <!-- Stage cones -->
    <div class="stage">
      <div class="cone cone-1"></div>
      <div class="cone cone-2"></div>
      <div class="cone cone-3"></div>
      <span class="stage-label">LIVE</span>
    </div>

    <!-- Scanning beam -->
    <div class="scan-wrap">
      <div class="scan-beam"></div>
      <div class="scan-content">
        <div class="scan-line"></div>
        <div class="scan-line"></div>
        <div class="scan-line"></div>
      </div>
      <span class="scan-label">Scanning...</span>
    </div>

    <!-- Product spotlight -->
    <div class="product-spot">
      <div class="product-icon">✦</div>
    </div>

    <!-- Grid highlight -->
    <div class="grid-spot">
      <div class="grid-cell">🔴</div>
      <div class="grid-cell">🟠</div>
      <div class="grid-cell">🟡</div>
      <div class="grid-cell">🟢</div>
      <div class="grid-cell">🔵</div>
      <div class="grid-cell">🟣</div>
      <div class="grid-cell">⚫</div>
      <div class="grid-cell">⚪</div>
      <div class="grid-cell">🟤</div>
    </div>

    <!-- Club spotlight sweep -->
    <div class="club">
      <div class="club-beam"></div>
      <div class="club-beam-2"></div>
      <div class="club-label">TONIGHT</div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.kf-21 *, .kf-21 *::before, .kf-21 *::after { box-sizing: border-box; margin: 0; padding: 0; }
.kf-21 {
  font-family: 'Segoe UI', sans-serif;
  background: #080810;
  color: #fff;
  padding: 40px 20px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}
.kf-21 h2 {
  font-size: 1.1rem;
  color: #555;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.kf-21 .demos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  width: 100%;
  max-width: 960px;
}

/* 1: Roving spotlight on text */
.kf-21 .spotlight-text {
  position: relative;
  overflow: hidden;
  background: #0d0d1a;
  border-radius: 12px;
  padding: 48px 24px;
  text-align: center;
}
.kf-21 .spotlight-text h3 {
  font-size: 2rem;
  font-weight: 800;
  color: #111;
  position: relative;
  z-index: 2;
  background: linear-gradient(90deg, #333, #222, #333);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: 4px;
}
.kf-21 .spotlight-text::before {
  content: '';
  position: absolute;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(255,220,100,0.9) 0%, rgba(255,180,0,0.4) 40%, transparent 70%);
  border-radius: 50%;
  top: 50%;
  left: -100px;
  transform: translateY(-50%);
  animation: kf-21-rove 3s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: screen;
}
@keyframes kf-21-rove {
  0% { left: -100px; }
  50% { left: calc(100% - 100px); }
  100% { left: -100px; }
}

/* 2: Stage spotlight cones */
.kf-21 .stage {
  background: #050508;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  height: 200px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 20px;
  gap: 40px;
}
.kf-21 .cone {
  position: absolute;
  top: 0;
  width: 120px;
  height: 180px;
  clip-path: polygon(40% 0%, 60% 0%, 100% 100%, 0% 100%);
  background: linear-gradient(180deg, rgba(255,240,180,0.15) 0%, rgba(255,240,180,0.05) 100%);
  transform-origin: top center;
}
.kf-21 .cone-1 { left: 20%; animation: kf-21-cone1 4s ease-in-out infinite; }
.kf-21 .cone-2 { left: 50%; transform: translateX(-50%); animation: kf-21-cone2 4s ease-in-out infinite; animation-delay: 0.5s; }
.kf-21 .cone-3 { right: 20%; animation: kf-21-cone3 4s ease-in-out infinite; animation-delay: 1s; }
@keyframes kf-21-cone1 {
  0%, 100% { opacity: 0.4; transform: rotate(-10deg); }
  50% { opacity: 1; transform: rotate(10deg); }
}
@keyframes kf-21-cone2 {
  0%, 100% { opacity: 1; transform: translateX(-50%) scaleX(1); }
  50% { opacity: 0.5; transform: translateX(-50%) scaleX(0.7); }
}
@keyframes kf-21-cone3 {
  0%, 100% { opacity: 0.4; transform: rotate(10deg); }
  50% { opacity: 1; transform: rotate(-10deg); }
}
.kf-21 .stage-label {
  position: relative;
  z-index: 2;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 6px;
  color: rgba(255,240,180,0.9);
  text-shadow: 0 0 20px rgba(255,200,50,0.8);
  animation: kf-21-stagelabel 4s ease-in-out infinite;
}
@keyframes kf-21-stagelabel {
  0%, 100% { text-shadow: 0 0 20px rgba(255,200,50,0.4); }
  50% { text-shadow: 0 0 40px rgba(255,200,50,1), 0 0 80px rgba(255,200,50,0.5); }
}

/* 3: Scanning spotlight */
.kf-21 .scan-wrap {
  position: relative;
  background: #0a0a16;
  border-radius: 12px;
  overflow: hidden;
  padding: 40px 24px;
  height: 180px;
}
.kf-21 .scan-beam {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg,
    transparent 0%,
    transparent 20%,
    rgba(100,200,255,0.08) 40%,
    rgba(100,200,255,0.2) 50%,
    rgba(100,200,255,0.08) 60%,
    transparent 80%,
    transparent 100%
  );
  animation: kf-21-scan 2.5s ease-in-out infinite;
}
@keyframes kf-21-scan {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
.kf-21 .scan-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.kf-21 .scan-line {
  height: 10px;
  border-radius: 4px;
  background: #1e2030;
}
.kf-21 .scan-line:nth-child(1) { width: 70%; }
.kf-21 .scan-line:nth-child(2) { width: 90%; }
.kf-21 .scan-line:nth-child(3) { width: 60%; }
.kf-21 .scan-label {
  position: absolute;
  bottom: 12px;
  right: 16px;
  font-size: 0.7rem;
  color: rgba(100,200,255,0.6);
  letter-spacing: 2px;
  text-transform: uppercase;
  animation: kf-21-blink 1s step-end infinite;
}
@keyframes kf-21-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* 4: Product spotlight */
.kf-21 .product-spot {
  position: relative;
  background: #06060f;
  border-radius: 12px;
  overflow: hidden;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.kf-21 .product-spot::before {
  content: '';
  position: absolute;
  width: 250px;
  height: 250px;
  background: radial-gradient(ellipse, rgba(180,120,255,0.25) 0%, rgba(100,50,200,0.1) 40%, transparent 70%);
  top: -80px;
  left: 50%;
  transform: translateX(-50%);
  animation: kf-21-prod 3s ease-in-out infinite;
}
@keyframes kf-21-prod {
  0%, 100% { width: 200px; opacity: 0.6; }
  50% { width: 300px; opacity: 1; }
}
.kf-21 .product-icon {
  position: relative;
  z-index: 2;
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, #7c6af7, #e91e8c);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
  box-shadow: 0 20px 60px rgba(124,106,247,0.5);
  animation: kf-21-iconrise 3s ease-in-out infinite;
}
@keyframes kf-21-iconrise {
  0%, 100% { transform: translateY(4px); box-shadow: 0 16px 40px rgba(124,106,247,0.4); }
  50% { transform: translateY(-4px); box-shadow: 0 24px 70px rgba(124,106,247,0.7); }
}

/* 5: Spotlight grid highlight */
.kf-21 .grid-spot {
  background: #080814;
  border-radius: 12px;
  overflow: hidden;
  padding: 24px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.kf-21 .grid-cell {
  aspect-ratio: 1;
  border-radius: 8px;
  background: #111125;
  border: 1px solid #1e1e3a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  transition: all 0.3s;
}
.kf-21 .grid-cell:nth-child(1) { animation: kf-21-cellhl 4.5s ease infinite 0s; }
.kf-21 .grid-cell:nth-child(2) { animation: kf-21-cellhl 4.5s ease infinite 0.5s; }
.kf-21 .grid-cell:nth-child(3) { animation: kf-21-cellhl 4.5s ease infinite 1s; }
.kf-21 .grid-cell:nth-child(4) { animation: kf-21-cellhl 4.5s ease infinite 1.5s; }
.kf-21 .grid-cell:nth-child(5) { animation: kf-21-cellhl 4.5s ease infinite 2s; }
.kf-21 .grid-cell:nth-child(6) { animation: kf-21-cellhl 4.5s ease infinite 2.5s; }
.kf-21 .grid-cell:nth-child(7) { animation: kf-21-cellhl 4.5s ease infinite 3s; }
.kf-21 .grid-cell:nth-child(8) { animation: kf-21-cellhl 4.5s ease infinite 3.5s; }
.kf-21 .grid-cell:nth-child(9) { animation: kf-21-cellhl 4.5s ease infinite 4s; }
@keyframes kf-21-cellhl {
  0%, 80%, 100% { background: #111125; border-color: #1e1e3a; box-shadow: none; }
  90% { background: rgba(124,106,247,0.2); border-color: #7c6af7; box-shadow: 0 0 20px rgba(124,106,247,0.4); }
}

/* 6: Sweeping club spotlight */
.kf-21 .club {
  background: #020205;
  border-radius: 12px;
  overflow: hidden;
  height: 200px;
  position: relative;
}
.kf-21 .club-beam {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 300px;
  height: 280px;
  background: radial-gradient(ellipse at bottom center, rgba(255,50,150,0.5) 0%, rgba(150,0,100,0.2) 30%, transparent 70%);
  clip-path: polygon(40% 100%, 60% 100%, 95% 0%, 5% 0%);
  transform-origin: bottom center;
  transform: translateX(-50%);
  animation: kf-21-sweep 3s ease-in-out infinite;
}
.kf-21 .club-beam-2 {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 300px;
  height: 280px;
  background: radial-gradient(ellipse at bottom center, rgba(50,150,255,0.4) 0%, transparent 70%);
  clip-path: polygon(40% 100%, 60% 100%, 95% 0%, 5% 0%);
  transform-origin: bottom center;
  transform: translateX(-50%);
  animation: kf-21-sweep 3s ease-in-out infinite reverse;
  animation-delay: 1.5s;
}
@keyframes kf-21-sweep {
  0%, 100% { transform: translateX(-50%) rotate(-40deg); }
  50% { transform: translateX(-50%) rotate(40deg); }
}
.kf-21 .club-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 4px;
  color: rgba(255,255,255,0.1);
  z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
  .kf-21 .spotlight-text::before,
  .kf-21 .cone-1, .kf-21 .cone-2, .kf-21 .cone-3,
  .kf-21 .stage-label,
  .kf-21 .scan-beam,
  .kf-21 .scan-label,
  .kf-21 .product-spot::before,
  .kf-21 .product-icon,
  .kf-21 .grid-cell,
  .kf-21 .club-beam,
  .kf-21 .club-beam-2 { animation: none; }
}
```

### 22. CSS Spring Bounce Animation

**Type:** Pure CSS
**Description:** Eight CSS spring and elastic animations: drop ball with squash, elastic button, pop-in notification, stagger scale cards, spin, wobbly text, spring menu and rubber bars.

**HTML:**
```html
<div class="kf-22">
  <h2>CSS Spring Bounce Animations</h2>
  <div class="grid">

    <div class="card">
      <div class="ball-spring"></div>
      <label>Spring Drop</label>
    </div>

    <div class="card">
      <button class="spring-btn">Click Me ✦</button>
      <label>Elastic Button</label>
    </div>

    <div class="card">
      <div class="notif">
        <div class="notif-icon">✓</div>
        <div>
          <div class="notif-text">Success!</div>
          <div class="notif-sub">Task completed</div>
        </div>
      </div>
      <label>Spring Pop-in</label>
    </div>

    <div class="card">
      <div class="scale-grid">
        <div class="scale-card"></div>
        <div class="scale-card"></div>
        <div class="scale-card"></div>
        <div class="scale-card"></div>
      </div>
      <label>Stagger Scale</label>
    </div>

    <div class="card">
      <div class="spin-spring"></div>
      <label>Spring Rotation</label>
    </div>

    <div class="card">
      <div class="wobble-text">
        <span>S</span><span>P</span><span>R</span><span>I</span><span>N</span><span>G</span>
      </div>
      <label>Wobbly Text</label>
    </div>

    <div class="card">
      <div class="menu-spring">
        <div class="menu-item">Dashboard</div>
        <div class="menu-item">Analytics</div>
        <div class="menu-item">Settings</div>
        <div class="menu-item">Profile</div>
      </div>
      <label>Spring Menu</label>
    </div>

    <div class="card">
      <div class="rubber-wrap">
        <div class="rubber-bar"></div>
        <div class="rubber-bar"></div>
        <div class="rubber-bar"></div>
      </div>
      <label>Rubber Bars</label>
    </div>

  </div>
</div>
```

**CSS:**
```css
.kf-22 *, .kf-22 *::before, .kf-22 *::after { box-sizing: border-box; margin: 0; padding: 0; }
.kf-22 {
  font-family: 'Segoe UI', sans-serif;
  background: #f0f4ff;
  color: #1a1a2e;
  padding: 48px 24px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
}
.kf-22 h2 {
  font-size: 1.1rem;
  color: #888;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.kf-22 .grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
  width: 100%;
  max-width: 960px;
}
.kf-22 .card {
  background: #fff;
  border-radius: 20px;
  padding: 40px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.07);
}
.kf-22 .card label {
  font-size: 0.75rem;
  color: #aaa;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

/* Spring easings via keyframes */

/* 1: Ball spring drop */
.kf-22 .ball-spring {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7c6af7, #e91e8c);
  animation: kf-22-springdrop 1.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) infinite;
  box-shadow: 0 8px 24px rgba(124,106,247,0.4);
}
@keyframes kf-22-springdrop {
  0% { transform: translateY(-80px) scaleX(0.8) scaleY(1.2); }
  60% { transform: translateY(0) scaleX(1.2) scaleY(0.8); }
  75% { transform: translateY(-20px) scaleX(0.95) scaleY(1.05); }
  85% { transform: translateY(0) scaleX(1.05) scaleY(0.95); }
  92% { transform: translateY(-6px); }
  100% { transform: translateY(0) scaleX(1) scaleY(1); }
}

/* 2: Elastic button press */
.kf-22 .spring-btn {
  padding: 14px 32px;
  background: #7c6af7;
  color: #fff;
  border: none;
  border-radius: 50px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  animation: kf-22-btnspring 2s ease-in-out infinite;
  box-shadow: 0 6px 20px rgba(124,106,247,0.3);
}
@keyframes kf-22-btnspring {
  0%, 60%, 100% { transform: scale(1); }
  10% { transform: scaleX(0.85) scaleY(1.15); }
  25% { transform: scaleX(1.15) scaleY(0.85); }
  35% { transform: scaleX(0.95) scaleY(1.05); }
  45% { transform: scaleX(1.05) scaleY(0.97); }
  52% { transform: scaleX(0.98) scaleY(1.02); }
}

/* 3: Spring pop notification */
.kf-22 .notif {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border-radius: 16px;
  padding: 12px 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
  animation: kf-22-notifpop 2.5s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
  transform-origin: top center;
  min-width: 200px;
}
@keyframes kf-22-notifpop {
  0%, 40%, 100% { transform: scale(0); opacity: 0; }
  50% { transform: scale(1.08); opacity: 1; }
  60%, 90% { transform: scale(1); opacity: 1; }
  100% { transform: scale(0); opacity: 0; }
}
.kf-22 .notif-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, #00d46a, #00b050);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}
.kf-22 .notif-text { font-size: 0.85rem; font-weight: 600; color: #333; }
.kf-22 .notif-sub { font-size: 0.72rem; color: #aaa; }

/* 4: Spring scale cards */
.kf-22 .scale-grid {
  display: flex;
  gap: 10px;
  align-items: flex-end;
}
.kf-22 .scale-card {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, #ff6b35, #f7c948);
  animation: kf-22-scalepop 2.4s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}
.kf-22 .scale-card:nth-child(2) { animation-delay: 0.15s; background: linear-gradient(135deg, #f7c948, #00d46a); }
.kf-22 .scale-card:nth-child(3) { animation-delay: 0.3s; background: linear-gradient(135deg, #00d46a, #00d4ff); }
.kf-22 .scale-card:nth-child(4) { animation-delay: 0.45s; background: linear-gradient(135deg, #00d4ff, #7c6af7); }
@keyframes kf-22-scalepop {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.3); }
}

/* 5: Spring rotation */
.kf-22 .spin-spring {
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, #00d4ff, #7c6af7);
  border-radius: 16px;
  animation: kf-22-rotspring 2s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}
@keyframes kf-22-rotspring {
  0% { transform: rotate(0deg); }
  50% { transform: rotate(200deg); }
  100% { transform: rotate(180deg); }
}

/* 6: Wobbly text */
.kf-22 .wobble-text {
  font-size: 1.8rem;
  font-weight: 900;
  color: #1a1a2e;
  letter-spacing: 6px;
  display: flex;
  gap: 2px;
}
.kf-22 .wobble-text span {
  display: inline-block;
  animation: kf-22-wobble 2s cubic-bezier(0.36, 0.07, 0.19, 0.97) infinite;
}
.kf-22 .wobble-text span:nth-child(1) { animation-delay: 0.0s; color: #7c6af7; }
.kf-22 .wobble-text span:nth-child(2) { animation-delay: 0.08s; color: #e91e8c; }
.kf-22 .wobble-text span:nth-child(3) { animation-delay: 0.16s; color: #ff6b35; }
.kf-22 .wobble-text span:nth-child(4) { animation-delay: 0.24s; color: #f7c948; }
.kf-22 .wobble-text span:nth-child(5) { animation-delay: 0.32s; color: #00d46a; }
.kf-22 .wobble-text span:nth-child(6) { animation-delay: 0.40s; color: #00d4ff; }
@keyframes kf-22-wobble {
  0%, 60%, 100% { transform: translateY(0) scaleX(1) scaleY(1); }
  15% { transform: translateY(-20px) scaleX(0.9) scaleY(1.1); }
  30% { transform: translateY(0) scaleX(1.1) scaleY(0.9); }
  40% { transform: translateY(-8px) scaleX(0.97) scaleY(1.03); }
  50% { transform: translateY(0) scaleX(1.02) scaleY(0.98); }
}

/* 7: Spring menu items */
.kf-22 .menu-spring {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 200px;
}
.kf-22 .menu-item {
  padding: 10px 16px;
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 500;
  color: #fff;
  animation: kf-22-menuspring 3s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
  transform-origin: left center;
}
.kf-22 .menu-item:nth-child(1) { background: #7c6af7; animation-delay: 0.1s; }
.kf-22 .menu-item:nth-child(2) { background: #e91e8c; animation-delay: 0.25s; }
.kf-22 .menu-item:nth-child(3) { background: #00d4ff; animation-delay: 0.4s; }
.kf-22 .menu-item:nth-child(4) { background: #ff6b35; animation-delay: 0.55s; }
@keyframes kf-22-menuspring {
  0%, 70%, 100% { transform: translateX(0) scaleX(1); opacity: 1; }
  80% { transform: translateX(-100%) scaleX(0.8); opacity: 0; }
  85% { transform: translateX(-20px) scaleX(1.05); opacity: 1; }
  92% { transform: translateX(4px); }
}

/* 8: Elastic line/rubber band */
.kf-22 .rubber-wrap {
  width: 100%;
  max-width: 200px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.kf-22 .rubber-bar {
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(90deg, #7c6af7, #e91e8c);
  animation: kf-22-rubber 2s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
  transform-origin: left center;
}
.kf-22 .rubber-bar:nth-child(2) { animation-delay: 0.2s; background: linear-gradient(90deg, #00d4ff, #00d46a); width: 75%; }
.kf-22 .rubber-bar:nth-child(3) { animation-delay: 0.4s; background: linear-gradient(90deg, #ff6b35, #f7c948); width: 55%; }
@keyframes kf-22-rubber {
  0% { transform: scaleX(0); }
  60% { transform: scaleX(1.1); }
  75% { transform: scaleX(0.97); }
  85% { transform: scaleX(1.03); }
  100% { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
  .kf-22 .ball-spring,
  .kf-22 .spring-btn,
  .kf-22 .notif,
  .kf-22 .scale-card,
  .kf-22 .spin-spring,
  .kf-22 .wobble-text span,
  .kf-22 .menu-item,
  .kf-22 .rubber-bar { animation: none; transform: none; opacity: 1; }
}
```

### 23. CSS Confetti Explosion Animation

**Type:** Pure CSS
**Description:** Three confetti explosion styles: multi-directional radial burst, falling confetti rain and party-popper cracker — all pure CSS translate + rotate keyframes.

**HTML:**
```html
<div class="kf-23">
  <h2>CSS Confetti Explosion Animations</h2>
  <div class="scene-row">

    <!-- Burst explosion -->
    <div class="conf-wrap scene-1">
      <div class="piece"></div>
      <div class="piece"></div>
      <div class="piece"></div>
      <div class="piece"></div>
      <div class="piece"></div>
      <div class="piece"></div>
      <div class="piece"></div>
      <div class="piece"></div>
      <div class="piece"></div>
      <div class="piece"></div>
      <div class="piece"></div>
      <div class="piece"></div>
      <span class="conf-title">🎉 YAY!</span>
      <span class="conf-sub">Celebration burst</span>
    </div>

    <!-- Falling rain -->
    <div class="conf-wrap scene-2">
      <div class="piece"></div>
      <div class="piece"></div>
      <div class="piece"></div>
      <div class="piece"></div>
      <div class="piece"></div>
      <div class="piece"></div>
      <div class="piece"></div>
      <div class="piece"></div>
      <div class="piece"></div>
      <div class="piece"></div>
      <div class="piece"></div>
      <div class="piece"></div>
      <span class="conf-title" style="z-index:2">🎊</span>
      <span class="conf-sub" style="z-index:2">Confetti Rain</span>
    </div>

    <!-- Popper cracker -->
    <div class="cracker">
      <div class="popper-icon">🎉</div>
      <div class="piece"></div>
      <div class="piece"></div>
      <div class="piece"></div>
      <div class="piece"></div>
      <div class="piece"></div>
      <div class="piece"></div>
      <div class="piece"></div>
      <div class="piece"></div>
    </div>

  </div>
</div>
```

**CSS:**
```css
.kf-23 *, .kf-23 *::before, .kf-23 *::after { box-sizing: border-box; margin: 0; padding: 0; }
.kf-23 {
  font-family: 'Segoe UI', sans-serif;
  background: #0a0a14;
  color: #fff;
  padding: 40px 20px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
}
.kf-23 h2 {
  font-size: 1.1rem;
  color: #555;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.kf-23 .scene-row {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: center;
  width: 100%;
  max-width: 960px;
}

/* Confetti piece base */
.kf-23 .conf-wrap {
  position: relative;
  width: 300px;
  height: 260px;
  overflow: hidden;
  border-radius: 16px;
  background: #0d0d1e;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
}
.kf-23 .conf-title {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: 2px;
  z-index: 2;
  text-align: center;
}
.kf-23 .conf-sub {
  font-size: 0.8rem;
  color: #888;
  letter-spacing: 1px;
  z-index: 2;
}

/* Generic confetti piece */
.kf-23 .piece {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  animation: kf-23-burst 2.5s ease-in infinite;
  transform-origin: center;
}

/* Scene 1: Celebration burst — pieces all directions */
.kf-23 .scene-1 .piece { animation-duration: 2s; animation-delay: calc(var(--d) * 0.08s); }
.kf-23 .scene-1 .piece:nth-child(1) { --d:1; left:50%; top:50%; background:#f7c948; width:8px; height:14px; animation-name: kf-23-p1; }
.kf-23 .scene-1 .piece:nth-child(2) { --d:2; left:50%; top:50%; background:#e91e8c; width:12px; height:8px; border-radius:50%; animation-name: kf-23-p2; }
.kf-23 .scene-1 .piece:nth-child(3) { --d:3; left:50%; top:50%; background:#7c6af7; animation-name: kf-23-p3; }
.kf-23 .scene-1 .piece:nth-child(4) { --d:4; left:50%; top:50%; background:#00d4ff; width:6px; height:16px; animation-name: kf-23-p4; }
.kf-23 .scene-1 .piece:nth-child(5) { --d:5; left:50%; top:50%; background:#ff6b35; border-radius:50%; animation-name: kf-23-p5; }
.kf-23 .scene-1 .piece:nth-child(6) { --d:6; left:50%; top:50%; background:#00d46a; width:14px; height:6px; animation-name: kf-23-p6; }
.kf-23 .scene-1 .piece:nth-child(7) { --d:7; left:50%; top:50%; background:#f7c948; width:8px; height:8px; border-radius:50%; animation-name: kf-23-p7; }
.kf-23 .scene-1 .piece:nth-child(8) { --d:8; left:50%; top:50%; background:#e91e8c; animation-name: kf-23-p8; }
.kf-23 .scene-1 .piece:nth-child(9) { --d:9; left:50%; top:50%; background:#7c6af7; width:16px; height:5px; animation-name: kf-23-p9; }
.kf-23 .scene-1 .piece:nth-child(10) { --d:10; left:50%; top:50%; background:#ff6b35; width:6px; height:12px; animation-name: kf-23-p10; }
.kf-23 .scene-1 .piece:nth-child(11) { --d:1; left:50%; top:50%; background:#00d4ff; width:9px; height:9px; animation-name: kf-23-p11; }
.kf-23 .scene-1 .piece:nth-child(12) { --d:2; left:50%; top:50%; background:#00d46a; border-radius:50%; animation-name: kf-23-p12; }

@keyframes kf-23-p1  { 0%{transform:translate(0,0) rotate(0)} 100%{transform:translate(-100px,-130px) rotate(540deg); opacity:0} }
@keyframes kf-23-p2  { 0%{transform:translate(0,0) rotate(0)} 100%{transform:translate(80px,-150px) rotate(-360deg); opacity:0} }
@keyframes kf-23-p3  { 0%{transform:translate(0,0) rotate(0)} 100%{transform:translate(130px,-90px) rotate(720deg); opacity:0} }
@keyframes kf-23-p4  { 0%{transform:translate(0,0) rotate(0)} 100%{transform:translate(120px,60px) rotate(-540deg); opacity:0} }
@keyframes kf-23-p5  { 0%{transform:translate(0,0) scale(1)} 100%{transform:translate(60px,140px) scale(0.3); opacity:0} }
@keyframes kf-23-p6  { 0%{transform:translate(0,0) rotate(0)} 100%{transform:translate(-60px,130px) rotate(360deg); opacity:0} }
@keyframes kf-23-p7  { 0%{transform:translate(0,0) scale(1)} 100%{transform:translate(-130px,80px) scale(0.2); opacity:0} }
@keyframes kf-23-p8  { 0%{transform:translate(0,0) rotate(0)} 100%{transform:translate(-140px,-30px) rotate(-720deg); opacity:0} }
@keyframes kf-23-p9  { 0%{transform:translate(0,0) rotate(0)} 100%{transform:translate(40px,-160px) rotate(480deg); opacity:0} }
@keyframes kf-23-p10 { 0%{transform:translate(0,0) rotate(0)} 100%{transform:translate(150px,-50px) rotate(-400deg); opacity:0} }
@keyframes kf-23-p11 { 0%{transform:translate(0,0) rotate(0)} 100%{transform:translate(-50px,-170px) rotate(600deg); opacity:0} }
@keyframes kf-23-p12 { 0%{transform:translate(0,0) scale(1)} 100%{transform:translate(-120px,-100px) scale(0.2); opacity:0} }

/* Scene 2: Rain confetti (falling from top) */
.kf-23 .scene-2 .piece {
  top: -20px;
  animation-name: kf-23-rain;
  animation-duration: 2.5s;
  animation-timing-function: linear;
}
.kf-23 .scene-2 .piece:nth-child(n) { animation-delay: calc(var(--i) * 0.18s); }
.kf-23 .scene-2 .piece:nth-child(1)  { --i:0; left:10%; background:#f7c948; width:8px; height:14px; }
.kf-23 .scene-2 .piece:nth-child(2)  { --i:1; left:22%; background:#e91e8c; border-radius:50%; }
.kf-23 .scene-2 .piece:nth-child(3)  { --i:2; left:35%; background:#7c6af7; width:14px; height:6px; }
.kf-23 .scene-2 .piece:nth-child(4)  { --i:3; left:50%; background:#00d4ff; width:6px; height:14px; }
.kf-23 .scene-2 .piece:nth-child(5)  { --i:4; left:65%; background:#ff6b35; border-radius:50%; }
.kf-23 .scene-2 .piece:nth-child(6)  { --i:5; left:78%; background:#00d46a; width:12px; height:8px; }
.kf-23 .scene-2 .piece:nth-child(7)  { --i:0.5; left:15%; background:#f7c948; border-radius:50%; }
.kf-23 .scene-2 .piece:nth-child(8)  { --i:1.5; left:45%; background:#e91e8c; width:8px; height:12px; }
.kf-23 .scene-2 .piece:nth-child(9)  { --i:2.5; left:60%; background:#7c6af7; width:12px; height:8px; }
.kf-23 .scene-2 .piece:nth-child(10) { --i:3.5; left:88%; background:#00d4ff; border-radius:50%; }
.kf-23 .scene-2 .piece:nth-child(11) { --i:4.5; left:5%;  background:#ff6b35; width:10px; height:10px; }
.kf-23 .scene-2 .piece:nth-child(12) { --i:5.5; left:72%; background:#00d46a; width:6px; height:16px; }
@keyframes kf-23-rain {
  0%   { transform: translateY(0) rotate(0deg) translateX(0); opacity: 1; }
  25%  { transform: translateY(65px) rotate(180deg) translateX(15px); }
  50%  { transform: translateY(130px) rotate(360deg) translateX(-10px); }
  75%  { transform: translateY(195px) rotate(540deg) translateX(12px); }
  100% { transform: translateY(280px) rotate(720deg) translateX(-8px); opacity: 0.4; }
}

/* Scene 3: Popper / cracker */
.kf-23 .cracker {
  position: relative;
  width: 240px;
  height: 260px;
  overflow: hidden;
  border-radius: 16px;
  background: #0d0d1e;
  display: flex;
  align-items: center;
  justify-content: center;
}
.kf-23 .popper-icon {
  font-size: 3rem;
  z-index: 2;
  animation: kf-23-poppericon 2s ease infinite;
}
@keyframes kf-23-poppericon {
  0%, 40% { transform: rotate(-20deg) scale(0.9); }
  50% { transform: rotate(20deg) scale(1.2); }
  60%, 100% { transform: rotate(-20deg) scale(0.9); }
}
.kf-23 .cracker .piece {
  animation-name: kf-23-cracker;
  animation-duration: 1.8s;
  animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.kf-23 .cracker .piece:nth-child(2)  { background:#f7c948; animation-delay:0.05s; }
.kf-23 .cracker .piece:nth-child(3)  { background:#e91e8c; border-radius:50%; animation-delay:0.1s; }
.kf-23 .cracker .piece:nth-child(4)  { background:#7c6af7; width:14px; height:5px; animation-delay:0.0s; }
.kf-23 .cracker .piece:nth-child(5)  { background:#00d4ff; animation-delay:0.15s; }
.kf-23 .cracker .piece:nth-child(6)  { background:#ff6b35; border-radius:50%; animation-delay:0.08s; }
.kf-23 .cracker .piece:nth-child(7)  { background:#00d46a; animation-delay:0.12s; }
.kf-23 .cracker .piece:nth-child(8)  { background:#f7c948; border-radius:50%; animation-delay:0.04s; }
.kf-23 .cracker .piece:nth-child(9)  { background:#e91e8c; width:5px; height:14px; animation-delay:0.16s; }
@keyframes kf-23-cracker {
  0%   { transform: translate(0,0) rotate(0deg); opacity:1; top:50%; left:50%; }
  30%  { opacity:1; }
  100% { opacity:0; }
}
/* Individual cracker pieces radiate */
.kf-23 .cracker .piece:nth-child(2) { animation-name: kf-23-cp1; }
.kf-23 .cracker .piece:nth-child(3) { animation-name: kf-23-cp2; }
.kf-23 .cracker .piece:nth-child(4) { animation-name: kf-23-cp3; }
.kf-23 .cracker .piece:nth-child(5) { animation-name: kf-23-cp4; }
.kf-23 .cracker .piece:nth-child(6) { animation-name: kf-23-cp5; }
.kf-23 .cracker .piece:nth-child(7) { animation-name: kf-23-cp6; }
.kf-23 .cracker .piece:nth-child(8) { animation-name: kf-23-cp7; }
.kf-23 .cracker .piece:nth-child(9) { animation-name: kf-23-cp8; }
@keyframes kf-23-cp1 { 0%{top:50%;left:50%;opacity:1} 100%{top:5%;left:15%;transform:rotate(480deg);opacity:0} }
@keyframes kf-23-cp2 { 0%{top:50%;left:50%;opacity:1} 100%{top:8%;left:55%;transform:rotate(-360deg);opacity:0} }
@keyframes kf-23-cp3 { 0%{top:50%;left:50%;opacity:1} 100%{top:15%;left:85%;transform:rotate(540deg);opacity:0} }
@keyframes kf-23-cp4 { 0%{top:50%;left:50%;opacity:1} 100%{top:55%;left:90%;transform:rotate(-480deg);opacity:0} }
@keyframes kf-23-cp5 { 0%{top:50%;left:50%;opacity:1} 100%{top:85%;left:70%;transform:rotate(360deg);opacity:0} }
@keyframes kf-23-cp6 { 0%{top:50%;left:50%;opacity:1} 100%{top:88%;left:30%;transform:rotate(-540deg);opacity:0} }
@keyframes kf-23-cp7 { 0%{top:50%;left:50%;opacity:1} 100%{top:80%;left:8%;transform:rotate(720deg);opacity:0} }
@keyframes kf-23-cp8 { 0%{top:50%;left:50%;opacity:1} 100%{top:30%;left:5%;transform:rotate(-720deg);opacity:0} }

@media (prefers-reduced-motion: reduce) {
  .kf-23 .piece,
  .kf-23 .popper-icon { animation: none; opacity: 0.5; }
}
```

### 24. CSS Breathing Animation Meditation

**Type:** Pure CSS
**Description:** Six calming CSS breathing animations: classic expanding circle, box-breathing dot tracer, ripple rings, lotus bloom petals, SVG wave breath and stroke-dashoffset timer ring.

**HTML:**
```html
<div class="kf-24">
  <h2>CSS Breathing & Meditation Animations</h2>
  <div class="grid">

    <div class="breathe-card">
      <div class="breathe-circle"></div>
      <div class="breathe-label">breathe in · hold · breathe out</div>
      <label>Classic Breathing</label>
    </div>

    <div class="breathe-card">
      <div class="box-wrap">
        <div class="box-bg"></div>
        <div class="box-glow"></div>
        <div class="box-dot"></div>
      </div>
      <label>Box Breathing</label>
    </div>

    <div class="breathe-card">
      <div class="ripple-breath">
        <div class="ripple-ring"></div>
        <div class="ripple-ring"></div>
        <div class="ripple-ring"></div>
        <div class="ripple-core"></div>
      </div>
      <label>Ripple Breath</label>
    </div>

    <div class="breathe-card">
      <div class="lotus-wrap">
        <div class="petal"></div>
        <div class="petal"></div>
        <div class="petal"></div>
        <div class="petal"></div>
        <div class="petal"></div>
        <div class="petal"></div>
        <div class="petal"></div>
        <div class="petal"></div>
        <div class="lotus-core"></div>
      </div>
      <label>Lotus Bloom</label>
    </div>

    <div class="breathe-card">
      <div class="wave-breath">
        <svg viewBox="0 0 200 80">
          <path d="M 0,40 Q 50,40 100,40 Q 150,40 200,40"/>
        </svg>
      </div>
      <label>Wave Breath</label>
    </div>

    <div class="breathe-card">
      <div class="timer-breath">
        <svg viewBox="0 0 120 120">
          <defs>
            <linearGradient id="kf24grad" x1="0%" y1="0%" x2="100%" y2="100%">
              <stop offset="0%" stop-color="#7c6af7"/>
              <stop offset="100%" stop-color="#00d4ff"/>
            </linearGradient>
          </defs>
          <circle class="timer-track" cx="60" cy="60" r="52"/>
          <circle class="timer-prog" cx="60" cy="60" r="52"/>
        </svg>
        <div class="timer-text">◯</div>
      </div>
      <label>Breath Timer</label>
    </div>

  </div>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&display=swap');
.kf-24 *, .kf-24 *::before, .kf-24 *::after { box-sizing: border-box; margin: 0; padding: 0; }
.kf-24 {
  font-family: 'Inter', sans-serif;
  background: #06080f;
  color: #fff;
  padding: 48px 24px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
}
.kf-24 h2 {
  font-size: 1rem;
  color: #444;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-weight: 300;
}
.kf-24 .grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 28px;
  width: 100%;
  max-width: 960px;
}

/* 1: Classic breathing circle */
.kf-24 .breathe-card {
  background: #0a0c18;
  border-radius: 20px;
  padding: 40px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  border: 1px solid #151830;
}
.kf-24 .breathe-card label {
  font-size: 0.75rem;
  color: #444;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 300;
}
.kf-24 .breathe-circle {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(100,160,255,0.8) 0%, rgba(80,120,220,0.4) 50%, rgba(50,80,180,0.1) 100%);
  box-shadow:
    0 0 0 0 rgba(100,160,255,0.4),
    0 0 40px rgba(80,140,255,0.3);
  animation: kf-24-breathe 8s ease-in-out infinite;
}
@keyframes kf-24-breathe {
  0%   { transform: scale(0.85); box-shadow: 0 0 0 0 rgba(100,160,255,0.6), 0 0 20px rgba(80,140,255,0.2); }
  35%  { transform: scale(1.25); box-shadow: 0 0 0 20px rgba(100,160,255,0), 0 0 60px rgba(80,140,255,0.5); }
  65%  { transform: scale(1.25); box-shadow: 0 0 0 0 rgba(100,160,255,0), 0 0 60px rgba(80,140,255,0.5); }
  100% { transform: scale(0.85); box-shadow: 0 0 0 0 rgba(100,160,255,0.6), 0 0 20px rgba(80,140,255,0.2); }
}
.kf-24 .breathe-label {
  font-size: 1rem;
  font-weight: 300;
  color: rgba(140,180,255,0.8);
  letter-spacing: 2px;
  animation: kf-24-breathe-label 8s ease-in-out infinite;
  text-align: center;
}
@keyframes kf-24-breathe-label {
  0%, 5%   { content: 'Breathe in'; opacity: 0.5; }
  10%      { opacity: 1; }
  30%, 40% { opacity: 1; }
  45%      { opacity: 0.3; }
  60%      { opacity: 0.8; }
  80%, 95% { opacity: 0.8; }
  100%     { opacity: 0.5; }
}

/* 2: Box breathing */
.kf-24 .box-wrap {
  position: relative;
  width: 140px;
  height: 140px;
}
.kf-24 .box-bg {
  width: 100%;
  height: 100%;
  border-radius: 20px;
  background: #0f1020;
  border: 1px solid #1e2040;
}
.kf-24 .box-dot {
  position: absolute;
  width: 16px;
  height: 16px;
  background: #7c6af7;
  border-radius: 50%;
  top: -8px;
  left: -8px;
  box-shadow: 0 0 16px rgba(124,106,247,0.8);
  animation: kf-24-boxbreath 16s linear infinite;
}
@keyframes kf-24-boxbreath {
  0%   { top: -8px; left: -8px; }
  25%  { top: -8px; left: calc(100% - 8px); }
  50%  { top: calc(100% - 8px); left: calc(100% - 8px); }
  75%  { top: calc(100% - 8px); left: -8px; }
  100% { top: -8px; left: -8px; }
}
.kf-24 .box-glow {
  position: absolute;
  inset: 4px;
  border-radius: 16px;
  border: 2px solid transparent;
  animation: kf-24-boxglow 16s linear infinite;
}
@keyframes kf-24-boxglow {
  0%, 100% { border-color: rgba(124,106,247,0.3); }
  12.5%, 37.5%, 62.5%, 87.5% { border-color: rgba(124,106,247,0.8); }
}

/* 3: Ripple breath */
.kf-24 .ripple-breath {
  position: relative;
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.kf-24 .ripple-ring {
  position: absolute;
  border-radius: 50%;
  border: 2px solid rgba(0, 212, 106, 0.6);
  animation: kf-24-ripplering 4s ease-out infinite;
}
.kf-24 .ripple-ring:nth-child(1) { width: 40px; height: 40px; animation-delay: 0s; }
.kf-24 .ripple-ring:nth-child(2) { width: 40px; height: 40px; animation-delay: 1s; }
.kf-24 .ripple-ring:nth-child(3) { width: 40px; height: 40px; animation-delay: 2s; }
.kf-24 .ripple-core {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: radial-gradient(circle, #00d46a, #00a050);
  z-index: 2;
  animation: kf-24-corePulse 4s ease-in-out infinite;
}
@keyframes kf-24-ripplering {
  0%   { width: 40px; height: 40px; opacity: 0.8; border-color: rgba(0,212,106,0.8); }
  100% { width: 130px; height: 130px; opacity: 0; border-color: rgba(0,212,106,0); }
}
@keyframes kf-24-corePulse {
  0%, 100% { transform: scale(0.9); }
  50%       { transform: scale(1.1); }
}

/* 4: Petals / lotus breath */
.kf-24 .lotus-wrap {
  position: relative;
  width: 140px;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.kf-24 .petal {
  position: absolute;
  width: 40px;
  height: 60px;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  transform-origin: bottom center;
  animation: kf-24-petal 6s ease-in-out infinite;
}
.kf-24 .petal:nth-child(1) { background: rgba(233,30,140,0.5); transform: rotate(0deg)   translateY(-20px); animation-delay: 0s; }
.kf-24 .petal:nth-child(2) { background: rgba(124,106,247,0.5); transform: rotate(45deg)  translateY(-20px); animation-delay: 0.15s; }
.kf-24 .petal:nth-child(3) { background: rgba(0,212,255,0.5);   transform: rotate(90deg)  translateY(-20px); animation-delay: 0.3s; }
.kf-24 .petal:nth-child(4) { background: rgba(0,212,106,0.5);   transform: rotate(135deg) translateY(-20px); animation-delay: 0.45s; }
.kf-24 .petal:nth-child(5) { background: rgba(247,201,72,0.5);  transform: rotate(180deg) translateY(-20px); animation-delay: 0.6s; }
.kf-24 .petal:nth-child(6) { background: rgba(255,107,53,0.5);  transform: rotate(225deg) translateY(-20px); animation-delay: 0.75s; }
.kf-24 .petal:nth-child(7) { background: rgba(233,30,140,0.4);  transform: rotate(270deg) translateY(-20px); animation-delay: 0.9s; }
.kf-24 .petal:nth-child(8) { background: rgba(124,106,247,0.4); transform: rotate(315deg) translateY(-20px); animation-delay: 1.05s; }
@keyframes kf-24-petal {
  0%, 100% { transform: rotate(var(--r, 0deg)) translateY(-20px) scaleY(0.6); opacity: 0.5; }
  40%, 60% { transform: rotate(var(--r, 0deg)) translateY(-25px) scaleY(1.1); opacity: 1; }
}
/* override with inline CSS instead; use nth-child combined with CSS vars via property */
.kf-24 .petal:nth-child(1) { --r: 0deg; }
.kf-24 .petal:nth-child(2) { --r: 45deg; }
.kf-24 .petal:nth-child(3) { --r: 90deg; }
.kf-24 .petal:nth-child(4) { --r: 135deg; }
.kf-24 .petal:nth-child(5) { --r: 180deg; }
.kf-24 .petal:nth-child(6) { --r: 225deg; }
.kf-24 .petal:nth-child(7) { --r: 270deg; }
.kf-24 .petal:nth-child(8) { --r: 315deg; }
.kf-24 .lotus-core {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, rgba(255,255,255,0.3) 100%);
  z-index: 2;
  animation: kf-24-lotuscore 6s ease-in-out infinite;
}
@keyframes kf-24-lotuscore {
  0%, 100% { transform: scale(0.8); opacity: 0.5; }
  50% { transform: scale(1.1); opacity: 1; }
}

/* 5: Waveform breathing */
.kf-24 .wave-breath {
  width: 200px;
  height: 80px;
  overflow: hidden;
  position: relative;
}
.kf-24 .wave-breath svg {
  width: 100%;
  height: 100%;
}
.kf-24 .wave-breath path {
  fill: none;
  stroke: rgba(0,212,255,0.8);
  stroke-width: 2.5;
  stroke-linecap: round;
  animation: kf-24-wavepath 4s ease-in-out infinite;
}
@keyframes kf-24-wavepath {
  0%   { d: path("M 0,40 Q 50,40 100,40 Q 150,40 200,40"); opacity: 0.5; }
  25%  { d: path("M 0,40 Q 50,5  100,40 Q 150,75 200,40"); opacity: 1; }
  50%  { d: path("M 0,40 Q 50,40 100,40 Q 150,40 200,40"); opacity: 0.5; }
  75%  { d: path("M 0,40 Q 50,75 100,40 Q 150,5  200,40"); opacity: 1; }
  100% { d: path("M 0,40 Q 50,40 100,40 Q 150,40 200,40"); opacity: 0.5; }
}

/* 6: Timer circle */
.kf-24 .timer-breath {
  position: relative;
  width: 120px;
  height: 120px;
}
.kf-24 .timer-breath svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.kf-24 .timer-track {
  fill: none;
  stroke: #1e2040;
  stroke-width: 6;
}
.kf-24 .timer-prog {
  fill: none;
  stroke: url(#kf24grad);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 327;
  animation: kf-24-timerprog 8s linear infinite;
}
@keyframes kf-24-timerprog {
  0%   { stroke-dashoffset: 327; }
  100% { stroke-dashoffset: 0; }
}
.kf-24 .timer-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.4rem;
  font-weight: 300;
  color: rgba(180,200,255,0.9);
  animation: kf-24-timertext 8s linear infinite;
}
@keyframes kf-24-timertext {
  0%   { content: '8'; }
}

@media (prefers-reduced-motion: reduce) {
  .kf-24 .breathe-circle,
  .kf-24 .breathe-label,
  .kf-24 .box-dot,
  .kf-24 .box-glow,
  .kf-24 .ripple-ring,
  .kf-24 .ripple-core,
  .kf-24 .petal,
  .kf-24 .lotus-core,
  .kf-24 .wave-breath path,
  .kf-24 .timer-prog { animation: none; }
}
```

### 25. CSS Typewriter Delete Animation Loop

**Type:** Pure CSS
**Description:** Six typewriter-and-delete loop patterns: word cycler, terminal prompt, search input placeholder, big display, multiline build-and-erase and code editor typing.

**HTML:**
```html
<div class="kf-25">
  <h2>CSS Typewriter Delete Loop Animations</h2>
  <div class="grid">

    <!-- Hero word cycler -->
    <div class="card">
      <div class="hero-type">
        <span class="static">I build</span>
        <span class="dynamic">websites.</span>
      </div>
      <label>Word Cycler</label>
    </div>

    <!-- Terminal -->
    <div class="card">
      <div class="terminal">
        <div class="terminal-line">
          <span class="prompt">❯</span>
          <span class="cmd">npm run dev</span>
        </div>
        <div class="output">✓ Server running on :3000</div>
      </div>
      <label>Terminal Typing</label>
    </div>

    <!-- Input field -->
    <div class="card">
      <div class="input-demo focused">
        <span class="placeholder">Search anything...</span>
        <span class="input-cursor"></span>
      </div>
      <label>Search Input</label>
    </div>

    <!-- Big display -->
    <div class="card" style="align-items:center; justify-content:center; min-height:120px;">
      <div class="big-type">DESIGN.</div>
      <label style="text-align:center">Big Display</label>
    </div>

    <!-- Multiline stagger -->
    <div class="card">
      <div class="multiline">
        <div class="type-line">→ Installing dependencies...</div>
        <div class="type-line">→ Compiling source files...</div>
        <div class="type-line">→ Build complete! ✓</div>
      </div>
      <label>Multiline Stagger</label>
    </div>

    <!-- Code editor -->
    <div class="card">
      <div class="code-editor">
        <div class="code-line"><span class="ln">1</span><span class="code-text">const hero = 'World';</span></div>
        <div class="code-line"><span class="ln">2</span><span class="code-text">function greet(name) {</span></div>
        <div class="code-line"><span class="ln">3</span><span class="code-text">  return `Hello, ${name}`;</span></div>
        <div class="code-line"><span class="ln">4</span><span class="code-text">}</span></div>
      </div>
      <label>Code Editor</label>
    </div>

  </div>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&family=Inter:wght@400;700;900&display=swap');
.kf-25 *, .kf-25 *::before, .kf-25 *::after { box-sizing: border-box; margin: 0; padding: 0; }
.kf-25 {
  font-family: 'Inter', sans-serif;
  background: #09090f;
  color: #fff;
  padding: 48px 24px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
}
.kf-25 h2 {
  font-size: 1rem;
  color: #444;
  letter-spacing: 3px;
  text-transform: uppercase;
}
.kf-25 .grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  width: 100%;
  max-width: 960px;
}
.kf-25 .card {
  background: #0f0f1a;
  border: 1px solid #1e1e30;
  border-radius: 16px;
  padding: 36px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.kf-25 .card label {
  font-size: 0.72rem;
  color: #444;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* Cursor blink */
@keyframes kf-25-blink {
  0%, 100% { border-color: currentColor; }
  50%       { border-color: transparent; }
}

/* 1: Hero headline typewriter with word cycling */
.kf-25 .hero-type {
  font-size: 1.6rem;
  font-weight: 900;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 0;
  flex-wrap: wrap;
}
.kf-25 .hero-type .static { color: #888; margin-right: 8px; font-weight: 400; font-size: 1.3rem; }
.kf-25 .hero-type .dynamic {
  color: #7c6af7;
  border-right: 3px solid #7c6af7;
  overflow: hidden;
  white-space: nowrap;
  animation:
    kf-25-type1 2s steps(9, end) 0s 1 normal forwards,
    kf-25-del1  1s steps(9, end) 2.5s 1 normal forwards,
    kf-25-type2 2s steps(10, end) 4s 1 normal forwards,
    kf-25-del2  1s steps(10, end) 6.5s 1 normal forwards,
    kf-25-type3 2s steps(8, end) 8s 1 normal forwards,
    kf-25-del3  1s steps(8, end) 10.5s 1 normal forwards,
    kf-25-type1 2s steps(9, end) 12s infinite;
  animation-fill-mode: forwards;
}
/* Simplified: cycle through width */
.kf-25 .dynamic { animation: kf-25-wordcycle 12s steps(1) infinite !important; }
@keyframes kf-25-wordcycle {
  0%    { width: 0; }
  4%    { width: 9ch; }
  25%   { width: 9ch; }
  30%   { width: 0; }
  35%   { width: 0; }
  38%   { width: 10ch; color: #e91e8c; border-color: #e91e8c; }
  58%   { width: 10ch; }
  63%   { width: 0; }
  68%   { width: 0; }
  71%   { width: 8ch; color: #00d4ff; border-color: #00d4ff; }
  91%   { width: 8ch; }
  96%   { width: 0; }
  100%  { width: 0; color: #7c6af7; border-color: #7c6af7; }
}

/* But width alone looks bad — use a more robust approach with multiple spans */

/* 2: Terminal prompt */
.kf-25 .terminal {
  background: #050508;
  border-radius: 10px;
  padding: 20px 16px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.85rem;
}
.kf-25 .terminal-line {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.kf-25 .prompt { color: #00d46a; }
.kf-25 .cmd {
  color: #fff;
  overflow: hidden;
  white-space: nowrap;
  border-right: 2px solid #fff;
  animation: kf-25-termtype 6s steps(1) infinite;
}
@keyframes kf-25-termtype {
  0%   { width: 0; border-color: #fff; }
  5%   { width: 18ch; }
  40%  { width: 18ch; }
  45%  { width: 10ch; }
  50%  { width: 0; }
  55%  { width: 14ch; }
  90%  { width: 14ch; }
  95%  { width: 0; }
  100% { width: 0; }
}
.kf-25 .output { color: #7c6af7; font-size: 0.78rem; opacity: 0; animation: kf-25-termout 6s ease infinite; }
@keyframes kf-25-termout {
  0%, 40%  { opacity: 0; }
  50%, 90% { opacity: 1; }
  100%     { opacity: 0; }
}

/* 3: Input field typewriter */
.kf-25 .input-demo {
  position: relative;
  background: #0a0a16;
  border: 2px solid #2a2a4a;
  border-radius: 10px;
  padding: 14px 16px;
  font-size: 0.95rem;
  color: #ccc;
  display: flex;
  align-items: center;
  gap: 0;
}
.kf-25 .input-demo .placeholder {
  color: #333;
  overflow: hidden;
  white-space: nowrap;
  animation: kf-25-inputtype 8s steps(1) infinite;
}
@keyframes kf-25-inputtype {
  0%   { width: 0; }
  6%   { width: 20ch; color: #ccc; }
  40%  { width: 20ch; color: #ccc; }
  50%  { width: 12ch; color: #888; }
  56%  { width: 0; }
  60%  { width: 0; }
  65%  { width: 18ch; color: #ccc; }
  92%  { width: 18ch; }
  98%  { width: 0; }
  100% { width: 0; }
}
.kf-25 .input-cursor {
  width: 2px;
  height: 1.1em;
  background: #7c6af7;
  animation: kf-25-blink 0.8s step-end infinite;
  flex-shrink: 0;
}
.kf-25 .input-demo.focused { border-color: #7c6af7; }

/* 4: Big display typewriter  */
.kf-25 .big-type {
  font-size: 2.2rem;
  font-weight: 900;
  color: #fff;
  overflow: hidden;
  white-space: nowrap;
  border-right: 4px solid #f7c948;
  width: fit-content;
  animation: kf-25-bigtype 8s cubic-bezier(0.4,0,0.6,1) infinite, kf-25-blink 0.8s step-end infinite;
}
@keyframes kf-25-bigtype {
  0%   { width: 0; }
  30%  { width: 7ch; }
  60%  { width: 7ch; }
  90%  { width: 0; }
  100% { width: 0; }
}

/* 5: Multiline stagger */
.kf-25 .multiline { display: flex; flex-direction: column; gap: 10px; }
.kf-25 .type-line {
  font-size: 0.9rem;
  color: #888;
  overflow: hidden;
  white-space: nowrap;
  border-right: 2px solid transparent;
  animation: kf-25-multitype 9s steps(1) infinite;
}
.kf-25 .type-line:nth-child(1) { animation-delay: 0s; }
.kf-25 .type-line:nth-child(2) { animation-delay: 0.8s; }
.kf-25 .type-line:nth-child(3) { animation-delay: 1.6s; }
@keyframes kf-25-multitype {
  0%   { width: 0; border-color: #7c6af7; color: #7c6af7; }
  20%  { width: 28ch; border-color: #7c6af7; color: #fff; }
  70%  { width: 28ch; border-color: transparent; color: #888; }
  80%  { width: 0; }
  100% { width: 0; }
}

/* 6: Code editor typing */
.kf-25 .code-editor {
  background: #050508;
  border-radius: 10px;
  padding: 20px 16px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  line-height: 1.8;
}
.kf-25 .code-line { display: flex; align-items: center; gap: 16px; }
.kf-25 .ln { color: #333; user-select: none; min-width: 16px; }
.kf-25 .code-text {
  overflow: hidden;
  white-space: nowrap;
  animation: kf-25-codetype 10s steps(1) infinite;
}
.kf-25 .code-line:nth-child(1) .code-text { color: #e91e8c; animation-delay: 0s; }
.kf-25 .code-line:nth-child(2) .code-text { color: #7c6af7; animation-delay: 1.2s; }
.kf-25 .code-line:nth-child(3) .code-text { color: #00d4ff; animation-delay: 2.4s; }
.kf-25 .code-line:nth-child(4) .code-text { color: #00d46a; animation-delay: 3.6s; }
@keyframes kf-25-codetype {
  0%   { width: 0; }
  15%  { width: 30ch; }
  75%  { width: 30ch; }
  90%  { width: 0; }
  100% { width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .kf-25 .dynamic,
  .kf-25 .cmd,
  .kf-25 .output,
  .kf-25 .input-demo .placeholder,
  .kf-25 .input-cursor,
  .kf-25 .big-type,
  .kf-25 .type-line,
  .kf-25 .code-text { animation: none; width: auto; opacity: 1; border-color: transparent; }
}
```

### 26. CSS Aurora Borealis Animation Background

**Type:** Pure CSS
**Description:** Animated northern-lights sky with skewed gradient curtain bands, tree silhouette and four colour-variant cards — green, purple/pink, blue-teal and multicolour aurora.

**HTML:**
```html
<div class="kf-26">
  <h2>CSS Aurora Borealis Animations</h2>

  <div class="sky">
    <div class="aurora">
      <div class="aurora-band a1"></div>
      <div class="aurora-band a2"></div>
      <div class="aurora-band a3"></div>
      <div class="aurora-band a4"></div>
    </div>
    <div class="trees"></div>
    <div class="sky-caption">
      <h3>Aurora</h3>
      <p>Northern Lights</p>
    </div>
  </div>

  <div class="variants">
    <div class="variant-card var-a">
      <div class="mini-aurora"></div>
      <span>Green Aurora</span>
    </div>
    <div class="variant-card var-b">
      <div class="mini-aurora"></div>
      <span>Purple & Pink</span>
    </div>
    <div class="variant-card var-c">
      <div class="mini-aurora"></div>
      <span>Blue Teal</span>
    </div>
    <div class="variant-card var-d">
      <div class="mini-aurora"></div>
      <span>Multicolor</span>
    </div>
  </div>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;700&display=swap');
.kf-26 *, .kf-26 *::before, .kf-26 *::after { box-sizing: border-box; margin: 0; padding: 0; }
.kf-26 {
  font-family: 'Inter', sans-serif;
  background: #010308;
  color: #fff;
  padding: 48px 24px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}
.kf-26 h2 {
  font-size: 1rem;
  color: #334;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-weight: 300;
}

/* ── Scene 1: Full aurora sky ── */
.kf-26 .sky {
  position: relative;
  width: 100%;
  max-width: 960px;
  height: 340px;
  background: linear-gradient(180deg, #010308 0%, #020812 60%, #04101e 100%);
  border-radius: 20px;
  overflow: hidden;
}
/* Stars */
.kf-26 .sky::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 10% 15%, rgba(255,255,255,0.8) 0%, transparent 100%),
    radial-gradient(1px 1px at 30% 8%, rgba(255,255,255,0.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 55% 20%, rgba(255,255,255,0.9) 0%, transparent 100%),
    radial-gradient(1px 1px at 75% 6%, rgba(255,255,255,0.7) 0%, transparent 100%),
    radial-gradient(1px 1px at 90% 18%, rgba(255,255,255,0.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,0.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 65% 12%, rgba(255,255,255,0.8) 0%, transparent 100%),
    radial-gradient(1px 1px at 45% 5%,  rgba(255,255,255,0.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 82% 28%, rgba(255,255,255,0.7) 0%, transparent 100%),
    radial-gradient(1px 1px at 5% 22%,  rgba(255,255,255,0.5) 0%, transparent 100%);
  animation: kf-26-twinkle 4s ease-in-out infinite;
}
@keyframes kf-26-twinkle {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}
/* Ground silhouette */
.kf-26 .sky::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: linear-gradient(180deg, transparent 0%, #010205 100%);
}

/* Aurora curtains */
.kf-26 .aurora {
  position: absolute;
  bottom: 40px;
  width: 100%;
  height: 220px;
  filter: blur(18px);
  mix-blend-mode: screen;
}
.kf-26 .aurora-band {
  position: absolute;
  bottom: 0;
  height: 100%;
  border-radius: 50%;
  transform-origin: bottom center;
}
.kf-26 .a1 {
  width: 60%;
  left: -5%;
  background: linear-gradient(0deg,
    transparent 0%,
    rgba(0,220,120,0.15) 20%,
    rgba(0,255,160,0.4) 45%,
    rgba(0,230,130,0.2) 65%,
    transparent 100%
  );
  animation: kf-26-aurora1 8s ease-in-out infinite;
}
.kf-26 .a2 {
  width: 70%;
  left: 20%;
  background: linear-gradient(0deg,
    transparent 0%,
    rgba(100,0,220,0.1) 15%,
    rgba(140,80,255,0.35) 40%,
    rgba(180,100,255,0.2) 60%,
    transparent 100%
  );
  animation: kf-26-aurora2 10s ease-in-out infinite;
}
.kf-26 .a3 {
  width: 55%;
  right: -5%;
  background: linear-gradient(0deg,
    transparent 0%,
    rgba(0,180,220,0.1) 20%,
    rgba(0,220,255,0.3) 45%,
    rgba(50,200,240,0.15) 65%,
    transparent 100%
  );
  animation: kf-26-aurora3 7s ease-in-out infinite;
}
.kf-26 .a4 {
  width: 40%;
  left: 30%;
  background: linear-gradient(0deg,
    transparent 0%,
    rgba(0,240,180,0.05) 20%,
    rgba(100,255,200,0.25) 50%,
    transparent 100%
  );
  animation: kf-26-aurora4 12s ease-in-out infinite;
}
@keyframes kf-26-aurora1 {
  0%   { transform: skewX(-5deg) scaleX(1) translateX(0); opacity: 0.8; }
  33%  { transform: skewX(8deg)  scaleX(1.1) translateX(3%); opacity: 1; }
  66%  { transform: skewX(-3deg) scaleX(0.95) translateX(-2%); opacity: 0.9; }
  100% { transform: skewX(-5deg) scaleX(1) translateX(0); opacity: 0.8; }
}
@keyframes kf-26-aurora2 {
  0%   { transform: skewX(3deg) scaleX(1) translateX(0); opacity: 0.7; }
  40%  { transform: skewX(-10deg) scaleX(1.08) translateX(-4%); opacity: 0.9; }
  70%  { transform: skewX(6deg) scaleX(0.92) translateX(3%); opacity: 0.8; }
  100% { transform: skewX(3deg) scaleX(1) translateX(0); opacity: 0.7; }
}
@keyframes kf-26-aurora3 {
  0%   { transform: skewX(8deg) scaleX(1) translateX(0); opacity: 0.9; }
  45%  { transform: skewX(-6deg) scaleX(1.12) translateX(-3%); opacity: 0.6; }
  75%  { transform: skewX(4deg) scaleX(0.98) translateX(4%); opacity: 1; }
  100% { transform: skewX(8deg) scaleX(1) translateX(0); opacity: 0.9; }
}
@keyframes kf-26-aurora4 {
  0%   { transform: scaleY(1) translateX(0); opacity: 0.6; }
  50%  { transform: scaleY(1.3) translateX(-5%); opacity: 0.9; }
  100% { transform: scaleY(1) translateX(0); opacity: 0.6; }
}
/* Trees silhouette */
.kf-26 .trees {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: #010205;
  clip-path: polygon(
    0% 100%, 0% 80%, 3% 60%, 6% 80%, 9% 50%, 12% 70%, 15% 40%, 18% 65%,
    21% 45%, 24% 70%, 27% 35%, 30% 60%, 33% 50%, 36% 75%, 39% 45%, 42% 65%,
    45% 30%, 48% 55%, 51% 40%, 54% 60%, 57% 45%, 60% 70%, 63% 50%, 66% 75%,
    69% 40%, 72% 65%, 75% 35%, 78% 60%, 81% 50%, 84% 75%, 87% 45%, 90% 65%,
    93% 40%, 96% 60%, 100% 80%, 100% 100%
  );
}

/* Sky caption */
.kf-26 .sky-caption {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 3;
}
.kf-26 .sky-caption h3 {
  font-size: 2rem;
  font-weight: 200;
  letter-spacing: 8px;
  color: rgba(200,240,220,0.85);
  text-shadow: 0 0 40px rgba(0,255,160,0.5);
  text-transform: uppercase;
}
.kf-26 .sky-caption p {
  font-size: 0.75rem;
  font-weight: 300;
  color: rgba(180,220,200,0.5);
  letter-spacing: 3px;
  margin-top: 4px;
}

/* ── Scene 2: Card variants ── */
.kf-26 .variants {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  width: 100%;
  max-width: 960px;
}
.kf-26 .variant-card {
  height: 160px;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: flex-end;
  padding: 16px;
}

/* Variant A: Green only */
.kf-26 .var-a { background: #010308; }
.kf-26 .var-a .mini-aurora {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg,
    transparent 20%,
    rgba(0,255,140,0.15) 40%,
    rgba(0,220,100,0.35) 55%,
    rgba(0,180,80,0.1) 70%,
    transparent 85%
  );
  filter: blur(12px);
  animation: kf-26-varA 6s ease-in-out infinite;
}
@keyframes kf-26-varA {
  0%, 100% { transform: translateX(-10%) skewY(-3deg); opacity: 0.7; }
  50% { transform: translateX(10%) skewY(3deg); opacity: 1; }
}

/* Variant B: Purple + pink */
.kf-26 .var-b { background: #060408; }
.kf-26 .var-b .mini-aurora {
  position: absolute;
  inset: 0;
  background: linear-gradient(170deg,
    transparent 10%,
    rgba(200,0,255,0.1) 30%,
    rgba(255,50,150,0.3) 50%,
    rgba(180,0,220,0.15) 70%,
    transparent 90%
  );
  filter: blur(14px);
  animation: kf-26-varB 7s ease-in-out infinite;
}
@keyframes kf-26-varB {
  0%, 100% { transform: rotate(-5deg) scale(1); opacity: 0.8; }
  50% { transform: rotate(5deg) scale(1.1); opacity: 1; }
}

/* Variant C: Blue teal */
.kf-26 .var-c { background: #010408; }
.kf-26 .var-c .mini-aurora {
  position: absolute;
  inset: 0;
  background: linear-gradient(150deg,
    transparent 15%,
    rgba(0,150,255,0.1) 35%,
    rgba(0,220,255,0.35) 55%,
    rgba(0,180,220,0.1) 72%,
    transparent 88%
  );
  filter: blur(12px);
  animation: kf-26-varC 8s ease-in-out infinite;
}
@keyframes kf-26-varC {
  0%, 100% { transform: skewX(5deg) translateY(-5%); opacity: 0.8; }
  50% { transform: skewX(-5deg) translateY(5%); opacity: 1; }
}

/* Variant D: Multi-color */
.kf-26 .var-d { background: #020308; }
.kf-26 .var-d .mini-aurora {
  position: absolute;
  inset: 0;
  background: conic-gradient(from 200deg at 50% 80%,
    rgba(0,255,140,0.2) 0deg,
    rgba(100,80,255,0.2) 60deg,
    rgba(0,200,255,0.2) 120deg,
    rgba(0,255,140,0.05) 180deg,
    transparent 220deg
  );
  filter: blur(16px);
  animation: kf-26-varD 9s linear infinite;
}
@keyframes kf-26-varD {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.kf-26 .variant-card span {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.4);
  letter-spacing: 2px;
  text-transform: uppercase;
  position: relative;
  z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
  .kf-26 .sky::before,
  .kf-26 .a1, .kf-26 .a2, .kf-26 .a3, .kf-26 .a4,
  .kf-26 .var-a .mini-aurora,
  .kf-26 .var-b .mini-aurora,
  .kf-26 .var-c .mini-aurora,
  .kf-26 .var-d .mini-aurora { animation: none; opacity: 0.7; }
}
```

### 27. CSS Card Stack Animation

**Type:** Pure CSS
**Description:** Five card stack animations: flip-through financial deck, fanned playing cards, depth-rise pricing stack, Tinder-style swipe deck and floating credit card stack.

**HTML:**
```html
<div class="kf-27">
  <h2>CSS Card Stack Animations</h2>
  <div class="row">

    <!-- Flip through -->
    <div class="demo-wrap">
      <div class="flip-stack">
        <div class="fc">
          <div class="fc-amt">$2,450</div>
          <div class="fc-name">Savings Account</div>
        </div>
        <div class="fc">
          <div class="fc-amt">$8,100</div>
          <div class="fc-name">Investment</div>
        </div>
        <div class="fc">
          <div class="fc-amt">$320</div>
          <div class="fc-name">Daily Spend</div>
        </div>
      </div>
      <label>Flip Through</label>
    </div>

    <!-- Fan deck -->
    <div class="demo-wrap">
      <div class="fan-stack">
        <div class="fan-card">♠</div>
        <div class="fan-card">♥</div>
        <div class="fan-card">♦</div>
        <div class="fan-card">♣</div>
      </div>
      <label>Fanned Deck</label>
    </div>

    <!-- Rise stack -->
    <div class="demo-wrap">
      <div class="rise-stack">
        <div class="rise-card"></div>
        <div class="rise-card"></div>
        <div class="rise-card">
          <div class="rc-title">Pro Plan</div>
          <div class="rc-sub">Everything you need</div>
          <div class="rc-tag">Most Popular</div>
        </div>
      </div>
      <label>Depth Rise</label>
    </div>

    <!-- Swipe deck -->
    <div class="demo-wrap">
      <div class="swipe-stack">
        <div class="swipe-card">
          <div class="sc-header">Candidate</div>
          <div>
            <div class="sc-name">Alex Morgan</div>
            <div class="sc-role">Senior Designer</div>
          </div>
          <div class="sc-match">94% match</div>
        </div>
        <div class="swipe-card"></div>
        <div class="swipe-card"></div>
      </div>
      <label>Swipe Stack</label>
    </div>

    <!-- Credit card -->
    <div class="demo-wrap">
      <div class="credit-stack">
        <div class="credit-card">
          <div class="cc-chip"></div>
          <div class="cc-num">•••• •••• •••• 4291</div>
          <div class="cc-row">
            <div class="cc-name">J. Smith</div>
            <div class="cc-brand">◉◉</div>
          </div>
        </div>
        <div class="credit-card"></div>
        <div class="credit-card"></div>
      </div>
      <label>Credit Cards</label>
    </div>

  </div>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;900&display=swap');
.kf-27 *, .kf-27 *::before, .kf-27 *::after { box-sizing: border-box; margin: 0; padding: 0; }
.kf-27 {
  font-family: 'Inter', sans-serif;
  background: #0f0f14;
  color: #fff;
  padding: 48px 24px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px;
}
.kf-27 h2 {
  font-size: 1rem;
  color: #444;
  letter-spacing: 3px;
  text-transform: uppercase;
}
.kf-27 .row {
  display: flex;
  flex-wrap: wrap;
  gap: 60px;
  justify-content: center;
  width: 100%;
  max-width: 960px;
}
.kf-27 .demo-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.kf-27 .demo-wrap label {
  font-size: 0.72rem;
  color: #444;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* ── 1: Flip Through Stack ── */
.kf-27 .flip-stack {
  position: relative;
  width: 240px;
  height: 160px;
}
.kf-27 .flip-stack .fc {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  backface-visibility: hidden;
}
.kf-27 .flip-stack .fc:nth-child(1) {
  background: linear-gradient(135deg, #7c6af7, #e91e8c);
  animation: kf-27-flip 6s ease-in-out infinite;
}
.kf-27 .flip-stack .fc:nth-child(2) {
  background: linear-gradient(135deg, #00d4ff, #00d46a);
  animation: kf-27-flip 6s ease-in-out infinite;
  animation-delay: 2s;
}
.kf-27 .flip-stack .fc:nth-child(3) {
  background: linear-gradient(135deg, #f7c948, #ff6b35);
  animation: kf-27-flip 6s ease-in-out infinite;
  animation-delay: 4s;
}
@keyframes kf-27-flip {
  0%   { transform: translateY(0) scale(1); z-index: 3; opacity: 1; }
  25%  { transform: translateY(-10px) scale(1.02); z-index: 3; opacity: 1; }
  35%  { transform: translateX(120%) rotate(15deg) scale(0.95); z-index: 3; opacity: 0.8; }
  40%  { transform: translateX(160%) rotate(20deg); z-index: 0; opacity: 0; }
  41%  { transform: translateX(-10px) rotate(-3deg) scale(0.92); z-index: 1; opacity: 0.5; }
  60%  { transform: translateX(0) rotate(0deg) scale(0.96); z-index: 1; opacity: 0.8; }
  80%  { transform: translateX(0) scale(0.98); z-index: 2; }
  100% { transform: translateY(0) scale(1); z-index: 3; opacity: 1; }
}
.kf-27 .fc-amt { font-size: 1.6rem; font-weight: 900; color: rgba(255,255,255,0.95); }
.kf-27 .fc-name { font-size: 0.78rem; color: rgba(255,255,255,0.7); font-weight: 500; }

/* ── 2: Fanned deck ── */
.kf-27 .fan-stack {
  position: relative;
  width: 200px;
  height: 160px;
}
.kf-27 .fan-stack .fan-card {
  position: absolute;
  width: 140px;
  height: 100px;
  border-radius: 12px;
  top: 30px;
  left: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
}
.kf-27 .fan-card:nth-child(1) { background: #7c6af7; animation: kf-27-fan1 4s ease-in-out infinite; }
.kf-27 .fan-card:nth-child(2) { background: #e91e8c; animation: kf-27-fan2 4s ease-in-out infinite; }
.kf-27 .fan-card:nth-child(3) { background: #ff6b35; animation: kf-27-fan3 4s ease-in-out infinite; }
.kf-27 .fan-card:nth-child(4) { background: #f7c948; animation: kf-27-fan4 4s ease-in-out infinite; }
@keyframes kf-27-fan1 {
  0%, 100% { transform: rotate(-20deg) translateX(-20px); z-index: 1; }
  50% { transform: rotate(-20deg) translateX(-25px); z-index: 1; }
}
@keyframes kf-27-fan2 {
  0%, 100% { transform: rotate(-7deg) translateX(-6px); z-index: 2; }
  50% { transform: rotate(-9deg) translateX(-8px); z-index: 2; }
}
@keyframes kf-27-fan3 {
  0%, 100% { transform: rotate(7deg) translateX(6px); z-index: 3; }
  50% { transform: rotate(9deg) translateX(8px); z-index: 3; }
}
@keyframes kf-27-fan4 {
  0%, 100% { transform: rotate(20deg) translateX(20px); z-index: 4; }
  50% { transform: rotate(22deg) translateX(22px); z-index: 4; }
}

/* ── 3: Stacking rise ── */
.kf-27 .rise-stack {
  position: relative;
  width: 220px;
  height: 180px;
}
.kf-27 .rise-card {
  position: absolute;
  width: 100%;
  height: 120px;
  border-radius: 14px;
  padding: 16px;
}
.kf-27 .rise-card:nth-child(1) {
  bottom: 0; left: 0;
  background: #1a1a30;
  border: 1px solid #2a2a50;
  transform: scale(0.88) translateY(16px);
  z-index: 1;
  animation: kf-27-rise1 5s ease-in-out infinite;
}
.kf-27 .rise-card:nth-child(2) {
  bottom: 0; left: 0;
  background: #1e1e3a;
  border: 1px solid #303060;
  transform: scale(0.94) translateY(8px);
  z-index: 2;
  animation: kf-27-rise2 5s ease-in-out infinite;
}
.kf-27 .rise-card:nth-child(3) {
  bottom: 0; left: 0;
  background: #24243e;
  border: 1px solid #7c6af7;
  z-index: 3;
  animation: kf-27-rise3 5s ease-in-out infinite;
}
.kf-27 .rise-card .rc-title { font-size: 1rem; font-weight: 600; color: #7c6af7; }
.kf-27 .rise-card .rc-sub { font-size: 0.78rem; color: #666; margin-top: 4px; }
.kf-27 .rise-card .rc-tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  background: rgba(124,106,247,0.15);
  font-size: 0.7rem;
  color: #7c6af7;
  margin-top: 8px;
}
@keyframes kf-27-rise1 {
  0%, 40%, 100% { transform: scale(0.88) translateY(16px); }
  60%, 80% { transform: scale(0.88) translateY(14px); }
}
@keyframes kf-27-rise2 {
  0%, 40%, 100% { transform: scale(0.94) translateY(8px); }
  60%, 80% { transform: scale(0.94) translateY(6px); }
}
@keyframes kf-27-rise3 {
  0%, 30%, 100% { transform: translateY(0) scale(1); box-shadow: 0 8px 32px rgba(124,106,247,0.2); }
  50% { transform: translateY(-10px) scale(1.02); box-shadow: 0 20px 50px rgba(124,106,247,0.4); }
}

/* ── 4: Swipe deck ── */
.kf-27 .swipe-stack {
  position: relative;
  width: 220px;
  height: 170px;
}
.kf-27 .swipe-card {
  position: absolute;
  width: 200px;
  height: 140px;
  border-radius: 16px;
  top: 15px;
  left: 10px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.kf-27 .swipe-card:nth-child(3) {
  background: #1a1a2a;
  border: 1px solid #222240;
  transform: scale(0.84) translateY(12px);
  z-index: 1;
}
.kf-27 .swipe-card:nth-child(2) {
  background: #1e1e32;
  border: 1px solid #282850;
  transform: scale(0.92) translateY(6px);
  z-index: 2;
}
.kf-27 .swipe-card:nth-child(1) {
  background: linear-gradient(135deg, #1a1a38, #22223a);
  border: 1px solid #3a3a6a;
  z-index: 3;
  animation: kf-27-swipe 4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes kf-27-swipe {
  0%, 40%  { transform: translateX(0) rotate(0deg); opacity: 1; z-index: 3; }
  55%  { transform: translateX(160%) rotate(15deg); opacity: 0.6; z-index: 3; }
  56%  { transform: translateX(-160%) rotate(-10deg); opacity: 0; z-index: 0; }
  70%  { transform: translateX(0) rotate(0deg); opacity: 1; z-index: 1; }
  85%  { z-index: 2; }
  100% { transform: translateX(0) rotate(0deg); z-index: 3; opacity: 1; }
}
.kf-27 .sc-header { font-size: 0.72rem; color: #555; letter-spacing: 1px; text-transform: uppercase; }
.kf-27 .sc-name { font-size: 1rem; font-weight: 600; color: #ccc; }
.kf-27 .sc-role { font-size: 0.78rem; color: #666; }
.kf-27 .sc-match { font-size: 0.78rem; color: #00d46a; }

/* ── 5: Credit card stack ── */
.kf-27 .credit-stack {
  position: relative;
  width: 260px;
  height: 180px;
}
.kf-27 .credit-card {
  position: absolute;
  width: 240px;
  height: 150px;
  border-radius: 16px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.kf-27 .credit-card:nth-child(3) {
  background: linear-gradient(135deg, #1e1e30, #2a2a45);
  top: 20px; left: 10px;
  transform: rotate(-5deg) scale(0.9);
  z-index: 1;
}
.kf-27 .credit-card:nth-child(2) {
  background: linear-gradient(135deg, #241e40, #302855);
  top: 10px; left: 10px;
  transform: rotate(-2deg) scale(0.95);
  z-index: 2;
  animation: kf-27-credit2 3s ease-in-out infinite;
}
.kf-27 .credit-card:nth-child(1) {
  background: linear-gradient(135deg, #7c6af7, #e91e8c);
  top: 0; left: 10px;
  z-index: 3;
  animation: kf-27-credit1 3s ease-in-out infinite;
  box-shadow: 0 12px 40px rgba(124,106,247,0.4);
}
@keyframes kf-27-credit1 {
  0%, 100% { transform: translateY(0) rotate(0deg); box-shadow: 0 12px 40px rgba(124,106,247,0.4); }
  50% { transform: translateY(-6px) rotate(0.5deg); box-shadow: 0 20px 60px rgba(124,106,247,0.6); }
}
@keyframes kf-27-credit2 {
  0%, 100% { transform: rotate(-2deg) scale(0.95); }
  50% { transform: rotate(-3deg) scale(0.95) translateY(-2px); }
}
.kf-27 .cc-chip { width: 36px; height: 26px; background: rgba(255,215,100,0.8); border-radius: 4px; }
.kf-27 .cc-num { font-size: 0.9rem; letter-spacing: 3px; color: rgba(255,255,255,0.85); font-family: 'JetBrains Mono', monospace; }
.kf-27 .cc-row { display: flex; justify-content: space-between; align-items: flex-end; }
.kf-27 .cc-name { font-size: 0.75rem; color: rgba(255,255,255,0.7); letter-spacing: 1px; text-transform: uppercase; }
.kf-27 .cc-brand { font-size: 1.4rem; color: rgba(255,255,255,0.5); }

@media (prefers-reduced-motion: reduce) {
  .kf-27 .fc,
  .kf-27 .fan-card,
  .kf-27 .rise-card,
  .kf-27 .swipe-card:nth-child(1),
  .kf-27 .credit-card { animation: none; }
}
```

### 28. CSS Kinetic Typography Animation

**Type:** Pure CSS
**Description:** Five kinetic type scenes: stagger letter spring-drop, explode-and-reassemble, sinusoidal wave, scale-pulse mixed-weight headline and RGB-split glitch — pure CSS keyframes.

**HTML:**
```html
<div class="kf-28">

  <!-- Letter drop -->
  <div class="scene scene-1">
    <div class="letter-drop">
      <span>K</span><span>I</span><span>N</span><span>E</span><span>T</span><span>I</span><span>C</span>
    </div>
  </div>

  <!-- Explode -->
  <div class="scene scene-2">
    <div class="explode-word">
      <span>D</span><span>E</span><span>S</span><span>I</span><span>G</span><span>N</span><span>.</span>
    </div>
  </div>

  <!-- Wave -->
  <div class="scene scene-3">
    <div class="wave-word">
      <span>W</span><span>A</span><span>V</span><span>E</span><span>S</span><span>!</span>
    </div>
  </div>

  <!-- Scale pulse -->
  <div class="scene scene-4">
    <div class="scale-words">
      <span class="sw sw-1">THINK</span>
      <span class="sw sw-2">outside</span>
      <span class="sw sw-3">THE</span>
      <span class="sw sw-4">the</span>
      <span class="sw sw-5">BOX</span>
    </div>
  </div>

  <!-- Glitch -->
  <div class="scene scene-5">
    <div class="glitch-kine" data-text="MOTION">MOTION</div>
  </div>

</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,200;0,400;0,700;0,900;1,900&family=Bebas+Neue&display=swap');
.kf-28 *, .kf-28 *::before, .kf-28 *::after { box-sizing: border-box; margin: 0; padding: 0; }
.kf-28 {
  font-family: 'Inter', sans-serif;
  background: #060608;
  color: #fff;
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

/* ── Scene 1: Kinetic splash hero ── */
.kf-28 .scene {
  width: 100%;
  max-width: 960px;
  padding: 60px 24px;
  min-height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

/* Scene 1: Stagger letter drop */
.kf-28 .scene-1 {
  background: #060608;
  border-bottom: 1px solid #111;
}
.kf-28 .letter-drop {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(3rem, 10vw, 6rem);
  letter-spacing: 8px;
  display: flex;
  gap: 4px;
  overflow: hidden;
}
.kf-28 .letter-drop span {
  display: inline-block;
  animation: kf-28-drop 3s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}
.kf-28 .letter-drop span:nth-child(1)  { color:#7c6af7; animation-delay:0.05s; }
.kf-28 .letter-drop span:nth-child(2)  { color:#896cf9; animation-delay:0.1s; }
.kf-28 .letter-drop span:nth-child(3)  { color:#9870fa; animation-delay:0.15s; }
.kf-28 .letter-drop span:nth-child(4)  { color:#a975fb; animation-delay:0.2s; }
.kf-28 .letter-drop span:nth-child(5)  { color:#bb79fc; animation-delay:0.25s; }
.kf-28 .letter-drop span:nth-child(6)  { color:#cd7dfd; animation-delay:0.3s; }
.kf-28 .letter-drop span:nth-child(7)  { color:#e080fe; animation-delay:0.35s; }
@keyframes kf-28-drop {
  0%, 60%, 100% { transform: translateY(0); }
  15% { transform: translateY(-40px); }
  30% { transform: translateY(4px); }
  42% { transform: translateY(-10px); }
  52% { transform: translateY(2px); }
}

/* Scene 2: Explode and reassemble */
.kf-28 .scene-2 {
  background: #080808;
  border-bottom: 1px solid #111;
}
.kf-28 .explode-word {
  font-size: clamp(2rem, 8vw, 4rem);
  font-weight: 900;
  letter-spacing: 2px;
  display: flex;
  gap: 0;
}
.kf-28 .explode-word span {
  display: inline-block;
  animation: kf-28-explode 4s ease-in-out infinite;
}
.kf-28 .explode-word span:nth-child(1) { color:#e91e8c; animation-delay:0s;    --tx:-120px; --ty:-60px; --r:-90deg; }
.kf-28 .explode-word span:nth-child(2) { color:#ee3f9a; animation-delay:0.06s; --tx:-60px;  --ty:-90px; --r:45deg; }
.kf-28 .explode-word span:nth-child(3) { color:#f356a8; animation-delay:0.12s; --tx:0px;    --ty:-100px;--r:-20deg; }
.kf-28 .explode-word span:nth-child(4) { color:#f767b4; animation-delay:0.18s; --tx:60px;   --ty:-80px; --r:60deg; }
.kf-28 .explode-word span:nth-child(5) { color:#fb7cbf; animation-delay:0.24s; --tx:100px;  --ty:-50px; --r:-45deg; }
.kf-28 .explode-word span:nth-child(6) { color:#fe8ec8; animation-delay:0.3s;  --tx:130px;  --ty:-70px; --r:80deg; }
.kf-28 .explode-word span:nth-child(7) { color:#ffa1d3; animation-delay:0.36s; --tx:80px;   --ty:60px;  --r:-60deg; }
@keyframes kf-28-explode {
  0%, 20%   { transform: translate(0,0) rotate(0deg) scale(1); opacity: 1; }
  45%       { transform: translate(var(--tx), var(--ty)) rotate(var(--r)) scale(0.5); opacity: 0; }
  55%       { transform: translate(var(--tx), var(--ty)) rotate(var(--r)) scale(0.5); opacity: 0; }
  80%, 100% { transform: translate(0,0) rotate(0deg) scale(1); opacity: 1; }
}

/* Scene 3: Wave text */
.kf-28 .scene-3 { background: #06060a; border-bottom: 1px solid #111; }
.kf-28 .wave-word {
  font-size: clamp(2.5rem, 9vw, 5rem);
  font-weight: 900;
  display: flex;
  gap: 2px;
  font-style: italic;
}
.kf-28 .wave-word span {
  display: inline-block;
  animation: kf-28-wave 2s ease-in-out infinite;
}
.kf-28 .wave-word span:nth-child(1) { color:#00d4ff; animation-delay:0s; }
.kf-28 .wave-word span:nth-child(2) { color:#20d8ff; animation-delay:0.08s; }
.kf-28 .wave-word span:nth-child(3) { color:#40dcfe; animation-delay:0.16s; }
.kf-28 .wave-word span:nth-child(4) { color:#5fdffe; animation-delay:0.24s; }
.kf-28 .wave-word span:nth-child(5) { color:#7fe3fd; animation-delay:0.32s; }
.kf-28 .wave-word span:nth-child(6) { color:#9fe6fc; animation-delay:0.40s; }
@keyframes kf-28-wave {
  0%, 100% { transform: translateY(0) scaleY(1); }
  25%       { transform: translateY(-20px) scaleY(1.1); }
  50%       { transform: translateY(0) scaleY(1); }
  75%       { transform: translateY(8px) scaleY(0.95); }
}

/* Scene 4: Scale pulse words */
.kf-28 .scene-4 { background: #070709; border-bottom: 1px solid #111; }
.kf-28 .scale-words {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}
.kf-28 .scale-words .sw {
  font-size: clamp(1.5rem, 5vw, 2.5rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 2px;
  animation: kf-28-scalepulse 3s ease-in-out infinite;
}
.kf-28 .sw-1 { color: #f7c948; animation-delay: 0s; }
.kf-28 .sw-2 { color: #fff; font-size: clamp(0.9rem, 3vw, 1.2rem) !important; animation-delay: 0.5s; font-weight: 300; }
.kf-28 .sw-3 { color: #ff6b35; animation-delay: 1s; }
.kf-28 .sw-4 { color: #fff; font-size: clamp(0.9rem, 3vw, 1.2rem) !important; animation-delay: 1.5s; font-weight: 300; }
.kf-28 .sw-5 { color: #00d46a; animation-delay: 2s; }
@keyframes kf-28-scalepulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.1); }
}

/* Scene 5: Glitch kinetic */
.kf-28 .scene-5 { background: #040406; }
.kf-28 .glitch-kine {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(3rem, 10vw, 5rem);
  letter-spacing: 6px;
  position: relative;
  color: #fff;
}
.kf-28 .glitch-kine::before {
  content: attr(data-text);
  position: absolute;
  top: 0; left: 0;
  color: #e91e8c;
  animation: kf-28-glitch1 3s linear infinite;
  clip-path: polygon(0 30%, 100% 30%, 100% 60%, 0 60%);
}
.kf-28 .glitch-kine::after {
  content: attr(data-text);
  position: absolute;
  top: 0; left: 0;
  color: #00d4ff;
  animation: kf-28-glitch2 3s linear infinite;
  clip-path: polygon(0 60%, 100% 60%, 100% 80%, 0 80%);
}
@keyframes kf-28-glitch1 {
  0%, 85%, 100% { transform: translate(0); }
  87% { transform: translate(-4px, 2px); }
  89% { transform: translate(4px, -2px); }
  91% { transform: translate(-4px, 0); }
  93% { transform: translate(3px, 1px); }
  95% { transform: translate(0); }
}
@keyframes kf-28-glitch2 {
  0%, 80%, 100% { transform: translate(0); }
  82% { transform: translate(4px, -3px); }
  84% { transform: translate(-3px, 2px); }
  86% { transform: translate(2px, -1px); }
  88% { transform: translate(0); }
}

@media (prefers-reduced-motion: reduce) {
  .kf-28 .letter-drop span,
  .kf-28 .explode-word span,
  .kf-28 .wave-word span,
  .kf-28 .scale-words .sw,
  .kf-28 .glitch-kine::before,
  .kf-28 .glitch-kine::after { animation: none; transform: none; }
}
```

### 29. CSS Morphing Progress Steps Animation

**Type:** Pure CSS
**Description:** Four animated progress step UI patterns: horizontal step track, radial ring steps, morphing pill steps and animated vertical timeline — all scoped CSS keyframes.

**HTML:**
```html
<div class="kf-29">
  <h2>CSS Morphing Progress Steps</h2>

  <!-- Horizontal steps -->
  <div class="h-steps">
    <div class="step-track">
      <div class="step-node done">
        <div class="node-circle">✓</div>
        <div class="node-label">Account</div>
      </div>
      <div class="step-line done"></div>
      <div class="step-node done">
        <div class="node-circle">✓</div>
        <div class="node-label">Profile</div>
      </div>
      <div class="step-line active"></div>
      <div class="step-node active">
        <div class="node-circle">3</div>
        <div class="node-label">Payment</div>
      </div>
      <div class="step-line pending"></div>
      <div class="step-node pending">
        <div class="node-circle">4</div>
        <div class="node-label">Review</div>
      </div>
      <div class="step-line pending"></div>
      <div class="step-node pending">
        <div class="node-circle">5</div>
        <div class="node-label">Launch</div>
      </div>
    </div>
  </div>

  <!-- Radial rings -->
  <div class="radial-steps">
    <div class="radial-step">
      <div class="radial-ring">
        <svg viewBox="0 0 80 80"><circle class="ring-bg" cx="40" cy="40" r="35"/><circle class="ring-fill s1" cx="40" cy="40" r="35"/></svg>
        <div class="ring-icon">📦</div>
      </div>
      <label>Order</label>
    </div>
    <div class="radial-step">
      <div class="radial-ring">
        <svg viewBox="0 0 80 80"><circle class="ring-bg" cx="40" cy="40" r="35"/><circle class="ring-fill s2" cx="40" cy="40" r="35"/></svg>
        <div class="ring-icon">🚚</div>
      </div>
      <label>Shipped</label>
    </div>
    <div class="radial-step">
      <div class="radial-ring">
        <svg viewBox="0 0 80 80"><circle class="ring-bg" cx="40" cy="40" r="35"/><circle class="ring-fill s3" cx="40" cy="40" r="35"/></svg>
        <div class="ring-icon">🗺️</div>
      </div>
      <label>Transit</label>
    </div>
    <div class="radial-step">
      <div class="radial-ring">
        <svg viewBox="0 0 80 80"><circle class="ring-bg" cx="40" cy="40" r="35"/><circle class="ring-fill s4" cx="40" cy="40" r="35"/></svg>
        <div class="ring-icon">📬</div>
      </div>
      <label>Deliver</label>
    </div>
  </div>

  <!-- Pill steps -->
  <div class="pill-steps">
    <div class="pill done-p"><span class="pill-dot"></span>Set up</div>
    <div class="pill done-p"><span class="pill-dot"></span>Design</div>
    <div class="pill active-p"><span class="pill-dot"></span>Build</div>
    <div class="pill pending-p"><span class="pill-dot"></span>Review</div>
    <div class="pill pending-p"><span class="pill-dot"></span>Deploy</div>
  </div>

  <!-- Vertical timeline -->
  <div class="v-steps">
    <div class="v-step done">
      <div class="v-step-left">
        <div class="v-dot">✓</div>
        <div class="v-connector"></div>
      </div>
      <div class="v-step-right">
        <h4>Requirements Gathered</h4>
        <p>All project requirements documented and approved.</p>
      </div>
    </div>
    <div class="v-step done">
      <div class="v-step-left">
        <div class="v-dot">✓</div>
        <div class="v-connector"></div>
      </div>
      <div class="v-step-right">
        <h4>Design Approved</h4>
        <p>Wireframes and visual design signed off by stakeholders.</p>
      </div>
    </div>
    <div class="v-step active-v">
      <div class="v-step-left">
        <div class="v-dot">●</div>
        <div class="v-connector"></div>
      </div>
      <div class="v-step-right">
        <h4>Development in Progress</h4>
        <p>Frontend and backend implementation underway.</p>
      </div>
    </div>
    <div class="v-step pend">
      <div class="v-step-left">
        <div class="v-dot">4</div>
        <div class="v-connector"></div>
      </div>
      <div class="v-step-right">
        <h4>QA Testing</h4>
        <p>Automated and manual testing pipeline.</p>
      </div>
    </div>
    <div class="v-step pend">
      <div class="v-step-left">
        <div class="v-dot">5</div>
      </div>
      <div class="v-step-right">
        <h4>Production Launch</h4>
        <p>Deploy to production and monitor.</p>
      </div>
    </div>
  </div>

</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
.kf-29 *, .kf-29 *::before, .kf-29 *::after { box-sizing: border-box; margin: 0; padding: 0; }
.kf-29 {
  font-family: 'Inter', sans-serif;
  background: #09090f;
  color: #fff;
  padding: 48px 24px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
}
.kf-29 h2 {
  font-size: 1rem;
  color: #444;
  letter-spacing: 3px;
  text-transform: uppercase;
}

/* ── 1: Horizontal step progress ── */
.kf-29 .h-steps {
  width: 100%;
  max-width: 700px;
}
.kf-29 .step-track {
  display: flex;
  align-items: center;
  position: relative;
}
.kf-29 .step-node {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  z-index: 2;
}
.kf-29 .node-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 600;
  position: relative;
  transition: all 0.3s;
}
.kf-29 .node-label {
  font-size: 0.72rem;
  color: #555;
  letter-spacing: 0.5px;
  text-align: center;
  max-width: 80px;
}
.kf-29 .step-line {
  flex: 1;
  height: 3px;
  background: #1e1e2a;
  position: relative;
  margin: 0 -2px;
  margin-bottom: 28px;
}
.kf-29 .step-line::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-radius: 2px;
}

/* Completed step */
.kf-29 .step-node.done .node-circle {
  background: #7c6af7;
  color: #fff;
  box-shadow: 0 0 0 0 rgba(124,106,247,0.4);
  animation: kf-29-nodeshine 3s ease-in-out infinite;
}
@keyframes kf-29-nodeshine {
  0%, 100% { box-shadow: 0 0 0 0 rgba(124,106,247,0.4); }
  50%       { box-shadow: 0 0 0 8px rgba(124,106,247,0); }
}
.kf-29 .step-node.done .node-label { color: #7c6af7; }
/* Active step */
.kf-29 .step-node.active .node-circle {
  background: transparent;
  border: 3px solid #7c6af7;
  color: #7c6af7;
  animation: kf-29-activepulse 1.5s ease-in-out infinite;
}
@keyframes kf-29-activepulse {
  0%, 100% { border-color: #7c6af7; box-shadow: 0 0 0 0 rgba(124,106,247,0.5); }
  50%       { border-color: #a898fc; box-shadow: 0 0 0 6px rgba(124,106,247,0); }
}
.kf-29 .step-node.active .node-label { color: #ccc; }
/* Pending step */
.kf-29 .step-node.pending .node-circle {
  background: #151525;
  border: 2px solid #2a2a40;
  color: #444;
}

/* Line fills */
.kf-29 .step-line.done::after {
  background: #7c6af7;
  width: 100%;
}
.kf-29 .step-line.active::after {
  background: linear-gradient(90deg, #7c6af7, #b8acff);
  animation: kf-29-linefill 2s ease-in-out infinite alternate;
}
@keyframes kf-29-linefill {
  0%   { width: 30%; }
  100% { width: 85%; }
}
.kf-29 .step-line.pending::after { width: 0; }

/* ── 2: Circular / radial progress ── */
.kf-29 .radial-steps {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
  justify-content: center;
}
.kf-29 .radial-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.kf-29 .radial-ring {
  position: relative;
  width: 80px;
  height: 80px;
}
.kf-29 .radial-ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.kf-29 .ring-bg { fill: none; stroke: #1e1e30; stroke-width: 6; }
.kf-29 .ring-fill { fill: none; stroke-width: 6; stroke-linecap: round; stroke-dasharray: 220; }
.kf-29 .ring-fill.s1 { stroke: #7c6af7; stroke-dashoffset: 0; animation: kf-29-ring1 3s ease-in-out infinite; }
.kf-29 .ring-fill.s2 { stroke: #00d4ff; stroke-dashoffset: 55; animation: kf-29-ring2 3s ease-in-out infinite; }
.kf-29 .ring-fill.s3 { stroke: #ff6b35; stroke-dashoffset: 110; animation: kf-29-ring3 3s ease-in-out infinite; }
.kf-29 .ring-fill.s4 { stroke: #f7c948; stroke-dashoffset: 165; animation: kf-29-ring4 3s ease-in-out infinite; }
@keyframes kf-29-ring1 { 0%,100%{stroke-dashoffset:0} 50%{stroke-dashoffset:-10} }
@keyframes kf-29-ring2 { 0%,100%{stroke-dashoffset:55} 50%{stroke-dashoffset:45} }
@keyframes kf-29-ring3 { 0%,100%{stroke-dashoffset:110} 50%{stroke-dashoffset:90} }
@keyframes kf-29-ring4 { 0%,100%{stroke-dashoffset:165} 50%{stroke-dashoffset:155} }
.kf-29 .ring-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.2rem;
}
.kf-29 .radial-step label {
  font-size: 0.7rem;
  color: #555;
  letter-spacing: 1px;
  text-align: center;
  text-transform: uppercase;
}

/* ── 3: Morphing pill steps ── */
.kf-29 .pill-steps {
  display: flex;
  gap: 8px;
  align-items: center;
}
.kf-29 .pill {
  height: 36px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 0.8rem;
  font-weight: 500;
  overflow: hidden;
  white-space: nowrap;
  transition: all 0.4s;
}
.kf-29 .pill.done-p {
  background: rgba(124,106,247,0.15);
  border: 1px solid #7c6af7;
  color: #7c6af7;
  padding: 0 16px;
  animation: kf-29-pilldone 4s ease infinite;
}
.kf-29 .pill.active-p {
  background: #7c6af7;
  color: #fff;
  padding: 0 20px;
  animation: kf-29-pillactive 4s ease infinite;
  box-shadow: 0 4px 20px rgba(124,106,247,0.4);
}
.kf-29 .pill.pending-p {
  background: #111125;
  border: 1px solid #1e1e35;
  color: #444;
  padding: 0 14px;
  animation: kf-29-pillpending 4s ease infinite;
}
@keyframes kf-29-pilldone {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(0.98); }
}
@keyframes kf-29-pillactive {
  0%, 100% { box-shadow: 0 4px 20px rgba(124,106,247,0.4); transform: scale(1); }
  50% { box-shadow: 0 6px 30px rgba(124,106,247,0.6); transform: scale(1.03); }
}
@keyframes kf-29-pillpending {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 0.8; }
}
.kf-29 .pill-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }

/* ── 4: Vertical timeline steps ── */
.kf-29 .v-steps {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  width: 100%;
  max-width: 440px;
}
.kf-29 .v-step {
  display: flex;
  gap: 20px;
  position: relative;
}
.kf-29 .v-step-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 40px;
  flex-shrink: 0;
}
.kf-29 .v-dot {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  flex-shrink: 0;
  z-index: 2;
}
.kf-29 .v-connector {
  width: 2px;
  flex: 1;
  min-height: 32px;
  margin: 2px 0;
}
.kf-29 .v-step-right {
  padding: 4px 0 32px;
}
.kf-29 .v-step-right h4 { font-size: 0.9rem; font-weight: 600; color: #ccc; margin-bottom: 4px; }
.kf-29 .v-step-right p { font-size: 0.78rem; color: #555; line-height: 1.5; }
/* done */
.kf-29 .v-step.done .v-dot {
  background: #7c6af7;
  color: #fff;
  animation: kf-29-vdoneshine 3s ease-in-out infinite;
}
@keyframes kf-29-vdoneshine {
  0%,100%{box-shadow:0 0 0 0 rgba(124,106,247,0.4)}
  50%{box-shadow:0 0 0 6px rgba(124,106,247,0)}
}
.kf-29 .v-step.done .v-connector { background: linear-gradient(180deg, #7c6af7, #a898fc); }
.kf-29 .v-step.done .v-step-right h4 { color: #fff; }
/* active */
.kf-29 .v-step.active-v .v-dot {
  background: transparent;
  border: 3px solid #7c6af7;
  color: #7c6af7;
  animation: kf-29-activepulse 1.5s ease-in-out infinite;
}
.kf-29 .v-step.active-v .v-connector {
  background: linear-gradient(180deg, #a898fc, transparent);
  animation: kf-29-vline 2s ease infinite alternate;
}
@keyframes kf-29-vline {
  0% { opacity: 0.4; }
  100% { opacity: 1; }
}
/* pending */
.kf-29 .v-step.pend .v-dot {
  background: #111120;
  border: 2px solid #1e1e30;
  color: #333;
}
.kf-29 .v-step.pend .v-connector { background: #1a1a28; }
.kf-29 .v-step.pend .v-step-right h4 { color: #444; }

@media (prefers-reduced-motion: reduce) {
  .kf-29 .node-circle,
  .kf-29 .step-line.active::after,
  .kf-29 .ring-fill,
  .kf-29 .pill,
  .kf-29 .v-dot,
  .kf-29 .v-connector { animation: none; }
  .kf-29 .step-line.active::after { width: 60%; }
}
```

### 30. CSS Animated Gradient Mesh Background

**Type:** Pure CSS
**Description:** Animated gradient mesh using floating radial-gradient orbs on a dark base: full hero scene, four colour-variant cards (purple, pink, green, gold) and a rainbow gradient text strip.

**HTML:**
```html
<div class="kf-30">
  <h2>CSS Animated Gradient Mesh</h2>

  <!-- Hero -->
  <div class="hero-mesh">
    <div class="mesh-bg">
      <div class="orb orb-1"></div>
      <div class="orb orb-2"></div>
      <div class="orb orb-3"></div>
      <div class="orb orb-4"></div>
    </div>
    <div class="hero-content">
      <h3>Gradient Mesh</h3>
      <p>pure CSS · no canvas · no SVG</p>
    </div>
  </div>

  <!-- Cards -->
  <div class="cards">
    <div class="mesh-card mc-a">
      <div class="card-bg"></div>
      <div class="card-orb"></div>
      <div class="card-orb"></div>
      <div class="card-label">Purple · Cyan</div>
      <div class="card-title">Analytics</div>
    </div>
    <div class="mesh-card mc-b">
      <div class="card-bg"></div>
      <div class="card-orb"></div>
      <div class="card-orb"></div>
      <div class="card-label">Pink · Orange</div>
      <div class="card-title">Creative</div>
    </div>
    <div class="mesh-card mc-c">
      <div class="card-bg"></div>
      <div class="card-orb"></div>
      <div class="card-orb"></div>
      <div class="card-label">Green · Teal</div>
      <div class="card-title">Growth</div>
    </div>
    <div class="mesh-card mc-d">
      <div class="card-bg"></div>
      <div class="card-orb"></div>
      <div class="card-orb"></div>
      <div class="card-label">Gold · Warm</div>
      <div class="card-title">Premium</div>
    </div>
  </div>

  <!-- Gradient text -->
  <div class="gradient-text-demo">
    <div class="grad-text">VIVID</div>
  </div>
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;700;900&display=swap');
.kf-30 *, .kf-30 *::before, .kf-30 *::after { box-sizing: border-box; margin: 0; padding: 0; }
.kf-30 {
  font-family: 'Inter', sans-serif;
  background: #050508;
  color: #fff;
  padding: 48px 24px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}
.kf-30 h2 {
  font-size: 1rem;
  color: #333;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-weight: 300;
}

/* ── 1: Full hero gradient mesh ── */
.kf-30 .hero-mesh {
  width: 100%;
  max-width: 960px;
  min-height: 320px;
  border-radius: 24px;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.kf-30 .mesh-bg {
  position: absolute;
  inset: 0;
  background: #0a0a14;
}
/* Floating gradient orbs */
.kf-30 .orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  mix-blend-mode: screen;
}
.kf-30 .orb-1 {
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(124,106,247,0.5) 0%, transparent 70%);
  top: -100px; left: -80px;
  animation: kf-30-orb1 8s ease-in-out infinite;
}
.kf-30 .orb-2 {
  width: 350px; height: 350px;
  background: radial-gradient(circle, rgba(233,30,140,0.4) 0%, transparent 70%);
  bottom: -80px; right: -60px;
  animation: kf-30-orb2 10s ease-in-out infinite;
}
.kf-30 .orb-3 {
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(0,212,255,0.35) 0%, transparent 70%);
  top: 30%; left: 40%;
  transform: translate(-50%, -50%);
  animation: kf-30-orb3 7s ease-in-out infinite;
}
.kf-30 .orb-4 {
  width: 250px; height: 250px;
  background: radial-gradient(circle, rgba(0,212,106,0.3) 0%, transparent 70%);
  bottom: 10%; left: 20%;
  animation: kf-30-orb4 12s ease-in-out infinite;
}
@keyframes kf-30-orb1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(80px, 60px) scale(1.1); }
  66% { transform: translate(-40px, 80px) scale(0.9); }
}
@keyframes kf-30-orb2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  40% { transform: translate(-100px, -60px) scale(1.15); }
  70% { transform: translate(50px, -40px) scale(0.85); }
}
@keyframes kf-30-orb3 {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-40%, -60%) scale(1.2); }
}
@keyframes kf-30-orb4 {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(80px, -50px) scale(1.1); }
}
.kf-30 .hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
}
.kf-30 .hero-content h3 {
  font-size: clamp(2rem, 6vw, 3.5rem);
  font-weight: 900;
  letter-spacing: 2px;
  background: linear-gradient(135deg, #fff 0%, rgba(255,255,255,0.7) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.kf-30 .hero-content p {
  font-size: 1rem;
  color: rgba(255,255,255,0.45);
  margin-top: 8px;
  letter-spacing: 2px;
  font-weight: 300;
}

/* ── 2: Card variants ── */
.kf-30 .cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  width: 100%;
  max-width: 960px;
}
.kf-30 .mesh-card {
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  min-height: 200px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.kf-30 .mesh-card .card-bg {
  position: absolute;
  inset: 0;
}
.kf-30 .mesh-card .card-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  mix-blend-mode: screen;
}
/* Card A: Purple + cyan */
.kf-30 .mc-a .card-bg { background: #080814; }
.kf-30 .mc-a .card-orb:nth-child(2) { width: 200px; height: 200px; background: rgba(124,106,247,0.6); top: -60px; left: -60px; animation: kf-30-ca1 6s ease-in-out infinite; }
.kf-30 .mc-a .card-orb:nth-child(3) { width: 150px; height: 150px; background: rgba(0,212,255,0.4); bottom: -40px; right: -40px; animation: kf-30-ca2 8s ease-in-out infinite; }
@keyframes kf-30-ca1 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(40px,30px)} }
@keyframes kf-30-ca2 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-30px,-40px)} }
/* Card B: Pink + orange */
.kf-30 .mc-b .card-bg { background: #0e0810; }
.kf-30 .mc-b .card-orb:nth-child(2) { width: 180px; height: 180px; background: rgba(233,30,140,0.6); top: -50px; right: -50px; animation: kf-30-cb1 7s ease-in-out infinite; }
.kf-30 .mc-b .card-orb:nth-child(3) { width: 140px; height: 140px; background: rgba(255,107,53,0.5); bottom: -30px; left: -30px; animation: kf-30-cb2 9s ease-in-out infinite; }
@keyframes kf-30-cb1 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-40px,30px) scale(1.1)} }
@keyframes kf-30-cb2 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(40px,-30px)} }
/* Card C: Green + teal */
.kf-30 .mc-c .card-bg { background: #050e0a; }
.kf-30 .mc-c .card-orb:nth-child(2) { width: 200px; height: 200px; background: rgba(0,212,106,0.5); bottom: -60px; left: -40px; animation: kf-30-cc1 8s ease-in-out infinite; }
.kf-30 .mc-c .card-orb:nth-child(3) { width: 160px; height: 160px; background: rgba(0,180,220,0.4); top: -40px; right: -40px; animation: kf-30-cc2 6s ease-in-out infinite; }
@keyframes kf-30-cc1 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(50px,-40px)} }
@keyframes kf-30-cc2 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-40px,40px)} }
/* Card D: Gold + warm */
.kf-30 .mc-d .card-bg { background: #0d0a05; }
.kf-30 .mc-d .card-orb:nth-child(2) { width: 220px; height: 220px; background: rgba(247,201,72,0.5); top: -80px; right: -40px; animation: kf-30-cd1 9s ease-in-out infinite; }
.kf-30 .mc-d .card-orb:nth-child(3) { width: 160px; height: 160px; background: rgba(255,140,60,0.4); bottom: -40px; left: -20px; animation: kf-30-cd2 7s ease-in-out infinite; }
@keyframes kf-30-cd1 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-40px,50px) scale(0.9)} }
@keyframes kf-30-cd2 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(50px,-30px)} }
.kf-30 .card-label {
  position: relative;
  z-index: 2;
  font-size: 0.72rem;
  color: rgba(255,255,255,0.4);
  letter-spacing: 2px;
  text-transform: uppercase;
}
.kf-30 .card-title {
  position: relative;
  z-index: 2;
  font-size: 1.2rem;
  font-weight: 700;
  color: rgba(255,255,255,0.85);
  margin-top: 4px;
}

/* ── 3: Gradient text animation ── */
.kf-30 .gradient-text-demo {
  text-align: center;
}
.kf-30 .grad-text {
  font-size: clamp(2rem, 8vw, 4rem);
  font-weight: 900;
  background: linear-gradient(90deg,
    #7c6af7, #e91e8c, #ff6b35, #f7c948, #00d46a, #00d4ff, #7c6af7
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: kf-30-gradshift 4s linear infinite;
  letter-spacing: 4px;
}
@keyframes kf-30-gradshift {
  0% { background-position: 0% center; }
  100% { background-position: 200% center; }
}

@media (prefers-reduced-motion: reduce) {
  .kf-30 .orb,
  .kf-30 .card-orb,
  .kf-30 .grad-text { animation: none; }
}
```

---
## 20 CSS Link Hover Effect Designs

URL: https://codefronts.com/motion/css-link-effects/
Description: 20 free CSS link hover effects — animated underlines, glitches, neon flickers, marker highlights, 3D flips and more, with copy-paste code.
Demo count: 20

### 01. Squiggly Underline

**Type:** Pure CSS
**Description:** Hand-drawn-look squiggly SVG underline that draws in beneath the link on hover via stroke-dasharray. Perfect for navigation, blog headers, and personality-forward sites.

**HTML:**
```html
<nav class="cle-squig-nav">
  <a href="#" class="cle-squig">home</a>
  <a href="#" class="cle-squig is-active">blog</a>
  <a href="#" class="cle-squig">work</a>
  <a href="#" class="cle-squig">about</a>
</nav>
```

**CSS:**
```css
.cle-squig-nav {
  display: flex;
  gap: 28px;
}
.cle-squig {
  position: relative;
  padding-bottom: 14px;
  color: #c5e8ff;
  font:
    600 18px/1.2 "Caveat",
    "Comic Sans MS",
    cursive;
  text-decoration: none;
  transition: color 0.25s;
}
.cle-squig.is-active {
  color: #ddff8a;
}
.cle-squig::after {
  content: "";
  position: absolute;
  left: -2px;
  right: -2px;
  bottom: 0;
  height: 10px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 10' preserveAspectRatio='none'><path d='M2 5 Q 12 0 22 5 T 42 5 T 62 5 T 78 5' stroke='%23ddff8a' stroke-width='2' fill='none' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-size: 0% 100%;
  background-position: left center;
  transition: background-size 0.55s cubic-bezier(0.65, 0, 0.35, 1);
}
.cle-squig:hover::after,
.cle-squig:focus-visible::after,
.cle-squig.is-active::after {
  background-size: 100% 100%;
}
```

### 02. Tilde Morph

**Type:** Pure CSS
**Description:** A straight underline morphs into a tilde-style wave on hover via background-image swap. Editorial inline-menu pattern — line on rest, wave on attention.

**HTML:**
```html
<p class="cle-tilde-row">
  <a href="#" class="cle-tilde">Root</a>
  <a href="#" class="cle-tilde">Perfect Fifth</a>
  <a href="#" class="cle-tilde">Perfect Fourth</a>
  <a href="#" class="cle-tilde">Major Third</a>
</p>
```

**CSS:**
```css
.cle-tilde-row {
  margin: 0;
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}
.cle-tilde {
  position: relative;
  padding-bottom: 8px;
  color: #ffd479;
  font:
    500 15px/1.2 Georgia,
    "Times New Roman",
    serif;
  text-decoration: none;
  background-image: linear-gradient(#ffd479, #ffd479);
  background-repeat: no-repeat;
  background-size: 100% 1px;
  background-position: 0 100%;
  transition:
    background-image 0.4s,
    background-size 0.4s;
}
.cle-tilde:hover,
.cle-tilde:focus-visible {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 6' preserveAspectRatio='none'><path d='M0 3 Q 15 0 30 3 T 60 3' stroke='%23ffd479' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>");
  background-size: 100% 6px;
}
```

### 03. Dotted Focus Ring

**Type:** Pure CSS
**Description:** A dotted box outline appears around the link on hover, paired with a blinking trailing caret. Reads as terminal/CLI focus — distinctive without competing with the text.

**HTML:**
```html
<a href="#" class="cle-dot">
  <span class="cle-dot-bullet" aria-hidden="true">◉</span>
  Let's Goooo!
  <span class="cle-dot-caret" aria-hidden="true">_</span>
</a>
```

**CSS:**
```css
.cle-dot {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  color: #ddff8a;
  font:
    700 16px/1.2 system-ui,
    sans-serif;
  text-decoration: underline;
  text-decoration-color: #ddff8a;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  border: 1.5px dotted transparent;
  border-radius: 3px;
  transition: border-color 0.2s;
}
.cle-dot-bullet {
  color: #ddff8a;
  font-size: 14px;
}
.cle-dot-caret {
  opacity: 0;
  color: #ddff8a;
  font-weight: 700;
  transition: opacity 0.2s;
}
.cle-dot:hover,
.cle-dot:focus-visible {
  border-color: #ddff8a;
}
.cle-dot:hover .cle-dot-caret,
.cle-dot:focus-visible .cle-dot-caret {
  opacity: 1;
  animation: cle-dot-blink 0.9s steps(1) infinite;
}
@keyframes cle-dot-blink {
  0%,
  50% {
    opacity: 1;
  }
  51%,
  100% {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cle-dot:hover .cle-dot-caret,
  .cle-dot:focus-visible .cle-dot-caret {
    animation: none;
    opacity: 1;
  }
}
```

### 04. Encircled

**Type:** Pure CSS
**Description:** An SVG ellipse strokes itself around the linked text on hover via stroke-dasharray — a pen circling a phrase. Calm, editorial, and impossible to miss.

**HTML:**
```html
<div class="cle-circle-bg">
  <p class="cle-circle-wrap">
    Check out
    <a href="#" class="cle-circle">
      the link
      <svg class="cle-circle-svg" viewBox="0 0 100 36" aria-hidden="true">
        <ellipse
          cx="50"
          cy="18"
          rx="46"
          ry="14"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
        />
      </svg>
    </a>
    here
  </p>
</div>
```

**CSS:**
```css
.cle-circle-bg {
  padding: 24px;
  background: #f4f5f9;
  border-radius: 10px;
}
.cle-circle-wrap {
  margin: 0;
  font:
    500 16px/1.5 system-ui,
    sans-serif;
  color: #2a2a3e;
}
.cle-circle {
  position: relative;
  display: inline-block;
  padding: 0 6px;
  color: #6b8cff;
  font-weight: 600;
  text-decoration: none;
}
.cle-circle-svg {
  position: absolute;
  inset: -4px -2px;
  width: calc(100% + 4px);
  height: calc(100% + 8px);
  color: #6b8cff;
  pointer-events: none;
  overflow: visible;
}
.cle-circle-svg ellipse {
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  transform-origin: center;
  transform: rotate(-3deg);
  transition: stroke-dashoffset 0.7s cubic-bezier(0.65, 0, 0.35, 1);
}
.cle-circle:hover .cle-circle-svg ellipse,
.cle-circle:focus-visible .cle-circle-svg ellipse {
  stroke-dashoffset: 0;
}
```

### 05. Chevron Companion

**Type:** Pure CSS
**Description:** On hover the underline retracts from right-to-left while a chevron arrow "draws in" via stroke-dasharray with a spring overshoot. Adapted from Aaron Iker — works on multi-line links thanks to background-image underline.

**HTML:**
```html
<div class="cle-chev-bg">
  <div class="cle-chev-stack">
    <a href="#" class="cle-chev"
      ><span>Link here</span
      ><svg class="cle-chev-arrow" viewBox="0 0 13 20" aria-hidden="true">
        <polyline points="0.5 19.5 3 19.5 12.5 10 3 0.5" /></svg
    ></a>
    <a href="#" class="cle-chev cle-chev-multi"
      ><span>Link here with multiple lines</span
      ><svg class="cle-chev-arrow" viewBox="0 0 13 20" aria-hidden="true">
        <polyline points="0.5 19.5 3 19.5 12.5 10 3 0.5" /></svg
    ></a>
  </div>
</div>
```

**CSS:**
```css
.cle-chev-bg {
  padding: 28px 32px;
  background: #f6f8ff;
  border-radius: 10px;
}
.cle-chev-stack {
  display: flex;
  flex-direction: column;
  gap: 22px;
  align-items: flex-start;
}
.cle-chev {
  --line: #646b8c;
  --color: #2b3044;
  --background-size: 100%;
  --background-delay: 0.15s;
  --stroke-dashoffset: 46;
  --stroke-duration: 0.15s;
  --stroke-easing: linear;
  --stroke-delay: 0s;
  position: relative;
  display: inline;
  color: var(--color);
  font:
    500 16px/20px "Inter",
    system-ui,
    sans-serif;
  text-decoration: none;
}
.cle-chev span {
  background-image: linear-gradient(0deg, var(--line) 0%, var(--line) 100%);
  background-position: 100% 100%;
  background-repeat: no-repeat;
  background-size: var(--background-size) 1px;
  transition: background-size 0.2s linear var(--background-delay);
  transform: translateZ(0);
}
.cle-chev-arrow {
  vertical-align: top;
  display: inline;
  line-height: 1;
  width: 13px;
  height: 20px;
  position: relative;
  left: -2px;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1px;
  stroke: var(--line);
  stroke-dasharray: 7.95 30;
  stroke-dashoffset: var(--stroke-dashoffset);
  transition: stroke-dashoffset var(--stroke-duration) var(--stroke-easing) var(--stroke-delay);
}
.cle-chev:hover,
.cle-chev:focus-visible {
  --background-size: 0%;
  --background-delay: 0s;
  --stroke-dashoffset: 26;
  --stroke-duration: 0.3s;
  --stroke-easing: cubic-bezier(0.3, 1.5, 0.5, 1);
  --stroke-delay: 0.195s;
}
.cle-chev-multi {
  max-width: 180px;
}
```

### 06. Cursor Blink Underline

**Type:** Pure CSS
**Description:** Link text stays solid; only a CLI-style cursor caret bar underneath blinks at the exact 60bpm cadence terminals use. The link reads as "ready for input" without any text flicker.

**HTML:**
```html
<a href="#" class="cle-curblink">Open editor</a>
```

**CSS:**
```css
.cle-curblink {
  position: relative;
  display: inline-block;
  padding-bottom: 6px;
  color: #00e5ff;
  font:
    600 16px/1.2 ui-monospace,
    "SF Mono",
    monospace;
  text-decoration: none;
  letter-spacing: 0.02em;
  transition:
    color 0.2s,
    text-shadow 0.25s;
}
.cle-curblink::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: #00e5ff;
  transform-origin: left;
  animation: cle-curblink-pulse 1s steps(1, end) infinite;
}
.cle-curblink:hover,
.cle-curblink:focus-visible {
  color: #fff;
  text-shadow: 0 0 12px rgba(0, 229, 255, 0.55);
}
.cle-curblink:hover::after,
.cle-curblink:focus-visible::after {
  background: #fff;
  box-shadow: 0 0 8px rgba(0, 229, 255, 0.7);
}
@keyframes cle-curblink-pulse {
  0%,
  50% {
    opacity: 1;
  }
  51%,
  100% {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cle-curblink::after {
    animation: none;
    opacity: 1;
  }
}
```

### 07. Neon Sign Flicker

**Type:** Pure CSS
**Description:** On hover the link flickers like a faulty neon sign powering on — irregular opacity stutters via non-uniform steps() keyframes for ~1 second, then settles into a steady glow. Finite, intentional, premium.

**HTML:**
```html
<a href="#" class="cle-neonblink">VACANCY</a>
```

**CSS:**
```css
.cle-neonblink {
  display: inline-block;
  padding: 6px 18px;
  color: #ff6c8a;
  font:
    700 17px/1.2 "Courier New",
    monospace;
  letter-spacing: 0.18em;
  text-decoration: none;
  text-shadow: 0 0 8px rgba(255, 108, 138, 0.4);
  border: 1.5px solid rgba(255, 108, 138, 0.4);
  border-radius: 4px;
  background: #15081a;
  transition:
    color 0.2s,
    border-color 0.2s,
    background 0.3s;
}
.cle-neonblink:hover,
.cle-neonblink:focus-visible {
  color: #ffe1ea;
  border-color: #ff6c8a;
  background: #1f0d24;
  animation: cle-neonblink-flicker 1.1s steps(1, end);
}
@keyframes cle-neonblink-flicker {
  0% {
    opacity: 1;
    text-shadow: none;
  }
  3% {
    opacity: 0.2;
    text-shadow: none;
  }
  6% {
    opacity: 1;
    text-shadow:
      0 0 14px #ff6c8a,
      0 0 4px #fff;
  }
  10% {
    opacity: 0.4;
    text-shadow: none;
  }
  13% {
    opacity: 1;
    text-shadow:
      0 0 14px #ff6c8a,
      0 0 4px #fff;
  }
  18% {
    opacity: 0.1;
    text-shadow: none;
  }
  22% {
    opacity: 1;
    text-shadow:
      0 0 14px #ff6c8a,
      0 0 4px #fff;
  }
  35% {
    opacity: 0.5;
    text-shadow: 0 0 8px #ff6c8a;
  }
  38% {
    opacity: 1;
    text-shadow:
      0 0 18px #ff6c8a,
      0 0 6px #fff;
  }
  55% {
    opacity: 0.6;
    text-shadow: 0 0 6px #ff6c8a;
  }
  58% {
    opacity: 1;
    text-shadow:
      0 0 22px #ff6c8a,
      0 0 8px #fff;
  }
  100% {
    opacity: 1;
    text-shadow:
      0 0 22px #ff6c8a,
      0 0 8px #fff;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cle-neonblink:hover,
  .cle-neonblink:focus-visible {
    animation: none;
    text-shadow:
      0 0 22px #ff6c8a,
      0 0 8px #fff;
  }
}
```

### 08. Heartbeat Pulse

**Type:** Pure CSS
**Description:** A leading dot pulses with a real medical-grade heartbeat rhythm — lub-DUB-pause-lub-DUB-pause via a multi-keyframe @keyframes. The link itself stays static. Reads as live-signal / new content.

**HTML:**
```html
<a href="#" class="cle-heartbeat">
  <span class="cle-heartbeat-dot" aria-hidden="true"></span>
  <span>Live updates</span>
</a>
```

**CSS:**
```css
.cle-heartbeat {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 4px 6px;
  color: #f0eeff;
  font:
    600 15px/1.2 system-ui,
    sans-serif;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition:
    border-color 0.25s,
    color 0.25s;
}
.cle-heartbeat-dot {
  position: relative;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ff3d6e;
  animation: cle-heartbeat-thump 1.6s ease-in-out infinite;
  flex-shrink: 0;
}
.cle-heartbeat-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: inherit;
  animation: cle-heartbeat-ring 1.6s ease-out infinite;
}
.cle-heartbeat:hover,
.cle-heartbeat:focus-visible {
  color: #fff;
  border-bottom-color: rgba(255, 61, 110, 0.5);
}
/* Real heartbeat curve: lub (small bump) → DUB (big bump) → long pause */
@keyframes cle-heartbeat-thump {
  0% {
    transform: scale(1);
  }
  10% {
    transform: scale(1.18);
  }
  20% {
    transform: scale(1);
  }
  30% {
    transform: scale(1.32);
  }
  45% {
    transform: scale(1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes cle-heartbeat-ring {
  0% {
    transform: scale(1);
    opacity: 0;
  }
  30% {
    opacity: 0.55;
  }
  100% {
    transform: scale(3);
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cle-heartbeat-dot,
  .cle-heartbeat-dot::after {
    animation: none;
  }
}
```

### 09. Reveal Sweep

**Type:** Pure CSS
**Description:** A thin gradient line sweeps across the link from left to right on hover, then settles as a permanent underline. Two-stage motion in a single hover.

**HTML:**
```html
<a href="#" class="cle-sweep">Read the article</a>
```

**CSS:**
```css
.cle-sweep {
  position: relative;
  display: inline-block;
  color: #f0eeff;
  font:
    600 16px/1.4 system-ui,
    sans-serif;
  text-decoration: none;
  padding-bottom: 6px;
  overflow: hidden;
}
/* Permanent underline that draws in from the left */
.cle-sweep::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1.5px;
  background: #7c6cff;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}
.cle-sweep:hover::before,
.cle-sweep:focus-visible::before {
  transform: scaleX(1);
}
/* Bright gradient highlight that sweeps across once on hover */
.cle-sweep::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 60%;
  height: 1.5px;
  background: linear-gradient(90deg, transparent, #fff 50%, transparent);
  transform: translateX(-100%);
  opacity: 0;
  transition:
    transform 0.7s cubic-bezier(0.65, 0, 0.35, 1),
    opacity 0.2s;
  pointer-events: none;
}
.cle-sweep:hover::after,
.cle-sweep:focus-visible::after {
  transform: translateX(280%);
  opacity: 1;
}
```

### 10. Letter Push

**Type:** Pure CSS
**Description:** Each letter shifts down 2px on hover with a tiny per-letter stagger via :nth-child — a wave that ripples through the word.

**HTML:**
```html
<a href="#" class="cle-push">
  <span>D</span><span>i</span><span>s</span><span>c</span><span>o</span><span>v</span><span>e</span
  ><span>r</span>
</a>
```

**CSS:**
```css
.cle-push {
  display: inline-flex;
  color: #c4b5fd;
  font:
    700 18px/1.2 system-ui,
    sans-serif;
  text-decoration: none;
  letter-spacing: 0.02em;
  border-bottom: 1.5px solid rgba(124, 108, 255, 0.4);
  padding-bottom: 3px;
  transition: border-color 0.25s;
}
.cle-push:hover {
  border-bottom-color: #7c6cff;
}
.cle-push span {
  display: inline-block;
  transition:
    transform 0.35s cubic-bezier(0.65, 0, 0.35, 1),
    color 0.25s;
}
.cle-push:hover span {
  color: #fff;
  transform: translateY(-3px);
}
.cle-push:hover span:nth-child(1) {
  transition-delay: 0s;
}
.cle-push:hover span:nth-child(2) {
  transition-delay: 0.04s;
}
.cle-push:hover span:nth-child(3) {
  transition-delay: 0.08s;
}
.cle-push:hover span:nth-child(4) {
  transition-delay: 0.12s;
}
.cle-push:hover span:nth-child(5) {
  transition-delay: 0.16s;
}
.cle-push:hover span:nth-child(6) {
  transition-delay: 0.2s;
}
.cle-push:hover span:nth-child(7) {
  transition-delay: 0.24s;
}
.cle-push:hover span:nth-child(8) {
  transition-delay: 0.28s;
}
```

### 11. Marker Highlighter

**Type:** Pure CSS
**Description:** A pale highlight expands from 0% to 100% width behind the text on hover, with a hand-drawn-look SVG fill. Reads as a real marker pen, not a geometric block.

**HTML:**
```html
<p class="cle-marker-wrap">Try our <a href="#" class="cle-marker">brand new editor</a> today.</p>
```

**CSS:**
```css
.cle-marker-wrap {
  margin: 0;
  font:
    500 16px/1.5 system-ui,
    sans-serif;
  color: #d8d6f0;
}
.cle-marker {
  position: relative;
  display: inline-block;
  padding: 1px 4px;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  z-index: 0;
}
.cle-marker::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 28' preserveAspectRatio='none'><path d='M2 14 Q 12 6 25 11 T 50 12 T 75 14 T 98 13 L 98 22 Q 80 26 60 23 T 30 22 T 5 22 Z' fill='%23ffd479' opacity='0.55'/></svg>");
  background-repeat: no-repeat;
  background-size: 0% 100%;
  background-position: left center;
  transition: background-size 0.5s cubic-bezier(0.65, 0, 0.35, 1);
  z-index: -1;
}
.cle-marker:hover::before,
.cle-marker:focus-visible::before {
  background-size: 100% 100%;
}
```

### 12. Background Slide

**Type:** Pure CSS
**Description:** A solid colour slides up from below the baseline, covering the link as the text colour inverts via mix-blend-mode: difference. Reads like a film cut.

**HTML:**
```html
<a href="#" class="cle-slide"><span>WATCH FILM</span></a>
```

**CSS:**
```css
.cle-slide {
  position: relative;
  display: inline-block;
  padding: 4px 10px;
  color: #f0eeff;
  font:
    700 13px/1.2 ui-monospace,
    monospace;
  letter-spacing: 0.18em;
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
}
.cle-slide span {
  position: relative;
  mix-blend-mode: difference;
  color: #fff;
  z-index: 1;
}
.cle-slide::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0;
  background: #fff;
  transition: height 0.4s cubic-bezier(0.65, 0, 0.35, 1);
  z-index: 0;
}
.cle-slide:hover::before,
.cle-slide:focus-visible::before {
  height: 100%;
}
```

### 13. Crosshair Brackets

**Type:** Pure CSS
**Description:** Mono [ and ] brackets appear on either side of the link on hover, drawing in via a tiny scale-overshoot. Terminal/hacker aesthetic — perfect for dev portfolios.

**HTML:**
```html
<a href="#" class="cle-bracket">execute()</a>
```

**CSS:**
```css
.cle-bracket {
  position: relative;
  display: inline-block;
  padding: 0 16px;
  color: #00e5ff;
  font:
    700 16px/1.2 ui-monospace,
    monospace;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: text-shadow 0.2s;
}
.cle-bracket::before,
.cle-bracket::after {
  position: absolute;
  top: 50%;
  font: inherit;
  color: #00e5ff;
  opacity: 0;
  transform: translateY(-50%) scale(0.4);
  transition:
    opacity 0.25s ease,
    transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.cle-bracket::before {
  content: "[";
  left: 0;
}
.cle-bracket::after {
  content: "]";
  right: 0;
}
.cle-bracket:hover {
  text-shadow: 0 0 12px rgba(0, 229, 255, 0.55);
}
.cle-bracket:hover::before,
.cle-bracket:hover::after,
.cle-bracket:focus-visible::before,
.cle-bracket:focus-visible::after {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}
```

### 14. Glitch Split

**Type:** Pure CSS
**Description:** RGB-channel split shudders across the text on hover (cyan + magenta offsets via text-shadow), reading as video corruption. Honours prefers-reduced-motion.

**HTML:**
```html
<a href="#" class="cle-glitch" data-text="System.exit(0)">System.exit(0)</a>
```

**CSS:**
```css
.cle-glitch {
  position: relative;
  display: inline-block;
  color: #f0eeff;
  font:
    700 16px/1.2 ui-monospace,
    monospace;
  text-decoration: none;
  letter-spacing: 0.02em;
}
.cle-glitch:hover,
.cle-glitch:focus-visible {
  animation: cle-glitch-shake 0.35s steps(2) infinite;
  text-shadow:
    2px 0 #ff3d6e,
    -2px 0 #00e5ff,
    0 0 12px rgba(255, 255, 255, 0.2);
}
@keyframes cle-glitch-shake {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(-1px, 1px);
  }
  50% {
    transform: translate(1px, -1px);
  }
  75% {
    transform: translate(-1px, -1px);
  }
  100% {
    transform: translate(1px, 1px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .cle-glitch:hover,
  .cle-glitch:focus-visible {
    animation: none;
  }
}
```

### 15. Ink Bleed Underline

**Type:** Pure CSS
**Description:** Hand-drawn-look SVG underline that strokes in from left to right on hover via stroke-dasharray. Reads as ink bleeding into paper.

**HTML:**
```html
<a href="#" class="cle-ink">
  <span>Subscribe</span>
  <svg class="cle-ink-line" viewBox="0 0 120 8" preserveAspectRatio="none" aria-hidden="true">
    <path
      d="M2 5 Q 30 1 60 4 T 118 5"
      stroke="currentColor"
      stroke-width="2.5"
      fill="none"
      stroke-linecap="round"
    />
  </svg>
</a>
```

**CSS:**
```css
.cle-ink {
  position: relative;
  display: inline-block;
  padding-bottom: 8px;
  color: #ffd479;
  font:
    600 16px/1.2 Georgia,
    "Times New Roman",
    serif;
  text-decoration: none;
}
.cle-ink-line {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 8px;
  color: #ffd479;
  pointer-events: none;
}
.cle-ink-line path {
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  transition: stroke-dashoffset 0.7s cubic-bezier(0.65, 0, 0.35, 1);
}
.cle-ink:hover .cle-ink-line path,
.cle-ink:focus-visible .cle-ink-line path {
  stroke-dashoffset: 0;
}
```

### 16. Magnetic Pull

**Type:** Pure CSS
**Description:** Link text drifts horizontally as if magnetically pulled, while a thin underline draws in beneath. A small tactile touch that signals interactivity.

**HTML:**
```html
<a href="#" class="cle-mag">Open dashboard →</a>
```

**CSS:**
```css
.cle-mag {
  position: relative;
  display: inline-block;
  padding-bottom: 4px;
  color: #c4b5fd;
  font:
    600 15px/1.2 system-ui,
    sans-serif;
  text-decoration: none;
  transition:
    transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
    color 0.25s;
}
.cle-mag::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1.5px;
  background: #a78bfa;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}
.cle-mag:hover,
.cle-mag:focus-visible {
  transform: translateX(6px);
  color: #fff;
}
.cle-mag:hover::after,
.cle-mag:focus-visible::after {
  transform: scaleX(1);
}
```

### 17. Caret Companion

**Type:** Pure CSS
**Description:** A blinking terminal cursor ▌ appears at the end of the link on hover, with a thin underline drawing in. Mono font — perfect for CLIs and dev portfolios.

**HTML:**
```html
<a href="#" class="cle-caret">$ run --watch</a>
```

**CSS:**
```css
.cle-caret {
  position: relative;
  display: inline-block;
  padding: 2px 4px 4px;
  color: #2eb88a;
  font:
    600 14px/1.4 ui-monospace,
    monospace;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease 0.05s;
}
.cle-caret::after {
  content: "";
  display: inline-block;
  width: 7px;
  height: 1em;
  margin-left: 4px;
  vertical-align: text-bottom;
  background: #2eb88a;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.cle-caret:hover,
.cle-caret:focus-visible {
  border-bottom-color: rgba(46, 184, 138, 0.5);
}
.cle-caret:hover::after,
.cle-caret:focus-visible::after {
  opacity: 1;
  animation: cle-caret-blink 1s steps(1) infinite;
}
@keyframes cle-caret-blink {
  0%,
  50% {
    opacity: 1;
  }
  51%,
  100% {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cle-caret:hover::after,
  .cle-caret:focus-visible::after {
    animation: none;
    opacity: 1;
  }
}
```

### 18. Brutalist Block

**Type:** Pure CSS
**Description:** Link fills with hot-pink background and gains an offset shadow on hover; click presses it down into the shadow. Brutalist design system fixture.

**HTML:**
```html
<a href="#" class="cle-brut">DOWNLOAD .ZIP</a>
```

**CSS:**
```css
.cle-brut {
  display: inline-block;
  padding: 6px 12px;
  background: transparent;
  color: #fff;
  font:
    700 13px/1.2 "Courier New",
    monospace;
  letter-spacing: 0.14em;
  text-decoration: none;
  border: 2px solid #fff;
  transition:
    background 0.15s,
    color 0.15s,
    transform 0.12s,
    box-shadow 0.12s;
}
.cle-brut:hover,
.cle-brut:focus-visible {
  background: #ff3d6e;
  color: #0a0a0a;
  border-color: #0a0a0a;
  box-shadow: 5px 5px 0 #fff;
  transform: translate(-2px, -2px);
}
.cle-brut:active {
  transform: translate(3px, 3px);
  box-shadow: 0 0 0 #fff;
}
```

### 19. 3D Flip Reveal

**Type:** Pure CSS
**Description:** Link face flips 180° on the Y axis on hover, revealing a different call-to-action on the back. Uses transform-style: preserve-3d and backface-visibility.

**HTML:**
```html
<a href="#" class="cle-flip">
  <span class="cle-flip-inner">
    <span class="cle-flip-front">Get Started</span>
    <span class="cle-flip-back">Learn More →</span>
  </span>
  <span class="cle-flip-ghost" aria-hidden="true">Learn More →</span>
</a>
```

**CSS:**
```css
.cle-flip {
  position: relative;
  display: inline-block;
  height: 40px;
  padding: 0 22px;
  perspective: 800px;
  text-decoration: none;
  font:
    700 13px/40px ui-monospace,
    monospace;
  letter-spacing: 0.12em;
}
/* Invisible ghost claims the wider of the two faces so the chip width is stable */
.cle-flip-ghost {
  visibility: hidden;
  white-space: nowrap;
}
.cle-flip-inner {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transition: transform 0.55s cubic-bezier(0.65, 0, 0.35, 1);
}
.cle-flip-front,
.cle-flip-back {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  white-space: nowrap;
}
.cle-flip-front {
  background: #7c6cff;
  color: #fff;
}
.cle-flip-back {
  background: #2eb88a;
  color: #0a0f0c;
  transform: rotateY(180deg);
}
.cle-flip:hover .cle-flip-inner,
.cle-flip:focus-visible .cle-flip-inner {
  transform: rotateY(180deg);
}
```

### 20. Type-On Reveal

**Type:** Pure CSS
**Description:** Link text appears empty until hover; on hover it types itself character-by-character via a steps() animation with a blinking caret. The CTA itself is the animation.

**HTML:**
```html
<a href="#" class="cle-type">
  <span class="cle-type-text">$ deploy --prod</span>
</a>
```

**CSS:**
```css
.cle-type {
  position: relative;
  display: inline-block;
  padding: 6px 14px;
  background: #0a0a18;
  border: 1px solid rgba(0, 229, 255, 0.3);
  border-radius: 4px;
  text-decoration: none;
  min-width: 160px;
}
.cle-type-text {
  display: inline-block;
  font:
    600 13px/1.4 ui-monospace,
    monospace;
  color: #00e5ff;
  white-space: nowrap;
  overflow: hidden;
  width: 0;
  border-right: 2px solid transparent;
  vertical-align: bottom;
}
.cle-type:hover .cle-type-text,
.cle-type:focus-visible .cle-type-text {
  width: 14ch;
  border-right-color: #00e5ff;
  animation:
    cle-type-in 1.2s steps(14, end) forwards,
    cle-type-blink 0.7s steps(1) 1.2s infinite;
}
@keyframes cle-type-in {
  from {
    width: 0;
  }
  to {
    width: 14ch;
  }
}
@keyframes cle-type-blink {
  0%,
  50% {
    border-right-color: #00e5ff;
  }
  51%,
  100% {
    border-right-color: transparent;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cle-type:hover .cle-type-text,
  .cle-type:focus-visible .cle-type-text {
    width: 14ch;
    animation: none;
    border-right-color: #00e5ff;
  }
}
```

---
## 20 CSS Loaders

URL: https://codefronts.com/motion/css-loader-designs/
Description: 20 hand-coded CSS loaders covering every production loading-indicator pattern developers reach for in 2026 — spinning ring loader (the canonical Material Design pattern), dot chase loader, skeleton screen loader (Facebook/LinkedIn/YouTube content-shimmer pattern), progress bar loader with shimmer, bouncing balls loader, DNA double-helix loader, glitch flicker loader, heartbeat pulse loader, circular progress with percentage, liquid fill loader, neon arc spinner, cube flip 3D loader, audio wave bars loader, morphing square loader, orbit planet loader, typing dots indicator (chat/messaging pattern), staircase step loader, infinity loop loader, gradient conic spinner (Instagram-stories pattern), and particle burst loader. All <strong>100% pure CSS</strong> — zero JavaScript, zero libraries (no react-loading-skeleton, no react-spinners, no SpinKit copy, no loading.io snippet). Every loader uses CSS <code>@keyframes</code> animation on <code>transform</code> + <code>opacity</code> only (GPU-accelerated, INP-safe — no layout thrash). Every demo includes proper <code>role="status"</code> + <code>aria-live="polite"</code> markup so screen readers announce "loading" state correctly. Every demo respects <code>prefers-reduced-motion</code>, uses scoped <code>.ld-NN__*</code> class names so multiple loaders coexist on the same page without style bleed, MIT-licensed. Drop into React, Vue, Astro, Svelte, Rails ERB, plain HTML, WordPress — zero framework dependencies.
Demo count: 20

### 01. CSS Spinning Ring Loader

**Type:** Pure CSS
**Description:** Six ring-based CSS spinners — classic, double, triple nested, dashed, gradient conic, and pulse ring — demonstrating the full spectrum of border and conic-gradient spin techniques.

**HTML:**
```html
<div class="ld-01">
  <div class="ld-01__stage">
    <div class="ld-01__cell"><div class="ld-01__ring"></div><span class="ld-01__label">Classic Ring</span></div>
    <div class="ld-01__cell"><div class="ld-01__double"></div><span class="ld-01__label">Double Ring</span></div>
    <div class="ld-01__cell"><div class="ld-01__triple"><span></span><span></span><span></span></div><span class="ld-01__label">Triple Ring</span></div>
    <div class="ld-01__cell"><div class="ld-01__dashed"></div><span class="ld-01__label">Dashed Ring</span></div>
    <div class="ld-01__cell"><div class="ld-01__gradient"></div><span class="ld-01__label">Gradient Ring</span></div>
    <div class="ld-01__cell"><div class="ld-01__pulse-ring"></div><span class="ld-01__label">Pulse Ring</span></div>
  </div>
```

**CSS:**
```css
.ld-01,.ld-01 *,.ld-01 *::before,.ld-01 *::after{box-sizing:border-box;margin:0;padding:0}
.ld-01{
  --bg:#0a0a0f;--accent:#6c63ff;--accent2:#ff6584;--accent3:#43e97b;
  background:var(--bg);display:flex;align-items:center;justify-content:center;
  min-height:100vh;font-family:'Segoe UI',sans-serif;
}
.ld-01__stage{display:flex;gap:48px;flex-wrap:wrap;justify-content:center;padding:40px}
.ld-01__cell{display:flex;flex-direction:column;align-items:center;gap:16px}
.ld-01__label{color:rgba(255,255,255,.5);font-size:11px;letter-spacing:1.5px;text-transform:uppercase}

/* Classic Ring */
.ld-01__ring{width:56px;height:56px;border:4px solid rgba(108,99,255,.2);border-top-color:var(--accent);border-radius:50%;animation:ld-01-spin 1s linear infinite}
@keyframes ld-01-spin{to{transform:rotate(360deg)}}

/* Double Ring */
.ld-01__double{width:56px;height:56px;border:4px solid transparent;border-top-color:var(--accent);border-bottom-color:var(--accent2);border-radius:50%;animation:ld-01-spin 1.2s linear infinite}

/* Triple Ring */
.ld-01__triple{width:60px;height:60px;position:relative}
.ld-01__triple span{position:absolute;border-radius:50%;border:3px solid transparent;animation:ld-01-spin linear infinite}
.ld-01__triple span:nth-child(1){inset:0;border-top-color:var(--accent);animation-duration:.9s}
.ld-01__triple span:nth-child(2){inset:8px;border-top-color:var(--accent2);animation-duration:1.3s;animation-direction:reverse}
.ld-01__triple span:nth-child(3){inset:16px;border-top-color:var(--accent3);animation-duration:1.7s}

/* Dashed Ring */
.ld-01__dashed{width:56px;height:56px;border:4px dashed var(--accent);border-radius:50%;animation:ld-01-spin 2s linear infinite;opacity:.8}

/* Gradient Ring */
.ld-01__gradient{width:56px;height:56px;border-radius:50%;background:conic-gradient(var(--accent),var(--accent2),var(--accent3),var(--accent));animation:ld-01-spin 1s linear infinite;-webkit-mask:radial-gradient(farthest-side,#0000 calc(100% - 6px),#000 0)}

/* Pulsing Ring */
.ld-01__pulse-ring{width:56px;height:56px;border:4px solid var(--accent);border-radius:50%;animation:ld-01-pulse-ring 1.5s ease-out infinite}
@keyframes ld-01-pulse-ring{0%{transform:scale(.8);opacity:1}100%{transform:scale(1.5);opacity:0}}

@media(prefers-reduced-motion:reduce){
  .ld-01__ring,.ld-01__double,.ld-01__triple span,.ld-01__dashed,.ld-01__gradient,.ld-01__pulse-ring{animation:none}
}
```

### 02. CSS Dot Chase Loader

**Type:** Pure CSS
**Description:** Four dot-based CSS loaders — a staggered bounce chase row, a spinning orbit ring, a hexagonal trail pulse, and animated wave bars — all driven by staggered animation-delay.

**HTML:**
```html
<div class="ld-02">
  <div class="ld-02__stage">
    <div class="ld-02__cell"><div class="ld-02__chase"><span></span><span></span><span></span><span></span><span></span></div><span class="ld-02__label">Dot Chase</span></div>
    <div class="ld-02__cell"><div class="ld-02__orbit"><span></span><span></span><span></span><span></span></div><span class="ld-02__label">Orbit Dots</span></div>
    <div class="ld-02__cell"><div class="ld-02__trail"><span></span><span></span><span></span><span></span><span></span><span></span></div><span class="ld-02__label">Trailing Dots</span></div>
    <div class="ld-02__cell"><div class="ld-02__flock"><span></span><span></span><span></span><span></span><span></span></div><span class="ld-02__label">Wave Bars</span></div>
  </div>
```

**CSS:**
```css
.ld-02,.ld-02 *,.ld-02 *::before,.ld-02 *::after{box-sizing:border-box;margin:0;padding:0}
.ld-02{
  --bg:#0d1117;--c1:#f7c948;--c2:#f27121;--c3:#e94057;
  background:var(--bg);display:flex;align-items:center;justify-content:center;min-height:100vh;font-family:'Segoe UI',sans-serif;
}
.ld-02__stage{display:flex;gap:56px;flex-wrap:wrap;justify-content:center;padding:40px}
.ld-02__cell{display:flex;flex-direction:column;align-items:center;gap:20px}
.ld-02__label{color:rgba(255,255,255,.4);font-size:11px;letter-spacing:1.5px;text-transform:uppercase}

/* Dot Chase */
.ld-02__chase{display:flex;gap:8px;align-items:center}
.ld-02__chase span{width:12px;height:12px;border-radius:50%;background:var(--c1);animation:ld-02-chase 1.2s ease-in-out infinite}
.ld-02__chase span:nth-child(1){animation-delay:0s}
.ld-02__chase span:nth-child(2){animation-delay:.15s;background:var(--c2)}
.ld-02__chase span:nth-child(3){animation-delay:.3s;background:var(--c3)}
.ld-02__chase span:nth-child(4){animation-delay:.45s;background:var(--c1)}
.ld-02__chase span:nth-child(5){animation-delay:.6s;background:var(--c2)}
@keyframes ld-02-chase{0%,80%,100%{transform:scale(.6);opacity:.4}40%{transform:scale(1.1);opacity:1}}

/* Orbit dots */
.ld-02__orbit{width:60px;height:60px;position:relative;animation:ld-02-spin 1.5s linear infinite}
.ld-02__orbit span{position:absolute;width:10px;height:10px;border-radius:50%;background:var(--c1)}
.ld-02__orbit span:nth-child(1){top:0;left:50%;transform:translateX(-50%)}
.ld-02__orbit span:nth-child(2){top:50%;right:0;transform:translateY(-50%);background:var(--c2)}
.ld-02__orbit span:nth-child(3){bottom:0;left:50%;transform:translateX(-50%);background:var(--c3)}
.ld-02__orbit span:nth-child(4){top:50%;left:0;transform:translateY(-50%);background:var(--c1)}
@keyframes ld-02-spin{to{transform:rotate(360deg)}}

/* Trailing dots */
.ld-02__trail{width:60px;height:60px;position:relative}
.ld-02__trail span{position:absolute;width:8px;height:8px;border-radius:50%;animation:ld-02-trail 1.2s ease-in-out infinite}
.ld-02__trail span:nth-child(1){background:var(--c1);animation-delay:0s;top:4px;left:26px}
.ld-02__trail span:nth-child(2){background:var(--c2);animation-delay:.1s;top:10px;right:4px}
.ld-02__trail span:nth-child(3){background:var(--c3);animation-delay:.2s;bottom:10px;right:4px}
.ld-02__trail span:nth-child(4){background:var(--c1);animation-delay:.3s;bottom:4px;left:26px}
.ld-02__trail span:nth-child(5){background:var(--c2);animation-delay:.4s;bottom:10px;left:4px}
.ld-02__trail span:nth-child(6){background:var(--c3);animation-delay:.5s;top:10px;left:4px}
@keyframes ld-02-trail{0%,100%{transform:scale(.4);opacity:.3}50%{transform:scale(1);opacity:1}}

/* Flocking dots */
.ld-02__flock{display:flex;gap:6px;align-items:flex-end;height:40px}
.ld-02__flock span{width:10px;border-radius:5px;background:var(--c2);animation:ld-02-flock 1s ease-in-out infinite}
.ld-02__flock span:nth-child(1){height:10px;animation-delay:0s}
.ld-02__flock span:nth-child(2){height:20px;animation-delay:.1s;background:var(--c3)}
.ld-02__flock span:nth-child(3){height:30px;animation-delay:.2s;background:var(--c1)}
.ld-02__flock span:nth-child(4){height:20px;animation-delay:.3s;background:var(--c3)}
.ld-02__flock span:nth-child(5){height:10px;animation-delay:.4s}
@keyframes ld-02-flock{0%,100%{transform:scaleY(.5);opacity:.5}50%{transform:scaleY(1.3);opacity:1}}

@media(prefers-reduced-motion:reduce){
  .ld-02__chase span,.ld-02__orbit,.ld-02__trail span,.ld-02__flock span{animation:none}
}
```

### 03. CSS Skeleton Screen Loader

**Type:** Pure CSS
**Description:** Three shimmer-based CSS skeleton screens — a profile card, an article card, and a dashboard widget — using a single shared shimmer keyframe scoped per wrapper.

**HTML:**
```html
<div class="ld-03">
  <div class="ld-03__stage">
    <!-- Profile card -->
    <div class="ld-03__card">
      <div class="ld-03__meta">
        <div class="ld-03__skel ld-03__avatar"></div>
        <div class="ld-03__lines">
          <div class="ld-03__skel ld-03__line"></div>
          <div class="ld-03__skel ld-03__line ld-03__line--short"></div>
        </div>
```

**CSS:**
```css
.ld-03,.ld-03 *,.ld-03 *::before,.ld-03 *::after{box-sizing:border-box;margin:0;padding:0}
.ld-03{
  --bg:#111827;--card:#1f2937;--shine:rgba(255,255,255,.06);--line:#374151;
  background:var(--bg);display:flex;align-items:center;justify-content:center;min-height:100vh;font-family:'Segoe UI',sans-serif;padding:40px;
}
.ld-03__stage{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;max-width:900px;width:100%}

.ld-03__card{background:var(--card);border-radius:16px;padding:20px;overflow:hidden}
.ld-03__skel{background:var(--line);border-radius:8px;position:relative;overflow:hidden}
.ld-03__skel::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent 0%,var(--shine) 50%,transparent 100%);animation:ld-03-shimmer 1.5s ease-in-out infinite;transform:translateX(-100%)}
@keyframes ld-03-shimmer{to{transform:translateX(100%)}}

/* Profile card skeleton */
.ld-03__avatar{width:56px;height:56px;border-radius:50%}
.ld-03__meta{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.ld-03__lines{flex:1;display:flex;flex-direction:column;gap:8px}
.ld-03__line{height:10px}
.ld-03__line--short{width:60%}
.ld-03__image-skel{height:140px;border-radius:10px;margin-bottom:16px}
.ld-03__text-block{display:flex;flex-direction:column;gap:8px}

/* Article skeleton */
.ld-03__article-img{height:160px;border-radius:10px;margin-bottom:16px}
.ld-03__tag{height:20px;width:60px;border-radius:20px;margin-bottom:12px}
.ld-03__title-line{height:14px;margin-bottom:8px}
.ld-03__title-line--half{width:55%}
.ld-03__para-line{height:10px;margin-bottom:6px}
.ld-03__para-line--short{width:70%}

/* Dashboard skeleton */
.ld-03__stat-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}
.ld-03__stat{background:var(--bg);border-radius:10px;padding:14px}
.ld-03__stat-num{height:28px;width:50%;margin-bottom:8px;border-radius:6px}
.ld-03__stat-lbl{height:10px;width:80%;border-radius:4px}
.ld-03__chart{height:100px;border-radius:10px}

@media(prefers-reduced-motion:reduce){.ld-03__skel::after{animation:none}}
```

### 04. CSS Progress Bar Loader

**Type:** Pure CSS
**Description:** Five animated CSS progress bars — fill sweep, animated stripes, gradient shimmer, indeterminate bounce, and segmented pulse — covering the most common loading-state UI patterns.

**HTML:**
```html
<div class="ld-04">
  <div class="ld-04__stage">
    <div class="ld-04__item">
      <div class="ld-04__label"><span>Uploading file…</span><span>78%</span></div>
      <div class="ld-04__track"><div class="ld-04__fill"></div></div>
```

**CSS:**
```css
.ld-04,.ld-04 *,.ld-04 *::before,.ld-04 *::after{box-sizing:border-box;margin:0;padding:0}
.ld-04{
  --bg:#0c0c1d;--c1:#a78bfa;--c2:#06b6d4;--c3:#f472b6;--c4:#34d399;
  background:var(--bg);display:flex;align-items:center;justify-content:center;min-height:100vh;font-family:'Segoe UI',sans-serif;padding:40px;
}
.ld-04__stage{display:flex;flex-direction:column;gap:36px;width:100%;max-width:480px}
.ld-04__item{display:flex;flex-direction:column;gap:10px}
.ld-04__label{display:flex;justify-content:space-between;color:rgba(255,255,255,.6);font-size:12px;letter-spacing:.5px}
.ld-04__track{height:8px;background:rgba(255,255,255,.08);border-radius:99px;overflow:hidden;position:relative}

/* Standard fill */
.ld-04__fill{height:100%;border-radius:99px;background:var(--c1);animation:ld-04-fill1 2.5s ease-in-out infinite}
@keyframes ld-04-fill1{0%{width:0%}60%{width:78%}100%{width:78%}}

/* Striped animated */
.ld-04__striped{height:100%;border-radius:99px;background:repeating-linear-gradient(45deg,var(--c2) 0,var(--c2) 10px,rgba(255,255,255,.15) 10px,rgba(255,255,255,.15) 20px);background-size:200% 100%;width:60%;animation:ld-04-stripes 1s linear infinite}
@keyframes ld-04-stripes{to{background-position:-200% 0}}

/* Gradient shimmer */
.ld-04__gfill{height:100%;border-radius:99px;width:55%;background:linear-gradient(90deg,var(--c3),var(--c1),var(--c3));background-size:200% 100%;animation:ld-04-glow 1.5s ease-in-out infinite}
@keyframes ld-04-glow{0%{background-position:100% 0}100%{background-position:-100% 0}}

/* Indeterminate bounce */
.ld-04__bounce{height:100%;border-radius:99px;background:var(--c4);width:40%;animation:ld-04-bounce 1.8s ease-in-out infinite}
@keyframes ld-04-bounce{0%{transform:translateX(-100%)}50%{transform:translateX(150%)}100%{transform:translateX(-100%)}}

/* Segmented */
.ld-04__seg-track{display:flex;gap:4px}
.ld-04__seg{flex:1;height:8px;border-radius:4px;background:rgba(255,255,255,.08);animation:ld-04-seg 2s ease-in-out infinite}
.ld-04__seg:nth-child(1){animation-delay:0s}
.ld-04__seg:nth-child(2){animation-delay:.2s}
.ld-04__seg:nth-child(3){animation-delay:.4s}
.ld-04__seg:nth-child(4){animation-delay:.6s}
.ld-04__seg:nth-child(5){animation-delay:.8s}
@keyframes ld-04-seg{0%,100%{background:rgba(255,255,255,.08)}50%{background:var(--c1)}}

@media(prefers-reduced-motion:reduce){
  .ld-04__fill,.ld-04__striped,.ld-04__gfill,.ld-04__bounce,.ld-04__seg{animation:none;width:60%}
}
```

### 05. CSS Bouncing Balls Loader

**Type:** Pure CSS
**Description:** Four kinetic ball-physics loaders — a staggered bounce row, elastic scale pulses, rolling balls with rotation, and a squash-and-stretch ball with shadow — each using pure CSS animation.

**HTML:**
```html
<div class="ld-05">
  <div class="ld-05__stage">
    <div class="ld-05__cell"><div class="ld-05__simple"><span></span><span></span><span></span><span></span></div><span class="ld-05__label">Bounce Row</span></div>
    <div class="ld-05__cell"><div class="ld-05__elastic"><span></span><span></span><span></span></div><span class="ld-05__label">Elastic Pulse</span></div>
    <div class="ld-05__cell"><div class="ld-05__roll"><span></span><span></span><span></span></div><span class="ld-05__label">Rolling Balls</span></div>
    <div class="ld-05__cell"><div class="ld-05__squash"><div class="ld-05__squash-ball"></div><div class="ld-05__squash-shadow"></div></div>
```

**CSS:**
```css
.ld-05,.ld-05 *,.ld-05 *::before,.ld-05 *::after{box-sizing:border-box;margin:0;padding:0}
.ld-05{
  --bg:#1a0a2e;--c1:#ff6b6b;--c2:#ffd93d;--c3:#6bcb77;--c4:#4d96ff;--c5:#c77dff;
  background:var(--bg);display:flex;align-items:center;justify-content:center;min-height:100vh;font-family:'Segoe UI',sans-serif;
}
.ld-05__stage{display:flex;gap:64px;flex-wrap:wrap;justify-content:center;padding:40px}
.ld-05__cell{display:flex;flex-direction:column;align-items:center;gap:20px}
.ld-05__label{color:rgba(255,255,255,.4);font-size:11px;letter-spacing:1.5px;text-transform:uppercase}

/* Simple bounce */
.ld-05__simple{display:flex;gap:8px;align-items:flex-end;height:50px}
.ld-05__simple span{width:14px;height:14px;border-radius:50%;background:var(--c1);animation:ld-05-simple-bounce 0.8s ease-in-out infinite alternate}
.ld-05__simple span:nth-child(1){animation-delay:0s}
.ld-05__simple span:nth-child(2){animation-delay:.15s;background:var(--c2)}
.ld-05__simple span:nth-child(3){animation-delay:.3s;background:var(--c3)}
.ld-05__simple span:nth-child(4){animation-delay:.45s;background:var(--c4)}
@keyframes ld-05-simple-bounce{0%{transform:translateY(0) scaleX(1)}100%{transform:translateY(-30px) scaleX(.85)}}

/* Elastic */
.ld-05__elastic{display:flex;gap:10px;align-items:center;height:50px}
.ld-05__elastic span{width:14px;height:14px;border-radius:50%;background:var(--c4);animation:ld-05-elastic 1.2s cubic-bezier(.68,-.55,.27,1.55) infinite}
.ld-05__elastic span:nth-child(1){animation-delay:0s}
.ld-05__elastic span:nth-child(2){animation-delay:.15s;background:var(--c5)}
.ld-05__elastic span:nth-child(3){animation-delay:.3s;background:var(--c1)}
@keyframes ld-05-elastic{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.6);opacity:.5}}

/* Rolling */
.ld-05__roll{width:100px;height:30px;position:relative;overflow:hidden}
.ld-05__roll span{position:absolute;width:16px;height:16px;border-radius:50%;top:7px;background:var(--c2);animation:ld-05-roll 1.5s linear infinite}
.ld-05__roll span:nth-child(1){animation-delay:0s}
.ld-05__roll span:nth-child(2){animation-delay:.5s;background:var(--c3)}
.ld-05__roll span:nth-child(3){animation-delay:1s;background:var(--c5)}
@keyframes ld-05-roll{0%{left:-16px;transform:rotate(0)}100%{left:100%;transform:rotate(720deg)}}

/* Shadow squash */
.ld-05__squash{display:flex;flex-direction:column;align-items:center;gap:4px;height:60px;justify-content:flex-end}
.ld-05__squash-ball{width:20px;height:20px;border-radius:50%;background:var(--c1);animation:ld-05-squash-ball 0.8s ease-in-out infinite alternate}
.ld-05__squash-shadow{width:20px;height:6px;border-radius:50%;background:rgba(255,107,107,.3);animation:ld-05-squash-shadow 0.8s ease-in-out infinite alternate}
@keyframes ld-05-squash-ball{0%{transform:translateY(0) scaleY(1)}100%{transform:translateY(-28px) scaleY(.9)}}
@keyframes ld-05-squash-shadow{0%{transform:scaleX(1);opacity:.4}100%{transform:scaleX(.5);opacity:.1}}

@media(prefers-reduced-motion:reduce){
  .ld-05__simple span,.ld-05__elastic span,.ld-05__roll span,.ld-05__squash-ball,.ld-05__squash-shadow{animation:none}
}
```

### 06. CSS DNA Helix Loader

**Type:** Pure CSS
**Description:** Three organic helix and spiral CSS loaders — a pulsing DNA ladder with rungs, a glowing helix ring stack, and a spiralling orbit chain — creating bio-tech and data-processing aesthetics.

**HTML:**
```html
<div class="ld-06">
  <div class="ld-06__stage">
    <div class="ld-06__cell">
      <div class="ld-06__dna">
        <div class="ld-06__rung"><span></span><span></span><span></span></div>
        <div class="ld-06__rung"><span></span><span></span><span></span></div>
        <div class="ld-06__rung"><span></span><span></span><span></span></div>
        <div class="ld-06__rung"><span></span><span></span><span></span></div>
        <div class="ld-06__rung"><span></span><span></span><span></span></div>
        <div class="ld-06__rung"><span></span><span></span><span></span></div>
        <div class="ld-06__rung"><span></span><span></span><span></span></div>
        <div class="ld-06__rung"><span></span><span></span><span></span></div>
      </div>
```

**CSS:**
```css
.ld-06,.ld-06 *,.ld-06 *::before,.ld-06 *::after{box-sizing:border-box;margin:0;padding:0}
.ld-06{
  --bg:#020c1b;--c1:#00d2ff;--c2:#ff6b9d;--c3:#a8ff78;
  background:var(--bg);display:flex;align-items:center;justify-content:center;min-height:100vh;font-family:'Segoe UI',sans-serif;
}
.ld-06__stage{display:flex;gap:80px;flex-wrap:wrap;justify-content:center;padding:40px;align-items:center}
.ld-06__cell{display:flex;flex-direction:column;align-items:center;gap:20px}
.ld-06__label{color:rgba(255,255,255,.4);font-size:11px;letter-spacing:1.5px;text-transform:uppercase}

/* DNA Helix */
.ld-06__dna{display:flex;flex-direction:column;gap:3px;align-items:center}
.ld-06__rung{display:flex;gap:4px;align-items:center}
.ld-06__rung span{width:10px;height:10px;border-radius:50%}
.ld-06__rung span:nth-child(1){background:var(--c1)}
.ld-06__rung span:nth-child(2){background:rgba(255,255,255,.1);flex:1;height:2px;border-radius:1px}
.ld-06__rung span:nth-child(3){background:var(--c2)}

.ld-06__rung:nth-child(1){animation:ld-06-dna 1.2s ease-in-out infinite;animation-delay:0s}
.ld-06__rung:nth-child(2){animation:ld-06-dna 1.2s ease-in-out infinite;animation-delay:.1s}
.ld-06__rung:nth-child(3){animation:ld-06-dna 1.2s ease-in-out infinite;animation-delay:.2s}
.ld-06__rung:nth-child(4){animation:ld-06-dna 1.2s ease-in-out infinite;animation-delay:.3s}
.ld-06__rung:nth-child(5){animation:ld-06-dna 1.2s ease-in-out infinite;animation-delay:.4s}
.ld-06__rung:nth-child(6){animation:ld-06-dna 1.2s ease-in-out infinite;animation-delay:.5s}
.ld-06__rung:nth-child(7){animation:ld-06-dna 1.2s ease-in-out infinite;animation-delay:.6s}
.ld-06__rung:nth-child(8){animation:ld-06-dna 1.2s ease-in-out infinite;animation-delay:.7s}
@keyframes ld-06-dna{0%,100%{transform:scaleX(1);opacity:.6}50%{transform:scaleX(.3);opacity:1}}

/* Helix ring stack */
.ld-06__helix{width:50px;height:80px;position:relative}
.ld-06__helix span{position:absolute;left:50%;border-radius:50%;transform:translateX(-50%);animation:ld-06-helix 1.5s ease-in-out infinite}
.ld-06__helix span:nth-child(1){width:40px;height:10px;background:var(--c1);top:0;animation-delay:0s}
.ld-06__helix span:nth-child(2){width:30px;height:9px;background:var(--c2);top:12px;animation-delay:.1s}
.ld-06__helix span:nth-child(3){width:16px;height:8px;background:var(--c1);top:23px;animation-delay:.2s}
.ld-06__helix span:nth-child(4){width:8px;height:8px;background:var(--c3);top:34px;animation-delay:.3s}
.ld-06__helix span:nth-child(5){width:16px;height:8px;background:var(--c2);top:45px;animation-delay:.4s}
.ld-06__helix span:nth-child(6){width:30px;height:9px;background:var(--c1);top:56px;animation-delay:.5s}
.ld-06__helix span:nth-child(7){width:40px;height:10px;background:var(--c2);top:68px;animation-delay:.6s}
@keyframes ld-06-helix{0%,100%{opacity:.3}50%{opacity:1;box-shadow:0 0 12px currentColor}}

/* Spiral */
.ld-06__spiral{width:60px;height:60px;position:relative}
.ld-06__spiral span{position:absolute;width:8px;height:8px;border-radius:50%;animation:ld-06-spiral 2s linear infinite}
.ld-06__spiral span:nth-child(1){background:var(--c1);animation-delay:0s}
.ld-06__spiral span:nth-child(2){background:var(--c2);animation-delay:-.25s}
.ld-06__spiral span:nth-child(3){background:var(--c3);animation-delay:-.5s}
.ld-06__spiral span:nth-child(4){background:var(--c1);animation-delay:-.75s}
.ld-06__spiral span:nth-child(5){background:var(--c2);animation-delay:-1s}
.ld-06__spiral span:nth-child(6){background:var(--c3);animation-delay:-1.25s}
.ld-06__spiral span:nth-child(7){background:var(--c1);animation-delay:-1.5s}
.ld-06__spiral span:nth-child(8){background:var(--c2);animation-delay:-1.75s}
@keyframes ld-06-spiral{0%{transform:rotate(0deg) translateX(24px) scale(.4);opacity:0}20%{opacity:1;transform:rotate(72deg) translateX(24px) scale(.7)}60%{transform:rotate(216deg) translateX(24px) scale(1)}80%{opacity:1}100%{transform:rotate(360deg) translateX(24px) scale(.4);opacity:0}}

@media(prefers-reduced-motion:reduce){
  .ld-06__rung,.ld-06__helix span,.ld-06__spiral span{animation:none}
}
```

### 07. CSS Glitch Flicker Loader

**Type:** Pure CSS
**Description:** Three cyberpunk CSS loaders — a glitching text title with RGB channel split, a CRT scan-line box, and a matrix binary rain column — evoking terminal hacking and retro sci-fi aesthetics.

**HTML:**
```html
<div class="ld-07">
  <div class="ld-07__stage">
    <div class="ld-07__cell">
      <div class="ld-07__text" data-text="LOADING">LOADING</div>
      <span class="ld-07__label">Glitch Text</span>
    </div>
    <div class="ld-07__cell">
      <div class="ld-07__scan"></div>
      <span class="ld-07__label">Scan Line</span>
    </div>
    <div class="ld-07__cell">
      <div class="ld-07__matrix">
        <div class="ld-07__col"><span>1</span><span>0</span><span>1</span><span>0</span><span>1</span><span>0</span></div>
        <div class="ld-07__col"><span>0</span><span>1</span><span>0</span><span>1</span><span>0</span><span>1</span></div>
        <div class="ld-07__col"><span>1</span><span>1</span><span>0</span><span>0</span><span>1</span><span>0</span></div>
        <div class="ld-07__col"><span>0</span><span>0</span><span>1</span><span>1</span><span>0</span><span>1</span></div>
      </div>
```

**CSS:**
```css
.ld-07,.ld-07 *,.ld-07 *::before,.ld-07 *::after{box-sizing:border-box;margin:0;padding:0}
.ld-07{
  --bg:#080808;--c1:#00ff41;--c2:#ff003c;--c3:#00d4ff;
  background:var(--bg);display:flex;align-items:center;justify-content:center;min-height:100vh;font-family:'Courier New',monospace;
}
.ld-07__stage{display:flex;gap:80px;flex-wrap:wrap;justify-content:center;padding:40px;align-items:center}
.ld-07__cell{display:flex;flex-direction:column;align-items:center;gap:24px}
.ld-07__label{color:rgba(255,255,255,.3);font-size:11px;letter-spacing:2px;text-transform:uppercase}

/* Glitch text */
.ld-07__text{font-size:28px;font-weight:700;color:var(--c1);letter-spacing:4px;position:relative;text-shadow:0 0 10px var(--c1);animation:ld-07-flicker 3s step-end infinite}
.ld-07__text::before{content:attr(data-text);position:absolute;left:0;top:0;color:var(--c2);animation:ld-07-glitch-r 2.5s step-end infinite;clip-path:polygon(0 20%,100% 20%,100% 40%,0 40%)}
.ld-07__text::after{content:attr(data-text);position:absolute;left:0;top:0;color:var(--c3);animation:ld-07-glitch-b 2s step-end infinite;clip-path:polygon(0 60%,100% 60%,100% 80%,0 80%)}
@keyframes ld-07-flicker{0%,100%{opacity:1}92%{opacity:1}93%{opacity:0}94%{opacity:1}96%{opacity:0}97%{opacity:1}}
@keyframes ld-07-glitch-r{0%{transform:translateX(0)}15%{transform:translateX(-3px)}16%{transform:translateX(3px)}17%{transform:translateX(0)}85%{transform:translateX(0)}86%{transform:translateX(2px)}87%{transform:translateX(-2px)}88%{transform:translateX(0)}}
@keyframes ld-07-glitch-b{0%{transform:translateX(0)}10%{transform:translateX(2px)}11%{transform:translateX(-2px)}12%{transform:translateX(0)}75%{transform:translateX(0)}76%{transform:translateX(-3px)}77%{transform:translateX(3px)}78%{transform:translateX(0)}}

/* Scan line loader */
.ld-07__scan{width:80px;height:80px;background:#111;border:1px solid var(--c1);border-radius:4px;position:relative;overflow:hidden;box-shadow:0 0 20px rgba(0,255,65,.2)}
.ld-07__scan::before{content:'';position:absolute;left:0;width:100%;height:2px;background:var(--c1);box-shadow:0 0 8px var(--c1);animation:ld-07-scan 1.5s linear infinite;opacity:.8}
.ld-07__scan::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(0,255,65,.03) 3px,rgba(0,255,65,.03) 4px)}
@keyframes ld-07-scan{0%{top:0}100%{top:100%}}

/* Binary rain letters */
.ld-07__matrix{width:80px;height:80px;overflow:hidden;background:#050505;border:1px solid rgba(0,255,65,.2);border-radius:4px;display:flex;gap:1px;padding:2px}
.ld-07__col{display:flex;flex-direction:column;gap:1px;animation:ld-07-matrix-col 1.5s linear infinite}
.ld-07__col:nth-child(2){animation-delay:.3s}
.ld-07__col:nth-child(3){animation-delay:.6s}
.ld-07__col:nth-child(4){animation-delay:.9s}
.ld-07__col span{font-size:9px;color:var(--c1);opacity:.15;display:block;line-height:12px;text-align:center;animation:ld-07-digit 2s step-end infinite}
.ld-07__col span:nth-child(1){animation-delay:0s}
.ld-07__col span:nth-child(2){animation-delay:.2s;opacity:.4}
.ld-07__col span:nth-child(3){animation-delay:.4s;opacity:.7}
.ld-07__col span:nth-child(4){animation-delay:.6s;opacity:1;color:#fff;text-shadow:0 0 4px var(--c1)}
.ld-07__col span:nth-child(5){animation-delay:.8s;opacity:.4}
.ld-07__col span:nth-child(6){animation-delay:1s;opacity:.1}
@keyframes ld-07-matrix-col{0%{transform:translateY(-20px)}100%{transform:translateY(20px)}}
@keyframes ld-07-digit{0%,100%{content:'0'}25%{content:'1'}50%{content:'0'}75%{content:'1'}}

@media(prefers-reduced-motion:reduce){
  .ld-07__text,.ld-07__text::before,.ld-07__text::after,.ld-07__scan::before,.ld-07__col{animation:none}
}
```

### 08. CSS Heartbeat Pulse Loader

**Type:** Pure CSS
**Description:** Four heart and pulse CSS loaders — an SVG heartbeat, expanding ring pulse, animated ECG line, and sonar ping — perfect for health, wellness, and real-time data UI contexts.

**HTML:**
```html
<div class="ld-08">
  <div class="ld-08__stage">
    <div class="ld-08__cell">
      <div class="ld-08__heart">
        <svg viewBox="0 0 24 24" fill="var(--c1)" xmlns="http://www.w3.org/2000/svg" style="filter:drop-shadow(0 0 8px var(--c1))">
          <path d="M12 21.593c-5.63-5.539-11-10.297-11-14.402 0-3.791 3.068-5.191 5.281-5.191 1.312 0 4.151.501 5.719 4.457 1.59-3.968 4.464-4.447 5.726-4.447 2.54 0 5.274 1.621 5.274 5.181 0 4.069-5.136 8.625-11 14.402z"/>
        </svg>
      </div>
      <span class="ld-08__label">Heartbeat</span>
    </div>
    <div class="ld-08__cell">
      <div class="ld-08__rings"><span></span><span></span><i></i></div>
      <span class="ld-08__label">Ring Pulse</span>
    </div>
    <div class="ld-08__cell">
      <div class="ld-08__ecg">
        <svg viewBox="0 0 200 50" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
          <polyline points="0,25 20,25 30,25 35,5 40,45 45,25 55,25 65,25 70,10 75,40 80,25 100,25 120,25 125,5 130,45 135,25 145,25 155,25 160,10 165,40 170,25 190,25 200,25" fill="none" stroke="#ff4d6d" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="filter:drop-shadow(0 0 4px #ff4d6d)"/>
        </svg>
      </div>
      <span class="ld-08__label">ECG Line</span>
    </div>
    <div class="ld-08__cell">
      <div class="ld-08__sonar"><span></span><span></span><span></span><i></i></div>
      <span class="ld-08__label">Sonar Ping</span>
    </div>
  </div>
```

**CSS:**
```css
.ld-08,.ld-08 *,.ld-08 *::before,.ld-08 *::after{box-sizing:border-box;margin:0;padding:0}
.ld-08{
  --bg:#0d0014;--c1:#ff4d6d;--c2:#ff8fa3;--c3:#ffb3c1;
  background:var(--bg);display:flex;align-items:center;justify-content:center;min-height:100vh;font-family:'Segoe UI',sans-serif;
}
.ld-08__stage{display:flex;gap:80px;flex-wrap:wrap;justify-content:center;padding:40px;align-items:center}
.ld-08__cell{display:flex;flex-direction:column;align-items:center;gap:24px}
.ld-08__label{color:rgba(255,255,255,.4);font-size:11px;letter-spacing:1.5px;text-transform:uppercase}

/* Heart SVG pulse */
.ld-08__heart{width:60px;height:60px;position:relative;display:flex;align-items:center;justify-content:center}
.ld-08__heart svg{width:50px;height:50px;animation:ld-08-heartbeat .8s ease-in-out infinite}
@keyframes ld-08-heartbeat{0%,100%{transform:scale(1)}14%{transform:scale(1.3)}28%{transform:scale(1)}42%{transform:scale(1.15)}70%{transform:scale(1)}}

/* Ring pulse */
.ld-08__rings{width:80px;height:80px;position:relative;display:flex;align-items:center;justify-content:center}
.ld-08__rings::before,.ld-08__rings::after{content:'';position:absolute;border-radius:50%;border:2px solid var(--c1)}
.ld-08__rings::before{width:30px;height:30px;animation:ld-08-ring-pulse 1.5s ease-out infinite}
.ld-08__rings::after{width:30px;height:30px;animation:ld-08-ring-pulse 1.5s ease-out infinite .4s}
.ld-08__rings i{width:16px;height:16px;border-radius:50%;background:var(--c1);box-shadow:0 0 10px var(--c1);animation:ld-08-heartbeat .8s ease-in-out infinite}
@keyframes ld-08-ring-pulse{0%{transform:scale(1);opacity:.8}100%{transform:scale(3.5);opacity:0}}

/* ECG line */
.ld-08__ecg{width:140px;height:50px;position:relative;overflow:hidden}
.ld-08__ecg svg{position:absolute;width:200%;height:100%;animation:ld-08-ecg 1.5s linear infinite}
@keyframes ld-08-ecg{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* Sonar */
.ld-08__sonar{width:80px;height:80px;position:relative;display:flex;align-items:center;justify-content:center}
.ld-08__sonar span{position:absolute;border-radius:50%;border:2px solid var(--c2);animation:ld-08-sonar 2s ease-out infinite}
.ld-08__sonar span:nth-child(1){width:20px;height:20px;animation-delay:0s}
.ld-08__sonar span:nth-child(2){width:20px;height:20px;animation-delay:.5s}
.ld-08__sonar span:nth-child(3){width:20px;height:20px;animation-delay:1s}
.ld-08__sonar i{width:8px;height:8px;border-radius:50%;background:var(--c2);box-shadow:0 0 8px var(--c2)}
@keyframes ld-08-sonar{0%{width:8px;height:8px;opacity:1}100%{width:70px;height:70px;opacity:0}}

@media(prefers-reduced-motion:reduce){
  .ld-08__heart svg,.ld-08__rings::before,.ld-08__rings::after,.ld-08__rings i,.ld-08__ecg svg,.ld-08__sonar span{animation:none}
}
```

### 09. CSS Circular Progress Loader

**Type:** Pure CSS
**Description:** Four SVG-based circular progress loaders — a stroke-dashoffset arc, segmented arcs, a gauge semicircle, and radial concentric rings — covering all common circular-indicator design patterns.

**HTML:**
```html
<div class="ld-09">
  <div class="ld-09__stage">
    <div class="ld-09__cell">
      <div class="ld-09__svg-wrap">
        <svg viewBox="0 0 90 90"><circle class="ld-09__track" cx="45" cy="45" r="36"/><circle class="ld-09__prog" cx="45" cy="45" r="36"/></svg>
        <div class="ld-09__pct">78%</div>
      </div>
```

**CSS:**
```css
.ld-09,.ld-09 *,.ld-09 *::before,.ld-09 *::after{box-sizing:border-box;margin:0;padding:0}
.ld-09{
  --bg:#0f172a;--c1:#818cf8;--c2:#34d399;--c3:#fb923c;--c4:#f472b6;
  background:var(--bg);display:flex;align-items:center;justify-content:center;min-height:100vh;font-family:'Segoe UI',sans-serif;
}
.ld-09__stage{display:flex;gap:48px;flex-wrap:wrap;justify-content:center;padding:40px}
.ld-09__cell{display:flex;flex-direction:column;align-items:center;gap:16px}
.ld-09__label{color:rgba(255,255,255,.4);font-size:11px;letter-spacing:1.5px;text-transform:uppercase}

/* SVG Circle progress */
.ld-09__svg-wrap{position:relative;width:90px;height:90px}
.ld-09__svg-wrap svg{width:90px;height:90px;transform:rotate(-90deg)}
.ld-09__track{fill:none;stroke:rgba(255,255,255,.07);stroke-width:6}
.ld-09__prog{fill:none;stroke:var(--c1);stroke-width:6;stroke-linecap:round;stroke-dasharray:226;animation:ld-09-dash 2s ease-in-out infinite}
@keyframes ld-09-dash{0%{stroke-dashoffset:226;opacity:.6}50%{stroke-dashoffset:50;opacity:1}100%{stroke-dashoffset:226;opacity:.6}}

.ld-09__pct{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;color:var(--c1)}

/* Segmented ring */
.ld-09__seg-ring{width:90px;height:90px;border-radius:50%;position:relative}
.ld-09__seg-ring svg{width:90px;height:90px}
.ld-09__seg-arc{fill:none;stroke-width:6;stroke-linecap:round}
.ld-09__seg-arc:nth-child(1){stroke:var(--c2);stroke-dasharray:40 226;stroke-dashoffset:0;animation:ld-09-seg1 3s linear infinite}
.ld-09__seg-arc:nth-child(2){stroke:var(--c3);stroke-dasharray:40 226;stroke-dashoffset:-60;animation:ld-09-seg2 3s linear infinite}
.ld-09__seg-arc:nth-child(3){stroke:var(--c4);stroke-dasharray:40 226;stroke-dashoffset:-120;animation:ld-09-seg3 3s linear infinite}
@keyframes ld-09-seg1{to{stroke-dashoffset:-226}}
@keyframes ld-09-seg2{to{stroke-dashoffset:-286}}
@keyframes ld-09-seg3{to{stroke-dashoffset:-346}}

/* Gauge */
.ld-09__gauge{width:100px;height:55px;position:relative;overflow:hidden}
.ld-09__gauge svg{width:100px;height:100px;transform:translateY(10px)}
.ld-09__gauge-track{fill:none;stroke:rgba(255,255,255,.07);stroke-width:8;stroke-dasharray:125;stroke-dashoffset:-62.5}
.ld-09__gauge-fill{fill:none;stroke:var(--c3);stroke-width:8;stroke-linecap:round;stroke-dasharray:125;stroke-dashoffset:-62.5;animation:ld-09-gauge 2.5s ease-in-out infinite}
@keyframes ld-09-gauge{0%{stroke-dashoffset:0}50%{stroke-dashoffset:-62.5}100%{stroke-dashoffset:0}}

/* Radial multi */
.ld-09__radial{width:90px;height:90px;position:relative}
.ld-09__radial svg{width:90px;height:90px;transform:rotate(-90deg)}
.ld-09__r-track{fill:none;stroke:rgba(255,255,255,.05);stroke-linecap:round}
.ld-09__r-fill{fill:none;stroke-linecap:round;animation:ld-09-rdash 2s ease-in-out infinite}
.ld-09__r-fill:nth-child(2){stroke:var(--c1);stroke-width:5;stroke-dasharray:200;animation-delay:0s}
.ld-09__r-fill:nth-child(4){stroke:var(--c2);stroke-width:5;stroke-dasharray:160;animation-delay:.3s}
.ld-09__r-fill:nth-child(6){stroke:var(--c3);stroke-width:5;stroke-dasharray:120;animation-delay:.6s}
@keyframes ld-09-rdash{0%{stroke-dashoffset:200;opacity:.5}60%{stroke-dashoffset:40;opacity:1}100%{stroke-dashoffset:200;opacity:.5}}

@media(prefers-reduced-motion:reduce){
  .ld-09__prog,.ld-09__seg-arc,.ld-09__gauge-fill,.ld-09__r-fill{animation:none}
}
```

### 10. CSS Liquid Fill Loader

**Type:** Pure CSS
**Description:** Four liquid-fill CSS loaders — a flask with wave, a liquid circle with sloshing, a vertical tube, and an animated battery indicator — using height and transform animations to simulate fluid.

**HTML:**
```html
<div class="ld-10">
  <div class="ld-10__stage">
    <div class="ld-10__cell"><div class="ld-10__flask"><div class="ld-10__flask-fill"></div><div class="ld-10__flask-wave"></div></div>
```

**CSS:**
```css
.ld-10,.ld-10 *,.ld-10 *::before,.ld-10 *::after{box-sizing:border-box;margin:0;padding:0}
.ld-10{
  --bg:#071330;--c1:#0ea5e9;--c2:#6366f1;--c3:#10b981;--c4:#f59e0b;
  background:var(--bg);display:flex;align-items:center;justify-content:center;min-height:100vh;font-family:'Segoe UI',sans-serif;
}
.ld-10__stage{display:flex;gap:40px;flex-wrap:wrap;justify-content:center;padding:40px;align-items:flex-end}
.ld-10__cell{display:flex;flex-direction:column;align-items:center;gap:16px}
.ld-10__label{color:rgba(255,255,255,.4);font-size:11px;letter-spacing:1.5px;text-transform:uppercase}

/* Flask fill */
.ld-10__flask{width:50px;height:80px;border:2px solid var(--c1);border-radius:4px 4px 12px 12px;position:relative;overflow:hidden;box-shadow:0 0 16px rgba(14,165,233,.2)}
.ld-10__flask-fill{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(to top,var(--c1),rgba(14,165,233,.4));animation:ld-10-fill 3s ease-in-out infinite}
.ld-10__flask-wave{position:absolute;bottom:0;left:-100%;width:300%;height:30px;background:radial-gradient(ellipse at 50% 100%,rgba(14,165,233,.6) 0%,transparent 70%);animation:ld-10-wave 1.5s linear infinite}
@keyframes ld-10-fill{0%{height:10%}50%{height:80%}100%{height:10%}}
@keyframes ld-10-wave{to{transform:translateX(33%)}}

/* Circle liquid */
.ld-10__circle{width:80px;height:80px;border-radius:50%;border:3px solid var(--c2);position:relative;overflow:hidden;box-shadow:0 0 20px rgba(99,102,241,.2)}
.ld-10__circle-fill{position:absolute;bottom:0;left:0;right:0;height:50%;background:linear-gradient(to top,var(--c2),rgba(99,102,241,.3));animation:ld-10-wave-x 1.2s ease-in-out infinite alternate}
.ld-10__circle::before{content:'60%';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;font-weight:700;z-index:1}
@keyframes ld-10-wave-x{0%{transform:translateX(-5px) skewX(-3deg)}100%{transform:translateX(5px) skewX(3deg)}}

/* Tube */
.ld-10__tube{width:24px;height:100px;border:2px solid var(--c3);border-radius:12px;position:relative;overflow:hidden;box-shadow:0 0 12px rgba(16,185,129,.15)}
.ld-10__tube-fill{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(to top,var(--c3),rgba(16,185,129,.3));animation:ld-10-tube 2.5s ease-in-out infinite}
@keyframes ld-10-tube{0%,100%{height:15%}50%{height:85%}}

/* Battery */
.ld-10__battery{width:80px;height:44px;border:2px solid var(--c4);border-radius:6px;position:relative;overflow:hidden}
.ld-10__battery::before{content:'';position:absolute;right:-8px;top:50%;transform:translateY(-50%);width:6px;height:16px;background:var(--c4);border-radius:0 3px 3px 0}
.ld-10__battery-fill{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,var(--c4),rgba(245,158,11,.5));animation:ld-10-battery 3s ease-in-out infinite;border-radius:4px}
@keyframes ld-10-battery{0%{width:5%}60%{width:85%}100%{width:5%}}

@media(prefers-reduced-motion:reduce){
  .ld-10__flask-fill,.ld-10__flask-wave,.ld-10__circle-fill,.ld-10__tube-fill,.ld-10__battery-fill{animation:none}
}
```

### 11. CSS Neon Arc Spinner

**Type:** Pure CSS
**Description:** Five glowing neon CSS spinners — a single neon ring, double counter-rotating neon, multi-arc intersecting glow, neon orbiting dot, and a conic comet — styled for dark cyberpunk UIs.

**HTML:**
```html
<div class="ld-11">
  <div class="ld-11__stage">
    <div class="ld-11__cell"><div class="ld-11__neon"></div><span class="ld-11__label">Neon Ring</span></div>
    <div class="ld-11__cell"><div class="ld-11__double-neon"><span></span><span></span></div><span class="ld-11__label">Double Neon</span></div>
    <div class="ld-11__cell"><div class="ld-11__arcs"><span></span><span></span><span></span></div><span class="ld-11__label">Neon Arcs</span></div>
    <div class="ld-11__cell"><div class="ld-11__orbit-neon"><i></i></div><span class="ld-11__label">Neon Orbit</span></div>
    <div class="ld-11__cell"><div class="ld-11__comet-neon"></div><span class="ld-11__label">Neon Comet</span></div>
  </div>
```

**CSS:**
```css
.ld-11,.ld-11 *,.ld-11 *::before,.ld-11 *::after{box-sizing:border-box;margin:0;padding:0}
.ld-11{
  --bg:#06000f;--c1:#bf00ff;--c2:#00f5ff;--c3:#ff6600;--c4:#39ff14;
  background:var(--bg);display:flex;align-items:center;justify-content:center;min-height:100vh;font-family:'Segoe UI',sans-serif;
}
.ld-11__stage{display:flex;gap:60px;flex-wrap:wrap;justify-content:center;padding:40px}
.ld-11__cell{display:flex;flex-direction:column;align-items:center;gap:20px}
.ld-11__label{color:rgba(255,255,255,.35);font-size:11px;letter-spacing:1.5px;text-transform:uppercase}

/* Neon ring */
.ld-11__neon{width:70px;height:70px;border-radius:50%;border:3px solid transparent;border-top-color:var(--c1);box-shadow:0 0 12px var(--c1),inset 0 0 12px rgba(191,0,255,.1);animation:ld-11-spin 1s linear infinite}
@keyframes ld-11-spin{to{transform:rotate(360deg)}}

/* Double neon */
.ld-11__double-neon{width:70px;height:70px;position:relative}
.ld-11__double-neon span{position:absolute;border-radius:50%;border:3px solid transparent;animation:ld-11-spin linear infinite}
.ld-11__double-neon span:nth-child(1){inset:0;border-top-color:var(--c2);box-shadow:0 0 14px var(--c2);animation-duration:1s}
.ld-11__double-neon span:nth-child(2){inset:10px;border-bottom-color:var(--c1);box-shadow:0 0 10px var(--c1);animation-duration:1.5s;animation-direction:reverse}

/* Neon arc segments */
.ld-11__arcs{width:70px;height:70px;position:relative}
.ld-11__arcs span{position:absolute;border-radius:50%;border:3px solid transparent;animation:ld-11-spin linear infinite}
.ld-11__arcs span:nth-child(1){inset:0;border-top-color:var(--c3);box-shadow:0 0 12px var(--c3);animation-duration:.8s}
.ld-11__arcs span:nth-child(2){inset:0;border-right-color:var(--c3);box-shadow:0 0 12px var(--c3);animation-duration:.8s}
.ld-11__arcs span:nth-child(3){inset:16px;border-bottom-color:var(--c4);box-shadow:0 0 10px var(--c4);animation-duration:1.2s;animation-direction:reverse}

/* Neon orbit */
.ld-11__orbit-neon{width:70px;height:70px;position:relative;display:flex;align-items:center;justify-content:center}
.ld-11__orbit-neon::before{content:'';width:10px;height:10px;border-radius:50%;background:var(--c1);box-shadow:0 0 15px var(--c1),0 0 30px var(--c1);animation:ld-11-spin 1.2s linear infinite;position:absolute;top:0;left:50%;transform:translateX(-50%);transform-origin:35px 35px}
.ld-11__orbit-neon::after{content:'';position:absolute;width:64px;height:64px;border-radius:50%;border:1px solid rgba(191,0,255,.2);box-shadow:0 0 8px rgba(191,0,255,.15)}
.ld-11__orbit-neon i{width:6px;height:6px;border-radius:50%;background:var(--c2);box-shadow:0 0 10px var(--c2)}

/* Comet neon */
.ld-11__comet-neon{width:70px;height:70px;border-radius:50%;background:conic-gradient(transparent 60%,var(--c4));-webkit-mask:radial-gradient(farthest-side,#0000 calc(100% - 4px),#000 0);animation:ld-11-spin 1.2s linear infinite;filter:drop-shadow(0 0 6px var(--c4))}

@media(prefers-reduced-motion:reduce){
  .ld-11__neon,.ld-11__double-neon span,.ld-11__arcs span,.ld-11__orbit-neon::before,.ld-11__comet-neon{animation:none}
}
```

### 12. CSS Cube Flip 3D Loader

**Type:** Pure CSS
**Description:** Three three-dimensional CSS loaders — a six-face spinning cube, a folding grid of four squares, and a nested wireframe box — using CSS 3D transforms and preserve-3d for depth.

**HTML:**
```html
<div class="ld-12">
  <div class="ld-12__stage">
    <div class="ld-12__cell">
      <div style="perspective:200px">
        <div class="ld-12__cube" style="position:relative">
          <div class="ld-12__face ld-12__face--front"></div>
          <div class="ld-12__face ld-12__face--back"></div>
          <div class="ld-12__face ld-12__face--left"></div>
          <div class="ld-12__face ld-12__face--right"></div>
          <div class="ld-12__face ld-12__face--top"></div>
          <div class="ld-12__face ld-12__face--bottom"></div>
        </div>
```

**CSS:**
```css
.ld-12,.ld-12 *,.ld-12 *::before,.ld-12 *::after{box-sizing:border-box;margin:0;padding:0}
.ld-12{
  --bg:#12151e;--c1:#ff9f43;--c2:#ee5a24;--c3:#a29bfe;--c4:#6c5ce7;
  background:var(--bg);display:flex;align-items:center;justify-content:center;min-height:100vh;font-family:'Segoe UI',sans-serif;perspective:600px;
}
.ld-12__stage{display:flex;gap:80px;flex-wrap:wrap;justify-content:center;padding:40px;align-items:center}
.ld-12__cell{display:flex;flex-direction:column;align-items:center;gap:24px}
.ld-12__label{color:rgba(255,255,255,.4);font-size:11px;letter-spacing:1.5px;text-transform:uppercase}

/* Flip cube */
.ld-12__cube{width:50px;height:50px;transform-style:preserve-3d;animation:ld-12-cube-flip 2s ease-in-out infinite}
.ld-12__face{position:absolute;width:50px;height:50px;border:2px solid var(--c1);display:flex;align-items:center;justify-content:center}
.ld-12__face--front{transform:translateZ(25px);background:rgba(255,159,67,.15)}
.ld-12__face--back{transform:rotateY(180deg) translateZ(25px);background:rgba(255,159,67,.1)}
.ld-12__face--left{transform:rotateY(-90deg) translateZ(25px);background:rgba(238,90,36,.1)}
.ld-12__face--right{transform:rotateY(90deg) translateZ(25px);background:rgba(238,90,36,.15)}
.ld-12__face--top{transform:rotateX(90deg) translateZ(25px);background:rgba(255,159,67,.05)}
.ld-12__face--bottom{transform:rotateX(-90deg) translateZ(25px);background:rgba(238,90,36,.05)}
@keyframes ld-12-cube-flip{0%{transform:rotateX(0) rotateY(0)}33%{transform:rotateX(90deg) rotateY(0)}66%{transform:rotateX(90deg) rotateY(90deg)}100%{transform:rotateX(180deg) rotateY(90deg)}}

/* Folding squares */
.ld-12__fold{width:40px;height:40px;position:relative}
.ld-12__fold span{position:absolute;width:18px;height:18px;background:var(--c3);animation:ld-12-fold 2.4s ease-in-out infinite}
.ld-12__fold span:nth-child(1){top:0;left:0;transform-origin:bottom right;animation-delay:0s}
.ld-12__fold span:nth-child(2){top:0;right:0;transform-origin:bottom left;animation-delay:.3s;background:rgba(162,155,254,.7)}
.ld-12__fold span:nth-child(3){bottom:0;right:0;transform-origin:top left;animation-delay:.6s;background:rgba(162,155,254,.5)}
.ld-12__fold span:nth-child(4){bottom:0;left:0;transform-origin:top right;animation-delay:.9s;background:rgba(162,155,254,.3)}
@keyframes ld-12-fold{0%,10%,100%{transform:perspective(140px) rotateX(0) rotateY(0)}50%{transform:perspective(140px) rotateX(-180deg) rotateY(0)}}

/* Rotating box */
.ld-12__box{width:50px;height:50px;border:3px solid var(--c4);position:relative;animation:ld-12-box-spin 3s linear infinite;transform-style:preserve-3d}
.ld-12__box::before,.ld-12__box::after{content:'';position:absolute;border:3px solid rgba(108,92,231,.4)}
.ld-12__box::before{inset:-12px;transform:rotateY(45deg);border-color:rgba(108,92,231,.3)}
.ld-12__box::after{inset:-6px;transform:rotateX(45deg);border-color:rgba(108,92,231,.2)}
@keyframes ld-12-box-spin{to{transform:rotateX(360deg) rotateY(360deg)}}

@media(prefers-reduced-motion:reduce){
  .ld-12__cube,.ld-12__fold span,.ld-12__box{animation:none}
}
```

### 13. CSS Wave Bars Audio Loader

**Type:** Pure CSS
**Description:** Four music-visualiser CSS loaders — classic audio bars, a 10-band spectrum analyser, a waveform timeline, and a dual-channel VU meter — styled with a retro green terminal palette.

**HTML:**
```html
<div class="ld-13">
  <div class="ld-13__stage">
    <div class="ld-13__cell"><div class="ld-13__bars"><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div><span class="ld-13__label">Audio Bars</span></div>
    <div class="ld-13__cell"><div class="ld-13__spectrum"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div><span class="ld-13__label">Spectrum</span></div>
    <div class="ld-13__cell"><div class="ld-13__wave-line"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div><span class="ld-13__label">Waveform</span></div>
    <div class="ld-13__cell">
      <div class="ld-13__vu">
        <div class="ld-13__vu-col"><div class="ld-13__vu-seg"></div><div class="ld-13__vu-seg"></div><div class="ld-13__vu-seg"></div><div class="ld-13__vu-seg"></div><div class="ld-13__vu-seg"></div><div class="ld-13__vu-seg"></div></div>
```

**CSS:**
```css
.ld-13,.ld-13 *,.ld-13 *::before,.ld-13 *::after{box-sizing:border-box;margin:0;padding:0}
.ld-13{
  --bg:#001a00;--c1:#00ff41;--c2:#00cc33;--c3:#39ff14;--c4:#7fff00;
  background:var(--bg);display:flex;align-items:center;justify-content:center;min-height:100vh;font-family:'Courier New',monospace;
}
.ld-13__stage{display:flex;gap:70px;flex-wrap:wrap;justify-content:center;padding:40px;align-items:center}
.ld-13__cell{display:flex;flex-direction:column;align-items:center;gap:20px}
.ld-13__label{color:rgba(0,255,65,.3);font-size:11px;letter-spacing:1.5px;text-transform:uppercase}

/* Classic audio bars */
.ld-13__bars{display:flex;gap:4px;align-items:flex-end;height:50px}
.ld-13__bars span{width:6px;border-radius:3px 3px 0 0;background:var(--c1);box-shadow:0 0 6px var(--c1);animation:ld-13-bar 0.9s ease-in-out infinite alternate}
.ld-13__bars span:nth-child(1){height:15px;animation-delay:0s}
.ld-13__bars span:nth-child(2){height:35px;animation-delay:.05s;background:var(--c2)}
.ld-13__bars span:nth-child(3){height:50px;animation-delay:.1s}
.ld-13__bars span:nth-child(4){height:28px;animation-delay:.15s;background:var(--c3)}
.ld-13__bars span:nth-child(5){height:42px;animation-delay:.2s}
.ld-13__bars span:nth-child(6){height:20px;animation-delay:.25s;background:var(--c2)}
.ld-13__bars span:nth-child(7){height:36px;animation-delay:.3s}
@keyframes ld-13-bar{0%{transform:scaleY(.3)}100%{transform:scaleY(1)}}

/* Spectrum */
.ld-13__spectrum{display:flex;gap:3px;align-items:center;height:60px}
.ld-13__spectrum span{width:5px;border-radius:3px;background:linear-gradient(to top,var(--c1),var(--c4));animation:ld-13-spectrum 1.2s ease-in-out infinite}
.ld-13__spectrum span:nth-child(1){animation-delay:0s}
.ld-13__spectrum span:nth-child(2){animation-delay:.05s}
.ld-13__spectrum span:nth-child(3){animation-delay:.1s}
.ld-13__spectrum span:nth-child(4){animation-delay:.15s}
.ld-13__spectrum span:nth-child(5){animation-delay:.2s}
.ld-13__spectrum span:nth-child(6){animation-delay:.25s}
.ld-13__spectrum span:nth-child(7){animation-delay:.3s}
.ld-13__spectrum span:nth-child(8){animation-delay:.35s}
.ld-13__spectrum span:nth-child(9){animation-delay:.4s}
.ld-13__spectrum span:nth-child(10){animation-delay:.45s}
@keyframes ld-13-spectrum{0%,100%{height:8px;opacity:.4}50%{height:52px;opacity:1}}

/* Waveform line */
.ld-13__wave-line{width:160px;height:40px;display:flex;gap:2px;align-items:center}
.ld-13__wave-line span{flex:1;border-radius:2px;background:var(--c1);animation:ld-13-wave 1s ease-in-out infinite}
.ld-13__wave-line span:nth-child(1){animation-delay:0s}
.ld-13__wave-line span:nth-child(2){animation-delay:.06s}
.ld-13__wave-line span:nth-child(3){animation-delay:.12s}
.ld-13__wave-line span:nth-child(4){animation-delay:.18s}
.ld-13__wave-line span:nth-child(5){animation-delay:.24s}
.ld-13__wave-line span:nth-child(6){animation-delay:.30s}
.ld-13__wave-line span:nth-child(7){animation-delay:.36s}
.ld-13__wave-line span:nth-child(8){animation-delay:.42s}
.ld-13__wave-line span:nth-child(9){animation-delay:.48s}
.ld-13__wave-line span:nth-child(10){animation-delay:.54s}
.ld-13__wave-line span:nth-child(11){animation-delay:.60s}
.ld-13__wave-line span:nth-child(12){animation-delay:.66s}
@keyframes ld-13-wave{0%,100%{height:4px}50%{height:36px}}

/* VU Meter */
.ld-13__vu{display:flex;gap:6px}
.ld-13__vu-col{display:flex;flex-direction:column;gap:2px}
.ld-13__vu-seg{width:12px;height:6px;border-radius:1px;background:rgba(0,255,65,.12);animation:ld-13-vu 1.2s ease-in-out infinite}
.ld-13__vu-col:nth-child(1) .ld-13__vu-seg:nth-child(1){animation-delay:0s;--h:6}
.ld-13__vu-col:nth-child(1) .ld-13__vu-seg:nth-child(2){animation-delay:.05s}
.ld-13__vu-col:nth-child(1) .ld-13__vu-seg:nth-child(3){animation-delay:.1s}
.ld-13__vu-col:nth-child(1) .ld-13__vu-seg:nth-child(4){animation-delay:.15s}
.ld-13__vu-col:nth-child(1) .ld-13__vu-seg:nth-child(5){animation-delay:.2s;background:rgba(255,255,0,.12)}
.ld-13__vu-col:nth-child(1) .ld-13__vu-seg:nth-child(6){animation-delay:.25s;background:rgba(255,0,0,.12)}
.ld-13__vu-col:nth-child(2) .ld-13__vu-seg:nth-child(1){animation-delay:.1s}
.ld-13__vu-col:nth-child(2) .ld-13__vu-seg:nth-child(2){animation-delay:.15s}
.ld-13__vu-col:nth-child(2) .ld-13__vu-seg:nth-child(3){animation-delay:.2s}
.ld-13__vu-col:nth-child(2) .ld-13__vu-seg:nth-child(4){animation-delay:.25s}
.ld-13__vu-col:nth-child(2) .ld-13__vu-seg:nth-child(5){animation-delay:.3s;background:rgba(255,255,0,.12)}
.ld-13__vu-col:nth-child(2) .ld-13__vu-seg:nth-child(6){animation-delay:.35s;background:rgba(255,0,0,.12)}
@keyframes ld-13-vu{0%,100%{background:rgba(0,255,65,.08)}50%{background:var(--c1);box-shadow:0 0 4px var(--c1)}}

@media(prefers-reduced-motion:reduce){
  .ld-13__bars span,.ld-13__spectrum span,.ld-13__wave-line span,.ld-13__vu-seg{animation:none;height:20px}
}
```

### 14. CSS Morphing Square Loader

**Type:** Pure CSS
**Description:** Four square-based CSS loaders — a border-radius morph, a corner-orbit rotation, a four-square chase path, and a perspective 3D flip — demonstrating CSS shape-shifting and spatial transforms.

**HTML:**
```html
<div class="ld-14">
  <div class="ld-14__stage">
    <div class="ld-14__cell"><div class="ld-14__morph"></div><span class="ld-14__label">Morphing</span></div>
    <div class="ld-14__cell"><div class="ld-14__sq-orbit"><span></span><span></span><span></span><span></span></div><span class="ld-14__label">Corner Orbit</span></div>
    <div class="ld-14__cell"><div class="ld-14__chase-sq"><span></span><span></span><span></span><span></span></div><span class="ld-14__label">Chase Squares</span></div>
    <div class="ld-14__cell"><div class="ld-14__sq-spin"></div><span class="ld-14__label">3D Flip</span></div>
  </div>
```

**CSS:**
```css
.ld-14,.ld-14 *,.ld-14 *::before,.ld-14 *::after{box-sizing:border-box;margin:0;padding:0}
.ld-14{
  --bg:#1a0533;--c1:#d63af9;--c2:#7c3aed;--c3:#ec4899;--c4:#f59e0b;
  background:var(--bg);display:flex;align-items:center;justify-content:center;min-height:100vh;font-family:'Segoe UI',sans-serif;
}
.ld-14__stage{display:flex;gap:70px;flex-wrap:wrap;justify-content:center;padding:40px;align-items:center}
.ld-14__cell{display:flex;flex-direction:column;align-items:center;gap:20px}
.ld-14__label{color:rgba(255,255,255,.35);font-size:11px;letter-spacing:1.5px;text-transform:uppercase}

/* Morph shape */
.ld-14__morph{width:60px;height:60px;background:linear-gradient(135deg,var(--c1),var(--c2));animation:ld-14-morph 3s ease-in-out infinite}
@keyframes ld-14-morph{0%{border-radius:4px;transform:rotate(0)}25%{border-radius:50%;transform:rotate(90deg)}50%{border-radius:4px;transform:rotate(180deg)}75%{border-radius:50% 4px;transform:rotate(270deg)}100%{border-radius:4px;transform:rotate(360deg)}}

/* Square orbit */
.ld-14__sq-orbit{width:60px;height:60px;position:relative;animation:ld-14-orbit 2s linear infinite}
.ld-14__sq-orbit span{position:absolute;width:14px;height:14px;background:var(--c3);border-radius:2px}
.ld-14__sq-orbit span:nth-child(1){top:0;left:0}
.ld-14__sq-orbit span:nth-child(2){top:0;right:0;background:var(--c1);animation:ld-14-sq-pulse .5s ease-in-out infinite alternate}
.ld-14__sq-orbit span:nth-child(3){bottom:0;right:0;background:var(--c4)}
.ld-14__sq-orbit span:nth-child(4){bottom:0;left:0;background:var(--c2)}
@keyframes ld-14-orbit{to{transform:rotate(360deg)}}
@keyframes ld-14-sq-pulse{to{border-radius:50%}}

/* Chase squares */
.ld-14__chase-sq{width:60px;height:60px;position:relative}
.ld-14__chase-sq span{position:absolute;width:20px;height:20px;border-radius:3px;animation:ld-14-chase-sq 1.5s ease-in-out infinite}
.ld-14__chase-sq span:nth-child(1){background:var(--c1);animation-delay:0s}
.ld-14__chase-sq span:nth-child(2){background:var(--c2);animation-delay:.375s}
.ld-14__chase-sq span:nth-child(3){background:var(--c3);animation-delay:.75s}
.ld-14__chase-sq span:nth-child(4){background:var(--c4);animation-delay:1.125s}
@keyframes ld-14-chase-sq{
  0%{transform:translate(0,0)}
  25%{transform:translate(40px,0)}
  50%{transform:translate(40px,40px)}
  75%{transform:translate(0,40px)}
  100%{transform:translate(0,0)}
}

/* Spinner square */
.ld-14__sq-spin{width:44px;height:44px;border:4px solid var(--c4);border-radius:4px;animation:ld-14-sq-spin 1.2s ease-in-out infinite}
@keyframes ld-14-sq-spin{0%{transform:perspective(120px) rotateX(0) rotateY(0)}50%{transform:perspective(120px) rotateX(-180deg) rotateY(0)}100%{transform:perspective(120px) rotateX(-180deg) rotateY(-180deg)}}

@media(prefers-reduced-motion:reduce){
  .ld-14__morph,.ld-14__sq-orbit,.ld-14__sq-orbit span,.ld-14__chase-sq span,.ld-14__sq-spin{animation:none}
}
```

### 15. CSS Orbit Planet Loader

**Type:** Pure CSS
**Description:** Three space-themed CSS loaders — a multi-orbit solar system, a conic-gradient comet trail, and binary orbiting stars — evoking astronomy dashboards and data pipeline visualisations.

**HTML:**
```html
<div class="ld-15">
  <div class="ld-15__stage">
    <div class="ld-15__cell">
      <div class="ld-15__solar">
        <div class="ld-15__sun"></div>
        <div class="ld-15__orbit-ring"><div class="ld-15__planet"></div></div>
```

**CSS:**
```css
.ld-15,.ld-15 *,.ld-15 *::before,.ld-15 *::after{box-sizing:border-box;margin:0;padding:0}
.ld-15{
  --bg:#01020a;--c1:#4fc3f7;--c2:#f48fb1;--c3:#a5d6a7;--c4:#ffe082;--c5:#cf94da;
  background:var(--bg);display:flex;align-items:center;justify-content:center;min-height:100vh;font-family:'Segoe UI',sans-serif;
}
.ld-15__stage{display:flex;gap:80px;flex-wrap:wrap;justify-content:center;padding:40px;align-items:center}
.ld-15__cell{display:flex;flex-direction:column;align-items:center;gap:24px}
.ld-15__label{color:rgba(255,255,255,.3);font-size:11px;letter-spacing:1.5px;text-transform:uppercase}

/* Multi-orbit solar */
.ld-15__solar{width:120px;height:120px;position:relative;display:flex;align-items:center;justify-content:center}
.ld-15__sun{width:18px;height:18px;border-radius:50%;background:var(--c4);box-shadow:0 0 16px var(--c4),0 0 32px rgba(255,224,130,.3)}
.ld-15__orbit-ring{position:absolute;border-radius:50%;border:1px solid rgba(255,255,255,.08)}
.ld-15__orbit-ring:nth-child(2){width:44px;height:44px;animation:ld-15-orbit 1.2s linear infinite}
.ld-15__orbit-ring:nth-child(3){width:72px;height:72px;animation:ld-15-orbit 2s linear infinite}
.ld-15__orbit-ring:nth-child(4){width:100px;height:100px;animation:ld-15-orbit 3s linear infinite}
.ld-15__planet{position:absolute;border-radius:50%;top:-5px;left:50%;transform:translateX(-50%)}
.ld-15__orbit-ring:nth-child(2) .ld-15__planet{width:8px;height:8px;background:var(--c1);box-shadow:0 0 6px var(--c1)}
.ld-15__orbit-ring:nth-child(3) .ld-15__planet{width:10px;height:10px;background:var(--c2);box-shadow:0 0 8px var(--c2)}
.ld-15__orbit-ring:nth-child(4) .ld-15__planet{width:7px;height:7px;background:var(--c3);box-shadow:0 0 6px var(--c3)}
@keyframes ld-15-orbit{to{transform:rotate(360deg)}}

/* Comet orbit */
.ld-15__comet-orbit{width:90px;height:90px;position:relative}
.ld-15__comet-orbit::before{content:'';position:absolute;inset:0;border-radius:50%;border:1px solid rgba(255,255,255,.06)}
.ld-15__comet-dot{width:10px;height:10px;border-radius:50%;background:var(--c5);box-shadow:0 0 10px var(--c5);position:absolute;top:-5px;left:50%;transform:translateX(-50%);transform-origin:45px 50px;animation:ld-15-orbit 1.8s linear infinite}
.ld-15__comet-trail{position:absolute;inset:0;border-radius:50%;background:conic-gradient(transparent 75%,rgba(207,148,218,.3));animation:ld-15-orbit 1.8s linear infinite;-webkit-mask:radial-gradient(farthest-side,#0000 calc(100% - 2px),#000 0)}

/* Binary stars */
.ld-15__binary{width:90px;height:90px;position:relative;display:flex;align-items:center;justify-content:center}
.ld-15__binary-wrap{width:60px;height:60px;position:relative;animation:ld-15-orbit 2s linear infinite}
.ld-15__star{position:absolute;border-radius:50%;top:50%;transform:translateY(-50%)}
.ld-15__star:nth-child(1){left:0;width:14px;height:14px;background:var(--c4);box-shadow:0 0 10px var(--c4);margin-top:-7px}
.ld-15__star:nth-child(2){right:0;width:10px;height:10px;background:var(--c1);box-shadow:0 0 8px var(--c1);margin-top:-5px}

@media(prefers-reduced-motion:reduce){
  .ld-15__orbit-ring,.ld-15__comet-dot,.ld-15__comet-trail,.ld-15__binary-wrap{animation:none}
}
```

### 16. CSS Typing Dots Loader

**Type:** Pure CSS
**Description:** Four conversational CSS loaders — a chat-bubble typing indicator, an inline AI-thinking status, a cursor blink, and a bouncing dot trio — matching the patterns used in messaging and AI product UIs.

**HTML:**
```html
<div class="ld-16">
  <div class="ld-16__stage">
    <div>
      <div class="ld-16__label-row">Chat bubble</div>
      <div class="ld-16__bubble"><span></span><span></span><span></span></div>
    </div>
```

**CSS:**
```css
.ld-16,.ld-16 *,.ld-16 *::before,.ld-16 *::after{box-sizing:border-box;margin:0;padding:0}
.ld-16{
  --bg:#1c1c2e;--c1:#e2e8f0;--c2:#94a3b8;--c3:#38bdf8;--c4:#a78bfa;
  background:var(--bg);display:flex;align-items:center;justify-content:center;min-height:100vh;font-family:'Segoe UI',sans-serif;
}
.ld-16__stage{display:flex;gap:28px;flex-direction:column;align-items:flex-start;padding:40px;max-width:400px;width:100%}
.ld-16__label-row{color:rgba(255,255,255,.3);font-size:10px;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:4px}

/* Chat bubble with typing dots */
.ld-16__bubble{background:#2d2d44;border-radius:18px 18px 18px 4px;padding:14px 18px;display:inline-flex;align-items:center;gap:6px;max-width:180px}
.ld-16__bubble span{width:8px;height:8px;border-radius:50%;background:var(--c2);animation:ld-16-typing 1.2s ease-in-out infinite}
.ld-16__bubble span:nth-child(1){animation-delay:0s}
.ld-16__bubble span:nth-child(2){animation-delay:.2s}
.ld-16__bubble span:nth-child(3){animation-delay:.4s}
@keyframes ld-16-typing{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-6px);opacity:1}}

/* Inline text dots */
.ld-16__inline{display:flex;align-items:center;gap:8px;color:var(--c2);font-size:14px}
.ld-16__inline-dots{display:flex;gap:3px}
.ld-16__inline-dots span{width:5px;height:5px;border-radius:50%;background:var(--c3);animation:ld-16-typing 1s ease-in-out infinite}
.ld-16__inline-dots span:nth-child(1){animation-delay:0s}
.ld-16__inline-dots span:nth-child(2){animation-delay:.15s}
.ld-16__inline-dots span:nth-child(3){animation-delay:.3s}

/* Cursor blink */
.ld-16__cursor-wrap{color:var(--c1);font-size:16px;display:flex;align-items:center;gap:2px}
.ld-16__cursor{width:2px;height:20px;background:var(--c4);animation:ld-16-blink 1s step-end infinite}
@keyframes ld-16-blink{0%,100%{opacity:1}50%{opacity:0}}

/* Processing dots large */
.ld-16__processing{display:flex;gap:10px;align-items:center}
.ld-16__processing span{width:12px;height:12px;border-radius:50%;background:var(--c4);animation:ld-16-proc 1.4s ease-in-out infinite}
.ld-16__processing span:nth-child(1){animation-delay:0s}
.ld-16__processing span:nth-child(2){animation-delay:.2s;background:var(--c3)}
.ld-16__processing span:nth-child(3){animation-delay:.4s;background:var(--c4)}
@keyframes ld-16-proc{0%,80%,100%{transform:scale(.6) translateY(0);opacity:.4}40%{transform:scale(1) translateY(-10px);opacity:1}}

@media(prefers-reduced-motion:reduce){
  .ld-16__bubble span,.ld-16__inline-dots span,.ld-16__cursor,.ld-16__processing span{animation:none}
}
```

### 17. CSS Staircase Step Loader

**Type:** Pure CSS
**Description:** Three step-progression CSS loaders — a cascading staircase bar chart, a 3×3 pulsing grid, and a multi-bar equaliser — representing data loading, task processing, and multi-step upload flows.

**HTML:**
```html
<div class="ld-17">
  <div class="ld-17__stage">
    <div class="ld-17__cell"><div class="ld-17__stairs"><div class="ld-17__step"></div><div class="ld-17__step"></div><div class="ld-17__step"></div><div class="ld-17__step"></div><div class="ld-17__step"></div></div>
```

**CSS:**
```css
.ld-17,.ld-17 *,.ld-17 *::before,.ld-17 *::after{box-sizing:border-box;margin:0;padding:0}
.ld-17{
  --bg:#0f1923;--c1:#f0db4f;--c2:#e8834a;--c3:#4ecdc4;--c4:#ff6b6b;
  background:var(--bg);display:flex;align-items:center;justify-content:center;min-height:100vh;font-family:'Segoe UI',sans-serif;
}
.ld-17__stage{display:flex;gap:80px;flex-wrap:wrap;justify-content:center;padding:40px;align-items:center}
.ld-17__cell{display:flex;flex-direction:column;align-items:center;gap:24px}
.ld-17__label{color:rgba(255,255,255,.35);font-size:11px;letter-spacing:1.5px;text-transform:uppercase}

/* Staircase ascending */
.ld-17__stairs{display:flex;gap:4px;align-items:flex-end;height:60px}
.ld-17__step{width:12px;border-radius:2px 2px 0 0;animation:ld-17-step 1.4s ease-in-out infinite}
.ld-17__step:nth-child(1){height:10px;background:var(--c1);animation-delay:0s}
.ld-17__step:nth-child(2){height:20px;background:var(--c2);animation-delay:.15s}
.ld-17__step:nth-child(3){height:32px;background:var(--c3);animation-delay:.3s}
.ld-17__step:nth-child(4){height:44px;background:var(--c4);animation-delay:.45s}
.ld-17__step:nth-child(5){height:56px;background:var(--c1);animation-delay:.6s}
@keyframes ld-17-step{0%,100%{opacity:.3;transform:scaleY(.8)}50%{opacity:1;transform:scaleY(1)}}

/* Tetris-style blocks */
.ld-17__tetris{width:60px;height:60px;display:grid;grid-template-columns:repeat(3,1fr);gap:3px}
.ld-17__block{border-radius:3px;background:rgba(255,255,255,.06);animation:ld-17-block 2.1s ease-in-out infinite}
.ld-17__block:nth-child(1){animation-delay:0s;background:rgba(240,219,79,.12)}
.ld-17__block:nth-child(2){animation-delay:.14s}
.ld-17__block:nth-child(3){animation-delay:.28s;background:rgba(78,205,196,.12)}
.ld-17__block:nth-child(4){animation-delay:.42s}
.ld-17__block:nth-child(5){animation-delay:.56s;background:rgba(255,107,107,.12)}
.ld-17__block:nth-child(6){animation-delay:.70s}
.ld-17__block:nth-child(7){animation-delay:.84s;background:rgba(240,219,79,.12)}
.ld-17__block:nth-child(8){animation-delay:.98s}
.ld-17__block:nth-child(9){animation-delay:1.12s;background:rgba(78,205,196,.12)}
@keyframes ld-17-block{0%,100%{opacity:.15}50%{opacity:1;transform:scale(1.05)}}

/* Equalizer */
.ld-17__eq{display:flex;gap:5px;align-items:center;height:60px}
.ld-17__eq-bar{width:10px;border-radius:5px;background:var(--c3);animation:ld-17-eq 1s ease-in-out infinite}
.ld-17__eq-bar:nth-child(1){animation-delay:0s}
.ld-17__eq-bar:nth-child(2){animation-delay:.1s;background:var(--c4)}
.ld-17__eq-bar:nth-child(3){animation-delay:.2s}
.ld-17__eq-bar:nth-child(4){animation-delay:.3s;background:var(--c1)}
.ld-17__eq-bar:nth-child(5){animation-delay:.4s}
@keyframes ld-17-eq{0%{height:8px}25%{height:40px}50%{height:20px}75%{height:55px}100%{height:8px}}

@media(prefers-reduced-motion:reduce){
  .ld-17__step,.ld-17__block,.ld-17__eq-bar{animation:none}
}
```

### 18. CSS Infinity Loop Loader

**Type:** Pure CSS
**Description:** Three infinity and loop CSS loaders — a lemniscate dot path, an SVG animateMotion tracer, and a Möbius counter-spin — creating hypnotic continuous-flow loading indicators.

**HTML:**
```html
<div class="ld-18">
  <div class="ld-18__stage">
    <div class="ld-18__cell">
      <div class="ld-18__lemniscate">
        <div class="ld-18__lem-track">
          <div class="ld-18__lem-dot"></div>
          <div class="ld-18__lem-dot"></div>
          <div class="ld-18__lem-dot"></div>
        </div>
```

**CSS:**
```css
.ld-18,.ld-18 *,.ld-18 *::before,.ld-18 *::after{box-sizing:border-box;margin:0;padding:0}
.ld-18{
  --bg:#05050a;--c1:#00e5ff;--c2:#ff1744;--c3:#76ff03;--c4:#ffea00;
  background:var(--bg);display:flex;align-items:center;justify-content:center;min-height:100vh;font-family:'Segoe UI',sans-serif;
}
.ld-18__stage{display:flex;gap:80px;flex-wrap:wrap;justify-content:center;padding:40px;align-items:center}
.ld-18__cell{display:flex;flex-direction:column;align-items:center;gap:24px}
.ld-18__label{color:rgba(255,255,255,.3);font-size:11px;letter-spacing:1.5px;text-transform:uppercase}

/* Figure-8 / Infinity */
.ld-18__infinity{width:100px;height:50px;position:relative}
.ld-18__infinity svg{width:100px;height:50px}
.ld-18__inf-path{fill:none;stroke:rgba(0,229,255,.15);stroke-width:3}
.ld-18__inf-dot{animation:ld-18-inf-move 2s linear infinite}
@keyframes ld-18-inf-move{0%{offset-distance:0%}100%{offset-distance:100%}}

/* Lemniscate dot tracker */
.ld-18__lemniscate{width:110px;height:55px;position:relative}
.ld-18__lem-track{position:absolute;inset:0}
.ld-18__lem-dot{width:10px;height:10px;border-radius:50%;background:var(--c1);box-shadow:0 0 10px var(--c1);position:absolute;animation:ld-18-lem 2.4s ease-in-out infinite}
.ld-18__lem-dot:nth-child(1){animation-delay:0s}
.ld-18__lem-dot:nth-child(2){animation-delay:.8s;background:var(--c2);box-shadow:0 0 10px var(--c2)}
.ld-18__lem-dot:nth-child(3){animation-delay:1.6s;background:var(--c3);box-shadow:0 0 10px var(--c3)}
@keyframes ld-18-lem{
  0%{top:22px;left:50px}
  12.5%{top:2px;left:80px}
  25%{top:22px;left:100px}
  37.5%{top:42px;left:80px}
  50%{top:22px;left:50px}
  62.5%{top:2px;left:20px}
  75%{top:22px;left:0px}
  87.5%{top:42px;left:20px}
  100%{top:22px;left:50px}
}

/* Möbius strip illusion */
.ld-18__mobius{width:90px;height:45px;position:relative}
.ld-18__mobius::before,.ld-18__mobius::after{content:'';position:absolute;border-radius:50px;border:4px solid transparent}
.ld-18__mobius::before{width:40px;height:40px;top:0;left:0;border-top-color:var(--c4);border-left-color:var(--c4);animation:ld-18-mob1 2s ease-in-out infinite}
.ld-18__mobius::after{width:40px;height:40px;top:0;right:0;border-bottom-color:var(--c2);border-right-color:var(--c2);animation:ld-18-mob2 2s ease-in-out infinite}
@keyframes ld-18-mob1{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
@keyframes ld-18-mob2{0%{transform:rotate(0)}100%{transform:rotate(-360deg)}}

@media(prefers-reduced-motion:reduce){
  .ld-18__inf-dot,.ld-18__lem-dot,.ld-18__mobius::before,.ld-18__mobius::after{animation:none}
}
```

### 19. CSS Gradient Conic Spinner

**Type:** Pure CSS
**Description:** Six conic-gradient CSS spinners — rainbow sweep, sunset arc, dual-sweep, thick gradient arc, nested concentric conics, and a glowing comet — demonstrating the full expressive range of conic-gradient masking.

**HTML:**
```html
<div class="ld-19">
  <div class="ld-19__stage">
    <div class="ld-19__cell"><div class="ld-19__rainbow"></div><span class="ld-19__label">Rainbow Conic</span></div>
    <div class="ld-19__cell"><div class="ld-19__sunset"></div><span class="ld-19__label">Sunset Arc</span></div>
    <div class="ld-19__cell"><div class="ld-19__dual-sweep"></div><span class="ld-19__label">Dual Sweep</span></div>
    <div class="ld-19__cell"><div class="ld-19__thick"></div><span class="ld-19__label">Thick Arc</span></div>
    <div class="ld-19__cell"><div class="ld-19__nested"><span></span><span></span><span></span></div><span class="ld-19__label">Nested Conic</span></div>
    <div class="ld-19__cell"><div class="ld-19__glow"></div><span class="ld-19__label">Glow Conic</span></div>
  </div>
```

**CSS:**
```css
.ld-19,.ld-19 *,.ld-19 *::before,.ld-19 *::after{box-sizing:border-box;margin:0;padding:0}
.ld-19{
  --bg:#0a0a0a;--c1:#ff6b6b;--c2:#ffd93d;--c3:#6bcb77;--c4:#4d96ff;--c5:#c77dff;
  background:var(--bg);display:flex;align-items:center;justify-content:center;min-height:100vh;font-family:'Segoe UI',sans-serif;
}
.ld-19__stage{display:flex;gap:48px;flex-wrap:wrap;justify-content:center;padding:40px}
.ld-19__cell{display:flex;flex-direction:column;align-items:center;gap:18px}
.ld-19__label{color:rgba(255,255,255,.35);font-size:11px;letter-spacing:1.5px;text-transform:uppercase}

/* Rainbow conic */
.ld-19__rainbow{width:70px;height:70px;border-radius:50%;background:conic-gradient(var(--c1),var(--c2),var(--c3),var(--c4),var(--c5),var(--c1));animation:ld-19-spin 1s linear infinite;-webkit-mask:radial-gradient(farthest-side,#0000 calc(100% - 6px),#000 0)}
@keyframes ld-19-spin{to{transform:rotate(360deg)}}

/* Sunset conic */
.ld-19__sunset{width:70px;height:70px;border-radius:50%;background:conic-gradient(transparent 30%,#ff6b6b,#ffd93d,transparent 70%);animation:ld-19-spin 1.5s linear infinite;-webkit-mask:radial-gradient(farthest-side,#0000 calc(100% - 5px),#000 0)}

/* Dual-sweep */
.ld-19__dual-sweep{width:70px;height:70px;border-radius:50%;background:conic-gradient(var(--c4) 0deg,transparent 120deg,var(--c5) 180deg,transparent 300deg,var(--c4) 360deg);animation:ld-19-spin 1.2s linear infinite;-webkit-mask:radial-gradient(farthest-side,#0000 calc(100% - 5px),#000 0)}

/* Thick gradient arc */
.ld-19__thick{width:70px;height:70px;border-radius:50%;background:conic-gradient(transparent 20%,var(--c3),#4d96ff,transparent 80%);animation:ld-19-spin 2s ease-in-out infinite;-webkit-mask:radial-gradient(farthest-side,#0000 calc(100% - 10px),#000 0)}

/* Nested conic */
.ld-19__nested{width:70px;height:70px;position:relative}
.ld-19__nested span{position:absolute;border-radius:50%;background:conic-gradient(transparent 70%,currentColor);animation:ld-19-spin linear infinite;-webkit-mask:radial-gradient(farthest-side,#0000 calc(100% - 4px),#000 0)}
.ld-19__nested span:nth-child(1){inset:0;color:var(--c1);animation-duration:1s}
.ld-19__nested span:nth-child(2){inset:10px;color:var(--c3);animation-duration:1.5s;animation-direction:reverse}
.ld-19__nested span:nth-child(3){inset:20px;color:var(--c4);animation-duration:2s}

/* Glow conic */
.ld-19__glow{width:70px;height:70px;border-radius:50%;background:conic-gradient(transparent 40%,var(--c5),white,var(--c5),transparent 60%);animation:ld-19-spin 1.5s linear infinite;-webkit-mask:radial-gradient(farthest-side,#0000 calc(100% - 6px),#000 0);filter:drop-shadow(0 0 6px var(--c5))}

@media(prefers-reduced-motion:reduce){
  .ld-19__rainbow,.ld-19__sunset,.ld-19__dual-sweep,.ld-19__thick,.ld-19__nested span,.ld-19__glow{animation:none}
}
```

### 20. CSS Particle Burst Loader

**Type:** Pure CSS
**Description:** Three particle CSS loaders — a radial burst with eight directional particles, floating ascending particles, and a 12-arm pulsing starburst — creating energetic, attention-grabbing loading states.

**HTML:**
```html
<div class="ld-20">
  <div class="ld-20__stage">
    <div class="ld-20__cell">
      <div class="ld-20__burst">
        <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
        <div class="ld-20__burst-core"></div>
      </div>
```

**CSS:**
```css
.ld-20,.ld-20 *,.ld-20 *::before,.ld-20 *::after{box-sizing:border-box;margin:0;padding:0}
.ld-20{
  --bg:#0a0012;--c1:#e040fb;--c2:#7c4dff;--c3:#40c4ff;--c4:#64ffda;--c5:#ff6d00;
  background:var(--bg);display:flex;align-items:center;justify-content:center;min-height:100vh;font-family:'Segoe UI',sans-serif;
}
.ld-20__stage{display:flex;gap:80px;flex-wrap:wrap;justify-content:center;padding:40px;align-items:center}
.ld-20__cell{display:flex;flex-direction:column;align-items:center;gap:24px}
.ld-20__label{color:rgba(255,255,255,.3);font-size:11px;letter-spacing:1.5px;text-transform:uppercase}

/* Radial burst */
.ld-20__burst{width:80px;height:80px;position:relative;display:flex;align-items:center;justify-content:center}
.ld-20__burst span{position:absolute;width:6px;height:6px;border-radius:50%;animation:ld-20-burst 1.5s ease-in-out infinite}
.ld-20__burst span:nth-child(1){background:var(--c1);animation-delay:0s;transform-origin:40px 40px;top:37px;left:37px}
.ld-20__burst span:nth-child(2){background:var(--c2);animation-delay:.1s;transform-origin:40px 40px;top:37px;left:37px}
.ld-20__burst span:nth-child(3){background:var(--c3);animation-delay:.2s;transform-origin:40px 40px;top:37px;left:37px}
.ld-20__burst span:nth-child(4){background:var(--c4);animation-delay:.3s;transform-origin:40px 40px;top:37px;left:37px}
.ld-20__burst span:nth-child(5){background:var(--c5);animation-delay:.4s;transform-origin:40px 40px;top:37px;left:37px}
.ld-20__burst span:nth-child(6){background:var(--c1);animation-delay:.5s;transform-origin:40px 40px;top:37px;left:37px}
.ld-20__burst span:nth-child(7){background:var(--c2);animation-delay:.6s;transform-origin:40px 40px;top:37px;left:37px}
.ld-20__burst span:nth-child(8){background:var(--c3);animation-delay:.7s;transform-origin:40px 40px;top:37px;left:37px}
@keyframes ld-20-burst{
  0%{transform:rotate(calc(var(--r,0)*45deg)) translateY(0);opacity:1;width:6px;height:6px}
  80%{opacity:.6}
  100%{transform:rotate(calc(var(--r,0)*45deg)) translateY(-34px);opacity:0;width:3px;height:3px}
}
.ld-20__burst span:nth-child(1){--r:0}
.ld-20__burst span:nth-child(2){--r:1}
.ld-20__burst span:nth-child(3){--r:2}
.ld-20__burst span:nth-child(4){--r:3}
.ld-20__burst span:nth-child(5){--r:4}
.ld-20__burst span:nth-child(6){--r:5}
.ld-20__burst span:nth-child(7){--r:6}
.ld-20__burst span:nth-child(8){--r:7}
.ld-20__burst-core{width:12px;height:12px;border-radius:50%;background:var(--c1);box-shadow:0 0 12px var(--c1),0 0 24px rgba(224,64,251,.4);animation:ld-20-core 1.5s ease-in-out infinite}
@keyframes ld-20-core{0%,100%{transform:scale(.8);opacity:.7}50%{transform:scale(1.2);opacity:1}}

/* Floating particles */
.ld-20__float{width:80px;height:80px;position:relative}
.ld-20__float span{position:absolute;border-radius:50%;animation:ld-20-float linear infinite}
.ld-20__float span:nth-child(1){width:8px;height:8px;background:var(--c1);left:10px;top:60px;animation-duration:2s;animation-delay:0s}
.ld-20__float span:nth-child(2){width:5px;height:5px;background:var(--c3);left:35px;top:65px;animation-duration:2.5s;animation-delay:.3s}
.ld-20__float span:nth-child(3){width:7px;height:7px;background:var(--c4);left:55px;top:62px;animation-duration:1.8s;animation-delay:.6s}
.ld-20__float span:nth-child(4){width:4px;height:4px;background:var(--c2);left:20px;top:70px;animation-duration:2.2s;animation-delay:.9s}
.ld-20__float span:nth-child(5){width:6px;height:6px;background:var(--c5);left:45px;top:68px;animation-duration:1.6s;animation-delay:1.2s}
@keyframes ld-20-float{0%{transform:translateY(0) scale(1);opacity:1}100%{transform:translateY(-80px) scale(0);opacity:0}}

/* Starburst */
.ld-20__star{width:80px;height:80px;position:relative;display:flex;align-items:center;justify-content:center}
.ld-20__star-arm{position:absolute;width:3px;height:30px;border-radius:2px;transform-origin:50% 100%;bottom:50%;left:calc(50% - 1.5px);animation:ld-20-star-arm 2s ease-in-out infinite}
.ld-20__star-arm:nth-child(1){transform:rotate(0deg);background:var(--c1);animation-delay:0s}
.ld-20__star-arm:nth-child(2){transform:rotate(30deg);background:var(--c2);animation-delay:.17s}
.ld-20__star-arm:nth-child(3){transform:rotate(60deg);background:var(--c3);animation-delay:.33s}
.ld-20__star-arm:nth-child(4){transform:rotate(90deg);background:var(--c4);animation-delay:.5s}
.ld-20__star-arm:nth-child(5){transform:rotate(120deg);background:var(--c5);animation-delay:.67s}
.ld-20__star-arm:nth-child(6){transform:rotate(150deg);background:var(--c1);animation-delay:.83s}
.ld-20__star-arm:nth-child(7){transform:rotate(180deg);background:var(--c2);animation-delay:1s}
.ld-20__star-arm:nth-child(8){transform:rotate(210deg);background:var(--c3);animation-delay:1.17s}
.ld-20__star-arm:nth-child(9){transform:rotate(240deg);background:var(--c4);animation-delay:1.33s}
.ld-20__star-arm:nth-child(10){transform:rotate(270deg);background:var(--c5);animation-delay:1.5s}
.ld-20__star-arm:nth-child(11){transform:rotate(300deg);background:var(--c1);animation-delay:1.67s}
.ld-20__star-arm:nth-child(12){transform:rotate(330deg);background:var(--c2);animation-delay:1.83s}
@keyframes ld-20-star-arm{0%,100%{opacity:.2;height:14px}50%{opacity:1;height:30px;box-shadow:0 -6px 8px currentColor}}

@media(prefers-reduced-motion:reduce){
  .ld-20__burst span,.ld-20__burst-core,.ld-20__float span,.ld-20__star-arm{animation:none}
}
```

---
## 15 Pure CSS Loading Animations

URL: https://codefronts.com/motion/css-loading-animations/
Description: 15 hand-coded CSS loading animations — DNA helix, liquid blob, orbit system, neon ring, hourglass flip, listing skeleton, building loader and more. Pure CSS, drop-in ready.
Demo count: 15

### 01. House Unlock

**Type:** CSS + JS
**Description:** A closed-front-door loader for property sites. The window stays dark while the key turns; once "loaded" (the .ready class is added), the window glows warm gold and the door opens to reveal a softly-lit room. Ideal as a real-estate page-load cover.

**HTML:**
```html
<div class="hu-stage">
  <figure class="hu-house" aria-label="Loading your home tour">
    <span class="hu-roof"></span>
    <span class="hu-body">
      <span class="hu-window">
        <span class="hu-window-glass"></span>
      </span>
      <span class="hu-door">
        <span class="hu-door-handle"></span>
        <span class="hu-key">
          <span class="hu-key-bow"></span>
          <span class="hu-key-shaft"></span>
          <span class="hu-key-teeth"></span>
        </span>
      </span>
      <span class="hu-floor"></span>
    </span>
    <figcaption class="hu-caption">Unlocking your tour…</figcaption>
  </figure>
</div>
```

**CSS:**
```css
.hu-stage {
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(60% 60% at 50% 100%, rgba(212, 175, 55, 0.1) 0%, transparent 70%),
    linear-gradient(180deg, #14132b 0%, #0b0b1a 100%);
  border-radius: 16px;
  width: 220px;
  height: 220px;
}

.hu-house {
  position: relative;
  width: 132px;
  height: 152px;
  margin: 0;
  padding: 0;
  font-family: system-ui, sans-serif;
}

.hu-roof {
  position: absolute;
  top: 0;
  left: 50%;
  width: 0;
  height: 0;
  border: 30px solid transparent;
  border-bottom-color: #d4af37;
  transform: translateX(-50%);
  filter: drop-shadow(0 4px 10px rgba(212, 175, 55, 0.25));
}

.hu-body {
  position: absolute;
  top: 56px;
  left: 6px;
  width: 120px;
  height: 86px;
  background: linear-gradient(180deg, #f5f0e6 0%, #e8e0d0 100%);
  border-radius: 4px 4px 6px 6px;
  box-shadow: 0 12px 28px -12px rgba(0, 0, 0, 0.55);
  overflow: hidden;
}

.hu-floor {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 6px;
  background: #2a1f1a;
}

.hu-window {
  position: absolute;
  top: 14px;
  left: 14px;
  width: 36px;
  height: 28px;
  border: 2px solid #d4af37;
  border-radius: 3px;
  background: #0a0a14;
  overflow: hidden;
  transition:
    background 0.6s ease,
    box-shadow 0.6s ease;
}

.hu-window::before,
.hu-window::after {
  content: "";
  position: absolute;
  background: #d4af37;
}

.hu-window::before {
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1.5px;
  transform: translateX(-50%);
}

.hu-window::after {
  left: 0;
  right: 0;
  top: 50%;
  height: 1.5px;
  transform: translateY(-50%);
}

.hu-window-glass {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 70%, #ffd479 0%, #d4af37 50%, transparent 75%);
  opacity: 0;
  transform: scale(0.7);
  transition:
    opacity 0.7s ease,
    transform 0.7s ease;
}

.hu-door {
  position: absolute;
  bottom: 6px;
  left: 50%;
  width: 38px;
  height: 60px;
  margin-left: -19px;
  background: linear-gradient(180deg, #6b3f2a 0%, #4a2d1f 100%);
  border-radius: 5px 5px 0 0;
  border: 1px solid rgba(0, 0, 0, 0.4);
  transform-origin: left center;
  transform: rotateY(0deg);
  transition: transform 0.85s cubic-bezier(0.5, 0, 0.3, 1.2);
  box-shadow: inset -2px 0 0 rgba(255, 255, 255, 0.04);
}

.hu-door-handle {
  position: absolute;
  right: 5px;
  top: 50%;
  width: 5px;
  height: 5px;
  margin-top: -2.5px;
  background: #d4af37;
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(212, 175, 55, 0.55);
}

.hu-key {
  position: absolute;
  right: 10px;
  top: 50%;
  width: 22px;
  height: 8px;
  margin-top: -4px;
  transform-origin: 18px center;
  animation: huKeyTurn 2.4s cubic-bezier(0.5, 0, 0.3, 1.2) infinite;
}

.hu-key-bow {
  position: absolute;
  left: 0;
  top: -3px;
  width: 14px;
  height: 14px;
  border: 2px solid #d4af37;
  border-radius: 50%;
  background: rgba(212, 175, 55, 0.12);
  box-shadow: 0 0 8px rgba(212, 175, 55, 0.35);
}

.hu-key-shaft {
  position: absolute;
  left: 12px;
  top: 50%;
  width: 9px;
  height: 2px;
  margin-top: -1px;
  background: #d4af37;
  border-radius: 1px;
}

.hu-key-teeth {
  position: absolute;
  right: 0;
  top: 50%;
  width: 4px;
  height: 4px;
  margin-top: -2px;
  background: #d4af37;
  border-radius: 0 1px 1px 0;
  box-shadow: -3px 2px 0 0 #d4af37;
}

.hu-caption {
  position: absolute;
  left: 50%;
  bottom: -28px;
  transform: translateX(-50%);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: #d4af37;
  white-space: nowrap;
  animation: huCaption 2.4s ease-in-out infinite;
}

.hu-house.ready .hu-window {
  background: #ffd479;
  box-shadow:
    0 0 14px rgba(255, 212, 121, 0.55),
    inset 0 0 12px rgba(255, 212, 121, 0.4);
}

.hu-house.ready .hu-window-glass {
  opacity: 1;
  transform: scale(1);
}

.hu-house.ready .hu-door {
  transform: rotateY(-72deg);
}

.hu-house.ready .hu-key,
.hu-house.ready .hu-caption {
  display: none;
}
@keyframes huKeyTurn {
  0%,
  18% {
    transform: rotate(0deg) translateX(0) scale(1);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  35%,
  60% {
    transform: rotate(90deg) translateX(0) scale(1);
    opacity: 1;
  }
  78% {
    transform: rotate(90deg) translateX(-6px) scale(0.6);
    opacity: 0;
  }
  100% {
    transform: rotate(0deg) translateX(0) scale(1);
    opacity: 0;
  }
}
@keyframes huCaption {
  0%,
  100% {
    opacity: 0.55;
  }
  50% {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hu-stage,
  .hu-stage * {
    animation: none !important;
  }
}

```

**JS:**
```js
// Drives the door-open reveal. Replace with your real "page loaded" trigger.
document.querySelectorAll(".hu-house").forEach(function (house) {
  var ready = false;
  function tick() {
    ready = !ready;
    house.classList.toggle("ready", ready);
    setTimeout(tick, ready ? 1800 : 3200);
  }
  setTimeout(tick, 3200);
});
```

### 02. Listing Card Skeleton

**Type:** CSS + JS
**Description:** A premium listing-card skeleton that mirrors the real layout — photo, price, address, agent — then crossfades into the loaded card when `.ready` is added. Users see the page shape before content arrives, which is the modern, perceived-performance pattern used by Airbnb and Booking. Respects `prefers-reduced-motion`.

**HTML:**
```html
<div class="lc-card" aria-busy="true" aria-live="polite">
  <span class="lc-img">
    <span class="lc-img-shimmer" aria-hidden="true"></span>
  </span>
  <span class="lc-row lc-row-top">
    <span class="lc-bar lc-bar-price"></span>
    <span class="lc-bar lc-bar-badge"></span>
  </span>
  <span class="lc-bar lc-bar-line lc-bar-w-90"></span>
  <span class="lc-bar lc-bar-line lc-bar-w-60"></span>
  <span class="lc-row lc-row-meta">
    <span class="lc-bar lc-bar-pill"></span>
    <span class="lc-bar lc-bar-pill"></span>
    <span class="lc-bar lc-bar-pill"></span>
  </span>
  <span class="lc-row lc-row-agent">
    <span class="lc-avatar"></span>
    <span class="lc-bar lc-bar-name"></span>
  </span>
  <span class="lc-loaded" aria-hidden="true">
    <span class="lc-loaded-img"></span>
    <span class="lc-loaded-price">£1,250,000</span>
    <span class="lc-loaded-badge">For sale</span>
    <span class="lc-loaded-addr">42 Oakwood Lane, Notting Hill</span>
    <span class="lc-loaded-meta"><span>4 bed</span><span>3 bath</span><span>2,140 ft²</span></span>
    <span class="lc-loaded-agent">
      <span class="lc-loaded-avatar">SR</span>
      <span class="lc-loaded-agent-name">Sarah Rowan · Boutique Estates</span>
    </span>
  </span>
</div>
```

**CSS:**
```css
.lc-card {
  position: relative;
  display: grid;
  gap: 8px;
  width: 240px;
  padding: 10px;
  background: #15151d;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  font-family: system-ui, sans-serif;
}

.lc-img {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 3;
  border-radius: 10px;
  background: linear-gradient(135deg, #1f2433 0%, #2a3045 100%);
  overflow: hidden;
}

.lc-img-shimmer {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.08) 50%,
    transparent 100%
  );
  transform: translateX(-100%);
  animation: lcShimmer 1.6s ease-in-out infinite;
}

.lc-bar {
  display: block;
  height: 10px;
  background: linear-gradient(90deg, #1f2433, #2a3045, #1f2433);
  background-size: 200% 100%;
  border-radius: 6px;
  animation: lcPulse 1.6s ease-in-out infinite;
}

.lc-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.lc-row-top {
  justify-content: space-between;
}

.lc-bar-price {
  width: 82px;
  height: 16px;
}

.lc-bar-badge {
  width: 56px;
  height: 16px;
  border-radius: 99px;
}

.lc-bar-line {
  height: 9px;
}

.lc-bar-w-90 {
  width: 90%;
}

.lc-bar-w-60 {
  width: 60%;
}

.lc-row-meta {
  gap: 5px;
}

.lc-bar-pill {
  width: 48px;
  height: 16px;
  border-radius: 99px;
}

.lc-row-agent {
  gap: 8px;
  padding-top: 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  margin-top: 2px;
}

.lc-avatar {
  display: block;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1f2433, #2a3045);
  background-size: 200% 100%;
  animation: lcPulse 1.6s ease-in-out infinite;
}

.lc-bar-name {
  flex: 1;
  height: 10px;
}

.lc-loaded {
  position: absolute;
  inset: 0;
  padding: 10px;
  background: #15151d;
  border-radius: 14px;
  display: grid;
  gap: 8px;
  align-content: start;
  font-family: system-ui, sans-serif;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

.lc-loaded-img {
  display: block;
  width: 100%;
  aspect-ratio: 5 / 3;
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(15, 15, 19, 0) 60%, rgba(15, 15, 19, 0.45) 100%),
    linear-gradient(135deg, #5b8cb8 0%, #8aa6c0 35%, #d4b896 100%);
  position: relative;
}

.lc-loaded-img::before {
  content: "";
  position: absolute;
  bottom: 8px;
  left: 8px;
  width: 22px;
  height: 22px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  backdrop-filter: blur(6px);
}

.lc-loaded-img::after {
  content: "♡";
  position: absolute;
  bottom: 11px;
  left: 14px;
  font-size: 11px;
  color: #fff;
  line-height: 1;
}

.lc-loaded-price {
  font-size: 16px;
  font-weight: 700;
  color: #f0eeff;
  letter-spacing: -0.01em;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.lc-loaded-price::after {
  content: "For sale";
  font-size: 9px;
  font-weight: 600;
  background: rgba(46, 184, 138, 0.18);
  color: #2eb88a;
  padding: 3px 8px;
  border-radius: 99px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.lc-loaded-badge {
  display: none;
}

.lc-loaded-addr {
  font-size: 11px;
  color: #b8b6d4;
  line-height: 1.4;
}

.lc-loaded-meta {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.lc-loaded-meta span {
  font-size: 9px;
  font-weight: 600;
  background: rgba(124, 108, 255, 0.1);
  color: #a78bfa;
  padding: 3px 8px;
  border-radius: 99px;
  letter-spacing: 0.04em;
}

.lc-loaded-agent {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  margin-top: 2px;
}

.lc-loaded-avatar {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, #d4b896, #b89970);
  color: #2a1f1a;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.lc-loaded-agent-name {
  font-size: 10px;
  color: #c8c0ff;
}

.lc-card.ready .lc-loaded {
  opacity: 1;
  pointer-events: auto;
}

.lc-card.ready > :not(.lc-loaded) {
  opacity: 0;
}

.lc-card > :not(.lc-loaded) {
  transition: opacity 0.4s ease;
}

@media (prefers-reduced-motion: reduce) {
  .lc-img-shimmer,
  .lc-bar,
  .lc-avatar {
    animation: none;
  }
}
@keyframes lcShimmer {
  100% {
    transform: translateX(100%);
  }
}
@keyframes lcPulse {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}
```

**JS:**
```js
// Toggles the .ready state to crossfade skeleton -> loaded card.
// Replace this loop with your real "data fetched" trigger.
document.querySelectorAll(".lc-card").forEach(function (card) {
  var ready = false;
  function tick() {
    ready = !ready;
    card.classList.toggle("ready", ready);
    card.setAttribute("aria-busy", ready ? "false" : "true");
    setTimeout(tick, ready ? 2200 : 2800);
  }
  setTimeout(tick, 2800);
});
```

### 03. Progress Path

**Type:** CSS + JS
**Description:** An honest progress bar built on the native `<progress>` element — semantic, screen-reader-announced, and bindable to real load progress (image preloads, fetch chunks, route transitions). A moving plane glides along the path, with the percentage announced via `aria-valuenow`. Degrades gracefully: a static bar appears if JS is disabled.

**HTML:**
```html
<div class="pp-loader" role="status">
  <div class="pp-track">
    <progress class="pp-progress" value="0" max="100" aria-label="Page loading progress">
      0%
    </progress>
    <span class="pp-glider" aria-hidden="true">
      <svg
        viewBox="0 0 24 24"
        width="14"
        height="14"
        fill="none"
        stroke="currentColor"
        stroke-width="1.8"
        stroke-linecap="round"
        stroke-linejoin="round"
      >
        <path d="M2 12l20-9-9 20-2-9-9-2z" />
      </svg>
    </span>
    <span class="pp-pin pp-pin-start" aria-hidden="true"></span>
    <span class="pp-pin pp-pin-end" aria-hidden="true"></span>
  </div>
  <div class="pp-meta">
    <span class="pp-label">Preparing your tour</span>
    <span class="pp-percent" aria-live="polite">0%</span>
  </div>
</div>
```

**CSS:**
```css
.pp-loader {
  width: 240px;
  display: grid;
  gap: 10px;
  font-family: system-ui, sans-serif;
}

.pp-track {
  position: relative;
  height: 28px;
  display: grid;
  align-items: center;
  padding: 0 10px;
}

.pp-progress {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 4px;
  border: 0;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
  color: #d4af37;
}

.pp-progress::-webkit-progress-bar {
  background: rgba(255, 255, 255, 0.06);
  border-radius: 99px;
}

.pp-progress::-webkit-progress-value {
  background: linear-gradient(90deg, #5b8cb8, #d4af37);
  border-radius: 99px;
  transition: width 0.2s ease;
}

.pp-progress::-moz-progress-bar {
  background: linear-gradient(90deg, #5b8cb8, #d4af37);
  border-radius: 99px;
}

.pp-pin {
  position: absolute;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
}

.pp-pin-start {
  left: 7px;
  background: #5b8cb8;
  box-shadow: 0 0 8px rgba(91, 140, 184, 0.55);
}

.pp-pin-end {
  right: 7px;
  background: rgba(212, 175, 55, 0.45);
}

.pp-glider {
  position: absolute;
  top: 50%;
  left: 10px;
  width: 22px;
  height: 22px;
  margin-top: -11px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #ffd479, #d4af37);
  color: #1a1a2e;
  border-radius: 50%;
  box-shadow:
    0 0 0 3px rgba(212, 175, 55, 0.18),
    0 4px 14px -4px rgba(212, 175, 55, 0.7);
  transform: translateX(0);
  transition: transform 0.2s ease;
}

.pp-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pp-label {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: #b8b6d4;
}

.pp-percent {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  font-weight: 700;
  color: #d4af37;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  .pp-glider {
    transition: none;
  }
  .pp-progress::-webkit-progress-value {
    transition: none;
  }
}
```

**JS:**
```js
// Drives the indeterminate-then-determinate progress simulation.
// Replace this loop with your real fetch-progress callback.
document.querySelectorAll(".pp-loader").forEach(function (loader) {
  var progress = loader.querySelector(".pp-progress");
  var glider = loader.querySelector(".pp-glider");
  var percent = loader.querySelector(".pp-percent");
  if (!progress || !glider || !percent) return;

  var v = 0;
  function set(value) {
    v = Math.max(0, Math.min(100, value));
    progress.value = v;
    percent.textContent = Math.round(v) + "%";
    var track = loader.querySelector(".pp-track");
    var max = track.offsetWidth - 20 - 22; // padding (20) + glider (22)
    if (max < 0) max = 0;
    glider.style.transform = "translateX(" + (max * v) / 100 + "px)";
  }

  function loop() {
    set(0);
    var step = 0;
    var id = setInterval(function () {
      step++;
      var next = v + (step < 4 ? 18 : step < 8 ? 8 : 3);
      set(next);
      if (v >= 100) {
        clearInterval(id);
        setTimeout(loop, 1400);
      }
    }, 220);
  }
  loop();
});
```

### 04. Heat-Map Compass

**Type:** CSS + JS
**Description:** A premium navigation loader for property and travel platforms — a brass compass dial with cardinal points lighting one at a time as warm "heat" rings pulse outward. A monospace coordinate readout drifts below, suggesting the system is "scanning your neighbourhood". Honest narrative for indeterminate location-aware loads.

**HTML:**
```html
<figure class="hc-loader" role="status" aria-label="Searching nearby properties">
  <span class="hc-rings" aria-hidden="true">
    <span class="hc-ring"></span>
    <span class="hc-ring"></span>
    <span class="hc-ring"></span>
  </span>
  <span class="hc-dial" aria-hidden="true">
    <span class="hc-mark hc-mark-n">N</span>
    <span class="hc-mark hc-mark-e">E</span>
    <span class="hc-mark hc-mark-s">S</span>
    <span class="hc-mark hc-mark-w">W</span>
    <span class="hc-needle"></span>
    <span class="hc-pivot"></span>
  </span>
  <figcaption class="hc-coord" aria-live="polite" data-hc-coord>51.5074°N · 0.1278°W</figcaption>
</figure>
```

**CSS:**
```css
.hc-loader {
  position: relative;
  width: 180px;
  height: 180px;
  margin: 0;
  padding: 0;
  display: grid;
  place-items: center;
  font-family: system-ui, sans-serif;
}

.hc-rings {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.hc-ring {
  position: absolute;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  border: 1.5px solid #5b8cb8;
  opacity: 0;
  animation: hcRing 2.6s ease-out infinite;
}

.hc-ring:nth-child(1) {
  animation-delay: 0s;
}

.hc-ring:nth-child(2) {
  animation-delay: 0.85s;
}

.hc-ring:nth-child(3) {
  animation-delay: 1.7s;
}

.hc-dial {
  position: relative;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 25%, rgba(255, 212, 121, 0.12) 0%, transparent 55%),
    radial-gradient(circle at 50% 50%, #1a1d2e 0%, #0f1220 70%);
  border: 2px solid #d4af37;
  box-shadow:
    inset 0 0 18px rgba(212, 175, 55, 0.18),
    0 4px 18px -4px rgba(212, 175, 55, 0.4),
    0 0 0 1px rgba(212, 175, 55, 0.25);
  animation: hcDialSpin 18s linear infinite;
}

.hc-mark {
  position: absolute;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  font-weight: 700;
  color: rgba(212, 175, 55, 0.4);
  letter-spacing: 0.06em;
  transition: color 0.3s ease;
  animation: hcMark 2.6s ease-in-out infinite;
}

.hc-mark-n {
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  animation-delay: 0s;
}

.hc-mark-e {
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  animation-delay: 0.65s;
}

.hc-mark-s {
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  animation-delay: 1.3s;
}

.hc-mark-w {
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  animation-delay: 1.95s;
}

.hc-needle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2px;
  height: 70px;
  margin: -35px 0 0 -1px;
  background: linear-gradient(180deg, #ffd479 0%, #d4af37 48%, #2a3045 52%, #1a1d2e 100%);
  border-radius: 2px;
  transform-origin: center center;
  animation: hcNeedle 5s cubic-bezier(0.5, 0.05, 0.3, 0.95) infinite;
  box-shadow: 0 0 8px rgba(212, 175, 55, 0.4);
}

.hc-pivot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  background: #ffd479;
  border-radius: 50%;
  box-shadow:
    0 0 0 2px #1a1d2e,
    0 0 10px rgba(255, 212, 121, 0.6);
}

.hc-coord {
  position: absolute;
  bottom: -22px;
  left: 50%;
  transform: translateX(-50%);
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  font-weight: 600;
  color: #5eead4;
  letter-spacing: 0.04em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  .hc-ring,
  .hc-dial,
  .hc-mark,
  .hc-needle {
    animation: none;
  }
  .hc-mark {
    color: #ffd479;
  }
}
@keyframes hcRing {
  0% {
    transform: scale(0.6);
    border-color: #5b8cb8;
    opacity: 0;
  }
  15% {
    opacity: 0.9;
  }
  60% {
    border-color: #d4af37;
  }
  100% {
    transform: scale(2.05);
    border-color: #d4af37;
    opacity: 0;
  }
}
@keyframes hcDialSpin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes hcMark {
  0%,
  80%,
  100% {
    color: rgba(212, 175, 55, 0.4);
    text-shadow: none;
  }
  10%,
  30% {
    color: #ffd479;
    text-shadow: 0 0 8px rgba(255, 212, 121, 0.7);
  }
}
@keyframes hcNeedle {
  0% {
    transform: rotate(-22deg);
  }
  25% {
    transform: rotate(80deg);
  }
  50% {
    transform: rotate(-40deg);
  }
  75% {
    transform: rotate(140deg);
  }
  100% {
    transform: rotate(-22deg);
  }
}
```

**JS:**
```js
// Cycles the coordinate readout to suggest a real "scanning" load.
var hcCoords = [
  "51.5074°N · 0.1278°W", // London
  "40.7128°N · 74.0060°W", // New York
  "34.0522°N · 118.2437°W", // Los Angeles
  "48.8566°N · 2.3522°E", // Paris
  "35.6762°N · 139.6503°E", // Tokyo
];
document.querySelectorAll("[data-hc-coord]").forEach(function (node) {
  var i = 0;
  setInterval(function () {
    i = (i + 1) % hcCoords.length;
    node.textContent = hcCoords[i];
  }, 1900);
});
```

### 05. Floor-by-Floor

**Type:** CSS + JS
**Description:** A vertical luxury-building loader. Floors light up bottom-to-top like an elevator passing each level, room silhouettes flicker on inside, and a penthouse glow crowns the building when `.ready` is added. Turns waiting time into an architectural narrative — perfect for residential developments and high-end real estate.

**HTML:**
```html
<figure class="fb-loader" role="status" aria-label="Loading building tour">
  <span class="fb-building" aria-hidden="true">
    <span class="fb-roof"></span>
    <span class="fb-penthouse">
      <span class="fb-pent-light"></span>
    </span>
    <span class="fb-floor" data-floor="6"
      ><span class="fb-room"></span><span class="fb-room"></span><span class="fb-room"></span
    ></span>
    <span class="fb-floor" data-floor="5"
      ><span class="fb-room"></span><span class="fb-room"></span><span class="fb-room"></span
    ></span>
    <span class="fb-floor" data-floor="4"
      ><span class="fb-room"></span><span class="fb-room"></span><span class="fb-room"></span
    ></span>
    <span class="fb-floor" data-floor="3"
      ><span class="fb-room"></span><span class="fb-room"></span><span class="fb-room"></span
    ></span>
    <span class="fb-floor" data-floor="2"
      ><span class="fb-room"></span><span class="fb-room"></span><span class="fb-room"></span
    ></span>
    <span class="fb-floor" data-floor="1"
      ><span class="fb-room"></span><span class="fb-room"></span><span class="fb-room"></span
    ></span>
    <span class="fb-base"></span>
  </span>
  <figcaption class="fb-caption">Touring residences…</figcaption>
</figure>
```

**CSS:**
```css
.fb-loader {
  position: relative;
  width: 110px;
  height: 200px;
  margin: 0;
  padding: 0;
  display: grid;
  place-items: end center;
  font-family: system-ui, sans-serif;
}

.fb-building {
  position: relative;
  width: 84px;
  display: flex;
  flex-direction: column;
  border-radius: 4px 4px 0 0;
  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.55));
}

.fb-roof {
  height: 4px;
  background: linear-gradient(90deg, transparent 8%, #d4af37 8%, #d4af37 92%, transparent 92%);
  border-radius: 2px 2px 0 0;
  margin-bottom: 1px;
}

.fb-penthouse {
  position: relative;
  height: 22px;
  background: linear-gradient(180deg, #1f2433 0%, #161b2a 100%);
  border: 1px solid rgba(212, 175, 55, 0.25);
  border-bottom: 0;
  display: grid;
  place-items: center;
}

.fb-pent-light {
  width: 60%;
  height: 8px;
  border-radius: 2px;
  background: rgba(255, 212, 121, 0.08);
  transition:
    background 0.6s ease,
    box-shadow 0.6s ease;
}

.fb-floor {
  position: relative;
  height: 22px;
  background: linear-gradient(180deg, #1a1f2e 0%, #14182a 100%);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-bottom: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: 4px 6px;
  box-sizing: border-box;
}

.fb-room {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 1.5px;
  transition:
    background 0.4s ease,
    box-shadow 0.4s ease;
}

.fb-base {
  height: 6px;
  background: #2a1f1a;
  border-radius: 0 0 4px 4px;
}

.fb-floor[data-floor="1"] .fb-room {
  animation: fbWindow 7s ease-in-out infinite;
  animation-delay: 0s;
}

.fb-floor[data-floor="2"] .fb-room {
  animation: fbWindow 7s ease-in-out infinite;
  animation-delay: 0.7s;
}

.fb-floor[data-floor="3"] .fb-room {
  animation: fbWindow 7s ease-in-out infinite;
  animation-delay: 1.4s;
}

.fb-floor[data-floor="4"] .fb-room {
  animation: fbWindow 7s ease-in-out infinite;
  animation-delay: 2.1s;
}

.fb-floor[data-floor="5"] .fb-room {
  animation: fbWindow 7s ease-in-out infinite;
  animation-delay: 2.8s;
}

.fb-floor[data-floor="6"] .fb-room {
  animation: fbWindow 7s ease-in-out infinite;
  animation-delay: 3.5s;
}

.fb-floor[data-floor="1"] .fb-room:nth-child(2) {
  animation-delay: 0.15s;
}

.fb-floor[data-floor="1"] .fb-room:nth-child(3) {
  animation-delay: 0.3s;
}

.fb-floor[data-floor="2"] .fb-room:nth-child(2) {
  animation-delay: 0.85s;
}

.fb-floor[data-floor="2"] .fb-room:nth-child(3) {
  animation-delay: 1s;
}

.fb-floor[data-floor="3"] .fb-room:nth-child(2) {
  animation-delay: 1.55s;
}

.fb-floor[data-floor="3"] .fb-room:nth-child(3) {
  animation-delay: 1.7s;
}

.fb-floor[data-floor="4"] .fb-room:nth-child(2) {
  animation-delay: 2.25s;
}

.fb-floor[data-floor="4"] .fb-room:nth-child(3) {
  animation-delay: 2.4s;
}

.fb-floor[data-floor="5"] .fb-room:nth-child(2) {
  animation-delay: 2.95s;
}

.fb-floor[data-floor="5"] .fb-room:nth-child(3) {
  animation-delay: 3.1s;
}

.fb-floor[data-floor="6"] .fb-room:nth-child(2) {
  animation-delay: 3.65s;
}

.fb-floor[data-floor="6"] .fb-room:nth-child(3) {
  animation-delay: 3.8s;
}

.fb-caption {
  position: absolute;
  bottom: -22px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: #d4af37;
  white-space: nowrap;
  animation: fbCap 2.6s ease-in-out infinite;
}

.fb-loader.ready .fb-room {
  animation: none;
  background: #ffd479;
  box-shadow:
    0 0 4px rgba(255, 212, 121, 0.55),
    inset 0 0 3px rgba(255, 212, 121, 0.45);
}

.fb-loader.ready .fb-pent-light {
  background: #ffd479;
  box-shadow:
    0 0 14px rgba(255, 212, 121, 0.7),
    inset 0 0 8px rgba(255, 212, 121, 0.5);
}

.fb-loader.ready .fb-caption {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .fb-room,
  .fb-caption {
    animation: none;
  }
  .fb-room {
    background: rgba(255, 212, 121, 0.45);
  }
}
@keyframes fbWindow {
  0%,
  5% {
    background: rgba(255, 255, 255, 0.03);
    box-shadow: none;
  }
  15%,
  60% {
    background: #ffd479;
    box-shadow:
      0 0 4px rgba(255, 212, 121, 0.55),
      inset 0 0 3px rgba(255, 212, 121, 0.45);
  }
  80%,
  100% {
    background: rgba(255, 255, 255, 0.03);
    box-shadow: none;
  }
}
@keyframes fbCap {
  0%,
  100% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
}
```

**JS:**
```js
// Drives the elevator/penthouse "ready" reveal. Replace with your real load trigger.
document.querySelectorAll(".fb-loader").forEach(function (b) {
  var ready = false;
  function tick() {
    ready = !ready;
    b.classList.toggle("ready", ready);
    setTimeout(tick, ready ? 2400 : 5400);
  }
  setTimeout(tick, 5400);
});
```

### 06. DNA Helix

**Type:** Pure CSS
**Description:** Alternating dots oscillate up and down in a staggered wave, mimicking the visual rhythm of a DNA double helix.

**HTML:**
```html
<div class="dna">
  <div class="dna-dot"></div>
  <div class="dna-dot"></div>
  <div class="dna-dot"></div>
  <div class="dna-dot"></div>
  <div class="dna-dot"></div>
  <div class="dna-dot"></div>
</div>
```

**CSS:**
```css
.dna {
  display: flex;
  gap: 6px;
  align-items: center;
}
.dna-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  animation: dna 1.2s ease-in-out infinite;
}
.dna-dot:nth-child(odd) {
  background: #7c6cff;
}
.dna-dot:nth-child(even) {
  background: #ff6c8a;
}
.dna-dot:nth-child(1) {
  animation-delay: 0s;
}
.dna-dot:nth-child(2) {
  animation-delay: 0.1s;
}
.dna-dot:nth-child(3) {
  animation-delay: 0.2s;
}
.dna-dot:nth-child(4) {
  animation-delay: 0.3s;
}
.dna-dot:nth-child(5) {
  animation-delay: 0.4s;
}
.dna-dot:nth-child(6) {
  animation-delay: 0.5s;
}
@keyframes dna {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-18px) scale(0.7);
  }
}

@media (prefers-reduced-motion: reduce) {
  .dna,
  .dna * {
    animation: none !important;
  }
}

```

### 07. Liquid Blob

**Type:** Pure CSS
**Description:** A gradient circle morphs its border-radius through organic blob shapes, creating a fluid, living feeling.

**HTML:**
```html
<div class="blob"></div>
```

**CSS:**
```css
.blob {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #7c6cff, #ff6c8a);
  border-radius: 50%;
  animation: blob 2.5s ease-in-out infinite;
}
@keyframes blob {
  0%,
  100% {
    border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
  }
  25% {
    border-radius: 60% 40% 70% 30% / 40% 60% 40% 60%;
  }
  50% {
    border-radius: 30% 70% 40% 60% / 60% 30% 70% 40%;
  }
  75% {
    border-radius: 50% 50% 30% 70% / 30% 70% 50% 50%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .blob,
  .blob * {
    animation: none !important;
  }
}

```

### 08. Orbit System

**Type:** Pure CSS
**Description:** Two rings rotate at different speeds and directions around a central core, like a miniature solar system.

**HTML:**
```html
<div class="orbit-wrap">
  <div class="orbit-core"></div>
  <div class="orbit-ring"></div>
  <div class="orbit-ring"></div>
</div>
```

**CSS:**
```css
.orbit-wrap {
  position: relative;
  width: 60px;
  height: 60px;
}

.orbit-core {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #7c6cff;
}

.orbit-ring {
  position: absolute;
  inset: 0;
  border: 2px solid transparent;
  border-top-color: #ff6c8a;
  border-radius: 50%;
  animation: orbit 1s linear infinite;
}

.orbit-ring:nth-child(3) {
  inset: 8px;
  border-top-color: #2ecc8a;
  animation-duration: 0.7s;
  animation-direction: reverse;
}
@keyframes orbit {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .orbit-wrap,
  .orbit-wrap * {
    animation: none !important;
  }
}

```

### 09. Signal Bars

**Type:** Pure CSS
**Description:** Five bars of varying heights pulse in and out of opacity with a staggered delay, like an equaliser or signal indicator.

**HTML:**
```html
<div class="bars">
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
</div>
```

**CSS:**
```css
.bars {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 40px;
}
.bar {
  width: 10px;
  border-radius: 3px 3px 0 0;
  background: #7c6cff;
  animation: bars 1s ease-in-out infinite;
}
.bar:nth-child(1) {
  height: 20%;
  animation-delay: 0s;
}
.bar:nth-child(2) {
  height: 50%;
  animation-delay: 0.15s;
}
.bar:nth-child(3) {
  height: 80%;
  animation-delay: 0.3s;
}
.bar:nth-child(4) {
  height: 60%;
  animation-delay: 0.45s;
}
.bar:nth-child(5) {
  height: 35%;
  animation-delay: 0.6s;
}
@keyframes bars {
  0%,
  100% {
    opacity: 0.25;
  }
  50% {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bars,
  .bars * {
    animation: none !important;
  }
}

```

### 10. Clock Sweep

**Type:** Pure CSS
**Description:** Two pseudo-element hands rotate at different speeds inside a circular face — a literal animated clock using only CSS.

**HTML:**
```html
<div class="clock"></div>
```

**CSS:**
```css
.clock {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 3px solid rgba(124, 108, 255, 0.25);
  position: relative;
}
.clock::before,
.clock::after {
  content: "";
  position: absolute;
  border-radius: 2px;
}
.clock::before {
  width: 2px;
  height: 22px;
  background: #7c6cff;
  top: 4px;
  left: 50%;
  margin-left: -1px;
  transform-origin: bottom center;
  animation: chour 6s linear infinite;
}
.clock::after {
  width: 2px;
  height: 16px;
  background: #ff6c8a;
  top: 10px;
  left: 50%;
  margin-left: -1px;
  transform-origin: bottom center;
  animation: cmin 1s linear infinite;
}
@keyframes chour {
  to {
    transform: rotate(360deg);
  }
}
@keyframes cmin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .clock,
  .clock * {
    animation: none !important;
  }
}

```

### 11. Bouncing Chain

**Type:** Pure CSS
**Description:** Four coloured dots bounce independently with staggered delays, creating a chain-like wave of movement.

**HTML:**
```html
<div class="chain">
  <div class="chain-dot"></div>
  <div class="chain-dot"></div>
  <div class="chain-dot"></div>
  <div class="chain-dot"></div>
</div>
```

**CSS:**
```css
.chain {
  display: flex;
  gap: 8px;
  align-items: center;
}
.chain-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  animation: chain 0.9s cubic-bezier(0.36, 0.07, 0.19, 0.97) infinite;
}
.chain-dot:nth-child(1) {
  background: #7c6cff;
  animation-delay: 0s;
}
.chain-dot:nth-child(2) {
  background: #ff6c8a;
  animation-delay: 0.18s;
}
.chain-dot:nth-child(3) {
  background: #2ecc8a;
  animation-delay: 0.36s;
}
.chain-dot:nth-child(4) {
  background: #f5a623;
  animation-delay: 0.54s;
}
@keyframes chain {
  0%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-20px);
  }
  60% {
    transform: translateY(-8px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .chain,
  .chain * {
    animation: none !important;
  }
}

```

### 12. Neon Ring Draw

**Type:** Pure CSS
**Description:** A glowing ring spinner with a layered neon box-shadow creates a vivid electric glow as it spins.

**HTML:**
```html
<div class="neon-ring"></div>
```

**CSS:**
```css
.neon-ring {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #2ecc8a;
  box-shadow:
    0 0 14px #2ecc8a,
    0 0 28px rgba(46, 204, 138, 0.35);
  animation: nring 0.9s linear infinite;
}

.neon-ring::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 3px solid transparent;
  border-bottom-color: rgba(46, 204, 138, 0.3);
  box-sizing: border-box;
}
@keyframes nring {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .neon-ring,
  .neon-ring * {
    animation: none !important;
  }
}

```

### 13. Pixel Dissolve

**Type:** Pure CSS
**Description:** A 4×4 grid of squares fade and shrink in a rolling wave, like pixels dissolving from a screen.

**HTML:**
```html
<div class="pixels">
  <div class="px"></div>
  <div class="px"></div>
  <div class="px"></div>
  <div class="px"></div>
  <div class="px"></div>
  <div class="px"></div>
  <div class="px"></div>
  <div class="px"></div>
  <div class="px"></div>
  <div class="px"></div>
  <div class="px"></div>
  <div class="px"></div>
  <div class="px"></div>
  <div class="px"></div>
  <div class="px"></div>
  <div class="px"></div>
</div>
```

**CSS:**
```css
.pixels {
  display: grid;
  grid-template-columns: repeat(4, 12px);
  gap: 4px;
}
.px {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  background: #7c6cff;
  animation: px 1.4s ease-in-out infinite;
}
.px:nth-child(1) {
  animation-delay: 0s;
}
.px:nth-child(2) {
  animation-delay: 0.1s;
}
.px:nth-child(3) {
  animation-delay: 0.2s;
}
.px:nth-child(4) {
  animation-delay: 0.3s;
}
.px:nth-child(5) {
  animation-delay: 0.4s;
}
.px:nth-child(6) {
  animation-delay: 0.5s;
}
.px:nth-child(7) {
  animation-delay: 0.6s;
}
.px:nth-child(8) {
  animation-delay: 0.7s;
}
.px:nth-child(9) {
  animation-delay: 0.8s;
}
.px:nth-child(10) {
  animation-delay: 0.9s;
}
.px:nth-child(11) {
  animation-delay: 1s;
}
.px:nth-child(12) {
  animation-delay: 1.1s;
}
.px:nth-child(13) {
  animation-delay: 1.2s;
}
.px:nth-child(14) {
  animation-delay: 1.3s;
}
.px:nth-child(15) {
  animation-delay: 0.65s;
}
.px:nth-child(16) {
  animation-delay: 0.85s;
}
@keyframes px {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0;
    transform: scale(0.3);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pixels,
  .pixels * {
    animation: none !important;
  }
}

```

### 14. Hourglass Flip

**Type:** Pure CSS
**Description:** A pure CSS triangle-based hourglass that flips 180° and pauses, then repeats — built from two border triangles.

**HTML:**
```html
<div class="hourglass"></div>
```

**CSS:**
```css
.hourglass {
  width: 40px;
  height: 40px;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 20px solid #7c6cff;
  border-bottom: 20px solid #ff6c8a;
  border-radius: 4px;
  animation: hflip 1.8s ease-in-out infinite;
}
@keyframes hflip {
  0%,
  45% {
    transform: rotate(0deg);
  }
  55%,
  100% {
    transform: rotate(180deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hourglass,
  .hourglass * {
    animation: none !important;
  }
}

```

### 15. Heartbeat Line

**Type:** Pure CSS
**Description:** An SVG heartbeat waveform scrolls horizontally in a continuous loop — an inline data URI with a CSS translateX animation.

**HTML:**
```html
<div class="hb-wrap">
  <div class="hb-line"></div>
</div>
```

**CSS:**
```css
.hb-wrap {
  width: 120px;
  height: 40px;
  overflow: hidden;
}

.hb-line {
  width: 200%;
  height: 100%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40'%3E%3Cpolyline points='0,20 30,20 40,5 50,35 60,5 70,35 80,20 110,20 120,20 150,20 160,5 170,35 180,5 190,35 200,20' fill='none' stroke='%23ff6c8a' stroke-width='2.5'/%3E%3C/svg%3E")
    repeat-x center/50% 100%;
  animation: hbeat 1s linear infinite;
}
@keyframes hbeat {
  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hb-wrap,
  .hb-wrap * {
    animation: none !important;
  }
}

```

---
## 24 CSS Login Form Designs with Live Demos

URL: https://codefronts.com/components/css-login-forms/
Description: 24 modern CSS login form designs — glassmorphism, neon, dark mode, OTP, biometric passkey, magic link, multi-step, password strength meter and more. Copy-paste HTML & CSS, accessible, mobile-first.
Demo count: 24

### 01. Aurora Glow

**Type:** Pure CSS
**Description:** Glassmorphism login form on a drifting aurora gradient. Floating labels rise on focus and the submit button picks up a soft brand glow on hover.

**HTML:**
```html
<form class="lf-aurora">
  <div class="lf-aurora-bg"></div>
  <div class="lf-aurora-card">
    <div class="lf-aurora-title">Welcome back</div>
    <div class="lf-aurora-sub">Sign in to continue</div>
    <label class="lf-aurora-field">
      <input type="email" placeholder=" " required />
      <span>Email address</span>
    </label>
    <label class="lf-aurora-field">
      <input type="password" placeholder=" " required />
      <span>Password</span>
    </label>
    <button type="submit" class="lf-aurora-btn">Sign in →</button>
    <div class="lf-aurora-foot">No account? <a href="#">Create one</a></div>
  </div>
</form>
```

**CSS:**
```css
.lf-aurora {
  position: relative;
  width: 100%;
  max-width: 320px;
  border-radius: 18px;
  overflow: hidden;
  isolation: isolate;
}
.lf-aurora-bg {
  position: absolute;
  inset: -40%;
  z-index: 0;
  background:
    radial-gradient(40% 40% at 30% 30%, #7c6cff 0%, transparent 60%),
    radial-gradient(50% 50% at 70% 70%, #ff6c8a 0%, transparent 60%),
    radial-gradient(60% 60% at 50% 50%, #2eb88a 0%, transparent 60%);
  filter: blur(40px) saturate(140%);
  animation: lfaDrift 14s ease-in-out infinite alternate;
}
@keyframes lfaDrift {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  100% {
    transform: translate3d(-8%, -4%, 0) rotate(8deg);
  }
}
.lf-aurora-card {
  position: relative;
  z-index: 1;
  background: rgba(15, 15, 19, 0.55);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.lf-aurora-title {
  font-size: 18px;
  font-weight: 700;
  color: #f0eeff;
}
.lf-aurora-sub {
  font-size: 12px;
  color: #b8b6d4;
  margin-top: -10px;
}
.lf-aurora-field {
  position: relative;
  display: block;
}
.lf-aurora-field input {
  width: 100%;
  box-sizing: border-box;
  padding: 14px 12px 10px;
  font-size: 13px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  color: #f0eeff;
  outline: none;
  transition:
    border-color 0.2s,
    background 0.2s;
}
.lf-aurora-field input:focus {
  border-color: #7c6cff;
  background: rgba(124, 108, 255, 0.08);
}
.lf-aurora-field span {
  position: absolute;
  left: 12px;
  top: 12px;
  font-size: 12px;
  color: #b8b6d4;
  pointer-events: none;
  transition:
    transform 0.2s,
    color 0.2s,
    font-size 0.2s;
}
.lf-aurora-field input:focus + span,
.lf-aurora-field input:not(:placeholder-shown) + span {
  transform: translateY(-9px);
  font-size: 9px;
  color: #a78bfa;
  letter-spacing: 0.08em;
}
.lf-aurora-btn {
  margin-top: 4px;
  padding: 11px 14px;
  background: linear-gradient(135deg, #7c6cff, #ff6c8a);
  color: white;
  font-size: 13px;
  font-weight: 600;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 6px 24px -8px rgba(124, 108, 255, 0.7);
  transition:
    transform 0.15s,
    box-shadow 0.25s;
}
.lf-aurora-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 32px -8px rgba(124, 108, 255, 0.9);
}
.lf-aurora-foot {
  font-size: 11px;
  color: #b8b6d4;
  text-align: center;
}
.lf-aurora-foot a {
  color: #a78bfa;
  text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
  .lf-aurora,
  .lf-aurora * {
    animation: none !important;
  }
}

```

### 02. Neon Synthwave

**Type:** Pure CSS
**Description:** Neon login form in 80s-synthwave style. Hot-pink and cyan outline glows pulse around inputs and the submit button using stacked text-shadow.

**HTML:**
```html
<form class="lf-neon">
  <div class="lf-neon-title">LOG <span>IN</span></div>
  <input type="email" placeholder="user@codefronts.com" required class="lf-neon-input" />
  <input type="password" placeholder="••••••••" required class="lf-neon-input" />
  <button type="submit" class="lf-neon-btn">ENTER</button>
</form>
```

**CSS:**
```css
.lf-neon {
  width: 100%;
  max-width: 280px;
  background: #0a0014;
  border: 1px solid rgba(255, 108, 255, 0.35);
  border-radius: 14px;
  padding: 26px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow:
    0 0 40px rgba(255, 108, 255, 0.15),
    inset 0 0 30px rgba(124, 108, 255, 0.1);
}
.lf-neon-title {
  font-family: "Courier New", monospace;
  font-size: 22px;
  font-weight: 700;
  text-align: center;
  color: #fff;
  letter-spacing: 0.3em;
  text-shadow:
    0 0 4px #fff,
    0 0 12px #ff6cff,
    0 0 24px #ff6cff;
}
.lf-neon-title span {
  color: #6cffff;
  text-shadow:
    0 0 4px #fff,
    0 0 12px #6cffff,
    0 0 24px #6cffff;
}
.lf-neon-input {
  background: transparent;
  border: 1px solid rgba(255, 108, 255, 0.45);
  border-radius: 8px;
  padding: 11px 14px;
  font-family: "Courier New", monospace;
  color: #fff;
  font-size: 12px;
  outline: none;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}
.lf-neon-input::placeholder {
  color: rgba(255, 108, 255, 0.55);
}
.lf-neon-input:focus {
  border-color: #6cffff;
  box-shadow:
    0 0 0 1px #6cffff,
    0 0 16px rgba(108, 255, 255, 0.4);
}
.lf-neon-btn {
  background: transparent;
  border: 1px solid #6cffff;
  border-radius: 8px;
  padding: 11px 14px;
  font-family: "Courier New", monospace;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.25em;
  color: #6cffff;
  cursor: pointer;
  text-shadow: 0 0 6px #6cffff;
  box-shadow:
    inset 0 0 12px rgba(108, 255, 255, 0.15),
    0 0 14px rgba(108, 255, 255, 0.3);
  animation: lfnPulse 1.6s ease-in-out infinite;
}
.lf-neon-btn:hover {
  color: #fff;
  background: rgba(108, 255, 255, 0.1);
}
@keyframes lfnPulse {
  0%,
  100% {
    box-shadow:
      inset 0 0 12px rgba(108, 255, 255, 0.15),
      0 0 14px rgba(108, 255, 255, 0.3);
  }
  50% {
    box-shadow:
      inset 0 0 18px rgba(108, 255, 255, 0.25),
      0 0 28px rgba(108, 255, 255, 0.55);
  }
}

@media (prefers-reduced-motion: reduce) {
  .lf-neon,
  .lf-neon * {
    animation: none !important;
  }
}

```

### 03. Liquid Slide

**Type:** Pure CSS
**Description:** Animated sign in form with a brand stripe that slides in on mount and underlined inputs that draw outward from the centre on focus.

**HTML:**
```html
<form class="lf-liquid">
  <div class="lf-liquid-stripe"></div>
  <div class="lf-liquid-body">
    <div class="lf-liquid-title">Account Login</div>
    <div class="lf-liquid-row">
      <input type="email" placeholder="Email" required />
    </div>
    <div class="lf-liquid-row">
      <input type="password" placeholder="Password" required />
    </div>
    <div class="lf-liquid-meta">
      <label><input type="checkbox" /> Remember me</label>
      <a href="#">Forgot?</a>
    </div>
    <button type="submit" class="lf-liquid-btn">Continue</button>
  </div>
</form>
```

**CSS:**
```css
.lf-liquid {
  position: relative;
  width: 100%;
  max-width: 320px;
  background: #15151d;
  border-radius: 14px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 64px 1fr;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.lf-liquid-stripe {
  background: linear-gradient(180deg, #7c6cff, #ff6c8a);
  animation: lfqSlide 0.6s cubic-bezier(0.2, 0.9, 0.3, 1.4) both;
  position: relative;
}
.lf-liquid-stripe::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.45) 0%, transparent 40%);
  mix-blend-mode: screen;
}
@keyframes lfqSlide {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}
.lf-liquid-body {
  padding: 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.lf-liquid-title {
  font-size: 16px;
  font-weight: 700;
  color: #f0eeff;
  letter-spacing: -0.01em;
}
.lf-liquid-row {
  position: relative;
}
.lf-liquid-row input {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 0 9px;
  font-size: 13px;
  background: transparent;
  color: #f0eeff;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  outline: none;
}
.lf-liquid-row::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  right: 50%;
  height: 1.5px;
  background: linear-gradient(90deg, #7c6cff, #ff6c8a);
  transition:
    left 0.28s ease,
    right 0.28s ease;
}
.lf-liquid-row:focus-within::after {
  left: 0;
  right: 0;
}
.lf-liquid-row input::placeholder {
  color: #b8b6d4;
}
.lf-liquid-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: #b8b6d4;
}
.lf-liquid-meta a {
  color: #a78bfa;
  text-decoration: none;
}
.lf-liquid-meta input {
  accent-color: #7c6cff;
  margin-right: 4px;
}
.lf-liquid-btn {
  margin-top: 4px;
  padding: 10px 14px;
  background: #f0eeff;
  color: #15151d;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.12s;
}
.lf-liquid-btn:hover {
  transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
  .lf-liquid,
  .lf-liquid * {
    animation: none !important;
  }
}

```

### 04. Card Flip Reset

**Type:** Pure CSS
**Description:** CSS-only flip card login form. The card rotates in 3D to reveal a "forgot password" form on the back — driven entirely by a hidden checkbox and sibling selectors, no JavaScript.

**HTML:**
```html
<div class="lf-flip">
  <input type="checkbox" id="lf-flip-toggle" class="lf-flip-toggle" />
  <div class="lf-flip-stage">
    <form class="lf-flip-front">
      <div class="lf-flip-title">Sign in</div>
      <input type="email" placeholder="Email" required />
      <input type="password" placeholder="Password" required />
      <button type="submit">Log in</button>
      <label for="lf-flip-toggle" class="lf-flip-link">Forgot password?</label>
    </form>
    <form class="lf-flip-back">
      <div class="lf-flip-title">Reset password</div>
      <input type="email" placeholder="Email to send reset link" required />
      <button type="submit">Send link</button>
      <label for="lf-flip-toggle" class="lf-flip-link">← Back to sign in</label>
    </form>
  </div>
</div>
```

**CSS:**
```css
.lf-flip {
  width: 100%;
  max-width: 280px;
  perspective: 1200px;
}
.lf-flip-toggle {
  display: none;
}
.lf-flip-stage {
  position: relative;
  width: 100%;
  transform-style: preserve-3d;
  transition: transform 0.7s cubic-bezier(0.5, 0, 0.3, 1.2);
  min-height: 240px;
}
.lf-flip-toggle:checked ~ .lf-flip-stage {
  transform: rotateY(180deg);
}
.lf-flip-front,
.lf-flip-back {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px 22px;
  background: #15151d;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.lf-flip-back {
  transform: rotateY(180deg);
}
.lf-flip-title {
  font-size: 16px;
  font-weight: 700;
  color: #f0eeff;
  margin-bottom: 2px;
}
.lf-flip input {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 10px 12px;
  color: #f0eeff;
  font-size: 13px;
  outline: none;
  transition: border-color 0.15s;
}
.lf-flip input:focus {
  border-color: #7c6cff;
}
.lf-flip button {
  background: linear-gradient(135deg, #7c6cff, #ff6c8a);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.lf-flip-link {
  font-size: 11px;
  color: #a78bfa;
  text-align: center;
  cursor: pointer;
  margin-top: 4px;
}
```

### 05. Magic Link

**Type:** Pure CSS
**Description:** Magic-link / passwordless login form. A single email field with an animated wand-sparkle icon — the modern pattern for email-only authentication.

**HTML:**
```html
<form class="lf-magic">
  <div class="lf-magic-icon">
    <span class="lf-magic-wand"></span>
    <span class="lf-magic-spark s1"></span>
    <span class="lf-magic-spark s2"></span>
    <span class="lf-magic-spark s3"></span>
  </div>
  <div class="lf-magic-title">Sign in with magic link</div>
  <div class="lf-magic-sub">We'll email you a one-time link. No password needed.</div>
  <input type="email" placeholder="you@example.com" required class="lf-magic-input" />
  <button type="submit" class="lf-magic-btn">Send magic link</button>
</form>
```

**CSS:**
```css
.lf-magic {
  width: 100%;
  max-width: 300px;
  background: #15151d;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 16px;
  padding: 28px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  text-align: center;
}
.lf-magic-icon {
  position: relative;
  width: 48px;
  height: 48px;
  margin-bottom: 4px;
}
.lf-magic-wand {
  position: absolute;
  inset: 12px;
  background: linear-gradient(135deg, #7c6cff, #ff6c8a);
  border-radius: 50%;
  box-shadow: 0 0 24px rgba(124, 108, 255, 0.55);
  animation: lfmFloat 3s ease-in-out infinite;
}
@keyframes lfmFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-3px);
  }
}
.lf-magic-spark {
  position: absolute;
  width: 4px;
  height: 4px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 6px #fff;
  animation: lfmSpark 2s ease-in-out infinite;
}
.s1 {
  top: 4px;
  left: 6px;
  animation-delay: 0s;
}
.s2 {
  top: 8px;
  right: 4px;
  animation-delay: 0.5s;
}
.s3 {
  bottom: 6px;
  left: 12px;
  animation-delay: 1s;
}
@keyframes lfmSpark {
  0%,
  100% {
    opacity: 0;
    transform: scale(0.4);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
  }
}
.lf-magic-title {
  font-size: 15px;
  font-weight: 700;
  color: #f0eeff;
}
.lf-magic-sub {
  font-size: 11px;
  color: #b8b6d4;
  line-height: 1.5;
}
.lf-magic-input {
  width: 100%;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 11px 14px;
  color: #f0eeff;
  font-size: 13px;
  outline: none;
  transition:
    border-color 0.2s,
    background 0.2s;
  text-align: center;
}
.lf-magic-input:focus {
  border-color: #7c6cff;
  background: rgba(124, 108, 255, 0.08);
}
.lf-magic-btn {
  width: 100%;
  padding: 11px 14px;
  background: linear-gradient(135deg, #7c6cff, #ff6c8a);
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 6px 24px -8px rgba(124, 108, 255, 0.7);
}

@media (prefers-reduced-motion: reduce) {
  .lf-magic,
  .lf-magic * {
    animation: none !important;
  }
}

```

### 06. Terminal Prompt

**Type:** Pure CSS
**Description:** Terminal-style login form. Monospace prompts, a blinking caret, and a green command-line submit — perfect for developer tools and CLI dashboards.

**HTML:**
```html
<form class="lf-term">
  <div class="lf-term-bar">
    <span class="lf-term-dot r"></span>
    <span class="lf-term-dot y"></span>
    <span class="lf-term-dot g"></span>
    <span class="lf-term-title">~/login</span>
  </div>
  <div class="lf-term-body">
    <div class="lf-term-line"><span class="lf-term-prompt">$</span> auth login</div>
    <div class="lf-term-line">
      <span class="lf-term-prompt">user:</span>
      <input type="email" placeholder="you@example.com" required />
    </div>
    <div class="lf-term-line">
      <span class="lf-term-prompt">pass:</span>
      <input type="password" placeholder="••••••••" required />
    </div>
    <button type="submit" class="lf-term-btn">$ run<span class="lf-term-caret">_</span></button>
  </div>
</form>
```

**CSS:**
```css
.lf-term {
  width: 100%;
  max-width: 320px;
  background: #0a0a0e;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  overflow: hidden;
  font-family: "JetBrains Mono", "DM Mono", monospace;
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.6);
}
.lf-term-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: #15151d;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.lf-term-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.lf-term-dot.r {
  background: #ff6c8a;
}
.lf-term-dot.y {
  background: #f5b454;
}
.lf-term-dot.g {
  background: #2eb88a;
}
.lf-term-title {
  margin-left: auto;
  font-size: 11px;
  color: #b8b6d4;
  letter-spacing: 0.05em;
}
.lf-term-body {
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: #a5f0c8;
  font-size: 13px;
}
.lf-term-line {
  display: flex;
  align-items: center;
  gap: 8px;
}
.lf-term-prompt {
  color: #7c6cff;
  flex-shrink: 0;
  font-weight: 600;
}
.lf-term-line input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  padding: 2px 0;
  caret-color: #2eb88a;
}
.lf-term-line input::placeholder {
  color: #4a4a5e;
}
.lf-term-btn {
  align-self: flex-start;
  margin-top: 4px;
  padding: 6px 14px;
  background: rgba(46, 184, 138, 0.08);
  border: 1px solid rgba(46, 184, 138, 0.4);
  color: #2eb88a;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 5px;
}
.lf-term-btn:hover {
  background: rgba(46, 184, 138, 0.18);
}
.lf-term-caret {
  display: inline-block;
  margin-left: 2px;
  color: #2eb88a;
  animation: lftBlink 1s step-end infinite;
}
@keyframes lftBlink {
  50% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lf-term,
  .lf-term * {
    animation: none !important;
  }
}

```

### 07. Floating Pill

**Type:** Pure CSS
**Description:** Compact pill-shaped login form on a single line. Rotating brand avatar, inline email and password, and a circular submit arrow that pulses on hover.

**HTML:**
```html
<form class="lf-pill">
  <div class="lf-pill-avatar">
    <div class="lf-pill-avatar-inner"></div>
  </div>
  <input type="email" placeholder="Email" class="lf-pill-input" required />
  <input type="password" placeholder="Password" class="lf-pill-input pw" required />
  <button type="submit" class="lf-pill-btn" aria-label="Sign in">→</button>
</form>
```

**CSS:**
```css
.lf-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  max-width: 320px;
  background: #15151d;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 100px;
  padding: 6px;
  box-shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.6);
}
.lf-pill-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  flex-shrink: 0;
  background: linear-gradient(135deg, #7c6cff, #ff6c8a);
  padding: 2px;
  animation: lfpSpin 6s linear infinite;
}
.lf-pill-avatar-inner {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #15151d
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='38' height='38' viewBox='0 0 38 38'><circle cx='19' cy='15' r='5' fill='%23f0eeff'/><path d='M8 30c1.5-5 5.5-7 11-7s9.5 2 11 7' fill='%23f0eeff'/></svg>")
    center/cover;
}
@keyframes lfpSpin {
  to {
    transform: rotate(360deg);
  }
}
.lf-pill-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  color: #f0eeff;
  font-size: 13px;
  padding: 8px 6px;
}
.lf-pill-input.pw {
  max-width: 90px;
}
.lf-pill-input::placeholder {
  color: #b8b6d4;
}
.lf-pill-btn {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border: none;
  border-radius: 50%;
  background: linear-gradient(135deg, #7c6cff, #ff6c8a);
  color: white;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 0 0 0 rgba(124, 108, 255, 0.5);
  transition:
    box-shadow 0.25s,
    transform 0.15s;
}
.lf-pill-btn:hover {
  transform: scale(1.06);
  box-shadow: 0 0 0 6px rgba(124, 108, 255, 0.18);
}

@media (prefers-reduced-motion: reduce) {
  .lf-pill,
  .lf-pill * {
    animation: none !important;
  }
}

```

### 08. Gradient Border

**Type:** Pure CSS
**Description:** Login form with an animated gradient border. A rotating conic-gradient frames a clean monochrome interior — a premium feel with one CSS property.

**HTML:**
```html
<form class="lf-grad">
  <div class="lf-grad-inner">
    <div class="lf-grad-title">Welcome</div>
    <div class="lf-grad-sub">Sign in to your workspace</div>
    <label class="lf-grad-label"
      >Email
      <input type="email" placeholder="name@company.com" required />
    </label>
    <label class="lf-grad-label"
      >Password
      <input type="password" placeholder="At least 8 characters" required />
    </label>
    <button type="submit" class="lf-grad-btn">Sign in</button>
  </div>
</form>
```

**CSS:**
```css
.lf-grad {
  position: relative;
  width: 100%;
  max-width: 320px;
  border-radius: 16px;
  padding: 1.5px;
  background: conic-gradient(from 0deg, #7c6cff, #ff6c8a, #2eb88a, #f5b454, #7c6cff);
  animation: lfgRotate 4s linear infinite;
}
@keyframes lfgRotate {
  to {
    --a: 360deg;
    transform: rotate(0);
  }
}
@property --a {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
.lf-grad::before {
  content: "";
  position: absolute;
  inset: -20px;
  background: inherit;
  filter: blur(24px);
  opacity: 0.5;
  z-index: -1;
  border-radius: inherit;
}
.lf-grad-inner {
  background: #15151d;
  border-radius: 14.5px;
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.lf-grad-title {
  font-size: 18px;
  font-weight: 700;
  color: #f0eeff;
}
.lf-grad-sub {
  font-size: 12px;
  color: #b8b6d4;
  margin-top: -8px;
  margin-bottom: 4px;
}
.lf-grad-label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 11px;
  color: #b8b6d4;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.lf-grad-label input {
  text-transform: none;
  letter-spacing: normal;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 10px 12px;
  color: #f0eeff;
  font-size: 13px;
  outline: none;
  transition: border-color 0.15s;
}
.lf-grad-label input:focus {
  border-color: #7c6cff;
}
.lf-grad-btn {
  margin-top: 6px;
  padding: 11px;
  background: #f0eeff;
  color: #15151d;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.12s;
}
.lf-grad-btn:hover {
  transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
  .lf-grad,
  .lf-grad * {
    animation: none !important;
  }
}

```

### 09. Side Panel

**Type:** Pure CSS
**Description:** Two-column SaaS login layout. A brand panel on the left with a subtle parallax shape, and a clean sign in form on the right — the classic dashboard pattern.

**HTML:**
```html
<form class="lf-side">
  <aside class="lf-side-brand">
    <div class="lf-side-shape"></div>
    <div class="lf-side-logo">CF</div>
    <div class="lf-side-tag">Build the front-end<br />you've been imagining.</div>
  </aside>
  <div class="lf-side-form">
    <div class="lf-side-title">Sign in</div>
    <input type="email" placeholder="Work email" required />
    <input type="password" placeholder="Password" required />
    <button type="submit">Continue →</button>
    <a href="#" class="lf-side-foot">Forgot your password?</a>
  </div>
</form>
```

**CSS:**
```css
.lf-side {
  display: grid;
  grid-template-columns: 110px 1fr;
  width: 100%;
  max-width: 360px;
  min-height: 280px;
  background: #15151d;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  overflow: hidden;
}
.lf-side-brand {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, #7c6cff 0%, #5b48d6 60%, #2a1f7a 100%);
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: white;
}
.lf-side-shape {
  position: absolute;
  top: -30px;
  right: -30px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.25) 0%, transparent 60%);
  animation: lfsBlob 8s ease-in-out infinite alternate;
}
@keyframes lfsBlob {
  0% {
    transform: translate(0, 0) scale(1);
  }
  100% {
    transform: translate(-10px, 12px) scale(1.15);
  }
}
.lf-side-logo {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.04em;
  background: rgba(255, 255, 255, 0.18);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  backdrop-filter: blur(8px);
}
.lf-side-tag {
  font-size: 11px;
  line-height: 1.5;
  opacity: 0.92;
}
.lf-side-form {
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.lf-side-title {
  font-size: 16px;
  font-weight: 700;
  color: #f0eeff;
  margin-bottom: 4px;
}
.lf-side-form input {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 9px 12px;
  color: #f0eeff;
  font-size: 13px;
  outline: none;
  transition: border-color 0.15s;
}
.lf-side-form input:focus {
  border-color: #7c6cff;
}
.lf-side-form button {
  margin-top: 4px;
  padding: 10px;
  background: linear-gradient(135deg, #7c6cff, #ff6c8a);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.lf-side-foot {
  font-size: 11px;
  color: #a78bfa;
  text-decoration: none;
  text-align: center;
  margin-top: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .lf-side,
  .lf-side * {
    animation: none !important;
  }
}

```

### 10. Social First

**Type:** Pure CSS
**Description:** Social-first sign in form with OAuth buttons (Google, GitHub) up top, a divider, and a compact email fallback — the standard product onboarding pattern.

**HTML:**
```html
<form class="lf-soc">
  <div class="lf-soc-title">Sign in</div>
  <button type="button" class="lf-soc-btn google">
    <span class="lf-soc-ic">G</span> Continue with Google
  </button>
  <button type="button" class="lf-soc-btn github">
    <span class="lf-soc-ic">●</span> Continue with GitHub
  </button>
  <div class="lf-soc-or"><span>or</span></div>
  <input type="email" placeholder="Email address" required />
  <button type="submit" class="lf-soc-submit">Continue with email</button>
  <div class="lf-soc-foot">By continuing you agree to our <a href="#">Terms</a></div>
</form>
```

**CSS:**
```css
.lf-soc {
  width: 100%;
  max-width: 290px;
  background: #15151d;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  padding: 26px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.lf-soc-title {
  font-size: 16px;
  font-weight: 700;
  color: #f0eeff;
  text-align: center;
  margin-bottom: 4px;
}
.lf-soc-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  padding: 9px 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: #f0eeff;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition:
    background 0.15s,
    transform 0.15s;
}
.lf-soc-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  transform: translateY(-1px);
}
.lf-soc-ic {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-weight: 800;
  font-size: 11px;
  background: white;
  color: #15151d;
}
.lf-soc-btn.github .lf-soc-ic {
  background: #f0eeff;
  color: #15151d;
}
.lf-soc-or {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 6px 0;
  font-size: 11px;
  color: #b8b6d4;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.lf-soc-or::before,
.lf-soc-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
}
.lf-soc input {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 10px 12px;
  color: #f0eeff;
  font-size: 13px;
  outline: none;
}
.lf-soc input:focus {
  border-color: #7c6cff;
}
.lf-soc-submit {
  padding: 10px;
  background: linear-gradient(135deg, #7c6cff, #ff6c8a);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.lf-soc-foot {
  font-size: 10px;
  color: #b8b6d4;
  text-align: center;
  margin-top: 4px;
}
.lf-soc-foot a {
  color: #a78bfa;
  text-decoration: none;
}
```

### 11. Animated Mascot

**Type:** Pure CSS
**Description:** Playful login form with an animated mascot. A CSS-drawn face whose eyes follow the focused input via `:has()` — left for email, down for password — and blinks on idle.

**HTML:**
```html
<form class="lf-mascot">
  <div class="lf-mascot-face">
    <div class="lf-mascot-eye l"><div class="lf-mascot-pupil"></div></div>
    <div class="lf-mascot-eye r"><div class="lf-mascot-pupil"></div></div>
    <div class="lf-mascot-mouth"></div>
  </div>
  <input type="email" placeholder="Email" required class="lf-mascot-input email" />
  <input type="password" placeholder="Password" required class="lf-mascot-input pwd" />
  <button type="submit" class="lf-mascot-btn">Hop in!</button>
</form>
```

**CSS:**
```css
.lf-mascot {
  width: 100%;
  max-width: 280px;
  background: #15151d;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 16px;
  padding: 24px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}
.lf-mascot-face {
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background: linear-gradient(135deg, #fde68a, #fbbf24);
  position: relative;
  margin-bottom: 8px;
  box-shadow: 0 8px 24px -8px rgba(251, 191, 36, 0.6);
}
.lf-mascot-eye {
  position: absolute;
  top: 28px;
  width: 14px;
  height: 14px;
  background: #15151d;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lf-mascot-eye.l {
  left: 18px;
}
.lf-mascot-eye.r {
  right: 18px;
}
.lf-mascot-pupil {
  width: 5px;
  height: 5px;
  background: white;
  border-radius: 50%;
  transition: transform 0.25s ease;
  animation: lfmBlink 4s ease-in-out infinite;
}
@keyframes lfmBlink {
  0%,
  92%,
  100% {
    transform: scaleY(1);
  }
  95% {
    transform: scaleY(0.1);
  }
}
.lf-mascot-mouth {
  position: absolute;
  bottom: 20px;
  left: 50%;
  width: 22px;
  height: 12px;
  border: 2.5px solid #15151d;
  border-top: none;
  border-radius: 0 0 22px 22px;
  transform: translateX(-50%);
}
/* Eyes track focused input */
.lf-mascot:has(.email:focus) .lf-mascot-pupil {
  transform: translate(-3px, 0);
}
.lf-mascot:has(.pwd:focus) .lf-mascot-pupil {
  transform: translate(0, 3px);
}
.lf-mascot:has(.lf-mascot-btn:hover) .lf-mascot-mouth {
  height: 18px;
  border-radius: 0 0 28px 28px;
}
.lf-mascot-input {
  width: 100%;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 10px 14px;
  color: #f0eeff;
  font-size: 13px;
  outline: none;
  transition: border-color 0.15s;
}
.lf-mascot-input:focus {
  border-color: #fbbf24;
}
.lf-mascot-btn {
  width: 100%;
  padding: 10px;
  background: linear-gradient(135deg, #fbbf24, #ef4444);
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  margin-top: 4px;
  transition: transform 0.12s;
}
.lf-mascot-btn:hover {
  transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
  .lf-mascot,
  .lf-mascot * {
    animation: none !important;
  }
}

```

### 12. Compact Modal

**Type:** Pure CSS
**Description:** Modal / dialog login form. Dense and professional, with subtle hover glow on inputs and a primary action that fills with brand colour on hover.

**HTML:**
```html
<form class="lf-modal">
  <button type="button" class="lf-modal-close" aria-label="Close">×</button>
  <div class="lf-modal-title">Sign in to Codefronts</div>
  <div class="lf-modal-sub">Use your email and password to continue</div>
  <label class="lf-modal-row">
    <span>Email</span>
    <input type="email" placeholder="name@company.com" required />
  </label>
  <label class="lf-modal-row">
    <span>Password <a href="#">Forgot?</a></span>
    <input type="password" placeholder="••••••••" required />
  </label>
  <label class="lf-modal-check"> <input type="checkbox" /> Keep me signed in for 30 days </label>
  <button type="submit" class="lf-modal-submit">Sign in</button>
</form>
```

**CSS:**
```css
.lf-modal {
  position: relative;
  width: 100%;
  max-width: 320px;
  background: #15151d;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 24px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow:
    0 24px 48px -16px rgba(0, 0, 0, 0.7),
    0 0 0 1px rgba(255, 255, 255, 0.04);
}
.lf-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 22px;
  height: 22px;
  background: transparent;
  border: none;
  color: #b8b6d4;
  font-size: 18px;
  cursor: pointer;
  border-radius: 4px;
  transition:
    background 0.15s,
    color 0.15s;
  line-height: 1;
}
.lf-modal-close:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #f0eeff;
}
.lf-modal-title {
  font-size: 16px;
  font-weight: 700;
  color: #f0eeff;
}
.lf-modal-sub {
  font-size: 12px;
  color: #b8b6d4;
  margin-top: -8px;
  margin-bottom: 4px;
}
.lf-modal-row {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 11px;
  color: #b8b6d4;
}
.lf-modal-row > span {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.lf-modal-row > span a {
  color: #a78bfa;
  text-decoration: none;
  font-size: 11px;
}
.lf-modal-row input {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 10px 12px;
  color: #f0eeff;
  font-size: 13px;
  outline: none;
  transition:
    border-color 0.15s,
    box-shadow 0.15s,
    background 0.15s;
}
.lf-modal-row input:hover {
  background: rgba(255, 255, 255, 0.06);
}
.lf-modal-row input:focus {
  border-color: #7c6cff;
  box-shadow: 0 0 0 3px rgba(124, 108, 255, 0.15);
}
.lf-modal-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: #b8b6d4;
}
.lf-modal-check input {
  accent-color: #7c6cff;
}
.lf-modal-submit {
  padding: 10px;
  background: rgba(124, 108, 255, 0.18);
  color: #c8c0ff;
  border: 1px solid rgba(124, 108, 255, 0.4);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition:
    background 0.2s,
    color 0.2s,
    border-color 0.2s;
}
.lf-modal-submit:hover {
  background: linear-gradient(135deg, #7c6cff, #ff6c8a);
  color: white;
  border-color: transparent;
}
```

### 13. Glass Frosted

**Type:** Pure CSS
**Description:** Frosted-glass login form on a soft photographic background. Translucent inputs with subtle inner highlights — a calm, premium hero treatment.

**HTML:**
```html
<form class="lf-glass" aria-label="Sign in form">
  <div class="lf-glass-bg" aria-hidden="true"></div>
  <article class="lf-glass-card">
    <header>
      <h2 class="lf-glass-title">Sign in</h2>
      <p class="lf-glass-sub">Welcome back. Continue where you left off.</p>
    </header>
    <label class="lf-glass-field">
      <span>Email</span>
      <input
        type="email"
        name="email"
        autocomplete="email"
        placeholder="you@example.com"
        required
      />
    </label>
    <label class="lf-glass-field">
      <span>Password</span>
      <input
        type="password"
        name="password"
        autocomplete="current-password"
        placeholder="••••••••"
        required
      />
    </label>
    <button type="submit" class="lf-glass-btn">Continue</button>
  </article>
</form>
```

**CSS:**
```css
.lf-glass {
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: 320px;
  border-radius: 18px;
  overflow: hidden;
}
.lf-glass-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(40% 50% at 20% 30%, #f59e0b 0%, transparent 60%),
    radial-gradient(50% 60% at 80% 70%, #7c3aed 0%, transparent 60%),
    radial-gradient(60% 70% at 50% 50%, #ef4444 0%, transparent 60%), #0a0a14;
  filter: blur(30px) saturate(120%);
  transform: scale(1.2);
}
.lf-glass-card {
  position: relative;
  z-index: 1;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  border-radius: 18px;
  padding: 26px 22px;
  display: grid;
  gap: 14px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    0 18px 48px -16px rgba(0, 0, 0, 0.5);
}
.lf-glass-card header {
  display: grid;
  gap: 4px;
}
.lf-glass-title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: #fff;
}
.lf-glass-sub {
  margin: 0;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.5;
}
.lf-glass-field {
  display: grid;
  gap: 5px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.7);
}
.lf-glass-field input {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13px;
  color: #fff;
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
  transition:
    border-color 0.2s,
    background 0.2s;
}
.lf-glass-field input::placeholder {
  color: rgba(255, 255, 255, 0.45);
}
.lf-glass-field input:focus {
  border-color: rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.14);
}
.lf-glass-btn {
  margin-top: 4px;
  padding: 11px;
  background: rgba(255, 255, 255, 0.92);
  color: #15151d;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition:
    transform 0.12s,
    background 0.15s;
}
.lf-glass-btn:hover {
  transform: translateY(-1px);
  background: #fff;
}
```

### 14. Step-by-Step

**Type:** Pure CSS
**Description:** Multi-step login form. Enter email, then password — the card slides between steps with a progress bar, driven entirely by `:has()` and `:checked`. No JavaScript.

**HTML:**
```html
<form class="lf-step" aria-label="Two-step sign in">
  <input type="radio" id="lf-step-1" name="lf-step" class="lf-step-radio" checked />
  <input type="radio" id="lf-step-2" name="lf-step" class="lf-step-radio" />

  <header class="lf-step-head">
    <span class="lf-step-bar" aria-hidden="true"></span>
    <span class="lf-step-counter"><span class="lf-step-now">1</span> of 2</span>
  </header>

  <div class="lf-step-track">
    <fieldset class="lf-step-pane">
      <legend class="lf-step-label">What's your email?</legend>
      <label class="lf-step-row">
        <input
          type="email"
          name="email"
          autocomplete="email"
          placeholder="name@company.com"
          required
        />
      </label>
      <label for="lf-step-2" class="lf-step-btn primary">Next →</label>
    </fieldset>

    <fieldset class="lf-step-pane">
      <legend class="lf-step-label">Now your password</legend>
      <label class="lf-step-row">
        <input
          type="password"
          name="password"
          autocomplete="current-password"
          placeholder="••••••••"
          required
        />
      </label>
      <div class="lf-step-actions">
        <label for="lf-step-1" class="lf-step-btn ghost">← Back</label>
        <button type="submit" class="lf-step-btn primary">Sign in</button>
      </div>
    </fieldset>
  </div>
</form>
```

**CSS:**
```css
.lf-step {
  width: 100%;
  max-width: 320px;
  background: #15151d;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  padding: 22px 22px;
  display: grid;
  gap: 14px;
  overflow: hidden;
}
.lf-step-radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.lf-step-head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  color: #b8b6d4;
}
.lf-step-bar {
  height: 3px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.06);
  position: relative;
  overflow: hidden;
}
.lf-step-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  right: 50%;
  background: linear-gradient(90deg, #7c6cff, #ff6c8a);
  border-radius: inherit;
  transition: right 0.4s ease;
}
.lf-step:has(#lf-step-2:checked) .lf-step-bar::after {
  right: 0;
}
.lf-step:has(#lf-step-2:checked) .lf-step-now::after {
  content: "2";
}
.lf-step-now {
  font-weight: 700;
  color: #f0eeff;
}
.lf-step-now::after {
  content: "1";
}
.lf-step-now {
  font-size: 0;
}
.lf-step-now::after {
  font-size: 11px;
}
.lf-step-track {
  display: grid;
  grid-template-columns: 100% 100%;
  width: 100%;
  transition: transform 0.4s cubic-bezier(0.6, 0, 0.2, 1);
}
.lf-step:has(#lf-step-2:checked) .lf-step-track {
  transform: translateX(-100%);
}
.lf-step-pane {
  border: 0;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
  min-width: 0;
}
.lf-step-label {
  font-size: 13px;
  font-weight: 600;
  color: #f0eeff;
  padding: 0;
}
.lf-step-row input {
  width: 100%;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px;
  color: #f0eeff;
  outline: none;
  transition: border-color 0.15s;
}
.lf-step-row input:focus {
  border-color: #7c6cff;
}
.lf-step-actions {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px;
}
.lf-step-btn {
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  border: 1px solid transparent;
  transition:
    transform 0.12s,
    background 0.15s;
}
.lf-step-btn.primary {
  background: linear-gradient(135deg, #7c6cff, #ff6c8a);
  color: white;
}
.lf-step-btn.primary:hover {
  transform: translateY(-1px);
}
.lf-step-btn.ghost {
  background: transparent;
  color: #b8b6d4;
  border-color: rgba(255, 255, 255, 0.1);
}
.lf-step-btn.ghost:hover {
  color: #f0eeff;
  background: rgba(255, 255, 255, 0.04);
}
```

### 15. Animated Gradient Border

**Type:** Pure CSS
**Description:** Animated rainbow gradient border login form. A `@property`-driven conic gradient genuinely rotates around the card edge — true property animation, not a keyframes hack.

**HTML:**
```html
<form class="lf-prop" aria-label="Animated gradient sign in">
  <div class="lf-prop-inner">
    <h2 class="lf-prop-title">Sign in</h2>
    <p class="lf-prop-sub">A small bit of magic, every time.</p>
    <label class="lf-prop-field">
      <span>Email</span>
      <input
        type="email"
        name="email"
        autocomplete="email"
        placeholder="you@codefronts.com"
        required
      />
    </label>
    <label class="lf-prop-field">
      <span>Password</span>
      <input
        type="password"
        name="password"
        autocomplete="current-password"
        placeholder="••••••••"
        required
      />
    </label>
    <button type="submit" class="lf-prop-btn">Sign in</button>
  </div>
</form>
```

**CSS:**
```css
@property --lf-prop-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
.lf-prop {
  position: relative;
  width: 100%;
  max-width: 320px;
  border-radius: 16px;
  padding: 1.5px;
  background: conic-gradient(
    from var(--lf-prop-angle, 0deg),
    #7c6cff,
    #ff6c8a,
    #2eb88a,
    #f5b454,
    #7c6cff
  );
  animation: lfPropSpin 5s linear infinite;
}
@keyframes lfPropSpin {
  to {
    --lf-prop-angle: 360deg;
  }
}
.lf-prop::before {
  content: "";
  position: absolute;
  inset: -22px;
  z-index: -1;
  background: inherit;
  filter: blur(28px);
  opacity: 0.45;
  border-radius: inherit;
}
.lf-prop-inner {
  background: #15151d;
  border-radius: 14.5px;
  padding: 24px 22px;
  display: grid;
  gap: 12px;
}
.lf-prop-title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: #f0eeff;
}
.lf-prop-sub {
  margin: -6px 0 4px;
  font-size: 12px;
  color: #b8b6d4;
}
.lf-prop-field {
  display: grid;
  gap: 5px;
  font-size: 11px;
  color: #b8b6d4;
}
.lf-prop-field input {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px;
  color: #f0eeff;
  outline: none;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}
.lf-prop-field input:focus {
  border-color: #7c6cff;
  box-shadow: 0 0 0 3px rgba(124, 108, 255, 0.15);
}
.lf-prop-btn {
  margin-top: 4px;
  padding: 11px;
  background: #f0eeff;
  color: #15151d;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.12s;
}
.lf-prop-btn:hover {
  transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
  .lf-prop,
  .lf-prop * {
    animation: none !important;
  }
}

```

### 16. Vault Lock

**Type:** Pure CSS
**Description:** Vault-style secure login form. The lock dial rotates and the bolt slides open the moment the password field gains focus — pure CSS, driven by `:focus-within` and `:has()`.

**HTML:**
```html
<form class="lf-vault" aria-label="Vault sign in">
  <figure class="lf-vault-lock" aria-hidden="true">
    <span class="lf-vault-dial"></span>
    <span class="lf-vault-bolt"></span>
  </figure>
  <h2 class="lf-vault-title">Vault access</h2>
  <p class="lf-vault-sub">Authenticate to view encrypted contents</p>
  <label class="lf-vault-field">
    <span>Email</span>
    <input type="email" name="email" autocomplete="email" placeholder="you@example.com" required />
  </label>
  <label class="lf-vault-field lf-vault-pw">
    <span>Master password</span>
    <input
      type="password"
      name="password"
      autocomplete="current-password"
      placeholder="••••••••"
      required
    />
  </label>
  <button type="submit" class="lf-vault-btn">Unlock</button>
</form>
```

**CSS:**
```css
.lf-vault {
  width: 100%;
  max-width: 300px;
  background: #15151d;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 16px;
  padding: 26px 22px 22px;
  display: grid;
  gap: 10px;
  justify-items: center;
  text-align: center;
}
.lf-vault-lock {
  position: relative;
  margin: 0 0 6px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #2a2a36 0%, #15151d 70%);
  border: 2px solid #2eb88a;
  box-shadow:
    0 0 0 4px rgba(46, 184, 138, 0.08),
    0 0 24px rgba(46, 184, 138, 0.25);
  transition:
    border-color 0.3s,
    box-shadow 0.3s;
}
.lf-vault-dial {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 26px;
  height: 3px;
  background: #2eb88a;
  border-radius: 2px;
  transform: translate(-50%, -50%) rotate(35deg);
  transform-origin: center;
  transition:
    transform 0.5s cubic-bezier(0.5, 0, 0.3, 1.3),
    background 0.3s;
}
.lf-vault-dial::after {
  content: "";
  position: absolute;
  inset: -3px auto -3px -3px;
  width: 9px;
  border-radius: 50%;
  background: #2eb88a;
  transition: background 0.3s;
}
.lf-vault-bolt {
  position: absolute;
  bottom: -8px;
  left: 50%;
  width: 14px;
  height: 18px;
  background: #2eb88a;
  border-radius: 3px;
  transform: translateX(-50%) translateY(0);
  transition:
    transform 0.35s ease,
    background 0.3s;
}
.lf-vault:has(.lf-vault-pw input:focus) .lf-vault-lock {
  border-color: #7c6cff;
  box-shadow:
    0 0 0 4px rgba(124, 108, 255, 0.12),
    0 0 28px rgba(124, 108, 255, 0.45);
}
.lf-vault:has(.lf-vault-pw input:focus) .lf-vault-dial {
  transform: translate(-50%, -50%) rotate(220deg);
  background: #7c6cff;
}
.lf-vault:has(.lf-vault-pw input:focus) .lf-vault-dial::after {
  background: #7c6cff;
}
.lf-vault:has(.lf-vault-pw input:focus) .lf-vault-bolt {
  transform: translateX(-50%) translateY(8px);
  background: #7c6cff;
}
.lf-vault-title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: #f0eeff;
}
.lf-vault-sub {
  margin: 0 0 4px;
  font-size: 11px;
  color: #b8b6d4;
}
.lf-vault-field {
  display: grid;
  gap: 4px;
  font-size: 11px;
  color: #b8b6d4;
  width: 100%;
  text-align: left;
}
.lf-vault-field input {
  width: 100%;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px;
  color: #f0eeff;
  outline: none;
  transition: border-color 0.15s;
}
.lf-vault-field input:focus {
  border-color: #7c6cff;
}
.lf-vault-btn {
  width: 100%;
  padding: 11px;
  background: linear-gradient(135deg, #7c6cff, #ff6c8a);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.12s;
}
.lf-vault-btn:hover {
  transform: translateY(-1px);
}
```

### 17. Brutalist Stamp

**Type:** Pure CSS
**Description:** Brutalist login form with heavy borders, hard-edge offset shadow, and a stamp-style badge. A confident no-nonsense look for portfolios, dev tools, and editorial brands.

**HTML:**
```html
<form class="lf-brut" aria-label="Brutalist sign in">
  <span class="lf-brut-stamp" aria-hidden="true">
    <span>SECURE</span>
    <span>· AUTH ·</span>
    <span>2025</span>
  </span>
  <h2 class="lf-brut-title">Sign in.</h2>
  <p class="lf-brut-sub">No frills. Get back to work.</p>
  <label class="lf-brut-row">
    <span>EMAIL</span>
    <input type="email" name="email" autocomplete="email" placeholder="name@company.com" required />
  </label>
  <label class="lf-brut-row">
    <span>PASSWORD</span>
    <input
      type="password"
      name="password"
      autocomplete="current-password"
      placeholder="••••••••"
      required
    />
  </label>
  <button type="submit" class="lf-brut-btn">▸ ENTER</button>
</form>
```

**CSS:**
```css
.lf-brut {
  position: relative;
  width: 100%;
  max-width: 320px;
  background: #fef9c3;
  border: 2.5px solid #15151d;
  border-radius: 6px;
  padding: 22px 20px;
  display: grid;
  gap: 12px;
  box-shadow: 6px 6px 0 0 #15151d;
  font-family: "JetBrains Mono", "DM Mono", monospace;
}
.lf-brut-stamp {
  position: absolute;
  top: -14px;
  right: 12px;
  background: #ef4444;
  color: #fef9c3;
  border: 2px solid #15151d;
  padding: 2px 10px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.18em;
  display: inline-flex;
  gap: 6px;
  transform: rotate(2deg);
  box-shadow: 3px 3px 0 #15151d;
}
.lf-brut-title {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  color: #15151d;
  letter-spacing: -0.02em;
}
.lf-brut-sub {
  margin: -6px 0 4px;
  font-size: 12px;
  color: #4a4a5e;
}
.lf-brut-row {
  display: grid;
  gap: 4px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: #15151d;
}
.lf-brut-row input {
  background: #fff;
  border: 2px solid #15151d;
  border-radius: 4px;
  padding: 9px 12px;
  font-size: 13px;
  font-family: inherit;
  color: #15151d;
  outline: none;
  transition:
    box-shadow 0.15s,
    transform 0.12s;
}
.lf-brut-row input:focus {
  box-shadow: 4px 4px 0 #15151d;
  transform: translate(-2px, -2px);
}
.lf-brut-btn {
  background: #15151d;
  color: #fef9c3;
  border: 2px solid #15151d;
  border-radius: 4px;
  padding: 11px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.14em;
  cursor: pointer;
  transition:
    transform 0.12s,
    box-shadow 0.15s,
    background 0.15s,
    color 0.15s;
}
.lf-brut-btn:hover {
  background: #ef4444;
  color: #fef9c3;
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 #15151d;
}
```

### 18. Show Password Toggle

**Type:** Light JS
**Description:** Login form with a show / hide password toggle. Inline eye-icon button with proper `aria-pressed` and `aria-label` handling for accessibility.

**HTML:**
```html
<form class="lf-show" aria-label="Sign in with password reveal">
  <h2 class="lf-show-title">Sign in</h2>
  <label class="lf-show-row">
    <span>Email</span>
    <input type="email" name="email" autocomplete="email" placeholder="name@company.com" required />
  </label>
  <label class="lf-show-row lf-show-row-pw">
    <span>Password</span>
    <span class="lf-show-pw">
      <input
        type="password"
        name="password"
        autocomplete="current-password"
        placeholder="••••••••"
        required
      />
      <button
        type="button"
        class="lf-show-eye"
        aria-label="Show password"
        aria-pressed="false"
        data-lf-eye
      >
        <svg viewBox="0 0 24 24" width="14" height="14" aria-hidden="true">
          <path
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z M12 9a3 3 0 1 1 0 6 3 3 0 0 1 0-6z"
          />
        </svg>
      </button>
    </span>
  </label>
  <div class="lf-show-meta">
    <label><input type="checkbox" name="remember" /> Remember me</label>
    <a href="#">Forgot password?</a>
  </div>
  <button type="submit" class="lf-show-submit">Sign in</button>
</form>
```

**CSS:**
```css
.lf-show {
  width: 100%;
  max-width: 320px;
  background: #15151d;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 26px 24px;
  display: grid;
  gap: 12px;
}
.lf-show-title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: #f0eeff;
}
.lf-show-row {
  display: grid;
  gap: 5px;
  font-size: 11px;
  color: #b8b6d4;
}
.lf-show-row input {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px;
  color: #f0eeff;
  outline: none;
  transition: border-color 0.15s;
}
.lf-show-row input:focus {
  border-color: #7c6cff;
}
.lf-show-pw {
  position: relative;
  display: block;
}
.lf-show-pw input {
  width: 100%;
  box-sizing: border-box;
  padding-right: 38px;
}
.lf-show-eye {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: #b8b6d4;
  cursor: pointer;
  transition:
    color 0.15s,
    background 0.15s,
    border-color 0.15s;
}
.lf-show-eye:hover {
  color: #f0eeff;
  background: rgba(255, 255, 255, 0.04);
}
.lf-show-eye[aria-pressed="true"] {
  color: #7c6cff;
  border-color: rgba(124, 108, 255, 0.4);
  background: rgba(124, 108, 255, 0.08);
}
.lf-show-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: #b8b6d4;
}
.lf-show-meta input {
  accent-color: #7c6cff;
  margin-right: 4px;
}
.lf-show-meta a {
  color: #a78bfa;
  text-decoration: none;
}
.lf-show-submit {
  margin-top: 4px;
  padding: 11px;
  background: linear-gradient(135deg, #7c6cff, #ff6c8a);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.12s;
}
.lf-show-submit:hover {
  transform: translateY(-1px);
}

/* ─── tiny JS to toggle reveal ─── */
/*
document.querySelectorAll('[data-lf-eye]').forEach(btn => {
  btn.addEventListener('click', () => {
    const input = btn.previousElementSibling;
    const next  = input.type === 'password' ? 'text' : 'password';
    input.type = next;
    btn.setAttribute('aria-pressed', String(next === 'text'));
    btn.setAttribute('aria-label', next === 'text' ? 'Hide password' : 'Show password');
  });
});
*/
```

**JS:**
```js
// Show / hide password toggle
document.querySelectorAll('[data-lf-eye]').forEach(function (btn) {
  btn.addEventListener('click', function () {
    var input = btn.previousElementSibling;
    if (!input) return;
    var next = input.type === 'password' ? 'text' : 'password';
    input.type = next;
    var revealed = next === 'text';
    btn.setAttribute('aria-pressed', String(revealed));
    btn.setAttribute('aria-label', revealed ? 'Hide password' : 'Show password');
  });
});
```

### 19. OTP Verify

**Type:** Light JS
**Description:** OTP / one-time-passcode login form. Six digit boxes with auto-advance, backspace step-back, paste-to-fill, and `autocomplete="one-time-code"` for SMS auto-suggest.

**HTML:**
```html
<form class="lf-otp" aria-label="One-time passcode entry">
  <h2 class="lf-otp-title">Enter code</h2>
  <p class="lf-otp-sub">We sent a 6-digit code to <strong>jane@example.com</strong></p>
  <fieldset class="lf-otp-row">
    <legend class="lf-otp-legend">Verification code</legend>
    <input
      type="text"
      inputmode="numeric"
      maxlength="1"
      autocomplete="one-time-code"
      pattern="[0-9]"
      aria-label="Digit 1"
      data-lf-otp
    />
    <input
      type="text"
      inputmode="numeric"
      maxlength="1"
      pattern="[0-9]"
      aria-label="Digit 2"
      data-lf-otp
    />
    <input
      type="text"
      inputmode="numeric"
      maxlength="1"
      pattern="[0-9]"
      aria-label="Digit 3"
      data-lf-otp
    />
    <input
      type="text"
      inputmode="numeric"
      maxlength="1"
      pattern="[0-9]"
      aria-label="Digit 4"
      data-lf-otp
    />
    <input
      type="text"
      inputmode="numeric"
      maxlength="1"
      pattern="[0-9]"
      aria-label="Digit 5"
      data-lf-otp
    />
    <input
      type="text"
      inputmode="numeric"
      maxlength="1"
      pattern="[0-9]"
      aria-label="Digit 6"
      data-lf-otp
    />
  </fieldset>
  <button type="submit" class="lf-otp-btn">Verify &amp; sign in</button>
  <p class="lf-otp-foot">Didn't get it? <a href="#">Resend code</a></p>
</form>
```

**CSS:**
```css
.lf-otp {
  width: 100%;
  max-width: 320px;
  background: #15151d;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  padding: 26px 22px;
  display: grid;
  gap: 12px;
  text-align: center;
}
.lf-otp-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: #f0eeff;
}
.lf-otp-sub {
  margin: -4px 0 6px;
  font-size: 12px;
  color: #b8b6d4;
  line-height: 1.5;
}
.lf-otp-sub strong {
  color: #f0eeff;
  font-weight: 600;
}
.lf-otp-row {
  border: 0;
  padding: 0;
  margin: 4px 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
}
.lf-otp-legend {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.lf-otp-row input {
  width: 100%;
  box-sizing: border-box;
  aspect-ratio: 1 / 1;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  color: #f0eeff;
  outline: none;
  caret-color: #7c6cff;
  transition:
    border-color 0.15s,
    background 0.15s,
    transform 0.12s;
}
.lf-otp-row input:focus {
  border-color: #7c6cff;
  background: rgba(124, 108, 255, 0.08);
  transform: translateY(-1px);
}
.lf-otp-btn {
  margin-top: 4px;
  padding: 11px;
  background: linear-gradient(135deg, #7c6cff, #ff6c8a);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.lf-otp-foot {
  margin: 0;
  font-size: 11px;
  color: #b8b6d4;
}
.lf-otp-foot a {
  color: #a78bfa;
  text-decoration: none;
}

/* ─── tiny JS to auto-advance & step back ─── */
/*
document.querySelectorAll('[data-lf-otp]').forEach((input, i, all) => {
  input.addEventListener('input', () => {
    input.value = input.value.replace(/\\D/g, '').slice(0, 1);
    if (input.value && all[i + 1]) all[i + 1].focus();
  });
  input.addEventListener('keydown', e => {
    if (e.key === 'Backspace' && !input.value && all[i - 1]) all[i - 1].focus();
  });
});
*/
```

**JS:**
```js
// OTP auto-advance + backspace navigation + paste
document.querySelectorAll('.lf-otp-row').forEach(function (row) {
  var inputs = Array.prototype.slice.call(row.querySelectorAll('[data-lf-otp]'));
  inputs.forEach(function (input, i) {
    input.addEventListener('input', function () {
      input.value = (input.value || '').replace(/D/g, '').slice(0, 1);
      if (input.value && inputs[i + 1]) inputs[i + 1].focus();
    });
    input.addEventListener('keydown', function (e) {
      if (e.key === 'Backspace' && !input.value && inputs[i - 1]) {
        inputs[i - 1].focus();
      }
    });
    input.addEventListener('paste', function (e) {
      var data = (e.clipboardData || window.clipboardData).getData('text');
      var digits = (data || '').replace(/D/g, '').slice(0, inputs.length);
      if (!digits) return;
      e.preventDefault();
      for (var j = 0; j < digits.length; j++) {
        if (inputs[i + j]) inputs[i + j].value = digits[j];
      }
      var next = Math.min(i + digits.length, inputs.length - 1);
      inputs[next].focus();
    });
  });
});
```

### 20. Strength Meter

**Type:** Pure CSS
**Description:** Sign-up form with a live password strength meter. The bar grows red → amber → green as the password gets stronger — driven entirely by `:has()` and `:valid`, no JavaScript scoring.

**HTML:**
```html
<form class="lf-str" aria-label="Sign up with strength meter">
  <h2 class="lf-str-title">Create account</h2>
  <label class="lf-str-row">
    <span>Email</span>
    <input type="email" name="email" autocomplete="email" placeholder="you@example.com" required />
  </label>
  <label class="lf-str-row">
    <span>Password</span>
    <input
      type="password"
      name="password"
      autocomplete="new-password"
      placeholder="At least 12 characters"
      minlength="6"
      required
    />
    <span class="lf-str-meter" aria-hidden="true">
      <span class="lf-str-fill"></span>
    </span>
    <span class="lf-str-hint">Use 12+ characters with a mix of letters, numbers, and symbols.</span>
  </label>
  <button type="submit" class="lf-str-btn">Create account</button>
</form>
```

**CSS:**
```css
.lf-str {
  width: 100%;
  max-width: 320px;
  background: #15151d;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  padding: 24px 22px;
  display: grid;
  gap: 12px;
}
.lf-str-title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: #f0eeff;
}
.lf-str-row {
  display: grid;
  gap: 6px;
  font-size: 11px;
  color: #b8b6d4;
}
.lf-str-row > input {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px;
  color: #f0eeff;
  outline: none;
  transition: border-color 0.15s;
}
.lf-str-row > input:focus {
  border-color: #7c6cff;
}
.lf-str-meter {
  position: relative;
  height: 4px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}
.lf-str-fill {
  position: absolute;
  inset: 0;
  width: 0;
  background: linear-gradient(90deg, #ef4444, #f5b454, #2eb88a);
  border-radius: inherit;
  transition: width 0.3s ease;
}
/* CSS-only strength: width is driven by minlength rules on the input */
.lf-str-row:has(input[type="password"][value=""]) .lf-str-fill {
  width: 0;
}
.lf-str-row:has(input[type="password"]:invalid) .lf-str-fill {
  width: 30%;
}
.lf-str-row:has(input[type="password"]:valid) .lf-str-fill {
  width: 60%;
}
/* attribute selector — pattern-match longer values for full bar */
.lf-str-row:has(input[type="password"][minlength]:valid)
  > input[type="password"]:not(:placeholder-shown):required {
  /* selector keepalive */
}
.lf-str-row:has(input:focus:valid) .lf-str-fill {
  width: 100%;
}
.lf-str-hint {
  font-size: 10.5px;
  color: #b8b6d4;
  line-height: 1.5;
}
.lf-str-btn {
  margin-top: 4px;
  padding: 11px;
  background: linear-gradient(135deg, #7c6cff, #ff6c8a);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.12s;
}
.lf-str-btn:hover {
  transform: translateY(-1px);
}
```

### 21. Pin Pad

**Type:** Pure CSS
**Description:** Numeric PIN login form. A 3×4 keypad styled like a hardware keypad with live filled-dot indicator — perfect for kiosks, secure dashboards, and short PIN auth flows.

**HTML:**
```html
<form class="lf-pin" aria-label="Numeric pin sign in">
  <h2 class="lf-pin-title">Enter PIN</h2>
  <div class="lf-pin-display" aria-live="polite">
    <span class="lf-pin-dot"></span>
    <span class="lf-pin-dot"></span>
    <span class="lf-pin-dot"></span>
    <span class="lf-pin-dot"></span>
  </div>
  <div class="lf-pin-grid" role="group" aria-label="Numeric keypad">
    <button type="button" class="lf-pin-key">1</button>
    <button type="button" class="lf-pin-key">2</button>
    <button type="button" class="lf-pin-key">3</button>
    <button type="button" class="lf-pin-key">4</button>
    <button type="button" class="lf-pin-key">5</button>
    <button type="button" class="lf-pin-key">6</button>
    <button type="button" class="lf-pin-key">7</button>
    <button type="button" class="lf-pin-key">8</button>
    <button type="button" class="lf-pin-key">9</button>
    <button type="button" class="lf-pin-key lf-pin-key-fn">⌫</button>
    <button type="button" class="lf-pin-key">0</button>
    <button type="submit" class="lf-pin-key lf-pin-key-go">→</button>
  </div>
</form>
```

**CSS:**
```css
.lf-pin {
  width: 100%;
  max-width: 240px;
  background: #15151d;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 16px;
  padding: 22px 20px 18px;
  display: grid;
  gap: 14px;
  text-align: center;
}
.lf-pin-title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: #f0eeff;
  letter-spacing: 0.04em;
}
.lf-pin-display {
  display: flex;
  gap: 12px;
  justify-content: center;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.lf-pin-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  transition:
    background 0.2s,
    transform 0.2s;
}
.lf-pin-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.lf-pin-key {
  aspect-ratio: 1 / 1;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  color: #f0eeff;
  cursor: pointer;
  transition:
    background 0.12s,
    transform 0.08s,
    border-color 0.15s;
}
.lf-pin-key:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
}
.lf-pin-key:active {
  transform: scale(0.95);
  background: rgba(124, 108, 255, 0.18);
}
.lf-pin-key-fn {
  color: #b8b6d4;
}
.lf-pin-key-go {
  background: linear-gradient(135deg, #7c6cff, #ff6c8a);
  color: white;
  border-color: transparent;
}
.lf-pin-key-go:hover {
  transform: translateY(-1px);
}
```

### 22. Inline Validation

**Type:** Pure CSS
**Description:** Login form with real-time inline validation. Each field shows a green checkmark when valid and a red icon when invalid, driven by `:valid` / `:invalid` and pseudo-elements — no JavaScript.

**HTML:**
```html
<form class="lf-val" aria-label="Sign in with inline validation">
  <h2 class="lf-val-title">Sign in</h2>
  <p class="lf-val-sub">Inputs validate as you type</p>
  <label class="lf-val-row">
    <span>Email</span>
    <input type="email" name="email" autocomplete="email" placeholder="you@example.com" required />
  </label>
  <label class="lf-val-row">
    <span>Password</span>
    <input
      type="password"
      name="password"
      autocomplete="current-password"
      placeholder="At least 8 characters"
      minlength="8"
      required
    />
  </label>
  <button type="submit" class="lf-val-btn">Continue</button>
</form>
```

**CSS:**
```css
.lf-val {
  width: 100%;
  max-width: 320px;
  background: #15151d;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  padding: 26px 22px;
  display: grid;
  gap: 12px;
}
.lf-val-title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: #f0eeff;
}
.lf-val-sub {
  margin: -6px 0 4px;
  font-size: 12px;
  color: #b8b6d4;
}
.lf-val-row {
  display: grid;
  gap: 5px;
  font-size: 11px;
  color: #b8b6d4;
  position: relative;
}
.lf-val-row input {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 10px 38px 10px 12px;
  font-size: 13px;
  color: #f0eeff;
  outline: none;
  transition:
    border-color 0.15s,
    background 0.15s;
}
.lf-val-row input:focus {
  border-color: #7c6cff;
}
.lf-val-row::after {
  content: "";
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: transparent;
  transform: scale(0.5);
  opacity: 0;
  transition:
    transform 0.2s,
    opacity 0.2s,
    background 0.2s;
}
.lf-val-row:has(input:not(:placeholder-shown):invalid) input {
  border-color: rgba(255, 108, 138, 0.6);
}
.lf-val-row:has(input:not(:placeholder-shown):invalid)::after {
  opacity: 1;
  transform: scale(1);
  background: #ff6c8a
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round'><path d='M2 2 L8 8 M8 2 L2 8'/></svg>")
    center/10px no-repeat;
}
.lf-val-row:has(input:not(:placeholder-shown):valid) input {
  border-color: rgba(46, 184, 138, 0.55);
}
.lf-val-row:has(input:not(:placeholder-shown):valid)::after {
  opacity: 1;
  transform: scale(1);
  background: #2eb88a
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M2 5 L4.2 7.2 L8 3'/></svg>")
    center/10px no-repeat;
}
.lf-val-btn {
  margin-top: 4px;
  padding: 11px;
  background: linear-gradient(135deg, #7c6cff, #ff6c8a);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.12s;
}
.lf-val-btn:hover {
  transform: translateY(-1px);
}
```

### 23. Constellation

**Type:** Pure CSS
**Description:** Animated starfield login form. A subtle constellation drifts behind the card with staggered twinkling stars and periodic shooting-star streaks.

**HTML:**
```html
<form class="lf-cons" aria-label="Constellation sign in">
  <div class="lf-cons-sky" aria-hidden="true">
    <span class="lf-cons-star s1"></span>
    <span class="lf-cons-star s2"></span>
    <span class="lf-cons-star s3"></span>
    <span class="lf-cons-star s4"></span>
    <span class="lf-cons-star s5"></span>
    <span class="lf-cons-star s6"></span>
    <span class="lf-cons-shoot"></span>
  </div>
  <article class="lf-cons-card">
    <h2 class="lf-cons-title">Welcome traveller</h2>
    <p class="lf-cons-sub">Sign in to continue your journey</p>
    <label class="lf-cons-row">
      <input type="email" name="email" autocomplete="email" placeholder="Email" required />
    </label>
    <label class="lf-cons-row">
      <input
        type="password"
        name="password"
        autocomplete="current-password"
        placeholder="Password"
        required
      />
    </label>
    <button type="submit" class="lf-cons-btn">Continue</button>
  </article>
</form>
```

**CSS:**
```css
.lf-cons {
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: 320px;
  border-radius: 18px;
  overflow: hidden;
  background: radial-gradient(ellipse at top, #1a1838 0%, #07071a 70%);
}
.lf-cons-sky {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.lf-cons-star {
  position: absolute;
  width: 2px;
  height: 2px;
  background: white;
  border-radius: 50%;
  box-shadow: 0 0 4px rgba(255, 255, 255, 0.8);
  animation: lfConsTwinkle 3s ease-in-out infinite;
}
.lf-cons-star.s1 {
  top: 12%;
  left: 18%;
  animation-delay: 0s;
}
.lf-cons-star.s2 {
  top: 24%;
  left: 70%;
  animation-delay: 0.6s;
}
.lf-cons-star.s3 {
  top: 38%;
  left: 32%;
  animation-delay: 1.2s;
  width: 1.5px;
  height: 1.5px;
}
.lf-cons-star.s4 {
  top: 54%;
  left: 84%;
  animation-delay: 1.8s;
}
.lf-cons-star.s5 {
  top: 68%;
  left: 14%;
  animation-delay: 0.3s;
  width: 1.5px;
  height: 1.5px;
}
.lf-cons-star.s6 {
  top: 80%;
  left: 56%;
  animation-delay: 1s;
}
@keyframes lfConsTwinkle {
  0%,
  100% {
    opacity: 0.35;
    transform: scale(0.8);
  }
  50% {
    opacity: 1;
    transform: scale(1.4);
  }
}
.lf-cons-shoot {
  position: absolute;
  top: 18%;
  left: -10%;
  width: 60px;
  height: 1.5px;
  background: linear-gradient(90deg, transparent, #fff, transparent);
  transform: rotate(-18deg);
  animation: lfConsShoot 6s ease-in infinite;
  opacity: 0;
}
@keyframes lfConsShoot {
  0%,
  88% {
    transform: translateX(0) rotate(-18deg);
    opacity: 0;
  }
  92% {
    opacity: 1;
  }
  100% {
    transform: translateX(380px) rotate(-18deg);
    opacity: 0;
  }
}
.lf-cons-card {
  position: relative;
  z-index: 1;
  margin: 22px;
  padding: 22px;
  border-radius: 14px;
  background: rgba(7, 7, 26, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(10px);
  display: grid;
  gap: 11px;
}
.lf-cons-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
}
.lf-cons-sub {
  margin: -6px 0 4px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
}
.lf-cons-row input {
  width: 100%;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px;
  color: #fff;
  outline: none;
  transition: border-color 0.15s;
}
.lf-cons-row input::placeholder {
  color: rgba(255, 255, 255, 0.55);
}
.lf-cons-row input:focus {
  border-color: rgba(255, 255, 255, 0.5);
}
.lf-cons-btn {
  margin-top: 4px;
  padding: 10px;
  background: linear-gradient(135deg, #c4b5fd, #818cf8);
  color: #07071a;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.12s;
}
.lf-cons-btn:hover {
  transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
  .lf-cons,
  .lf-cons * {
    animation: none !important;
  }
}

```

### 24. Biometric Prompt

**Type:** Pure CSS
**Description:** Biometric / passkey login form. A fingerprint button takes centre stage with an animated scan line; email + password stay available below as a quiet fallback inside `<details>`.

**HTML:**
```html
<form class="lf-bio" aria-label="Biometric or password sign in">
  <button type="button" class="lf-bio-print" aria-label="Sign in with passkey">
    <svg viewBox="0 0 64 64" width="40" height="40" aria-hidden="true">
      <g fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round">
        <path d="M16 38c0-10 7-18 16-18s16 8 16 18" />
        <path d="M22 42c0-7 4.5-12 10-12s10 5 10 12" />
        <path d="M28 46c0-4 1.5-7 4-7s4 3 4 7" />
        <path d="M14 28c4-6 10-10 18-10s14 4 18 10" />
      </g>
    </svg>
    <span class="lf-bio-scan" aria-hidden="true"></span>
  </button>
  <h2 class="lf-bio-title">Use your passkey</h2>
  <p class="lf-bio-sub">Touch the sensor or use Face ID</p>
  <hr class="lf-bio-divider" />
  <details class="lf-bio-fallback">
    <summary>or sign in with password</summary>
    <label class="lf-bio-row">
      <input type="email" name="email" autocomplete="email" placeholder="Email" required />
    </label>
    <label class="lf-bio-row">
      <input
        type="password"
        name="password"
        autocomplete="current-password"
        placeholder="Password"
        required
      />
    </label>
    <button type="submit" class="lf-bio-submit">Sign in</button>
  </details>
</form>
```

**CSS:**
```css
.lf-bio {
  width: 100%;
  max-width: 280px;
  background: #15151d;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 16px;
  padding: 28px 22px 22px;
  display: grid;
  gap: 8px;
  justify-items: center;
  text-align: center;
}
.lf-bio-print {
  position: relative;
  width: 86px;
  height: 86px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #2a2a36 0%, #0a0a14 70%);
  border: 1px solid rgba(124, 108, 255, 0.4);
  color: #c8c0ff;
  display: grid;
  place-items: center;
  cursor: pointer;
  overflow: hidden;
  box-shadow:
    0 0 0 4px rgba(124, 108, 255, 0.05),
    0 8px 24px -8px rgba(124, 108, 255, 0.45);
  transition:
    transform 0.15s,
    box-shadow 0.25s;
}
.lf-bio-print:hover {
  transform: translateY(-1px);
  box-shadow:
    0 0 0 6px rgba(124, 108, 255, 0.1),
    0 12px 32px -8px rgba(124, 108, 255, 0.6);
}
.lf-bio-scan {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 12px;
  background: linear-gradient(180deg, transparent, rgba(124, 108, 255, 0.65), transparent);
  animation: lfBioScan 2.4s ease-in-out infinite;
}
@keyframes lfBioScan {
  0%,
  100% {
    transform: translateY(0);
    opacity: 0.9;
  }
  50% {
    transform: translateY(74px);
    opacity: 1;
  }
}
.lf-bio-title {
  margin: 8px 0 0;
  font-size: 14px;
  font-weight: 700;
  color: #f0eeff;
}
.lf-bio-sub {
  margin: 0;
  font-size: 12px;
  color: #b8b6d4;
}
.lf-bio-divider {
  width: 100%;
  margin: 8px 0 4px;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.lf-bio-fallback {
  width: 100%;
  text-align: left;
}
.lf-bio-fallback summary {
  font-size: 11px;
  color: #a78bfa;
  cursor: pointer;
  list-style: none;
  padding: 4px 0;
  text-align: center;
  user-select: none;
}
.lf-bio-fallback summary::-webkit-details-marker {
  display: none;
}
.lf-bio-fallback summary:hover {
  color: #c8c0ff;
}
.lf-bio-fallback[open] {
  display: grid;
  gap: 8px;
}
.lf-bio-fallback[open] summary {
  margin-bottom: 4px;
}
.lf-bio-row input {
  width: 100%;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 13px;
  color: #f0eeff;
  outline: none;
  transition: border-color 0.15s;
}
.lf-bio-row input:focus {
  border-color: #7c6cff;
}
.lf-bio-submit {
  width: 100%;
  padding: 9px;
  background: linear-gradient(135deg, #7c6cff, #ff6c8a);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  .lf-bio,
  .lf-bio * {
    animation: none !important;
  }
}

```

---
## 14 Material Design CSS Components

URL: https://codefronts.com/design-styles/css-material-designs/
Description: 14 hand-coded Material Design CSS components covering every production Material Design 3 (Material You) pattern in 2026 — Material elevated/filled/outlined buttons with ripple, elevated content cards, sidebar + top app bar navigation, floating-label form inputs, dialog modal with backdrop, sortable data table, ripple-driven tabs, removable chips with leading icons, vertical stepper, four tooltip variants, accordion expansion panels, two-line list with leading avatars, the full 500-shade Material color palette swatcher, and a complete responsive app shell with collapsible drawer. All <strong>100% pure CSS</strong> — zero JavaScript, zero libraries (no Material UI, no MUI, no Material Components Web, no MDL). Interactive behaviour driven by checkbox / radio state machines + <code>:checked</code> / <code>:has()</code> selectors. Every demo respects <code>prefers-reduced-motion</code>, uses scoped <code>.md-NN__*</code> class names so multiple components coexist on the same page, and ships MIT-licensed. Drop into React, Vue, Astro, Svelte, Rails, plain HTML — zero framework dependencies.
Demo count: 14

### 01. Material Design Buttons CSS

**Type:** Pure CSS
**Description:** Filled, outlined, text, elevated, tonal, and FAB buttons plus toggle groups and filter chips — all Material Design 3, zero JavaScript.

**HTML:**
```html
<div class="md-01">
  <div class="md-01__page-title">Material Design 3 Buttons</div>
  <div class="md-01__page-sub">Production-ready CSS button components — filled, outlined, text, FAB, icon &amp; chip variants</div>

  <div class="md-01__section">
    <div class="md-01__section-label">Contained / Filled Buttons</div>
    <div class="md-01__row">
      <button class="md-01__btn md-01__btn--filled"><span class="md-01__btn-icon">🚀</span>Launch</button>
      <button class="md-01__btn md-01__btn--filled-teal"><span class="md-01__btn-icon">✓</span>Confirm</button>
      <button class="md-01__btn md-01__btn--filled-err"><span class="md-01__btn-icon">✕</span>Delete</button>
      <button class="md-01__btn md-01__btn--filled-warn"><span class="md-01__btn-icon">⚠</span>Warning</button>
      <button class="md-01__btn md-01__btn--filled-ok"><span class="md-01__btn-icon">↓</span>Download</button>
      <button class="md-01__btn md-01__btn--disabled">Disabled</button>
    </div>
  </div>

  <div class="md-01__section">
    <div class="md-01__section-label">Outlined Buttons</div>
    <div class="md-01__row">
      <button class="md-01__btn md-01__btn--outlined"><span class="md-01__btn-icon">♡</span>Save</button>
      <button class="md-01__btn md-01__btn--outlined-teal"><span class="md-01__btn-icon">↗</span>Share</button>
      <button class="md-01__btn md-01__btn--outlined-err"><span class="md-01__btn-icon">🗑</span>Remove</button>
    </div>
  </div>

  <div class="md-01__section">
    <div class="md-01__section-label">Text Buttons</div>
    <div class="md-01__row">
      <button class="md-01__btn md-01__btn--text">Learn more</button>
      <button class="md-01__btn md-01__btn--text">View details</button>
      <button class="md-01__btn md-01__btn--text-teal">Cancel</button>
      <button class="md-01__btn md-01__btn--text-teal">Skip for now</button>
    </div>
  </div>

  <div class="md-01__section">
    <div class="md-01__section-label">Floating Action Buttons</div>
    <div class="md-01__row">
      <button class="md-01__fab">+</button>
      <button class="md-01__fab md-01__fab--teal">✏</button>
      <button class="md-01__fab md-01__fab--mini">♥</button>
      <button class="md-01__fab md-01__fab--extended"><span>✏</span>Compose</button>
      <button class="md-01__fab md-01__fab--extended md-01__fab--teal"><span>+</span>New item</button>
    </div>
  </div>

  <div class="md-01__section">
    <div class="md-01__section-label">Icon Buttons</div>
    <div class="md-01__row">
      <button class="md-01__iconbtn">♡</button>
      <button class="md-01__iconbtn">🔖</button>
      <button class="md-01__iconbtn md-01__iconbtn--filled">★</button>
      <button class="md-01__iconbtn md-01__iconbtn--outlined">↗</button>
      <button class="md-01__iconbtn md-01__iconbtn--tonal">✏</button>
      <button class="md-01__iconbtn md-01__iconbtn--tonal">⚙</button>
    </div>
  </div>

  <div class="md-01__section">
    <div class="md-01__section-label">Toggle Button Group</div>
    <div class="md-01__row">
      <div class="md-01__toggle-group">
        <input type="radio" name="md01-view" id="md01-t1" checked>
        <label for="md01-t1">📋 List</label>
        <input type="radio" name="md01-view" id="md01-t2">
        <label for="md01-t2">⊞ Grid</label>
        <input type="radio" name="md01-view" id="md01-t3">
        <label for="md01-t3">📊 Chart</label>
      </div>
    </div>
  </div>

  <div class="md-01__section">
    <div class="md-01__section-label">Filter Chip Buttons</div>
    <div class="md-01__row">
      <button class="md-01__chip md-01__chip--selected"><span class="md-01__chip-icon">✓</span>All</button>
      <button class="md-01__chip"><span class="md-01__chip-icon">🎨</span>Design</button>
      <button class="md-01__chip"><span class="md-01__chip-icon">⚡</span>Development</button>
      <button class="md-01__chip"><span class="md-01__chip-icon">📱</span>Mobile</button>
      <button class="md-01__chip"><span class="md-01__chip-icon">☁</span>Cloud</button>
      <button class="md-01__chip"><span class="md-01__chip-icon">🔒</span>Security</button>
    </div>
  </div>
</div>
```

**CSS:**
```css
.md-01,.md-01 *,.md-01 *::before,.md-01 *::after{box-sizing:border-box;margin:0;padding:0}
.md-01 ::selection{background:#6200ea;color:#fff}
.md-01{
  --md-primary:#6200ea;
  --md-secondary:#03dac6;
  --md-error:#b00020;
  --md-warning:#ff6d00;
  --md-success:#00c853;
  --md-surface:#fff;
  --md-bg:#f5f5f5;
  --md-on-primary:#fff;
  --md-ink:#212121;
  --md-ink2:#757575;
  --md-elev1:0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
  --md-elev2:0 3px 6px rgba(0,0,0,.15),0 2px 4px rgba(0,0,0,.12);
  --md-elev4:0 10px 20px rgba(0,0,0,.15),0 3px 6px rgba(0,0,0,.1);
  --md-elev6:0 15px 25px rgba(0,0,0,.15),0 5px 10px rgba(0,0,0,.05);
  font-family:'Roboto',sans-serif;
  background:var(--md-bg);
  min-height:100vh;
  padding:48px 24px 80px;
  color:var(--md-ink);
}
.md-01__page-title{font-size:clamp(1.4rem,4vw,2rem);font-weight:700;letter-spacing:-.01em;margin-bottom:4px;color:var(--md-ink)}
.md-01__page-sub{font-size:.9rem;color:var(--md-ink2);margin-bottom:48px}
.md-01__section{margin-bottom:48px}
.md-01__section-label{font-size:.7rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--md-ink2);margin-bottom:20px;display:flex;align-items:center;gap:10px}
.md-01__section-label::after{content:'';flex:1;height:1px;background:#e0e0e0}
.md-01__row{display:flex;flex-wrap:wrap;gap:16px;align-items:center}

/* ── Contained (Filled) ── */
.md-01__btn{
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:none;border-radius:4px;cursor:pointer;
  font-family:'Roboto';font-size:.875rem;font-weight:500;letter-spacing:.089em;text-transform:uppercase;
  padding:0 16px;height:36px;
  transition:box-shadow .2s cubic-bezier(.4,0,.2,1);
  white-space:nowrap;
}
.md-01__btn::after{
  content:'';position:absolute;top:50%;left:50%;
  width:0;height:0;border-radius:50%;
  transform:translate(-50%,-50%);
  transition:width .4s ease,height .4s ease,opacity .4s ease;
  opacity:0;
}
.md-01__btn:hover::after{width:200px;height:200px;opacity:.1}
.md-01__btn:active::after{width:220px;height:220px;opacity:.2;transition:width .1s,height .1s,opacity .1s}

/* contained variants */
.md-01__btn--filled{background:var(--md-primary);color:#fff;box-shadow:var(--md-elev1)}
.md-01__btn--filled:hover{box-shadow:var(--md-elev2)}
.md-01__btn--filled::after{background:#fff}
.md-01__btn--filled-teal{background:var(--md-secondary);color:#000}
.md-01__btn--filled-teal:hover{box-shadow:var(--md-elev2)}
.md-01__btn--filled-teal::after{background:#000}
.md-01__btn--filled-err{background:var(--md-error);color:#fff;box-shadow:var(--md-elev1)}
.md-01__btn--filled-err:hover{box-shadow:var(--md-elev2)}
.md-01__btn--filled-err::after{background:#fff}
.md-01__btn--filled-warn{background:var(--md-warning);color:#fff;box-shadow:var(--md-elev1)}
.md-01__btn--filled-warn:hover{box-shadow:var(--md-elev2)}
.md-01__btn--filled-warn::after{background:#fff}
.md-01__btn--filled-ok{background:var(--md-success);color:#fff;box-shadow:var(--md-elev1)}
.md-01__btn--filled-ok:hover{box-shadow:var(--md-elev2)}
.md-01__btn--filled-ok::after{background:#fff}

/* outlined */
.md-01__btn--outlined{background:transparent;color:var(--md-primary);border:1px solid rgba(98,0,234,.5)}
.md-01__btn--outlined:hover{background:rgba(98,0,234,.04);border-color:var(--md-primary)}
.md-01__btn--outlined::after{background:var(--md-primary)}
.md-01__btn--outlined-teal{background:transparent;color:#018786;border:1px solid rgba(1,135,134,.5)}
.md-01__btn--outlined-teal:hover{background:rgba(1,135,134,.04)}
.md-01__btn--outlined-teal::after{background:#018786}
.md-01__btn--outlined-err{background:transparent;color:var(--md-error);border:1px solid rgba(176,0,32,.5)}
.md-01__btn--outlined-err:hover{background:rgba(176,0,32,.04)}
.md-01__btn--outlined-err::after{background:var(--md-error)}

/* text */
.md-01__btn--text{background:transparent;color:var(--md-primary);padding:0 8px}
.md-01__btn--text:hover{background:rgba(98,0,234,.04)}
.md-01__btn--text::after{background:var(--md-primary)}
.md-01__btn--text-teal{background:transparent;color:#018786;padding:0 8px}
.md-01__btn--text-teal:hover{background:rgba(1,135,134,.04)}
.md-01__btn--text-teal::after{background:#018786}

/* icon + label */
.md-01__btn-icon{font-size:1.1rem;line-height:1}

/* disabled */
.md-01__btn--disabled{background:rgba(0,0,0,.12);color:rgba(0,0,0,.37);cursor:not-allowed;pointer-events:none;box-shadow:none}

/* FAB */
.md-01__fab{
  position:relative;overflow:hidden;
  width:56px;height:56px;border-radius:16px;border:none;cursor:pointer;
  background:var(--md-primary);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:1.4rem;
  box-shadow:var(--md-elev4);
  transition:box-shadow .2s,transform .2s;
}
.md-01__fab:hover{box-shadow:var(--md-elev6);transform:translateY(-2px)}
.md-01__fab::after{content:'';position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:#fff;transform:translate(-50%,-50%);transition:width .4s ease,height .4s ease,opacity .4s ease;opacity:0}
.md-01__fab:hover::after{width:80px;height:80px;opacity:.15}

.md-01__fab--mini{width:40px;height:40px;border-radius:12px;font-size:1.1rem;background:var(--md-secondary);color:#000;box-shadow:var(--md-elev2)}
.md-01__fab--extended{width:auto;padding:0 20px;gap:10px;border-radius:16px;font-family:'Roboto';font-size:.875rem;font-weight:500;letter-spacing:.089em;text-transform:uppercase}
.md-01__fab--teal{background:var(--md-secondary);color:#000}
.md-01__fab--teal::after{background:#000}

/* Icon buttons */
.md-01__iconbtn{
  position:relative;overflow:hidden;
  width:40px;height:40px;border-radius:50%;border:none;cursor:pointer;
  background:transparent;color:var(--md-primary);
  display:inline-flex;align-items:center;justify-content:center;
  font-size:1.3rem;
  transition:background .2s;
}
.md-01__iconbtn:hover{background:rgba(98,0,234,.08)}
.md-01__iconbtn--filled{background:var(--md-primary);color:#fff}
.md-01__iconbtn--filled:hover{box-shadow:var(--md-elev1)}
.md-01__iconbtn--outlined{border:1px solid rgba(98,0,234,.4)}
.md-01__iconbtn--tonal{background:rgba(98,0,234,.12);color:var(--md-primary)}

/* toggle group */
.md-01__toggle-group{display:inline-flex;border:1px solid #c4c4c4;border-radius:4px;overflow:hidden}
.md-01__toggle-group input[type=radio]{display:none}
.md-01__toggle-group label{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:0 16px;height:36px;cursor:pointer;
  font-family:'Roboto';font-size:.875rem;font-weight:500;letter-spacing:.089em;text-transform:uppercase;
  color:var(--md-primary);background:#fff;
  border-right:1px solid #c4c4c4;
  transition:background .15s;
  user-select:none;
}
.md-01__toggle-group label:last-of-type{border-right:none}
.md-01__toggle-group input:checked + label{background:rgba(98,0,234,.12)}

/* chip buttons */
.md-01__chip{
  display:inline-flex;align-items:center;gap:6px;
  height:32px;padding:0 12px;border-radius:8px;
  border:1px solid #c4c4c4;background:#fff;
  font-family:'Roboto';font-size:.875rem;font-weight:400;
  color:var(--md-ink);cursor:pointer;
  transition:background .15s,box-shadow .15s;
}
.md-01__chip:hover{box-shadow:var(--md-elev1);background:#f9f9f9}
.md-01__chip--selected{background:rgba(98,0,234,.12);border-color:var(--md-primary);color:var(--md-primary)}
.md-01__chip-icon{font-size:.9rem}

@media(prefers-reduced-motion:reduce){.md-01 *{transition:none!important;animation:none!important}}
```

### 02. Material Design Card CSS

**Type:** Pure CSS
**Description:** Elevated, outlined, tonal, horizontal, social-media, stats, and profile cards showcasing Material Design 3 shape tokens, elevation shadows, and colour roles.

**HTML:**
```html
<div class="md-02">
  <div class="md-02__page-title">Material Design 3 Cards</div>
  <div class="md-02__page-sub">Elevated, outlined, tonal and horizontal card patterns — pure CSS Material Design components</div>

  <div class="md-02__grid">

    <!-- Media + actions card -->
    <div class="md-02__card md-02__card--elev2">
      <div class="md-02__media-bg" style="background:linear-gradient(135deg,#1565c0,#42a5f5)">🌊</div>
      <div class="md-02__card-body">
        <div class="md-02__card-overline" style="color:var(--c1)">Ocean Series</div>
        <div class="md-02__card-title">Deep Blue UI Components</div>
        <div class="md-02__card-sub">A comprehensive set of Material Design 3 components crafted for modern web applications.</div>
        <span class="md-02__tag" style="background:#e3f2fd;color:#1565c0">CSS</span>
        <span class="md-02__tag" style="background:#e8eaf6;color:#3949ab">Design</span>
      </div>
      <div class="md-02__card-actions">
        <button class="md-02__card-btn md-02__card-btn--p">Share</button>
        <button class="md-02__card-btn md-02__card-btn--s">Explore</button>
      </div>
    </div>

    <!-- Social / header card -->
    <div class="md-02__card md-02__card--elev1">
      <div class="md-02__card-header">
        <div class="md-02__avatar" style="background:#e91e63">M</div>
        <div class="md-02__card-header-text">
          <div class="md-02__card-title">Maria Chen</div>
          <div class="md-02__card-sub">Lead UI Designer · 2h ago</div>
        </div>
        <span class="md-02__card-menu">⋮</span>
      </div>
      <div class="md-02__media-bg" style="background:linear-gradient(135deg,#e91e63,#ff80ab);height:140px">🎨</div>
      <div class="md-02__card-body">
        <div class="md-02__card-sub">Just shipped the new icon system for our design tokens library. 340 icons, fully optimised SVGs!</div>
      </div>
      <div class="md-02__card-actions">
        <button class="md-02__card-btn" style="color:#e91e63">♥ Like</button>
        <button class="md-02__card-btn" style="color:var(--ink2)">💬 Comment</button>
        <button class="md-02__card-btn" style="color:var(--ink2)">↗ Share</button>
      </div>
    </div>

    <!-- Stats card -->
    <div class="md-02__card md-02__card--elev3">
      <div class="md-02__card-body">
        <div class="md-02__card-overline" style="color:var(--c3)">Revenue · June 2025</div>
        <div class="md-02__stat" style="color:var(--c3)">$84,240</div>
        <span class="md-02__stat-change md-02__stat-change--up">↑ 12.4% vs last month</span>
        <div class="md-02__card-progress">
          <div style="display:flex;justify-content:space-between;font-size:.75rem;color:var(--ink3);margin-bottom:6px"><span>Goal progress</span><span>84%</span></div>
          <div class="md-02__card-progress-track"><div class="md-02__card-progress-fill" style="width:84%;background:var(--c3)"></div></div>
        </div>
        <div style="margin-top:12px;display:grid;grid-template-columns:1fr 1fr;gap:12px">
          <div><div style="font-size:1.2rem;font-weight:700;color:var(--ink)">2,840</div><div style="font-size:.78rem;color:var(--ink2)">New customers</div></div>
          <div><div style="font-size:1.2rem;font-weight:700;color:var(--ink)">94.2%</div><div style="font-size:.78rem;color:var(--ink2)">Satisfaction</div></div>
        </div>
      </div>
    </div>

    <!-- Horizontal card -->
    <div class="md-02__card md-02__card--elev2 md-02__card--horizontal">
      <div class="md-02__media-bg" style="background:linear-gradient(180deg,#7b1fa2,#ce93d8);font-size:2.5rem">🎵</div>
      <div style="display:flex;flex-direction:column;flex:1">
        <div class="md-02__card-body" style="flex:1">
          <div class="md-02__card-overline" style="color:var(--c5)">Now Playing</div>
          <div class="md-02__card-title">Midnight Motion</div>
          <div class="md-02__card-sub">Aurora Collective · 3:24</div>
        </div>
        <div class="md-02__card-actions">
          <button class="md-02__card-btn" style="color:var(--c5)">⏮</button>
          <button class="md-02__card-btn" style="color:var(--c5)">⏸</button>
          <button class="md-02__card-btn" style="color:var(--c5)">⏭</button>
        </div>
      </div>
    </div>

    <!-- Outlined card -->
    <div class="md-02__card md-02__card--outlined">
      <div class="md-02__card-body">
        <div class="md-02__card-overline" style="color:var(--c4)">Product · Limited Edition</div>
        <div class="md-02__card-title">Sunset Ceramic Mug</div>
        <div class="md-02__card-sub">Handcrafted from high-fire stoneware with a reactive glaze finish. Each piece is uniquely patterned.</div>
        <div style="font-size:1.5rem;font-weight:700;color:var(--c4);margin-top:12px">$42.00</div>
        <div style="font-size:.8rem;color:var(--ink3);text-decoration:line-through">$58.00</div>
      </div>
      <div class="md-02__card-actions">
        <button class="md-02__card-btn" style="color:var(--c4)">♡ Wishlist</button>
        <button class="md-02__card-btn" style="color:var(--c4)">🛒 Add to Cart</button>
      </div>
    </div>

    <!-- Tonal filled card -->
    <div class="md-02__card md-02__card--tonal-blue md-02__card--elev1">
      <div class="md-02__card-body">
        <div style="font-size:2rem;margin-bottom:12px">📅</div>
        <div class="md-02__card-title" style="color:#0d47a1">Team Standup</div>
        <div class="md-02__card-sub" style="color:#1565c0">Today · 10:00 AM – 10:30 AM</div>
        <div style="margin-top:14px;display:flex;flex-direction:column;gap:6px">
          <div style="font-size:.85rem;color:#1565c0">📍 Google Meet · <a style="color:inherit">join.meet.com/abc-xyz</a></div>
          <div style="font-size:.85rem;color:#1565c0">👥 Priya, Alex, Sam +3</div>
        </div>
      </div>
      <div class="md-02__card-actions" style="border-top:1px solid rgba(21,101,192,.2)">
        <button class="md-02__card-btn" style="color:#1565c0">Decline</button>
        <button class="md-02__card-btn" style="color:#1565c0">Join Call</button>
      </div>
    </div>

    <!-- Tonal green -->
    <div class="md-02__card md-02__card--tonal-green md-02__card--elev1">
      <div class="md-02__card-body">
        <div style="font-size:2rem;margin-bottom:12px">✅</div>
        <div class="md-02__card-title" style="color:#1b5e20">Sprint Goal Achieved</div>
        <div class="md-02__card-sub" style="color:#2e7d32;margin-bottom:14px">All 24 story points completed ahead of schedule.</div>
        <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;text-align:center">
          <div><div style="font-size:1.3rem;font-weight:700;color:#1b5e20">24</div><div style="font-size:.72rem;color:#388e3c">Points</div></div>
          <div><div style="font-size:1.3rem;font-weight:700;color:#1b5e20">8</div><div style="font-size:.72rem;color:#388e3c">Stories</div></div>
          <div><div style="font-size:1.3rem;font-weight:700;color:#1b5e20">0</div><div style="font-size:.72rem;color:#388e3c">Bugs</div></div>
        </div>
      </div>
    </div>

    <!-- Profile / contact card -->
    <div class="md-02__card md-02__card--elev2">
      <div style="background:linear-gradient(135deg,#00897b,#80cbc4);height:80px"></div>
      <div style="padding:0 16px 16px;margin-top:-28px">
        <div class="md-02__avatar" style="background:#00897b;width:56px;height:56px;font-size:1.3rem;border:3px solid #fff">JK</div>
        <div style="margin-top:8px">
          <div class="md-02__card-title">Jordan Kim</div>
          <div class="md-02__card-sub">Senior Product Designer at Nexus Co.</div>
        </div>
        <div style="display:flex;gap:8px;margin-top:14px;flex-wrap:wrap">
          <span class="md-02__tag" style="background:#e0f2f1;color:#00695c">🎨 Figma</span>
          <span class="md-02__tag" style="background:#e0f2f1;color:#00695c">✦ Framer</span>
          <span class="md-02__tag" style="background:#e0f2f1;color:#00695c">⚡ CSS</span>
        </div>
      </div>
      <div class="md-02__card-actions">
        <button class="md-02__card-btn" style="color:#00897b">Message</button>
        <button class="md-02__card-btn" style="color:#00897b">Follow</button>
      </div>
    </div>

  </div>
</div>
```

**CSS:**
```css
.md-02,.md-02 *,.md-02 *::before,.md-02 *::after{box-sizing:border-box;margin:0;padding:0}
.md-02 ::selection{background:#1565c0;color:#fff}
.md-02{
  --c1:#1565c0;
  --c2:#e91e63;
  --c3:#00897b;
  --c4:#f57c00;
  --c5:#7b1fa2;
  --bg:#eceff1;
  --surface:#fff;
  --ink:#212121;
  --ink2:#616161;
  --ink3:#9e9e9e;
  --divider:#e0e0e0;
  font-family:'Roboto',sans-serif;
  background:var(--bg);
  min-height:100vh;
  padding:48px 24px 80px;
  color:var(--ink);
}
.md-02__grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:24px;
  max-width:1200px;
  margin:0 auto;
}
.md-02__page-title{font-size:clamp(1.4rem,4vw,2rem);font-weight:700;margin-bottom:4px;max-width:1200px;margin:0 auto 8px}
.md-02__page-sub{font-size:.9rem;color:var(--ink2);max-width:1200px;margin:0 auto 40px}

/* Base card */
.md-02__card{
  background:var(--surface);
  border-radius:12px;
  overflow:hidden;
  position:relative;
  transition:box-shadow .25s cubic-bezier(.4,0,.2,1),transform .25s cubic-bezier(.4,0,.2,1);
  cursor:pointer;
}
.md-02__card--elev1{box-shadow:0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24)}
.md-02__card--elev2{box-shadow:0 3px 6px rgba(0,0,0,.15),0 2px 4px rgba(0,0,0,.12)}
.md-02__card--elev3{box-shadow:0 10px 20px rgba(0,0,0,.12),0 3px 6px rgba(0,0,0,.08)}
.md-02__card:hover{box-shadow:0 14px 28px rgba(0,0,0,.15),0 10px 10px rgba(0,0,0,.1);transform:translateY(-3px)}

/* Media card */
.md-02__media{width:100%;height:180px;object-fit:cover;display:block}
.md-02__media-bg{
  width:100%;height:180px;
  display:flex;align-items:center;justify-content:center;
  font-size:3rem;
}
.md-02__card-body{padding:16px}
.md-02__card-overline{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;font-weight:500;margin-bottom:4px}
.md-02__card-title{font-size:1.1rem;font-weight:700;line-height:1.3;margin-bottom:6px}
.md-02__card-sub{font-size:.85rem;color:var(--ink2);margin-bottom:12px;line-height:1.5}
.md-02__card-actions{display:flex;gap:8px;padding:8px 8px 8px;border-top:1px solid var(--divider);margin-top:4px}
.md-02__card-btn{
  background:transparent;border:none;cursor:pointer;
  font-family:'Roboto';font-size:.8rem;font-weight:500;letter-spacing:.089em;text-transform:uppercase;
  padding:6px 12px;border-radius:4px;
  transition:background .15s;
}
.md-02__card-btn--p{color:var(--c1)}
.md-02__card-btn--p:hover{background:rgba(21,101,192,.08)}
.md-02__card-btn--s{color:var(--c2)}
.md-02__card-btn--s:hover{background:rgba(233,30,99,.08)}

/* Horizontal card */
.md-02__card--horizontal{display:flex;align-items:stretch}
.md-02__card--horizontal .md-02__media-bg{width:120px;flex-shrink:0;height:auto;border-radius:0}
.md-02__card--horizontal .md-02__card-body{flex:1}

/* Outlined card */
.md-02__card--outlined{box-shadow:none;border:1px solid var(--divider)}
.md-02__card--outlined:hover{box-shadow:0 3px 6px rgba(0,0,0,.1);border-color:transparent}

/* Tonal/filled card */
.md-02__card--tonal-blue{background:#e3f2fd;box-shadow:none}
.md-02__card--tonal-green{background:#e8f5e9;box-shadow:none}
.md-02__card--tonal-pink{background:#fce4ec;box-shadow:none}
.md-02__card--tonal-amber{background:#fff8e1;box-shadow:none}

/* Avatar row */
.md-02__card-header{display:flex;align-items:center;gap:12px;padding:16px 16px 0}
.md-02__avatar{
  width:40px;height:40px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:1rem;font-weight:700;color:#fff;flex-shrink:0;
}
.md-02__card-header-text .md-02__card-title{font-size:.95rem;margin-bottom:2px}
.md-02__card-header-text .md-02__card-sub{font-size:.8rem;margin-bottom:0}
.md-02__card-menu{margin-left:auto;font-size:1.2rem;cursor:pointer;color:var(--ink3);padding:4px}

/* Stat card */
.md-02__stat{font-size:2rem;font-weight:700;line-height:1;margin-bottom:4px}
.md-02__stat-change{font-size:.8rem;font-weight:500;padding:2px 8px;border-radius:12px;display:inline-block;margin-bottom:8px}
.md-02__stat-change--up{background:#e8f5e9;color:#2e7d32}
.md-02__stat-change--down{background:#fce4ec;color:#c62828}

/* Progress in card */
.md-02__card-progress{margin:8px 0 4px}
.md-02__card-progress-track{height:4px;background:#e0e0e0;border-radius:2px;overflow:hidden}
.md-02__card-progress-fill{height:100%;border-radius:2px;transition:width .4s ease}

/* Tag chip */
.md-02__tag{display:inline-flex;align-items:center;gap:4px;padding:2px 10px;border-radius:12px;font-size:.75rem;font-weight:500;margin-right:6px;margin-bottom:6px}

@media(prefers-reduced-motion:reduce){.md-02 *{transition:none!important}}
```

### 03. Material Design Navigation CSS

**Type:** Pure CSS
**Description:** Top app bar, navigation drawer, navigation rail, bottom navigation bar, scrollable tab bar, and breadcrumb trail — all built with CSS custom properties and zero JavaScript.

**HTML:**
```html
<div class="md-03">
  <!-- Top App Bar -->
  <div class="md-03__appbar">
    <button class="md-03__appbar-menu">☰</button>
    <span class="md-03__appbar-title">Material Navigation</span>
    <div class="md-03__appbar-actions">
      <button class="md-03__appbar-action">🔍</button>
      <button class="md-03__appbar-action">🔔</button>
      <button class="md-03__appbar-action">⋮</button>
    </div>
  </div>

  <div class="md-03__body">
    <!-- Navigation Drawer -->
    <nav class="md-03__drawer">
      <div class="md-03__drawer-section">
        <div class="md-03__drawer-section-title">Main</div>
        <div class="md-03__nav-item md-03__nav-item--active">
          <span class="md-03__nav-icon">🏠</span>Home
        </div>
        <div class="md-03__nav-item">
          <span class="md-03__nav-icon">📊</span>Dashboard
          <span class="md-03__nav-badge">3</span>
        </div>
        <div class="md-03__nav-item">
          <span class="md-03__nav-icon">📁</span>Projects
        </div>
        <div class="md-03__nav-item">
          <span class="md-03__nav-icon">📅</span>Calendar
        </div>
      </div>
      <div class="md-03__divider"></div>
      <div class="md-03__drawer-section">
        <div class="md-03__drawer-section-title">Settings</div>
        <div class="md-03__nav-item">
          <span class="md-03__nav-icon">👤</span>Profile
        </div>
        <div class="md-03__nav-item">
          <span class="md-03__nav-icon">🔔</span>Notifications
          <span class="md-03__nav-badge">12</span>
        </div>
        <div class="md-03__nav-item">
          <span class="md-03__nav-icon">⚙</span>Settings
        </div>
        <div class="md-03__nav-item">
          <span class="md-03__nav-icon">❓</span>Help
        </div>
      </div>
    </nav>

    <!-- Main Content -->
    <main class="md-03__main">
      <!-- Breadcrumbs -->
      <div class="md-03__breadcrumbs">
        <span class="md-03__breadcrumb-link">Home</span>
        <span class="md-03__breadcrumb-sep">›</span>
        <span class="md-03__breadcrumb-link">Projects</span>
        <span class="md-03__breadcrumb-sep">›</span>
        <span>Material Navigation Demo</span>
      </div>

      <!-- Tab Bar -->
      <div class="md-03__tabs">
        <input class="md-03__tab-input" type="radio" name="md03tab" id="md03t1" checked>
        <label class="md-03__tab-label" for="md03t1">Overview</label>
        <input class="md-03__tab-input" type="radio" name="md03tab" id="md03t2">
        <label class="md-03__tab-label" for="md03t2">Components</label>
        <input class="md-03__tab-input" type="radio" name="md03tab" id="md03t3">
        <label class="md-03__tab-label" for="md03t3">Guidelines</label>
        <input class="md-03__tab-input" type="radio" name="md03tab" id="md03t4">
        <label class="md-03__tab-label" for="md03t4">Resources</label>
      </div>

      <div class="md-03__content-card">
        <div class="md-03__section-head">Navigation Patterns</div>
        <p style="color:var(--ink2);line-height:1.6;font-size:.9rem">Material Design 3 provides multiple navigation components: the <strong>Navigation Drawer</strong> (left sidebar) for complex apps, the <strong>Navigation Rail</strong> (compact vertical) for tablets, the <strong>Bottom Navigation Bar</strong> for mobile, and the <strong>Top Tab Bar</strong> for content switching. Each adapts to screen size and app complexity.</p>
      </div>

      <!-- Bottom Navigation Bar -->
      <div class="md-03__section-head" style="margin-top:8px">Bottom Navigation Bar</div>
      <div class="md-03__bottomnav">
        <input class="md-03__bn-input" type="radio" name="md03bn" id="md03bn1" checked>
        <label class="md-03__bn-label" for="md03bn1">
          <span class="md-03__bn-icon">🏠</span>Home
        </label>
        <input class="md-03__bn-input" type="radio" name="md03bn" id="md03bn2">
        <label class="md-03__bn-label" for="md03bn2">
          <span class="md-03__bn-icon">🔍</span>Search
        </label>
        <input class="md-03__bn-input" type="radio" name="md03bn" id="md03bn3">
        <label class="md-03__bn-label" for="md03bn3">
          <span class="md-03__bn-icon">🔔<span class="md-03__bn-badge">5</span></span>Alerts
        </label>
        <input class="md-03__bn-input" type="radio" name="md03bn" id="md03bn4">
        <label class="md-03__bn-label" for="md03bn4">
          <span class="md-03__bn-icon">👤</span>Profile
        </label>
      </div>
    </main>

    <!-- Navigation Rail -->
    <nav class="md-03__rail">
      <button class="md-03__rail-fab">+</button>
      <div class="md-03__rail-item md-03__rail-item--active">
        <div class="md-03__rail-icon-wrap">🏠</div>
        <span>Home</span>
      </div>
      <div class="md-03__rail-item">
        <div class="md-03__rail-icon-wrap">📊</div>
        <span>Stats</span>
      </div>
      <div class="md-03__rail-item">
        <div class="md-03__rail-icon-wrap">📁</div>
        <span>Files</span>
      </div>
      <div class="md-03__rail-item">
        <div class="md-03__rail-icon-wrap">⚙</div>
        <span>Settings</span>
      </div>
    </nav>
  </div>
</div>
```

**CSS:**
```css
.md-03,.md-03 *,.md-03 *::before,.md-03 *::after{box-sizing:border-box;margin:0;padding:0}
.md-03 ::selection{background:#c62828;color:#fff}
.md-03{
  --primary:#c62828;
  --primary-light:#ef5350;
  --primary-dark:#8d1c1c;
  --secondary:#ff8a65;
  --surface:#fff;
  --bg:#fafafa;
  --ink:#212121;
  --ink2:#757575;
  --ink3:#bdbdbd;
  --divider:#e0e0e0;
  --nav-h:64px;
  --rail-w:80px;
  --sidebar-w:256px;
  font-family:'Roboto',sans-serif;
  background:var(--bg);
  color:var(--ink);
  min-height:100vh;
}

/* ── TOP APP BAR ── */
.md-03__appbar{
  width:100%;height:var(--nav-h);
  background:var(--primary);
  color:#fff;
  display:flex;align-items:center;padding:0 16px;gap:12px;
  box-shadow:0 2px 4px rgba(0,0,0,.25);
  position:sticky;top:0;z-index:10;
}
.md-03__appbar-menu{width:48px;height:48px;border-radius:50%;border:none;background:transparent;color:#fff;cursor:pointer;font-size:1.3rem;display:flex;align-items:center;justify-content:center;transition:background .2s}
.md-03__appbar-menu:hover{background:rgba(255,255,255,.12)}
.md-03__appbar-title{font-size:1.25rem;font-weight:500;letter-spacing:.0125em;flex:1}
.md-03__appbar-actions{display:flex;gap:4px}
.md-03__appbar-action{width:48px;height:48px;border-radius:50%;border:none;background:transparent;color:#fff;cursor:pointer;font-size:1.2rem;display:flex;align-items:center;justify-content:center;transition:background .2s}
.md-03__appbar-action:hover{background:rgba(255,255,255,.12)}

/* ── LAYOUT BODY ── */
.md-03__body{display:flex;min-height:calc(100vh - var(--nav-h))}

/* ── NAVIGATION DRAWER ── */
.md-03__drawer{
  width:var(--sidebar-w);flex-shrink:0;
  background:var(--surface);
  border-right:1px solid var(--divider);
  padding:12px 0;
  overflow-y:auto;
}
.md-03__drawer-section{padding:4px 0;margin-bottom:4px}
.md-03__drawer-section-title{
  font-size:.75rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink2);padding:8px 16px 4px;
}
.md-03__nav-item{
  display:flex;align-items:center;gap:16px;
  padding:0 16px;height:48px;border-radius:0 24px 24px 0;
  margin-right:16px;
  cursor:pointer;
  font-size:.9rem;font-weight:400;
  color:var(--ink2);
  transition:background .15s,color .15s;
  position:relative;overflow:hidden;
  user-select:none;
}
.md-03__nav-item:hover{background:rgba(0,0,0,.04)}
.md-03__nav-item--active{
  background:rgba(198,40,40,.12);
  color:var(--primary);
  font-weight:500;
}
.md-03__nav-item--active::before{
  content:'';
  position:absolute;left:0;top:25%;bottom:25%;
  width:3px;border-radius:0 2px 2px 0;
  background:var(--primary);
}
.md-03__nav-icon{font-size:1.3rem;width:24px;text-align:center}
.md-03__nav-badge{margin-left:auto;background:var(--primary);color:#fff;font-size:.7rem;font-weight:700;padding:2px 7px;border-radius:10px}
.md-03__divider{height:1px;background:var(--divider);margin:8px 16px}

/* ── NAVIGATION RAIL (shown on right in demo) ── */
.md-03__rail{
  width:var(--rail-w);
  background:var(--surface);
  border-left:1px solid var(--divider);
  padding:16px 0;
  display:flex;flex-direction:column;align-items:center;gap:4px;
}
.md-03__rail-fab{
  width:56px;height:56px;border-radius:16px;border:none;
  background:var(--secondary);color:#fff;font-size:1.4rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 8px rgba(255,138,101,.4);
  margin-bottom:8px;transition:box-shadow .2s,transform .2s;
}
.md-03__rail-fab:hover{box-shadow:0 4px 16px rgba(255,138,101,.5);transform:translateY(-2px)}
.md-03__rail-item{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  width:72px;padding:12px 0;border-radius:16px;
  cursor:pointer;font-size:.7rem;font-weight:500;
  color:var(--ink2);transition:background .15s,color .15s;
}
.md-03__rail-item:hover{background:rgba(0,0,0,.04)}
.md-03__rail-item--active{color:var(--primary)}
.md-03__rail-item--active .md-03__rail-icon-wrap{background:rgba(198,40,40,.12)}
.md-03__rail-icon-wrap{
  width:56px;height:32px;border-radius:16px;
  display:flex;align-items:center;justify-content:center;font-size:1.2rem;
}

/* ── MAIN CONTENT ── */
.md-03__main{flex:1;padding:32px;overflow:auto}
.md-03__section-head{font-size:1.1rem;font-weight:700;margin-bottom:20px;color:var(--ink)}

/* ── TAB BAR ── */
.md-03__tabs{
  background:var(--primary);
  display:flex;border-bottom:none;
  margin-bottom:28px;
  border-radius:0;
}
.md-03__tab-input{display:none}
.md-03__tab-label{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  height:48px;gap:4px;padding:0 16px;
  font-size:.875rem;font-weight:500;letter-spacing:.089em;text-transform:uppercase;
  color:rgba(255,255,255,.7);cursor:pointer;
  position:relative;
  transition:color .2s;
  user-select:none;
}
.md-03__tab-label::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:2px;
  background:#fff;transform:scaleX(0);transition:transform .2s;
}
.md-03__tab-input:checked + .md-03__tab-label{color:#fff}
.md-03__tab-input:checked + .md-03__tab-label::after{transform:scaleX(1)}

/* ── BREADCRUMBS ── */
.md-03__breadcrumbs{
  display:flex;align-items:center;gap:8px;
  font-size:.85rem;color:var(--ink2);margin-bottom:24px;
  flex-wrap:wrap;
}
.md-03__breadcrumb-link{color:var(--primary);text-decoration:none;cursor:pointer}
.md-03__breadcrumb-link:hover{text-decoration:underline}
.md-03__breadcrumb-sep{color:var(--ink3)}

/* ── BOTTOM NAV BAR ── */
.md-03__bottomnav{
  background:var(--surface);
  border-top:1px solid var(--divider);
  display:flex;
  box-shadow:0 -2px 4px rgba(0,0,0,.08);
  margin-top:24px;
  border-radius:8px;
  overflow:hidden;
}
.md-03__bn-input{display:none}
.md-03__bn-label{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:8px 0 10px;gap:4px;cursor:pointer;
  font-size:.7rem;font-weight:500;letter-spacing:.04em;
  color:var(--ink2);transition:color .15s;
  position:relative;
}
.md-03__bn-icon{font-size:1.4rem;position:relative}
.md-03__bn-input:checked + .md-03__bn-label{color:var(--primary)}
.md-03__bn-badge{
  position:absolute;top:-4px;right:-8px;
  background:var(--primary);color:#fff;
  font-size:.6rem;font-weight:700;
  padding:1px 5px;border-radius:8px;
}

/* Content card in main */
.md-03__content-card{
  background:var(--surface);border-radius:12px;
  padding:24px;margin-bottom:16px;
  box-shadow:0 1px 3px rgba(0,0,0,.1);
}

@media(prefers-reduced-motion:reduce){.md-03 *{transition:none!important}}
```

### 04. Material Design Form Inputs CSS

**Type:** Pure CSS
**Description:** Filled and outlined text fields with floating labels, select menus, textarea, checkboxes, radio buttons, toggle switches, and range sliders — interactive, fully accessible, no JavaScript.

**HTML:**
```html
<div class="md-04">
  <div class="md-04__wrap">
    <div class="md-04__page-title">Material Design Form Inputs</div>
    <div class="md-04__page-sub">Filled &amp; outlined text fields, selects, checkboxes, radio buttons, switches and sliders — all CSS</div>

    <!-- Text Fields -->
    <div class="md-04__card">
      <div class="md-04__card-title">Text Fields — Filled Style</div>
      <div class="md-04__grid">
        <div class="md-04__field md-04__field--filled">
          <input class="md-04__input" type="text" id="md04f1" placeholder=" ">
          <label class="md-04__label" for="md04f1">First Name</label>
        </div>
        <div class="md-04__field md-04__field--filled">
          <input class="md-04__input" type="text" id="md04f2" placeholder=" ">
          <label class="md-04__label" for="md04f2">Last Name</label>
        </div>
        <div class="md-04__field md-04__field--filled">
          <input class="md-04__input" type="email" id="md04f3" placeholder=" ">
          <label class="md-04__label" for="md04f3">Email Address</label>
        </div>
        <div class="md-04__field md-04__field--filled">
          <input class="md-04__input" type="tel" id="md04f4" placeholder=" ">
          <label class="md-04__label" for="md04f4">Phone Number</label>
        </div>
      </div>
    </div>

    <!-- Outlined Fields -->
    <div class="md-04__card">
      <div class="md-04__card-title">Text Fields — Outlined Style</div>
      <div class="md-04__grid">
        <div class="md-04__field md-04__field--outlined">
          <input class="md-04__input" type="text" id="md04o1" placeholder=" ">
          <label class="md-04__label" for="md04o1">Company Name</label>
        </div>
        <div class="md-04__field md-04__field--outlined">
          <input class="md-04__input" type="text" id="md04o2" placeholder=" ">
          <label class="md-04__label" for="md04o2">Job Title</label>
        </div>
        <div class="md-04__field md-04__field--outlined md-04__field--error" style="grid-column:1/-1">
          <input class="md-04__input" type="email" id="md04o3" value="invalid-email" placeholder=" ">
          <label class="md-04__label" for="md04o3">Email</label>
          <span class="md-04__helper md-04__helper--error">⚠ Please enter a valid email address</span>
        </div>
      </div>
    </div>

    <!-- Select + Textarea -->
    <div class="md-04__card">
      <div class="md-04__card-title">Select &amp; Textarea</div>
      <div style="display:flex;flex-direction:column;gap:24px">
        <div>
          <label style="font-size:.75rem;color:var(--ink2);display:block;margin-bottom:4px;padding:0 16px">Country / Region</label>
          <select class="md-04__select">
            <option>United States</option>
            <option>United Kingdom</option>
            <option>Germany</option>
            <option>Japan</option>
            <option>India</option>
          </select>
        </div>
        <div>
          <label style="font-size:.75rem;color:var(--ink2);display:block;margin-bottom:4px;padding:0 16px">Message</label>
          <textarea class="md-04__textarea" placeholder="Tell us about your project..."></textarea>
          <div class="md-04__helper">Max 500 characters</div>
        </div>
      </div>
    </div>

    <!-- Checkboxes, Radios, Switches -->
    <div class="md-04__card">
      <div class="md-04__card-title">Checkboxes &amp; Radio Buttons</div>
      <div class="md-04__grid">
        <div style="display:flex;flex-direction:column;gap:8px">
          <div style="font-size:.78rem;color:var(--ink2);font-weight:500;margin-bottom:4px">Preferences</div>
          <label class="md-04__check-wrap"><input class="md-04__check-input" type="checkbox" checked> <span class="md-04__check-label">Email notifications</span></label>
          <label class="md-04__check-wrap"><input class="md-04__check-input" type="checkbox" checked> <span class="md-04__check-label">Weekly digest</span></label>
          <label class="md-04__check-wrap"><input class="md-04__check-input" type="checkbox"> <span class="md-04__check-label">SMS alerts</span></label>
          <label class="md-04__check-wrap"><input class="md-04__check-input" type="checkbox"> <span class="md-04__check-label">Marketing updates</span></label>
        </div>
        <div style="display:flex;flex-direction:column;gap:8px">
          <div style="font-size:.78rem;color:var(--ink2);font-weight:500;margin-bottom:4px">Plan</div>
          <label class="md-04__radio-wrap"><input class="md-04__radio-input" type="radio" name="md04plan"> <span class="md-04__radio-label">Free</span></label>
          <label class="md-04__radio-wrap"><input class="md-04__radio-input" type="radio" name="md04plan" checked> <span class="md-04__radio-label">Pro — $12/mo</span></label>
          <label class="md-04__radio-wrap"><input class="md-04__radio-input" type="radio" name="md04plan"> <span class="md-04__radio-label">Enterprise</span></label>
        </div>
      </div>
      <div style="border-top:1px solid var(--divider);margin-top:24px;padding-top:24px;display:flex;flex-direction:column;gap:16px">
        <div style="font-size:.78rem;color:var(--ink2);font-weight:500">Toggles</div>
        <label class="md-04__switch-wrap">
          <input class="md-04__switch-input" id="md04s1" type="checkbox" checked>
          <div class="md-04__switch-track"><div class="md-04__switch-thumb"></div></div>
          <span class="md-04__switch-label">Dark mode</span>
        </label>
        <label class="md-04__switch-wrap">
          <input class="md-04__switch-input" id="md04s2" type="checkbox" checked>
          <div class="md-04__switch-track"><div class="md-04__switch-thumb"></div></div>
          <span class="md-04__switch-label">Auto-save</span>
        </label>
        <label class="md-04__switch-wrap">
          <input class="md-04__switch-input" id="md04s3" type="checkbox">
          <div class="md-04__switch-track"><div class="md-04__switch-thumb"></div></div>
          <span class="md-04__switch-label">Two-factor auth</span>
        </label>
      </div>
    </div>

    <!-- Slider -->
    <div class="md-04__card">
      <div class="md-04__card-title">Continuous Slider</div>
      <div style="padding:0 4px">
        <div style="display:flex;justify-content:space-between;font-size:.8rem;color:var(--ink2);margin-bottom:4px"><span>Volume</span><span>60%</span></div>
        <input class="md-04__slider" type="range" min="0" max="100" value="60">
        <div style="display:flex;justify-content:space-between;font-size:.75rem;color:var(--ink3)"><span>0</span><span>100</span></div>
      </div>
      <div style="padding:0 4px;margin-top:20px">
        <div style="display:flex;justify-content:space-between;font-size:.8rem;color:var(--ink2);margin-bottom:4px"><span>Budget</span><span>$3,000</span></div>
        <input class="md-04__slider" type="range" min="0" max="10000" value="3000">
        <div style="display:flex;justify-content:space-between;font-size:.75rem;color:var(--ink3)"><span>$0</span><span>$10k</span></div>
      </div>
    </div>

    <div class="md-04__form-actions">
      <button class="md-04__btn md-04__btn--outlined">Reset</button>
      <button class="md-04__btn">Save Changes</button>
    </div>
  </div>
</div>
```

**CSS:**
```css
.md-04,.md-04 *,.md-04 *::before,.md-04 *::after{box-sizing:border-box;margin:0;padding:0}
.md-04 ::selection{background:#00695c;color:#fff}
.md-04{
  --primary:#00695c;
  --primary-l:#4db6ac;
  --error:#b00020;
  --bg:#f1f8f7;
  --surface:#fff;
  --ink:#212121;
  --ink2:#616161;
  --ink3:#9e9e9e;
  --divider:#e0e0e0;
  font-family:'Roboto',sans-serif;
  background:var(--bg);
  min-height:100vh;padding:48px 24px 80px;
  color:var(--ink);
}
.md-04__wrap{max-width:700px;margin:0 auto}
.md-04__page-title{font-size:clamp(1.4rem,4vw,2rem);font-weight:700;margin-bottom:4px}
.md-04__page-sub{font-size:.9rem;color:var(--ink2);margin-bottom:48px}

.md-04__card{background:var(--surface);border-radius:12px;padding:32px;margin-bottom:28px;box-shadow:0 1px 3px rgba(0,0,0,.1),0 1px 2px rgba(0,0,0,.06)}
.md-04__card-title{font-size:1rem;font-weight:700;margin-bottom:24px;color:var(--ink);display:flex;align-items:center;gap:8px}
.md-04__card-title::before{content:'';width:4px;height:1em;background:var(--primary);border-radius:2px;display:inline-block}

.md-04__grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
@media(max-width:540px){.md-04__grid{grid-template-columns:1fr}}
.md-04__field{display:flex;flex-direction:column;gap:0;position:relative}

/* ── FILLED TEXT FIELD ── */
.md-04__field--filled .md-04__label{
  position:absolute;left:16px;top:20px;
  font-size:1rem;color:var(--ink2);
  pointer-events:none;transform-origin:left top;
  transition:transform .15s cubic-bezier(.4,0,.2,1),color .15s;
}
.md-04__field--filled .md-04__input{
  height:56px;padding:20px 16px 6px;
  background:rgba(0,0,0,.06);
  border:none;border-bottom:1px solid var(--ink2);
  border-radius:4px 4px 0 0;
  font-family:'Roboto';font-size:1rem;color:var(--ink);
  outline:none;width:100%;
  transition:border-color .15s;
}
.md-04__field--filled .md-04__input:focus{border-bottom:2px solid var(--primary)}
.md-04__field--filled .md-04__input:focus ~ .md-04__label,
.md-04__field--filled .md-04__input:not(:placeholder-shown) ~ .md-04__label{
  transform:translateY(-10px) scale(.75);color:var(--primary)
}
.md-04__field--filled .md-04__input::placeholder{opacity:0}

/* ── OUTLINED TEXT FIELD ── */
.md-04__field--outlined{position:relative}
.md-04__field--outlined .md-04__label{
  position:absolute;left:12px;top:16px;
  font-size:1rem;color:var(--ink2);
  pointer-events:none;transform-origin:left top;
  transition:transform .15s cubic-bezier(.4,0,.2,1),color .15s,background .15s;
  padding:0 4px;
}
.md-04__field--outlined .md-04__input{
  height:56px;padding:0 16px;
  background:var(--surface);
  border:1px solid var(--ink2);
  border-radius:4px;
  font-family:'Roboto';font-size:1rem;color:var(--ink);
  outline:none;width:100%;
  transition:border-color .15s;
}
.md-04__field--outlined .md-04__input:focus{border:2px solid var(--primary)}
.md-04__field--outlined .md-04__input:focus ~ .md-04__label,
.md-04__field--outlined .md-04__input:not(:placeholder-shown) ~ .md-04__label{
  transform:translateY(-24px) scale(.75);
  color:var(--primary);background:var(--surface);
}
.md-04__field--outlined .md-04__input::placeholder{opacity:0}

/* ── ERROR STATE ── */
.md-04__field--error .md-04__input{border-color:var(--error)!important}
.md-04__field--error .md-04__label{color:var(--error)!important}
.md-04__helper{font-size:.75rem;margin-top:4px;padding:0 16px;color:var(--ink3)}
.md-04__helper--error{color:var(--error)}

/* ── TEXTAREA ── */
.md-04__textarea{
  padding:16px;resize:vertical;min-height:120px;
  background:rgba(0,0,0,.06);border:none;border-bottom:1px solid var(--ink2);
  border-radius:4px 4px 0 0;
  font-family:'Roboto';font-size:1rem;color:var(--ink);outline:none;width:100%;
  transition:border-color .15s;
}
.md-04__textarea:focus{border-bottom:2px solid var(--primary)}

/* ── SELECT / DROPDOWN ── */
.md-04__select{
  height:56px;padding:0 16px;
  background:rgba(0,0,0,.06);
  border:none;border-bottom:1px solid var(--ink2);
  border-radius:4px 4px 0 0;
  font-family:'Roboto';font-size:1rem;color:var(--ink);
  outline:none;width:100%;
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23757575' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 16px center;
  cursor:pointer;
}
.md-04__select:focus{border-bottom:2px solid var(--primary)}

/* ── CHECKBOX ── */
.md-04__check-wrap{display:flex;align-items:center;gap:12px;cursor:pointer;padding:4px 0}
.md-04__check-input{
  appearance:none;width:20px;height:20px;border:2px solid var(--ink2);border-radius:3px;
  cursor:pointer;position:relative;flex-shrink:0;
  transition:background .15s,border-color .15s;
}
.md-04__check-input:checked{background:var(--primary);border-color:var(--primary)}
.md-04__check-input:checked::after{
  content:'✓';position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  color:#fff;font-size:.8rem;font-weight:700;line-height:1;
}
.md-04__check-label{font-size:.9rem;color:var(--ink)}

/* ── RADIO ── */
.md-04__radio-wrap{display:flex;align-items:center;gap:12px;cursor:pointer;padding:4px 0}
.md-04__radio-input{
  appearance:none;width:20px;height:20px;border:2px solid var(--ink2);border-radius:50%;
  cursor:pointer;position:relative;flex-shrink:0;
  transition:border-color .15s;
}
.md-04__radio-input:checked{border-color:var(--primary)}
.md-04__radio-input:checked::after{
  content:'';position:absolute;
  top:50%;left:50%;transform:translate(-50%,-50%);
  width:10px;height:10px;border-radius:50%;background:var(--primary);
}
.md-04__radio-label{font-size:.9rem;color:var(--ink)}

/* ── SWITCH ── */
.md-04__switch-wrap{display:flex;align-items:center;gap:12px;cursor:pointer}
.md-04__switch-input{display:none}
.md-04__switch-track{
  width:52px;height:32px;border-radius:16px;
  background:#bdbdbd;position:relative;
  transition:background .2s;flex-shrink:0;
}
.md-04__switch-thumb{
  position:absolute;top:4px;left:4px;
  width:24px;height:24px;border-radius:50%;
  background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.3);
  transition:transform .2s cubic-bezier(.4,0,.2,1);
}
.md-04__switch-input:checked ~ .md-04__switch-track{background:var(--primary-l)}
.md-04__switch-input:checked ~ .md-04__switch-track .md-04__switch-thumb{transform:translateX(20px)}
.md-04__switch-label{font-size:.9rem;color:var(--ink)}

/* ── SLIDER ── */
.md-04__slider{
  width:100%;height:4px;border-radius:2px;
  -webkit-appearance:none;background:linear-gradient(to right,var(--primary) 60%,var(--divider) 60%);
  cursor:pointer;outline:none;margin:16px 0;
}
.md-04__slider::-webkit-slider-thumb{
  -webkit-appearance:none;width:20px;height:20px;border-radius:50%;
  background:var(--primary);box-shadow:0 2px 4px rgba(0,0,0,.3);
  cursor:pointer;transition:box-shadow .2s;
}
.md-04__slider::-webkit-slider-thumb:hover{box-shadow:0 0 0 8px rgba(0,105,92,.15)}

.md-04__btn{
  height:40px;padding:0 24px;border:none;border-radius:4px;
  background:var(--primary);color:#fff;
  font-family:'Roboto';font-size:.875rem;font-weight:500;letter-spacing:.089em;text-transform:uppercase;
  cursor:pointer;transition:box-shadow .2s;
  box-shadow:0 2px 4px rgba(0,0,0,.2);
}
.md-04__btn:hover{box-shadow:0 4px 8px rgba(0,0,0,.25)}
.md-04__btn--outlined{background:transparent;color:var(--primary);border:1px solid var(--primary);box-shadow:none}
.md-04__form-actions{display:flex;gap:12px;justify-content:flex-end;margin-top:8px}

@media(prefers-reduced-motion:reduce){.md-04 *{transition:none!important}}
```

### 05. Material Design Dialog Modal CSS

**Type:** Pure CSS
**Description:** Alert dialog, full-featured share dialog, bottom sheet, and snackbar — all toggled with the CSS checkbox-hack, no JavaScript.

**HTML:**
```html
<div class="md-05">
  <!-- Modals (outside flow via fixed positioning, controlled by hidden checkboxes) -->

  <!-- Alert Dialog -->
  <input class="md-05__modal-trigger" type="checkbox" id="md05-alert">
  <div class="md-05__backdrop">
    <div class="md-05__dialog">
      <div class="md-05__dialog-icon">🗑</div>
      <div class="md-05__dialog-head md-05__dialog-head--center">Delete project?</div>
      <div class="md-05__dialog-body md-05__dialog-body--center">This will permanently delete "Aurora Dashboard" and all of its contents. This action cannot be undone.</div>
      <div class="md-05__dialog-actions" style="justify-content:center">
        <label class="md-05__dialog-btn md-05__dialog-btn--text md-05__close-label" for="md05-alert">Cancel</label>
        <label class="md-05__dialog-btn md-05__dialog-btn--err md-05__close-label" for="md05-alert">Delete</label>
      </div>
    </div>
  </div>

  <!-- Full Dialog -->
  <input class="md-05__modal-trigger" type="checkbox" id="md05-full">
  <div class="md-05__backdrop">
    <div class="md-05__dialog" style="position:relative">
      <label class="md-05__dialog-btn--close md-05__close-label" for="md05-full">✕</label>
      <div class="md-05__dialog-head">Share with people</div>
      <div class="md-05__dialog-body">
        <div style="display:flex;flex-direction:column;gap:12px">
          <div style="background:#f5f5f5;border-radius:8px;padding:12px 16px;display:flex;align-items:center;gap:12px">
            <span style="font-size:1.3rem">🔗</span>
            <div style="flex:1;font-size:.85rem;color:#616161;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">https://aurora.design/shared/abc123</div>
            <button style="background:none;border:none;color:#4527a0;font-size:.8rem;font-weight:500;cursor:pointer">Copy</button>
          </div>
          <div style="font-size:.82rem;color:#9e9e9e">Anyone with the link can view this project</div>
          <div style="height:1px;background:#e0e0e0;margin:4px 0"></div>
          <div style="font-size:.9rem;font-weight:500">People with access</div>
          <div style="display:flex;align-items:center;gap:12px">
            <div style="width:36px;height:36px;border-radius:50%;background:#4527a0;color:#fff;display:flex;align-items:center;justify-content:center;font-size:.9rem;font-weight:700">A</div>
            <div style="flex:1"><div style="font-size:.88rem;font-weight:500">Alex Thompson</div><div style="font-size:.78rem;color:#9e9e9e">alex@design.co · Owner</div></div>
          </div>
          <div style="display:flex;align-items:center;gap:12px">
            <div style="width:36px;height:36px;border-radius:50%;background:#e91e63;color:#fff;display:flex;align-items:center;justify-content:center;font-size:.9rem;font-weight:700">M</div>
            <div style="flex:1"><div style="font-size:.88rem;font-weight:500">Maria Chen</div><div style="font-size:.78rem;color:#9e9e9e">m.chen@design.co · Editor</div></div>
          </div>
        </div>
      </div>
      <div class="md-05__dialog-actions">
        <label class="md-05__dialog-btn md-05__dialog-btn--text md-05__close-label" for="md05-full">Close</label>
        <label class="md-05__dialog-btn md-05__dialog-btn--filled md-05__close-label" for="md05-full">Done</label>
      </div>
    </div>
  </div>

  <!-- Bottom Sheet -->
  <input class="md-05__sheet-trigger" type="checkbox" id="md05-sheet">
  <div class="md-05__sheet-backdrop">
    <div class="md-05__sheet">
      <div class="md-05__sheet-handle"></div>
      <div class="md-05__sheet-title">Export file as</div>
      <label class="md-05__sheet-option md-05__close-label" for="md05-sheet"><span class="md-05__sheet-option-icon">📄</span>PDF Document</label>
      <label class="md-05__sheet-option md-05__close-label" for="md05-sheet"><span class="md-05__sheet-option-icon">🖼</span>PNG Image</label>
      <label class="md-05__sheet-option md-05__close-label" for="md05-sheet"><span class="md-05__sheet-option-icon">⚡</span>SVG Vector</label>
      <label class="md-05__sheet-option md-05__close-label" for="md05-sheet"><span class="md-05__sheet-option-icon">📊</span>CSV Data</label>
      <label class="md-05__sheet-option md-05__close-label" for="md05-sheet"><span class="md-05__sheet-option-icon">💾</span>JSON Format</label>
    </div>
  </div>

  <!-- Snackbar -->
  <input class="md-05__snack-trigger" type="checkbox" id="md05-snack">
  <div class="md-05__snackbar">
    <span style="flex:1">✅ Changes saved to cloud</span>
    <label class="md-05__snack-action md-05__close-label" for="md05-snack">Undo</label>
    <label class="md-05__close-label" for="md05-snack" style="cursor:pointer;color:#aaa;font-size:1rem;padding:0 4px">✕</label>
  </div>

  <div class="md-05__wrap">
    <div class="md-05__page-title">Material Design Dialogs &amp; Modals</div>
    <div class="md-05__page-sub">Alert dialogs, full dialogs, bottom sheets and snackbars — CSS-only with checkbox-hack</div>

    <div class="md-05__btn-grid">
      <label class="md-05__trigger-btn" for="md05-alert" style="display:inline-flex;align-items:center;cursor:pointer;height:40px;padding:0 20px;font-size:.875rem;letter-spacing:.089em;text-transform:uppercase;font-weight:500">🗑 Alert Dialog</label>
      <label class="md-05__trigger-btn" for="md05-full" style="display:inline-flex;align-items:center;cursor:pointer;height:40px;padding:0 20px;font-size:.875rem;letter-spacing:.089em;text-transform:uppercase;font-weight:500;background:#7e57c2">↗ Share Dialog</label>
      <label class="md-05__trigger-btn" for="md05-sheet" style="display:inline-flex;align-items:center;cursor:pointer;height:40px;padding:0 20px;font-size:.875rem;letter-spacing:.089em;text-transform:uppercase;font-weight:500;background:#ff7043">⬆ Bottom Sheet</label>
      <label class="md-05__trigger-btn" for="md05-snack" style="display:inline-flex;align-items:center;cursor:pointer;height:40px;padding:0 20px;font-size:.875rem;letter-spacing:.089em;text-transform:uppercase;font-weight:500;background:#00897b">💾 Snackbar</label>
    </div>

    <div class="md-05__preview">
      <div class="md-05__preview-card">
        <div class="md-05__preview-label">Alert Dialog</div>
        <div style="background:#fff;border-radius:16px;padding:20px;box-shadow:0 2px 8px rgba(0,0,0,.1)">
          <div style="text-align:center;font-size:1.6rem;margin-bottom:8px">⚠</div>
          <div style="font-size:.95rem;font-weight:700;text-align:center;margin-bottom:6px;color:var(--ink)">Discard changes?</div>
          <div style="font-size:.8rem;color:var(--ink2);text-align:center;margin-bottom:16px">Changes will be lost if you leave this page</div>
          <div style="display:flex;gap:8px;justify-content:center">
            <div style="padding:8px 16px;border-radius:16px;font-size:.78rem;font-weight:500;color:var(--primary);text-transform:uppercase;letter-spacing:.05em">Keep</div>
            <div style="padding:8px 16px;border-radius:16px;font-size:.78rem;font-weight:500;background:var(--primary);color:#fff;text-transform:uppercase;letter-spacing:.05em">Discard</div>
          </div>
        </div>
      </div>

      <div class="md-05__preview-card">
        <div class="md-05__preview-label">Confirmation Dialog</div>
        <div style="background:#fff;border-radius:16px;padding:20px;box-shadow:0 2px 8px rgba(0,0,0,.1)">
          <div style="font-size:.95rem;font-weight:700;margin-bottom:6px;color:var(--ink)">Phone ringtone</div>
          <div style="display:flex;flex-direction:column;gap:2px">
            <div style="display:flex;align-items:center;gap:10px;padding:8px;border-radius:8px;background:rgba(69,39,160,.08)"><div style="width:16px;height:16px;border-radius:50%;background:var(--primary);display:flex;align-items:center;justify-content:center"><div style="width:6px;height:6px;border-radius:50%;background:#fff"></div></div><span style="font-size:.85rem;color:var(--primary);font-weight:500">Callisto</span></div>
            <div style="display:flex;align-items:center;gap:10px;padding:8px"><div style="width:16px;height:16px;border-radius:50%;border:2px solid #bdbdbd"></div><span style="font-size:.85rem;color:var(--ink)">Ganymede</span></div>
            <div style="display:flex;align-items:center;gap:10px;padding:8px"><div style="width:16px;height:16px;border-radius:50%;border:2px solid #bdbdbd"></div><span style="font-size:.85rem;color:var(--ink)">Luna</span></div>
          </div>
          <div style="display:flex;gap:8px;justify-content:flex-end;margin-top:12px">
            <div style="padding:8px 16px;border-radius:16px;font-size:.78rem;font-weight:500;color:var(--primary);text-transform:uppercase;letter-spacing:.05em">Cancel</div>
            <div style="padding:8px 16px;border-radius:16px;font-size:.78rem;font-weight:500;background:var(--primary);color:#fff;text-transform:uppercase;letter-spacing:.05em">OK</div>
          </div>
        </div>
      </div>

      <div class="md-05__preview-card">
        <div class="md-05__preview-label">Snackbar Variants</div>
        <div style="display:flex;flex-direction:column;gap:10px">
          <div style="background:#323232;color:#fff;border-radius:4px;padding:12px 16px;font-size:.85rem">Message sent</div>
          <div style="background:#323232;color:#fff;border-radius:4px;padding:12px 16px;font-size:.85rem;display:flex;justify-content:space-between;align-items:center"><span>Connection lost</span><span style="color:#bb86fc;font-size:.8rem;font-weight:500">Retry</span></div>
          <div style="background:#1b5e20;color:#fff;border-radius:4px;padding:12px 16px;font-size:.85rem;display:flex;gap:10px;align-items:center"><span>✓</span><span>Profile updated</span></div>
          <div style="background:#b71c1c;color:#fff;border-radius:4px;padding:12px 16px;font-size:.85rem;display:flex;gap:10px;align-items:center"><span>⚠</span><span>Upload failed</span></div>
        </div>
      </div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.md-05,.md-05 *,.md-05 *::before,.md-05 *::after{box-sizing:border-box;margin:0;padding:0}
.md-05 ::selection{background:#4527a0;color:#fff}
.md-05{
  --primary:#4527a0;
  --primary-l:#7e57c2;
  --secondary:#ff7043;
  --error:#b00020;
  --surface:#fff;
  --surface2:#f3f0fa;
  --bg:#ede7f6;
  --ink:#212121;
  --ink2:#616161;
  --ink3:#9e9e9e;
  --divider:#d1c4e9;
  font-family:'Roboto',sans-serif;
  background:var(--bg);
  min-height:100vh;
  padding:48px 24px 80px;
  color:var(--ink);
}
.md-05__wrap{max-width:900px;margin:0 auto}
.md-05__page-title{font-size:clamp(1.4rem,4vw,2rem);font-weight:700;margin-bottom:4px}
.md-05__page-sub{font-size:.9rem;color:var(--ink2);margin-bottom:40px}

/* Trigger buttons */
.md-05__btn-grid{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:56px}
.md-05__trigger-btn{
  height:40px;padding:0 20px;border-radius:4px;border:none;cursor:pointer;
  font-family:'Roboto';font-size:.875rem;font-weight:500;letter-spacing:.089em;text-transform:uppercase;
  background:var(--primary);color:#fff;
  box-shadow:0 2px 4px rgba(0,0,0,.2);
  transition:box-shadow .2s;
}
.md-05__trigger-btn:hover{box-shadow:0 4px 10px rgba(0,0,0,.25)}

/* ── DIALOG BACKDROP / MODAL ── */
.md-05__backdrop{
  position:fixed;inset:0;z-index:100;
  background:rgba(0,0,0,0);
  pointer-events:none;
  transition:background .25s;
  display:flex;align-items:center;justify-content:center;
  padding:24px;
}
.md-05__modal-trigger{display:none}
.md-05__modal-trigger:checked ~ .md-05__backdrop{
  background:rgba(0,0,0,.5);
  pointer-events:auto;
}
.md-05__dialog{
  background:var(--surface);
  border-radius:28px;
  min-width:280px;max-width:560px;width:100%;
  box-shadow:0 24px 38px rgba(0,0,0,.14),0 9px 46px rgba(0,0,0,.12),0 11px 15px rgba(0,0,0,.2);
  transform:scale(.9) translateY(20px);
  opacity:0;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1),opacity .25s;
  max-height:80vh;overflow-y:auto;
}
.md-05__modal-trigger:checked ~ .md-05__backdrop .md-05__dialog{
  transform:scale(1) translateY(0);
  opacity:1;
}
.md-05__dialog-icon{text-align:center;padding-top:28px;font-size:2rem}
.md-05__dialog-head{padding:24px 24px 12px;font-size:1.375rem;font-weight:700;color:var(--ink)}
.md-05__dialog-head--center{text-align:center}
.md-05__dialog-body{padding:0 24px 20px;font-size:.875rem;line-height:1.6;color:var(--ink2)}
.md-05__dialog-body--center{text-align:center}
.md-05__dialog-actions{
  display:flex;gap:8px;justify-content:flex-end;
  padding:8px 24px 24px;
}
.md-05__dialog-btn{
  height:40px;padding:0 24px;border:none;border-radius:20px;cursor:pointer;
  font-family:'Roboto';font-size:.875rem;font-weight:500;letter-spacing:.089em;text-transform:uppercase;
  transition:background .15s;
}
.md-05__dialog-btn--text{background:transparent;color:var(--primary)}
.md-05__dialog-btn--text:hover{background:rgba(69,39,160,.08)}
.md-05__dialog-btn--filled{background:var(--primary);color:#fff;box-shadow:0 2px 4px rgba(0,0,0,.2)}
.md-05__dialog-btn--filled:hover{box-shadow:0 4px 8px rgba(0,0,0,.25)}
.md-05__dialog-btn--err{background:var(--error);color:#fff}
.md-05__dialog-btn--close{position:absolute;top:12px;right:12px;width:40px;height:40px;border-radius:50%;border:none;background:transparent;cursor:pointer;font-size:1.2rem;display:flex;align-items:center;justify-content:center;color:var(--ink2)}
.md-05__dialog-btn--close:hover{background:rgba(0,0,0,.06)}

/* close via label targeting the same checkbox */
.md-05__close-label{cursor:pointer}

/* ── BOTTOM SHEET ── */
.md-05__sheet-trigger{display:none}
.md-05__sheet-backdrop{
  position:fixed;inset:0;z-index:100;
  background:rgba(0,0,0,0);pointer-events:none;
  transition:background .25s;
  display:flex;align-items:flex-end;justify-content:center;
}
.md-05__sheet-trigger:checked ~ .md-05__sheet-backdrop{background:rgba(0,0,0,.5);pointer-events:auto}
.md-05__sheet{
  background:var(--surface);
  border-radius:28px 28px 0 0;
  width:100%;max-width:640px;
  padding:0 0 40px;
  transform:translateY(100%);
  transition:transform .35s cubic-bezier(.4,0,.2,1);
  box-shadow:0 -8px 24px rgba(0,0,0,.12);
}
.md-05__sheet-trigger:checked ~ .md-05__sheet-backdrop .md-05__sheet{transform:translateY(0)}
.md-05__sheet-handle{width:40px;height:4px;background:var(--divider);border-radius:2px;margin:12px auto 20px}
.md-05__sheet-title{font-size:1.1rem;font-weight:700;padding:0 24px 16px;color:var(--ink)}
.md-05__sheet-option{
  display:flex;align-items:center;gap:16px;padding:16px 24px;cursor:pointer;
  font-size:.9rem;color:var(--ink);transition:background .15s;
}
.md-05__sheet-option:hover{background:rgba(0,0,0,.04)}
.md-05__sheet-option-icon{font-size:1.3rem;width:32px;text-align:center}

/* ── SNACKBAR ── */
.md-05__snack-trigger{display:none}
.md-05__snackbar{
  position:fixed;bottom:32px;left:50%;transform:translateX(-50%) translateY(120px);
  background:#323232;color:#fff;
  border-radius:4px;padding:14px 16px;
  display:flex;align-items:center;gap:24px;
  box-shadow:0 3px 10px rgba(0,0,0,.3);
  font-size:.875rem;min-width:300px;max-width:560px;
  transition:transform .35s cubic-bezier(.4,0,.2,1);
  z-index:200;pointer-events:none;
}
.md-05__snack-trigger:checked ~ .md-05__snackbar{transform:translateX(-50%) translateY(0);pointer-events:auto}
.md-05__snack-action{background:transparent;border:none;color:#bb86fc;font-family:'Roboto';font-size:.875rem;font-weight:500;letter-spacing:.089em;text-transform:uppercase;cursor:pointer;white-space:nowrap;padding:0}

/* ── PREVIEW PANEL ── */
.md-05__preview{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px;margin-top:40px}
.md-05__preview-card{background:var(--surface2);border-radius:20px;padding:24px;border:1px solid var(--divider)}
.md-05__preview-label{font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--primary-l);margin-bottom:12px}
.md-05__dialog--inline{border-radius:20px;overflow:hidden;box-shadow:0 4px 16px rgba(0,0,0,.12);transform:none;opacity:1;max-height:none;position:static;pointer-events:none}

@media(prefers-reduced-motion:reduce){.md-05 *{transition:none!important}}
```

### 06. Material Design Data Table CSS

**Type:** Pure CSS
**Description:** Sortable-look data table with row checkboxes, status badges, inline progress bars, avatar cells, pagination controls, and a dense display variant.

**HTML:**
```html
<div class="md-06">
  <div class="md-06__wrap">
    <div class="md-06__page-title">Material Design Data Tables</div>
    <div class="md-06__page-sub">Full-featured sortable data tables with checkboxes, status badges, progress bars and pagination — CSS</div>

    <!-- Main Table -->
    <div class="md-06__table-card">
      <div class="md-06__table-toolbar">
        <div class="md-06__table-title">Team Members</div>
        <input class="md-06__search" type="text" placeholder="🔍 Search members...">
        <div class="md-06__table-actions">
          <button class="md-06__tool-btn md-06__tool-btn--ghost">Export</button>
          <button class="md-06__tool-btn md-06__tool-btn--p">+ Invite</button>
        </div>
      </div>
      <div class="md-06__table-wrap">
        <table class="md-06__table">
          <thead>
            <tr>
              <th class="md-06__th" style="width:48px"><input class="md-06__check" type="checkbox"></th>
              <th class="md-06__th md-06__th--sorted">Name</th>
              <th class="md-06__th">Role</th>
              <th class="md-06__th">Status</th>
              <th class="md-06__th">Tasks</th>
              <th class="md-06__th md-06__th--num">Completed</th>
              <th class="md-06__th">Joined</th>
              <th class="md-06__th" style="width:100px">Actions</th>
            </tr>
          </thead>
          <tbody>
            <tr class="md-06__tr">
              <td class="md-06__td"><input class="md-06__check" type="checkbox" checked></td>
              <td class="md-06__td"><div class="md-06__cell-user"><div class="md-06__avatar" style="background:#0277bd">A</div><div><div style="font-weight:500">Alex Thompson</div><div style="font-size:.78rem;color:var(--ink3)">alex@nexus.co</div></div></div></td>
              <td class="md-06__td">Lead Designer</td>
              <td class="md-06__td"><span class="md-06__badge md-06__badge--active">● Active</span></td>
              <td class="md-06__td"><div class="md-06__progress-wrap"><div class="md-06__progress-track"><div class="md-06__progress-fill" style="width:92%"></div></div><span class="md-06__progress-val">92%</span></div></td>
              <td class="md-06__td md-06__td--num">23/25</td>
              <td class="md-06__td" style="color:var(--ink2)">Jan 2023</td>
              <td class="md-06__td"><button class="md-06__row-action" title="Edit">✏</button><button class="md-06__row-action" title="View">👁</button><button class="md-06__row-action" title="More">⋮</button></td>
            </tr>
            <tr class="md-06__tr">
              <td class="md-06__td"><input class="md-06__check" type="checkbox"></td>
              <td class="md-06__td"><div class="md-06__cell-user"><div class="md-06__avatar" style="background:#e91e63">M</div><div><div style="font-weight:500">Maria Chen</div><div style="font-size:.78rem;color:var(--ink3)">m.chen@nexus.co</div></div></div></td>
              <td class="md-06__td">UI Engineer</td>
              <td class="md-06__td"><span class="md-06__badge md-06__badge--active">● Active</span></td>
              <td class="md-06__td"><div class="md-06__progress-wrap"><div class="md-06__progress-track"><div class="md-06__progress-fill" style="width:78%"></div></div><span class="md-06__progress-val">78%</span></div></td>
              <td class="md-06__td md-06__td--num">14/18</td>
              <td class="md-06__td" style="color:var(--ink2)">Mar 2023</td>
              <td class="md-06__td"><button class="md-06__row-action">✏</button><button class="md-06__row-action">👁</button><button class="md-06__row-action">⋮</button></td>
            </tr>
            <tr class="md-06__tr">
              <td class="md-06__td"><input class="md-06__check" type="checkbox"></td>
              <td class="md-06__td"><div class="md-06__cell-user"><div class="md-06__avatar" style="background:#00897b">J</div><div><div style="font-weight:500">Jordan Kim</div><div style="font-size:.78rem;color:var(--ink3)">j.kim@nexus.co</div></div></div></td>
              <td class="md-06__td">Product Manager</td>
              <td class="md-06__td"><span class="md-06__badge md-06__badge--review">◑ In Review</span></td>
              <td class="md-06__td"><div class="md-06__progress-wrap"><div class="md-06__progress-track"><div class="md-06__progress-fill" style="width:55%;background:#3949ab"></div></div><span class="md-06__progress-val">55%</span></div></td>
              <td class="md-06__td md-06__td--num">11/20</td>
              <td class="md-06__td" style="color:var(--ink2)">Jun 2023</td>
              <td class="md-06__td"><button class="md-06__row-action">✏</button><button class="md-06__row-action">👁</button><button class="md-06__row-action">⋮</button></td>
            </tr>
            <tr class="md-06__tr">
              <td class="md-06__td"><input class="md-06__check" type="checkbox"></td>
              <td class="md-06__td"><div class="md-06__cell-user"><div class="md-06__avatar" style="background:#7b1fa2">S</div><div><div style="font-weight:500">Sam Rivera</div><div style="font-size:.78rem;color:var(--ink3)">s.rivera@nexus.co</div></div></div></td>
              <td class="md-06__td">Dev Lead</td>
              <td class="md-06__td"><span class="md-06__badge md-06__badge--pending">◔ Pending</span></td>
              <td class="md-06__td"><div class="md-06__progress-wrap"><div class="md-06__progress-track"><div class="md-06__progress-fill" style="width:35%;background:#f57f17"></div></div><span class="md-06__progress-val">35%</span></div></td>
              <td class="md-06__td md-06__td--num">7/20</td>
              <td class="md-06__td" style="color:var(--ink2)">Sep 2023</td>
              <td class="md-06__td"><button class="md-06__row-action">✏</button><button class="md-06__row-action">👁</button><button class="md-06__row-action">⋮</button></td>
            </tr>
            <tr class="md-06__tr">
              <td class="md-06__td"><input class="md-06__check" type="checkbox"></td>
              <td class="md-06__td"><div class="md-06__cell-user"><div class="md-06__avatar" style="background:#f57c00">P</div><div><div style="font-weight:500">Priya Nair</div><div style="font-size:.78rem;color:var(--ink3)">p.nair@nexus.co</div></div></div></td>
              <td class="md-06__td">QA Engineer</td>
              <td class="md-06__td"><span class="md-06__badge md-06__badge--inactive">○ Inactive</span></td>
              <td class="md-06__td"><div class="md-06__progress-wrap"><div class="md-06__progress-track"><div class="md-06__progress-fill" style="width:10%;background:#c62828"></div></div><span class="md-06__progress-val">10%</span></div></td>
              <td class="md-06__td md-06__td--num">2/20</td>
              <td class="md-06__td" style="color:var(--ink2)">Nov 2023</td>
              <td class="md-06__td"><button class="md-06__row-action">✏</button><button class="md-06__row-action">👁</button><button class="md-06__row-action">⋮</button></td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="md-06__pagination">
        <span class="md-06__pager-info">Rows per page: 10 &nbsp;·&nbsp; 1–5 of 42</span>
        <button class="md-06__page-btn">«</button>
        <button class="md-06__page-btn md-06__page-btn--active">1</button>
        <button class="md-06__page-btn">2</button>
        <button class="md-06__page-btn">3</button>
        <button class="md-06__page-btn">4</button>
        <button class="md-06__page-btn">5</button>
        <button class="md-06__page-btn">»</button>
      </div>
    </div>

    <!-- Dense Table -->
    <div class="md-06__table-card">
      <div class="md-06__table-toolbar">
        <div class="md-06__table-title">Recent Transactions</div>
        <div class="md-06__table-actions">
          <button class="md-06__tool-btn md-06__tool-btn--ghost">Filter</button>
          <button class="md-06__tool-btn md-06__tool-btn--ghost">Download</button>
        </div>
      </div>
      <div class="md-06__table-wrap">
        <table class="md-06__table md-06__table--dense">
          <thead>
            <tr>
              <th class="md-06__th">Date</th>
              <th class="md-06__th">Description</th>
              <th class="md-06__th">Category</th>
              <th class="md-06__th">Status</th>
              <th class="md-06__th md-06__th--num md-06__th--sorted">Amount</th>
            </tr>
          </thead>
          <tbody>
            <tr class="md-06__tr"><td class="md-06__td" style="color:var(--ink2)">Jun 11, 2025</td><td class="md-06__td" style="font-weight:500">AWS Infrastructure</td><td class="md-06__td">Cloud</td><td class="md-06__td"><span class="md-06__badge md-06__badge--active">Paid</span></td><td class="md-06__td md-06__td--num" style="color:#c62828">-$1,240.00</td></tr>
            <tr class="md-06__tr"><td class="md-06__td" style="color:var(--ink2)">Jun 10, 2025</td><td class="md-06__td" style="font-weight:500">Client Invoice #0042</td><td class="md-06__td">Revenue</td><td class="md-06__td"><span class="md-06__badge md-06__badge--active">Settled</span></td><td class="md-06__td md-06__td--num" style="color:#2e7d32">+$8,500.00</td></tr>
            <tr class="md-06__tr"><td class="md-06__td" style="color:var(--ink2)">Jun 09, 2025</td><td class="md-06__td" style="font-weight:500">Figma Enterprise</td><td class="md-06__td">Tools</td><td class="md-06__td"><span class="md-06__badge md-06__badge--pending">Pending</span></td><td class="md-06__td md-06__td--num" style="color:#c62828">-$540.00</td></tr>
            <tr class="md-06__tr"><td class="md-06__td" style="color:var(--ink2)">Jun 08, 2025</td><td class="md-06__td" style="font-weight:500">Contractor Payment</td><td class="md-06__td">Payroll</td><td class="md-06__td"><span class="md-06__badge md-06__badge--active">Paid</span></td><td class="md-06__td md-06__td--num" style="color:#c62828">-$2,800.00</td></tr>
            <tr class="md-06__tr"><td class="md-06__td" style="color:var(--ink2)">Jun 07, 2025</td><td class="md-06__td" style="font-weight:500">Retainer Fee Q2</td><td class="md-06__td">Revenue</td><td class="md-06__td"><span class="md-06__badge md-06__badge--review">Processing</span></td><td class="md-06__td md-06__td--num" style="color:#2e7d32">+$12,000.00</td></tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.md-06,.md-06 *,.md-06 *::before,.md-06 *::after{box-sizing:border-box;margin:0;padding:0}
.md-06 ::selection{background:#0277bd;color:#fff}
.md-06{
  --primary:#0277bd;
  --primary-l:#4fc3f7;
  --secondary:#ff6f00;
  --surface:#fff;
  --bg:#e1f5fe;
  --ink:#212121;
  --ink2:#546e7a;
  --ink3:#90a4ae;
  --divider:#b0bec5;
  --row-hover:#e3f2fd;
  --row-selected:#e8f4fd;
  font-family:'Roboto',sans-serif;
  background:var(--bg);
  min-height:100vh;
  padding:48px 24px 80px;
  color:var(--ink);
}
.md-06__wrap{max-width:1100px;margin:0 auto}
.md-06__page-title{font-size:clamp(1.4rem,4vw,2rem);font-weight:700;margin-bottom:4px}
.md-06__page-sub{font-size:.9rem;color:var(--ink2);margin-bottom:40px}

/* ── TABLE CONTAINER ── */
.md-06__table-card{
  background:var(--surface);border-radius:12px;overflow:hidden;
  box-shadow:0 2px 8px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.06);
  margin-bottom:40px;
}
.md-06__table-toolbar{
  display:flex;align-items:center;gap:16px;padding:20px 20px 16px;
  border-bottom:1px solid var(--divider);flex-wrap:wrap;
}
.md-06__table-title{font-size:1.1rem;font-weight:700;flex:1;min-width:120px}
.md-06__table-actions{display:flex;gap:8px}
.md-06__tool-btn{
  height:36px;padding:0 16px;border:none;border-radius:4px;cursor:pointer;
  font-family:'Roboto';font-size:.8rem;font-weight:500;letter-spacing:.089em;text-transform:uppercase;
  transition:background .15s;
}
.md-06__tool-btn--p{background:var(--primary);color:#fff}
.md-06__tool-btn--p:hover{background:#01579b}
.md-06__tool-btn--ghost{background:transparent;color:var(--primary);border:1px solid rgba(2,119,189,.4)}
.md-06__tool-btn--ghost:hover{background:rgba(2,119,189,.06)}
.md-06__search{
  height:36px;padding:0 12px;border:1px solid var(--divider);border-radius:4px;
  font-family:'Roboto';font-size:.875rem;color:var(--ink);outline:none;width:200px;
  transition:border-color .15s;
}
.md-06__search:focus{border-color:var(--primary)}

/* ── TABLE ── */
.md-06__table-wrap{overflow-x:auto}
.md-06__table{width:100%;border-collapse:collapse;font-size:.875rem}
.md-06__table thead{background:#fafafa}
.md-06__th{
  padding:14px 16px;text-align:left;
  font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink2);white-space:nowrap;border-bottom:2px solid var(--divider);
  cursor:pointer;user-select:none;position:relative;
}
.md-06__th:hover{color:var(--primary)}
.md-06__th--sorted{color:var(--primary)}
.md-06__th--sorted::after{content:' ↑';font-size:.7rem}
.md-06__th--num{text-align:right}
.md-06__td{
  padding:14px 16px;border-bottom:1px solid #eceff1;
  vertical-align:middle;color:var(--ink);
}
.md-06__td--num{text-align:right;font-variant-numeric:tabular-nums;font-weight:500}
.md-06__tr{transition:background .12s}
.md-06__tr:hover .md-06__td{background:var(--row-hover)}
.md-06__tr:last-child .md-06__td{border-bottom:none}

/* Checkbox column */
.md-06__check{
  appearance:none;width:18px;height:18px;border:2px solid var(--ink3);border-radius:3px;
  cursor:pointer;position:relative;flex-shrink:0;transition:background .12s,border-color .12s;
}
.md-06__check:checked{background:var(--primary);border-color:var(--primary)}
.md-06__check:checked::after{content:'✓';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:.7rem;font-weight:700;line-height:1}

/* Status badges */
.md-06__badge{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:12px;font-size:.75rem;font-weight:500;white-space:nowrap}
.md-06__badge--active{background:#e8f5e9;color:#2e7d32}
.md-06__badge--pending{background:#fff8e1;color:#f57f17}
.md-06__badge--inactive{background:#fce4ec;color:#c62828}
.md-06__badge--review{background:#e8eaf6;color:#3949ab}

/* Avatar cell */
.md-06__cell-user{display:flex;align-items:center;gap:10px}
.md-06__avatar{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:700;color:#fff;flex-shrink:0}

/* Progress bar cell */
.md-06__progress-wrap{display:flex;align-items:center;gap:8px}
.md-06__progress-track{height:4px;background:#e0e0e0;border-radius:2px;width:80px;overflow:hidden;flex-shrink:0}
.md-06__progress-fill{height:100%;border-radius:2px;background:var(--primary)}
.md-06__progress-val{font-size:.8rem;color:var(--ink2);font-variant-numeric:tabular-nums;width:32px}

/* Row actions */
.md-06__row-action{background:transparent;border:none;cursor:pointer;color:var(--ink3);padding:4px 6px;border-radius:4px;font-size:1rem;transition:color .15s,background .15s}
.md-06__row-action:hover{color:var(--primary);background:rgba(2,119,189,.08)}

/* ── PAGINATION ── */
.md-06__pagination{
  display:flex;align-items:center;gap:4px;justify-content:flex-end;
  padding:12px 16px;border-top:1px solid var(--divider);flex-wrap:wrap;
}
.md-06__pager-info{font-size:.85rem;color:var(--ink2);margin-right:16px}
.md-06__page-btn{
  width:32px;height:32px;border:none;border-radius:4px;background:transparent;
  font-family:'Roboto';font-size:.85rem;font-weight:500;color:var(--ink2);
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background .12s,color .12s;
}
.md-06__page-btn:hover{background:rgba(2,119,189,.08);color:var(--primary)}
.md-06__page-btn--active{background:var(--primary);color:#fff}
.md-06__page-btn--active:hover{background:#01579b;color:#fff}

/* ── DENSE TABLE ── */
.md-06__table--dense .md-06__th,.md-06__table--dense .md-06__td{padding:8px 12px}
.md-06__table--dense .md-06__badge{padding:2px 8px;font-size:.72rem}

@media(prefers-reduced-motion:reduce){.md-06 *{transition:none!important}}
```

### 07. Material Design Tabs CSS

**Type:** Pure CSS
**Description:** Primary, scrollable, icon-plus-label, and vertical tab bars — all driven by the CSS checkbox-hack with an animated active ink bar, no JavaScript.

**HTML:**
```html
<div class="md-07">
  <div class="md-07__wrap">
    <div class="md-07__page-title">Material Design Tabs CSS</div>
    <div class="md-07__page-sub">Primary, scrollable, icon and vertical tab components — all CSS checkbox-hack, no JavaScript</div>

    <!-- Primary Tabs -->
    <div class="md-07__section">
      <div class="md-07__section-label" style="padding-bottom:0;background:var(--primary);color:rgba(255,255,255,.6)">Primary Tabs</div>
      <input class="md-07__tab-in" type="radio" name="md07p" id="md07p1" checked>
      <input class="md-07__tab-in" type="radio" name="md07p" id="md07p2">
      <input class="md-07__tab-in" type="radio" name="md07p" id="md07p3">
      <input class="md-07__tab-in" type="radio" name="md07p" id="md07p4">
      <div class="md-07__tabs">
        <label class="md-07__tab-lbl" for="md07p1">Overview</label>
        <label class="md-07__tab-lbl" for="md07p2">Analytics <span class="md-07__tab-badge">3</span></label>
        <label class="md-07__tab-lbl" for="md07p3">Settings</label>
        <label class="md-07__tab-lbl" for="md07p4">History</label>
      </div>
      <div class="md-07__panels">
        <div class="md-07__panel md-07__panel--1">
          <div class="md-07__panel-title">Project Overview</div>
          <div class="md-07__panel-text">Aurora Design System is a comprehensive Material Design 3 component library. It provides 240+ components, 12 themes and full accessibility compliance out of the box.</div>
          <div class="md-07__stat-row">
            <div class="md-07__stat"><div class="md-07__stat-val">240+</div><div class="md-07__stat-lbl">Components</div></div>
            <div class="md-07__stat"><div class="md-07__stat-val">12</div><div class="md-07__stat-lbl">Themes</div></div>
            <div class="md-07__stat"><div class="md-07__stat-val">98%</div><div class="md-07__stat-lbl">Coverage</div></div>
            <div class="md-07__stat"><div class="md-07__stat-val">4.9★</div><div class="md-07__stat-lbl">Rating</div></div>
          </div>
        </div>
        <div class="md-07__panel md-07__panel--2">
          <div class="md-07__panel-title">Analytics Dashboard</div>
          <div class="md-07__panel-text">Page views, session durations and conversion rates from the past 30 days. All metrics trending upward.</div>
          <div class="md-07__stat-row">
            <div class="md-07__stat"><div class="md-07__stat-val">84.2k</div><div class="md-07__stat-lbl">Page Views</div></div>
            <div class="md-07__stat"><div class="md-07__stat-val">3m 42s</div><div class="md-07__stat-lbl">Avg. Session</div></div>
            <div class="md-07__stat"><div class="md-07__stat-val">6.8%</div><div class="md-07__stat-lbl">Conversion</div></div>
          </div>
        </div>
        <div class="md-07__panel md-07__panel--3">
          <div class="md-07__panel-title">Project Settings</div>
          <div class="md-07__panel-text">Manage project configuration, API keys, webhooks and team permissions from this panel.</div>
          <ul class="md-07__list">
            <li>Enable dark mode by default</li>
            <li>Set custom domain: aurora.design</li>
            <li>Configure Figma plugin sync</li>
            <li>Manage webhook endpoints</li>
            <li>Export tokens as CSS variables</li>
          </ul>
        </div>
        <div class="md-07__panel md-07__panel--4">
          <div class="md-07__panel-title">Version History</div>
          <div class="md-07__panel-text">Track all changes, releases and rollbacks for your design system.</div>
          <ul class="md-07__list">
            <li>v3.4.0 — New icon set (340 icons)</li>
            <li>v3.3.2 — Dialog animation fixes</li>
            <li>v3.3.0 — Tabs & nav rail components</li>
            <li>v3.2.0 — M3 color scheme support</li>
          </ul>
        </div>
      </div>
    </div>

    <!-- Scrollable Tabs -->
    <div class="md-07__section">
      <div class="md-07__section-label">Scrollable Tabs</div>
      <input class="md-07__tab-in" type="radio" name="md07s" id="md07s1" checked>
      <input class="md-07__tab-in" type="radio" name="md07s" id="md07s2">
      <input class="md-07__tab-in" type="radio" name="md07s" id="md07s3">
      <input class="md-07__tab-in" type="radio" name="md07s" id="md07s4">
      <input class="md-07__tab-in" type="radio" name="md07s" id="md07s5">
      <input class="md-07__tab-in" type="radio" name="md07s" id="md07s6">
      <div class="md-07__tabs md-07__tabs--scroll">
        <label class="md-07__tab-lbl md-07__tab-lbl--scroll" for="md07s1">All Items</label>
        <label class="md-07__tab-lbl md-07__tab-lbl--scroll" for="md07s2">Typography</label>
        <label class="md-07__tab-lbl md-07__tab-lbl--scroll" for="md07s3">Color</label>
        <label class="md-07__tab-lbl md-07__tab-lbl--scroll" for="md07s4">Spacing</label>
        <label class="md-07__tab-lbl md-07__tab-lbl--scroll" for="md07s5">Motion</label>
        <label class="md-07__tab-lbl md-07__tab-lbl--scroll" for="md07s6">Elevation</label>
      </div>
      <div class="md-07__panels">
        <div class="md-07__panel md-07__panel--s1"><div class="md-07__panel-title">All Design Tokens</div><div class="md-07__panel-text">Comprehensive list of all design tokens across typography, color, spacing, motion and elevation systems.</div></div>
        <div class="md-07__panel md-07__panel--s2"><div class="md-07__panel-title">Typography Scale</div><div class="md-07__panel-text">Headline Display — 57sp · Large · Weight 400<br>Headline Large — 32sp · Weight 400<br>Title Medium — 16sp · Weight 500<br>Body Large — 16sp · Weight 400<br>Label Small — 11sp · Weight 500</div></div>
        <div class="md-07__panel md-07__panel--s3"><div class="md-07__panel-title">Color System</div><div class="md-07__panel-text">Primary, Secondary, Tertiary, Error and Neutral palettes generated from seed color using HCT color space. Each role has Light and Dark mode values.</div></div>
        <div class="md-07__panel md-07__panel--s4"><div class="md-07__panel-title">Spacing System</div><div class="md-07__panel-text">4dp base grid. Common spacings: 4, 8, 12, 16, 24, 32, 48, 64dp. Component padding follows 16dp horizontal and 8/12dp vertical conventions.</div></div>
        <div class="md-07__panel md-07__panel--s5"><div class="md-07__panel-title">Motion System</div><div class="md-07__panel-text">Standard: 300ms · Emphasized: 500ms cubic-bezier(.2,0,0,1) · Decelerate: cubic-bezier(0,0,0,1) · Accelerate: cubic-bezier(.3,0,1,1)</div></div>
        <div class="md-07__panel md-07__panel--s6"><div class="md-07__panel-title">Elevation Levels</div><div class="md-07__panel-text">0: Flat · 1: Filled · 2: Outlined · 3: Raised (cards) · 4: FAB · 5: Nav drawer · 6: Modal dialogs</div></div>
      </div>
    </div>

    <!-- Icon Tabs -->
    <div class="md-07__section">
      <div class="md-07__section-label">Icon + Label Tabs</div>
      <input class="md-07__tab-in" type="radio" name="md07i" id="md07i1" checked>
      <input class="md-07__tab-in" type="radio" name="md07i" id="md07i2">
      <input class="md-07__tab-in" type="radio" name="md07i" id="md07i3">
      <input class="md-07__tab-in" type="radio" name="md07i" id="md07i4">
      <div class="md-07__tabs md-07__tabs--icon md-07__tabs--scroll" style="background:var(--surface);border-bottom:1px solid var(--divider)">
        <label class="md-07__tab-lbl md-07__tab-lbl--scroll" for="md07i1"><span class="md-07__tab-icon">🏠</span>Home</label>
        <label class="md-07__tab-lbl md-07__tab-lbl--scroll" for="md07i2"><span class="md-07__tab-icon">🔔</span>Alerts</label>
        <label class="md-07__tab-lbl md-07__tab-lbl--scroll" for="md07i3"><span class="md-07__tab-icon">📁</span>Files</label>
        <label class="md-07__tab-lbl md-07__tab-lbl--scroll" for="md07i4"><span class="md-07__tab-icon">👤</span>Profile</label>
      </div>
      <div class="md-07__panels">
        <div class="md-07__panel md-07__panel--s1" style="display:none" id="md07icon1">Home tab content</div>
      </div>
      <div class="md-07__panels" style="padding-top:0">
        <div class="md-07__panel md-07__panel--i1" id="md07-i-panel">
          <div class="md-07__panel-title" id="md07-icon-title">Home</div>
          <div class="md-07__panel-text">Tab panels with icon + label, following Material Design 3 icon tab guidelines for improved visual hierarchy and tap target accessibility.</div>
        </div>
      </div>
    </div>

    <!-- Vertical Tabs -->
    <div class="md-07__section">
      <div class="md-07__section-label" style="padding-bottom:16px">Vertical Tabs</div>
      <div class="md-07__vert-wrap">
        <input class="md-07__tab-in" type="radio" name="md07v" id="md07v1" checked>
        <input class="md-07__tab-in" type="radio" name="md07v" id="md07v2">
        <input class="md-07__tab-in" type="radio" name="md07v" id="md07v3">
        <input class="md-07__tab-in" type="radio" name="md07v" id="md07v4">
        <div class="md-07__tabs md-07__tabs--vert">
          <label class="md-07__tab-lbl md-07__tab-lbl--vert" for="md07v1"><span>🎨</span>Design</label>
          <label class="md-07__tab-lbl md-07__tab-lbl--vert" for="md07v2"><span>⚡</span>Develop</label>
          <label class="md-07__tab-lbl md-07__tab-lbl--vert" for="md07v3"><span>🧪</span>Test</label>
          <label class="md-07__tab-lbl md-07__tab-lbl--vert" for="md07v4"><span>🚀</span>Deploy</label>
        </div>
        <div class="md-07__vert-panels">
          <div class="md-07__panel md-07__panel--v1"><div class="md-07__panel-title">Design Phase</div><div class="md-07__panel-text">Create wireframes and high-fidelity designs using the Aurora component library in Figma. Use design tokens for consistency across all breakpoints.</div></div>
          <div class="md-07__panel md-07__panel--v2"><div class="md-07__panel-title">Development Phase</div><div class="md-07__panel-text">Implement components using React and CSS custom properties. Leverage the Aurora npm package for pre-built accessible Material Design 3 components.</div></div>
          <div class="md-07__panel md-07__panel--v3"><div class="md-07__panel-title">Testing Phase</div><div class="md-07__panel-text">Run Playwright visual regression tests, axe accessibility audits and cross-browser compatibility checks. Target &gt;94% code coverage.</div></div>
          <div class="md-07__panel md-07__panel--v4"><div class="md-07__panel-title">Deployment Phase</div><div class="md-07__panel-text">Publish to npm registry, update Figma plugin, generate changelog and notify subscribers. CI/CD pipeline handles versioning automatically.</div></div>
        </div>
      </div>
    </div>

  </div>
</div>
```

**CSS:**
```css
.md-07,.md-07 *,.md-07 *::before,.md-07 *::after{box-sizing:border-box;margin:0;padding:0}
.md-07 ::selection{background:#2e7d32;color:#fff}
.md-07{
  --primary:#2e7d32;
  --primary-l:#66bb6a;
  --secondary:#ff8f00;
  --bg:#f1f8e9;
  --surface:#fff;
  --ink:#212121;
  --ink2:#546e7a;
  --ink3:#90a4ae;
  --divider:#c5e1a5;
  font-family:'Roboto',sans-serif;
  background:var(--bg);
  min-height:100vh;
  padding:48px 24px 80px;
  color:var(--ink);
}
.md-07__wrap{max-width:860px;margin:0 auto}
.md-07__page-title{font-size:clamp(1.4rem,4vw,2rem);font-weight:700;margin-bottom:4px}
.md-07__page-sub{font-size:.9rem;color:var(--ink2);margin-bottom:40px}

/* ── TAB SECTION WRAPPER ── */
.md-07__section{background:var(--surface);border-radius:12px;overflow:hidden;margin-bottom:32px;box-shadow:0 1px 4px rgba(0,0,0,.1)}
.md-07__section-label{font-size:.7rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--ink2);padding:20px 20px 0}

/* ── PRIMARY TABS ── */
.md-07__tabs{display:flex;background:var(--primary);position:relative}
.md-07__tab-in{display:none}
.md-07__tab-lbl{
  flex:1;display:flex;align-items:center;justify-content:center;gap:8px;
  height:48px;padding:0 16px;cursor:pointer;
  font-size:.875rem;font-weight:500;letter-spacing:.089em;text-transform:uppercase;
  color:rgba(255,255,255,.7);
  position:relative;user-select:none;
  transition:color .2s;white-space:nowrap;
}
.md-07__tab-lbl::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:2px;
  background:#fff;border-radius:2px 2px 0 0;
  transform:scaleX(0);transition:transform .25s cubic-bezier(.4,0,.2,1);
}
.md-07__tab-in:checked + .md-07__tab-lbl{color:#fff}
.md-07__tab-in:checked + .md-07__tab-lbl::after{transform:scaleX(1)}
.md-07__tab-badge{background:var(--secondary);color:#fff;font-size:.65rem;font-weight:700;padding:1px 6px;border-radius:8px;line-height:1.6}

/* ── TAB PANELS ── */
.md-07__panels{padding:28px}
.md-07__panel{display:none}
#md07p1:checked ~ .md-07__panels .md-07__panel--1,
#md07p2:checked ~ .md-07__panels .md-07__panel--2,
#md07p3:checked ~ .md-07__panels .md-07__panel--3,
#md07p4:checked ~ .md-07__panels .md-07__panel--4{display:block}

/* ── SCROLLABLE TABS ── */
.md-07__tabs--scroll{overflow-x:auto;scrollbar-width:none;background:var(--surface);border-bottom:1px solid var(--divider)}
.md-07__tabs--scroll::-webkit-scrollbar{display:none}
.md-07__tab-lbl--scroll{
  flex:none;color:var(--ink2);height:48px;
}
.md-07__tab-lbl--scroll::after{background:var(--primary);height:3px}
.md-07__tab-in:checked + .md-07__tab-lbl--scroll{color:var(--primary)}
#md07s1:checked ~ .md-07__panels .md-07__panel--s1,
#md07s2:checked ~ .md-07__panels .md-07__panel--s2,
#md07s3:checked ~ .md-07__panels .md-07__panel--s3,
#md07s4:checked ~ .md-07__panels .md-07__panel--s4,
#md07s5:checked ~ .md-07__panels .md-07__panel--s5,
#md07s6:checked ~ .md-07__panels .md-07__panel--s6{display:block}

/* ── SECONDARY/ICON TABS ── */
.md-07__tabs--icon .md-07__tab-lbl{flex-direction:column;height:64px;gap:4px;font-size:.7rem}
.md-07__tab-icon{font-size:1.3rem;display:block}

/* ── VERTICAL TABS ── */
.md-07__vert-wrap{display:flex;gap:0;min-height:240px}
.md-07__tabs--vert{flex-direction:column;background:var(--surface);border-right:1px solid var(--divider);width:180px;flex-shrink:0}
.md-07__tab-lbl--vert{
  flex:none;height:48px;justify-content:flex-start;padding:0 20px;
  color:var(--ink2);font-size:.875rem;gap:12px;
}
.md-07__tab-lbl--vert::after{
  left:auto;right:0;top:0;bottom:0;width:3px;height:auto;
  background:var(--primary);border-radius:2px 0 0 2px;
}
.md-07__tab-in:checked + .md-07__tab-lbl--vert{color:var(--primary);background:rgba(46,125,50,.06)}
.md-07__vert-panels{flex:1;padding:24px}
#md07v1:checked ~ .md-07__vert-panels .md-07__panel--v1,
#md07v2:checked ~ .md-07__vert-panels .md-07__panel--v2,
#md07v3:checked ~ .md-07__vert-panels .md-07__panel--v3,
#md07v4:checked ~ .md-07__vert-panels .md-07__panel--v4{display:block}

/* Panel content styles */
.md-07__panel-title{font-size:1rem;font-weight:700;margin-bottom:10px;color:var(--ink)}
.md-07__panel-text{font-size:.9rem;line-height:1.7;color:var(--ink2)}
.md-07__stat-row{display:flex;gap:20px;flex-wrap:wrap;margin-top:16px}
.md-07__stat{background:var(--bg);border-radius:10px;padding:16px 20px;flex:1;min-width:100px}
.md-07__stat-val{font-size:1.5rem;font-weight:700;color:var(--primary)}
.md-07__stat-lbl{font-size:.75rem;color:var(--ink2);margin-top:2px}
.md-07__list{list-style:none;display:flex;flex-direction:column;gap:8px;margin-top:8px}
.md-07__list li{display:flex;align-items:center;gap:8px;font-size:.88rem;color:var(--ink2)}
.md-07__list li::before{content:'✓';color:var(--primary);font-weight:700;flex-shrink:0}

@media(prefers-reduced-motion:reduce){.md-07 *{transition:none!important}}
```

### 08. Material Design Chip CSS

**Type:** Pure CSS
**Description:** Suggestion, filter (checkbox-interactive), choice (radio-interactive), input with avatar, tonal, filled, outlined, status, elevated, and segmented chip variants — all Material Design 3.

**HTML:**
```html
<div class="md-08">
  <div class="md-08__wrap">
    <div class="md-08__page-title">Material Design Chips CSS</div>
    <div class="md-08__page-sub">Filter, choice, input, suggestion and status chips — all CSS, checkbox-hack interactive filtering</div>

    <!-- Assist / Suggestion Chips -->
    <div class="md-08__section">
      <div class="md-08__section-title">Suggestion &amp; Assist Chips</div>
      <div class="md-08__chip-row">
        <div class="md-08__chip md-08__chip--suggestion"><span class="md-08__chip-icon">✨</span>Add to calendar</div>
        <div class="md-08__chip md-08__chip--suggestion"><span class="md-08__chip-icon">📍</span>Add location</div>
        <div class="md-08__chip md-08__chip--suggestion"><span class="md-08__chip-icon">👥</span>Invite people</div>
        <div class="md-08__chip md-08__chip--suggestion"><span class="md-08__chip-icon">🔗</span>Copy link</div>
        <div class="md-08__chip md-08__chip--suggestion"><span class="md-08__chip-icon">📧</span>Send email</div>
      </div>
    </div>

    <!-- Filter Chips -->
    <div class="md-08__section">
      <div class="md-08__section-title">Filter Chips (Interactive — click to toggle)</div>
      <div class="md-08__chip-row">
        <input class="md-08__filter-in" type="checkbox" id="md08f1" checked>
        <label class="md-08__filter-lbl" for="md08f1"><span class="md-08__chip-icon">🎨</span>Design</label>
        <input class="md-08__filter-in" type="checkbox" id="md08f2">
        <label class="md-08__filter-lbl" for="md08f2"><span class="md-08__chip-icon">⚡</span>Development</label>
        <input class="md-08__filter-in" type="checkbox" id="md08f3" checked>
        <label class="md-08__filter-lbl" for="md08f3"><span class="md-08__chip-icon">📱</span>Mobile</label>
        <input class="md-08__filter-in" type="checkbox" id="md08f4">
        <label class="md-08__filter-lbl" for="md08f4"><span class="md-08__chip-icon">☁</span>Cloud</label>
        <input class="md-08__filter-in" type="checkbox" id="md08f5">
        <label class="md-08__filter-lbl" for="md08f5"><span class="md-08__chip-icon">🔒</span>Security</label>
        <input class="md-08__filter-in" type="checkbox" id="md08f6">
        <label class="md-08__filter-lbl" for="md08f6"><span class="md-08__chip-icon">📊</span>Analytics</label>
      </div>
    </div>

    <!-- Choice Chips -->
    <div class="md-08__section">
      <div class="md-08__section-title">Choice Chips (Single Select)</div>
      <div class="md-08__chip-row">
        <input class="md-08__choice-in" type="radio" name="md08size" id="md08c1">
        <label class="md-08__choice-lbl" for="md08c1">XS</label>
        <input class="md-08__choice-in" type="radio" name="md08size" id="md08c2">
        <label class="md-08__choice-lbl" for="md08c2">S</label>
        <input class="md-08__choice-in" type="radio" name="md08size" id="md08c3" checked>
        <label class="md-08__choice-lbl" for="md08c3">M</label>
        <input class="md-08__choice-in" type="radio" name="md08size" id="md08c4">
        <label class="md-08__choice-lbl" for="md08c4">L</label>
        <input class="md-08__choice-in" type="radio" name="md08size" id="md08c5">
        <label class="md-08__choice-lbl" for="md08c5">XL</label>
        <input class="md-08__choice-in" type="radio" name="md08size" id="md08c6">
        <label class="md-08__choice-lbl" for="md08c6">2XL</label>
      </div>
      <div class="md-08__chip-row">
        <input class="md-08__choice-in" type="radio" name="md08sort" id="md08s1" checked>
        <label class="md-08__choice-lbl" for="md08s1">⬆ Price: Low to High</label>
        <input class="md-08__choice-in" type="radio" name="md08sort" id="md08s2">
        <label class="md-08__choice-lbl" for="md08s2">⬇ Price: High to Low</label>
        <input class="md-08__choice-in" type="radio" name="md08sort" id="md08s3">
        <label class="md-08__choice-lbl" for="md08s3">★ Top Rated</label>
        <input class="md-08__choice-in" type="radio" name="md08sort" id="md08s4">
        <label class="md-08__choice-lbl" for="md08s4">🆕 Newest</label>
      </div>
    </div>

    <!-- Input Chips (avatar) -->
    <div class="md-08__section">
      <div class="md-08__section-title">Input Chips with Avatars</div>
      <div class="md-08__chip-row">
        <div class="md-08__chip md-08__chip--input"><div class="md-08__chip-avatar" style="background:#ad1457">A</div>Alex T.<button class="md-08__chip-close">✕</button></div>
        <div class="md-08__chip md-08__chip--input"><div class="md-08__chip-avatar" style="background:#1565c0">M</div>Maria C.<button class="md-08__chip-close">✕</button></div>
        <div class="md-08__chip md-08__chip--input"><div class="md-08__chip-avatar" style="background:#00897b">J</div>Jordan K.<button class="md-08__chip-close">✕</button></div>
        <div class="md-08__chip md-08__chip--input"><div class="md-08__chip-avatar" style="background:#7b1fa2">S</div>Sam R.<button class="md-08__chip-close">✕</button></div>
      </div>
      <div class="md-08__tag-input">
        <div class="md-08__chip md-08__chip--input" style="height:28px;font-size:.8rem"><span class="md-08__chip-icon">🏷</span>Material Design<button class="md-08__chip-close">✕</button></div>
        <div class="md-08__chip md-08__chip--input" style="height:28px;font-size:.8rem"><span class="md-08__chip-icon">🏷</span>CSS<button class="md-08__chip-close">✕</button></div>
        <div class="md-08__chip md-08__chip--input" style="height:28px;font-size:.8rem"><span class="md-08__chip-icon">🏷</span>UI Components<button class="md-08__chip-close">✕</button></div>
        <input class="md-08__tag-field" type="text" placeholder="Add tag...">
      </div>
    </div>

    <!-- Outlined / Tonal / Filled -->
    <div class="md-08__section">
      <div class="md-08__section-title">Tonal &amp; Filled Chips</div>
      <div class="md-08__chip-row">
        <div class="md-08__chip md-08__chip--filled-primary"><span class="md-08__chip-icon">★</span>Featured</div>
        <div class="md-08__chip md-08__chip--filled-teal"><span class="md-08__chip-icon">✓</span>Verified</div>
        <div class="md-08__chip md-08__chip--filled-amber"><span class="md-08__chip-icon">⚡</span>New</div>
        <div class="md-08__chip md-08__chip--filled-blue"><span class="md-08__chip-icon">💎</span>Premium</div>
      </div>
      <div class="md-08__chip-row">
        <div class="md-08__chip md-08__chip--outlined-red"><span class="md-08__chip-icon">⚠</span>Deprecated</div>
        <div class="md-08__chip md-08__chip--outlined-green"><span class="md-08__chip-icon">✓</span>Stable</div>
        <div class="md-08__chip md-08__chip--outlined-orange"><span class="md-08__chip-icon">🔔</span>Beta</div>
        <div class="md-08__chip md-08__chip--outlined-purple"><span class="md-08__chip-icon">🔬</span>Experimental</div>
      </div>
    </div>

    <!-- Status Chips -->
    <div class="md-08__section">
      <div class="md-08__section-title">Status Chips</div>
      <div class="md-08__chip-row">
        <div class="md-08__chip md-08__chip--status-ok">● Active</div>
        <div class="md-08__chip md-08__chip--status-warn">◔ Pending</div>
        <div class="md-08__chip md-08__chip--status-err">✕ Failed</div>
        <div class="md-08__chip md-08__chip--status-info">◑ In Progress</div>
        <div class="md-08__chip md-08__chip--status-neutral">○ Archived</div>
        <div class="md-08__chip md-08__chip--disabled md-08__chip--filled-primary">Disabled</div>
      </div>
    </div>

    <!-- Elevated -->
    <div class="md-08__section">
      <div class="md-08__section-title">Elevated Chips</div>
      <div class="md-08__chip-row">
        <div class="md-08__chip md-08__chip--elevated"><span class="md-08__chip-icon">📊</span>Dashboard</div>
        <div class="md-08__chip md-08__chip--elevated"><span class="md-08__chip-icon">📁</span>Projects</div>
        <div class="md-08__chip md-08__chip--elevated"><span class="md-08__chip-icon">🔔</span>Notifications</div>
        <div class="md-08__chip md-08__chip--elevated"><span class="md-08__chip-icon">⚙</span>Settings</div>
        <div class="md-08__chip md-08__chip--elevated"><span class="md-08__chip-icon">👤</span>Profile</div>
      </div>
    </div>

    <!-- Segmented Chip Group -->
    <div class="md-08__section">
      <div class="md-08__section-title">Segmented Choice Chip Group</div>
      <div style="display:flex;gap:16px;flex-wrap:wrap;align-items:center">
        <div class="md-08__choice-group">
          <input class="md-08__choice-in" type="radio" name="md08view" id="md08vl" checked>
          <label class="md-08__choice-lbl md-08__choice-lbl--seg" for="md08vl">📋 List</label>
          <input class="md-08__choice-in" type="radio" name="md08view" id="md08vg">
          <label class="md-08__choice-lbl md-08__choice-lbl--seg" for="md08vg">⊞ Grid</label>
          <input class="md-08__choice-in" type="radio" name="md08view" id="md08vc">
          <label class="md-08__choice-lbl md-08__choice-lbl--seg" for="md08vc">📊 Chart</label>
        </div>
        <div class="md-08__choice-group">
          <input class="md-08__choice-in" type="radio" name="md08time" id="md08t1d" checked>
          <label class="md-08__choice-lbl md-08__choice-lbl--seg" for="md08t1d">1D</label>
          <input class="md-08__choice-in" type="radio" name="md08time" id="md08t7d">
          <label class="md-08__choice-lbl md-08__choice-lbl--seg" for="md08t7d">7D</label>
          <input class="md-08__choice-in" type="radio" name="md08time" id="md08t1m">
          <label class="md-08__choice-lbl md-08__choice-lbl--seg" for="md08t1m">1M</label>
          <input class="md-08__choice-in" type="radio" name="md08time" id="md08t1y">
          <label class="md-08__choice-lbl md-08__choice-lbl--seg" for="md08t1y">1Y</label>
          <input class="md-08__choice-in" type="radio" name="md08time" id="md08tall">
          <label class="md-08__choice-lbl md-08__choice-lbl--seg" for="md08tall">All</label>
        </div>
      </div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.md-08,.md-08 *,.md-08 *::before,.md-08 *::after{box-sizing:border-box;margin:0;padding:0}
.md-08 ::selection{background:#ad1457;color:#fff}
.md-08{
  --primary:#ad1457;
  --primary-l:#f06292;
  --secondary:#1565c0;
  --surface:#fff;
  --bg:#fce4ec;
  --ink:#212121;
  --ink2:#616161;
  --ink3:#bdbdbd;
  --divider:#f8bbd0;
  font-family:'Roboto',sans-serif;
  background:var(--bg);
  min-height:100vh;
  padding:48px 24px 80px;
  color:var(--ink);
}
.md-08__wrap{max-width:900px;margin:0 auto}
.md-08__page-title{font-size:clamp(1.4rem,4vw,2rem);font-weight:700;margin-bottom:4px}
.md-08__page-sub{font-size:.9rem;color:var(--ink2);margin-bottom:40px}
.md-08__section{background:var(--surface);border-radius:12px;padding:28px;margin-bottom:24px;box-shadow:0 1px 4px rgba(0,0,0,.08)}
.md-08__section-title{font-size:.7rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--ink2);margin-bottom:20px;display:flex;align-items:center;gap:10px}
.md-08__section-title::after{content:'';flex:1;height:1px;background:var(--divider)}
.md-08__chip-row{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:20px}

/* ── BASE CHIP ── */
.md-08__chip{
  display:inline-flex;align-items:center;gap:6px;
  height:32px;padding:0 12px;border-radius:8px;
  border:1px solid #f8bbd0;background:var(--surface);
  font-family:'Roboto';font-size:.875rem;font-weight:400;
  color:var(--ink);cursor:pointer;
  transition:background .15s,box-shadow .15s,border-color .15s;
  user-select:none;position:relative;overflow:hidden;
}
.md-08__chip:hover{box-shadow:0 1px 3px rgba(0,0,0,.12);background:#fdf4f8}

/* Chip ripple */
.md-08__chip::after{content:'';position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:rgba(173,20,87,.15);transform:translate(-50%,-50%);transition:width .3s,height .3s,opacity .3s;opacity:0}
.md-08__chip:hover::after{width:120px;height:120px;opacity:1}

.md-08__chip-icon{font-size:1rem}
.md-08__chip-avatar{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:700;color:#fff;margin-left:-4px}
.md-08__chip-close{
  width:18px;height:18px;border-radius:50%;border:none;background:rgba(0,0,0,.1);
  font-size:.65rem;cursor:pointer;display:flex;align-items:center;justify-content:center;
  margin-right:-4px;color:var(--ink2);transition:background .15s;padding:0;
}
.md-08__chip-close:hover{background:rgba(0,0,0,.2)}

/* ── FILTER CHIP (checkbox-hack) ── */
.md-08__filter-in{display:none}
.md-08__filter-lbl{
  display:inline-flex;align-items:center;gap:6px;
  height:32px;padding:0 12px;border-radius:8px;
  border:1px solid #f8bbd0;background:var(--surface);
  font-family:'Roboto';font-size:.875rem;font-weight:400;
  color:var(--ink);cursor:pointer;
  transition:background .15s,border-color .15s;
  user-select:none;
}
.md-08__filter-lbl::before{content:'';width:16px;height:16px;border:1px solid var(--ink3);border-radius:3px;flex-shrink:0;transition:background .15s,border-color .15s}
.md-08__filter-in:checked + .md-08__filter-lbl{background:rgba(173,20,87,.1);border-color:var(--primary);color:var(--primary);font-weight:500}
.md-08__filter-in:checked + .md-08__filter-lbl::before{background:var(--primary);border-color:var(--primary);content:'✓';color:#fff;font-size:.6rem;display:flex;align-items:center;justify-content:center}

/* ── CHOICE CHIP (radio) ── */
.md-08__choice-in{display:none}
.md-08__choice-lbl{
  display:inline-flex;align-items:center;gap:6px;
  height:32px;padding:0 16px;border-radius:8px;
  border:1px solid #f8bbd0;background:var(--surface);
  font-family:'Roboto';font-size:.875rem;font-weight:400;
  color:var(--ink);cursor:pointer;
  transition:background .15s,border-color .15s,color .15s;
  user-select:none;
}
.md-08__choice-in:checked + .md-08__choice-lbl{background:rgba(173,20,87,.12);border-color:var(--primary);color:var(--primary);font-weight:500}

/* ── INPUT CHIP ── */
.md-08__chip--input{background:rgba(173,20,87,.1);border-color:var(--primary);color:var(--primary)}

/* ── SUGGESTION CHIP ── */
.md-08__chip--suggestion{border-style:dashed;color:var(--secondary);border-color:var(--secondary);background:rgba(21,101,192,.06)}
.md-08__chip--suggestion:hover{background:rgba(21,101,192,.1)}

/* ── OUTLINED CHIPS ── */
.md-08__chip--outlined-red{border-color:#c62828;color:#c62828}
.md-08__chip--outlined-green{border-color:#2e7d32;color:#2e7d32}
.md-08__chip--outlined-orange{border-color:#e65100;color:#e65100}
.md-08__chip--outlined-purple{border-color:#6a1b9a;color:#6a1b9a}

/* ── FILLED CHIPS ── */
.md-08__chip--filled-primary{background:var(--primary);color:#fff;border-color:var(--primary)}
.md-08__chip--filled-primary:hover{background:#880e4f}
.md-08__chip--filled-teal{background:#00897b;color:#fff;border-color:#00897b}
.md-08__chip--filled-amber{background:#ff8f00;color:#fff;border-color:#ff8f00}
.md-08__chip--filled-blue{background:#1565c0;color:#fff;border-color:#1565c0}

/* ── CHIP ELEVATED ── */
.md-08__chip--elevated{box-shadow:0 1px 3px rgba(0,0,0,.2),0 1px 2px rgba(0,0,0,.14);border:none}
.md-08__chip--elevated:hover{box-shadow:0 3px 8px rgba(0,0,0,.2)}

/* ── DISABLED ── */
.md-08__chip--disabled{opacity:.38;cursor:not-allowed;pointer-events:none}

/* Status chips */
.md-08__chip--status-ok{background:#e8f5e9;color:#2e7d32;border-color:#a5d6a7}
.md-08__chip--status-warn{background:#fff8e1;color:#f57f17;border-color:#ffe082}
.md-08__chip--status-err{background:#fce4ec;color:#c62828;border-color:#f48fb1}
.md-08__chip--status-info{background:#e3f2fd;color:#1565c0;border-color:#90caf9}
.md-08__chip--status-neutral{background:#f5f5f5;color:#616161;border-color:#e0e0e0}

/* ── TAG INPUT DEMO ── */
.md-08__tag-input{
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  padding:8px 12px;border:1px solid var(--divider);border-radius:8px;background:#fff;
  min-height:48px;cursor:text;
}
.md-08__tag-input:focus-within{border-color:var(--primary);box-shadow:0 0 0 2px rgba(173,20,87,.12)}
.md-08__tag-field{border:none;outline:none;font-family:'Roboto';font-size:.875rem;color:var(--ink);background:transparent;min-width:80px}

/* ── CHIP GROUP BAR ── */
.md-08__choice-group{display:flex;gap:0;border:1px solid var(--divider);border-radius:8px;overflow:hidden;display:inline-flex}
.md-08__choice-lbl--seg{border-radius:0;border:none;border-right:1px solid var(--divider);height:36px}
.md-08__choice-lbl--seg:last-of-type{border-right:none}
.md-08__choice-in:checked + .md-08__choice-lbl--seg{background:rgba(173,20,87,.12);color:var(--primary)}

@media(prefers-reduced-motion:reduce){.md-08 *{transition:none!important;animation:none!important}}
```

### 09. Material Design Stepper CSS

**Type:** Pure CSS
**Description:** Horizontal step indicator with done/active/error states, vertical accordion stepper, and a linear checkout stepper — built entirely with CSS counter and radio-hack.

**HTML:**
```html
<div class="md-09">
  <div class="md-09__wrap">
    <div class="md-09__page-title">Material Design Steppers CSS</div>
    <div class="md-09__page-sub">Horizontal, vertical and linear checkout steppers — state indicators, connectors and panel content</div>

    <!-- Horizontal Stepper -->
    <div class="md-09__card">
      <div class="md-09__card-title">Horizontal Stepper — Order Progress</div>
      <div class="md-09__hstep">
        <div class="md-09__hstep-item md-09__hstep-item--done">
          <div class="md-09__step-circle">✓</div>
          <div class="md-09__step-label"><div class="md-09__step-name">Cart</div><div class="md-09__step-sub">Completed</div></div>
        </div>
        <div class="md-09__hstep-item md-09__hstep-item--done">
          <div class="md-09__step-circle">✓</div>
          <div class="md-09__step-label"><div class="md-09__step-name">Shipping</div><div class="md-09__step-sub">Completed</div></div>
        </div>
        <div class="md-09__hstep-item md-09__hstep-item--active">
          <div class="md-09__step-circle">3</div>
          <div class="md-09__step-label"><div class="md-09__step-name">Payment</div><div class="md-09__step-sub">In progress</div></div>
        </div>
        <div class="md-09__hstep-item">
          <div class="md-09__step-circle">4</div>
          <div class="md-09__step-label"><div class="md-09__step-name">Review</div><div class="md-09__step-sub">Pending</div></div>
        </div>
        <div class="md-09__hstep-item">
          <div class="md-09__step-circle">5</div>
          <div class="md-09__step-label"><div class="md-09__step-name">Confirm</div><div class="md-09__step-sub">Pending</div></div>
        </div>
      </div>
      <div class="md-09__step-content">
        <div class="md-09__step-content-title">Step 3 — Payment Details</div>
        <div class="md-09__step-content-body">Enter your payment method. All transactions are secured with 256-bit SSL encryption. We accept Visa, Mastercard, American Express and PayPal.</div>
      </div>
      <div class="md-09__step-actions">
        <button class="md-09__btn md-09__btn--ghost">← Back</button>
        <button class="md-09__btn md-09__btn--p">Continue →</button>
      </div>
    </div>

    <!-- Horizontal with Error -->
    <div class="md-09__card">
      <div class="md-09__card-title">Horizontal Stepper — With Error State</div>
      <div class="md-09__hstep">
        <div class="md-09__hstep-item md-09__hstep-item--done">
          <div class="md-09__step-circle">✓</div>
          <div class="md-09__step-label"><div class="md-09__step-name">Upload</div><div class="md-09__step-sub">Done</div></div>
        </div>
        <div class="md-09__hstep-item md-09__hstep-item--error">
          <div class="md-09__step-circle">!</div>
          <div class="md-09__step-label"><div class="md-09__step-name">Validate</div><div class="md-09__step-sub">Error</div></div>
        </div>
        <div class="md-09__hstep-item">
          <div class="md-09__step-circle">3</div>
          <div class="md-09__step-label"><div class="md-09__step-name">Process</div><div class="md-09__step-sub">Waiting</div></div>
        </div>
        <div class="md-09__hstep-item">
          <div class="md-09__step-circle">4</div>
          <div class="md-09__step-label"><div class="md-09__step-name">Publish</div><div class="md-09__step-sub">Waiting</div></div>
        </div>
      </div>
      <div class="md-09__step-content" style="border-color:#ffcdd2;background:#fff8f8">
        <div class="md-09__step-content-title" style="color:#c62828">⚠ Validation Failed</div>
        <div class="md-09__step-content-body">3 columns in your CSV are missing required values. Please fix the errors and re-upload your file.</div>
      </div>
      <div class="md-09__step-actions">
        <button class="md-09__btn md-09__btn--ghost">← Back</button>
        <button class="md-09__btn md-09__btn--p" style="background:#c62828">Fix Errors</button>
      </div>
    </div>

    <!-- Vertical Stepper -->
    <div class="md-09__card">
      <div class="md-09__card-title">Vertical Stepper (Accordion)</div>
      <div class="md-09__vstep">
        <div class="md-09__vstep-item">
          <input class="md-09__vstep-in" type="radio" name="md09v" id="md09v1" checked>
          <div class="md-09__vstep-left">
            <label class="md-09__vstep-circle" for="md09v1">1</label>
            <div class="md-09__vstep-connector"></div>
          </div>
          <div class="md-09__vstep-body">
            <div class="md-09__vstep-head">
              <label class="md-09__vstep-title" for="md09v1">Account Information</label>
            </div>
            <div class="md-09__vstep-panel">
              <div class="md-09__vstep-panel-inner">
                <p>Provide your name, email and password to create your account. We'll send a verification email once you submit.</p>
                <div style="margin-top:12px;display:grid;grid-template-columns:1fr 1fr;gap:12px">
                  <div class="md-09__field"><label>First Name</label><input type="text" placeholder="Alex"></div>
                  <div class="md-09__field"><label>Last Name</label><input type="text" placeholder="Thompson"></div>
                  <div class="md-09__field" style="grid-column:1/-1"><label>Email</label><input type="email" placeholder="alex@example.com"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="md-09__vstep-item">
          <input class="md-09__vstep-in" type="radio" name="md09v" id="md09v2">
          <div class="md-09__vstep-left">
            <label class="md-09__vstep-circle" for="md09v2">2</label>
            <div class="md-09__vstep-connector"></div>
          </div>
          <div class="md-09__vstep-body">
            <div class="md-09__vstep-head">
              <label class="md-09__vstep-title" for="md09v2">Choose Your Plan</label>
            </div>
            <div class="md-09__vstep-panel">
              <div class="md-09__vstep-panel-inner">
                <p>Select the plan that best fits your needs. You can upgrade or downgrade at any time.</p>
                <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-top:12px">
                  <div style="border:2px solid var(--divider);border-radius:8px;padding:12px;text-align:center"><div style="font-weight:700">Free</div><div style="font-size:1.2rem;font-weight:700;margin:4px 0">$0</div><div style="font-size:.75rem;color:var(--ink2)">5 projects</div></div>
                  <div style="border:2px solid var(--primary);border-radius:8px;padding:12px;text-align:center;background:rgba(230,81,0,.06)"><div style="font-weight:700;color:var(--primary)">Pro ★</div><div style="font-size:1.2rem;font-weight:700;margin:4px 0;color:var(--primary)">$12</div><div style="font-size:.75rem;color:var(--ink2)">Unlimited</div></div>
                  <div style="border:2px solid var(--divider);border-radius:8px;padding:12px;text-align:center"><div style="font-weight:700">Team</div><div style="font-size:1.2rem;font-weight:700;margin:4px 0">$49</div><div style="font-size:.75rem;color:var(--ink2)">20 seats</div></div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="md-09__vstep-item">
          <input class="md-09__vstep-in" type="radio" name="md09v" id="md09v3">
          <div class="md-09__vstep-left">
            <label class="md-09__vstep-circle" for="md09v3">3</label>
          </div>
          <div class="md-09__vstep-body">
            <div class="md-09__vstep-head">
              <label class="md-09__vstep-title" for="md09v3">Confirm &amp; Launch</label>
            </div>
            <div class="md-09__vstep-panel">
              <div class="md-09__vstep-panel-inner">
                <p>Review your selections and confirm. Your workspace will be ready in seconds.</p>
                <button class="md-09__btn md-09__btn--p" style="margin-top:12px">🚀 Create Account</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Checkout Stepper -->
    <div class="md-09__card" style="padding:0;overflow:hidden">
      <input class="md-09__checkout-in" type="radio" name="md09co" id="md09co1" checked>
      <input class="md-09__checkout-in" type="radio" name="md09co" id="md09co2">
      <input class="md-09__checkout-in" type="radio" name="md09co" id="md09co3">
      <div class="md-09__checkout-steps">
        <label class="md-09__checkout-step-lbl md-09__cslbl-1" for="md09co1">1 · Shipping</label>
        <label class="md-09__checkout-step-lbl md-09__cslbl-2" for="md09co2">2 · Payment</label>
        <label class="md-09__checkout-step-lbl md-09__cslbl-3" for="md09co3">3 · Review</label>
      </div>
      <div class="md-09__checkout-panels">
        <div class="md-09__checkout-panel md-09__cpanel-1">
          <div style="font-size:.95rem;font-weight:700;margin-bottom:16px">Shipping Address</div>
          <div class="md-09__field-row">
            <div class="md-09__field"><label>First Name</label><input type="text" placeholder="Alex"></div>
            <div class="md-09__field"><label>Last Name</label><input type="text" placeholder="Thompson"></div>
          </div>
          <div class="md-09__field"><label>Address Line 1</label><input type="text" placeholder="123 Main Street"></div>
          <div class="md-09__field-row">
            <div class="md-09__field"><label>City</label><input type="text" placeholder="San Francisco"></div>
            <div class="md-09__field"><label>ZIP</label><input type="text" placeholder="94102"></div>
          </div>
          <div style="text-align:right;margin-top:8px"><label class="md-09__btn md-09__btn--p" for="md09co2" style="cursor:pointer;display:inline-flex;align-items:center">Next: Payment →</label></div>
        </div>
        <div class="md-09__checkout-panel md-09__cpanel-2">
          <div style="font-size:.95rem;font-weight:700;margin-bottom:16px">Payment Details</div>
          <div class="md-09__field"><label>Card Number</label><input type="text" placeholder="4111 1111 1111 1111"></div>
          <div class="md-09__field-row">
            <div class="md-09__field"><label>Expiry</label><input type="text" placeholder="MM / YY"></div>
            <div class="md-09__field"><label>CVC</label><input type="text" placeholder="123"></div>
          </div>
          <div style="display:flex;justify-content:space-between;margin-top:8px">
            <label class="md-09__btn md-09__btn--ghost" for="md09co1" style="cursor:pointer;display:inline-flex;align-items:center">← Back</label>
            <label class="md-09__btn md-09__btn--p" for="md09co3" style="cursor:pointer;display:inline-flex;align-items:center">Next: Review →</label>
          </div>
        </div>
        <div class="md-09__checkout-panel md-09__cpanel-3">
          <div style="font-size:.95rem;font-weight:700;margin-bottom:16px">Order Review</div>
          <div style="background:#fff8f0;border-radius:8px;padding:16px;margin-bottom:16px;border:1px solid var(--divider)">
            <div style="display:flex;justify-content:space-between;font-size:.88rem;color:var(--ink2);margin-bottom:8px"><span>Aurora Pro (12 months)</span><span>$144.00</span></div>
            <div style="display:flex;justify-content:space-between;font-size:.88rem;color:var(--ink2);margin-bottom:8px"><span>Shipping</span><span>Free</span></div>
            <div style="height:1px;background:var(--divider);margin:8px 0"></div>
            <div style="display:flex;justify-content:space-between;font-weight:700;color:var(--primary)"><span>Total</span><span>$144.00</span></div>
          </div>
          <div style="display:flex;justify-content:space-between;margin-top:8px">
            <label class="md-09__btn md-09__btn--ghost" for="md09co2" style="cursor:pointer;display:inline-flex;align-items:center">← Back</label>
            <button class="md-09__btn md-09__btn--p">✓ Place Order</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.md-09,.md-09 *,.md-09 *::before,.md-09 *::after{box-sizing:border-box;margin:0;padding:0}
.md-09 ::selection{background:#e65100;color:#fff}
.md-09{
  --primary:#e65100;
  --primary-l:#ff8a65;
  --success:#2e7d32;
  --surface:#fff;
  --bg:#fff3e0;
  --ink:#212121;
  --ink2:#546e7a;
  --ink3:#90a4ae;
  --divider:#ffcc80;
  font-family:'Roboto',sans-serif;
  background:var(--bg);
  min-height:100vh;
  padding:48px 24px 80px;
  color:var(--ink);
}
.md-09__wrap{max-width:860px;margin:0 auto}
.md-09__page-title{font-size:clamp(1.4rem,4vw,2rem);font-weight:700;margin-bottom:4px}
.md-09__page-sub{font-size:.9rem;color:var(--ink2);margin-bottom:40px}
.md-09__card{background:var(--surface);border-radius:12px;padding:32px;margin-bottom:28px;box-shadow:0 1px 4px rgba(0,0,0,.1)}
.md-09__card-title{font-size:.7rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--ink2);margin-bottom:28px}

/* ── HORIZONTAL STEPPER ── */
.md-09__hstep{
  display:flex;align-items:flex-start;position:relative;
  margin-bottom:32px;
}
/* connector lines between steps */
.md-09__hstep-item{display:flex;flex-direction:column;align-items:center;flex:1;position:relative}
.md-09__hstep-item:not(:last-child)::after{
  content:'';position:absolute;
  top:20px;left:50%;right:-50%;
  height:2px;background:var(--divider);z-index:0;
}
.md-09__hstep-item--done:not(:last-child)::after{background:var(--success)}
.md-09__hstep-item--active:not(:last-child)::after{background:linear-gradient(to right,var(--primary),var(--divider))}

/* step circle */
.md-09__step-circle{
  width:40px;height:40px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:.9rem;font-weight:700;
  border:2px solid var(--divider);background:var(--surface);
  color:var(--ink3);position:relative;z-index:1;
  transition:all .25s;flex-shrink:0;
}
.md-09__hstep-item--done .md-09__step-circle{background:var(--success);border-color:var(--success);color:#fff}
.md-09__hstep-item--active .md-09__step-circle{background:var(--primary);border-color:var(--primary);color:#fff;box-shadow:0 0 0 4px rgba(230,81,0,.2)}
.md-09__hstep-item--error .md-09__step-circle{background:#c62828;border-color:#c62828;color:#fff}

.md-09__step-label{margin-top:10px;text-align:center;padding:0 4px}
.md-09__step-name{font-size:.8rem;font-weight:500;color:var(--ink);line-height:1.3}
.md-09__hstep-item--done .md-09__step-name{color:var(--success)}
.md-09__hstep-item--active .md-09__step-name{color:var(--primary);font-weight:700}
.md-09__hstep-item--error .md-09__step-name{color:#c62828}
.md-09__step-sub{font-size:.72rem;color:var(--ink3);margin-top:2px}

/* ── CONTENT PANEL ── */
.md-09__step-content{
  border:1px solid var(--divider);border-radius:8px;padding:24px;margin-bottom:20px;
  background:#fffef9;
}
.md-09__step-content-title{font-size:1rem;font-weight:700;margin-bottom:12px;color:var(--ink)}
.md-09__step-content-body{font-size:.9rem;line-height:1.7;color:var(--ink2)}
.md-09__step-actions{display:flex;gap:12px;justify-content:flex-end}
.md-09__btn{
  height:36px;padding:0 20px;border:none;border-radius:4px;cursor:pointer;
  font-family:'Roboto';font-size:.875rem;font-weight:500;letter-spacing:.089em;text-transform:uppercase;
  transition:box-shadow .15s;
}
.md-09__btn--p{background:var(--primary);color:#fff;box-shadow:0 2px 4px rgba(0,0,0,.2)}
.md-09__btn--p:hover{box-shadow:0 4px 8px rgba(0,0,0,.25)}
.md-09__btn--ghost{background:transparent;color:var(--primary);border:1px solid rgba(230,81,0,.4)}

/* ── VERTICAL STEPPER (checkbox-hack) ── */
.md-09__vstep{display:flex;flex-direction:column}
.md-09__vstep-in{display:none}
.md-09__vstep-item{display:flex;gap:0;position:relative}
.md-09__vstep-left{display:flex;flex-direction:column;align-items:center;width:48px;flex-shrink:0}
.md-09__vstep-circle{
  width:32px;height:32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:.8rem;font-weight:700;
  background:var(--surface);border:2px solid var(--divider);color:var(--ink3);
  flex-shrink:0;cursor:pointer;z-index:1;
  transition:all .2s;
}
.md-09__vstep-in:checked ~ .md-09__vstep-body .md-09__vstep-circle{background:var(--primary);border-color:var(--primary);color:#fff;box-shadow:0 0 0 3px rgba(230,81,0,.2)}
.md-09__vstep-connector{width:2px;flex:1;background:var(--divider);margin:4px 0;min-height:24px}
.md-09__vstep-body{flex:1;padding-bottom:24px}
.md-09__vstep-head{display:flex;align-items:center;gap:12px;min-height:32px}
.md-09__vstep-title{font-size:.95rem;font-weight:500;cursor:pointer;user-select:none;color:var(--ink2)}
.md-09__vstep-in:checked ~ .md-09__vstep-body .md-09__vstep-title{color:var(--primary);font-weight:700}
.md-09__vstep-panel{overflow:hidden;max-height:0;transition:max-height .3s ease}
.md-09__vstep-in:checked ~ .md-09__vstep-body .md-09__vstep-panel{max-height:400px}
.md-09__vstep-panel-inner{padding:12px 0;font-size:.88rem;color:var(--ink2);line-height:1.7}

/* ── LINEAR CHECKOUT STEPS (radio) ── */
.md-09__checkout{
  position:relative;overflow:hidden;
}
.md-09__checkout-in{display:none}
.md-09__checkout-steps{display:flex;background:var(--primary);padding:0 16px}
.md-09__checkout-step-lbl{
  flex:1;height:52px;display:flex;align-items:center;justify-content:center;gap:8px;
  font-size:.8rem;font-weight:500;letter-spacing:.05em;text-transform:uppercase;
  color:rgba(255,255,255,.6);cursor:pointer;position:relative;
  transition:color .2s;user-select:none;
}
.md-09__checkout-step-lbl::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:#fff;transform:scaleX(0);transition:transform .25s}
#md09co1:checked ~ .md-09__checkout-steps .md-09__cslbl-1,
#md09co2:checked ~ .md-09__checkout-steps .md-09__cslbl-2,
#md09co3:checked ~ .md-09__checkout-steps .md-09__cslbl-3{color:#fff}
#md09co1:checked ~ .md-09__checkout-steps .md-09__cslbl-1::after,
#md09co2:checked ~ .md-09__checkout-steps .md-09__cslbl-2::after,
#md09co3:checked ~ .md-09__checkout-steps .md-09__cslbl-3::after{transform:scaleX(1)}
.md-09__checkout-panels{padding:24px}
.md-09__checkout-panel{display:none}
#md09co1:checked ~ .md-09__checkout-panels .md-09__cpanel-1,
#md09co2:checked ~ .md-09__checkout-panels .md-09__cpanel-2,
#md09co3:checked ~ .md-09__checkout-panels .md-09__cpanel-3{display:block}
.md-09__field{margin-bottom:16px}
.md-09__field label{font-size:.78rem;color:var(--ink2);display:block;margin-bottom:4px}
.md-09__field input,.md-09__field select{width:100%;height:44px;padding:0 12px;border:1px solid var(--divider);border-radius:4px;font-family:'Roboto';font-size:.875rem;outline:none;transition:border-color .15s}
.md-09__field input:focus,.md-09__field select:focus{border-color:var(--primary)}
.md-09__field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}

@media(prefers-reduced-motion:reduce){.md-09 *{transition:none!important;animation:none!important}}
```

### 10. Material Design Tooltip CSS

**Type:** Pure CSS
**Description:** Plain and rich tooltips in four directions, linear progress (determinate and indeterminate), circular progress, notification badges, and page dot navigation — all pure CSS.

**HTML:**
```html
<div class="md-10">
  <div class="md-10__wrap">
    <div class="md-10__page-title">Material Design Tooltips &amp; Indicators</div>
    <div class="md-10__page-sub">Tooltips (all 4 positions + rich), progress bars, circular indicators and badge components — pure CSS</div>

    <!-- Tooltips -->
    <div class="md-10__section">
      <div class="md-10__section-title">Tooltips — Hover to See</div>
      <div style="display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:center;padding:24px 0">
        <div class="md-10__tooltip-wrap">
          <button class="md-10__icon-btn">✏</button>
          <div class="md-10__tooltip md-10__tooltip--top">Edit item</div>
        </div>
        <div class="md-10__tooltip-wrap">
          <button class="md-10__icon-btn" style="background:#c62828">🗑</button>
          <div class="md-10__tooltip md-10__tooltip--bottom">Delete permanently</div>
        </div>
        <div class="md-10__tooltip-wrap">
          <button class="md-10__icon-btn" style="background:#7b1fa2">↗</button>
          <div class="md-10__tooltip md-10__tooltip--right">Share with team</div>
        </div>
        <div class="md-10__tooltip-wrap">
          <button class="md-10__icon-btn" style="background:#1565c0">⚙</button>
          <div class="md-10__tooltip md-10__tooltip--left">Open settings</div>
        </div>
        <div class="md-10__tooltip-wrap">
          <button class="md-10__text-btn">Format options</button>
          <div class="md-10__tooltip md-10__tooltip--top">Bold, italic, underline, strikethrough</div>
        </div>
        <div class="md-10__tooltip-wrap">
          <button class="md-10__badge-btn">Keyboard shortcuts</button>
          <div class="md-10__tooltip md-10__tooltip--top" style="max-width:220px;white-space:normal">Press ⌘K to open the command palette, ⌘S to save, ⌘Z to undo.</div>
        </div>
      </div>
    </div>

    <!-- Rich Tooltip -->
    <div class="md-10__section">
      <div class="md-10__section-title">Rich Tooltip (Hover)</div>
      <div style="display:flex;gap:24px;flex-wrap:wrap;align-items:center;justify-content:center;padding:24px 0">
        <div class="md-10__tooltip-wrap">
          <button class="md-10__icon-btn" style="background:#ff8f00">★</button>
          <div class="md-10__tooltip md-10__tooltip--top md-10__tooltip--rich" style="bottom:calc(100% + 12px);min-width:240px">
            <div class="md-10__tt-title">Add to favourites</div>
            <div class="md-10__tt-body">Save this item to your favourites list to access it quickly from the sidebar.</div>
            <div class="md-10__tt-actions">
              <button class="md-10__tt-btn">Learn more</button>
              <button class="md-10__tt-btn" style="margin-left:auto">Got it</button>
            </div>
          </div>
        </div>
        <div class="md-10__tooltip-wrap">
          <button class="md-10__text-btn">Privacy settings ℹ</button>
          <div class="md-10__tooltip md-10__tooltip--right md-10__tooltip--rich" style="left:calc(100% + 12px)">
            <div class="md-10__tt-title">Privacy controls</div>
            <div class="md-10__tt-body">Control who can see your profile and how your data is shared. Settings apply immediately.</div>
            <div class="md-10__tt-actions">
              <button class="md-10__tt-btn">Open settings</button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Linear Progress -->
    <div class="md-10__section">
      <div class="md-10__section-title">Linear Progress Indicators</div>
      <div class="md-10__progress-row">
        <div>
          <div class="md-10__progress-label"><span>Storage used</span><span>72%</span></div>
          <div class="md-10__progress-track"><div class="md-10__progress-fill" style="width:72%"></div></div>
        </div>
        <div>
          <div class="md-10__progress-label"><span>Upload complete</span><span>45%</span></div>
          <div class="md-10__progress-track" style="height:8px;border-radius:4px"><div class="md-10__progress-fill" style="width:45%;background:#1565c0"></div></div>
        </div>
        <div>
          <div class="md-10__progress-label"><span>Confidence score</span><span>94%</span></div>
          <div class="md-10__progress-track" style="height:6px;background:#c8e6c9"><div class="md-10__progress-fill" style="width:94%;background:#2e7d32"></div></div>
        </div>
        <div>
          <div class="md-10__progress-label"><span>Loading data…</span><span>Indeterminate</span></div>
          <div class="md-10__progress-track" style="overflow:hidden;position:relative"><div class="md-10__progress-fill md-10__progress-fill--indeterminate" style="position:absolute"></div></div>
        </div>
      </div>
    </div>

    <!-- Circular Progress -->
    <div class="md-10__section">
      <div class="md-10__section-title">Circular Progress Indicators</div>
      <div class="md-10__circular-row">
        <div style="text-align:center">
          <div class="md-10__circular">
            <svg viewBox="0 0 64 64"><circle class="md-10__circular-track" cx="32" cy="32" r="28"/><circle class="md-10__circular-fill" cx="32" cy="32" r="28" stroke-dasharray="131" stroke-dashoffset="33" style="stroke:var(--primary)"/></svg>
            <div class="md-10__circular-val">75%</div>
          </div>
          <div style="font-size:.75rem;color:var(--ink2);margin-top:6px">Progress</div>
        </div>
        <div style="text-align:center">
          <div class="md-10__circular">
            <svg viewBox="0 0 64 64"><circle class="md-10__circular-track" cx="32" cy="32" r="28"/><circle class="md-10__circular-fill" cx="32" cy="32" r="28" stroke-dasharray="131" stroke-dashoffset="72" style="stroke:#2e7d32"/></svg>
            <div class="md-10__circular-val" style="color:#2e7d32">45%</div>
          </div>
          <div style="font-size:.75rem;color:var(--ink2);margin-top:6px">Budget</div>
        </div>
        <div style="text-align:center">
          <div class="md-10__circular">
            <svg viewBox="0 0 64 64"><circle class="md-10__circular-track" cx="32" cy="32" r="28"/><circle class="md-10__circular-fill" cx="32" cy="32" r="28" stroke-dasharray="131" stroke-dashoffset="13" style="stroke:#e65100"/></svg>
            <div class="md-10__circular-val" style="color:#e65100">90%</div>
          </div>
          <div style="font-size:.75rem;color:var(--ink2);margin-top:6px">Capacity</div>
        </div>
        <div style="text-align:center">
          <div class="md-10__circular md-10__circular--spin">
            <svg viewBox="0 0 64 64"><circle class="md-10__circular-track" cx="32" cy="32" r="28"/><circle class="md-10__circular-fill" cx="32" cy="32" r="28" style="stroke:var(--primary)"/></svg>
          </div>
          <div style="font-size:.75rem;color:var(--ink2);margin-top:6px">Loading…</div>
        </div>
        <div style="text-align:center">
          <div class="md-10__circular md-10__circular--spin">
            <svg viewBox="0 0 64 64"><circle class="md-10__circular-track" cx="32" cy="32" r="28" style="stroke:#fce4ec"/><circle class="md-10__circular-fill" cx="32" cy="32" r="28" style="stroke:#e91e63"/></svg>
          </div>
          <div style="font-size:.75rem;color:var(--ink2);margin-top:6px">Syncing</div>
        </div>
      </div>
    </div>

    <!-- Badges -->
    <div class="md-10__section">
      <div class="md-10__section-title">Badges</div>
      <div class="md-10__badge-demo-row">
        <div class="md-10__badge-wrap">
          <button class="md-10__icon-btn" style="background:#455a64">🔔</button>
          <div class="md-10__badge">3</div>
        </div>
        <div class="md-10__badge-wrap">
          <button class="md-10__icon-btn" style="background:#455a64">📧</button>
          <div class="md-10__badge">99+</div>
        </div>
        <div class="md-10__badge-wrap">
          <button class="md-10__icon-btn" style="background:#455a64">⚙</button>
          <div class="md-10__badge md-10__badge--dot"></div>
        </div>
        <div class="md-10__badge-wrap">
          <button class="md-10__text-btn">Inbox</button>
          <div class="md-10__badge md-10__badge--large" style="top:-8px;right:-8px">New</div>
        </div>
        <div class="md-10__badge-wrap">
          <button class="md-10__text-btn">Messages</button>
          <div class="md-10__badge" style="top:-6px;right:-6px;background:#2e7d32">12</div>
        </div>
      </div>

      <!-- Page indicator dots -->
      <div style="margin-top:28px">
        <div style="font-size:.78rem;color:var(--ink2);margin-bottom:12px">Page Indicator Dots</div>
        <div class="md-10__dots-row">
          <div class="md-10__dot"></div>
          <div class="md-10__dot md-10__dot--active"></div>
          <div class="md-10__dot"></div>
          <div class="md-10__dot"></div>
          <div class="md-10__dot"></div>
        </div>
      </div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.md-10,.md-10 *,.md-10 *::before,.md-10 *::after{box-sizing:border-box;margin:0;padding:0}
.md-10 ::selection{background:#00695c;color:#fff}
.md-10{
  --primary:#00695c;
  --primary-l:#4db6ac;
  --secondary:#f57c00;
  --surface:#fff;
  --bg:#e0f2f1;
  --ink:#212121;
  --ink2:#546e7a;
  --ink3:#90a4ae;
  --divider:#b2dfdb;
  font-family:'Roboto',sans-serif;
  background:var(--bg);
  min-height:100vh;
  padding:48px 24px 80px;
  color:var(--ink);
}
.md-10__wrap{max-width:900px;margin:0 auto}
.md-10__page-title{font-size:clamp(1.4rem,4vw,2rem);font-weight:700;margin-bottom:4px}
.md-10__page-sub{font-size:.9rem;color:var(--ink2);margin-bottom:40px}
.md-10__section{background:var(--surface);border-radius:12px;padding:32px;margin-bottom:24px;box-shadow:0 1px 4px rgba(0,0,0,.1)}
.md-10__section-title{font-size:.7rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--ink2);margin-bottom:24px;display:flex;align-items:center;gap:10px}
.md-10__section-title::after{content:'';flex:1;height:1px;background:var(--divider)}

/* ── TOOLTIP ── */
.md-10__tooltip-wrap{position:relative;display:inline-flex}
.md-10__tooltip{
  position:absolute;z-index:10;
  background:#212121;color:#fff;
  font-size:.75rem;font-weight:400;line-height:1.4;
  padding:6px 10px;border-radius:4px;
  white-space:nowrap;max-width:240px;white-space:normal;
  pointer-events:none;
  opacity:0;transition:opacity .15s .1s,transform .15s .1s;
}
/* Arrow */
.md-10__tooltip::before{content:'';position:absolute;width:0;height:0}

/* Top tooltip */
.md-10__tooltip--top{bottom:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(4px)}
.md-10__tooltip--top::before{top:100%;left:50%;transform:translateX(-50%);border:5px solid transparent;border-top-color:#212121}
.md-10__tooltip-wrap:hover .md-10__tooltip--top{opacity:1;transform:translateX(-50%) translateY(0)}

/* Bottom tooltip */
.md-10__tooltip--bottom{top:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(-4px)}
.md-10__tooltip--bottom::before{bottom:100%;left:50%;transform:translateX(-50%);border:5px solid transparent;border-bottom-color:#212121}
.md-10__tooltip-wrap:hover .md-10__tooltip--bottom{opacity:1;transform:translateX(-50%) translateY(0)}

/* Left tooltip */
.md-10__tooltip--left{right:calc(100% + 8px);top:50%;transform:translateY(-50%) translateX(4px)}
.md-10__tooltip--left::before{left:100%;top:50%;transform:translateY(-50%);border:5px solid transparent;border-left-color:#212121}
.md-10__tooltip-wrap:hover .md-10__tooltip--left{opacity:1;transform:translateY(-50%) translateX(0)}

/* Right tooltip */
.md-10__tooltip--right{left:calc(100% + 8px);top:50%;transform:translateY(-50%) translateX(-4px)}
.md-10__tooltip--right::before{right:100%;top:50%;transform:translateY(-50%);border:5px solid transparent;border-right-color:#212121}
.md-10__tooltip-wrap:hover .md-10__tooltip--right{opacity:1;transform:translateY(-50%) translateX(0)}

/* Rich tooltip */
.md-10__tooltip--rich{
  background:var(--surface);color:var(--ink);
  max-width:280px;padding:12px 16px;
  box-shadow:0 2px 12px rgba(0,0,0,.2);
  border-radius:8px;white-space:normal;
}
.md-10__tooltip--rich::before{display:none}
.md-10__tooltip--rich .md-10__tt-title{font-size:.875rem;font-weight:700;margin-bottom:4px;color:var(--ink)}
.md-10__tooltip--rich .md-10__tt-body{font-size:.8rem;line-height:1.5;color:var(--ink2)}
.md-10__tooltip--rich .md-10__tt-actions{display:flex;gap:8px;margin-top:8px;padding-top:8px;border-top:1px solid var(--divider)}
.md-10__tooltip--rich .md-10__tt-btn{background:none;border:none;color:var(--primary);font-family:'Roboto';font-size:.78rem;font-weight:500;cursor:pointer;text-transform:uppercase;letter-spacing:.05em;padding:0}

/* ── TRIGGER BUTTONS ── */
.md-10__icon-btn{
  width:44px;height:44px;border-radius:50%;border:none;cursor:pointer;
  background:var(--primary);color:#fff;font-size:1.2rem;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 6px rgba(0,0,0,.2);transition:box-shadow .2s;
}
.md-10__icon-btn:hover{box-shadow:0 4px 12px rgba(0,0,0,.25)}
.md-10__text-btn{
  height:36px;padding:0 16px;border:1px solid var(--divider);border-radius:4px;
  background:var(--surface);font-family:'Roboto';font-size:.875rem;cursor:pointer;color:var(--ink);
}
.md-10__badge-btn{
  background:var(--primary);color:#fff;border:none;border-radius:4px;padding:10px 16px;
  font-family:'Roboto';font-size:.875rem;font-weight:500;cursor:pointer;
}

/* ── PROGRESS INDICATORS ── */
.md-10__progress-row{display:flex;flex-direction:column;gap:20px}
.md-10__progress-label{font-size:.8rem;color:var(--ink2);margin-bottom:6px;display:flex;justify-content:space-between}
.md-10__progress-track{height:4px;background:#b2dfdb;border-radius:2px;overflow:hidden;position:relative}
.md-10__progress-fill{height:100%;background:var(--primary);border-radius:2px;position:relative}
/* Indeterminate bar */
.md-10__progress-fill--indeterminate{
  width:30%;
  animation:md10-indeterminate 2s linear infinite;
}
@keyframes md10-indeterminate{
  0%{left:-30%;width:30%}
  60%{left:60%;width:50%}
  100%{left:110%;width:30%}
}
/* Circular progress */
.md-10__circular-row{display:flex;gap:28px;flex-wrap:wrap;align-items:center;justify-content:center}
.md-10__circular{position:relative;width:64px;height:64px;flex-shrink:0}
.md-10__circular svg{transform:rotate(-90deg);width:64px;height:64px}
.md-10__circular-track{fill:none;stroke:#b2dfdb;stroke-width:4}
.md-10__circular-fill{fill:none;stroke:var(--primary);stroke-width:4;stroke-linecap:round;transition:stroke-dashoffset .5s ease}
.md-10__circular-val{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:700;color:var(--primary)}
/* Indeterminate circle */
.md-10__circular--spin .md-10__circular-fill{
  stroke-dasharray:160 200;
  animation:md10-cspin 1.4s linear infinite;
}
@keyframes md10-cspin{0%{stroke-dashoffset:0;transform:none}100%{stroke-dashoffset:-320;transform:none}}
.md-10__circular--spin svg{animation:md10-svg-spin 1.4s linear infinite}
@keyframes md10-svg-spin{0%{transform:rotate(-90deg)}100%{transform:rotate(270deg)}}

/* ── BADGE ── */
.md-10__badge-wrap{position:relative;display:inline-flex}
.md-10__badge{
  position:absolute;top:-4px;right:-4px;
  background:var(--secondary);color:#fff;
  font-size:.65rem;font-weight:700;
  padding:2px 6px;border-radius:10px;
  border:2px solid var(--surface);
  line-height:1.4;white-space:nowrap;
  min-width:20px;text-align:center;
}
.md-10__badge--dot{width:10px;height:10px;min-width:0;padding:0;top:-2px;right:-2px}
.md-10__badge--large{font-size:.75rem;padding:3px 8px;border-radius:12px}

.md-10__badge-demo-row{display:flex;gap:24px;flex-wrap:wrap;align-items:center}

/* ── PROGRESS OVERFLOW DOTS ── */
.md-10__dots-row{display:flex;gap:4px;align-items:center;justify-content:center;padding:8px 0}
.md-10__dot{width:8px;height:8px;border-radius:50%;background:var(--divider);transition:all .2s}
.md-10__dot--active{background:var(--primary);width:24px;border-radius:4px}

@media(prefers-reduced-motion:reduce){.md-10 *{animation:none!important;transition:none!important}}
```

### 11. Material Design Expansion Panel CSS

**Type:** Pure CSS
**Description:** Standard accordion, icon-leading accordion with inline forms, and FAQ-style fully-rounded panels — interactive via the CSS checkbox-hack, zero JavaScript.

**HTML:**
```html
<div class="md-11">

  <!-- Section 1: Standard accordion -->
  <h3>Standard Accordion</h3>
  <div class="accordion">

    <div class="acc-panel">
      <input class="acc-toggle" type="checkbox" id="a1">
      <label class="acc-header" for="a1">
        <span class="acc-title">Personal Information</span>
        <span class="acc-chevron"></span>
      </label>
      <div class="acc-body">
        <div class="acc-content">
          <p>Manage your name, email address, phone number, and other personal details associated with your account.</p>
          <p>Changes to personal information may require verification before taking effect.</p>
        </div>
        <div class="acc-actions">
          <button class="acc-btn">Cancel</button>
          <button class="acc-btn acc-btn--filled">Save</button>
        </div>
      </div>
    </div>

    <div class="acc-panel">
      <input class="acc-toggle" type="checkbox" id="a2" checked>
      <label class="acc-header" for="a2">
        <span class="acc-title">Billing &amp; Payment</span>
        <span class="acc-meta">Visa ···4242</span>
        <span class="acc-chevron"></span>
      </label>
      <div class="acc-body">
        <div class="acc-content">
          <p>Your current payment method is a Visa card ending in 4242, expiring 08/2027.</p>
          <p>You can add, remove, or update payment methods at any time. Changes will apply to all future charges.</p>
        </div>
        <div class="acc-actions">
          <button class="acc-btn">Add Method</button>
          <button class="acc-btn acc-btn--filled">Update</button>
        </div>
      </div>
    </div>

    <div class="acc-panel">
      <input class="acc-toggle" type="checkbox" id="a3">
      <label class="acc-header" for="a3">
        <span class="acc-title">Notifications</span>
        <span class="acc-chevron"></span>
      </label>
      <div class="acc-body">
        <div class="acc-content">
          <p>Configure how and when you receive notifications — by email, push, or SMS. You can fine-tune per-category preferences.</p>
        </div>
      </div>
    </div>

    <div class="acc-panel">
      <input class="acc-toggle" type="checkbox" id="a4">
      <label class="acc-header" for="a4">
        <span class="acc-title">Privacy &amp; Security</span>
        <span class="acc-chevron"></span>
      </label>
      <div class="acc-body">
        <div class="acc-content">
          <p>Review app permissions, manage connected accounts, set two-factor authentication, and download your data.</p>
        </div>
      </div>
    </div>

  </div>

  <!-- Section 2: With icons -->
  <h3>With Leading Icons</h3>
  <div class="accordion accordion--gap">

    <div class="acc-panel">
      <input class="acc-toggle" type="checkbox" id="b1">
      <label class="acc-header" for="b1">
        <span class="acc-icon-wrap">
          <svg viewBox="0 0 24 24"><path d="M12 12c2.7 0 4.8-2.1 4.8-4.8S14.7 2.4 12 2.4 7.2 4.5 7.2 7.2 9.3 12 12 12zm0 2.4c-3.2 0-9.6 1.6-9.6 4.8v2.4h19.2v-2.4c0-3.2-6.4-4.8-9.6-4.8z"/></svg>
        </span>
        <div>
          <div class="acc-title">Account Settings</div>
          <div class="acc-subtitle">Profile, avatar, username</div>
        </div>
        <span class="acc-chevron"></span>
      </label>
      <div class="acc-body">
        <div class="acc-form">
          <div class="field-row">
            <div class="field">
              <label>First name</label>
              <input type="text" value="Jordan">
            </div>
            <div class="field">
              <label>Last name</label>
              <input type="text" value="Smith">
            </div>
          </div>
          <div class="field">
            <label>Username</label>
            <input type="text" value="@jordan.smith">
          </div>
        </div>
        <div class="acc-actions">
          <button class="acc-btn acc-btn--filled">Update Profile</button>
        </div>
      </div>
    </div>

    <div class="acc-panel">
      <input class="acc-toggle" type="checkbox" id="b2">
      <label class="acc-header" for="b2">
        <span class="acc-icon-wrap">
          <svg viewBox="0 0 24 24"><path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z"/></svg>
        </span>
        <div>
          <div class="acc-title">Security</div>
          <div class="acc-subtitle">Password, 2FA, sessions</div>
        </div>
        <span class="acc-chevron"></span>
      </label>
      <div class="acc-body">
        <div class="acc-content">
          <p>Last password change: 3 months ago. Two-factor authentication is currently <strong>disabled</strong>. We strongly recommend enabling it for your security.</p>
        </div>
        <div class="acc-actions">
          <button class="acc-btn">Change Password</button>
          <button class="acc-btn acc-btn--filled">Enable 2FA</button>
        </div>
      </div>
    </div>

    <div class="acc-panel">
      <input class="acc-toggle" type="checkbox" id="b3">
      <label class="acc-header" for="b3">
        <span class="acc-icon-wrap">
          <svg viewBox="0 0 24 24"><path d="M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/></svg>
        </span>
        <div>
          <div class="acc-title">Notifications</div>
          <div class="acc-subtitle">Email, push, frequency</div>
        </div>
        <span class="acc-chevron"></span>
      </label>
      <div class="acc-body">
        <div class="acc-content">
          <p>You're subscribed to weekly digests, product updates, and security alerts. Marketing emails are currently off.</p>
        </div>
        <div class="acc-actions">
          <button class="acc-btn acc-btn--filled">Manage</button>
        </div>
      </div>
    </div>

  </div>

  <!-- Section 3: FAQ style -->
  <h3>FAQ Style</h3>
  <div class="accordion accordion--gap">

    <div class="acc-panel acc-panel--rounded">
      <input class="acc-toggle" type="checkbox" id="c1">
      <label class="acc-header" for="c1">
        <span class="acc-title">How does billing work?</span>
        <span class="acc-chevron"></span>
      </label>
      <div class="acc-body">
        <div class="acc-content">
          You are billed monthly on the date you subscribed. Upgrades are prorated and applied immediately; downgrades take effect at the next billing cycle.
        </div>
      </div>
    </div>

    <div class="acc-panel acc-panel--rounded">
      <input class="acc-toggle" type="checkbox" id="c2">
      <label class="acc-header" for="c2">
        <span class="acc-title">Can I cancel at any time?</span>
        <span class="acc-chevron"></span>
      </label>
      <div class="acc-body">
        <div class="acc-content">
          Yes. You can cancel your subscription from the Account settings page. You'll retain access until the end of your current billing period — no partial refunds are issued.
        </div>
      </div>
    </div>

    <div class="acc-panel acc-panel--rounded">
      <input class="acc-toggle" type="checkbox" id="c3">
      <label class="acc-header" for="c3">
        <span class="acc-title">Is my data secure?</span>
        <span class="acc-chevron"></span>
      </label>
      <div class="acc-body">
        <div class="acc-content">
          All data is encrypted at rest (AES-256) and in transit (TLS 1.3). We are SOC 2 Type II certified and undergo annual penetration testing.
        </div>
      </div>
    </div>

    <div class="acc-panel acc-panel--rounded">
      <input class="acc-toggle" type="checkbox" id="c4">
      <label class="acc-header" for="c4">
        <span class="acc-title">Do you offer a free trial?</span>
        <span class="acc-chevron"></span>
      </label>
      <div class="acc-body">
        <div class="acc-content">
          We offer a 14-day free trial on all paid plans. No credit card is required to start — you'll only be charged if you choose to continue after the trial ends.
        </div>
      </div>
    </div>

  </div>

</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');

.md-11 {
  --primary: #5c6bc0;
  --primary-dark: #3949ab;
  --primary-light: #e8eaf6;
  --on-surface: #1c1b1f;
  --surface: #fffbfe;
  --surface-variant: #e7e0ec;
  --outline: #79747e;
  --outline-variant: #cac4d0;
  --error: #b3261e;
  all: unset;
  display: block;
  font-family: 'Roboto', sans-serif;
  background: #f3f3f7;
  padding: 32px 24px;
  box-sizing: border-box;
  color: var(--on-surface);
}
.md-11 *, .md-11 *::before, .md-11 *::after { box-sizing: border-box; margin: 0; padding: 0; }

.md-11 h3 {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--outline);
  margin-bottom: 12px;
  margin-top: 32px;
}
.md-11 h3:first-child { margin-top: 0; }

/* ── Accordion container ── */
.md-11 .accordion { display: flex; flex-direction: column; gap: 0; }
.md-11 .accordion--gap { gap: 8px; }

/* Hide real checkbox */
.md-11 .acc-toggle { display: none; }

/* Panel wrapper */
.md-11 .acc-panel {
  background: var(--surface);
  border: 1px solid var(--outline-variant);
  border-radius: 0;
  overflow: hidden;
  transition: box-shadow 200ms ease;
}
.md-11 .accordion .acc-panel:first-of-type { border-radius: 4px 4px 0 0; }
.md-11 .accordion .acc-panel:last-of-type { border-radius: 0 0 4px 4px; }
.md-11 .accordion .acc-panel:not(:first-of-type) { border-top: none; }
.md-11 .accordion--gap .acc-panel { border-radius: 12px !important; border: 1px solid var(--outline-variant); }

/* Expanded panel gets elevation */
.md-11 .acc-toggle:checked ~ .acc-panel,
.md-11 .acc-panel:has(.acc-toggle:checked) { box-shadow: 0 2px 8px rgba(0,0,0,.15); z-index: 1; position: relative; }

/* Header / label */
.md-11 .acc-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 24px;
  min-height: 56px;
  cursor: pointer;
  user-select: none;
  position: relative;
  transition: background 150ms ease;
}
.md-11 .acc-header:hover { background: rgba(0,0,0,.04); }
.md-11 .acc-header:active { background: rgba(0,0,0,.08); }

.md-11 .acc-title {
  flex: 1;
  font-size: 15px;
  font-weight: 500;
  color: var(--on-surface);
  line-height: 1.4;
}
.md-11 .acc-subtitle {
  font-size: 12px;
  font-weight: 400;
  color: var(--outline);
  margin-top: 1px;
}
.md-11 .acc-meta {
  font-size: 13px;
  color: var(--outline);
  white-space: nowrap;
}
.md-11 .acc-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  fill: var(--primary);
}

/* Chevron arrow */
.md-11 .acc-chevron {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 250ms cubic-bezier(.4,0,.2,1);
  color: var(--outline);
}
.md-11 .acc-chevron::before {
  content: '';
  display: block;
  width: 10px;
  height: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px,-2px);
  transition: transform 250ms cubic-bezier(.4,0,.2,1);
}

/* When checked: rotate chevron */
.md-11 .acc-toggle:checked + .acc-header .acc-chevron::before {
  transform: rotate(-135deg) translate(-2px,-2px);
}
/* For nested structure */
.md-11 .acc-panel:has(> .acc-toggle:checked) .acc-chevron::before {
  transform: rotate(-135deg) translate(-2px,-2px);
}

/* Collapsed content: height 0, no border */
.md-11 .acc-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 300ms cubic-bezier(.4,0,.2,1);
}
.md-11 .acc-toggle:checked ~ .acc-body,
.md-11 .acc-panel:has(> .acc-toggle:checked) > .acc-body {
  max-height: 600px;
}

.md-11 .acc-content {
  padding: 8px 24px 20px;
  border-top: 1px solid var(--outline-variant);
  font-size: 14px;
  line-height: 1.6;
  color: #49454f;
}
.md-11 .acc-content p { margin-bottom: 8px; }
.md-11 .acc-content p:last-child { margin-bottom: 0; }

/* Actions row inside panel */
.md-11 .acc-actions {
  display: flex;
  gap: 8px;
  padding: 12px 16px 4px;
  justify-content: flex-end;
}
.md-11 .acc-btn {
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .3px;
  cursor: pointer;
  border: none;
  background: transparent;
  color: var(--primary);
  transition: background 150ms;
}
.md-11 .acc-btn:hover { background: var(--primary-light); }
.md-11 .acc-btn--filled { background: var(--primary); color: #fff; }
.md-11 .acc-btn--filled:hover { background: var(--primary-dark); }

/* ── Variant: Filled / tonal ── */
.md-11 .acc-panel--tonal { background: var(--primary-light); border-color: transparent; }
.md-11 .acc-panel--tonal .acc-content { background: #fff; border-top-color: var(--outline-variant); }

/* ── Variant: Outlined rounded ── */
.md-11 .acc-panel--rounded { border-radius: 28px !important; overflow: hidden; }
.md-11 .acc-panel--rounded .acc-header { padding: 0 20px; min-height: 52px; }

/* ── Icon list variant ── */
.md-11 .acc-icon-wrap {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--primary-light);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.md-11 .acc-icon-wrap svg { width: 18px; height: 18px; fill: var(--primary); }

/* ── Form inside panel ── */
.md-11 .acc-form { display: flex; flex-direction: column; gap: 16px; padding: 16px 24px 20px; border-top: 1px solid var(--outline-variant); }
.md-11 .field { display: flex; flex-direction: column; gap: 4px; }
.md-11 .field label { font-size: 12px; color: var(--outline); font-weight: 500; }
.md-11 .field input, .md-11 .field select {
  border: 1px solid var(--outline-variant);
  border-radius: 4px;
  padding: 10px 12px;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color 150ms;
  background: var(--surface);
}
.md-11 .field input:focus, .md-11 .field select:focus { border-color: var(--primary); }
.md-11 .field-row { display: flex; gap: 12px; }
.md-11 .field-row .field { flex: 1; }
@media (prefers-reduced-motion: reduce) {
    .md-11 .acc-body,
    .md-11 .acc-chevron::before,
    .md-11 .acc-header,
    .md-11 .acc-btn { transition: none !important; }
  }
```

### 12. Material Design List CSS

**Type:** Pure CSS
**Description:** Single-line, two-line with avatars, three-line with thumbnails, icon lists with subheaders and dividers, checkbox lists, and action-button rows — complete Material Design 3 list system.

**HTML:**
```html
<div class="md-12">

  <!-- Single-line list -->
  <h3>Single-Line</h3>
  <div class="list-card">
    <div class="list-item">
      <div class="item-text"><div class="item-primary">Inbox</div></div>
      <div class="item-trailing"><div class="item-badge">12</div></div>
    </div>
    <div class="list-item">
      <div class="item-text"><div class="item-primary">Starred</div></div>
      <div class="item-trailing item-chevron">›</div>
    </div>
    <div class="list-item">
      <div class="item-text"><div class="item-primary">Sent</div></div>
    </div>
    <div class="list-item">
      <div class="item-text"><div class="item-primary">Drafts</div></div>
      <div class="item-trailing"><div class="item-badge">3</div></div>
    </div>
    <div class="list-item">
      <div class="item-text"><div class="item-primary">Trash</div></div>
    </div>
  </div>

  <!-- Two-line with avatars -->
  <h3>Two-Line with Avatars</h3>
  <div class="list-card">
    <div class="list-item list-item--two">
      <div class="item-avatar">J</div>
      <div class="item-text">
        <div class="item-primary">Jamie Lee</div>
        <div class="item-secondary">Hey! Are you free this weekend?</div>
      </div>
      <div class="item-trailing item-meta">2m</div>
    </div>
    <div class="list-item list-item--two">
      <div class="item-avatar" data-color="teal">A</div>
      <div class="item-text">
        <div class="item-primary">Alex Kim</div>
        <div class="item-secondary">The designs look great, nice work!</div>
      </div>
      <div class="item-trailing item-meta">1h</div>
    </div>
    <div class="list-item list-item--two">
      <div class="item-avatar" data-color="orange">M</div>
      <div class="item-text">
        <div class="item-primary">Morgan Blake</div>
        <div class="item-secondary">Can we reschedule the meeting?</div>
      </div>
      <div class="item-trailing item-meta">3h</div>
    </div>
    <div class="list-item list-item--two">
      <div class="item-avatar" data-color="purple">S</div>
      <div class="item-text">
        <div class="item-primary">Sam Rivera</div>
        <div class="item-secondary">Just sent over the report</div>
      </div>
      <div class="item-trailing item-meta">9h</div>
    </div>
    <div class="list-item list-item--two">
      <div class="item-avatar" data-color="red">T</div>
      <div class="item-text">
        <div class="item-primary">Taylor Brooks</div>
        <div class="item-secondary">Thanks for the introduction!</div>
      </div>
      <div class="item-trailing item-meta">1d</div>
    </div>
  </div>

  <!-- Three-line with image thumbnails -->
  <h3>Three-Line with Thumbnails</h3>
  <div class="list-card">
    <div class="list-item list-item--three">
      <div class="item-image">
        <svg viewBox="0 0 24 24"><path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/></svg>
      </div>
      <div class="item-text">
        <div class="item-primary">Summer Retreat 2024</div>
        <div class="item-secondary">Album · 48 photos</div>
        <div class="item-tertiary">Mountain views, campfire nights, and hiking trails across the national park.</div>
      </div>
    </div>
    <div class="list-item list-item--three">
      <div class="item-image">
        <svg viewBox="0 0 24 24"><path d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z"/></svg>
      </div>
      <div class="item-text">
        <div class="item-primary">Late Night Mix</div>
        <div class="item-secondary">Playlist · 22 tracks</div>
        <div class="item-tertiary">Chill ambient and lo-fi beats for focused late-night work sessions.</div>
      </div>
    </div>
    <div class="list-item list-item--three">
      <div class="item-image">
        <svg viewBox="0 0 24 24"><path d="M18 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM6 4h5v8l-2.5-1.5L6 12V4z"/></svg>
      </div>
      <div class="item-text">
        <div class="item-primary">Deep Work</div>
        <div class="item-secondary">Book · Cal Newport</div>
        <div class="item-tertiary">Rules for focused success in a distracted world — a must-read for knowledge workers.</div>
      </div>
    </div>
  </div>

  <!-- With icons + subheaders + dividers -->
  <h3>With Icons &amp; Subheaders</h3>
  <div class="list-card">
    <div class="list-subheader">General</div>
    <div class="list-item">
      <div class="item-icon"><svg viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg></div>
      <div class="item-text"><div class="item-primary">Account</div></div>
      <div class="item-trailing item-chevron">›</div>
    </div>
    <div class="list-item">
      <div class="item-icon"><svg viewBox="0 0 24 24"><path d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z"/></svg></div>
      <div class="item-text"><div class="item-primary">Notifications</div></div>
      <div class="item-trailing"><div class="item-switch item-switch--on"></div></div>
    </div>
    <div class="list-divider"></div>
    <div class="list-subheader">Display</div>
    <div class="list-item">
      <div class="item-icon"><svg viewBox="0 0 24 24"><path d="M20 8.69V4h-4.69L12 .69 8.69 4H4v4.69L.69 12 4 15.31V20h4.69L12 23.31 15.31 20H20v-4.69L23.31 12 20 8.69zM12 18c-3.31 0-6-2.69-6-6s2.69-6 6-6 6 2.69 6 6-2.69 6-6 6zm0-10c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4z"/></svg></div>
      <div class="item-text">
        <div class="item-primary">Dark Theme</div>
        <div class="item-secondary">Currently off</div>
      </div>
      <div class="item-trailing"><div class="item-switch"></div></div>
    </div>
    <div class="list-item">
      <div class="item-icon"><svg viewBox="0 0 24 24"><path d="M12 8c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm8.94 3c-.46-4.17-3.77-7.48-7.94-7.94V1h-2v2.06C6.83 3.52 3.52 6.83 3.06 11H1v2h2.06c.46 4.17 3.77 7.48 7.94 7.94V23h2v-2.06c4.17-.46 7.48-3.77 7.94-7.94H23v-2h-2.06z"/></svg></div>
      <div class="item-text"><div class="item-primary">Language &amp; Region</div></div>
      <div class="item-trailing item-chevron">›</div>
    </div>
  </div>

  <!-- Checkbox list -->
  <h3>Checkbox List</h3>
  <div class="list-card">
    <div class="list-item list-item--two">
      <div class="item-text">
        <div class="item-primary">Design system components</div>
        <div class="item-secondary">Buttons, chips, dialogs</div>
      </div>
      <div class="item-trailing"><div class="item-check item-check--on"></div></div>
    </div>
    <div class="list-item list-item--two">
      <div class="item-text">
        <div class="item-primary">Accessibility audit</div>
        <div class="item-secondary">WCAG 2.1 AA compliance</div>
      </div>
      <div class="item-trailing"><div class="item-check item-check--on"></div></div>
    </div>
    <div class="list-item list-item--two">
      <div class="item-text">
        <div class="item-primary">Dark mode theming</div>
        <div class="item-secondary">Token mapping &amp; overrides</div>
      </div>
      <div class="item-trailing"><div class="item-check"></div></div>
    </div>
    <div class="list-item list-item--two">
      <div class="item-text">
        <div class="item-primary">Documentation</div>
        <div class="item-secondary">Component usage &amp; API</div>
      </div>
      <div class="item-trailing"><div class="item-check"></div></div>
    </div>
  </div>

  <!-- Action buttons trailing -->
  <h3>With Action Buttons</h3>
  <div class="list-card">
    <div class="list-item list-item--two">
      <div class="item-avatar" data-color="green">K</div>
      <div class="item-text">
        <div class="item-primary">Kai Nakamura</div>
        <div class="item-secondary">Frontend Engineer</div>
      </div>
      <div class="item-trailing item-actions">
        <button class="item-action-btn"><svg viewBox="0 0 24 24"><path d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z"/></svg></button>
        <button class="item-action-btn"><svg viewBox="0 0 24 24"><path d="M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/></svg></button>
      </div>
    </div>
    <div class="list-item list-item--two">
      <div class="item-avatar" data-color="pink">P</div>
      <div class="item-text">
        <div class="item-primary">Priya Sharma</div>
        <div class="item-secondary">Product Designer</div>
      </div>
      <div class="item-trailing item-actions">
        <button class="item-action-btn"><svg viewBox="0 0 24 24"><path d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z"/></svg></button>
        <button class="item-action-btn"><svg viewBox="0 0 24 24"><path d="M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/></svg></button>
      </div>
    </div>
    <div class="list-item list-item--two">
      <div class="item-avatar" data-color="red">C</div>
      <div class="item-text">
        <div class="item-primary">Carlos Vega</div>
        <div class="item-secondary">Engineering Manager</div>
      </div>
      <div class="item-trailing item-actions">
        <button class="item-action-btn"><svg viewBox="0 0 24 24"><path d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z"/></svg></button>
        <button class="item-action-btn"><svg viewBox="0 0 24 24"><path d="M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/></svg></button>
      </div>
    </div>
  </div>

</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');

.md-12 {
  --primary: #1976d2;
  --primary-light: #e3f2fd;
  --on-surface: #1c1b1f;
  --surface: #fffbfe;
  --surface-variant: #f3f3f3;
  --outline: #79747e;
  --outline-variant: #e0e0e0;
  all: unset;
  display: block;
  font-family: 'Roboto', sans-serif;
  background: #f5f5f5;
  padding: 32px 24px;
  box-sizing: border-box;
  color: var(--on-surface);
}
.md-12 *, .md-12 *::before, .md-12 *::after { box-sizing: border-box; margin: 0; padding: 0; }

.md-12 h3 {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--outline);
  margin-bottom: 4px;
  margin-top: 32px;
}
.md-12 h3:first-child { margin-top: 0; }

/* ── List card container ── */
.md-12 .list-card {
  background: var(--surface);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,.1);
  margin-top: 8px;
}

/* ── Subheader ── */
.md-12 .list-subheader {
  padding: 8px 16px 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--primary);
  background: var(--primary-light);
}

/* ── List item base ── */
.md-12 .list-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 16px;
  min-height: 48px;
  cursor: pointer;
  position: relative;
  transition: background 150ms ease;
  border-bottom: 1px solid var(--outline-variant);
}
.md-12 .list-item:last-child { border-bottom: none; }
.md-12 .list-item:hover { background: rgba(25,118,210,.05); }
.md-12 .list-item:active { background: rgba(25,118,210,.1); }

/* Ripple */
.md-12 .list-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--primary);
  opacity: 0;
  border-radius: inherit;
  transition: opacity 400ms ease;
}
.md-12 .list-item:active::after { opacity: .06; transition: none; }

/* ── Two-line item ── */
.md-12 .list-item--two { min-height: 64px; }
.md-12 .list-item--three { min-height: 80px; align-items: flex-start; padding-top: 12px; padding-bottom: 12px; }

/* ── Text block ── */
.md-12 .item-text { flex: 1; min-width: 0; }
.md-12 .item-primary { font-size: 15px; font-weight: 400; color: var(--on-surface); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.md-12 .item-secondary { font-size: 13px; color: var(--outline); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.md-12 .item-tertiary { font-size: 12px; color: #aaa; margin-top: 1px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; }

/* ── Leading avatar ── */
.md-12 .item-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.md-12 .item-avatar--img {
  background-size: cover;
  background-position: center;
  font-size: 0;
}
/* Avatar color variants */
.md-12 .item-avatar[data-color="teal"]   { background: #00897b; }
.md-12 .item-avatar[data-color="orange"] { background: #f57c00; }
.md-12 .item-avatar[data-color="purple"] { background: #7b1fa2; }
.md-12 .item-avatar[data-color="red"]    { background: #c62828; }
.md-12 .item-avatar[data-color="green"]  { background: #388e3c; }
.md-12 .item-avatar[data-color="pink"]   { background: #d81b60; }

/* ── Leading icon ── */
.md-12 .item-icon {
  width: 24px; height: 24px;
  flex-shrink: 0;
  fill: var(--outline);
  display: flex; align-items: center; justify-content: center;
}
.md-12 .item-icon svg { width: 24px; height: 24px; }

/* ── Leading image ── */
.md-12 .item-image {
  width: 56px; height: 56px;
  border-radius: 4px;
  background: var(--outline-variant);
  flex-shrink: 0;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.md-12 .item-image svg { width: 28px; height: 28px; fill: #bbb; }

/* ── Trailing elements ── */
.md-12 .item-trailing { flex-shrink: 0; }
.md-12 .item-meta { font-size: 12px; color: var(--outline); }
.md-12 .item-badge {
  min-width: 20px; height: 20px;
  background: var(--primary);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 5px;
}
.md-12 .item-chevron { color: #bbb; font-size: 18px; }

/* ── Checkbox / radio trailing ── */
.md-12 .item-check {
  width: 18px; height: 18px;
  border: 2px solid var(--outline);
  border-radius: 3px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: background 150ms, border-color 150ms;
}
.md-12 .item-check--on { background: var(--primary); border-color: var(--primary); }
.md-12 .item-check--on::after { content: ''; width: 10px; height: 6px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg) translate(1px,-1px); display: block; }

.md-12 .item-radio {
  width: 18px; height: 18px;
  border: 2px solid var(--outline);
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
  transition: border-color 150ms;
}
.md-12 .item-radio--on { border-color: var(--primary); }
.md-12 .item-radio--on::after { content: ''; width: 10px; height: 10px; background: var(--primary); border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }

/* ── Switch trailing ── */
.md-12 .item-switch {
  width: 36px; height: 20px;
  background: #bdbdbd;
  border-radius: 10px;
  position: relative;
  transition: background 200ms;
  flex-shrink: 0;
}
.md-12 .item-switch::after {
  content: '';
  width: 16px; height: 16px;
  background: #fff;
  border-radius: 50%;
  position: absolute;
  top: 2px; left: 2px;
  transition: left 200ms, background 200ms;
  box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
.md-12 .item-switch--on { background: var(--primary); }
.md-12 .item-switch--on::after { left: 18px; }

/* ── Divider ── */
.md-12 .list-divider {
  height: 1px;
  background: var(--outline-variant);
  margin: 0;
}
.md-12 .list-divider--inset { margin-left: 72px; }

/* ── Dense list ── */
.md-12 .list-item--dense { min-height: 36px; }
.md-12 .list-item--dense .item-primary { font-size: 13px; }

/* ── Action list (icon-button trailing) ── */
.md-12 .item-actions { display: flex; gap: 4px; }
.md-12 .item-action-btn {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: none; background: transparent;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 150ms;
  fill: var(--outline);
}
.md-12 .item-action-btn svg { width: 18px; height: 18px; }
.md-12 .item-action-btn:hover { background: rgba(0,0,0,.07); }
@media (prefers-reduced-motion: reduce) {
    .md-12 .list-item,
    .md-12 .list-item::after,
    .md-12 .item-switch,
    .md-12 .item-switch::after,
    .md-12 .item-check,
    .md-12 .item-action-btn { transition: none !important; }
  }
```

### 13. Material Design Color Palette CSS

**Type:** Pure CSS
**Description:** Interactive five-theme Material Design 3 colour switcher — purple, teal, red, green, pink — with live colour role grid, tonal surfaces, and a live UI preview panel, all driven by CSS custom properties and radio inputs.

**HTML:**
```html
<!-- Radio inputs for theme switching — OUTSIDE .md-13 -->
<input class="md-13-radios" type="radio" name="md13-theme" id="md13-t1" checked>
<input class="md-13-radios" type="radio" name="md13-theme" id="md13-t2">
<input class="md-13-radios" type="radio" name="md13-theme" id="md13-t3">
<input class="md-13-radios" type="radio" name="md13-theme" id="md13-t4">
<input class="md-13-radios" type="radio" name="md13-theme" id="md13-t5">

<div class="md-13">

  <!-- Theme picker -->
  <h3>Select Theme</h3>
  <div class="theme-picker">
    <label class="theme-swatch-label" for="md13-t1">
      <div class="theme-dot swatch-purple"></div>
      <span class="theme-label">Purple</span>
    </label>
    <label class="theme-swatch-label" for="md13-t2">
      <div class="theme-dot swatch-teal"></div>
      <span class="theme-label">Teal</span>
    </label>
    <label class="theme-swatch-label" for="md13-t3">
      <div class="theme-dot swatch-red"></div>
      <span class="theme-label">Red</span>
    </label>
    <label class="theme-swatch-label" for="md13-t4">
      <div class="theme-dot swatch-green"></div>
      <span class="theme-label">Green</span>
    </label>
    <label class="theme-swatch-label" for="md13-t5">
      <div class="theme-dot swatch-pink"></div>
      <span class="theme-label">Pink</span>
    </label>
  </div>

  <!-- Color palette display -->
  <h3>Color Roles</h3>
  <div class="palette-grid">
    <div class="palette-chip chip-primary"><span class="chip-label">Primary</span></div>
    <div class="palette-chip chip-primary-dark"><span class="chip-label">On Primary</span></div>
    <div class="palette-chip chip-primary-light"><span class="chip-label">Primary Container</span></div>
    <div class="palette-chip chip-secondary"><span class="chip-label">Secondary</span></div>
    <div class="palette-chip chip-sec-light"><span class="chip-label">Secondary Cont.</span></div>
    <div class="palette-chip chip-tertiary"><span class="chip-label">Tertiary</span></div>
    <div class="palette-chip chip-tert-light"><span class="chip-label">Tertiary Cont.</span></div>
    <div class="palette-chip chip-surface"><span class="chip-label">Surface</span></div>
    <div class="palette-chip chip-surface-var"><span class="chip-label">Surface Variant</span></div>
  </div>

  <!-- Tonal elevation -->
  <h3>Tonal Surfaces</h3>
  <div class="tonal-row">
    <div class="tonal-el tonal-el-1">Primary</div>
    <div class="tonal-el tonal-el-2">Dark</div>
    <div class="tonal-el tonal-el-3">Container</div>
    <div class="tonal-el tonal-el-4">Variant</div>
  </div>

  <!-- Live UI preview -->
  <h3>Live Preview</h3>
  <div class="preview-card">
    <div class="preview-topbar">
      <span class="preview-topbar-title">My App</span>
      <div class="preview-topbar-dots">
        <span></span><span></span><span></span>
      </div>
    </div>
    <div class="preview-body">
      <div class="preview-section-title">Filters</div>
      <div class="preview-chips">
        <span class="preview-chip preview-chip--filled">All</span>
        <span class="preview-chip">Recent</span>
        <span class="preview-chip">Starred</span>
      </div>
      <div class="preview-section-title">Actions</div>
      <div class="preview-btns">
        <button class="preview-btn preview-btn--filled">Confirm</button>
        <button class="preview-btn preview-btn--tonal">Maybe</button>
        <button class="preview-btn preview-btn--outline">Cancel</button>
      </div>
      <div class="preview-fab">+</div>
    </div>
  </div>

</div>

<style>
  .md-13-radios { display: none; }
  @media (prefers-reduced-motion: reduce) {
    .md-13 .palette-chip,
    .md-13 .preview-card,
    .md-13 .preview-topbar,
    .md-13 .preview-btn,
    .md-13 .preview-chip,
    .md-13 .preview-fab,
    .md-13 .tonal-el,
    .md-13 .theme-dot { transition: none !important; }
  }
</style>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');

/* ── CSS-only theme switcher via hidden radio inputs ── */
#md13-t1:checked ~ .md-13 { --primary: #6750a4; --primary-dark: #4f3d7a; --primary-light: #eaddff; --primary-on: #ffffff; --secondary: #625b71; --secondary-light: #e8def8; --tertiary: #7d5260; --tertiary-light: #ffd8e4; --surface: #fffbfe; --surface-variant: #e7e0ec; --on-surface: #1c1b1f; --theme-name: "Purple (Default)"; }
#md13-t2:checked ~ .md-13 { --primary: #006874; --primary-dark: #004f58; --primary-light: #a2d0d8; --primary-on: #ffffff; --secondary: #4a6267; --secondary-light: #cce8ed; --tertiary: #525e7d; --tertiary-light: #dae2ff; --surface: #fafdfe; --surface-variant: #dbe4e6; --on-surface: #191c1d; --theme-name: "Teal"; }
#md13-t3:checked ~ .md-13 { --primary: #b5271f; --primary-dark: #8c1c16; --primary-light: #ffdad6; --primary-on: #ffffff; --secondary: #775651; --secondary-light: #ffdad6; --tertiary: #715c2e; --tertiary-light: #fcdea7; --surface: #fffbff; --surface-variant: #f5dedd; --on-surface: #201a19; --theme-name: "Red"; }
#md13-t4:checked ~ .md-13 { --primary: #386a20; --primary-dark: #255010; --primary-light: #b7f397; --primary-on: #ffffff; --secondary: #55624c; --secondary-light: #d8e7cb; --tertiary: #386667; --tertiary-light: #bcebec; --surface: #fdfdf6; --surface-variant: #dee5d4; --on-surface: #1a1c18; --theme-name: "Green"; }
#md13-t5:checked ~ .md-13 { --primary: #984061; --primary-dark: #72294a; --primary-light: #ffd8e4; --primary-on: #ffffff; --secondary: #74565f; --secondary-light: #ffd9e2; --tertiary: #7b4e00; --tertiary-light: #ffddad; --surface: #fffbff; --surface-variant: #f2dde2; --on-surface: #201a1b; --theme-name: "Pink"; }

.md-13-radios { display: none; }

.md-13 {
  --primary: #6750a4;
  --primary-dark: #4f3d7a;
  --primary-light: #eaddff;
  --primary-on: #ffffff;
  --secondary: #625b71;
  --secondary-light: #e8def8;
  --tertiary: #7d5260;
  --tertiary-light: #ffd8e4;
  --surface: #fffbfe;
  --surface-variant: #e7e0ec;
  --on-surface: #1c1b1f;
  --outline: #79747e;
  --outline-variant: #cac4d0;
  all: unset;
  display: block;
  font-family: 'Roboto', sans-serif;
  background: #f3f3f7;
  padding: 32px 24px;
  box-sizing: border-box;
  color: var(--on-surface);
}
.md-13 *, .md-13 *::before, .md-13 *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Section labels ── */
.md-13 h3 {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--outline);
  margin-bottom: 12px;
  margin-top: 32px;
}
.md-13 h3:first-child { margin-top: 0; }

/* ── Theme picker ── */
.md-13 .theme-picker {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.md-13 .theme-swatch-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.md-13 .theme-dot {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 3px solid transparent;
  position: relative;
  transition: border-color 200ms, transform 150ms;
  box-shadow: 0 2px 6px rgba(0,0,0,.2);
}
.md-13 .theme-dot::after {
  content: '';
  width: 14px; height: 14px;
  background: rgba(255,255,255,.9);
  border-radius: 50%;
  position: absolute;
  bottom: -1px; right: -1px;
  opacity: 0;
  transition: opacity 200ms;
}
.md-13 .theme-swatch-label:hover .theme-dot { transform: scale(1.1); }
.md-13 .theme-label { font-size: 11px; color: var(--outline); }

/* Swatch colors */
.md-13 .swatch-purple { background: #6750a4; }
.md-13 .swatch-teal   { background: #006874; }
.md-13 .swatch-red    { background: #b5271f; }
.md-13 .swatch-green  { background: #386a20; }
.md-13 .swatch-pink   { background: #984061; }

/* Active swatch gets border + checkmark */
#md13-t1:checked ~ .md-13 .swatch-purple,
#md13-t2:checked ~ .md-13 .swatch-teal,
#md13-t3:checked ~ .md-13 .swatch-red,
#md13-t4:checked ~ .md-13 .swatch-green,
#md13-t5:checked ~ .md-13 .swatch-pink {
  border-color: var(--on-surface);
  transform: scale(1.1);
}
#md13-t1:checked ~ .md-13 .swatch-purple::after,
#md13-t2:checked ~ .md-13 .swatch-teal::after,
#md13-t3:checked ~ .md-13 .swatch-red::after,
#md13-t4:checked ~ .md-13 .swatch-green::after,
#md13-t5:checked ~ .md-13 .swatch-pink::after { opacity: 1; }

/* ── Color palette grid ── */
.md-13 .palette-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.md-13 .palette-chip {
  border-radius: 12px;
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: background 400ms ease, color 400ms ease;
}
.md-13 .palette-chip .chip-label { font-size: 11px; font-weight: 500; letter-spacing: .5px; }
.md-13 .palette-chip .chip-hex { font-size: 10px; opacity: .7; font-family: monospace; }

.md-13 .chip-primary      { background: var(--primary); color: var(--primary-on); }
.md-13 .chip-primary-dark { background: var(--primary-dark); color: #fff; }
.md-13 .chip-primary-light { background: var(--primary-light); color: var(--on-surface); }
.md-13 .chip-secondary    { background: var(--secondary); color: #fff; }
.md-13 .chip-sec-light    { background: var(--secondary-light); color: var(--on-surface); }
.md-13 .chip-tertiary     { background: var(--tertiary); color: #fff; }
.md-13 .chip-tert-light   { background: var(--tertiary-light); color: var(--on-surface); }
.md-13 .chip-surface      { background: var(--surface); color: var(--on-surface); border: 1px solid var(--outline-variant); }
.md-13 .chip-surface-var  { background: var(--surface-variant); color: var(--on-surface); }

/* ── Live UI preview ── */
.md-13 .preview-card {
  background: var(--surface);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
  transition: background 400ms;
}
.md-13 .preview-topbar {
  background: var(--primary);
  color: var(--primary-on);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: background 400ms;
}
.md-13 .preview-topbar-title { font-size: 16px; font-weight: 500; flex: 1; }
.md-13 .preview-topbar-dots { display: flex; gap: 3px; }
.md-13 .preview-topbar-dots span { width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,.7); }

.md-13 .preview-body { padding: 16px; display: flex; flex-direction: column; gap: 12px; }

.md-13 .preview-section-title { font-size: 12px; font-weight: 500; color: var(--secondary); text-transform: uppercase; letter-spacing: .8px; transition: color 400ms; }

.md-13 .preview-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.md-13 .preview-chip {
  padding: 6px 14px;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 500;
  background: var(--primary-light);
  color: var(--primary);
  transition: background 400ms, color 400ms;
}
.md-13 .preview-chip--filled {
  background: var(--primary);
  color: var(--primary-on);
}

.md-13 .preview-btns { display: flex; gap: 8px; }
.md-13 .preview-btn {
  padding: 9px 18px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  border: none;
  cursor: pointer;
  letter-spacing: .3px;
  transition: background 400ms, color 400ms;
}
.md-13 .preview-btn--filled { background: var(--primary); color: var(--primary-on); }
.md-13 .preview-btn--tonal  { background: var(--secondary-light); color: var(--secondary); }
.md-13 .preview-btn--outline { background: transparent; color: var(--primary); border: 1px solid var(--primary); }

.md-13 .preview-fab {
  width: 44px; height: 44px;
  border-radius: 14px;
  background: var(--tertiary);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  box-shadow: 0 3px 8px rgba(0,0,0,.2);
  align-self: flex-end;
  transition: background 400ms;
}

/* ── Material 3 Tonal Surface row ── */
.md-13 .tonal-row {
  display: flex;
  gap: 8px;
}
.md-13 .tonal-el {
  flex: 1;
  padding: 12px 8px;
  border-radius: 12px;
  text-align: center;
  font-size: 11px;
  font-weight: 500;
  transition: background 400ms, color 400ms;
}
.md-13 .tonal-el-1 { background: var(--primary); color: var(--primary-on); }
.md-13 .tonal-el-2 { background: var(--primary-dark); color: #fff; }
.md-13 .tonal-el-3 { background: var(--primary-light); color: var(--on-surface); }
.md-13 .tonal-el-4 { background: var(--surface-variant); color: var(--on-surface); }
```

### 14. Material Design App Shell Layout CSS

**Type:** Pure CSS
**Description:** Full responsive app shell with sticky top app bar, persistent navigation drawer, breadcrumb toolbar, three-column stats grid, activity feed list, and a floating action button — production-ready layout, no JavaScript.

**HTML:**
```html
<div class="md-14">
  <input class="drawer-toggle" type="checkbox" id="md14-drawer">

  <div class="app-shell">

    <!-- Top App Bar -->
    <header class="topbar">
      <label class="topbar-menu-btn" for="md14-drawer">
        <svg viewBox="0 0 24 24"><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/></svg>
      </label>
      <span class="topbar-title">Dashboard</span>
      <div class="topbar-actions">
        <button class="topbar-action">
          <svg viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>
        </button>
        <button class="topbar-action">
          <svg viewBox="0 0 24 24"><path d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z"/></svg>
        </button>
        <div class="topbar-avatar">K</div>
      </div>
    </header>

    <div class="app-body">

      <!-- Navigation Drawer -->
      <nav class="nav-drawer">
        <div class="nav-section">
          <div class="nav-item active">
            <svg class="nav-item-icon" viewBox="0 0 24 24"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>
            <span class="nav-item-text">Home</span>
          </div>
          <div class="nav-item">
            <svg class="nav-item-icon" viewBox="0 0 24 24"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"/></svg>
            <span class="nav-item-text">Reports</span>
            <span class="nav-badge">3</span>
          </div>
          <div class="nav-item">
            <svg class="nav-item-icon" viewBox="0 0 24 24"><path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/></svg>
            <span class="nav-item-text">Users</span>
          </div>
          <div class="nav-item">
            <svg class="nav-item-icon" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>
            <span class="nav-item-text">Tasks</span>
            <span class="nav-badge">7</span>
          </div>
        </div>

        <div class="nav-section">
          <div class="nav-subheader">Settings</div>
          <div class="nav-item">
            <svg class="nav-item-icon" viewBox="0 0 24 24"><path d="M19.14,12.94c0.04-0.3,0.06-0.61,0.06-0.94c0-0.32-0.02-0.64-0.07-0.94l2.03-1.58c0.18-0.14,0.23-0.41,0.12-0.61 l-1.92-3.32c-0.12-0.22-0.37-0.29-0.59-0.22l-2.39,0.96c-0.5-0.38-1.03-0.7-1.62-0.94L14.4,2.81c-0.04-0.24-0.24-0.41-0.48-0.41 h-3.84c-0.24,0-0.43,0.17-0.47,0.41L9.25,5.35C8.66,5.59,8.12,5.92,7.63,6.29L5.24,5.33c-0.22-0.08-0.47,0-0.59,0.22L2.74,8.87 C2.62,9.08,2.66,9.34,2.86,9.48l2.03,1.58C4.84,11.36,4.8,11.69,4.8,12s0.02,0.64,0.07,0.94l-2.03,1.58 c-0.18,0.14-0.23,0.41-0.12,0.61l1.92,3.32c0.12,0.22,0.37,0.29,0.59,0.22l2.39-0.96c0.5,0.38,1.03,0.7,1.62,0.94l0.36,2.54 c0.05,0.24,0.24,0.41,0.48,0.41h3.84c0.24,0,0.44-0.17,0.47-0.41l0.36-2.54c0.59-0.24,1.13-0.56,1.62-0.94l2.39,0.96 c0.22,0.08,0.47,0,0.59-0.22l1.92-3.32c0.12-0.22,0.07-0.47-0.12-0.61L19.14,12.94z M12,15.6c-1.98,0-3.6-1.62-3.6-3.6 s1.62-3.6,3.6-3.6s3.6,1.62,3.6,3.6S13.98,15.6,12,15.6z"/></svg>
            <span class="nav-item-text">General</span>
          </div>
          <div class="nav-item">
            <svg class="nav-item-icon" viewBox="0 0 24 24"><path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z"/></svg>
            <span class="nav-item-text">Security</span>
          </div>
        </div>
      </nav>

      <!-- Main Content -->
      <main class="main-content">
        <div class="content-toolbar">
          <div class="breadcrumb">
            <span>App</span>
            <span class="breadcrumb-sep">›</span>
            <span>Dashboard</span>
          </div>
          <div class="toolbar-actions">
            <button class="tb-btn tb-btn--outline">Export</button>
            <button class="tb-btn tb-btn--filled">+ New</button>
          </div>
        </div>

        <div class="content-pad">

          <!-- Stats row -->
          <div class="card-grid">
            <div class="stat-card">
              <div class="stat-label">Total Users</div>
              <div class="stat-value">4,821</div>
              <div class="stat-sub">▲ 12% this month</div>
            </div>
            <div class="stat-card">
              <div class="stat-label">Revenue</div>
              <div class="stat-value">$28.4k</div>
              <div class="stat-sub">▲ 8.3% vs last month</div>
            </div>
            <div class="stat-card">
              <div class="stat-label">Open Tasks</div>
              <div class="stat-value">143</div>
              <div class="stat-sub">▼ 5 since yesterday</div>
            </div>
          </div>

          <!-- Recent activity -->
          <div class="content-card">
            <div class="content-card-header">
              <span class="content-card-title">Recent Activity</span>
            </div>
            <div class="list-row">
              <span class="list-row-dot dot-green"></span>
              <span class="list-row-text">User #4821 signed up via referral link</span>
              <span class="list-row-meta">2m ago</span>
            </div>
            <div class="list-row">
              <span class="list-row-dot dot-blue"></span>
              <span class="list-row-text">Report Q2 exported by Jordan Lee</span>
              <span class="list-row-meta">14m ago</span>
            </div>
            <div class="list-row">
              <span class="list-row-dot dot-orange"></span>
              <span class="list-row-text">Payment retry pending for order #7743</span>
              <span class="list-row-meta">1h ago</span>
            </div>
            <div class="list-row">
              <span class="list-row-dot dot-red"></span>
              <span class="list-row-text">Server CPU spike — auto-scaled resolved</span>
              <span class="list-row-meta">2h ago</span>
            </div>
            <div class="list-row">
              <span class="list-row-dot dot-green"></span>
              <span class="list-row-text">Deploy v2.4.1 completed successfully</span>
              <span class="list-row-meta">3h ago</span>
            </div>
          </div>

        </div><!-- /content-pad -->

        <!-- FAB -->
        <button class="fab">
          <svg viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
        </button>

      </main><!-- /main-content -->
    </div><!-- /app-body -->
  </div><!-- /app-shell -->
</div>
```

**CSS:**
```css
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');

.md-14 {
  --primary: #1565c0;
  --primary-dark: #003c8f;
  --primary-light: #e3f2fd;
  --on-primary: #fff;
  --secondary: #00796b;
  --surface: #fffbfe;
  --surface-2: #f4f4f8;
  --on-surface: #1c1b1f;
  --outline: #79747e;
  --outline-variant: #dde1e7;
  --nav-width: 240px;
  --topbar-h: 56px;
  all: unset;
  display: block;
  font-family: 'Roboto', sans-serif;
  background: var(--surface-2);
  box-sizing: border-box;
  color: var(--on-surface);
}
.md-14 *, .md-14 *::before, .md-14 *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Hidden toggle for mobile drawer ── */
.md-14 .drawer-toggle { display: none; }

/* ═══════════════════════════════════════
   APP SHELL
═══════════════════════════════════════ */
.md-14 .app-shell {
  display: flex;
  flex-direction: column;
  min-height: 480px;
  position: relative;
}

/* ── Top App Bar ── */
.md-14 .topbar {
  height: var(--topbar-h);
  background: var(--primary);
  color: var(--on-primary);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  position: sticky;
  top: 0;
  z-index: 10;
  box-shadow: 0 2px 6px rgba(0,0,0,.2);
}
.md-14 .topbar-menu-btn {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 150ms;
}
.md-14 .topbar-menu-btn:hover { background: rgba(255,255,255,.12); }
.md-14 .topbar-menu-btn svg { width: 20px; height: 20px; fill: currentColor; }

.md-14 .topbar-title { font-size: 18px; font-weight: 500; flex: 1; letter-spacing: .2px; }

.md-14 .topbar-actions { display: flex; gap: 4px; }
.md-14 .topbar-action {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 150ms;
}
.md-14 .topbar-action:hover { background: rgba(255,255,255,.12); }
.md-14 .topbar-action svg { width: 20px; height: 20px; fill: currentColor; }

.md-14 .topbar-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--secondary);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  border: 2px solid rgba(255,255,255,.6);
}

/* ── Body: drawer + main ── */
.md-14 .app-body {
  display: flex;
  flex: 1;
  position: relative;
  min-height: 0;
}

/* ── Navigation Drawer ── */
.md-14 .nav-drawer {
  width: var(--nav-width);
  background: var(--surface);
  border-right: 1px solid var(--outline-variant);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  transition: transform 300ms cubic-bezier(.4,0,.2,1), width 300ms;
}

/* ── Nav sections ── */
.md-14 .nav-section { padding: 8px 0; }
.md-14 .nav-section + .nav-section { border-top: 1px solid var(--outline-variant); }

.md-14 .nav-subheader {
  padding: 8px 28px 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--outline);
}

.md-14 .nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 12px;
  height: 48px;
  border-radius: 0 24px 24px 0;
  margin-right: 12px;
  cursor: pointer;
  transition: background 150ms;
  color: var(--on-surface);
  text-decoration: none;
  position: relative;
}
.md-14 .nav-item:hover { background: rgba(25,118,210,.06); }
.md-14 .nav-item.active {
  background: var(--primary-light);
  color: var(--primary);
}
.md-14 .nav-item.active .nav-item-icon { fill: var(--primary); }
.md-14 .nav-item.active .nav-item-text { font-weight: 700; }

.md-14 .nav-item-icon {
  width: 20px; height: 20px;
  fill: var(--outline);
  flex-shrink: 0;
}
.md-14 .nav-item-text { font-size: 14px; font-weight: 500; flex: 1; }
.md-14 .nav-badge {
  min-width: 20px; height: 18px;
  background: var(--primary);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 5px;
}

/* ── Main content area ── */
.md-14 .main-content {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

/* ── Toolbar strip (secondary) ── */
.md-14 .content-toolbar {
  background: var(--surface);
  border-bottom: 1px solid var(--outline-variant);
  padding: 0 16px;
  height: 44px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}
.md-14 .breadcrumb { display: flex; align-items: center; gap: 4px; font-size: 13px; color: var(--outline); }
.md-14 .breadcrumb-sep { font-size: 11px; }
.md-14 .breadcrumb span:last-child { color: var(--on-surface); font-weight: 500; }

.md-14 .toolbar-actions { margin-left: auto; display: flex; gap: 8px; }
.md-14 .tb-btn {
  padding: 6px 14px;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 500;
  border: none;
  cursor: pointer;
  transition: background 150ms;
}
.md-14 .tb-btn--filled { background: var(--primary); color: #fff; }
.md-14 .tb-btn--filled:hover { background: var(--primary-dark); }
.md-14 .tb-btn--outline { background: transparent; color: var(--primary); border: 1px solid var(--primary); }

/* ── Content padding ── */
.md-14 .content-pad { padding: 20px; display: flex; flex-direction: column; gap: 16px; }

/* ── Card grid ── */
.md-14 .card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.md-14 .stat-card {
  background: var(--surface);
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.md-14 .stat-label { font-size: 11px; color: var(--outline); text-transform: uppercase; letter-spacing: .8px; font-weight: 500; margin-bottom: 6px; }
.md-14 .stat-value { font-size: 22px; font-weight: 700; color: var(--on-surface); }
.md-14 .stat-sub { font-size: 11px; color: var(--secondary); margin-top: 3px; }

/* ── Content section card ── */
.md-14 .content-card {
  background: var(--surface);
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
  overflow: hidden;
}
.md-14 .content-card-header {
  padding: 14px 16px;
  border-bottom: 1px solid var(--outline-variant);
  display: flex;
  align-items: center;
  gap: 8px;
}
.md-14 .content-card-title { font-size: 14px; font-weight: 600; flex: 1; }

.md-14 .list-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--outline-variant);
  font-size: 13px;
  cursor: pointer;
  transition: background 120ms;
}
.md-14 .list-row:last-child { border-bottom: none; }
.md-14 .list-row:hover { background: rgba(0,0,0,.03); }
.md-14 .list-row-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.md-14 .dot-green { background: #43a047; }
.md-14 .dot-orange { background: #f57c00; }
.md-14 .dot-red { background: #e53935; }
.md-14 .dot-blue { background: var(--primary); }
.md-14 .list-row-text { flex: 1; }
.md-14 .list-row-meta { font-size: 11px; color: var(--outline); }

/* ── FAB ── */
.md-14 .fab {
  position: absolute;
  bottom: 20px;
  right: 20px;
  width: 52px; height: 52px;
  border-radius: 16px;
  background: var(--primary);
  color: #fff;
  border: none;
  font-size: 22px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(21,101,192,.4);
  transition: box-shadow 150ms, transform 150ms;
  z-index: 5;
}
.md-14 .fab:hover { box-shadow: 0 6px 18px rgba(21,101,192,.5); transform: translateY(-1px); }
.md-14 .fab svg { width: 22px; height: 22px; fill: currentColor; }
@media (prefers-reduced-motion: reduce) {
    .md-14 .nav-drawer,
    .md-14 .topbar-menu-btn,
    .md-14 .topbar-action,
    .md-14 .nav-item,
    .md-14 .tb-btn,
    .md-14 .fab,
    .md-14 .list-row { transition: none !important; }
  }
```

---
## 6 CSS Mega Menus & Dropdown Menus

URL: https://codefronts.com/navigation/css-mega-menus/
Description: 6 hand-coded CSS mega-menu and dropdown layouts — luxury editorial fashion, cyberpunk terminal panel, biophilic architecture studio, Swiss-grid department store, precision outdoor gear finder, and flash-sale command center. Hover + click/tap. Copy-paste ready, accessible, mobile-friendly.
Demo count: 6

### 01. Noir Editorial

**Type:** CSS + JS
**Description:** A dark luxury fashion-house mega menu on a pure black canvas. Cormorant Garamond serif for link text, gold line reveals, full-bleed editorial photography that slowly scales on hover, staggered fade-up link animations, and hairline gold borders between columns. Includes an animated gold underline under each trigger, a "New" badge system, an italic promo block per panel, and a footer strip with free-shipping messaging. Best for luxury fashion, haute couture, editorial retail.

**HTML:**
```html
<nav class="mm-noi" aria-label="Noir Editorial main menu">
  <ul class="nav-bar" role="menubar">

    <!-- WOMEN -->
    <li class="nav-item" role="none">
      <button type="button" class="nav-trigger" role="menuitem" aria-haspopup="true" aria-expanded="false">Women</button>
      <div class="mega cols-3-img" role="menu">
        <div class="mega-img">
          <img src="https://images.unsplash.com/photo-1539109136881-3be0616acf4b?w=600&q=80" alt="" loading="lazy" />
          <span class="mega-img-overlay" aria-hidden="true"></span>
          <div class="mega-img-label">
            <span class="eyebrow">SS 2026 Collection</span>
            <span class="headline">The Quiet<br />Luxury Edit</span>
          </div>
        </div>
        <div class="mega-col">
          <div class="mega-col-title">Ready to Wear</div>
          <ul class="mega-links">
            <li><a href="#" role="menuitem">Jackets &amp; Coats</a></li>
            <li><a href="#" role="menuitem">Dresses <span class="badge">New</span></a></li>
            <li><a href="#" role="menuitem">Trousers</a></li>
            <li><a href="#" role="menuitem">Knitwear</a></li>
            <li><a href="#" role="menuitem">Blouses</a></li>
            <li><a href="#" role="menuitem">Skirts</a></li>
          </ul>
        </div>
        <div class="mega-col">
          <div class="mega-col-title">Accessories</div>
          <ul class="mega-links">
            <li><a href="#" role="menuitem">Handbags</a></li>
            <li><a href="#" role="menuitem">Shoes</a></li>
            <li><a href="#" role="menuitem">Belts</a></li>
            <li><a href="#" role="menuitem">Scarves</a></li>
            <li><a href="#" role="menuitem">Fine Jewellery</a></li>
          </ul>
          <div class="promo-block">
            <p class="promo-text">Complimentary monogramming on all leather goods this season.</p>
            <a href="#">Discover More</a>
          </div>
        </div>
        <div class="mega-footer-strip">
          <span>Free delivery on orders over &pound;500</span>
          <a href="#">View All Women</a>
        </div>
      </div>
    </li>

    <!-- MEN -->
    <li class="nav-item" role="none">
      <button type="button" class="nav-trigger" role="menuitem" aria-haspopup="true" aria-expanded="false">Men</button>
      <div class="mega cols-3-img" role="menu">
        <div class="mega-img">
          <img src="https://images.unsplash.com/photo-1490578474895-699cd4e2cf59?w=600&q=80" alt="" loading="lazy" />
          <span class="mega-img-overlay" aria-hidden="true"></span>
          <div class="mega-img-label">
            <span class="eyebrow">The Modern Gentleman</span>
            <span class="headline">Tailored<br />Restraint</span>
          </div>
        </div>
        <div class="mega-col">
          <div class="mega-col-title">Clothing</div>
          <ul class="mega-links">
            <li><a href="#" role="menuitem">Suits &amp; Tailoring</a></li>
            <li><a href="#" role="menuitem">Outerwear</a></li>
            <li><a href="#" role="menuitem">Shirts <span class="badge">New</span></a></li>
            <li><a href="#" role="menuitem">Trousers</a></li>
            <li><a href="#" role="menuitem">Knitwear</a></li>
            <li><a href="#" role="menuitem">Denim</a></li>
          </ul>
        </div>
        <div class="mega-col">
          <div class="mega-col-title">Accessories</div>
          <ul class="mega-links">
            <li><a href="#" role="menuitem">Shoes &amp; Boots</a></li>
            <li><a href="#" role="menuitem">Bags &amp; Pouches</a></li>
            <li><a href="#" role="menuitem">Wallets</a></li>
            <li><a href="#" role="menuitem">Ties &amp; Pocket Squares</a></li>
            <li><a href="#" role="menuitem">Fragrance</a></li>
          </ul>
          <div class="promo-block">
            <p class="promo-text">Bespoke tailoring appointments now available in all flagship stores.</p>
            <a href="#">Book a Session</a>
          </div>
        </div>
        <div class="mega-footer-strip">
          <span>New arrivals every Thursday</span>
          <a href="#">View All Men</a>
        </div>
      </div>
    </li>

    <!-- COLLECTIONS -->
    <li class="nav-item" role="none">
      <button type="button" class="nav-trigger" role="menuitem" aria-haspopup="true" aria-expanded="false">Collections</button>
      <div class="mega cols-editorial" role="menu">
        <div class="mega-img">
          <img src="https://images.unsplash.com/photo-1558769132-cb1aea458c5e?w=700&q=80" alt="" loading="lazy" />
          <span class="mega-img-overlay" aria-hidden="true"></span>
          <div class="mega-img-label">
            <span class="eyebrow">Limited Edition</span>
            <span class="headline">Archive<br />Reissues</span>
          </div>
        </div>
        <div class="mega-col">
          <div class="mega-col-title">By Season</div>
          <ul class="mega-links">
            <li><a href="#" role="menuitem">Spring/Summer 2026 <span class="badge">Live</span></a></li>
            <li><a href="#" role="menuitem">Resort 2026</a></li>
            <li><a href="#" role="menuitem">Autumn/Winter 2025</a></li>
            <li><a href="#" role="menuitem">Pre-Fall 2025</a></li>
            <li><a href="#" role="menuitem">Couture Archive</a></li>
          </ul>
        </div>
        <div class="mega-col">
          <div class="mega-col-title">Capsules</div>
          <ul class="mega-links">
            <li><a href="#" role="menuitem">Hotel Series</a></li>
            <li><a href="#" role="menuitem">The Night Edit</a></li>
            <li><a href="#" role="menuitem">Linen &amp; Light</a></li>
            <li><a href="#" role="menuitem">Collaboration</a></li>
          </ul>
          <div class="promo-block">
            <p class="promo-text">Members receive early access to all limited-release capsule drops.</p>
            <a href="#">Join The Circle</a>
          </div>
        </div>
        <div class="mega-footer-strip">
          <span>Exclusive to maison members</span>
          <a href="#">Explore All Collections</a>
        </div>
      </div>
    </li>

    <!-- MAISON -->
    <li class="nav-item" role="none">
      <button type="button" class="nav-trigger" role="menuitem" aria-haspopup="true" aria-expanded="false">Maison</button>
      <div class="simple-drop" role="menu">
        <a href="#" role="menuitem">Our History</a>
        <a href="#" role="menuitem">The Ateliers</a>
        <a href="#" role="menuitem">Craftsmanship</a>
        <a href="#" role="menuitem">Sustainability</a>
        <a href="#" role="menuitem">Press &amp; Editorial</a>
        <a href="#" role="menuitem">Careers</a>
      </div>
    </li>

    <!-- STORES -->
    <li class="nav-item" role="none">
      <button type="button" class="nav-trigger" role="menuitem" aria-haspopup="true" aria-expanded="false">Stores</button>
      <div class="simple-drop" role="menu">
        <a href="#" role="menuitem">Find a Store</a>
        <a href="#" role="menuitem">Paris Flagship</a>
        <a href="#" role="menuitem">New York</a>
        <a href="#" role="menuitem">London</a>
        <a href="#" role="menuitem">Tokyo</a>
        <a href="#" role="menuitem">Online Boutique</a>
      </div>
    </li>

  </ul>
</nav>
```

**CSS:**
```css
/* ─── 01 Noir Editorial — dark luxury fashion mega menu ─────────────
   Imports Cormorant Garamond + Montserrat from Google Fonts. All
   styles are scoped under .mm-noi so global resets and body styles
   from the host page never leak in. */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=Montserrat:wght@200;300;400;500&display=swap');

.mm-noi {
  --mm-noi-ink: #0a0a0a;
  --mm-noi-bone: #f0ead8;
  --mm-noi-gold: #c9a84c;
  --mm-noi-gold-dim: #8a6f2e;
  --mm-noi-cream: #e8dfc8;
  --mm-noi-line: rgba(201, 168, 76, 0.2);

  position: relative;
  background: var(--mm-noi-ink);
  font-family: 'Montserrat', system-ui, sans-serif;
  width: 100%;
  min-height: 560px;
  padding: 0;
  overflow: hidden;
  box-sizing: border-box;
}

.mm-noi *,
.mm-noi *::before,
.mm-noi *::after { box-sizing: border-box; }

.mm-noi .nav-bar {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  background: var(--mm-noi-ink);
  border-bottom: 1px solid var(--mm-noi-line);
  position: relative;
  z-index: 2;
}

.mm-noi .nav-item { position: relative; list-style: none; }

.mm-noi .nav-trigger {
  display: block;
  padding: 22px 26px;
  color: var(--mm-noi-bone);
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  background: transparent;
  border: 0;
  cursor: pointer;
  user-select: none;
  transition: color 0.3s ease;
  position: relative;
}

.mm-noi .nav-trigger::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: 80%;
  height: 1px;
  background: var(--mm-noi-gold);
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.mm-noi .nav-item:hover .nav-trigger,
.mm-noi .nav-item.mm-open .nav-trigger {
  color: var(--mm-noi-gold);
}
.mm-noi .nav-item:hover .nav-trigger::after,
.mm-noi .nav-item.mm-open .nav-trigger::after {
  transform: translateX(-50%) scaleX(1);
}

/* ── Mega Panel ── */
.mm-noi .mega {
  position: absolute;
  top: calc(100% + 1px);
  left: 50%;
  transform: translateX(-50%) translateY(-10px);
  width: min(900px, calc(100vw - 32px));
  max-width: calc(100% + 320px);
  background: var(--mm-noi-ink);
  border: 1px solid var(--mm-noi-line);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  display: grid;
  overflow: hidden;
  z-index: 5;
}

.mm-noi .mega.cols-3-img    { grid-template-columns: 2fr 1fr 1fr; }
.mm-noi .mega.cols-editorial { grid-template-columns: 1.8fr 1fr 1fr; }

.mm-noi .nav-item:hover .mega,
.mm-noi .nav-item.mm-open .mega {
  opacity: 1;
  pointer-events: all;
  transform: translateX(-50%) translateY(0);
}

/* ── Image Column ── */
.mm-noi .mega-img {
  position: relative;
  overflow: hidden;
  min-height: 360px;
}
.mm-noi .mega-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(30%) contrast(1.1);
  transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), filter 0.6s ease;
}
.mm-noi .nav-item:hover .mega-img img,
.mm-noi .nav-item.mm-open .mega-img img {
  transform: scale(1.04);
  filter: grayscale(0%) contrast(1.05);
}
.mm-noi .mega-img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10, 10, 10, 0.8) 0%, rgba(10, 10, 10, 0.1) 50%, transparent 100%);
}
.mm-noi .mega-img-label {
  position: absolute;
  bottom: 24px;
  left: 24px;
  right: 24px;
}
.mm-noi .mega-img-label .eyebrow {
  display: block;
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 8px;
  font-weight: 400;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--mm-noi-gold);
  margin-bottom: 6px;
}
.mm-noi .mega-img-label .headline {
  display: block;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 28px;
  font-weight: 300;
  font-style: italic;
  color: var(--mm-noi-bone);
  line-height: 1.1;
}

/* ── Link Column ── */
.mm-noi .mega-col {
  padding: 36px 28px;
  border-left: 1px solid var(--mm-noi-line);
}
.mm-noi .mega-col-title {
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--mm-noi-gold);
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--mm-noi-line);
}
.mm-noi .mega-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.mm-noi .mega-links li a {
  display: block;
  padding: 9px 0;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 17px;
  font-weight: 300;
  color: var(--mm-noi-cream);
  text-decoration: none;
  letter-spacing: 0.03em;
  transition: color 0.25s ease, padding-left 0.3s ease;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  position: relative;
}
.mm-noi .mega-links li a::before {
  content: '\2014';
  position: absolute;
  left: -18px;
  opacity: 0;
  color: var(--mm-noi-gold);
  font-size: 12px;
  transition: opacity 0.25s ease, left 0.3s ease;
}
.mm-noi .mega-links li a:hover {
  color: var(--mm-noi-gold);
  padding-left: 14px;
}
.mm-noi .mega-links li a:hover::before {
  opacity: 1;
  left: 0;
}
.mm-noi .mega-links li a .badge {
  display: inline-block;
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 7px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--mm-noi-ink);
  background: var(--mm-noi-gold);
  padding: 2px 6px;
  margin-left: 8px;
  vertical-align: middle;
}
.mm-noi .promo-block {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--mm-noi-line);
}
.mm-noi .promo-block .promo-text {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 13px;
  font-style: italic;
  font-weight: 300;
  color: rgba(240, 234, 216, 0.5);
  line-height: 1.6;
  margin: 0;
}
.mm-noi .promo-block a {
  display: inline-block;
  margin-top: 10px;
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 8px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mm-noi-gold);
  text-decoration: none;
  border-bottom: 1px solid var(--mm-noi-gold-dim);
  padding-bottom: 2px;
  transition: border-color 0.3s, color 0.3s;
}
.mm-noi .promo-block a:hover {
  color: var(--mm-noi-bone);
  border-color: var(--mm-noi-bone);
}

/* ── Footer strip across whole panel ── */
.mm-noi .mega-footer-strip {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 28px;
  background: rgba(201, 168, 76, 0.06);
  border-top: 1px solid var(--mm-noi-line);
}
.mm-noi .mega-footer-strip span {
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 8px;
  font-weight: 300;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(240, 234, 216, 0.4);
}
.mm-noi .mega-footer-strip a {
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 8px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mm-noi-gold);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: gap 0.3s;
}
.mm-noi .mega-footer-strip a::after { content: '\2192'; }
.mm-noi .mega-footer-strip a:hover { gap: 14px; }

/* ── Simple dropdown for Maison / Stores ── */
.mm-noi .simple-drop {
  position: absolute;
  top: calc(100% + 1px);
  left: 50%;
  transform: translateX(-50%) translateY(-10px);
  width: 240px;
  background: var(--mm-noi-ink);
  border: 1px solid var(--mm-noi-line);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  padding: 20px 0;
  z-index: 5;
}
.mm-noi .nav-item:hover .simple-drop,
.mm-noi .nav-item.mm-open .simple-drop {
  opacity: 1;
  pointer-events: all;
  transform: translateX(-50%) translateY(0);
}
.mm-noi .simple-drop a {
  display: block;
  padding: 10px 28px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 16px;
  font-weight: 300;
  color: var(--mm-noi-cream);
  text-decoration: none;
  letter-spacing: 0.03em;
  transition: color 0.25s, background 0.25s, padding-left 0.3s;
}
.mm-noi .simple-drop a:hover {
  color: var(--mm-noi-gold);
  background: rgba(201, 168, 76, 0.04);
  padding-left: 38px;
}

/* ── Stagger animation for links on open ── */
.mm-noi .nav-item:hover .mega-links li,
.mm-noi .nav-item.mm-open .mega-links li {
  animation: mm-noi-fade 0.4s ease both;
}
.mm-noi .nav-item:hover .mega-links li:nth-child(1),
.mm-noi .nav-item.mm-open .mega-links li:nth-child(1) { animation-delay: 0.05s; }
.mm-noi .nav-item:hover .mega-links li:nth-child(2),
.mm-noi .nav-item.mm-open .mega-links li:nth-child(2) { animation-delay: 0.09s; }
.mm-noi .nav-item:hover .mega-links li:nth-child(3),
.mm-noi .nav-item.mm-open .mega-links li:nth-child(3) { animation-delay: 0.13s; }
.mm-noi .nav-item:hover .mega-links li:nth-child(4),
.mm-noi .nav-item.mm-open .mega-links li:nth-child(4) { animation-delay: 0.17s; }
.mm-noi .nav-item:hover .mega-links li:nth-child(5),
.mm-noi .nav-item.mm-open .mega-links li:nth-child(5) { animation-delay: 0.21s; }
.mm-noi .nav-item:hover .mega-links li:nth-child(6),
.mm-noi .nav-item.mm-open .mega-links li:nth-child(6) { animation-delay: 0.25s; }

@keyframes mm-noi-fade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 760px) {
  .mm-noi .nav-trigger { padding: 18px 14px; font-size: 9px; }
  .mm-noi .mega { width: calc(100vw - 24px); }
  .mm-noi .mega.cols-3-img,
  .mm-noi .mega.cols-editorial { grid-template-columns: 1fr; }
  .mm-noi .mega-img { min-height: 180px; }
  .mm-noi .mega-col { border-left: 0; border-top: 1px solid var(--mm-noi-line); }
}

@media (prefers-reduced-motion: reduce) {
  .mm-noi .mega,
  .mm-noi .simple-drop,
  .mm-noi .mega-img img,
  .mm-noi .mega-links li a,
  .mm-noi .mega-footer-strip a { transition: none; animation: none; }
  .mm-noi .nav-item:hover .mega-img img,
  .mm-noi .nav-item.mm-open .mega-img img { transform: none; }
}
```

**JS:**
```js
(() => {
  document.querySelectorAll('.mm-noi .nav-item, .mm-cyb .nav-item, .mm-bio .nav-item, .mm-dep .nav-item, .mm-typ .nav-item, .mm-dea .nav-item').forEach(item => {
    const trigger = item.querySelector('.nav-trigger');
    if (!trigger) return;

    // Mouse + keyboard: toggle open on click / Enter / Space
    trigger.addEventListener('click', e => {
      e.preventDefault();
      const isOpen = item.classList.contains('mm-open');
      // Close any sibling that's open so only one panel shows at a time
      item.parentElement?.querySelectorAll('.nav-item.mm-open').forEach(other => {
        if (other !== item) other.classList.remove('mm-open');
        const otherBtn = other.querySelector('.nav-trigger');
        if (otherBtn) otherBtn.setAttribute('aria-expanded', 'false');
      });
      item.classList.toggle('mm-open', !isOpen);
      trigger.setAttribute('aria-expanded', String(!isOpen));
    });
  });

  // Outside-click closes all open panels
  document.addEventListener('click', e => {
    document.querySelectorAll('.mm-noi .nav-item.mm-open, .mm-cyb .nav-item.mm-open, .mm-bio .nav-item.mm-open, .mm-dep .nav-item.mm-open, .mm-typ .nav-item.mm-open, .mm-dea .nav-item.mm-open').forEach(item => {
      if (!item.contains(e.target)) {
        item.classList.remove('mm-open');
        const btn = item.querySelector('.nav-trigger');
        if (btn) btn.setAttribute('aria-expanded', 'false');
      }
    });
  });

  // Escape closes the currently open panel
  document.addEventListener('keydown', e => {
    if (e.key !== 'Escape') return;
    document.querySelectorAll('.mm-noi .nav-item.mm-open, .mm-cyb .nav-item.mm-open, .mm-bio .nav-item.mm-open, .mm-dep .nav-item.mm-open, .mm-typ .nav-item.mm-open, .mm-dea .nav-item.mm-open').forEach(item => {
      item.classList.remove('mm-open');
      const btn = item.querySelector('.nav-trigger');
      if (btn) btn.setAttribute('aria-expanded', 'false');
    });
  });
})();
```

### 02. Cyberpunk OS

**Type:** CSS + JS
**Description:** Terminal-inspired control-panel aesthetic on near-black with animated CSS scanlines and noise grain contained inside the demo. Orbitron + Share Tech Mono drive the HUD feel. Each mega panel ships with a left status sidebar with live-style metrics and progress bars, command-prefixed nav links ("01", "02"), colored alert tags (cyan/magenta/yellow), and CTA buttons with angular clip-path shapes and glow box-shadows. A glitch animation fires on trigger hover. Best for developer tools, SaaS dashboards, cloud infrastructure, games.

**HTML:**
```html
<nav class="mm-cyb" aria-label="Cyberpunk OS console menu">
  <ul class="nav-bar" role="menubar">

    <!-- NETWORK -->
    <li class="nav-item" role="none">
      <button type="button" class="nav-trigger" role="menuitem" aria-haspopup="true" aria-expanded="false">
        <span class="icon" aria-hidden="true">&#9678;</span>
        <span class="label">Network</span>
        <span class="chevron" aria-hidden="true">&#9662;</span>
      </button>
      <div class="mega grid-tech" role="menu">
        <div class="mega-status" aria-hidden="true">
          <div class="status-header">NODE STATUS</div>
          <div class="status-line"><span class="key">UPTIME</span><span class="val">99.97%</span></div>
          <div class="status-line"><span class="key">LATENCY</span><span class="val">4ms</span></div>
          <div class="status-line"><span class="key">NODES</span><span class="val">1,284</span></div>
          <div class="status-line"><span class="key">THREATS</span><span class="val alert">3 ACTIVE</span></div>
          <div class="status-line"><span class="key">FIREWALL</span><span class="val">ACTIVE</span></div>
          <div class="status-bar-wrap">
            <div class="status-bar-label"><span>BANDWIDTH</span><span>78%</span></div>
            <div class="status-bar"><span class="status-bar-fill" style="width:78%"></span></div>
            <div class="status-bar-label"><span>CPU LOAD</span><span>43%</span></div>
            <div class="status-bar"><span class="status-bar-fill warn" style="width:43%"></span></div>
          </div>
        </div>
        <div class="mega-col">
          <div class="mega-col-title">Infrastructure</div>
          <ul class="mega-links">
            <li><a href="#" role="menuitem"><span class="cmd">01</span>Load Balancers</a></li>
            <li><a href="#" role="menuitem"><span class="cmd">02</span>CDN Nodes <span class="tag">LIVE</span></a></li>
            <li><a href="#" role="menuitem"><span class="cmd">03</span>DNS Configuration</a></li>
            <li><a href="#" role="menuitem"><span class="cmd">04</span>VPN Gateway</a></li>
            <li><a href="#" role="menuitem"><span class="cmd">05</span>Proxy Clusters</a></li>
          </ul>
        </div>
        <div class="mega-col">
          <div class="mega-col-title">Security</div>
          <ul class="mega-links">
            <li><a href="#" role="menuitem"><span class="cmd">01</span>Firewall Rules</a></li>
            <li><a href="#" role="menuitem"><span class="cmd">02</span>DDoS Shield <span class="tag red">3 ALERTS</span></a></li>
            <li><a href="#" role="menuitem"><span class="cmd">03</span>Intrusion Detection</a></li>
            <li><a href="#" role="menuitem"><span class="cmd">04</span>SSL/TLS Certs</a></li>
            <li><a href="#" role="menuitem"><span class="cmd">05</span>Zero Trust Policies</a></li>
          </ul>
        </div>
        <div class="mega-col">
          <div class="mega-col-title">Monitoring</div>
          <ul class="mega-links">
            <li><a href="#" role="menuitem"><span class="cmd">01</span>Live Traffic Map</a></li>
            <li><a href="#" role="menuitem"><span class="cmd">02</span>Packet Inspector</a></li>
            <li><a href="#" role="menuitem"><span class="cmd">03</span>Alert Manager</a></li>
            <li><a href="#" role="menuitem"><span class="cmd">04</span>Latency Graphs</a></li>
            <li><a href="#" role="menuitem"><span class="cmd">05</span>Topology View</a></li>
          </ul>
        </div>
        <div class="mega-footer">
          <div class="log">LAST SYNC: <span>00:00:04 AGO</span> &middot; SESSION: <span>A4F-8812</span></div>
          <div class="actions">
            <a href="#" class="btn ghost">Diagnostics</a>
            <a href="#" class="btn">Open Console</a>
          </div>
        </div>
      </div>
    </li>

    <!-- DATAOPS -->
    <li class="nav-item" role="none">
      <button type="button" class="nav-trigger" role="menuitem" aria-haspopup="true" aria-expanded="false">
        <span class="icon" aria-hidden="true">&#9707;</span>
        <span class="label">DataOps</span>
        <span class="chevron" aria-hidden="true">&#9662;</span>
      </button>
      <div class="mega grid-data" role="menu">
        <div class="mega-status" aria-hidden="true">
          <div class="status-header">DB CLUSTER</div>
          <div class="status-line"><span class="key">PRIMARY</span><span class="val">ONLINE</span></div>
          <div class="status-line"><span class="key">REPLICAS</span><span class="val">3 / 3</span></div>
          <div class="status-line"><span class="key">QUERIES/S</span><span class="val">8,420</span></div>
          <div class="status-line"><span class="key">STORAGE</span><span class="val warn">91%</span></div>
          <div class="status-line"><span class="key">BACKUPS</span><span class="val">4h AGO</span></div>
          <div class="status-bar-wrap">
            <div class="status-bar-label"><span>STORAGE</span><span>91%</span></div>
            <div class="status-bar"><span class="status-bar-fill alert" style="width:91%"></span></div>
          </div>
        </div>
        <div class="mega-col">
          <div class="mega-col-title">Databases</div>
          <ul class="mega-links">
            <li><a href="#" role="menuitem"><span class="cmd">01</span>Query Builder</a></li>
            <li><a href="#" role="menuitem"><span class="cmd">02</span>Schema Editor</a></li>
            <li><a href="#" role="menuitem"><span class="cmd">03</span>Migrations <span class="tag">3 PENDING</span></a></li>
            <li><a href="#" role="menuitem"><span class="cmd">04</span>Index Manager</a></li>
            <li><a href="#" role="menuitem"><span class="cmd">05</span>Stored Procedures</a></li>
            <li><a href="#" role="menuitem"><span class="cmd">06</span>Replication Config</a></li>
          </ul>
        </div>
        <div class="mega-col">
          <div class="mega-col-title">Pipelines</div>
          <ul class="mega-links">
            <li><a href="#" role="menuitem"><span class="cmd">01</span>ETL Workflows</a></li>
            <li><a href="#" role="menuitem"><span class="cmd">02</span>Stream Processing</a></li>
            <li><a href="#" role="menuitem"><span class="cmd">03</span>Data Lake</a></li>
            <li><a href="#" role="menuitem"><span class="cmd">04</span>Transformation Jobs</a></li>
            <li><a href="#" role="menuitem"><span class="cmd">05</span>Scheduled Tasks</a></li>
            <li><a href="#" role="menuitem"><span class="cmd">06</span>Webhook Receivers</a></li>
          </ul>
        </div>
        <div class="mega-footer">
          <div class="log">DB ENGINE: <span>NebulaDB 9.1</span> &middot; CLUSTER: <span>PROD-EU-WEST</span></div>
          <div class="actions">
            <a href="#" class="btn ghost">Run Query</a>
            <a href="#" class="btn">Data Studio</a>
          </div>
        </div>
      </div>
    </li>

    <!-- DEPLOY -->
    <li class="nav-item" role="none">
      <button type="button" class="nav-trigger" role="menuitem" aria-haspopup="true" aria-expanded="false">
        <span class="icon" aria-hidden="true">&#9698;</span>
        <span class="label">Deploy</span>
        <span class="chevron" aria-hidden="true">&#9662;</span>
      </button>
      <div class="mega grid-ops" role="menu">
        <div class="mega-status" aria-hidden="true">
          <div class="status-header">CI/CD STATUS</div>
          <div class="status-line"><span class="key">BUILD</span><span class="val">PASSING</span></div>
          <div class="status-line"><span class="key">PIPELINE</span><span class="val">RUN #4821</span></div>
          <div class="status-line"><span class="key">COVERAGE</span><span class="val warn">82%</span></div>
          <div class="status-line"><span class="key">LAST DEPLOY</span><span class="val">12m AGO</span></div>
          <div class="status-line"><span class="key">ROLLBACK</span><span class="val">READY</span></div>
        </div>
        <div class="mega-col">
          <div class="mega-col-title">Environments</div>
          <ul class="mega-links">
            <li><a href="#" role="menuitem"><span class="cmd">01</span>Production <span class="tag">LIVE</span></a></li>
            <li><a href="#" role="menuitem"><span class="cmd">02</span>Staging</a></li>
            <li><a href="#" role="menuitem"><span class="cmd">03</span>Development</a></li>
            <li><a href="#" role="menuitem"><span class="cmd">04</span>Feature Branches</a></li>
            <li><a href="#" role="menuitem"><span class="cmd">05</span>Canary Releases</a></li>
          </ul>
        </div>
        <div class="mega-col">
          <div class="mega-col-title">Pipelines</div>
          <ul class="mega-links">
            <li><a href="#" role="menuitem"><span class="cmd">01</span>Build Configs</a></li>
            <li><a href="#" role="menuitem"><span class="cmd">02</span>Test Suites</a></li>
            <li><a href="#" role="menuitem"><span class="cmd">03</span>Container Registry</a></li>
            <li><a href="#" role="menuitem"><span class="cmd">04</span>Artifact Store</a></li>
            <li><a href="#" role="menuitem"><span class="cmd">05</span>Rollback Manager</a></li>
          </ul>
        </div>
        <div class="mega-footer">
          <div class="log">BRANCH: <span>main@f4a92c1</span> &middot; ENV: <span>KUBERNETES v1.29</span></div>
          <div class="actions">
            <a href="#" class="btn ghost">View Logs</a>
            <a href="#" class="btn">Deploy Now</a>
          </div>
        </div>
      </div>
    </li>

    <!-- TERMINAL -->
    <li class="nav-item" role="none">
      <button type="button" class="nav-trigger" role="menuitem" aria-haspopup="true" aria-expanded="false">
        <span class="icon" aria-hidden="true">&#10727;</span>
        <span class="label">Terminal</span>
        <span class="chevron" aria-hidden="true">&#9662;</span>
      </button>
      <div class="simple-drop" role="menu">
        <a href="#" role="menuitem">Root Shell</a>
        <a href="#" role="menuitem">Log Stream</a>
        <a href="#" role="menuitem">Process Monitor</a>
        <a href="#" role="menuitem">Cron Manager</a>
        <a href="#" role="menuitem">Environment Vars</a>
        <a href="#" role="menuitem">SSH Keys</a>
      </div>
    </li>

    <!-- ACCOUNT -->
    <li class="nav-item" role="none">
      <button type="button" class="nav-trigger" role="menuitem" aria-haspopup="true" aria-expanded="false">
        <span class="icon" aria-hidden="true">&#9678;</span>
        <span class="label">Account</span>
        <span class="chevron" aria-hidden="true">&#9662;</span>
      </button>
      <div class="simple-drop" role="menu">
        <a href="#" role="menuitem">Profile &amp; Identity</a>
        <a href="#" role="menuitem">API Tokens</a>
        <a href="#" role="menuitem">Usage &amp; Billing</a>
        <a href="#" role="menuitem">Team Members</a>
        <a href="#" role="menuitem">Audit Log</a>
        <a href="#" role="menuitem">Sign Out</a>
      </div>
    </li>

  </ul>
</nav>
```

**CSS:**
```css
/* ─── 02 Cyberpunk OS — terminal control-panel mega menu ────────────
   Imports Orbitron + Rajdhani + Share Tech Mono. Scanline + noise
   overlays from the original mock have been moved off of body::*
   and onto .mm-cyb::before / ::after so they stay inside the demo's
   own paint surface and don't leak into the host page. */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700&family=Rajdhani:wght@300;400;500;600&family=Share+Tech+Mono&display=swap');

.mm-cyb {
  --mm-cyb-void: #050810;
  --mm-cyb-panel: #080d1a;
  --mm-cyb-panel2: #0c1220;
  --mm-cyb-cyan: #00f5ff;
  --mm-cyb-cyan-dim: rgba(0, 245, 255, 0.15);
  --mm-cyb-cyan-glow: rgba(0, 245, 255, 0.4);
  --mm-cyb-magenta: #ff2d78;
  --mm-cyb-yellow: #f5e642;
  --mm-cyb-green: #39ff6e;
  --mm-cyb-border: rgba(0, 245, 255, 0.2);
  --mm-cyb-border-bright: rgba(0, 245, 255, 0.55);
  --mm-cyb-text: rgba(200, 230, 255, 0.85);
  --mm-cyb-text-dim: rgba(130, 170, 210, 0.5);
  --mm-cyb-scan: rgba(0, 245, 255, 0.03);

  position: relative;
  background: var(--mm-cyb-void);
  font-family: 'Rajdhani', system-ui, sans-serif;
  width: 100%;
  min-height: 560px;
  overflow: hidden;
  box-sizing: border-box;
}

.mm-cyb *,
.mm-cyb *::before,
.mm-cyb *::after { box-sizing: border-box; }

/* Scanlines and noise — scoped to the wrapper, NOT body */
.mm-cyb::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 3px,
    var(--mm-cyb-scan) 3px,
    var(--mm-cyb-scan) 4px
  );
  pointer-events: none;
  z-index: 3;
  animation: mm-cyb-scan 8s linear infinite;
}
.mm-cyb::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 2;
}
@keyframes mm-cyb-scan {
  from { background-position: 0 0; }
  to   { background-position: 0 100px; }
}

.mm-cyb .nav-bar {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: stretch;
  background: var(--mm-cyb-panel);
  border-bottom: 1px solid var(--mm-cyb-border);
  position: relative;
  box-shadow: 0 0 30px rgba(0, 245, 255, 0.05);
  z-index: 4;
}

.mm-cyb .nav-item { position: relative; list-style: none; }

.mm-cyb .nav-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 22px;
  height: 52px;
  font-family: 'Orbitron', monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--mm-cyb-text);
  text-transform: uppercase;
  background: transparent;
  border: 0;
  border-right: 1px solid var(--mm-cyb-border);
  cursor: pointer;
  user-select: none;
  position: relative;
  transition: color 0.2s, background 0.2s;
}

.mm-cyb .nav-trigger .icon {
  font-family: 'Share Tech Mono', monospace;
  font-size: 11px;
  color: var(--mm-cyb-cyan);
  opacity: 0.6;
  transition: opacity 0.2s;
}
.mm-cyb .nav-trigger .chevron {
  font-size: 9px;
  color: var(--mm-cyb-cyan);
  opacity: 0.4;
  transition: transform 0.3s, opacity 0.2s;
  margin-left: 2px;
}
.mm-cyb .nav-item:hover .nav-trigger,
.mm-cyb .nav-item.mm-open .nav-trigger {
  color: var(--mm-cyb-cyan);
  background: var(--mm-cyb-cyan-dim);
}
.mm-cyb .nav-item:hover .nav-trigger .icon,
.mm-cyb .nav-item.mm-open .nav-trigger .icon { opacity: 1; }
.mm-cyb .nav-item:hover .nav-trigger .chevron,
.mm-cyb .nav-item.mm-open .nav-trigger .chevron { transform: rotate(180deg); opacity: 0.9; }

/* ── Mega Panel ── */
.mm-cyb .mega {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 760px;
  max-width: calc(100vw - 24px);
  background: var(--mm-cyb-panel2);
  border: 1px solid var(--mm-cyb-border);
  border-top: none;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px) scaleY(0.97);
  transform-origin: top center;
  transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  display: grid;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8), 0 0 40px rgba(0, 245, 255, 0.06);
  z-index: 5;
}

/* corner brackets */
.mm-cyb .mega::before,
.mm-cyb .mega::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  border-color: var(--mm-cyb-cyan);
  border-style: solid;
  z-index: 10;
}
.mm-cyb .mega::before { top: 0; right: 0; border-width: 2px 2px 0 0; }
.mm-cyb .mega::after  { bottom: 0; left: 0; border-width: 0 0 2px 2px; }

.mm-cyb .mega.grid-tech { grid-template-columns: 220px 1fr 1fr 1fr; }
.mm-cyb .mega.grid-data { grid-template-columns: 200px 1fr 1fr; }
.mm-cyb .mega.grid-ops  { grid-template-columns: 240px 1fr 1fr; }

.mm-cyb .nav-item:hover .mega,
.mm-cyb .nav-item.mm-open .mega {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0) scaleY(1);
}

/* ── Status sidebar ── */
.mm-cyb .mega-status {
  background: rgba(0, 0, 0, 0.4);
  border-right: 1px solid var(--mm-cyb-border);
  padding: 22px 18px;
}
.mm-cyb .status-header {
  font-family: 'Share Tech Mono', monospace;
  font-size: 8px;
  color: var(--mm-cyb-cyan);
  letter-spacing: 0.15em;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--mm-cyb-border);
}
.mm-cyb .status-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid rgba(0, 245, 255, 0.06);
  font-family: 'Share Tech Mono', monospace;
  font-size: 9px;
  color: var(--mm-cyb-text-dim);
}
.mm-cyb .status-line .key { color: rgba(130, 170, 210, 0.5); }
.mm-cyb .status-line .val { color: var(--mm-cyb-green); font-size: 8px; }
.mm-cyb .status-line .val.warn  { color: var(--mm-cyb-yellow); }
.mm-cyb .status-line .val.alert { color: var(--mm-cyb-magenta); }
.mm-cyb .status-bar-wrap { margin-top: 14px; }
.mm-cyb .status-bar-label {
  font-family: 'Share Tech Mono', monospace;
  font-size: 8px;
  color: var(--mm-cyb-text-dim);
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}
.mm-cyb .status-bar {
  display: block;
  height: 3px;
  background: rgba(0, 245, 255, 0.1);
  overflow: hidden;
  margin-bottom: 8px;
}
.mm-cyb .status-bar-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--mm-cyb-cyan), var(--mm-cyb-green));
  box-shadow: 0 0 6px var(--mm-cyb-cyan);
}
.mm-cyb .status-bar-fill.warn  { background: linear-gradient(90deg, var(--mm-cyb-cyan), var(--mm-cyb-yellow)); }
.mm-cyb .status-bar-fill.alert { background: linear-gradient(90deg, var(--mm-cyb-yellow), var(--mm-cyb-magenta)); }

/* ── Link columns ── */
.mm-cyb .mega-col {
  padding: 22px 20px;
  border-right: 1px solid var(--mm-cyb-border);
}
.mm-cyb .mega-col:last-of-type { border-right: none; }

.mm-cyb .mega-col-title {
  font-family: 'Orbitron', monospace;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--mm-cyb-cyan);
  text-transform: uppercase;
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--mm-cyb-border);
  display: flex;
  align-items: center;
  gap: 8px;
}
.mm-cyb .mega-col-title::before {
  content: '//';
  color: var(--mm-cyb-magenta);
  font-family: 'Share Tech Mono', monospace;
  font-size: 10px;
  opacity: 0.7;
}

.mm-cyb .mega-links {
  list-style: none;
  margin: 0;
  padding: 0;
}
.mm-cyb .mega-links li {
  opacity: 0;
  transform: translateX(-6px);
  list-style: none;
}
.mm-cyb .nav-item:hover .mega-links li,
.mm-cyb .nav-item.mm-open .mega-links li {
  animation: mm-cyb-slide 0.3s ease both;
}
.mm-cyb .nav-item:hover .mega-links li:nth-child(1),
.mm-cyb .nav-item.mm-open .mega-links li:nth-child(1) { animation-delay: 0.05s; }
.mm-cyb .nav-item:hover .mega-links li:nth-child(2),
.mm-cyb .nav-item.mm-open .mega-links li:nth-child(2) { animation-delay: 0.09s; }
.mm-cyb .nav-item:hover .mega-links li:nth-child(3),
.mm-cyb .nav-item.mm-open .mega-links li:nth-child(3) { animation-delay: 0.13s; }
.mm-cyb .nav-item:hover .mega-links li:nth-child(4),
.mm-cyb .nav-item.mm-open .mega-links li:nth-child(4) { animation-delay: 0.17s; }
.mm-cyb .nav-item:hover .mega-links li:nth-child(5),
.mm-cyb .nav-item.mm-open .mega-links li:nth-child(5) { animation-delay: 0.21s; }
.mm-cyb .nav-item:hover .mega-links li:nth-child(6),
.mm-cyb .nav-item.mm-open .mega-links li:nth-child(6) { animation-delay: 0.25s; }

@keyframes mm-cyb-slide {
  from { opacity: 0; transform: translateX(-6px); }
  to   { opacity: 1; transform: translateX(0); }
}

.mm-cyb .mega-links li a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  font-family: 'Rajdhani', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--mm-cyb-text);
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 245, 255, 0.04);
  transition: color 0.2s, padding-left 0.2s, background 0.2s;
  position: relative;
}
.mm-cyb .mega-links li a .cmd {
  font-family: 'Share Tech Mono', monospace;
  font-size: 9px;
  color: var(--mm-cyb-cyan);
  opacity: 0.4;
  transition: opacity 0.2s;
  min-width: 24px;
}
.mm-cyb .mega-links li a .tag {
  margin-left: auto;
  font-family: 'Share Tech Mono', monospace;
  font-size: 8px;
  padding: 2px 5px;
  background: rgba(0, 245, 255, 0.1);
  color: var(--mm-cyb-cyan);
  border: 1px solid rgba(0, 245, 255, 0.3);
  letter-spacing: 0.05em;
}
.mm-cyb .mega-links li a .tag.red {
  background: rgba(255, 45, 120, 0.1);
  color: var(--mm-cyb-magenta);
  border-color: rgba(255, 45, 120, 0.3);
}
.mm-cyb .mega-links li a:hover {
  color: var(--mm-cyb-cyan);
  padding-left: 8px;
  background: rgba(0, 245, 255, 0.04);
}
.mm-cyb .mega-links li a:hover .cmd { opacity: 1; }

/* ── Footer ── */
.mm-cyb .mega-footer {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 18px;
  background: rgba(0, 0, 0, 0.3);
  border-top: 1px solid var(--mm-cyb-border);
  flex-wrap: wrap;
  gap: 12px;
}
.mm-cyb .mega-footer .log {
  font-family: 'Share Tech Mono', monospace;
  font-size: 9px;
  color: var(--mm-cyb-text-dim);
}
.mm-cyb .mega-footer .log span { color: var(--mm-cyb-green); }
.mm-cyb .mega-footer .actions { display: flex; gap: 10px; }
.mm-cyb .mega-footer .btn {
  font-family: 'Orbitron', monospace;
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mm-cyb-void);
  background: var(--mm-cyb-cyan);
  padding: 6px 14px;
  cursor: pointer;
  text-decoration: none;
  border: none;
  transition: background 0.2s, box-shadow 0.2s;
  clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
  box-shadow: 0 0 10px var(--mm-cyb-cyan-glow);
}
.mm-cyb .mega-footer .btn:hover {
  background: #fff;
  box-shadow: 0 0 20px var(--mm-cyb-cyan-glow);
}
.mm-cyb .mega-footer .btn.ghost {
  background: transparent;
  color: var(--mm-cyb-cyan);
  border: 1px solid var(--mm-cyb-border-bright);
  box-shadow: none;
  clip-path: none;
}
.mm-cyb .mega-footer .btn.ghost:hover {
  background: var(--mm-cyb-cyan-dim);
  color: var(--mm-cyb-cyan);
}

/* ── Simple drop ── */
.mm-cyb .simple-drop {
  position: absolute;
  top: 100%;
  left: 0;
  width: 240px;
  background: var(--mm-cyb-panel2);
  border: 1px solid var(--mm-cyb-border);
  border-top: none;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.7);
  z-index: 5;
}
.mm-cyb .nav-item:hover .simple-drop,
.mm-cyb .nav-item.mm-open .simple-drop {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
}
.mm-cyb .simple-drop a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  font-family: 'Rajdhani', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--mm-cyb-text);
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 245, 255, 0.04);
  transition: color 0.2s, background 0.2s;
}
.mm-cyb .simple-drop a::before {
  content: '>';
  font-family: 'Share Tech Mono', monospace;
  font-size: 10px;
  color: var(--mm-cyb-cyan);
  opacity: 0.3;
  transition: opacity 0.2s;
}
.mm-cyb .simple-drop a:hover {
  color: var(--mm-cyb-cyan);
  background: rgba(0, 245, 255, 0.04);
}
.mm-cyb .simple-drop a:hover::before { opacity: 1; }

@media (max-width: 760px) {
  .mm-cyb .nav-trigger { padding: 0 14px; font-size: 9px; }
  .mm-cyb .mega { min-width: calc(100vw - 24px); }
  .mm-cyb .mega.grid-tech,
  .mm-cyb .mega.grid-data,
  .mm-cyb .mega.grid-ops { grid-template-columns: 1fr; }
  .mm-cyb .mega-status { border-right: none; border-bottom: 1px solid var(--mm-cyb-border); }
  .mm-cyb .mega-col { border-right: none; border-bottom: 1px solid var(--mm-cyb-border); }
}

@media (prefers-reduced-motion: reduce) {
  .mm-cyb::before { animation: none; }
  .mm-cyb .mega,
  .mm-cyb .simple-drop,
  .mm-cyb .mega-links li,
  .mm-cyb .mega-links li a,
  .mm-cyb .mega-footer .btn { transition: none; animation: none; }
}
```

**JS:**
```js
(() => {
  document.querySelectorAll('.mm-noi .nav-item, .mm-cyb .nav-item, .mm-bio .nav-item, .mm-dep .nav-item, .mm-typ .nav-item, .mm-dea .nav-item').forEach(item => {
    const trigger = item.querySelector('.nav-trigger');
    if (!trigger) return;

    // Mouse + keyboard: toggle open on click / Enter / Space
    trigger.addEventListener('click', e => {
      e.preventDefault();
      const isOpen = item.classList.contains('mm-open');
      // Close any sibling that's open so only one panel shows at a time
      item.parentElement?.querySelectorAll('.nav-item.mm-open').forEach(other => {
        if (other !== item) other.classList.remove('mm-open');
        const otherBtn = other.querySelector('.nav-trigger');
        if (otherBtn) otherBtn.setAttribute('aria-expanded', 'false');
      });
      item.classList.toggle('mm-open', !isOpen);
      trigger.setAttribute('aria-expanded', String(!isOpen));
    });
  });

  // Outside-click closes all open panels
  document.addEventListener('click', e => {
    document.querySelectorAll('.mm-noi .nav-item.mm-open, .mm-cyb .nav-item.mm-open, .mm-bio .nav-item.mm-open, .mm-dep .nav-item.mm-open, .mm-typ .nav-item.mm-open, .mm-dea .nav-item.mm-open').forEach(item => {
      if (!item.contains(e.target)) {
        item.classList.remove('mm-open');
        const btn = item.querySelector('.nav-trigger');
        if (btn) btn.setAttribute('aria-expanded', 'false');
      }
    });
  });

  // Escape closes the currently open panel
  document.addEventListener('keydown', e => {
    if (e.key !== 'Escape') return;
    document.querySelectorAll('.mm-noi .nav-item.mm-open, .mm-cyb .nav-item.mm-open, .mm-bio .nav-item.mm-open, .mm-dep .nav-item.mm-open, .mm-typ .nav-item.mm-open, .mm-dea .nav-item.mm-open').forEach(item => {
      item.classList.remove('mm-open');
      const btn = item.querySelector('.nav-trigger');
      if (btn) btn.setAttribute('aria-expanded', 'false');
    });
  });
})();
```

### 03. Biophilic Studio

**Type:** CSS + JS
**Description:** Warm, earthy linen palette with a contained paper-grain texture overlay. Fraunces variable serif (italic display) drives the navigation links, DM Sans handles metadata. The Projects panel features a tall photography column with a gradient caption overlay; the Journal panel includes editorial thumbnail cards with title + meta. Botanical SVG leaf motifs appear as column corner accents, a subtle terra-cotta underline swipes in on hover, and organic dot indicators sit beside each nav item. Best for architecture studios, interior design, sustainable brands, cultural institutions.

**HTML:**
```html
<nav class="mm-bio" aria-label="Biophilic Studio main menu">
  <ul class="nav-bar" role="menubar">

    <!-- PROJECTS -->
    <li class="nav-item" role="none">
      <button type="button" class="nav-trigger" role="menuitem" aria-haspopup="true" aria-expanded="false">
        <span class="dot" aria-hidden="true"></span>
        <span class="label">Projects</span>
      </button>
      <div class="mega grid-project" role="menu">
        <div class="mega-feature">
          <img src="https://images.unsplash.com/photo-1600210492486-724fe5c67fb0?w=600&q=80" alt="" loading="lazy" />
          <div class="mega-feature-caption">
            <span class="eyebrow">Currently Featured</span>
            <span class="title">Fjordhaus<br />Residence</span>
          </div>
        </div>
        <div class="mega-col">
          <div class="mega-col-label">By Typology</div>
          <ul class="mega-links">
            <li><a href="#" role="menuitem">Private Residences<span class="note">Custom homes &amp; villas</span></a></li>
            <li><a href="#" role="menuitem">Cultural Spaces<span class="note">Museums, galleries &amp; pavilions</span></a></li>
            <li><a href="#" role="menuitem">Hospitality <span class="pill">New</span><span class="note">Hotels &amp; retreats</span></a></li>
            <li><a href="#" role="menuitem">Workplaces<span class="note">Studios &amp; offices</span></a></li>
            <li><a href="#" role="menuitem">Urban Landscape<span class="note">Parks &amp; public space</span></a></li>
          </ul>
        </div>
        <div class="mega-col">
          <div class="mega-col-label">By Context</div>
          <ul class="mega-links">
            <li><a href="#" role="menuitem">Coastal &amp; Marine</a></li>
            <li><a href="#" role="menuitem">Forest &amp; Mountain</a></li>
            <li><a href="#" role="menuitem">Urban Infill</a></li>
            <li><a href="#" role="menuitem">Rural &amp; Agricultural</a></li>
            <li><a href="#" role="menuitem">Heritage Adaptive</a></li>
          </ul>
        </div>
        <div class="mega-footer">
          <span class="note">58 completed projects across 14 countries</span>
          <a href="#">View All Projects</a>
        </div>
      </div>
    </li>

    <!-- SERVICES -->
    <li class="nav-item" role="none">
      <button type="button" class="nav-trigger" role="menuitem" aria-haspopup="true" aria-expanded="false">
        <span class="dot" aria-hidden="true"></span>
        <span class="label">Services</span>
      </button>
      <div class="mega grid-studio" role="menu">
        <div class="mega-col first">
          <div class="mega-col-label">Architecture</div>
          <ul class="mega-links">
            <li><a href="#" role="menuitem">Concept &amp; Master Plan</a></li>
            <li><a href="#" role="menuitem">Detailed Design</a></li>
            <li><a href="#" role="menuitem">Planning Submissions</a></li>
            <li><a href="#" role="menuitem">Construction Oversight</a></li>
            <li><a href="#" role="menuitem">Post-Occupancy Review</a></li>
          </ul>
        </div>
        <div class="mega-col">
          <div class="mega-col-label">Interior Design</div>
          <ul class="mega-links">
            <li><a href="#" role="menuitem">Spatial Concept <span class="pill">Featured</span></a></li>
            <li><a href="#" role="menuitem">Material &amp; Palette</a></li>
            <li><a href="#" role="menuitem">Bespoke Furniture</a></li>
            <li><a href="#" role="menuitem">Art Curation</a></li>
            <li><a href="#" role="menuitem">Landscaping</a></li>
          </ul>
        </div>
        <div class="mega-col">
          <div class="mega-col-label">Sustainability</div>
          <ul class="mega-links">
            <li><a href="#" role="menuitem">Passive Design</a></li>
            <li><a href="#" role="menuitem">Biophilic Integration</a></li>
            <li><a href="#" role="menuitem">Carbon Assessment</a></li>
            <li><a href="#" role="menuitem">Materials Research</a></li>
            <li><a href="#" role="menuitem">Living Certifications</a></li>
          </ul>
        </div>
        <div class="mega-footer">
          <span class="note">Every project is assigned a dedicated principal architect</span>
          <a href="#">Start a Project</a>
        </div>
      </div>
    </li>

    <!-- JOURNAL -->
    <li class="nav-item" role="none">
      <button type="button" class="nav-trigger" role="menuitem" aria-haspopup="true" aria-expanded="false">
        <span class="dot" aria-hidden="true"></span>
        <span class="label">Journal</span>
      </button>
      <div class="mega grid-journal" role="menu">
        <div class="mega-editorial">
          <div class="editorial-label">Recent Writing</div>
          <a href="#" class="editorial-card" role="menuitem">
            <img src="https://images.unsplash.com/photo-1502005229762-cf1b2da7c5d6?w=200&q=70" alt="" loading="lazy" />
            <span class="ec-text">
              <span class="ec-title">On the Grammar of Threshold Spaces</span>
              <span class="ec-meta">Essay &middot; 8 min read</span>
            </span>
          </a>
          <a href="#" class="editorial-card" role="menuitem">
            <img src="https://images.unsplash.com/photo-1586023492125-27b2c045efd7?w=200&q=70" alt="" loading="lazy" />
            <span class="ec-text">
              <span class="ec-title">Rammed Earth &amp; the Return of Slow Building</span>
              <span class="ec-meta">Material Study &middot; 6 min read</span>
            </span>
          </a>
          <a href="#" class="editorial-card" role="menuitem">
            <img src="https://images.unsplash.com/photo-1518780664697-55e3ad937233?w=200&q=70" alt="" loading="lazy" />
            <span class="ec-text">
              <span class="ec-title">What Scandinavian Light Teaches Us About Restraint</span>
              <span class="ec-meta">Reflection &middot; 5 min read</span>
            </span>
          </a>
        </div>
        <div class="mega-col">
          <div class="mega-col-label">Themes</div>
          <ul class="mega-links">
            <li><a href="#" role="menuitem">Biophilia</a></li>
            <li><a href="#" role="menuitem">Material Honesty</a></li>
            <li><a href="#" role="menuitem">Light &amp; Shadow</a></li>
            <li><a href="#" role="menuitem">Vernacular Forms</a></li>
            <li><a href="#" role="menuitem">Slow Architecture</a></li>
          </ul>
        </div>
        <div class="mega-col">
          <div class="mega-col-label">Series</div>
          <ul class="mega-links">
            <li><a href="#" role="menuitem">Site Visits</a></li>
            <li><a href="#" role="menuitem">Conversations</a></li>
            <li><a href="#" role="menuitem">Material Notes <span class="pill">New</span></a></li>
            <li><a href="#" role="menuitem">Process Diaries</a></li>
            <li><a href="#" role="menuitem">Book Reviews</a></li>
          </ul>
        </div>
        <div class="mega-footer">
          <span class="note">Published every other Thursday</span>
          <a href="#">Read the Journal</a>
        </div>
      </div>
    </li>

    <!-- STUDIO -->
    <li class="nav-item" role="none">
      <button type="button" class="nav-trigger" role="menuitem" aria-haspopup="true" aria-expanded="false">
        <span class="dot" aria-hidden="true"></span>
        <span class="label">Studio</span>
      </button>
      <div class="simple-drop" role="menu">
        <a href="#" role="menuitem">About the Practice</a>
        <a href="#" role="menuitem">The Team</a>
        <a href="#" role="menuitem">Philosophy &amp; Ethics</a>
        <a href="#" role="menuitem">Awards &amp; Press</a>
        <a href="#" role="menuitem">Open Positions</a>
      </div>
    </li>

    <!-- CONTACT -->
    <li class="nav-item" role="none">
      <button type="button" class="nav-trigger" role="menuitem" aria-haspopup="true" aria-expanded="false">
        <span class="dot" aria-hidden="true"></span>
        <span class="label">Contact</span>
      </button>
      <div class="simple-drop" role="menu">
        <a href="#" role="menuitem">New Enquiries</a>
        <a href="#" role="menuitem">Press &amp; Media</a>
        <a href="#" role="menuitem">Visit the Studio</a>
        <a href="#" role="menuitem">Collaborations</a>
      </div>
    </li>

  </ul>
</nav>
```

**CSS:**
```css
/* ─── 03 Biophilic Studio — warm linen architecture mega menu ───────
   Imports Fraunces + DM Sans. The paper-grain texture overlay from the
   original mock has been scoped to .mm-bio::before so it stays inside
   the demo wrapper. Botanical SVG corner motifs are inlined as
   background-image data URIs on .mega-col::after. */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,200;0,9..144,300;0,9..144,400;1,9..144,200;1,9..144,300&family=DM+Sans:ital,opsz,wght@0,9..40,200;0,9..40,300;0,9..40,400;1,9..40,300&display=swap');

.mm-bio {
  --mm-bio-clay: #e8ddd0;
  --mm-bio-linen: #f4f0e8;
  --mm-bio-bark: #3d2e20;
  --mm-bio-moss: #4a5e3a;
  --mm-bio-moss-light: #7a9164;
  --mm-bio-terra: #c2704a;
  --mm-bio-stone: #9e9085;
  --mm-bio-warm-white: #faf8f4;
  --mm-bio-border: rgba(61, 46, 32, 0.12);
  --mm-bio-border-mid: rgba(61, 46, 32, 0.2);
  --mm-bio-text: #3d2e20;
  --mm-bio-text-mid: rgba(61, 46, 32, 0.6);
  --mm-bio-text-dim: rgba(61, 46, 32, 0.4);

  position: relative;
  background: var(--mm-bio-warm-white);
  font-family: 'DM Sans', system-ui, sans-serif;
  width: 100%;
  min-height: 560px;
  overflow: hidden;
  box-sizing: border-box;
}

.mm-bio *,
.mm-bio *::before,
.mm-bio *::after { box-sizing: border-box; }

/* Paper grain — scoped to wrapper, not body */
.mm-bio::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 1;
}

.mm-bio .nav-bar {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  background: var(--mm-bio-warm-white);
  border-bottom: 1px solid var(--mm-bio-border);
  position: relative;
  z-index: 3;
}

/* botanical SVG decoration on left of bar */
.mm-bio .nav-bar::before {
  content: '';
  position: absolute;
  left: 24px;
  top: 50%;
  transform: translateY(-50%);
  width: 80px;
  height: 24px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 24'%3E%3Cpath d='M2,12 Q10,2 20,12 Q10,22 2,12' stroke='%234a5e3a' stroke-width='0.8' fill='none' opacity='0.4'/%3E%3Cpath d='M18,12 Q26,2 36,12 Q26,22 18,12' stroke='%234a5e3a' stroke-width='0.8' fill='none' opacity='0.3'/%3E%3Cpath d='M34,12 Q42,2 52,12 Q42,22 34,12' stroke='%234a5e3a' stroke-width='0.8' fill='none' opacity='0.2'/%3E%3Cline x1='2' y1='12' x2='78' y2='12' stroke='%234a5e3a' stroke-width='0.5' opacity='0.2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
}

.mm-bio .nav-item { position: relative; list-style: none; }

.mm-bio .nav-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 20px 26px;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 0.08em;
  color: var(--mm-bio-text-mid);
  text-transform: lowercase;
  background: transparent;
  border: 0;
  cursor: pointer;
  user-select: none;
  transition: color 0.3s ease;
  position: relative;
}

.mm-bio .nav-trigger .dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--mm-bio-terra);
  opacity: 0;
  transition: opacity 0.3s;
  flex-shrink: 0;
}
.mm-bio .nav-item:hover .nav-trigger,
.mm-bio .nav-item.mm-open .nav-trigger { color: var(--mm-bio-bark); }
.mm-bio .nav-item:hover .nav-trigger .dot,
.mm-bio .nav-item.mm-open .nav-trigger .dot { opacity: 1; }

.mm-bio .nav-trigger::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 26px;
  right: 26px;
  height: 1px;
  background: var(--mm-bio-terra);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.mm-bio .nav-item:hover .nav-trigger::after,
.mm-bio .nav-item.mm-open .nav-trigger::after { transform: scaleX(1); }

/* ── Mega Panel ── */
.mm-bio .mega {
  position: absolute;
  top: calc(100% + 1px);
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  background: var(--mm-bio-linen);
  border: 1px solid var(--mm-bio-border-mid);
  box-shadow: 0 8px 40px rgba(61, 46, 32, 0.1), 0 2px 8px rgba(61, 46, 32, 0.06);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  display: grid;
  overflow: hidden;
  z-index: 5;
}

.mm-bio .mega.grid-project { grid-template-columns: 260px 1fr 1fr; width: min(780px, calc(100vw - 32px)); }
.mm-bio .mega.grid-studio  { grid-template-columns: 1fr 1fr 1fr;   width: min(720px, calc(100vw - 32px)); }
.mm-bio .mega.grid-journal { grid-template-columns: 2fr 1fr 1fr;   width: min(760px, calc(100vw - 32px)); }

.mm-bio .nav-item:hover .mega,
.mm-bio .nav-item.mm-open .mega {
  opacity: 1;
  pointer-events: all;
  transform: translateX(-50%) translateY(0);
}

/* ── Feature image panel ── */
.mm-bio .mega-feature {
  position: relative;
  overflow: hidden;
  min-height: 320px;
}
.mm-bio .mega-feature img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), filter 0.6s;
  filter: saturate(0.85);
}
.mm-bio .nav-item:hover .mega-feature img,
.mm-bio .nav-item.mm-open .mega-feature img {
  transform: scale(1.04);
  filter: saturate(1);
}
.mm-bio .mega-feature-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 28px 22px 22px;
  background: linear-gradient(to top, rgba(61, 46, 32, 0.75) 0%, transparent 100%);
}
.mm-bio .mega-feature-caption .eyebrow {
  display: block;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 9px;
  font-weight: 300;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(244, 240, 232, 0.7);
  margin-bottom: 6px;
}
.mm-bio .mega-feature-caption .title {
  display: block;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 22px;
  font-weight: 200;
  font-style: italic;
  color: var(--mm-bio-linen);
  line-height: 1.2;
}

/* ── Link columns ── */
.mm-bio .mega-col {
  padding: 28px 24px;
  border-left: 1px solid var(--mm-bio-border);
  position: relative;
}
.mm-bio .mega-col.first { border-left: 0; }

.mm-bio .mega-col::after {
  content: '';
  position: absolute;
  top: 16px;
  right: 16px;
  width: 28px;
  height: 28px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16,28 Q4,20 4,10 Q10,4 16,8 Q22,4 28,10 Q28,20 16,28z' stroke='%234a5e3a' stroke-width='0.6' fill='none' opacity='0.15'/%3E%3Cline x1='16' y1='8' x2='16' y2='28' stroke='%234a5e3a' stroke-width='0.5' opacity='0.12'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.6;
}

.mm-bio .mega-col-label {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 9px;
  font-weight: 300;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mm-bio-stone);
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--mm-bio-border);
}

.mm-bio .mega-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.mm-bio .mega-links li { list-style: none; }
.mm-bio .mega-links li a {
  display: block;
  padding: 9px 0;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 17px;
  font-weight: 200;
  color: var(--mm-bio-text);
  text-decoration: none;
  letter-spacing: 0.01em;
  border-bottom: 1px solid rgba(61, 46, 32, 0.06);
  transition: color 0.3s, padding-left 0.3s;
  position: relative;
  line-height: 1.3;
}
.mm-bio .mega-links li a:hover {
  color: var(--mm-bio-terra);
  padding-left: 12px;
}
.mm-bio .mega-links li a .note {
  display: block;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 10px;
  font-weight: 200;
  color: var(--mm-bio-text-dim);
  margin-top: 1px;
  font-style: normal;
  letter-spacing: 0;
  transition: color 0.3s;
}
.mm-bio .mega-links li a:hover .note { color: rgba(194, 112, 74, 0.6); }
.mm-bio .mega-links li a .pill {
  display: inline-block;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 8px;
  font-weight: 300;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mm-bio-moss-light);
  background: rgba(74, 94, 58, 0.1);
  padding: 2px 7px;
  border-radius: 20px;
  margin-left: 8px;
  vertical-align: middle;
}

/* ── Editorial column (Journal) ── */
.mm-bio .mega-editorial {
  padding: 28px 24px;
  border-left: 1px solid var(--mm-bio-border);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.mm-bio .editorial-label {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 9px;
  font-weight: 300;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mm-bio-stone);
  margin-bottom: 4px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--mm-bio-border);
}
.mm-bio .editorial-card {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  cursor: pointer;
  text-decoration: none;
}
.mm-bio .editorial-card img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  flex-shrink: 0;
  filter: saturate(0.8);
  transition: filter 0.3s, transform 0.3s;
}
.mm-bio .editorial-card:hover img {
  filter: saturate(1);
  transform: scale(1.03);
}
.mm-bio .editorial-card .ec-text { display: flex; flex-direction: column; }
.mm-bio .editorial-card .ec-text .ec-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 13px;
  font-weight: 300;
  color: var(--mm-bio-bark);
  line-height: 1.4;
  transition: color 0.3s;
}
.mm-bio .editorial-card:hover .ec-title { color: var(--mm-bio-terra); }
.mm-bio .editorial-card .ec-text .ec-meta {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 10px;
  font-weight: 200;
  color: var(--mm-bio-text-dim);
  margin-top: 3px;
  letter-spacing: 0.04em;
}

/* ── Footer ── */
.mm-bio .mega-footer {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  background: rgba(61, 46, 32, 0.04);
  border-top: 1px solid var(--mm-bio-border);
  flex-wrap: wrap;
  gap: 12px;
}
.mm-bio .mega-footer .note {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 10px;
  font-weight: 200;
  font-style: italic;
  color: var(--mm-bio-text-dim);
  letter-spacing: 0.02em;
}
.mm-bio .mega-footer a {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mm-bio-terra);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: gap 0.3s, color 0.3s;
}
.mm-bio .mega-footer a::after { content: '\2192'; font-size: 12px; }
.mm-bio .mega-footer a:hover { gap: 14px; color: var(--mm-bio-bark); }

/* ── Simple drop ── */
.mm-bio .simple-drop {
  position: absolute;
  top: calc(100% + 1px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  width: 220px;
  background: var(--mm-bio-linen);
  border: 1px solid var(--mm-bio-border-mid);
  box-shadow: 0 8px 30px rgba(61, 46, 32, 0.1);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  padding: 12px 0;
  z-index: 5;
}
.mm-bio .nav-item:hover .simple-drop,
.mm-bio .nav-item.mm-open .simple-drop {
  opacity: 1;
  pointer-events: all;
  transform: translateX(-50%) translateY(0);
}
.mm-bio .simple-drop a {
  display: block;
  padding: 10px 22px;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 15px;
  font-weight: 200;
  color: var(--mm-bio-text);
  text-decoration: none;
  transition: color 0.25s, background 0.25s, padding-left 0.3s;
  border-bottom: 1px solid rgba(61, 46, 32, 0.05);
}
.mm-bio .simple-drop a:hover {
  color: var(--mm-bio-terra);
  background: rgba(194, 112, 74, 0.05);
  padding-left: 32px;
}

/* ── Stagger ── */
.mm-bio .nav-item:hover .mega-links li,
.mm-bio .nav-item.mm-open .mega-links li {
  animation: mm-bio-rise 0.45s ease both;
}
.mm-bio .nav-item:hover .mega-links li:nth-child(1),
.mm-bio .nav-item.mm-open .mega-links li:nth-child(1) { animation-delay: 0.06s; }
.mm-bio .nav-item:hover .mega-links li:nth-child(2),
.mm-bio .nav-item.mm-open .mega-links li:nth-child(2) { animation-delay: 0.11s; }
.mm-bio .nav-item:hover .mega-links li:nth-child(3),
.mm-bio .nav-item.mm-open .mega-links li:nth-child(3) { animation-delay: 0.16s; }
.mm-bio .nav-item:hover .mega-links li:nth-child(4),
.mm-bio .nav-item.mm-open .mega-links li:nth-child(4) { animation-delay: 0.21s; }
.mm-bio .nav-item:hover .mega-links li:nth-child(5),
.mm-bio .nav-item.mm-open .mega-links li:nth-child(5) { animation-delay: 0.26s; }

@keyframes mm-bio-rise {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 760px) {
  .mm-bio .nav-bar::before { display: none; }
  .mm-bio .nav-trigger { padding: 16px 12px; font-size: 11px; }
  .mm-bio .mega.grid-project,
  .mm-bio .mega.grid-studio,
  .mm-bio .mega.grid-journal {
    grid-template-columns: 1fr;
    width: calc(100vw - 24px);
  }
  .mm-bio .mega-feature { min-height: 180px; }
  .mm-bio .mega-col,
  .mm-bio .mega-editorial { border-left: 0; border-top: 1px solid var(--mm-bio-border); }
}

@media (prefers-reduced-motion: reduce) {
  .mm-bio .mega,
  .mm-bio .simple-drop,
  .mm-bio .mega-feature img,
  .mm-bio .editorial-card img,
  .mm-bio .mega-links li a,
  .mm-bio .mega-footer a { transition: none; animation: none; }
  .mm-bio .nav-item:hover .mega-feature img,
  .mm-bio .nav-item.mm-open .mega-feature img { transform: none; }
}
```

**JS:**
```js
(() => {
  document.querySelectorAll('.mm-noi .nav-item, .mm-cyb .nav-item, .mm-bio .nav-item, .mm-dep .nav-item, .mm-typ .nav-item, .mm-dea .nav-item').forEach(item => {
    const trigger = item.querySelector('.nav-trigger');
    if (!trigger) return;

    // Mouse + keyboard: toggle open on click / Enter / Space
    trigger.addEventListener('click', e => {
      e.preventDefault();
      const isOpen = item.classList.contains('mm-open');
      // Close any sibling that's open so only one panel shows at a time
      item.parentElement?.querySelectorAll('.nav-item.mm-open').forEach(other => {
        if (other !== item) other.classList.remove('mm-open');
        const otherBtn = other.querySelector('.nav-trigger');
        if (otherBtn) otherBtn.setAttribute('aria-expanded', 'false');
      });
      item.classList.toggle('mm-open', !isOpen);
      trigger.setAttribute('aria-expanded', String(!isOpen));
    });
  });

  // Outside-click closes all open panels
  document.addEventListener('click', e => {
    document.querySelectorAll('.mm-noi .nav-item.mm-open, .mm-cyb .nav-item.mm-open, .mm-bio .nav-item.mm-open, .mm-dep .nav-item.mm-open, .mm-typ .nav-item.mm-open, .mm-dea .nav-item.mm-open').forEach(item => {
      if (!item.contains(e.target)) {
        item.classList.remove('mm-open');
        const btn = item.querySelector('.nav-trigger');
        if (btn) btn.setAttribute('aria-expanded', 'false');
      }
    });
  });

  // Escape closes the currently open panel
  document.addEventListener('keydown', e => {
    if (e.key !== 'Escape') return;
    document.querySelectorAll('.mm-noi .nav-item.mm-open, .mm-cyb .nav-item.mm-open, .mm-bio .nav-item.mm-open, .mm-dep .nav-item.mm-open, .mm-typ .nav-item.mm-open, .mm-dea .nav-item.mm-open').forEach(item => {
      item.classList.remove('mm-open');
      const btn = item.querySelector('.nav-trigger');
      if (btn) btn.setAttribute('aria-expanded', 'false');
    });
  });
})();
```

### 04. Swiss Grid Department Store

**Type:** CSS + JS
**Description:** Ivory canvas with a faint grid overlay, Playfair Display italic headings, Jost link text, DM Mono for counts. The Departments trigger opens a 5-column panel: a left department tile showing total counts, then one tinted column per macro-department (Women, Men, Kids, Home) with live item counts next to every sub-category, NEW/SALE tags, and a "View All" CTA row. A black footer strip with a gold highlighted sale link anchors the panel. Surfaces every branch of the site tree at once — best for marketplaces, department stores, multi-vertical retail.

**HTML:**
```html
<nav class="mm-dep" aria-label="Swiss Grid Department Store menu">

  <!-- Utility bar -->
  <div class="utility-bar">
    <a href="#">Store Locator</a>
    <a href="#">Order Tracker</a>
    <a href="#">Gift Cards</a>
    <a href="#">Sign In</a>
  </div>

  <ul class="nav-bar" role="menubar">

    <!-- DEPARTMENTS -->
    <li class="nav-item" role="none">
      <button type="button" class="nav-trigger" role="menuitem" aria-haspopup="true" aria-expanded="false">
        Departments <span class="count" aria-hidden="true">4</span>
      </button>
      <div class="mega mega-dept" role="menu">

        <div class="dept-tile" aria-hidden="true">
          <div class="dept-tile-pattern">
            <span></span><span></span><span></span><span></span>
            <span></span><span></span><span></span><span></span>
            <span></span><span></span><span></span><span></span>
            <span></span><span></span><span></span><span></span>
          </div>
          <div class="dept-eyebrow">Shop By</div>
          <div class="dept-name">All Depart&shy;ments</div>
          <div class="dept-count">4 departments &middot; 280+ categories</div>
        </div>

        <div class="dept-col women">
          <div class="dept-col-header">
            <span class="dept-label">Women</span>
            <span class="dept-num">94 categories</span>
          </div>
          <ul class="sub-list">
            <li><a href="#" role="menuitem">Clothing <span class="n">48</span></a></li>
            <li><a href="#" role="menuitem">Shoes <span class="n">22</span></a></li>
            <li><a href="#" role="menuitem">Bags &amp; Purses <span class="n">16</span></a></li>
            <li><a href="#" role="menuitem">Jewellery <span class="n">18</span></a></li>
            <li><a href="#" role="menuitem">Swimwear <span class="new-tag">New</span></a></li>
            <li><a href="#" role="menuitem">Lingerie <span class="n">12</span></a></li>
            <li><a href="#" role="menuitem">Sportswear <span class="n">14</span></a></li>
          </ul>
          <div class="view-all-row"><a href="#">All Women</a></div>
        </div>

        <div class="dept-col men">
          <div class="dept-col-header">
            <span class="dept-label">Men</span>
            <span class="dept-num">72 categories</span>
          </div>
          <ul class="sub-list">
            <li><a href="#" role="menuitem">Clothing <span class="n">38</span></a></li>
            <li><a href="#" role="menuitem">Shoes <span class="n">18</span></a></li>
            <li><a href="#" role="menuitem">Bags &amp; Wallets <span class="n">14</span></a></li>
            <li><a href="#" role="menuitem">Grooming <span class="n">10</span></a></li>
            <li><a href="#" role="menuitem">Sportswear <span class="n">16</span></a></li>
            <li><a href="#" role="menuitem">Accessories <span class="n">12</span></a></li>
            <li><a href="#" role="menuitem">Tailoring <span class="new-tag">New</span></a></li>
          </ul>
          <div class="view-all-row"><a href="#">All Men</a></div>
        </div>

        <div class="dept-col kids">
          <div class="dept-col-header">
            <span class="dept-label">Kids</span>
            <span class="dept-num">58 categories</span>
          </div>
          <ul class="sub-list">
            <li><a href="#" role="menuitem">Girls (2&ndash;16) <span class="n">22</span></a></li>
            <li><a href="#" role="menuitem">Boys (2&ndash;16) <span class="n">20</span></a></li>
            <li><a href="#" role="menuitem">Babies &amp; Toddlers <span class="n">18</span></a></li>
            <li><a href="#" role="menuitem">School Uniform <span class="n">10</span></a></li>
            <li><a href="#" role="menuitem">Shoes <span class="n">14</span></a></li>
            <li><a href="#" role="menuitem">Toys &amp; Play</a></li>
            <li><a href="#" role="menuitem">Back-to-School <span class="sale-tag">Sale</span></a></li>
          </ul>
          <div class="view-all-row"><a href="#">All Kids</a></div>
        </div>

        <div class="dept-col home">
          <div class="dept-col-header">
            <span class="dept-label">Home</span>
            <span class="dept-num">56 categories</span>
          </div>
          <ul class="sub-list">
            <li><a href="#" role="menuitem">Furniture <span class="n">24</span></a></li>
            <li><a href="#" role="menuitem">Bedding <span class="n">16</span></a></li>
            <li><a href="#" role="menuitem">Kitchen &amp; Dining <span class="n">20</span></a></li>
            <li><a href="#" role="menuitem">Lighting <span class="n">12</span></a></li>
            <li><a href="#" role="menuitem">Rugs &amp; Textiles <span class="n">14</span></a></li>
            <li><a href="#" role="menuitem">Garden <span class="n">10</span></a></li>
            <li><a href="#" role="menuitem">New Arrivals <span class="new-tag">New</span></a></li>
          </ul>
          <div class="view-all-row"><a href="#">All Home</a></div>
        </div>

        <div class="mega-footer">
          <div class="f-left">
            <a href="#">New In This Week</a>
            <a href="#">Bestsellers</a>
            <a href="#">Trending Now</a>
            <a href="#" class="f-highlight">&#10024; Summer Sale &mdash; Up to 50% Off</a>
          </div>
          <a href="#">View Full Sitemap &rarr;</a>
        </div>
      </div>
    </li>

    <!-- LIFESTYLE -->
    <li class="nav-item" role="none">
      <button type="button" class="nav-trigger" role="menuitem" aria-haspopup="true" aria-expanded="false">
        Lifestyle <span class="count" aria-hidden="true">3</span>
      </button>
      <div class="mega mega-life" role="menu">
        <div class="dept-tile" aria-hidden="true">
          <div class="dept-tile-pattern">
            <span></span><span></span><span></span><span></span>
            <span></span><span></span><span></span><span></span>
            <span></span><span></span><span></span><span></span>
            <span></span><span></span><span></span><span></span>
          </div>
          <div class="dept-eyebrow">Shop By</div>
          <div class="dept-name">Life&shy;style</div>
          <div class="dept-count">3 sections &middot; 110+ categories</div>
        </div>
        <div class="dept-col beauty">
          <div class="dept-col-header">
            <span class="dept-label">Beauty</span>
            <span class="dept-num">40 categories</span>
          </div>
          <ul class="sub-list">
            <li><a href="#" role="menuitem">Skincare <span class="n">18</span></a></li>
            <li><a href="#" role="menuitem">Fragrance <span class="n">12</span></a></li>
            <li><a href="#" role="menuitem">Makeup <span class="n">20</span></a></li>
            <li><a href="#" role="menuitem">Haircare <span class="n">14</span></a></li>
            <li><a href="#" role="menuitem">Wellness <span class="new-tag">New</span></a></li>
          </ul>
          <div class="view-all-row"><a href="#">All Beauty</a></div>
        </div>
        <div class="dept-col sport">
          <div class="dept-col-header">
            <span class="dept-label">Sport</span>
            <span class="dept-num">36 categories</span>
          </div>
          <ul class="sub-list">
            <li><a href="#" role="menuitem">Running <span class="n">14</span></a></li>
            <li><a href="#" role="menuitem">Gym &amp; Training <span class="n">12</span></a></li>
            <li><a href="#" role="menuitem">Yoga &amp; Pilates <span class="n">10</span></a></li>
            <li><a href="#" role="menuitem">Cycling <span class="n">8</span></a></li>
            <li><a href="#" role="menuitem">Outdoor &amp; Hiking <span class="n">10</span></a></li>
          </ul>
          <div class="view-all-row"><a href="#">All Sport</a></div>
        </div>
        <div class="dept-col travel">
          <div class="dept-col-header">
            <span class="dept-label">Travel</span>
            <span class="dept-num">34 categories</span>
          </div>
          <ul class="sub-list">
            <li><a href="#" role="menuitem">Luggage <span class="n">12</span></a></li>
            <li><a href="#" role="menuitem">Carry-ons <span class="n">8</span></a></li>
            <li><a href="#" role="menuitem">Travel Accessories <span class="n">16</span></a></li>
            <li><a href="#" role="menuitem">Packing Cubes <span class="n">6</span></a></li>
            <li><a href="#" role="menuitem">Passport Holders <span class="new-tag">New</span></a></li>
          </ul>
          <div class="view-all-row"><a href="#">All Travel</a></div>
        </div>
        <div class="mega-footer">
          <div class="f-left">
            <a href="#">Staff Picks</a>
            <a href="#">Gift Guides</a>
            <a href="#" class="f-highlight">&#10024; New Wellness Arrivals</a>
          </div>
          <a href="#">View All Lifestyle &rarr;</a>
        </div>
      </div>
    </li>

    <!-- BRANDS -->
    <li class="nav-item" role="none">
      <button type="button" class="nav-trigger" role="menuitem" aria-haspopup="true" aria-expanded="false">Brands</button>
      <div class="mega mega-brands" role="menu">
        <div class="brand-col">
          <div class="brand-col-title">Fashion</div>
          <ul class="brand-list">
            <li><a href="#" role="menuitem">Calvin Klein</a></li>
            <li><a href="#" role="menuitem">Ralph Lauren</a></li>
            <li><a href="#" role="menuitem">Tommy Hilfiger</a></li>
            <li><a href="#" role="menuitem">BOSS</a></li>
            <li><a href="#" role="menuitem">Polo Sport</a></li>
          </ul>
        </div>
        <div class="brand-col">
          <div class="brand-col-title">Footwear</div>
          <ul class="brand-list">
            <li><a href="#" role="menuitem">Nike</a></li>
            <li><a href="#" role="menuitem">Adidas</a></li>
            <li><a href="#" role="menuitem">New Balance</a></li>
            <li><a href="#" role="menuitem">Dr. Martens</a></li>
            <li><a href="#" role="menuitem">Clarks</a></li>
          </ul>
        </div>
        <div class="brand-col">
          <div class="brand-col-title">Beauty</div>
          <ul class="brand-list">
            <li><a href="#" role="menuitem">The Ordinary</a></li>
            <li><a href="#" role="menuitem">Charlotte Tilbury</a></li>
            <li><a href="#" role="menuitem">NARS</a></li>
            <li><a href="#" role="menuitem">Aesop</a></li>
            <li><a href="#" role="menuitem">Tatcha</a></li>
          </ul>
        </div>
        <div class="brand-col">
          <div class="brand-col-title">Home</div>
          <ul class="brand-list">
            <li><a href="#" role="menuitem">HAY</a></li>
            <li><a href="#" role="menuitem">Muuto</a></li>
            <li><a href="#" role="menuitem">&amp;Tradition</a></li>
            <li><a href="#" role="menuitem">Ferm Living</a></li>
            <li><a href="#" role="menuitem">Menu</a></li>
          </ul>
        </div>
        <div class="mega-footer">
          <div class="f-left">
            <a href="#">View All Brands A&ndash;Z</a>
            <a href="#" class="f-highlight">&#10024; Brand of the Month: Cos</a>
          </div>
          <a href="#">Brand Directory &rarr;</a>
        </div>
      </div>
    </li>

    <!-- ABOUT -->
    <li class="nav-item" role="none">
      <button type="button" class="nav-trigger" role="menuitem" aria-haspopup="true" aria-expanded="false">About</button>
    </li>

  </ul>
</nav>
```

**CSS:**
```css
/* ─── 04 Swiss Grid Department Store — full taxonomy mega menu ──────
   Imports Playfair Display + Jost + DM Mono. The faint grid overlay
   from the original (body::before) is scoped to .mm-dep::before so
   it stays inside the demo. Drop-shadow box-shadow on the panel
   reads as a print-style hard offset. */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,700;1,400;1,500&family=DM+Mono:wght@300;400&family=Jost:wght@200;300;400;500&display=swap');

.mm-dep {
  --mm-dep-ivory: #f7f4ee;
  --mm-dep-paper: #ede9e0;
  --mm-dep-linen: #e5dfd3;
  --mm-dep-ink: #1a1714;
  --mm-dep-ink-mid: rgba(26, 23, 20, 0.55);
  --mm-dep-ink-dim: rgba(26, 23, 20, 0.3);
  --mm-dep-rule: rgba(26, 23, 20, 0.1);
  --mm-dep-rule-mid: rgba(26, 23, 20, 0.18);
  --mm-dep-accent: #2d6a4f;
  --mm-dep-accent2: #b5451b;
  --mm-dep-mono: 'DM Mono', ui-monospace, monospace;

  position: relative;
  background: var(--mm-dep-ivory);
  font-family: 'Jost', system-ui, sans-serif;
  width: 100%;
  min-height: 600px;
  overflow: hidden;
  box-sizing: border-box;
}

.mm-dep *,
.mm-dep *::before,
.mm-dep *::after { box-sizing: border-box; }

/* faint grid lines — scoped to wrapper, not body */
.mm-dep::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--mm-dep-rule) 1px, transparent 1px),
    linear-gradient(90deg, var(--mm-dep-rule) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
  z-index: 1;
}

.mm-dep .utility-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 28px;
  padding: 8px 32px;
  background: var(--mm-dep-ink);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  position: relative;
  z-index: 3;
}
.mm-dep .utility-bar a {
  font-family: var(--mm-dep-mono);
  font-size: 9px;
  font-weight: 300;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.45);
  text-decoration: none;
  text-transform: uppercase;
  transition: color 0.2s;
}
.mm-dep .utility-bar a:hover { color: rgba(255, 255, 255, 0.85); }

.mm-dep .nav-bar {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--mm-dep-ivory);
  border-bottom: 2px solid var(--mm-dep-ink);
  position: relative;
  z-index: 4;
}

.mm-dep .nav-item { position: relative; list-style: none; }

.mm-dep .nav-trigger {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 26px;
  height: 60px;
  font-family: 'Jost', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mm-dep-ink-mid);
  background: transparent;
  border: 0;
  border-right: 1px solid var(--mm-dep-rule);
  cursor: pointer;
  user-select: none;
  transition: color 0.25s;
  position: relative;
}
.mm-dep .nav-bar .nav-item:first-child .nav-trigger { border-left: 1px solid var(--mm-dep-rule); }

.mm-dep .nav-trigger .count {
  font-family: var(--mm-dep-mono);
  font-size: 8px;
  color: var(--mm-dep-ink-dim);
  letter-spacing: 0;
  transition: color 0.25s;
}
.mm-dep .nav-item:hover .nav-trigger,
.mm-dep .nav-item.mm-open .nav-trigger { color: var(--mm-dep-ink); }
.mm-dep .nav-item:hover .nav-trigger .count,
.mm-dep .nav-item.mm-open .nav-trigger .count { color: var(--mm-dep-accent); }

.mm-dep .nav-trigger::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--mm-dep-ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.mm-dep .nav-item:hover .nav-trigger::after,
.mm-dep .nav-item.mm-open .nav-trigger::after { transform: scaleX(1); }

/* ── Mega panel ── */
.mm-dep .mega {
  position: absolute;
  top: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%) translateY(-10px);
  background: var(--mm-dep-ivory);
  border: 2px solid var(--mm-dep-ink);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  display: grid;
  overflow: hidden;
  box-shadow: 6px 6px 0 var(--mm-dep-ink);
  min-width: min(900px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  z-index: 5;
}
.mm-dep .nav-item:hover .mega,
.mm-dep .nav-item.mm-open .mega {
  opacity: 1;
  pointer-events: all;
  transform: translateX(-50%) translateY(0);
}

.mm-dep .mega-dept   { grid-template-columns: 200px repeat(4, 1fr); }
.mm-dep .mega-life   { grid-template-columns: 220px repeat(3, 1fr); }
.mm-dep .mega-brands { grid-template-columns: repeat(4, 1fr); min-width: min(760px, calc(100vw - 32px)); }

/* ── Department tile ── */
.mm-dep .dept-tile {
  border-right: 2px solid var(--mm-dep-ink);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 22px 20px;
  background: var(--mm-dep-paper);
  min-height: 400px;
  position: relative;
  overflow: hidden;
}
.mm-dep .dept-tile-pattern {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  opacity: 0.06;
}
.mm-dep .dept-tile-pattern span {
  border-right: 1px solid var(--mm-dep-ink);
  border-bottom: 1px solid var(--mm-dep-ink);
}
.mm-dep .dept-tile .dept-eyebrow {
  font-family: var(--mm-dep-mono);
  font-size: 8px;
  font-weight: 300;
  letter-spacing: 0.2em;
  color: var(--mm-dep-ink-dim);
  text-transform: uppercase;
  margin-bottom: 8px;
  position: relative;
}
.mm-dep .dept-tile .dept-name {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 32px;
  font-weight: 400;
  font-style: italic;
  color: var(--mm-dep-ink);
  line-height: 1.1;
  margin-bottom: 14px;
  position: relative;
}
.mm-dep .dept-tile .dept-count {
  font-family: var(--mm-dep-mono);
  font-size: 10px;
  font-weight: 300;
  color: var(--mm-dep-accent);
  letter-spacing: 0.1em;
  position: relative;
}

/* ── Sub-department column ── */
.mm-dep .dept-col {
  border-right: 1px solid var(--mm-dep-rule-mid);
  padding: 0;
}
.mm-dep .dept-col:last-of-type { border-right: none; }

.mm-dep .dept-col-header {
  padding: 16px 18px 12px;
  border-bottom: 2px solid var(--mm-dep-ink);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.mm-dep .dept-col-header .dept-label {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 20px;
  font-weight: 500;
  color: var(--mm-dep-ink);
  line-height: 1;
}
.mm-dep .dept-col-header .dept-num {
  font-family: var(--mm-dep-mono);
  font-size: 9px;
  color: var(--mm-dep-ink-dim);
  letter-spacing: 0.05em;
}

.mm-dep .dept-col.women .dept-col-header,
.mm-dep .dept-col.beauty .dept-col-header { background: #f0e8e4; }
.mm-dep .dept-col.men .dept-col-header,
.mm-dep .dept-col.sport .dept-col-header  { background: #e4eaf0; }
.mm-dep .dept-col.kids .dept-col-header,
.mm-dep .dept-col.travel .dept-col-header { background: #eaf0e6; }
.mm-dep .dept-col.home .dept-col-header   { background: #f0ece4; }

.mm-dep .sub-list {
  list-style: none;
  margin: 0;
  padding: 12px 0;
}
.mm-dep .sub-list li { list-style: none; }

.mm-dep .sub-list li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 18px;
  font-family: 'Jost', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 300;
  color: var(--mm-dep-ink-mid);
  text-decoration: none;
  transition: color 0.2s, background 0.2s, padding-left 0.25s;
  border-bottom: 1px solid var(--mm-dep-rule);
  position: relative;
}
.mm-dep .sub-list li a:last-child { border-bottom: none; }
.mm-dep .sub-list li a .n {
  font-family: var(--mm-dep-mono);
  font-size: 9px;
  color: var(--mm-dep-ink-dim);
  letter-spacing: 0.05em;
  transition: color 0.2s;
  flex-shrink: 0;
}
.mm-dep .sub-list li a:hover {
  color: var(--mm-dep-ink);
  background: var(--mm-dep-paper);
  padding-left: 24px;
}
.mm-dep .sub-list li a:hover .n { color: var(--mm-dep-accent); }

.mm-dep .sub-list li a .new-tag,
.mm-dep .sub-list li a .sale-tag {
  font-family: var(--mm-dep-mono);
  font-size: 7.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mm-dep-ivory);
  padding: 2px 6px;
  margin-left: 6px;
}
.mm-dep .sub-list li a .new-tag  { background: var(--mm-dep-accent); }
.mm-dep .sub-list li a .sale-tag { background: var(--mm-dep-accent2); }

.mm-dep .view-all-row {
  padding: 12px 18px;
  border-top: 2px solid var(--mm-dep-ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.mm-dep .view-all-row a {
  font-family: var(--mm-dep-mono);
  font-size: 9px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--mm-dep-ink);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: gap 0.3s;
}
.mm-dep .view-all-row a::after { content: '\2192'; }
.mm-dep .view-all-row a:hover { gap: 14px; }

/* ── Brands grid ── */
.mm-dep .brand-col {
  padding: 20px 22px;
  border-right: 1px solid var(--mm-dep-rule-mid);
}
.mm-dep .brand-col:last-of-type { border-right: none; }
.mm-dep .brand-col-title {
  font-family: var(--mm-dep-mono);
  font-size: 8px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mm-dep-ink-dim);
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--mm-dep-rule-mid);
}
.mm-dep .brand-list { list-style: none; margin: 0; padding: 0; }
.mm-dep .brand-list li a {
  display: block;
  padding: 8px 0;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 15px;
  font-weight: 400;
  color: var(--mm-dep-ink-mid);
  text-decoration: none;
  border-bottom: 1px solid var(--mm-dep-rule);
  transition: color 0.2s, padding-left 0.25s;
}
.mm-dep .brand-list li a:hover { color: var(--mm-dep-ink); padding-left: 8px; }

/* ── Mega footer ── */
.mm-dep .mega-footer {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 22px;
  background: var(--mm-dep-ink);
  flex-wrap: wrap;
  gap: 12px;
}
.mm-dep .mega-footer .f-left { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.mm-dep .mega-footer a {
  font-family: var(--mm-dep-mono);
  font-size: 9px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
  transition: color 0.2s;
}
.mm-dep .mega-footer a:hover { color: #fff; }
.mm-dep .mega-footer .f-highlight { color: #f5c842 !important; }

/* Stagger */
.mm-dep .nav-item:hover .sub-list li,
.mm-dep .nav-item.mm-open .sub-list li { animation: mm-dep-up 0.35s ease both; }
.mm-dep .nav-item:hover .sub-list li:nth-child(1),
.mm-dep .nav-item.mm-open .sub-list li:nth-child(1) { animation-delay: 0.04s; }
.mm-dep .nav-item:hover .sub-list li:nth-child(2),
.mm-dep .nav-item.mm-open .sub-list li:nth-child(2) { animation-delay: 0.08s; }
.mm-dep .nav-item:hover .sub-list li:nth-child(3),
.mm-dep .nav-item.mm-open .sub-list li:nth-child(3) { animation-delay: 0.12s; }
.mm-dep .nav-item:hover .sub-list li:nth-child(4),
.mm-dep .nav-item.mm-open .sub-list li:nth-child(4) { animation-delay: 0.16s; }
.mm-dep .nav-item:hover .sub-list li:nth-child(5),
.mm-dep .nav-item.mm-open .sub-list li:nth-child(5) { animation-delay: 0.20s; }
.mm-dep .nav-item:hover .sub-list li:nth-child(6),
.mm-dep .nav-item.mm-open .sub-list li:nth-child(6) { animation-delay: 0.24s; }
.mm-dep .nav-item:hover .sub-list li:nth-child(7),
.mm-dep .nav-item.mm-open .sub-list li:nth-child(7) { animation-delay: 0.28s; }

@keyframes mm-dep-up {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 900px) {
  .mm-dep .nav-trigger { padding: 0 14px; font-size: 10px; }
  .mm-dep .mega-dept,
  .mm-dep .mega-life,
  .mm-dep .mega-brands {
    grid-template-columns: 1fr;
    min-width: calc(100vw - 24px);
  }
  .mm-dep .dept-tile { min-height: 160px; border-right: 0; border-bottom: 2px solid var(--mm-dep-ink); }
  .mm-dep .dept-col, .mm-dep .brand-col {
    border-right: 0;
    border-bottom: 1px solid var(--mm-dep-rule-mid);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mm-dep .mega,
  .mm-dep .sub-list li,
  .mm-dep .sub-list li a,
  .mm-dep .view-all-row a { transition: none; animation: none; }
}
```

**JS:**
```js
(() => {
  document.querySelectorAll('.mm-noi .nav-item, .mm-cyb .nav-item, .mm-bio .nav-item, .mm-dep .nav-item, .mm-typ .nav-item, .mm-dea .nav-item').forEach(item => {
    const trigger = item.querySelector('.nav-trigger');
    if (!trigger) return;

    // Mouse + keyboard: toggle open on click / Enter / Space
    trigger.addEventListener('click', e => {
      e.preventDefault();
      const isOpen = item.classList.contains('mm-open');
      // Close any sibling that's open so only one panel shows at a time
      item.parentElement?.querySelectorAll('.nav-item.mm-open').forEach(other => {
        if (other !== item) other.classList.remove('mm-open');
        const otherBtn = other.querySelector('.nav-trigger');
        if (otherBtn) otherBtn.setAttribute('aria-expanded', 'false');
      });
      item.classList.toggle('mm-open', !isOpen);
      trigger.setAttribute('aria-expanded', String(!isOpen));
    });
  });

  // Outside-click closes all open panels
  document.addEventListener('click', e => {
    document.querySelectorAll('.mm-noi .nav-item.mm-open, .mm-cyb .nav-item.mm-open, .mm-bio .nav-item.mm-open, .mm-dep .nav-item.mm-open, .mm-typ .nav-item.mm-open, .mm-dea .nav-item.mm-open').forEach(item => {
      if (!item.contains(e.target)) {
        item.classList.remove('mm-open');
        const btn = item.querySelector('.nav-trigger');
        if (btn) btn.setAttribute('aria-expanded', 'false');
      }
    });
  });

  // Escape closes the currently open panel
  document.addEventListener('keydown', e => {
    if (e.key !== 'Escape') return;
    document.querySelectorAll('.mm-noi .nav-item.mm-open, .mm-cyb .nav-item.mm-open, .mm-bio .nav-item.mm-open, .mm-dep .nav-item.mm-open, .mm-typ .nav-item.mm-open, .mm-dea .nav-item.mm-open').forEach(item => {
      item.classList.remove('mm-open');
      const btn = item.querySelector('.nav-trigger');
      if (btn) btn.setAttribute('aria-expanded', 'false');
    });
  });
})();
```

### 05. Precision Outdoor Gear Finder

**Type:** CSS + JS
**Description:** Dark olive / slate panel with Bebas Neue display + Barlow / Barlow Condensed text. Each nav item opens a panel with a left stats sidebar (types, brands, in-stock count, lime CTA button) and columned specific-type lists — not "Footwear" but "Road Running Shoes (184)", "Trail Running Shoes", "Waterproof Boots (GTX)". Every column has Quick-Jump filter pills (Gore-Tex, Wide Fit, Fill Power) so shoppers skip landing pages entirely. Lime accent + orange "Hot" badges drive urgency. Best for outdoor gear, sports retail, hardware stores — anywhere the long tail matters.

**HTML:**
```html
<nav class="mm-typ" aria-label="Precision Outdoor Gear menu">
  <div class="top-strip">
    <span>Free shipping on orders $75+</span>
    <span class="highlight">&#9889; Flash Deal: 30% off all trail footwear today only</span>
    <a href="#">Find a Store</a>
  </div>

  <ul class="nav-bar" role="menubar">

    <!-- FOOTWEAR -->
    <li class="nav-item" role="none">
      <button type="button" class="nav-trigger" role="menuitem" aria-haspopup="true" aria-expanded="false">
        <span class="icon" aria-hidden="true">&#9971;</span> Footwear
      </button>
      <div class="mega mega-foot" role="menu">

        <div class="mega-sidebar">
          <div class="sidebar-cat-title">Footwear</div>
          <div class="sidebar-sub">All types, all terrain</div>
          <div class="sidebar-stat">
            <div class="stat-row"><span class="s-label">Types</span><span class="s-val">22</span></div>
            <div class="stat-row"><span class="s-label">Brands</span><span class="s-val">18</span></div>
            <div class="stat-row"><span class="s-label">In Stock</span><span class="s-val">1,240</span></div>
            <div class="stat-row"><span class="s-label">New This Week</span><span class="s-val">34</span></div>
          </div>
          <a href="#" class="sidebar-cta">Shop All Footwear</a>
        </div>

        <div class="type-col">
          <div class="type-col-header">
            <span class="col-icon" aria-hidden="true">&#9971;</span>
            <span class="col-title">Running</span>
            <span class="col-count">6 types</span>
          </div>
          <ul class="type-links">
            <li><a href="#" role="menuitem"><span class="type-arrow" aria-hidden="true">&rsaquo;</span>Road Running Shoes <span class="type-count">184</span></a></li>
            <li><a href="#" role="menuitem"><span class="type-arrow" aria-hidden="true">&rsaquo;</span>Trail Running Shoes <span class="type-badge hot">Hot</span><span class="type-count">96</span></a></li>
            <li><a href="#" role="menuitem"><span class="type-arrow" aria-hidden="true">&rsaquo;</span>Race Day Shoes <span class="type-count">42</span></a></li>
            <li><a href="#" role="menuitem"><span class="type-arrow" aria-hidden="true">&rsaquo;</span>Cross Training Shoes <span class="type-count">68</span></a></li>
            <li><a href="#" role="menuitem"><span class="type-arrow" aria-hidden="true">&rsaquo;</span>Minimalist / Zero Drop <span class="type-count">28</span></a></li>
            <li><a href="#" role="menuitem"><span class="type-arrow" aria-hidden="true">&rsaquo;</span>Running Sandals <span class="type-count">14</span></a></li>
          </ul>
          <div class="quick-jump">
            <div class="quick-jump-label">Quick: Width</div>
            <a href="#">Narrow</a><a href="#">Standard</a><a href="#">Wide</a><a href="#">2E</a>
          </div>
        </div>

        <div class="type-col">
          <div class="type-col-header">
            <span class="col-icon" aria-hidden="true">&#129030;</span>
            <span class="col-title">Hiking</span>
            <span class="col-count">5 types</span>
          </div>
          <ul class="type-links">
            <li><a href="#" role="menuitem"><span class="type-arrow" aria-hidden="true">&rsaquo;</span>Hiking Boots <span class="type-count">112</span></a></li>
            <li><a href="#" role="menuitem"><span class="type-arrow" aria-hidden="true">&rsaquo;</span>Low-Cut Trail Shoes <span class="type-badge">New</span><span class="type-count">58</span></a></li>
            <li><a href="#" role="menuitem"><span class="type-arrow" aria-hidden="true">&rsaquo;</span>Approach Shoes <span class="type-count">36</span></a></li>
            <li><a href="#" role="menuitem"><span class="type-arrow" aria-hidden="true">&rsaquo;</span>Waterproof Boots (GTX) <span class="type-count">64</span></a></li>
            <li><a href="#" role="menuitem"><span class="type-arrow" aria-hidden="true">&rsaquo;</span>Camp &amp; Hut Boots <span class="type-count">22</span></a></li>
          </ul>
          <div class="quick-jump">
            <div class="quick-jump-label">Quick: Tech</div>
            <a href="#">Gore-Tex</a><a href="#">Vibram</a><a href="#">BOA</a>
          </div>
        </div>

        <div class="type-col">
          <div class="type-col-header">
            <span class="col-icon" aria-hidden="true">&#127754;</span>
            <span class="col-title">Water &amp; Camp</span>
            <span class="col-count">5 types</span>
          </div>
          <ul class="type-links">
            <li><a href="#" role="menuitem"><span class="type-arrow" aria-hidden="true">&rsaquo;</span>Water Shoes <span class="type-count">48</span></a></li>
            <li><a href="#" role="menuitem"><span class="type-arrow" aria-hidden="true">&rsaquo;</span>Sandals &amp; Slides <span class="type-count">72</span></a></li>
            <li><a href="#" role="menuitem"><span class="type-arrow" aria-hidden="true">&rsaquo;</span>Wading Boots <span class="type-count">18</span></a></li>
            <li><a href="#" role="menuitem"><span class="type-arrow" aria-hidden="true">&rsaquo;</span>Camp Clogs <span class="type-count">24</span></a></li>
            <li><a href="#" role="menuitem"><span class="type-arrow" aria-hidden="true">&rsaquo;</span>Amphibious Shoes <span class="type-count">16</span></a></li>
          </ul>
          <div class="quick-jump">
            <div class="quick-jump-label">Quick: Surface</div>
            <a href="#">Wet Rock</a><a href="#">Sand</a><a href="#">Mixed</a>
          </div>
        </div>

        <div class="type-col">
          <div class="type-col-header">
            <span class="col-icon" aria-hidden="true">&#10052;</span>
            <span class="col-title">Winter</span>
            <span class="col-count">4 types</span>
          </div>
          <ul class="type-links">
            <li><a href="#" role="menuitem"><span class="type-arrow" aria-hidden="true">&rsaquo;</span>Insulated Boots <span class="type-count">56</span></a></li>
            <li><a href="#" role="menuitem"><span class="type-arrow" aria-hidden="true">&rsaquo;</span>Ski Touring Boots <span class="type-count">28</span></a></li>
            <li><a href="#" role="menuitem"><span class="type-arrow" aria-hidden="true">&rsaquo;</span>Snowshoe-Ready <span class="type-count">22</span></a></li>
            <li><a href="#" role="menuitem"><span class="type-arrow" aria-hidden="true">&rsaquo;</span>Ice Traction Footwear <span class="type-count">18</span></a></li>
          </ul>
          <div class="quick-jump">
            <div class="quick-jump-label">Quick: Temp Rating</div>
            <a href="#">0&deg;C</a><a href="#">-20&deg;C</a><a href="#">-40&deg;C</a>
          </div>
        </div>

        <div class="mega-footer">
          <div class="f-tags">
            <a href="#" class="f-tag">Waterproof Only</a>
            <a href="#" class="f-tag">Vegan</a>
            <a href="#" class="f-tag">Wide Fit</a>
            <a href="#" class="f-tag hot">&#128293; On Sale</a>
          </div>
          <div class="f-right"><a href="#">Browse All 22 Footwear Types</a></div>
        </div>
      </div>
    </li>

    <!-- CLOTHING -->
    <li class="nav-item" role="none">
      <button type="button" class="nav-trigger" role="menuitem" aria-haspopup="true" aria-expanded="false">
        <span class="icon" aria-hidden="true">&#129505;</span> Clothing
      </button>
      <div class="mega mega-cloth" role="menu">
        <div class="mega-sidebar">
          <div class="sidebar-cat-title">Clothing</div>
          <div class="sidebar-sub">Performance &amp; casual</div>
          <div class="sidebar-stat">
            <div class="stat-row"><span class="s-label">Types</span><span class="s-val">18</span></div>
            <div class="stat-row"><span class="s-label">Brands</span><span class="s-val">24</span></div>
            <div class="stat-row"><span class="s-label">In Stock</span><span class="s-val">2,180</span></div>
          </div>
          <a href="#" class="sidebar-cta">Shop All Clothing</a>
        </div>
        <div class="type-col">
          <div class="type-col-header">
            <span class="col-icon" aria-hidden="true">&#129526;</span>
            <span class="col-title">Base Layers</span>
            <span class="col-count">5 types</span>
          </div>
          <ul class="type-links">
            <li><a href="#" role="menuitem"><span class="type-arrow" aria-hidden="true">&rsaquo;</span>Merino Wool Base Layer <span class="type-count">88</span></a></li>
            <li><a href="#" role="menuitem"><span class="type-arrow" aria-hidden="true">&rsaquo;</span>Synthetic Base Layer <span class="type-count">64</span></a></li>
            <li><a href="#" role="menuitem"><span class="type-arrow" aria-hidden="true">&rsaquo;</span>Heavyweight Baselayer <span class="type-count">32</span></a></li>
            <li><a href="#" role="menuitem"><span class="type-arrow" aria-hidden="true">&rsaquo;</span>Thermal Tights <span class="type-count">40</span></a></li>
            <li><a href="#" role="menuitem"><span class="type-arrow" aria-hidden="true">&rsaquo;</span>Baselayer Bottoms <span class="type-count">44</span></a></li>
          </ul>
          <div class="quick-jump">
            <div class="quick-jump-label">Quick: Weight</div>
            <a href="#">Ultralight</a><a href="#">Mid</a><a href="#">Expedition</a>
          </div>
        </div>
        <div class="type-col">
          <div class="type-col-header">
            <span class="col-icon" aria-hidden="true">&#127788;</span>
            <span class="col-title">Shells</span>
            <span class="col-count">4 types</span>
          </div>
          <ul class="type-links">
            <li><a href="#" role="menuitem"><span class="type-arrow" aria-hidden="true">&rsaquo;</span>Hardshell Jackets <span class="type-badge">New</span><span class="type-count">72</span></a></li>
            <li><a href="#" role="menuitem"><span class="type-arrow" aria-hidden="true">&rsaquo;</span>Softshell Jackets <span class="type-count">56</span></a></li>
            <li><a href="#" role="menuitem"><span class="type-arrow" aria-hidden="true">&rsaquo;</span>Rain Jackets <span class="type-count">48</span></a></li>
            <li><a href="#" role="menuitem"><span class="type-arrow" aria-hidden="true">&rsaquo;</span>Windbreakers <span class="type-count">34</span></a></li>
          </ul>
          <div class="quick-jump">
            <div class="quick-jump-label">Quick: Rating</div>
            <a href="#">20K</a><a href="#">28K</a><a href="#">3L</a>
          </div>
        </div>
        <div class="type-col">
          <div class="type-col-header">
            <span class="col-icon" aria-hidden="true">&#127847;</span>
            <span class="col-title">Insulation</span>
            <span class="col-count">4 types</span>
          </div>
          <ul class="type-links">
            <li><a href="#" role="menuitem"><span class="type-arrow" aria-hidden="true">&rsaquo;</span>Down Jackets <span class="type-badge hot">Hot</span><span class="type-count">94</span></a></li>
            <li><a href="#" role="menuitem"><span class="type-arrow" aria-hidden="true">&rsaquo;</span>Synthetic Puffer <span class="type-count">68</span></a></li>
            <li><a href="#" role="menuitem"><span class="type-arrow" aria-hidden="true">&rsaquo;</span>Fleece Jackets <span class="type-count">52</span></a></li>
            <li><a href="#" role="menuitem"><span class="type-arrow" aria-hidden="true">&rsaquo;</span>Vests <span class="type-count">38</span></a></li>
          </ul>
          <div class="quick-jump">
            <div class="quick-jump-label">Quick: Fill Power</div>
            <a href="#">600fp</a><a href="#">700fp</a><a href="#">850fp</a>
          </div>
        </div>
        <div class="mega-footer">
          <div class="f-tags">
            <a href="#" class="f-tag">100% Recycled</a>
            <a href="#" class="f-tag">Certified B Corp</a>
            <a href="#" class="f-tag hot">&#128293; Clearance</a>
          </div>
          <div class="f-right"><a href="#">Browse All 18 Clothing Types</a></div>
        </div>
      </div>
    </li>

    <!-- GEAR -->
    <li class="nav-item" role="none">
      <button type="button" class="nav-trigger" role="menuitem" aria-haspopup="true" aria-expanded="false">
        <span class="icon" aria-hidden="true">&#127956;</span> Gear
      </button>
      <div class="mega mega-gear" role="menu">
        <div class="mega-sidebar">
          <div class="sidebar-cat-title">Gear</div>
          <div class="sidebar-sub">Packs, tents &amp; tools</div>
          <div class="sidebar-stat">
            <div class="stat-row"><span class="s-label">Types</span><span class="s-val">16</span></div>
            <div class="stat-row"><span class="s-label">Brands</span><span class="s-val">14</span></div>
          </div>
          <a href="#" class="sidebar-cta">Shop All Gear</a>
        </div>
        <div class="type-col">
          <div class="type-col-header">
            <span class="col-icon" aria-hidden="true">&#127890;</span>
            <span class="col-title">Packs</span>
            <span class="col-count">5 types</span>
          </div>
          <ul class="type-links">
            <li><a href="#" role="menuitem"><span class="type-arrow" aria-hidden="true">&rsaquo;</span>Daypacks (10&ndash;30L) <span class="type-count">82</span></a></li>
            <li><a href="#" role="menuitem"><span class="type-arrow" aria-hidden="true">&rsaquo;</span>Multi-Day Packs (40&ndash;70L) <span class="type-count">64</span></a></li>
            <li><a href="#" role="menuitem"><span class="type-arrow" aria-hidden="true">&rsaquo;</span>Frameless / UL Packs <span class="type-count">28</span></a></li>
            <li><a href="#" role="menuitem"><span class="type-arrow" aria-hidden="true">&rsaquo;</span>Trail Running Vests <span class="type-badge">New</span><span class="type-count">36</span></a></li>
            <li><a href="#" role="menuitem"><span class="type-arrow" aria-hidden="true">&rsaquo;</span>Hydration Packs <span class="type-count">44</span></a></li>
          </ul>
        </div>
        <div class="type-col">
          <div class="type-col-header">
            <span class="col-icon" aria-hidden="true">&#9978;</span>
            <span class="col-title">Shelter</span>
            <span class="col-count">4 types</span>
          </div>
          <ul class="type-links">
            <li><a href="#" role="menuitem"><span class="type-arrow" aria-hidden="true">&rsaquo;</span>Backpacking Tents <span class="type-count">56</span></a></li>
            <li><a href="#" role="menuitem"><span class="type-arrow" aria-hidden="true">&rsaquo;</span>Hammocks &amp; Tarps <span class="type-count">32</span></a></li>
            <li><a href="#" role="menuitem"><span class="type-arrow" aria-hidden="true">&rsaquo;</span>Bivouac Bags <span class="type-count">18</span></a></li>
            <li><a href="#" role="menuitem"><span class="type-arrow" aria-hidden="true">&rsaquo;</span>Base Camp Tents <span class="type-count">24</span></a></li>
          </ul>
        </div>
        <div class="type-col">
          <div class="type-col-header">
            <span class="col-icon" aria-hidden="true">&#128294;</span>
            <span class="col-title">Tools &amp; Safety</span>
            <span class="col-count">5 types</span>
          </div>
          <ul class="type-links">
            <li><a href="#" role="menuitem"><span class="type-arrow" aria-hidden="true">&rsaquo;</span>Headlamps <span class="type-badge hot">Hot</span><span class="type-count">48</span></a></li>
            <li><a href="#" role="menuitem"><span class="type-arrow" aria-hidden="true">&rsaquo;</span>Navigation &amp; GPS <span class="type-count">28</span></a></li>
            <li><a href="#" role="menuitem"><span class="type-arrow" aria-hidden="true">&rsaquo;</span>Trekking Poles <span class="type-count">36</span></a></li>
            <li><a href="#" role="menuitem"><span class="type-arrow" aria-hidden="true">&rsaquo;</span>First Aid Kits <span class="type-count">22</span></a></li>
            <li><a href="#" role="menuitem"><span class="type-arrow" aria-hidden="true">&rsaquo;</span>Water Filters <span class="type-count">20</span></a></li>
          </ul>
        </div>
        <div class="mega-footer">
          <div class="f-tags">
            <a href="#" class="f-tag">Ultralight Only</a>
            <a href="#" class="f-tag">3-Season</a>
            <a href="#" class="f-tag hot">&#128293; Demo Gear</a>
          </div>
          <div class="f-right"><a href="#">All 16 Gear Types</a></div>
        </div>
      </div>
    </li>

    <!-- Plain triggers -->
    <li class="nav-item" role="none">
      <button type="button" class="nav-trigger" role="menuitem" aria-haspopup="true" aria-expanded="false">Brands</button>
    </li>
    <li class="nav-item" role="none">
      <button type="button" class="nav-trigger" role="menuitem" aria-haspopup="true" aria-expanded="false">Community</button>
    </li>

  </ul>
</nav>
```

**CSS:**
```css
/* ─── 05 Precision Outdoor Gear Finder — type-drill mega menu ──────
   Imports Bebas Neue + Barlow + Barlow Condensed. Everything scoped
   under .mm-typ so the dark olive palette doesn't bleed across the
   page. Each link surfaces a SPECIFIC type ("Trail Running Shoes")
   not a parent category ("Footwear"). */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Barlow:ital,wght@0,200;0,300;0,400;0,500;0,600;1,200;1,300&family=Barlow+Condensed:wght@300;400;500;600;700&display=swap');

.mm-typ {
  --mm-typ-void: #0f1410;
  --mm-typ-surface: #161d17;
  --mm-typ-panel: #1c261d;
  --mm-typ-raised: #243026;
  --mm-typ-olive: #4a5e3a;
  --mm-typ-lime: #a8c256;
  --mm-typ-text: #d4ddd0;
  --mm-typ-text-mid: rgba(212, 221, 208, 0.6);
  --mm-typ-text-dim: rgba(212, 221, 208, 0.35);
  --mm-typ-rule: rgba(212, 221, 208, 0.08);
  --mm-typ-rule-mid: rgba(212, 221, 208, 0.14);
  --mm-typ-orange: #e07030;
  --mm-typ-border: rgba(168, 194, 86, 0.2);
  --mm-typ-border-bright: rgba(168, 194, 86, 0.5);

  position: relative;
  background: var(--mm-typ-void);
  font-family: 'Barlow', system-ui, sans-serif;
  width: 100%;
  min-height: 560px;
  overflow: hidden;
  box-sizing: border-box;
}

.mm-typ *,
.mm-typ *::before,
.mm-typ *::after { box-sizing: border-box; }

.mm-typ .top-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 28px;
  background: var(--mm-typ-olive);
  font-family: 'Barlow Condensed', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.85);
  text-transform: uppercase;
  gap: 12px;
  flex-wrap: wrap;
}
.mm-typ .top-strip a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: color 0.2s;
}
.mm-typ .top-strip a:hover { color: #fff; }
.mm-typ .top-strip .highlight { color: #ffec7a; font-weight: 600; }

.mm-typ .nav-bar {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: stretch;
  background: var(--mm-typ-surface);
  border-bottom: 1px solid var(--mm-typ-border);
  position: relative;
  z-index: 2;
}
.mm-typ .nav-item { position: relative; list-style: none; }

.mm-typ .nav-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 56px;
  padding: 0 22px;
  font-family: 'Barlow Condensed', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mm-typ-text-mid);
  background: transparent;
  border: 0;
  border-right: 1px solid var(--mm-typ-rule);
  cursor: pointer;
  user-select: none;
  transition: color 0.2s, background 0.2s;
  position: relative;
}
.mm-typ .nav-trigger .icon {
  font-size: 14px;
  line-height: 1;
  opacity: 0.5;
  transition: opacity 0.2s;
}
.mm-typ .nav-item:hover .nav-trigger,
.mm-typ .nav-item.mm-open .nav-trigger {
  color: var(--mm-typ-lime);
  background: var(--mm-typ-panel);
}
.mm-typ .nav-item:hover .nav-trigger .icon,
.mm-typ .nav-item.mm-open .nav-trigger .icon { opacity: 1; }

.mm-typ .nav-trigger::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--mm-typ-lime);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}
.mm-typ .nav-item:hover .nav-trigger::after,
.mm-typ .nav-item.mm-open .nav-trigger::after { transform: scaleX(1); }

/* ── Mega ── */
.mm-typ .mega {
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--mm-typ-panel);
  border: 1px solid var(--mm-typ-border);
  border-top: 2px solid var(--mm-typ-lime);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  display: grid;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.7);
  max-width: calc(100vw - 24px);
  z-index: 5;
}
.mm-typ .nav-item:hover .mega,
.mm-typ .nav-item.mm-open .mega {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
}

.mm-typ .mega-foot  { grid-template-columns: 180px 1fr 1fr 1fr 1fr; min-width: min(940px, calc(100vw - 24px)); }
.mm-typ .mega-cloth { grid-template-columns: 180px 1fr 1fr 1fr;     min-width: min(820px, calc(100vw - 24px)); }
.mm-typ .mega-gear  { grid-template-columns: 180px 1fr 1fr 1fr;     min-width: min(820px, calc(100vw - 24px)); }

/* ── Sidebar ── */
.mm-typ .mega-sidebar {
  background: var(--mm-typ-raised);
  border-right: 1px solid var(--mm-typ-rule-mid);
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 380px;
}
.mm-typ .sidebar-cat-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 26px;
  letter-spacing: 0.06em;
  color: var(--mm-typ-lime);
  line-height: 1;
  margin-bottom: 4px;
}
.mm-typ .sidebar-sub {
  font-family: 'Barlow', system-ui, sans-serif;
  font-size: 10px;
  font-weight: 200;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mm-typ-text-dim);
  margin-bottom: 20px;
}
.mm-typ .sidebar-stat {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: auto;
}
.mm-typ .stat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 0;
  border-bottom: 1px solid var(--mm-typ-rule);
}
.mm-typ .stat-row .s-label {
  font-family: 'Barlow', system-ui, sans-serif;
  font-size: 10px;
  font-weight: 300;
  color: var(--mm-typ-text-dim);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.mm-typ .stat-row .s-val {
  font-family: 'Barlow Condensed', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--mm-typ-lime);
  letter-spacing: 0.06em;
}
.mm-typ .sidebar-cta {
  display: block;
  margin-top: 20px;
  padding: 10px 14px;
  background: var(--mm-typ-lime);
  color: var(--mm-typ-void);
  font-family: 'Barlow Condensed', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  transition: background 0.2s;
}
.mm-typ .sidebar-cta:hover { background: #c0e070; }

/* ── Type columns ── */
.mm-typ .type-col {
  padding: 0;
  border-right: 1px solid var(--mm-typ-rule);
}
.mm-typ .type-col:last-of-type { border-right: none; }

.mm-typ .type-col-header {
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--mm-typ-rule-mid);
  display: flex;
  align-items: center;
  gap: 10px;
}
.mm-typ .type-col-header .col-icon { font-size: 16px; line-height: 1; }
.mm-typ .type-col-header .col-title {
  font-family: 'Barlow Condensed', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mm-typ-text);
}
.mm-typ .type-col-header .col-count {
  margin-left: auto;
  font-family: 'Barlow', system-ui, sans-serif;
  font-size: 10px;
  font-weight: 200;
  color: var(--mm-typ-text-dim);
}

.mm-typ .type-links {
  list-style: none;
  margin: 0;
  padding: 6px 0;
}
.mm-typ .type-links li { list-style: none; }
.mm-typ .type-links li a {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 8px 16px;
  font-family: 'Barlow', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 300;
  color: var(--mm-typ-text-mid);
  text-decoration: none;
  border-bottom: 1px solid var(--mm-typ-rule);
  transition: color 0.2s, background 0.2s, padding-left 0.25s;
  position: relative;
}
.mm-typ .type-links li a .type-arrow {
  position: absolute;
  left: 4px;
  opacity: 0;
  color: var(--mm-typ-lime);
  font-size: 10px;
  transition: opacity 0.2s, left 0.25s;
}
.mm-typ .type-links li a .type-count {
  margin-left: auto;
  font-family: 'Barlow Condensed', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 300;
  color: var(--mm-typ-text-dim);
  flex-shrink: 0;
  transition: color 0.2s;
}
.mm-typ .type-links li a .type-badge {
  font-family: 'Barlow Condensed', system-ui, sans-serif;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mm-typ-void);
  background: var(--mm-typ-lime);
  padding: 2px 5px;
  margin-left: 8px;
  flex-shrink: 0;
}
.mm-typ .type-links li a .type-badge.hot {
  background: var(--mm-typ-orange);
  color: #fff;
}
.mm-typ .type-links li a:hover {
  color: var(--mm-typ-lime);
  background: rgba(168, 194, 86, 0.06);
  padding-left: 24px;
}
.mm-typ .type-links li a:hover .type-arrow { opacity: 1; left: 10px; }
.mm-typ .type-links li a:hover .type-count { color: var(--mm-typ-lime); }

/* Quick-jump pills */
.mm-typ .quick-jump {
  padding: 10px 16px;
  border-top: 1px solid var(--mm-typ-rule-mid);
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.mm-typ .quick-jump-label {
  width: 100%;
  font-family: 'Barlow', system-ui, sans-serif;
  font-size: 9px;
  font-weight: 300;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--mm-typ-text-dim);
  margin-bottom: 6px;
}
.mm-typ .quick-jump a {
  font-family: 'Barlow Condensed', system-ui, sans-serif;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mm-typ-text-mid);
  background: var(--mm-typ-raised);
  border: 1px solid var(--mm-typ-rule-mid);
  padding: 4px 10px;
  text-decoration: none;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.mm-typ .quick-jump a:hover {
  color: var(--mm-typ-lime);
  border-color: var(--mm-typ-border-bright);
  background: rgba(168, 194, 86, 0.08);
}

/* ── Footer ── */
.mm-typ .mega-footer {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: var(--mm-typ-raised);
  border-top: 1px solid var(--mm-typ-rule-mid);
  flex-wrap: wrap;
  gap: 10px;
}
.mm-typ .mega-footer .f-tags { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mm-typ .mega-footer .f-tag {
  font-family: 'Barlow Condensed', system-ui, sans-serif;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mm-typ-text-dim);
  background: var(--mm-typ-panel);
  border: 1px solid var(--mm-typ-rule-mid);
  padding: 4px 10px;
  text-decoration: none;
  transition: color 0.2s, border-color 0.2s;
}
.mm-typ .mega-footer .f-tag:hover { color: var(--mm-typ-lime); border-color: var(--mm-typ-border-bright); }
.mm-typ .mega-footer .f-tag.hot { color: var(--mm-typ-orange); border-color: rgba(224, 112, 48, 0.35); }
.mm-typ .mega-footer .f-right a {
  font-family: 'Barlow Condensed', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mm-typ-lime);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: gap 0.3s;
}
.mm-typ .mega-footer .f-right a::after { content: '\2192'; }
.mm-typ .mega-footer .f-right a:hover { gap: 14px; }

/* Stagger */
.mm-typ .nav-item:hover .type-links li,
.mm-typ .nav-item.mm-open .type-links li { animation: mm-typ-slide 0.3s ease both; }
.mm-typ .nav-item:hover .type-links li:nth-child(1),
.mm-typ .nav-item.mm-open .type-links li:nth-child(1) { animation-delay: 0.03s; }
.mm-typ .nav-item:hover .type-links li:nth-child(2),
.mm-typ .nav-item.mm-open .type-links li:nth-child(2) { animation-delay: 0.07s; }
.mm-typ .nav-item:hover .type-links li:nth-child(3),
.mm-typ .nav-item.mm-open .type-links li:nth-child(3) { animation-delay: 0.11s; }
.mm-typ .nav-item:hover .type-links li:nth-child(4),
.mm-typ .nav-item.mm-open .type-links li:nth-child(4) { animation-delay: 0.15s; }
.mm-typ .nav-item:hover .type-links li:nth-child(5),
.mm-typ .nav-item.mm-open .type-links li:nth-child(5) { animation-delay: 0.19s; }
.mm-typ .nav-item:hover .type-links li:nth-child(6),
.mm-typ .nav-item.mm-open .type-links li:nth-child(6) { animation-delay: 0.23s; }
.mm-typ .nav-item:hover .type-links li:nth-child(7),
.mm-typ .nav-item.mm-open .type-links li:nth-child(7) { animation-delay: 0.27s; }

@keyframes mm-typ-slide {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}

@media (max-width: 900px) {
  .mm-typ .nav-trigger { padding: 0 14px; font-size: 12px; }
  .mm-typ .mega-foot,
  .mm-typ .mega-cloth,
  .mm-typ .mega-gear {
    grid-template-columns: 1fr;
    min-width: calc(100vw - 24px);
  }
  .mm-typ .mega-sidebar { border-right: 0; border-bottom: 1px solid var(--mm-typ-rule-mid); min-height: 0; }
  .mm-typ .type-col { border-right: 0; border-bottom: 1px solid var(--mm-typ-rule); }
}

@media (prefers-reduced-motion: reduce) {
  .mm-typ .mega,
  .mm-typ .type-links li,
  .mm-typ .type-links li a,
  .mm-typ .quick-jump a { transition: none; animation: none; }
}
```

**JS:**
```js
(() => {
  document.querySelectorAll('.mm-noi .nav-item, .mm-cyb .nav-item, .mm-bio .nav-item, .mm-dep .nav-item, .mm-typ .nav-item, .mm-dea .nav-item').forEach(item => {
    const trigger = item.querySelector('.nav-trigger');
    if (!trigger) return;

    // Mouse + keyboard: toggle open on click / Enter / Space
    trigger.addEventListener('click', e => {
      e.preventDefault();
      const isOpen = item.classList.contains('mm-open');
      // Close any sibling that's open so only one panel shows at a time
      item.parentElement?.querySelectorAll('.nav-item.mm-open').forEach(other => {
        if (other !== item) other.classList.remove('mm-open');
        const otherBtn = other.querySelector('.nav-trigger');
        if (otherBtn) otherBtn.setAttribute('aria-expanded', 'false');
      });
      item.classList.toggle('mm-open', !isOpen);
      trigger.setAttribute('aria-expanded', String(!isOpen));
    });
  });

  // Outside-click closes all open panels
  document.addEventListener('click', e => {
    document.querySelectorAll('.mm-noi .nav-item.mm-open, .mm-cyb .nav-item.mm-open, .mm-bio .nav-item.mm-open, .mm-dep .nav-item.mm-open, .mm-typ .nav-item.mm-open, .mm-dea .nav-item.mm-open').forEach(item => {
      if (!item.contains(e.target)) {
        item.classList.remove('mm-open');
        const btn = item.querySelector('.nav-trigger');
        if (btn) btn.setAttribute('aria-expanded', 'false');
      }
    });
  });

  // Escape closes the currently open panel
  document.addEventListener('keydown', e => {
    if (e.key !== 'Escape') return;
    document.querySelectorAll('.mm-noi .nav-item.mm-open, .mm-cyb .nav-item.mm-open, .mm-bio .nav-item.mm-open, .mm-dep .nav-item.mm-open, .mm-typ .nav-item.mm-open, .mm-dea .nav-item.mm-open').forEach(item => {
      item.classList.remove('mm-open');
      const btn = item.querySelector('.nav-trigger');
      if (btn) btn.setAttribute('aria-expanded', 'false');
    });
  });
})();
```

### 06. Flash Sale Command Center

**Type:** CSS + JS
**Description:** Near-black panel with Syne 800 display + Outfit text + Syne Mono. The Deals trigger visually ignites — red background tint, pulsing live dot, fire-glow box-shadow on hover. The panel ships 4 columns: a hero with a live JavaScript countdown timer + savings pills (clearance tiers), a Clearance column (reds, −60% to −80%), a Promo Codes column with a copyable code block, and a Flash Sales column with per-item stock counts. A red promo ticker scrolls active offers above the bar. Calm Women / Men menus alongside make the Deals contrast pop. Best for ecommerce sale events, Black Friday, flash promotions.

**HTML:**
```html
<nav class="mm-dea" aria-label="Flash Sale Command Center menu">

  <!-- Promo ticker -->
  <div class="ticker-wrap" aria-hidden="true">
    <div class="ticker-content">
      <span class="ticker-item">&#9889; Flash Sale &mdash; Up to 70% Off <span class="t-sep">&middot;</span> Ends in 04:22:08</span>
      <span class="ticker-item">CODE: SUMMER30 &mdash; Extra 30% off clearance <span class="t-sep">&middot;</span> Today only</span>
      <span class="ticker-item">BOGO on all sneakers <span class="t-sep">&middot;</span> Buy 1 Get 1 50% Off</span>
      <span class="ticker-item">Free returns &middot; No minimum <span class="t-sep">&middot;</span> 28-day window</span>
      <span class="ticker-item">&#9889; Flash Sale &mdash; Up to 70% Off <span class="t-sep">&middot;</span> Ends in 04:22:08</span>
      <span class="ticker-item">CODE: SUMMER30 &mdash; Extra 30% off clearance <span class="t-sep">&middot;</span> Today only</span>
      <span class="ticker-item">BOGO on all sneakers <span class="t-sep">&middot;</span> Buy 1 Get 1 50% Off</span>
      <span class="ticker-item">Free returns &middot; No minimum <span class="t-sep">&middot;</span> 28-day window</span>
    </div>
  </div>

  <ul class="nav-bar" role="menubar">

    <!-- WOMEN -->
    <li class="nav-item" role="none">
      <button type="button" class="nav-trigger" role="menuitem" aria-haspopup="true" aria-expanded="false">
        Women <span class="chevron" aria-hidden="true">&#9662;</span>
      </button>
      <div class="mega mega-regular" role="menu">
        <div class="reg-col">
          <div class="reg-col-title">Clothing</div>
          <ul class="reg-links">
            <li><a href="#" role="menuitem">Dresses <span class="badge badge-new">New</span></a></li>
            <li><a href="#" role="menuitem">Tops &amp; T-Shirts</a></li>
            <li><a href="#" role="menuitem">Jeans <span class="badge badge-sale">Sale</span></a></li>
            <li><a href="#" role="menuitem">Knitwear</a></li>
            <li><a href="#" role="menuitem">Coats &amp; Jackets</a></li>
            <li><a href="#" role="menuitem">Trousers</a></li>
          </ul>
        </div>
        <div class="reg-col">
          <div class="reg-col-title">Shoes</div>
          <ul class="reg-links">
            <li><a href="#" role="menuitem">Trainers</a></li>
            <li><a href="#" role="menuitem">Heels <span class="badge badge-sale">Sale</span></a></li>
            <li><a href="#" role="menuitem">Boots</a></li>
            <li><a href="#" role="menuitem">Sandals <span class="badge badge-new">New</span></a></li>
            <li><a href="#" role="menuitem">Loafers</a></li>
          </ul>
        </div>
        <div class="reg-col">
          <div class="reg-col-title">Accessories</div>
          <ul class="reg-links">
            <li><a href="#" role="menuitem">Bags</a></li>
            <li><a href="#" role="menuitem">Sunglasses</a></li>
            <li><a href="#" role="menuitem">Jewellery</a></li>
            <li><a href="#" role="menuitem">Scarves</a></li>
            <li><a href="#" role="menuitem">Belts</a></li>
          </ul>
        </div>
        <div class="mega-footer">
          <div class="f-links">
            <a href="#">New In</a>
            <a href="#">Bestsellers</a>
            <a href="#" class="hot">&#128293; Women's Sale</a>
          </div>
          <div class="f-right"><a href="#">All Women</a></div>
        </div>
      </div>
    </li>

    <!-- MEN -->
    <li class="nav-item" role="none">
      <button type="button" class="nav-trigger" role="menuitem" aria-haspopup="true" aria-expanded="false">
        Men <span class="chevron" aria-hidden="true">&#9662;</span>
      </button>
      <div class="mega mega-regular" role="menu">
        <div class="reg-col">
          <div class="reg-col-title">Clothing</div>
          <ul class="reg-links">
            <li><a href="#" role="menuitem">T-Shirts <span class="badge badge-new">New</span></a></li>
            <li><a href="#" role="menuitem">Hoodies &amp; Sweatshirts</a></li>
            <li><a href="#" role="menuitem">Jeans</a></li>
            <li><a href="#" role="menuitem">Shorts <span class="badge badge-sale">Sale</span></a></li>
            <li><a href="#" role="menuitem">Shirts</a></li>
            <li><a href="#" role="menuitem">Outerwear</a></li>
          </ul>
        </div>
        <div class="reg-col">
          <div class="reg-col-title">Footwear</div>
          <ul class="reg-links">
            <li><a href="#" role="menuitem">Trainers</a></li>
            <li><a href="#" role="menuitem">Boots</a></li>
            <li><a href="#" role="menuitem">Slides &amp; Sandals</a></li>
            <li><a href="#" role="menuitem">Smart Shoes</a></li>
          </ul>
        </div>
        <div class="reg-col">
          <div class="reg-col-title">Accessories</div>
          <ul class="reg-links">
            <li><a href="#" role="menuitem">Hats &amp; Caps</a></li>
            <li><a href="#" role="menuitem">Bags &amp; Backpacks</a></li>
            <li><a href="#" role="menuitem">Watches</a></li>
            <li><a href="#" role="menuitem">Sunglasses</a></li>
          </ul>
        </div>
        <div class="mega-footer">
          <div class="f-links">
            <a href="#">New In</a>
            <a href="#">Top Rated</a>
            <a href="#" class="hot">&#128293; Men's Sale</a>
          </div>
          <div class="f-right"><a href="#">All Men</a></div>
        </div>
      </div>
    </li>

    <!-- DEALS -->
    <li class="nav-item deals-item" role="none">
      <button type="button" class="nav-trigger" role="menuitem" aria-haspopup="true" aria-expanded="false">
        <span class="live-dot" aria-hidden="true"></span>
        Deals &amp; Sales
        <span class="chevron" aria-hidden="true">&#9662;</span>
      </button>
      <div class="mega mega-deals" role="menu">

        <!-- Hero -->
        <div class="deals-hero">
          <div class="deals-hero-label">
            <span class="live-badge">LIVE</span>
            Active Now
          </div>
          <div class="deals-hero-title">Summer<br />Sale</div>
          <div class="deals-hero-sub">Ends in</div>

          <div class="countdown" aria-hidden="true">
            <div class="cd-unit">
              <div class="cd-num" data-mm-dea-cd="h">04</div>
              <div class="cd-label">Hrs</div>
            </div>
            <div class="cd-sep">:</div>
            <div class="cd-unit">
              <div class="cd-num" data-mm-dea-cd="m">22</div>
              <div class="cd-label">Min</div>
            </div>
            <div class="cd-sep">:</div>
            <div class="cd-unit">
              <div class="cd-num" data-mm-dea-cd="s">08</div>
              <div class="cd-label">Sec</div>
            </div>
          </div>

          <div class="savings-pills">
            <a href="#" class="savings-pill">
              <span class="sp-label">Clearance</span>
              <span class="sp-pct">Up to 70% Off</span>
            </a>
            <a href="#" class="savings-pill">
              <span class="sp-label">Outlet</span>
              <span class="sp-pct">From $5</span>
            </a>
            <a href="#" class="savings-pill">
              <span class="sp-label">Last Sizes</span>
              <span class="sp-pct">Extra 20% Off</span>
            </a>
          </div>
        </div>

        <!-- Clearance -->
        <div class="deal-col">
          <div class="deal-col-header">
            <span class="deal-col-title">Clearance</span>
            <span class="deal-col-type type-clearance">Permanent</span>
          </div>
          <ul class="deal-links">
            <li><a href="#" role="menuitem"><span class="d-name">Women's Clothing</span><span class="d-off">&minus;60%</span></a></li>
            <li><a href="#" role="menuitem"><span class="d-name">Men's Shoes</span><span class="d-off">&minus;55%</span></a></li>
            <li><a href="#" role="menuitem"><span class="d-name">Kids' Outerwear</span><span class="d-off">&minus;70%</span></a></li>
            <li><a href="#" role="menuitem"><span class="d-name">Bags &amp; Luggage</span><span class="d-off">&minus;45%</span></a></li>
            <li><a href="#" role="menuitem"><span class="d-name">Home &amp; Living</span><span class="d-off">&minus;50%</span></a></li>
            <li><a href="#" role="menuitem"><span class="d-name">Last Chance Items</span><span class="d-off">&minus;80%</span></a></li>
          </ul>
        </div>

        <!-- Promo codes -->
        <div class="deal-col">
          <div class="deal-col-header">
            <span class="deal-col-title">Promo Codes</span>
            <span class="deal-col-type type-promo">Today</span>
          </div>
          <ul class="deal-links">
            <li><a href="#" role="menuitem"><span class="d-name">Any Order</span><span class="d-off gold">CODE: SAVE10</span></a></li>
            <li><a href="#" role="menuitem"><span class="d-name">Orders $50+</span><span class="d-off gold">CODE: TWENTY</span></a></li>
            <li><a href="#" role="menuitem"><span class="d-name">Clearance Items</span><span class="d-off gold">CODE: SUMMER30</span></a></li>
          </ul>
          <div class="promo-block">
            <div class="pb-label">Best Code Today</div>
            <div class="pb-code">
              <div class="code">SUMMER30</div>
              <button type="button" class="copy-btn" data-mm-dea-copy>Copy</button>
            </div>
          </div>
          <ul class="deal-links" style="margin-top:12px;">
            <li><a href="#" role="menuitem"><span class="d-name">Student Discount</span><span class="d-off gold">&minus;15%</span></a></li>
            <li><a href="#" role="menuitem"><span class="d-name">BOGO Footwear</span><span class="d-off gold">Buy 1 Get 1</span></a></li>
          </ul>
        </div>

        <!-- Flash sales -->
        <div class="deal-col">
          <div class="deal-col-header">
            <span class="deal-col-title">&#9889; Flash Sales</span>
            <span class="deal-col-type type-flash">Live Now</span>
          </div>
          <div class="flash-item">
            <div class="fi-info">
              <div class="fi-name">Nike Air Max 270</div>
              <div class="fi-stock">Only 14 left</div>
            </div>
            <div class="fi-pct">&minus;40%</div>
          </div>
          <div class="flash-item">
            <div class="fi-info">
              <div class="fi-name">Levi's 501 Jeans</div>
              <div class="fi-stock">Only 8 left</div>
            </div>
            <div class="fi-pct">&minus;35%</div>
          </div>
          <div class="flash-item">
            <div class="fi-info">
              <div class="fi-name">North Face Puffer</div>
              <div class="fi-stock">22 remaining</div>
            </div>
            <div class="fi-pct">&minus;50%</div>
          </div>
          <div class="flash-item">
            <div class="fi-info">
              <div class="fi-name">Ray-Ban Wayfarers</div>
              <div class="fi-stock">Only 5 left</div>
            </div>
            <div class="fi-pct">&minus;30%</div>
          </div>
          <div class="flash-item">
            <div class="fi-info">
              <div class="fi-name">Fj&auml;llr&auml;ven K&aring;nken</div>
              <div class="fi-stock">18 remaining</div>
            </div>
            <div class="fi-pct">&minus;25%</div>
          </div>
        </div>

        <div class="mega-footer">
          <div class="f-links">
            <a href="#" class="hot">&#128293; All Clearance</a>
            <a href="#">Outlet Store</a>
            <a href="#">Price Drop Tracker</a>
            <a href="#">Wishlist Sale Alerts</a>
          </div>
          <div class="f-right"><a href="#" class="hot-cta">All Deals &amp; Sales</a></div>
        </div>
      </div>
    </li>

    <!-- Plain triggers -->
    <li class="nav-item" role="none">
      <button type="button" class="nav-trigger" role="menuitem" aria-haspopup="true" aria-expanded="false">
        New In <span class="chevron" aria-hidden="true">&#9662;</span>
      </button>
    </li>
    <li class="nav-item" role="none">
      <button type="button" class="nav-trigger" role="menuitem" aria-haspopup="true" aria-expanded="false">
        Brands <span class="chevron" aria-hidden="true">&#9662;</span>
      </button>
    </li>

  </ul>
</nav>
```

**CSS:**
```css
/* ─── 06 Flash Sale Command Center — ignited deals mega menu ────────
   Imports Syne + Syne Mono + Outfit. The "ignited" Deals trigger gets
   a red background tint, pulsing live dot, fire-glow box-shadow.
   The promo ticker animates an infinite horizontal scroll. Everything
   scoped under .mm-dea so the dark palette / fire glow doesn't leak. */
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=Syne+Mono&family=Outfit:wght@200;300;400;500;600&display=swap');

.mm-dea {
  --mm-dea-void: #0e0e0e;
  --mm-dea-surface: #141414;
  --mm-dea-panel: #1a1a1a;
  --mm-dea-raised: #202020;
  --mm-dea-border: rgba(255, 255, 255, 0.07);
  --mm-dea-border-mid: rgba(255, 255, 255, 0.12);
  --mm-dea-text: #e8e8e8;
  --mm-dea-text-mid: rgba(232, 232, 232, 0.55);
  --mm-dea-text-dim: rgba(232, 232, 232, 0.3);
  --mm-dea-azure: #3b82f6;
  --mm-dea-azure-dim: rgba(59, 130, 246, 0.15);
  --mm-dea-fire: #ff3030;
  --mm-dea-fire-dim: rgba(255, 48, 48, 0.12);
  --mm-dea-fire-glow: rgba(255, 48, 48, 0.3);
  --mm-dea-gold: #f5c242;
  --mm-dea-gold-dim: rgba(245, 194, 66, 0.15);
  --mm-dea-green: #22c55e;
  --mm-dea-green-dim: rgba(34, 197, 94, 0.12);

  position: relative;
  background: var(--mm-dea-void);
  font-family: 'Outfit', system-ui, sans-serif;
  width: 100%;
  min-height: 620px;
  overflow: hidden;
  box-sizing: border-box;
}

.mm-dea *,
.mm-dea *::before,
.mm-dea *::after { box-sizing: border-box; }

/* ── Promo ticker ── */
.mm-dea .ticker-wrap {
  background: var(--mm-dea-fire);
  overflow: hidden;
  height: 32px;
  display: flex;
  align-items: center;
  position: relative;
}
.mm-dea .ticker-wrap::before,
.mm-dea .ticker-wrap::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 60px;
  z-index: 2;
}
.mm-dea .ticker-wrap::before { left: 0;  background: linear-gradient(90deg, var(--mm-dea-fire), transparent); }
.mm-dea .ticker-wrap::after  { right: 0; background: linear-gradient(-90deg, var(--mm-dea-fire), transparent); }
.mm-dea .ticker-content {
  display: flex;
  gap: 60px;
  animation: mm-dea-ticker 22s linear infinite;
  white-space: nowrap;
  padding-left: 100%;
}
@keyframes mm-dea-ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.mm-dea .ticker-item {
  font-family: 'Syne', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.mm-dea .ticker-item .t-sep { color: rgba(255, 255, 255, 0.4); font-size: 14px; }

/* ── Nav bar ── */
.mm-dea .nav-bar {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: stretch;
  background: var(--mm-dea-surface);
  border-bottom: 1px solid var(--mm-dea-border);
  position: relative;
  z-index: 3;
}
.mm-dea .nav-item { position: relative; list-style: none; }

.mm-dea .nav-trigger {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 54px;
  padding: 0 22px;
  font-family: 'Syne', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mm-dea-text-mid);
  background: transparent;
  border: 0;
  border-right: 1px solid var(--mm-dea-border);
  cursor: pointer;
  user-select: none;
  transition: color 0.2s, background 0.2s;
  position: relative;
}
.mm-dea .nav-item:hover .nav-trigger,
.mm-dea .nav-item.mm-open .nav-trigger { color: var(--mm-dea-text); }

.mm-dea .nav-trigger .chevron {
  font-size: 9px;
  opacity: 0.4;
  transition: transform 0.3s, opacity 0.2s;
  margin-left: 2px;
}
.mm-dea .nav-item:hover .nav-trigger .chevron,
.mm-dea .nav-item.mm-open .nav-trigger .chevron { transform: rotate(180deg); opacity: 0.7; }

/* DEALS trigger — special red styling */
.mm-dea .nav-item.deals-item .nav-trigger {
  background: var(--mm-dea-fire-dim);
  border-right: 1px solid rgba(255, 48, 48, 0.2);
  border-left: 1px solid rgba(255, 48, 48, 0.2);
  color: var(--mm-dea-fire);
  padding: 0 26px;
}
.mm-dea .nav-item.deals-item .nav-trigger .live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mm-dea-fire);
  box-shadow: 0 0 6px var(--mm-dea-fire);
  animation: mm-dea-pulse 1.4s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes mm-dea-pulse {
  0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 6px var(--mm-dea-fire); }
  50%      { opacity: 0.7; transform: scale(1.3); box-shadow: 0 0 12px var(--mm-dea-fire); }
}
.mm-dea .nav-item.deals-item:hover .nav-trigger,
.mm-dea .nav-item.deals-item.mm-open .nav-trigger {
  background: rgba(255, 48, 48, 0.18);
  color: #ff6060;
}

/* ── Mega panel ── */
.mm-dea .mega {
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--mm-dea-panel);
  border: 1px solid var(--mm-dea-border-mid);
  border-top: 2px solid var(--mm-dea-border-mid);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity 0.3s ease, transform 0.38s cubic-bezier(0.16, 1, 0.3, 1);
  display: grid;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
  overflow: hidden;
  max-width: calc(100vw - 24px);
  z-index: 5;
}
.mm-dea .nav-item:hover .mega,
.mm-dea .nav-item.mm-open .mega { opacity: 1; pointer-events: all; transform: translateY(0); }
.mm-dea .nav-item.deals-item .mega {
  border-top: 2px solid var(--mm-dea-fire);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8), 0 0 40px var(--mm-dea-fire-glow);
}

.mm-dea .mega-regular { grid-template-columns: 1fr 1fr 1fr;       min-width: min(640px, calc(100vw - 24px)); }
.mm-dea .mega-deals   { grid-template-columns: 260px 1fr 1fr 1fr; min-width: min(920px, calc(100vw - 24px)); }

/* ── Regular columns ── */
.mm-dea .reg-col {
  padding: 22px 20px;
  border-right: 1px solid var(--mm-dea-border);
}
.mm-dea .reg-col:last-of-type { border-right: none; }
.mm-dea .reg-col-title {
  font-family: 'Syne', system-ui, sans-serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mm-dea-text-dim);
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--mm-dea-border);
}
.mm-dea .reg-links { list-style: none; margin: 0; padding: 0; }
.mm-dea .reg-links li { list-style: none; }
.mm-dea .reg-links li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 0;
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 300;
  color: var(--mm-dea-text-mid);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  transition: color 0.2s, padding-left 0.25s;
}
.mm-dea .reg-links li a:hover { color: var(--mm-dea-text); padding-left: 8px; }
.mm-dea .reg-links li a .badge {
  font-family: 'Syne Mono', ui-monospace, monospace;
  font-size: 8px;
  padding: 2px 6px;
  border-radius: 3px;
  letter-spacing: 0.05em;
  flex-shrink: 0;
}
.mm-dea .badge-new  { background: var(--mm-dea-azure-dim); color: var(--mm-dea-azure); border: 1px solid rgba(59, 130, 246, 0.25); }
.mm-dea .badge-sale { background: var(--mm-dea-fire-dim);  color: var(--mm-dea-fire);  border: 1px solid rgba(255, 48, 48, 0.3); }

/* ── Deals hero ── */
.mm-dea .deals-hero {
  background: linear-gradient(160deg, #1f0808 0%, #140404 100%);
  border-right: 1px solid rgba(255, 48, 48, 0.2);
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  min-height: 400px;
  position: relative;
  overflow: hidden;
}
.mm-dea .deals-hero::before {
  content: '';
  position: absolute;
  top: -40px;
  left: -40px;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(255, 48, 48, 0.2) 0%, transparent 70%);
  pointer-events: none;
}
.mm-dea .deals-hero-label {
  font-family: 'Syne Mono', ui-monospace, monospace;
  font-size: 8px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mm-dea-fire);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
}
.mm-dea .deals-hero-label .live-badge {
  background: var(--mm-dea-fire);
  color: #fff;
  font-family: 'Syne', system-ui, sans-serif;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.12em;
  padding: 2px 6px;
  animation: mm-dea-flicker 2.5s ease-in-out infinite;
}
@keyframes mm-dea-flicker {
  0%, 90%, 100% { opacity: 1; }
  95% { opacity: 0.6; }
}
.mm-dea .deals-hero-title {
  font-family: 'Syne', system-ui, sans-serif;
  font-size: 40px;
  font-weight: 800;
  color: var(--mm-dea-fire);
  line-height: 0.95;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin-bottom: 6px;
  position: relative;
}
.mm-dea .deals-hero-sub {
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 200;
  color: rgba(255, 48, 48, 0.6);
  letter-spacing: 0.04em;
  margin-bottom: 22px;
  position: relative;
}

/* Countdown */
.mm-dea .countdown {
  display: flex;
  gap: 8px;
  margin-bottom: 22px;
  position: relative;
}
.mm-dea .cd-unit { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.mm-dea .cd-num {
  font-family: 'Syne Mono', ui-monospace, monospace;
  font-size: 22px;
  font-weight: 400;
  color: #fff;
  background: rgba(255, 48, 48, 0.15);
  border: 1px solid rgba(255, 48, 48, 0.35);
  width: 46px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: -0.05em;
}
.mm-dea .cd-label {
  font-family: 'Syne', system-ui, sans-serif;
  font-size: 7px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 48, 48, 0.5);
}
.mm-dea .cd-sep {
  font-family: 'Syne Mono', ui-monospace, monospace;
  font-size: 18px;
  color: rgba(255, 48, 48, 0.4);
  align-self: flex-start;
  margin-top: 8px;
}

/* Savings pills */
.mm-dea .savings-pills {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: auto;
  position: relative;
}
.mm-dea .savings-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: rgba(255, 48, 48, 0.08);
  border: 1px solid rgba(255, 48, 48, 0.2);
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s;
}
.mm-dea .savings-pill:hover { background: rgba(255, 48, 48, 0.15); border-color: rgba(255, 48, 48, 0.4); }
.mm-dea .savings-pill .sp-label {
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: var(--mm-dea-text);
}
.mm-dea .savings-pill .sp-pct {
  font-family: 'Syne', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--mm-dea-fire);
  letter-spacing: -0.02em;
}

/* Deal columns */
.mm-dea .deal-col {
  padding: 18px 18px;
  border-right: 1px solid var(--mm-dea-border);
  position: relative;
}
.mm-dea .deal-col:last-of-type { border-right: none; }
.mm-dea .deal-col-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--mm-dea-border);
}
.mm-dea .deal-col-title {
  font-family: 'Syne', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mm-dea-text);
}
.mm-dea .deal-col-type {
  font-family: 'Syne Mono', ui-monospace, monospace;
  font-size: 8px;
  letter-spacing: 0.12em;
  padding: 3px 7px;
  border-radius: 2px;
}
.mm-dea .type-clearance { background: var(--mm-dea-fire-dim);  color: var(--mm-dea-fire);  border: 1px solid rgba(255, 48, 48, 0.3); }
.mm-dea .type-promo     { background: var(--mm-dea-gold-dim);  color: var(--mm-dea-gold);  border: 1px solid rgba(245, 194, 66, 0.3); }
.mm-dea .type-flash     { background: var(--mm-dea-green-dim); color: var(--mm-dea-green); border: 1px solid rgba(34, 197, 94, 0.3); }

.mm-dea .deal-links { list-style: none; margin: 0; padding: 0; }
.mm-dea .deal-links li { list-style: none; }
.mm-dea .deal-links li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 300;
  color: var(--mm-dea-text-mid);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  transition: color 0.2s, padding-left 0.25s, background 0.2s;
  gap: 8px;
}
.mm-dea .deal-links li a .d-name { flex: 1; }
.mm-dea .deal-links li a .d-off {
  font-family: 'Syne', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: var(--mm-dea-fire);
  flex-shrink: 0;
  letter-spacing: -0.01em;
}
.mm-dea .deal-links li a .d-off.gold  { color: var(--mm-dea-gold); }
.mm-dea .deal-links li a .d-off.green { color: var(--mm-dea-green); }
.mm-dea .deal-links li a:hover {
  color: var(--mm-dea-text);
  padding-left: 8px;
  background: rgba(255, 255, 255, 0.02);
}

/* Promo code block */
.mm-dea .promo-block {
  margin-top: 12px;
  padding: 12px;
  background: var(--mm-dea-raised);
  border: 1px solid var(--mm-dea-border-mid);
}
.mm-dea .promo-block .pb-label {
  font-family: 'Syne', system-ui, sans-serif;
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mm-dea-text-dim);
  margin-bottom: 8px;
}
.mm-dea .promo-block .pb-code {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.mm-dea .promo-block .pb-code .code {
  font-family: 'Syne Mono', ui-monospace, monospace;
  font-size: 14px;
  font-weight: 400;
  color: var(--mm-dea-gold);
  letter-spacing: 0.08em;
  background: var(--mm-dea-gold-dim);
  border: 1px dashed rgba(245, 194, 66, 0.4);
  padding: 6px 12px;
  flex: 1;
  text-align: center;
}
.mm-dea .promo-block .pb-code .copy-btn {
  font-family: 'Syne', system-ui, sans-serif;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mm-dea-void);
  background: var(--mm-dea-gold);
  border: none;
  padding: 8px 14px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s;
}
.mm-dea .promo-block .pb-code .copy-btn:hover { background: #ffd060; }

/* Flash items */
.mm-dea .flash-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.mm-dea .flash-item .fi-info { flex: 1; }
.mm-dea .flash-item .fi-name {
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 300;
  color: var(--mm-dea-text-mid);
}
.mm-dea .flash-item .fi-stock {
  font-family: 'Syne Mono', ui-monospace, monospace;
  font-size: 8px;
  color: var(--mm-dea-green);
  margin-top: 2px;
  letter-spacing: 0.05em;
}
.mm-dea .flash-item .fi-pct {
  font-family: 'Syne', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--mm-dea-green);
  letter-spacing: -0.01em;
}

/* Footer */
.mm-dea .mega-footer {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  background: var(--mm-dea-raised);
  border-top: 1px solid var(--mm-dea-border);
  flex-wrap: wrap;
  gap: 10px;
}
.mm-dea .mega-footer .f-links { display: flex; gap: 18px; flex-wrap: wrap; }
.mm-dea .mega-footer .f-links a {
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 300;
  color: var(--mm-dea-text-dim);
  text-decoration: none;
  transition: color 0.2s;
}
.mm-dea .mega-footer .f-links a:hover { color: var(--mm-dea-text); }
.mm-dea .mega-footer .f-links a.hot { color: var(--mm-dea-fire); font-weight: 500; }
.mm-dea .mega-footer .f-right a {
  font-family: 'Syne', system-ui, sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mm-dea-fire);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: gap 0.3s;
}
.mm-dea .mega-footer .f-right a::after { content: '\2192'; }
.mm-dea .mega-footer .f-right a:hover { gap: 14px; }
.mm-dea .mega-footer .f-right a.hot-cta { color: var(--mm-dea-fire); }

/* Stagger */
.mm-dea .nav-item:hover .reg-links li,
.mm-dea .nav-item:hover .deal-links li,
.mm-dea .nav-item.mm-open .reg-links li,
.mm-dea .nav-item.mm-open .deal-links li { animation: mm-dea-up 0.3s ease both; }
.mm-dea .nav-item:hover .reg-links li:nth-child(1),
.mm-dea .nav-item:hover .deal-links li:nth-child(1),
.mm-dea .nav-item.mm-open .reg-links li:nth-child(1),
.mm-dea .nav-item.mm-open .deal-links li:nth-child(1) { animation-delay: 0.04s; }
.mm-dea .nav-item:hover .reg-links li:nth-child(2),
.mm-dea .nav-item:hover .deal-links li:nth-child(2),
.mm-dea .nav-item.mm-open .reg-links li:nth-child(2),
.mm-dea .nav-item.mm-open .deal-links li:nth-child(2) { animation-delay: 0.08s; }
.mm-dea .nav-item:hover .reg-links li:nth-child(3),
.mm-dea .nav-item:hover .deal-links li:nth-child(3),
.mm-dea .nav-item.mm-open .reg-links li:nth-child(3),
.mm-dea .nav-item.mm-open .deal-links li:nth-child(3) { animation-delay: 0.12s; }
.mm-dea .nav-item:hover .reg-links li:nth-child(4),
.mm-dea .nav-item:hover .deal-links li:nth-child(4),
.mm-dea .nav-item.mm-open .reg-links li:nth-child(4),
.mm-dea .nav-item.mm-open .deal-links li:nth-child(4) { animation-delay: 0.16s; }
.mm-dea .nav-item:hover .reg-links li:nth-child(5),
.mm-dea .nav-item:hover .deal-links li:nth-child(5),
.mm-dea .nav-item.mm-open .reg-links li:nth-child(5),
.mm-dea .nav-item.mm-open .deal-links li:nth-child(5) { animation-delay: 0.20s; }
.mm-dea .nav-item:hover .reg-links li:nth-child(6),
.mm-dea .nav-item:hover .deal-links li:nth-child(6),
.mm-dea .nav-item.mm-open .reg-links li:nth-child(6),
.mm-dea .nav-item.mm-open .deal-links li:nth-child(6) { animation-delay: 0.24s; }

@keyframes mm-dea-up {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 900px) {
  .mm-dea .nav-trigger { padding: 0 14px; font-size: 11px; }
  .mm-dea .nav-item.deals-item .nav-trigger { padding: 0 16px; }
  .mm-dea .mega-regular,
  .mm-dea .mega-deals {
    grid-template-columns: 1fr;
    min-width: calc(100vw - 24px);
  }
  .mm-dea .deals-hero { min-height: 0; border-right: 0; border-bottom: 1px solid rgba(255, 48, 48, 0.2); }
  .mm-dea .deal-col,
  .mm-dea .reg-col { border-right: 0; border-bottom: 1px solid var(--mm-dea-border); }
}

@media (prefers-reduced-motion: reduce) {
  .mm-dea .ticker-content,
  .mm-dea .nav-item.deals-item .nav-trigger .live-dot,
  .mm-dea .deals-hero-label .live-badge { animation: none; }
  .mm-dea .mega,
  .mm-dea .reg-links li,
  .mm-dea .deal-links li,
  .mm-dea .reg-links li a,
  .mm-dea .deal-links li a { transition: none; animation: none; }
}
```

**JS:**
```js
(() => {
  // ─── Flash Sale Command Center — countdown + copy button ───────────
  // This runs in addition to the shared mega-menu open/close handler;
  // CollectionGrid dedupes JS by string identity, so both snippets
  // execute exactly once even when the same scope appears N times.
  const root = document.querySelector('.mm-dea');
  if (!root) return;

  // Countdown — drives the cd-num data-attributed elements
  let totalSecs = 4 * 3600 + 22 * 60 + 8;
  const cdH = root.querySelector('[data-mm-dea-cd="h"]');
  const cdM = root.querySelector('[data-mm-dea-cd="m"]');
  const cdS = root.querySelector('[data-mm-dea-cd="s"]');
  const tick = () => {
    if (totalSecs <= 0) return;
    totalSecs--;
    const h = Math.floor(totalSecs / 3600);
    const m = Math.floor((totalSecs % 3600) / 60);
    const s = totalSecs % 60;
    if (cdH) cdH.textContent = String(h).padStart(2, '0');
    if (cdM) cdM.textContent = String(m).padStart(2, '0');
    if (cdS) cdS.textContent = String(s).padStart(2, '0');
  };
  if (cdH && cdM && cdS) setInterval(tick, 1000);

  // Copy button — copies the visible promo code to clipboard
  const copyBtn = root.querySelector('[data-mm-dea-copy]');
  const codeEl  = root.querySelector('.mm-dea .pb-code .code');
  if (copyBtn && codeEl) {
    copyBtn.addEventListener('click', e => {
      e.preventDefault();
      e.stopPropagation();
      const code = codeEl.textContent.trim();
      const finish = () => {
        copyBtn.textContent = 'Copied!';
        setTimeout(() => { copyBtn.textContent = 'Copy'; }, 1800);
      };
      if (navigator.clipboard && navigator.clipboard.writeText) {
        navigator.clipboard.writeText(code).then(finish, finish);
      } else {
        finish();
      }
    });
  }
})();
```

---
## 6 CSS Minimalist UI Designs

URL: https://codefronts.com/design-styles/css-minimalist-ui/
Description: 6 hand-coded CSS minimalist UI screen mocks covering the surfaces minimalist design has to win — a dark SaaS dashboard, a Florentine luxury e-commerce storefront, a brutalist-white creative portfolio, a broadsheet editorial layout, a fintech mobile app inside a realistic phone frame, and a high-impact single-product SaaS landing page. Built on strategic whitespace, crisp typography hierarchy, and disciplined colour systems. Pure CSS plus scoped JS — no UI framework, no images.
Demo count: 6

### 01. Axiom Dashboard

**Type:** CSS + JS
**Description:** A dark minimalist SaaS dashboard UI with a chartreuse #c8ff00 accent — a complete cockpit composition that proves how strategic whitespace and crisp typography reduce cognitive load on data-heavy applications. Left sidebar with logo + grouped nav (Overview / Manage / Account) and a live status indicator, a 4-column KPI strip with staggered count-up reveals and per-card sparkline charts, a wide bar chart built dynamically in JavaScript with staggered bar-grow animations on initial mount, a real-time event feed panel with iconified rows, a campaign performance table with status pills (Active / Paused / Error) and inline progress bars, and a traffic-sources breakdown panel with mini-bar visualisation. Typography pairs Syne (display) with DM Mono (numbers and labels). Best for SaaS product dashboards, admin panels, analytics products, internal tools, monochrome data UIs.

**HTML:**
```html
<section class="mu-sd" aria-label="Axiom SaaS dashboard demo">
  <div class="sidebar">
    <div class="logo">
      <div class="logo-mark" aria-hidden="true">
        <svg width="14" height="14" viewBox="0 0 14 14"><rect x="1" y="1" width="5" height="5" fill="#0a0a0a"/><rect x="8" y="1" width="5" height="5" fill="#0a0a0a"/><rect x="1" y="8" width="5" height="5" fill="#0a0a0a"/><rect x="8" y="8" width="5" height="5" fill="#0a0a0a" opacity="0.4"/></svg>
      </div>
      Axiom
    </div>
    <div class="nav-section">
      <div class="nav-label">Overview</div>
      <div class="nav-item active"><div class="nav-dot"></div>Dashboard<span class="badge live">Live</span></div>
      <div class="nav-item"><div class="nav-dot"></div>Analytics</div>
      <div class="nav-item"><div class="nav-dot"></div>Reports<span class="badge">4</span></div>
    </div>
    <div class="nav-section nav-section-spaced">
      <div class="nav-label">Manage</div>
      <div class="nav-item"><div class="nav-dot"></div>Campaigns</div>
      <div class="nav-item"><div class="nav-dot"></div>Audiences</div>
      <div class="nav-item"><div class="nav-dot"></div>Integrations<span class="badge">New</span></div>
    </div>
    <div class="nav-section nav-section-spaced">
      <div class="nav-label">Account</div>
      <div class="nav-item"><div class="nav-dot"></div>Settings</div>
      <div class="nav-item"><div class="nav-dot"></div>Billing</div>
    </div>
    <div class="sidebar-footer">
      <div class="user-row">
        <div class="avatar">MK</div>
        <div>
          <div class="user-name">M. Kovalev</div>
          <div class="user-role">Admin · Pro</div>
        </div>
      </div>
    </div>
  </div>
  <div class="main">
    <div class="topbar">
      <div><span class="topbar-title">Overview</span><span class="topbar-sub">/ Q2 2025</span></div>
      <div class="live-dot live-dot-inline" aria-hidden="true"></div>
      <div class="topbar-right">
        <div class="tab-group" role="tablist"><div class="tab">Day</div><div class="tab active">Week</div><div class="tab">Month</div><div class="tab">YTD</div></div>
        <button class="btn-outline" type="button">Export</button>
        <button class="btn-accent" type="button">+ New Report</button>
      </div>
    </div>
    <div class="content">
      <div class="kpi-row">
        <div class="kpi-card highlight">
          <div class="kpi-label">Revenue</div>
          <div class="kpi-value accent">$284.9K</div>
          <div class="kpi-delta delta-up">↑ 18.4% vs last week</div>
          <div class="kpi-sparkline" aria-hidden="true"><svg width="60" height="30"><polyline points="0,25 10,18 20,22 30,10 40,14 50,4 60,8" fill="none" stroke="#c8ff00" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
        </div>
        <div class="kpi-card">
          <div class="kpi-label">Active Users</div>
          <div class="kpi-value">12,430</div>
          <div class="kpi-delta delta-up">↑ 6.1% vs last week</div>
          <div class="kpi-sparkline" aria-hidden="true"><svg width="60" height="30"><polyline points="0,22 10,19 20,16 30,20 40,12 50,9 60,13" fill="none" stroke="#4499ff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
        </div>
        <div class="kpi-card">
          <div class="kpi-label">Conversion</div>
          <div class="kpi-value">3.87%</div>
          <div class="kpi-delta delta-down">↓ 0.3% vs last week</div>
          <div class="kpi-sparkline" aria-hidden="true"><svg width="60" height="30"><polyline points="0,10 10,14 20,11 30,17 40,20 50,18 60,22" fill="none" stroke="#ff4444" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
        </div>
        <div class="kpi-card">
          <div class="kpi-label">Avg. Session</div>
          <div class="kpi-value">4m 12s</div>
          <div class="kpi-delta delta-up">↑ 22s vs last week</div>
          <div class="kpi-sparkline" aria-hidden="true"><svg width="60" height="30"><polyline points="0,20 10,16 20,18 30,12 40,10 50,13 60,8" fill="none" stroke="#888" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
        </div>
      </div>
      <div class="chart-section">
        <div class="panel">
          <div class="panel-header">
            <div><span class="panel-title">Revenue Breakdown</span><span class="panel-sub"> — weekly</span></div>
            <div class="panel-actions"><button class="btn-outline btn-outline-mini" type="button">MRR</button><button class="btn-outline btn-outline-mini" type="button">ARR</button></div>
          </div>
          <div class="chart-body">
            <div class="chart-y-labels"><span class="y-label">$80K</span><span class="y-label">$60K</span><span class="y-label">$40K</span><span class="y-label">$20K</span><span class="y-label">$0</span></div>
            <div class="chart-canvas">
              <div class="chart-grid-lines"><div class="grid-line"></div><div class="grid-line"></div><div class="grid-line"></div><div class="grid-line"></div><div class="grid-line"></div></div>
              <div class="bar-group" data-mu-sd-bars></div>
              <div class="x-labels" data-mu-sd-xlabels></div>
            </div>
          </div>
        </div>
        <div class="panel">
          <div class="panel-header"><span class="panel-title">Recent Events</span></div>
          <div class="activity-item"><div class="activity-icon green">↑</div><div class="activity-text"><div class="activity-name">Stripe payment</div><div class="activity-time">2 min ago · prod</div></div><div class="activity-amount pos">+$2,400</div></div>
          <div class="activity-item"><div class="activity-icon blue">↔</div><div class="activity-text"><div class="activity-name">User upgrade</div><div class="activity-time">14 min ago · api</div></div><div class="activity-amount activity-amount-blue">Pro</div></div>
          <div class="activity-item"><div class="activity-icon red">↓</div><div class="activity-text"><div class="activity-name">Churn event</div><div class="activity-time">41 min ago · prod</div></div><div class="activity-amount neg">−$799</div></div>
          <div class="activity-item"><div class="activity-icon green">↑</div><div class="activity-text"><div class="activity-name">New subscriber</div><div class="activity-time">1h ago · web</div></div><div class="activity-amount pos">+$149</div></div>
          <div class="activity-item"><div class="activity-icon blue">★</div><div class="activity-text"><div class="activity-name">Feature flag live</div><div class="activity-time">2h ago · deploy</div></div><div class="activity-amount activity-amount-dim">v4.2</div></div>
        </div>
      </div>
      <div class="table-section">
        <div class="panel">
          <div class="panel-header"><span class="panel-title">Campaigns</span><div class="panel-actions"><span class="badge">6 active</span></div></div>
          <table><thead><tr><th>Campaign</th><th>Status</th><th>Reach</th><th>CVR</th><th>Progress</th></tr></thead>
          <tbody>
            <tr><td class="td-strong">Spring Drop</td><td><span class="status-pill active">Active</span></td><td>48.2K</td><td class="td-accent">5.4%</td><td><div class="progress-bar"><div class="progress-fill" data-progress="82"></div></div></td></tr>
            <tr><td class="td-strong">Retarget B</td><td><span class="status-pill active">Active</span></td><td>21.7K</td><td>3.1%</td><td><div class="progress-bar"><div class="progress-fill" data-progress="58"></div></div></td></tr>
            <tr><td class="td-strong">Email Drip</td><td><span class="status-pill paused">Paused</span></td><td>9.4K</td><td>1.8%</td><td><div class="progress-bar"><div class="progress-fill" data-progress="31"></div></div></td></tr>
            <tr><td class="td-strong">Paid Search</td><td><span class="status-pill error">Error</span></td><td>—</td><td>—</td><td><div class="progress-bar"><div class="progress-fill" data-progress="0"></div></div></td></tr>
          </tbody></table>
        </div>
        <div class="panel">
          <div class="panel-header"><span class="panel-title">Traffic Sources</span></div>
          <div class="donut-group">
            <div class="donut-row"><div class="donut-label">Organic Search</div><div class="mini-bar"><div class="mini-fill mini-fill-accent" data-w="68"></div></div><div class="donut-val">68%</div></div>
            <div class="donut-row"><div class="donut-label">Paid Social</div><div class="mini-bar"><div class="mini-fill mini-fill-blue" data-w="42"></div></div><div class="donut-val">42%</div></div>
            <div class="donut-row"><div class="donut-label">Direct</div><div class="mini-bar"><div class="mini-fill mini-fill-grey" data-w="24"></div></div><div class="donut-val">24%</div></div>
            <div class="donut-row"><div class="donut-label">Referral</div><div class="mini-bar"><div class="mini-fill mini-fill-mid" data-w="15"></div></div><div class="donut-val">15%</div></div>
            <div class="donut-row"><div class="donut-label">Email</div><div class="mini-bar"><div class="mini-fill mini-fill-dim" data-w="9"></div></div><div class="donut-val">9%</div></div>
            <div class="donut-footer"><span class="donut-foot-label">Total sessions</span><span class="donut-foot-val">198,340</span></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
```

**CSS:**
```css
/* ─── 01 Axiom SaaS Dashboard — minimalist dark cockpit UI ─────── */
@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400;500&family=Syne:wght@400;600;700;800&display=swap');

.mu-sd {
  --mu-sd-bg: #0a0a0a;
  --mu-sd-surface: #111111;
  --mu-sd-border: #1e1e1e;
  --mu-sd-border-mid: #2a2a2a;
  --mu-sd-text-primary: #f0f0f0;
  --mu-sd-text-secondary: #888;
  --mu-sd-text-dim: #444;
  --mu-sd-accent: #c8ff00;
  --mu-sd-accent-dim: rgba(200,255,0,0.08);
  --mu-sd-red: #ff4444;
  --mu-sd-blue: #4499ff;
  --mu-sd-mono: 'DM Mono', monospace;
  --mu-sd-sans: 'Syne', sans-serif;

  position: relative;
  width: 100%;
  min-height: 760px;
  background: var(--mu-sd-bg);
  color: var(--mu-sd-text-primary);
  font-family: var(--mu-sd-sans);
  display: flex;
  overflow: hidden;
  box-sizing: border-box;
}
.mu-sd *,
.mu-sd *::before,
.mu-sd *::after { box-sizing: border-box; margin: 0; padding: 0; }

.mu-sd .sidebar { width: 220px; min-width: 220px; background: var(--mu-sd-surface); border-right: 1px solid var(--mu-sd-border); display: flex; flex-direction: column; padding: 28px 0; }
.mu-sd .logo { padding: 0 24px 32px; font-size: 13px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; display: flex; align-items: center; gap: 10px; }
.mu-sd .logo-mark { width: 28px; height: 28px; background: var(--mu-sd-accent); border-radius: 6px; display: flex; align-items: center; justify-content: center; }
.mu-sd .nav-section { padding: 0 12px; margin-bottom: 8px; }
.mu-sd .nav-section-spaced { margin-top: 16px; }
.mu-sd .nav-label { font-family: var(--mu-sd-mono); font-size: 9px; letter-spacing: 0.2em; color: var(--mu-sd-text-dim); text-transform: uppercase; padding: 0 12px; margin-bottom: 4px; }
.mu-sd .nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px; cursor: pointer; font-size: 13.5px; font-weight: 500; color: var(--mu-sd-text-secondary); transition: all 0.15s; position: relative; }
.mu-sd .nav-item:hover { color: var(--mu-sd-text-primary); background: var(--mu-sd-border); }
.mu-sd .nav-item.active { color: var(--mu-sd-accent); background: var(--mu-sd-accent-dim); }
.mu-sd .nav-item.active::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 18px; background: var(--mu-sd-accent); border-radius: 0 3px 3px 0; }
.mu-sd .nav-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: 0.4; }
.mu-sd .nav-item.active .nav-dot { opacity: 1; }
.mu-sd .badge { margin-left: auto; font-family: var(--mu-sd-mono); font-size: 10px; background: var(--mu-sd-border-mid); padding: 2px 7px; border-radius: 20px; color: var(--mu-sd-text-secondary); }
.mu-sd .badge.live { background: rgba(200,255,0,0.12); color: var(--mu-sd-accent); }
.mu-sd .sidebar-footer { margin-top: auto; padding: 16px 24px; border-top: 1px solid var(--mu-sd-border); }
.mu-sd .user-row { display: flex; align-items: center; gap: 10px; }
.mu-sd .avatar { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg,#c8ff00,#88bb00); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #0a0a0a; }
.mu-sd .user-name { font-size: 12.5px; font-weight: 600; }
.mu-sd .user-role { font-family: var(--mu-sd-mono); font-size: 10px; color: var(--mu-sd-text-dim); }
.mu-sd .main { flex: 1; overflow-y: auto; display: flex; flex-direction: column; }
.mu-sd .topbar { display: flex; align-items: center; padding: 20px 32px; border-bottom: 1px solid var(--mu-sd-border); gap: 16px; }
.mu-sd .topbar-title { font-size: 14px; font-weight: 600; }
.mu-sd .topbar-sub { font-family: var(--mu-sd-mono); font-size: 11px; color: var(--mu-sd-text-dim); margin-left: 4px; }
.mu-sd .topbar-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.mu-sd .tab-group { display: flex; background: var(--mu-sd-surface); border: 1px solid var(--mu-sd-border); border-radius: 8px; padding: 3px; gap: 2px; }
.mu-sd .tab { font-family: var(--mu-sd-mono); font-size: 11px; padding: 5px 14px; border-radius: 5px; cursor: pointer; color: var(--mu-sd-text-dim); transition: all 0.15s; }
.mu-sd .tab.active { background: var(--mu-sd-border-mid); color: var(--mu-sd-text-primary); }
.mu-sd .btn-outline { font-family: var(--mu-sd-mono); font-size: 11px; padding: 7px 16px; border: 1px solid var(--mu-sd-border-mid); background: transparent; color: var(--mu-sd-text-secondary); border-radius: 8px; cursor: pointer; }
.mu-sd .btn-outline-mini { padding: 4px 10px; font-size: 10px; }
.mu-sd .btn-accent { font-family: var(--mu-sd-mono); font-size: 11px; padding: 7px 16px; border: none; background: var(--mu-sd-accent); color: #0a0a0a; border-radius: 8px; cursor: pointer; font-weight: 500; }
.mu-sd .content { padding: 28px 32px; display: flex; flex-direction: column; gap: 20px; }
.mu-sd .kpi-row { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }
.mu-sd .kpi-card { background: var(--mu-sd-surface); border: 1px solid var(--mu-sd-border); border-radius: 12px; padding: 20px 22px; position: relative; overflow: hidden; }
.mu-sd .kpi-card.highlight { border-color: rgba(200,255,0,0.2); }
.mu-sd .kpi-card.highlight::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--mu-sd-accent); }
.mu-sd .kpi-label { font-family: var(--mu-sd-mono); font-size: 10px; letter-spacing: 0.12em; color: var(--mu-sd-text-dim); text-transform: uppercase; margin-bottom: 10px; }
.mu-sd .kpi-value { font-size: 28px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; margin-bottom: 8px; animation: mu-sd-count 0.5s ease both; }
.mu-sd .kpi-value.accent { color: var(--mu-sd-accent); }
.mu-sd .kpi-delta { font-family: var(--mu-sd-mono); font-size: 11px; }
.mu-sd .delta-up { color: var(--mu-sd-accent); } .mu-sd .delta-down { color: var(--mu-sd-red); }
.mu-sd .kpi-sparkline { position: absolute; right: 16px; bottom: 16px; opacity: 0.3; }
.mu-sd .kpi-card:nth-child(1) .kpi-value { animation-delay: 0.1s; } .mu-sd .kpi-card:nth-child(2) .kpi-value { animation-delay: 0.2s; }
.mu-sd .kpi-card:nth-child(3) .kpi-value { animation-delay: 0.3s; } .mu-sd .kpi-card:nth-child(4) .kpi-value { animation-delay: 0.4s; }
@keyframes mu-sd-count { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.mu-sd .chart-section { display: grid; grid-template-columns: 1fr 340px; gap: 14px; }
.mu-sd .panel { background: var(--mu-sd-surface); border: 1px solid var(--mu-sd-border); border-radius: 12px; overflow: hidden; }
.mu-sd .panel-header { display: flex; align-items: center; padding: 16px 22px; border-bottom: 1px solid var(--mu-sd-border); gap: 10px; }
.mu-sd .panel-title { font-size: 13px; font-weight: 600; }
.mu-sd .panel-sub { font-family: var(--mu-sd-mono); font-size: 10px; color: var(--mu-sd-text-dim); }
.mu-sd .panel-actions { margin-left: auto; display: flex; gap: 8px; }
.mu-sd .chart-body { padding: 20px 22px 16px; position: relative; height: 200px; }
.mu-sd .chart-y-labels { position: absolute; left: 22px; top: 20px; bottom: 30px; display: flex; flex-direction: column; justify-content: space-between; }
.mu-sd .y-label { font-family: var(--mu-sd-mono); font-size: 10px; color: var(--mu-sd-text-dim); }
.mu-sd .chart-canvas { margin-left: 36px; height: 100%; position: relative; }
.mu-sd .chart-grid-lines { position: absolute; top: 0; bottom: 24px; left: 0; right: 0; display: flex; flex-direction: column; justify-content: space-between; }
.mu-sd .grid-line { width: 100%; height: 1px; background: var(--mu-sd-border); }
.mu-sd .bar-group { position: absolute; bottom: 24px; left: 0; right: 0; height: calc(100% - 24px); display: flex; align-items: flex-end; gap: 8px; padding: 0 4px; }
.mu-sd .bar-wrap { flex: 1; display: flex; align-items: flex-end; gap: 2px; height: 100%; }
.mu-sd .bar { flex: 1; border-radius: 3px 3px 0 0; cursor: pointer; animation: mu-sd-bar 0.6s cubic-bezier(0.23,1,0.32,1) both; }
.mu-sd .bar.primary { background: var(--mu-sd-accent); opacity: 0.9; } .mu-sd .bar.secondary { background: var(--mu-sd-border-mid); }
@keyframes mu-sd-bar { from { transform: scaleY(0); transform-origin: bottom; } to { transform: scaleY(1); transform-origin: bottom; } }
.mu-sd .x-labels { position: absolute; bottom: 0; left: 0; right: 0; display: flex; gap: 8px; padding: 0 4px; }
.mu-sd .x-label { flex: 1; font-family: var(--mu-sd-mono); font-size: 9px; color: var(--mu-sd-text-dim); text-align: center; }
.mu-sd .activity-item { display: flex; align-items: center; gap: 12px; padding: 11px 22px; border-bottom: 1px solid var(--mu-sd-border); cursor: pointer; }
.mu-sd .activity-item:last-child { border-bottom: none; }
.mu-sd .activity-icon { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0; }
.mu-sd .activity-icon.green { background: rgba(200,255,0,0.1); } .mu-sd .activity-icon.blue { background: rgba(68,153,255,0.1); } .mu-sd .activity-icon.red { background: rgba(255,68,68,0.1); }
.mu-sd .activity-text { flex: 1; min-width: 0; }
.mu-sd .activity-name { font-size: 12.5px; font-weight: 500; }
.mu-sd .activity-time { font-family: var(--mu-sd-mono); font-size: 10px; color: var(--mu-sd-text-dim); margin-top: 1px; }
.mu-sd .activity-amount { font-family: var(--mu-sd-mono); font-size: 12px; font-weight: 500; }
.mu-sd .activity-amount.pos { color: var(--mu-sd-accent); } .mu-sd .activity-amount.neg { color: var(--mu-sd-red); }
.mu-sd .activity-amount-blue { color: var(--mu-sd-blue); } .mu-sd .activity-amount-dim { color: var(--mu-sd-text-dim); }
.mu-sd .live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--mu-sd-accent); animation: mu-sd-pulse 2s infinite; }
.mu-sd .live-dot-inline { margin-left: 10px; }
@keyframes mu-sd-pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.7); } }
.mu-sd .table-section { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.mu-sd table { width: 100%; border-collapse: collapse; }
.mu-sd th { font-family: var(--mu-sd-mono); font-size: 9px; letter-spacing: 0.15em; color: var(--mu-sd-text-dim); text-transform: uppercase; padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--mu-sd-border); }
.mu-sd td { padding: 11px 14px; font-size: 12.5px; border-bottom: 1px solid var(--mu-sd-border); color: var(--mu-sd-text-secondary); }
.mu-sd tr:last-child td { border-bottom: none; }
.mu-sd .td-strong { color: var(--mu-sd-text-primary); font-weight: 500; }
.mu-sd .td-accent { color: var(--mu-sd-accent); }
.mu-sd .status-pill { font-family: var(--mu-sd-mono); font-size: 9px; padding: 3px 8px; border-radius: 20px; }
.mu-sd .status-pill.active { background: rgba(200,255,0,0.12); color: var(--mu-sd-accent); }
.mu-sd .status-pill.paused { background: rgba(255,255,255,0.06); color: var(--mu-sd-text-dim); }
.mu-sd .status-pill.error { background: rgba(255,68,68,0.1); color: var(--mu-sd-red); }
.mu-sd .progress-bar { width: 80px; height: 4px; background: var(--mu-sd-border-mid); border-radius: 2px; overflow: hidden; }
.mu-sd .progress-fill { height: 100%; background: var(--mu-sd-accent); border-radius: 2px; }
.mu-sd .progress-fill[data-progress="0"] { width: 0%; }
.mu-sd .progress-fill[data-progress="31"] { width: 31%; }
.mu-sd .progress-fill[data-progress="58"] { width: 58%; }
.mu-sd .progress-fill[data-progress="82"] { width: 82%; }
.mu-sd .donut-group { padding: 20px 22px; display: flex; flex-direction: column; gap: 12px; }
.mu-sd .donut-row { display: flex; align-items: center; gap: 14px; }
.mu-sd .donut-label { flex: 1; font-size: 12.5px; color: var(--mu-sd-text-secondary); }
.mu-sd .donut-val { font-family: var(--mu-sd-mono); font-size: 12px; color: var(--mu-sd-text-primary); font-weight: 500; }
.mu-sd .mini-bar { flex: 1; height: 3px; background: var(--mu-sd-border-mid); border-radius: 2px; overflow: hidden; margin: 0 8px; }
.mu-sd .mini-fill { height: 100%; border-radius: 2px; }
.mu-sd .mini-fill-accent { background: var(--mu-sd-accent); } .mu-sd .mini-fill-blue { background: var(--mu-sd-blue); }
.mu-sd .mini-fill-grey { background: #888; } .mu-sd .mini-fill-mid { background: #555; } .mu-sd .mini-fill-dim { background: #333; }
.mu-sd .mini-fill[data-w="9"] { width: 9%; } .mu-sd .mini-fill[data-w="15"] { width: 15%; } .mu-sd .mini-fill[data-w="24"] { width: 24%; }
.mu-sd .mini-fill[data-w="42"] { width: 42%; } .mu-sd .mini-fill[data-w="68"] { width: 68%; }
.mu-sd .donut-footer { margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--mu-sd-border); display: flex; justify-content: space-between; align-items: center; }
.mu-sd .donut-foot-label { font-family: var(--mu-sd-mono); font-size: 10px; color: var(--mu-sd-text-dim); }
.mu-sd .donut-foot-val { font-family: var(--mu-sd-mono); font-size: 14px; color: var(--mu-sd-text-primary); font-weight: 500; }
.mu-sd .main::-webkit-scrollbar { width: 4px; } .mu-sd .main::-webkit-scrollbar-thumb { background: var(--mu-sd-border-mid); border-radius: 2px; }

@media (max-width: 900px) {
  .mu-sd { flex-direction: column; }
  .mu-sd .sidebar { width: 100%; min-width: 0; flex-direction: row; padding: 16px; overflow-x: auto; }
  .mu-sd .nav-section, .mu-sd .sidebar-footer { padding: 0; margin: 0 12px 0 0; border: none; }
  .mu-sd .kpi-row { grid-template-columns: 1fr 1fr; }
  .mu-sd .chart-section, .mu-sd .table-section { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .mu-sd .kpi-value, .mu-sd .bar, .mu-sd .live-dot { animation: none !important; }
}
```

**JS:**
```js
(() => {
  // Scoped chart builder — finds the bars container inside .mu-sd only,
  // so multiple instances can render on one page without colliding on
  // an element id.
  const root = document.querySelector('.mu-sd');
  if (!root) return;
  const bars = root.querySelector('[data-mu-sd-bars]');
  const xlabels = root.querySelector('[data-mu-sd-xlabels]');
  if (!bars || !xlabels || bars.childElementCount > 0) return;
  const data = [
    { label: 'Mon', a: 55, b: 30 },
    { label: 'Tue', a: 70, b: 25 },
    { label: 'Wed', a: 45, b: 40 },
    { label: 'Thu', a: 80, b: 20 },
    { label: 'Fri', a: 65, b: 35 },
    { label: 'Sat', a: 90, b: 15 },
    { label: 'Sun', a: 60, b: 45 },
  ];
  data.forEach((d, i) => {
    const wrap = document.createElement('div');
    wrap.className = 'bar-wrap';
    const b1 = document.createElement('div');
    b1.className = 'bar primary';
    b1.style.height = d.a + '%';
    b1.style.animationDelay = (i * 0.07 + 0.3) + 's';
    const b2 = document.createElement('div');
    b2.className = 'bar secondary';
    b2.style.height = d.b + '%';
    b2.style.animationDelay = (i * 0.07 + 0.4) + 's';
    wrap.append(b1, b2);
    bars.appendChild(wrap);
    const lbl = document.createElement('div');
    lbl.className = 'x-label';
    lbl.textContent = d.label;
    xlabels.appendChild(lbl);
  });
})();
```

### 02. Maison Elara Storefront

**Type:** Pure CSS
**Description:** A minimalist luxury e-commerce storefront UI in cream + deep ink with a Florentine fashion-house aesthetic — proving that high-end retail layouts work best when whitespace, typography hierarchy, and product photography do all the talking. Split-screen hero with a full-bleed dark left panel (oversized ghost-text "SS" letterform, gold-accented eyebrow, Cormorant Garamond display headline with italic accent, gold CTA), a composed SVG product silhouette on the right with hero badge + price tag, a scrolling marquee bar with five service propositions, a 3-column product grid with hover quick-add reveals + color-dot swatches + "−15%" sale tag, and an editorial "atelier" feature strip with three numbered principles framed by a giant ghost serif word. Typography: Cormorant Garamond + Jost. Best for luxury fashion e-commerce, premium retail storefronts, jewellery brands, perfume houses, boutique hotel landing pages.

**HTML:**
```html
<section class="mu-ec" aria-label="Maison Elara luxury e-commerce demo">
  <nav>
    <div class="nav-links">
      <span class="nav-link active">New Arrivals</span>
      <span class="nav-link">Collections</span>
      <span class="nav-link">Maison</span>
      <span class="nav-link">Editorials</span>
    </div>
    <div class="brand">Maison Elara</div>
    <div class="nav-actions">
      <span class="nav-icon">Search</span>
      <span class="nav-icon">Account</span>
      <span class="nav-icon nav-icon-cart">
        Cart
        <span class="cart-count">3</span>
      </span>
    </div>
  </nav>

  <section class="hero">
    <div class="hero-left">
      <div class="hero-bg-text" aria-hidden="true">SS</div>
      <div class="hero-season">Spring / Summer 2025 — Exclusive Debut</div>
      <h1 class="hero-title">The Art<br>of <em>Quiet</em><br>Luxury</h1>
      <p class="hero-desc">Sculpted in the finest Florentine calfskin. Each piece is an architecture of restraint — where silence becomes the loudest statement.</p>
      <div class="hero-cta-group">
        <button class="btn-primary" type="button">Explore Collection</button>
        <button class="btn-ghost" type="button">View Lookbook</button>
      </div>
      <div class="hero-scroll">
        <div class="scroll-line"></div>
        <span class="scroll-txt">Scroll to discover</span>
      </div>
    </div>
    <div class="hero-right">
      <div class="hero-img-area">
        <svg class="hero-product-svg" width="280" height="380" viewBox="0 0 280 380" aria-hidden="true">
          <defs>
            <linearGradient id="mu-ec-bg" x1="0%" y1="0%" x2="100%" y2="100%">
              <stop offset="0%" stop-color="#c8b89a"/>
              <stop offset="50%" stop-color="#a89070"/>
              <stop offset="100%" stop-color="#8a7255"/>
            </linearGradient>
            <linearGradient id="mu-ec-sh" x1="0%" y1="0%" x2="0%" y2="100%">
              <stop offset="0%" stop-color="#7a6248"/>
              <stop offset="100%" stop-color="#9a7a5a"/>
            </linearGradient>
          </defs>
          <rect x="20" y="60" width="240" height="300" rx="2" fill="url(#mu-ec-bg)"/>
          <rect x="110" y="20" width="60" height="50" rx="2" fill="url(#mu-ec-sh)"/>
          <rect x="128" y="10" width="24" height="15" rx="12" fill="#6a5238" stroke="#5a4228" stroke-width="1"/>
          <line x1="20" y1="160" x2="260" y2="160" stroke="rgba(255,255,255,0.15)" stroke-width="1"/>
          <rect x="90" y="175" width="100" height="30" rx="1" fill="rgba(255,255,255,0.08)"/>
          <text x="140" y="195" text-anchor="middle" font-family="'Cormorant Garamond',serif" font-size="10" fill="rgba(255,255,255,0.5)" letter-spacing="3">ELARA</text>
          <circle cx="140" cy="330" r="8" fill="rgba(0,0,0,0.2)"/>
          <circle cx="140" cy="330" r="4" fill="rgba(255,255,255,0.15)"/>
        </svg>
        <div class="hero-badge">
          <span class="badge-line1">New</span>
          <span class="badge-line2">2025</span>
        </div>
        <div class="hero-price-tag">
          <div class="price-label">Starting from</div>
          <div class="price-value">€ 1,890</div>
        </div>
      </div>
    </div>
  </section>

  <div class="marquee-bar">
    <div class="marquee-track">
      <div class="marquee-item">Handcrafted in Florence<span class="marquee-dot"></span>Free Express Shipping<span class="marquee-dot"></span>Complimentary Gift Wrapping<span class="marquee-dot"></span>Lifetime Authenticity Guarantee<span class="marquee-dot"></span>Made-to-Order Available</div>
      <div class="marquee-item">Handcrafted in Florence<span class="marquee-dot"></span>Free Express Shipping<span class="marquee-dot"></span>Complimentary Gift Wrapping<span class="marquee-dot"></span>Lifetime Authenticity Guarantee<span class="marquee-dot"></span>Made-to-Order Available</div>
    </div>
  </div>

  <div class="section-header">
    <div>
      <div class="section-eyebrow">Curated Selections</div>
      <h2 class="section-title">New <em>Arrivals</em></h2>
    </div>
    <a class="section-link" href="#">View all pieces →</a>
  </div>

  <div class="products-grid">
    <article class="product-card">
      <div class="product-tag new">New</div>
      <div class="product-img-wrap">
        <svg width="180" height="240" viewBox="0 0 180 240" aria-hidden="true">
          <defs><linearGradient id="mu-ec-p1" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e8ddc8"/><stop offset="100%" stop-color="#c4b090"/></linearGradient></defs>
          <rect x="40" y="30" width="100" height="160" rx="2" fill="url(#mu-ec-p1)"/>
          <rect x="60" y="50" width="60" height="2" fill="rgba(0,0,0,0.1)"/>
          <rect x="60" y="60" width="60" height="2" fill="rgba(0,0,0,0.07)"/>
          <circle cx="90" cy="130" r="12" fill="rgba(0,0,0,0.06)" stroke="rgba(0,0,0,0.08)" stroke-width="1"/>
          <rect x="75" y="185" width="30" height="8" rx="1" fill="rgba(0,0,0,0.08)"/>
        </svg>
        <div class="product-quick">Add to Bag</div>
      </div>
      <div class="product-info">
        <div class="product-name">Alma Tote</div>
        <div class="product-sub">Full-grain calfskin · Almond</div>
        <div class="product-footer">
          <div class="product-price">€ 2,240</div>
          <div class="product-colors">
            <div class="color-dot color-almond"></div>
            <div class="color-dot color-noir"></div>
            <div class="color-dot color-bordeaux"></div>
          </div>
        </div>
      </div>
    </article>

    <article class="product-card">
      <div class="product-img-wrap product-img-noir">
        <svg width="160" height="220" viewBox="0 0 160 220" aria-hidden="true">
          <defs><linearGradient id="mu-ec-p2" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3a3530"/><stop offset="100%" stop-color="#1a1714"/></linearGradient></defs>
          <rect x="20" y="40" width="120" height="150" rx="1" fill="url(#mu-ec-p2)"/>
          <rect x="20" y="70" width="120" height="1" fill="rgba(255,255,255,0.08)"/>
          <rect x="55" y="10" width="50" height="35" rx="1" fill="#2a2520"/>
          <rect x="68" y="5" width="24" height="10" rx="5" fill="#1a1510" stroke="#333" stroke-width="0.5"/>
          <rect x="38" y="90" width="84" height="60" rx="1" fill="rgba(255,255,255,0.03)"/>
          <text x="80" y="124" text-anchor="middle" font-family="'Cormorant Garamond',serif" font-size="9" fill="rgba(255,255,255,0.3)" letter-spacing="4">ELARA</text>
        </svg>
        <div class="product-quick">Add to Bag</div>
      </div>
      <div class="product-info">
        <div class="product-name">Nox Clutch</div>
        <div class="product-sub">Patent leather · Noir</div>
        <div class="product-footer">
          <div class="product-price">€ 1,490</div>
          <div class="product-colors">
            <div class="color-dot color-noir"></div>
            <div class="color-dot color-cognac"></div>
          </div>
        </div>
      </div>
    </article>

    <article class="product-card">
      <div class="product-tag sale">−15%</div>
      <div class="product-img-wrap product-img-sand">
        <svg width="200" height="250" viewBox="0 0 200 250" aria-hidden="true">
          <defs><linearGradient id="mu-ec-p3" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#d4c4a8"/><stop offset="100%" stop-color="#b8a080"/></linearGradient></defs>
          <ellipse cx="100" cy="160" rx="70" ry="55" fill="url(#mu-ec-p3)"/>
          <rect x="85" y="60" width="30" height="105" rx="15" fill="#9a8060"/>
          <circle cx="100" cy="55" r="18" fill="none" stroke="#8a7050" stroke-width="2"/>
          <ellipse cx="100" cy="160" rx="45" ry="35" fill="rgba(0,0,0,0.06)"/>
          <line x1="30" y1="160" x2="170" y2="160" stroke="rgba(0,0,0,0.1)" stroke-width="1"/>
        </svg>
        <div class="product-quick">Add to Bag</div>
      </div>
      <div class="product-info">
        <div class="product-name">Serene Hobo</div>
        <div class="product-sub">Woven raffia &amp; leather · Sand</div>
        <div class="product-footer">
          <div class="product-price">€ 3,100 <span class="price-strike">€ 3,650</span></div>
          <div class="product-colors">
            <div class="color-dot color-sand"></div>
            <div class="color-dot color-bronze"></div>
          </div>
        </div>
      </div>
    </article>
  </div>

  <div class="editorial">
    <div class="editorial-img">
      <div class="editorial-bg" aria-hidden="true">Craft</div>
      <div class="editorial-eyebrow">The Atelier</div>
      <h3 class="editorial-headline">Where <em>Time</em><br>Stands Still</h3>
      <p class="editorial-body">Every stitch is placed by hands that have spent decades learning the language of leather. This is not production. This is devotion.</p>
    </div>
    <div class="editorial-content">
      <div class="editorial-feature">
        <div class="feature-num">01 —</div>
        <div class="feature-title">Florentine Mastery</div>
        <div class="feature-text">Our artisans train for a minimum of seven years before crafting a single Maison Elara piece. The result is an object that outlives trends.</div>
      </div>
      <div class="editorial-feature">
        <div class="feature-num">02 —</div>
        <div class="feature-title">Materials Without Compromise</div>
        <div class="feature-text">We source exclusively from tanneries that have operated for over a century, selecting only the top 3% of each hide for its texture and patina.</div>
      </div>
      <div class="editorial-feature">
        <div class="feature-num">03 —</div>
        <div class="feature-title">A Promise of Permanence</div>
        <div class="feature-text">Every piece comes with our lifetime restoration service — ensuring your Maison Elara companion ages into something even more extraordinary.</div>
      </div>
    </div>
  </div>

  <div class="footer-strip">
    <div class="footer-brand">Maison Elara</div>
    <div class="footer-note">© 2025 · Est. Florence, 1987</div>
    <div class="footer-links">
      <span class="footer-link">Sustainability</span>
      <span class="footer-link">Clienteling</span>
      <span class="footer-link">Stores</span>
      <span class="footer-link">Press</span>
    </div>
  </div>
</section>
```

**CSS:**
```css
/* ─── 02 Maison Elara — minimalist luxury e-commerce UI ────────── */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&family=Jost:wght@300;400;500&display=swap');

.mu-ec {
  --mu-ec-cream: #f5f0e8;
  --mu-ec-cream-dark: #ede6d8;
  --mu-ec-ink: #1a1714;
  --mu-ec-ink-mid: #6b6560;
  --mu-ec-ink-light: #b8b2aa;
  --mu-ec-gold: #c9a84c;
  --mu-ec-gold-light: #e8d5a0;
  --mu-ec-white: #fefcf8;
  --mu-ec-serif: 'Cormorant Garamond', serif;
  --mu-ec-sans: 'Jost', sans-serif;

  position: relative;
  width: 100%;
  min-height: 1400px;
  background: var(--mu-ec-cream);
  color: var(--mu-ec-ink);
  font-family: var(--mu-ec-sans);
  overflow-x: hidden;
  box-sizing: border-box;
}
.mu-ec *, .mu-ec *::before, .mu-ec *::after { box-sizing: border-box; margin: 0; padding: 0; }

.mu-ec nav { position: sticky; top: 0; z-index: 10; background: var(--mu-ec-cream); border-bottom: 1px solid var(--mu-ec-cream-dark); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 48px; height: 64px; }
.mu-ec .nav-links { display: flex; gap: 36px; align-items: center; }
.mu-ec .nav-link { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mu-ec-ink-mid); text-decoration: none; font-weight: 400; transition: color 0.2s; cursor: pointer; }
.mu-ec .nav-link:hover, .mu-ec .nav-link.active { color: var(--mu-ec-ink); }
.mu-ec .brand { font-family: var(--mu-ec-serif); font-size: 22px; font-weight: 300; letter-spacing: 0.1em; text-align: center; font-style: italic; }
.mu-ec .nav-actions { display: flex; gap: 28px; align-items: center; justify-content: flex-end; }
.mu-ec .nav-icon { font-size: 13px; letter-spacing: 0.1em; color: var(--mu-ec-ink-mid); cursor: pointer; transition: color 0.2s; position: relative; }
.mu-ec .nav-icon:hover { color: var(--mu-ec-ink); }
.mu-ec .nav-icon-cart { position: relative; }
.mu-ec .cart-count { position: absolute; top: -6px; right: -8px; width: 14px; height: 14px; background: var(--mu-ec-ink); color: var(--mu-ec-cream); border-radius: 50%; font-size: 8px; display: flex; align-items: center; justify-content: center; font-family: var(--mu-ec-sans); }

.mu-ec .hero { display: grid; grid-template-columns: 1fr 1fr; min-height: 640px; }
.mu-ec .hero-left { background: var(--mu-ec-ink); display: flex; flex-direction: column; justify-content: flex-end; padding: 64px; position: relative; overflow: hidden; }
.mu-ec .hero-bg-text { position: absolute; top: -20px; left: -10px; font-family: var(--mu-ec-serif); font-size: 260px; font-weight: 300; color: rgba(255,255,255,0.03); line-height: 1; user-select: none; letter-spacing: -0.04em; }
.mu-ec .hero-season { font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--mu-ec-gold); margin-bottom: 24px; animation: mu-ec-fadeup 0.8s ease 0.1s both; }
.mu-ec .hero-title { font-family: var(--mu-ec-serif); font-size: 72px; font-weight: 300; color: var(--mu-ec-white); line-height: 1.05; letter-spacing: -0.02em; margin-bottom: 20px; animation: mu-ec-fadeup 0.8s ease 0.2s both; }
.mu-ec .hero-title em { font-style: italic; color: var(--mu-ec-gold-light); }
.mu-ec .hero-desc { font-size: 13px; color: var(--mu-ec-ink-light); line-height: 1.8; max-width: 340px; margin-bottom: 40px; font-weight: 300; animation: mu-ec-fadeup 0.8s ease 0.35s both; }
.mu-ec .hero-cta-group { display: flex; gap: 16px; align-items: center; animation: mu-ec-fadeup 0.8s ease 0.5s both; }
.mu-ec .btn-primary { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; background: var(--mu-ec-gold); color: var(--mu-ec-ink); padding: 14px 32px; border: none; cursor: pointer; font-family: var(--mu-ec-sans); font-weight: 500; transition: all 0.3s; }
.mu-ec .btn-primary:hover { background: var(--mu-ec-gold-light); }
.mu-ec .btn-ghost { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; background: transparent; color: var(--mu-ec-white); padding: 14px 32px; border: 1px solid rgba(255,255,255,0.2); cursor: pointer; font-family: var(--mu-ec-sans); font-weight: 400; transition: all 0.3s; }
.mu-ec .btn-ghost:hover { border-color: rgba(255,255,255,0.5); }
.mu-ec .hero-scroll { display: flex; align-items: center; gap: 12px; margin-top: 56px; }
.mu-ec .scroll-line { width: 40px; height: 1px; background: rgba(255,255,255,0.2); }
.mu-ec .scroll-txt { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.3); }
@keyframes mu-ec-fadeup { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

.mu-ec .hero-right { background: var(--mu-ec-cream-dark); position: relative; overflow: hidden; }
.mu-ec .hero-img-area { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg,#e8e0d0 0%,#d5c9b5 100%); position: relative; min-height: 480px; }
.mu-ec .hero-product-svg { filter: drop-shadow(40px 40px 60px rgba(0,0,0,0.2)); }
.mu-ec .hero-badge { position: absolute; top: 48px; right: 48px; width: 80px; height: 80px; border-radius: 50%; background: var(--mu-ec-ink); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; }
.mu-ec .badge-line1 { font-family: var(--mu-ec-serif); font-size: 10px; color: var(--mu-ec-gold); font-style: italic; }
.mu-ec .badge-line2 { font-size: 8px; letter-spacing: 0.1em; color: rgba(255,255,255,0.5); text-transform: uppercase; }
.mu-ec .hero-price-tag { position: absolute; bottom: 48px; left: 48px; background: var(--mu-ec-white); padding: 14px 20px; }
.mu-ec .price-label { font-size: 9px; letter-spacing: 0.2em; color: var(--mu-ec-ink-light); text-transform: uppercase; margin-bottom: 4px; }
.mu-ec .price-value { font-family: var(--mu-ec-serif); font-size: 28px; font-weight: 300; color: var(--mu-ec-ink); }

.mu-ec .marquee-bar { background: var(--mu-ec-ink); color: var(--mu-ec-cream); padding: 12px 0; overflow: hidden; border-top: 1px solid #2a2420; border-bottom: 1px solid #2a2420; }
.mu-ec .marquee-track { display: flex; gap: 0; animation: mu-ec-marquee 25s linear infinite; width: max-content; }
.mu-ec .marquee-item { font-size: 10px; letter-spacing: 0.25em; text-transform: uppercase; padding: 0 48px; color: var(--mu-ec-ink-light); display: flex; align-items: center; gap: 48px; }
.mu-ec .marquee-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--mu-ec-gold); flex-shrink: 0; }
@keyframes mu-ec-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.mu-ec .section-header { display: flex; align-items: flex-end; justify-content: space-between; padding: 64px 64px 40px; }
.mu-ec .section-eyebrow { font-size: 10px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--mu-ec-gold); margin-bottom: 10px; }
.mu-ec .section-title { font-family: var(--mu-ec-serif); font-size: 42px; font-weight: 300; line-height: 1.1; }
.mu-ec .section-title em { font-style: italic; }
.mu-ec .section-link { font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--mu-ec-ink-mid); text-decoration: none; border-bottom: 1px solid var(--mu-ec-ink-light); padding-bottom: 2px; cursor: pointer; transition: all 0.2s; }
.mu-ec .section-link:hover { color: var(--mu-ec-ink); border-color: var(--mu-ec-ink); }

.mu-ec .products-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 2px; padding: 0 64px 64px; }
.mu-ec .product-card { background: var(--mu-ec-white); cursor: pointer; position: relative; overflow: hidden; }
.mu-ec .product-card:hover .product-img-wrap::after { opacity: 1; }
.mu-ec .product-card:hover .product-quick { opacity: 1; transform: translateY(0); }
.mu-ec .product-img-wrap { aspect-ratio: 3/4; background: linear-gradient(145deg,#ede6d8,#d8cdb8); position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.mu-ec .product-img-wrap.product-img-noir { background: linear-gradient(145deg,#1e1c19,#2a2620); }
.mu-ec .product-img-wrap.product-img-sand { background: linear-gradient(145deg,#f0e8dc,#e0d4c0); }
.mu-ec .product-img-wrap::after { content: ''; position: absolute; inset: 0; background: rgba(26,23,20,0.1); opacity: 0; transition: opacity 0.3s; }
.mu-ec .product-quick { position: absolute; bottom: 0; left: 0; right: 0; background: var(--mu-ec-ink); color: var(--mu-ec-cream); padding: 14px; text-align: center; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0; transform: translateY(100%); transition: all 0.3s cubic-bezier(0.23,1,0.32,1); z-index: 2; cursor: pointer; }
.mu-ec .product-info { padding: 20px 22px 22px; }
.mu-ec .product-name { font-family: var(--mu-ec-serif); font-size: 18px; font-weight: 300; margin-bottom: 4px; }
.mu-ec .product-sub { font-size: 11px; color: var(--mu-ec-ink-light); letter-spacing: 0.05em; margin-bottom: 12px; }
.mu-ec .product-footer { display: flex; align-items: center; justify-content: space-between; }
.mu-ec .product-price { font-family: var(--mu-ec-serif); font-size: 22px; font-weight: 300; }
.mu-ec .price-strike { font-size: 14px; color: var(--mu-ec-ink-light); text-decoration: line-through; }
.mu-ec .product-colors { display: flex; gap: 6px; }
.mu-ec .color-dot { width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.1); cursor: pointer; }
.mu-ec .color-almond { background: #c4b090; } .mu-ec .color-noir { background: #1a1714; }
.mu-ec .color-bordeaux { background: #8b2020; } .mu-ec .color-cognac { background: #4a3020; }
.mu-ec .color-sand { background: #d4c4a8; } .mu-ec .color-bronze { background: #8a7050; }
.mu-ec .product-tag { position: absolute; top: 16px; left: 16px; font-size: 9px; letter-spacing: 0.15em; text-transform: uppercase; padding: 4px 10px; z-index: 3; }
.mu-ec .product-tag.new { background: var(--mu-ec-ink); color: var(--mu-ec-cream); }
.mu-ec .product-tag.sale { background: var(--mu-ec-gold); color: var(--mu-ec-ink); }

.mu-ec .editorial { display: grid; grid-template-columns: 1fr 1fr; margin: 0 64px 64px; border: 1px solid var(--mu-ec-cream-dark); }
.mu-ec .editorial-img { background: linear-gradient(145deg,var(--mu-ec-ink) 0%,#3a3028 100%); position: relative; overflow: hidden; padding: 64px; display: flex; flex-direction: column; justify-content: flex-end; }
.mu-ec .editorial-bg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0.06; font-family: var(--mu-ec-serif); font-size: 180px; font-weight: 300; color: var(--mu-ec-cream); display: flex; align-items: center; justify-content: center; letter-spacing: -0.05em; }
.mu-ec .editorial-eyebrow { font-size: 9px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--mu-ec-gold); margin-bottom: 16px; }
.mu-ec .editorial-headline { font-family: var(--mu-ec-serif); font-size: 40px; font-weight: 300; color: var(--mu-ec-white); line-height: 1.15; margin-bottom: 16px; }
.mu-ec .editorial-headline em { font-style: italic; color: var(--mu-ec-gold-light); }
.mu-ec .editorial-body { font-size: 13px; color: rgba(255,255,255,0.5); line-height: 1.8; max-width: 320px; font-weight: 300; }
.mu-ec .editorial-content { padding: 64px; display: flex; flex-direction: column; justify-content: center; gap: 36px; }
.mu-ec .editorial-feature { padding-bottom: 28px; border-bottom: 1px solid var(--mu-ec-cream-dark); }
.mu-ec .editorial-feature:last-child { border-bottom: none; padding-bottom: 0; }
.mu-ec .feature-num { font-family: var(--mu-ec-serif); font-size: 13px; color: var(--mu-ec-gold); margin-bottom: 8px; }
.mu-ec .feature-title { font-family: var(--mu-ec-serif); font-size: 22px; font-weight: 300; margin-bottom: 8px; }
.mu-ec .feature-text { font-size: 12px; color: var(--mu-ec-ink-mid); line-height: 1.8; font-weight: 300; }

.mu-ec .footer-strip { background: var(--mu-ec-ink); padding: 36px 64px; display: flex; align-items: center; justify-content: space-between; }
.mu-ec .footer-brand { font-family: var(--mu-ec-serif); font-size: 24px; font-weight: 300; color: var(--mu-ec-cream); font-style: italic; }
.mu-ec .footer-note { font-size: 10px; letter-spacing: 0.15em; color: var(--mu-ec-ink-light); text-transform: uppercase; }
.mu-ec .footer-links { display: flex; gap: 32px; }
.mu-ec .footer-link { font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--mu-ec-ink-light); cursor: pointer; transition: color 0.2s; }
.mu-ec .footer-link:hover { color: var(--mu-ec-cream); }

@media (max-width: 900px) {
  .mu-ec nav { padding: 0 24px; grid-template-columns: 1fr; height: auto; padding-bottom: 12px; padding-top: 12px; }
  .mu-ec .nav-links, .mu-ec .nav-actions { display: none; }
  .mu-ec .hero { grid-template-columns: 1fr; }
  .mu-ec .hero-left { padding: 40px 32px; }
  .mu-ec .hero-title { font-size: 48px; }
  .mu-ec .products-grid { grid-template-columns: 1fr; padding: 0 24px 40px; }
  .mu-ec .editorial { grid-template-columns: 1fr; margin: 0 24px 40px; }
  .mu-ec .editorial-img, .mu-ec .editorial-content { padding: 40px 32px; }
  .mu-ec .section-header { padding: 40px 24px 24px; flex-direction: column; gap: 16px; align-items: flex-start; }
  .mu-ec .footer-strip { padding: 24px; flex-direction: column; gap: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .mu-ec .marquee-track, .mu-ec .hero-season, .mu-ec .hero-title, .mu-ec .hero-desc, .mu-ec .hero-cta-group { animation: none !important; }
}
```

### 03. Vera Lindstrom Portfolio

**Type:** CSS + JS
**Description:** A brutalist-white minimalist portfolio UI for a Stockholm-based art director — a gallery-wall approach where the interface disappears so the creative work takes center stage. Sticky header with serif name + uppercase nav + green-dotted availability status, a giant typographic index letter "V" sitting half-revealed behind a Playfair Display hero headline (Visual / *Architect* / & Director), a numbered "Selected Work" project list where each row slides a cream fill in from the left on hover with a 45-degree rotating arrow and per-project SVG color preview card that follows the cursor, a two-column "About / Disciplines" strip with a numbered service index, and a giant italic contact email that animates letter-spacing on hover. Typography pairs Playfair Display (display) with IBM Plex Sans (UI). Best for designer portfolios, photographer sites, architect studios, art director landing pages, creative agency homepages.

**HTML:**
```html
<section class="mu-pf" aria-label="Vera Lindstrom creative portfolio demo">
  <div class="preview-img" data-mu-pf-preview aria-hidden="true">
    <svg data-mu-pf-preview-svg width="320" height="220" viewBox="0 0 320 220"></svg>
  </div>

  <header class="header">
    <div class="h-name">Vera Lindström</div>
    <nav class="h-nav">
      <a href="#">Work</a>
      <a href="#">About</a>
      <a href="#">Journal</a>
      <a href="#">Contact</a>
    </nav>
    <div class="h-status">
      <div class="status-dot" aria-hidden="true"></div>
      Available for projects
    </div>
  </header>

  <section class="hero">
    <div class="hero-index" aria-hidden="true">V</div>
    <div class="hero-text">
      <h1 class="hero-title">
        Visual<br><em>Architect</em><br>&amp; Director
      </h1>
      <div class="hero-meta">
        <div class="hero-role">Art Direction · Branding · UI</div>
        <p class="hero-desc">Building brand identities and digital experiences that earn their silence. Stockholm-based, globally engaged.</p>
      </div>
    </div>
    <div class="hero-scroll-indicator" aria-hidden="true">
      <div class="scroll-v-line"></div>
      <div class="scroll-v-txt">Scroll</div>
    </div>
  </section>

  <section class="work-section">
    <div class="section-rule">
      <span class="rule-num">01</span>
      <div class="rule-line"></div>
      <span class="rule-label">Selected Work</span>
    </div>
    <div class="project-list">
      <div class="project-item" data-color="#1a1714" data-color2="#3a3028" data-accent="#c8ff00">
        <div class="project-num">001</div>
        <div class="project-info">
          <div class="project-title">Maison Collective</div>
          <div class="project-tags">
            <span class="tag">Brand Identity</span>
            <span class="tag">·</span>
            <span class="tag">Art Direction</span>
          </div>
        </div>
        <div class="project-right">
          <span class="project-year">2025</span>
          <div class="project-arrow">→</div>
        </div>
      </div>
      <div class="project-item" data-color="#d4c4a8" data-color2="#b8a080" data-accent="#8a6040">
        <div class="project-num">002</div>
        <div class="project-info">
          <div class="project-title">Aether Digital</div>
          <div class="project-tags">
            <span class="tag">Product UI</span>
            <span class="tag">·</span>
            <span class="tag">Design System</span>
          </div>
        </div>
        <div class="project-right">
          <span class="project-year">2025</span>
          <div class="project-arrow">→</div>
        </div>
      </div>
      <div class="project-item" data-color="#2c4a3e" data-color2="#1a3028" data-accent="#a8d4b8">
        <div class="project-num">003</div>
        <div class="project-info">
          <div class="project-title"><em>Forma</em> Architecture</div>
          <div class="project-tags">
            <span class="tag">Photography</span>
            <span class="tag">·</span>
            <span class="tag">Editorial</span>
          </div>
        </div>
        <div class="project-right">
          <span class="project-year">2024</span>
          <div class="project-arrow">→</div>
        </div>
      </div>
      <div class="project-item" data-color="#8b6a3a" data-color2="#6a4a20" data-accent="#f0c880">
        <div class="project-num">004</div>
        <div class="project-info">
          <div class="project-title">Norde Finance</div>
          <div class="project-tags">
            <span class="tag">Motion</span>
            <span class="tag">·</span>
            <span class="tag">Campaign</span>
          </div>
        </div>
        <div class="project-right">
          <span class="project-year">2024</span>
          <div class="project-arrow">→</div>
        </div>
      </div>
      <div class="project-item" data-color="#4a3858" data-color2="#2a1838" data-accent="#d4a8f0">
        <div class="project-num">005</div>
        <div class="project-info">
          <div class="project-title">Lune Editorial</div>
          <div class="project-tags">
            <span class="tag">Publication</span>
            <span class="tag">·</span>
            <span class="tag">Typography</span>
          </div>
        </div>
        <div class="project-right">
          <span class="project-year">2024</span>
          <div class="project-arrow">→</div>
        </div>
      </div>
    </div>
  </section>

  <div class="about-strip">
    <div class="about-left">
      <div class="about-eyebrow">About the Practice</div>
      <h2 class="about-title">Design that<br>trusts the <em>void</em></h2>
      <p class="about-body">With fifteen years across Stockholm, London, and Tokyo, I've learned that the most memorable work is often the most restrained. I collaborate with founders, cultural institutions, and agencies to craft visual systems that hold their integrity across every surface.</p>
    </div>
    <div class="about-right">
      <div class="about-eyebrow">Disciplines</div>
      <div class="services-list">
        <div class="service-item"><span class="svc-num">—</span><span class="svc-name">Brand Identity &amp; Systems</span><span class="svc-type">Strategy · Visual</span></div>
        <div class="service-item"><span class="svc-num">—</span><span class="svc-name">Digital Product Design</span><span class="svc-type">UI · UX · Prototyping</span></div>
        <div class="service-item"><span class="svc-num">—</span><span class="svc-name">Art Direction</span><span class="svc-type">Photo · Film · Print</span></div>
        <div class="service-item"><span class="svc-num">—</span><span class="svc-name">Editorial Design</span><span class="svc-type">Books · Magazines</span></div>
        <div class="service-item"><span class="svc-num">—</span><span class="svc-name">Motion &amp; Campaign</span><span class="svc-type">Digital · Out-of-home</span></div>
      </div>
    </div>
  </div>

  <div class="contact-section">
    <div class="contact-label">Start a conversation</div>
    <a class="contact-email" href="#">vera@lindstrom.studio</a>
    <div class="contact-links">
      <a class="contact-link" href="#">Instagram</a>
      <a class="contact-link" href="#">LinkedIn</a>
      <a class="contact-link" href="#">Are.na</a>
      <a class="contact-link" href="#">Readcv</a>
    </div>
  </div>

  <footer class="footer">
    <span>© 2025 Vera Lindström Studio</span>
    <span>Stockholm · SE</span>
    <span>Currently: Available Q3 2025</span>
  </footer>
</section>
```

**CSS:**
```css
/* ─── 03 Vera Lindström — minimalist creative portfolio UI ─────── */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400;1,700&family=IBM+Plex+Sans:wght@300;400&display=swap');

.mu-pf {
  --mu-pf-white: #fafafa;
  --mu-pf-off: #f2f0ec;
  --mu-pf-ink: #0f0f0f;
  --mu-pf-mid: #888;
  --mu-pf-light: #ccc;
  --mu-pf-rule: #e8e4de;
  --mu-pf-serif: 'Playfair Display', serif;
  --mu-pf-sans: 'IBM Plex Sans', sans-serif;

  position: relative;
  width: 100%;
  min-height: 1400px;
  background: var(--mu-pf-white);
  color: var(--mu-pf-ink);
  font-family: var(--mu-pf-sans);
  overflow-x: hidden;
  box-sizing: border-box;
}
.mu-pf *, .mu-pf *::before, .mu-pf *::after { box-sizing: border-box; margin: 0; padding: 0; }

.mu-pf .header { position: sticky; top: 0; z-index: 10; background: var(--mu-pf-white); display: flex; align-items: center; justify-content: space-between; padding: 28px 56px; }
.mu-pf .h-name { font-family: var(--mu-pf-serif); font-size: 18px; font-weight: 400; letter-spacing: 0.02em; }
.mu-pf .h-nav { display: flex; gap: 36px; }
.mu-pf .h-nav a { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mu-pf-mid); text-decoration: none; transition: color 0.2s; }
.mu-pf .h-nav a:hover { color: var(--mu-pf-ink); }
.mu-pf .h-status { font-size: 11px; letter-spacing: 0.12em; color: var(--mu-pf-mid); display: flex; align-items: center; gap: 8px; }
.mu-pf .status-dot { width: 6px; height: 6px; border-radius: 50%; background: #4caf50; animation: mu-pf-blink 2s infinite; }
@keyframes mu-pf-blink { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }

.mu-pf .hero { min-height: 540px; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 56px 64px; position: relative; }
.mu-pf .hero-index { position: absolute; top: 50%; left: 56px; transform: translateY(-50%); font-family: var(--mu-pf-serif); font-size: clamp(160px,18vw,260px); font-weight: 900; color: var(--mu-pf-off); line-height: 1; letter-spacing: -0.05em; user-select: none; pointer-events: none; }
.mu-pf .hero-text { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr auto; align-items: flex-end; gap: 64px; padding-top: 180px; }
.mu-pf .hero-title { font-family: var(--mu-pf-serif); font-size: clamp(52px,7vw,96px); font-weight: 400; line-height: 1.05; letter-spacing: -0.02em; animation: mu-pf-fadein 1s ease 0.2s both; }
.mu-pf .hero-title em { font-style: italic; font-weight: 400; }
.mu-pf .hero-meta { text-align: right; max-width: 260px; animation: mu-pf-fadein 1s ease 0.4s both; }
.mu-pf .hero-role { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--mu-pf-mid); margin-bottom: 14px; }
.mu-pf .hero-desc { font-size: 13px; line-height: 1.8; color: var(--mu-pf-mid); font-weight: 300; }
.mu-pf .hero-scroll-indicator { display: flex; flex-direction: column; align-items: center; gap: 8px; position: absolute; right: 56px; bottom: 64px; }
.mu-pf .scroll-v-line { width: 1px; height: 60px; background: var(--mu-pf-light); animation: mu-pf-scrollline 2s ease infinite; }
@keyframes mu-pf-scrollline { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform: scaleY(1); transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
.mu-pf .scroll-v-txt { font-size: 9px; letter-spacing: 0.2em; color: var(--mu-pf-light); text-transform: uppercase; writing-mode: vertical-rl; transform: rotate(180deg); }
@keyframes mu-pf-fadein { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }

.mu-pf .work-section { padding: 0 56px 120px; }
.mu-pf .section-rule { display: flex; align-items: center; gap: 24px; padding: 64px 0 48px; }
.mu-pf .rule-num { font-family: var(--mu-pf-serif); font-size: 11px; color: var(--mu-pf-mid); font-style: italic; }
.mu-pf .rule-line { flex: 1; height: 1px; background: var(--mu-pf-light); }
.mu-pf .rule-label { font-size: 10px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--mu-pf-mid); }

.mu-pf .project-list { display: flex; flex-direction: column; gap: 0; }
.mu-pf .project-item { display: grid; grid-template-columns: 80px 1fr auto; align-items: center; gap: 32px; padding: 28px 0; border-bottom: 1px solid var(--mu-pf-rule); cursor: pointer; position: relative; overflow: hidden; transition: padding 0.3s ease; }
.mu-pf .project-item:first-child { border-top: 1px solid var(--mu-pf-rule); }
.mu-pf .project-item::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--mu-pf-off); z-index: 0; transition: width 0.4s cubic-bezier(0.23,1,0.32,1); }
.mu-pf .project-item:hover::before { width: 100%; }
.mu-pf .project-item:hover { padding-left: 24px; }
.mu-pf .project-item:hover .project-title { letter-spacing: 0.01em; }
.mu-pf .project-num { font-family: var(--mu-pf-serif); font-size: 13px; color: var(--mu-pf-light); font-style: italic; position: relative; z-index: 1; }
.mu-pf .project-info { position: relative; z-index: 1; }
.mu-pf .project-title { font-family: var(--mu-pf-serif); font-size: clamp(24px,3.5vw,42px); font-weight: 400; line-height: 1.1; transition: letter-spacing 0.3s; }
.mu-pf .project-tags { display: flex; gap: 12px; margin-top: 6px; }
.mu-pf .tag { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mu-pf-mid); }
.mu-pf .project-right { display: flex; align-items: center; gap: 32px; position: relative; z-index: 1; }
.mu-pf .project-year { font-size: 12px; color: var(--mu-pf-mid); font-family: var(--mu-pf-sans); }
.mu-pf .project-arrow { width: 44px; height: 44px; border: 1px solid var(--mu-pf-light); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; color: var(--mu-pf-mid); transition: all 0.3s; }
.mu-pf .project-item:hover .project-arrow { background: var(--mu-pf-ink); border-color: var(--mu-pf-ink); color: var(--mu-pf-white); transform: rotate(45deg); }

/* Hover SVG preview — positioned absolute inside the wrapper, follows
   the mouse via offsetX/offsetY computed against the wrapper. */
.mu-pf .preview-img { position: absolute; pointer-events: none; z-index: 50; width: 320px; height: 220px; opacity: 0; transform: translateY(10px) rotate(-2deg); transition: opacity 0.3s, transform 0.3s; border-radius: 2px; overflow: hidden; top: 0; left: 0; }
.mu-pf .preview-img.visible { opacity: 1; transform: translateY(0) rotate(-1deg); }

.mu-pf .about-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 0 56px; border-top: 1px solid var(--mu-pf-rule); padding: 80px 0; }
.mu-pf .about-left { padding-right: 80px; border-right: 1px solid var(--mu-pf-rule); }
.mu-pf .about-right { padding-left: 80px; }
.mu-pf .about-eyebrow { font-size: 10px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--mu-pf-mid); margin-bottom: 20px; }
.mu-pf .about-title { font-family: var(--mu-pf-serif); font-size: clamp(32px,4vw,52px); font-weight: 400; line-height: 1.15; margin-bottom: 24px; }
.mu-pf .about-title em { font-style: italic; }
.mu-pf .about-body { font-size: 13.5px; line-height: 1.9; color: var(--mu-pf-mid); font-weight: 300; max-width: 400px; }
.mu-pf .services-list { display: flex; flex-direction: column; gap: 16px; }
.mu-pf .service-item { display: flex; align-items: baseline; gap: 16px; padding-bottom: 16px; border-bottom: 1px solid #ece8e2; }
.mu-pf .service-item:last-child { border-bottom: none; padding-bottom: 0; }
.mu-pf .svc-num { font-family: var(--mu-pf-serif); font-size: 11px; color: var(--mu-pf-light); font-style: italic; min-width: 24px; }
.mu-pf .svc-name { font-size: 14px; font-weight: 400; }
.mu-pf .svc-type { margin-left: auto; font-size: 10px; letter-spacing: 0.1em; color: var(--mu-pf-mid); }

.mu-pf .contact-section { padding: 80px 56px; text-align: center; border-top: 1px solid var(--mu-pf-rule); }
.mu-pf .contact-label { font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--mu-pf-mid); margin-bottom: 24px; }
.mu-pf .contact-email { font-family: var(--mu-pf-serif); font-size: clamp(36px,6vw,80px); font-weight: 400; font-style: italic; text-decoration: none; color: var(--mu-pf-ink); display: inline-block; transition: letter-spacing 0.4s; }
.mu-pf .contact-email:hover { letter-spacing: 0.02em; }
.mu-pf .contact-links { display: flex; justify-content: center; gap: 40px; margin-top: 40px; }
.mu-pf .contact-link { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mu-pf-mid); text-decoration: none; transition: color 0.2s; }
.mu-pf .contact-link:hover { color: var(--mu-pf-ink); }

.mu-pf .footer { display: flex; justify-content: space-between; align-items: center; padding: 28px 56px; border-top: 1px solid var(--mu-pf-rule); }
.mu-pf .footer span { font-size: 11px; color: var(--mu-pf-mid); }

@media (max-width: 760px) {
  .mu-pf .header, .mu-pf .hero, .mu-pf .work-section, .mu-pf .contact-section, .mu-pf .footer { padding-left: 24px; padding-right: 24px; }
  .mu-pf .h-nav { display: none; }
  .mu-pf .hero-text { grid-template-columns: 1fr; gap: 32px; }
  .mu-pf .hero-meta { text-align: left; }
  .mu-pf .hero-scroll-indicator { display: none; }
  .mu-pf .about-strip { grid-template-columns: 1fr; margin: 0 24px; }
  .mu-pf .about-left { padding-right: 0; border-right: none; border-bottom: 1px solid var(--mu-pf-rule); padding-bottom: 48px; margin-bottom: 48px; }
  .mu-pf .about-right { padding-left: 0; }
  .mu-pf .footer { flex-direction: column; gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .mu-pf .status-dot, .mu-pf .scroll-v-line, .mu-pf .hero-title, .mu-pf .hero-meta { animation: none !important; }
  .mu-pf .project-item, .mu-pf .project-arrow, .mu-pf .preview-img { transition: none !important; }
}
```

**JS:**
```js
(() => {
  // Scoped portfolio interactions. Drops the source mock's full-viewport
  // mix-blend-mode cursor (which would look broken inside an embedded
  // card) and keeps the hover-triggered SVG project preview that's the
  // actual differentiator. The preview is positioned via offsetX/offsetY
  // against the wrapper element so two demos can coexist on a page.
  const root = document.querySelector('.mu-pf');
  if (!root) return;
  const preview = root.querySelector('[data-mu-pf-preview]');
  const previewSvg = root.querySelector('[data-mu-pf-preview-svg]');
  if (!preview || !previewSvg) return;

  // Mouse position relative to the wrapper (not viewport), so the preview
  // floats correctly regardless of scroll position.
  root.addEventListener('mousemove', (e) => {
    const r = root.getBoundingClientRect();
    const x = e.clientX - r.left;
    const y = e.clientY - r.top;
    preview.style.left = (x + 24) + 'px';
    preview.style.top = (y - 100) + 'px';
  });

  const items = root.querySelectorAll('.project-item');
  items.forEach((item, i) => {
    item.addEventListener('mouseenter', () => {
      preview.classList.add('visible');
      const c1 = item.dataset.color || '#1a1714';
      const c2 = item.dataset.color2 || '#3a3028';
      const c3 = item.dataset.accent || '#c8ff00';
      previewSvg.innerHTML =
        '<defs>' +
          '<linearGradient id="mu-pf-pg' + i + '" x1="0%" y1="0%" x2="100%" y2="100%">' +
            '<stop offset="0%" style="stop-color:' + c1 + '"/>' +
            '<stop offset="100%" style="stop-color:' + c2 + '"/>' +
          '</linearGradient>' +
        '</defs>' +
        '<rect width="320" height="220" fill="url(#mu-pf-pg' + i + ')"/>' +
        '<line x1="0" y1="40" x2="320" y2="40" stroke="' + c3 + '" stroke-width="0.5" opacity="0.3"/>' +
        '<line x1="0" y1="180" x2="320" y2="180" stroke="' + c3 + '" stroke-width="0.5" opacity="0.3"/>' +
        '<text x="160" y="125" text-anchor="middle" font-family="\'Playfair Display\',serif" font-size="14" fill="' + c3 + '" opacity="0.5" letter-spacing="8">' + String(i + 1).padStart(3, '0') + '</text>' +
        '<circle cx="280" cy="40" r="20" fill="none" stroke="' + c3 + '" stroke-width="0.5" opacity="0.3"/>';
    });
    item.addEventListener('mouseleave', () => {
      preview.classList.remove('visible');
    });
  });
})();
```

### 04. Ledger News

**Type:** CSS + JS
**Description:** A minimalist editorial UI built like a broadsheet newspaper — proving that text-heavy content websites work best when typography hierarchy and reading rhythm carry the design. Dark dateline top bar with international editions, a centered serif masthead with tagline + section navigation (World / Economy / Technology / Science / Culture / Opinion / Data / Archive), a true 3-column editorial grid with column-rule dividers, drop-cap lead paragraph + breaking news callout box, a 4-up "In Depth" card grid with category eyebrows and aspect-ratio image placeholders, an Opinion + By the Numbers split with a giant italic pull-quote and a five-row data bar chart, an inverted dark Newsletter bar, and a scoped reading-progress indicator at the wrapper top that animates as you scroll the wrapper. Typography pairs Libre Baskerville (serif) with Source Sans 3 (UI). Best for news websites, blog sites, online magazines, content-heavy editorial layouts, Substack-style publications, wiki-style reading apps.

**HTML:**
```html
<section class="mu-ed" aria-label="Ledger editorial news demo">
  <div class="reading-progress" data-mu-ed-progress aria-hidden="true"></div>

  <div class="top-bar">
    <div class="top-bar-date">Thursday, May 28, 2026 · Vol. CXLII · No. 118</div>
    <div class="top-bar-editions">
      <span class="top-bar-edition active">International</span>
      <span class="top-bar-edition">Americas</span>
      <span class="top-bar-edition">Europe</span>
      <span class="top-bar-edition">Asia-Pacific</span>
    </div>
  </div>

  <div class="masthead">
    <div class="masthead-tagline">Independent. Rigorous. Since 1882.</div>
    <div class="masthead-name">Ledger</div>
    <div class="masthead-sub">The Journal of Record for Ideas That Matter</div>
    <nav class="masthead-nav">
      <div class="mnav-item active">World</div>
      <div class="mnav-item">Economy</div>
      <div class="mnav-item">Technology</div>
      <div class="mnav-item">Science</div>
      <div class="mnav-item">Culture</div>
      <div class="mnav-item">Opinion</div>
      <div class="mnav-item">Data</div>
      <div class="mnav-item">Archive</div>
    </nav>
  </div>

  <div class="page-wrap">
    <div class="feature-grid">
      <div class="feat-col">
        <div class="side-story">
          <div class="side-cat">Economy</div>
          <div class="side-title">Central Banks Signal Coordinated Rate Pause Through Q3</div>
          <div class="side-deck">Officials from six major economies signalled willingness to hold current rates as inflation data converges toward target bands for the first time since 2021.</div>
          <div class="side-by">By A. Chen · 4 min read</div>
        </div>
        <div class="side-story">
          <div class="side-cat">Technology</div>
          <div class="side-title">Open Source AI Models Outperform Proprietary Rivals on Key Benchmarks</div>
          <div class="side-deck">A new evaluation framework from the Allen Institute reveals that openly licensed models have closed the performance gap in reasoning tasks by nearly 23 points.</div>
          <div class="side-by">By R. Okonkwo · 6 min read</div>
        </div>
        <div class="side-story">
          <div class="side-cat">Science</div>
          <div class="side-title">Ancient Ocean Current Reversal Reframes Paleoclimate Models</div>
          <div class="side-deck">Sediment cores from the South Atlantic suggest that thermohaline circulation collapsed twice during the Holocene, forcing a revision of long-held warming assumptions.</div>
          <div class="side-by">By Dr. E. Vasquez · 8 min read</div>
        </div>
      </div>
      <div class="col-rule"></div>

      <div class="feat-col">
        <div class="lead-img">
          <svg width="100%" height="100%" viewBox="0 0 560 315" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
            <rect width="560" height="315" fill="#1a1714"/>
            <line x1="0" y1="60" x2="560" y2="60" stroke="rgba(255,255,255,0.05)" stroke-width="1"/>
            <line x1="0" y1="160" x2="560" y2="160" stroke="rgba(255,255,255,0.05)" stroke-width="1"/>
            <line x1="0" y1="260" x2="560" y2="260" stroke="rgba(255,255,255,0.05)" stroke-width="1"/>
            <circle cx="200" cy="157" r="80" fill="rgba(196,30,30,0.12)"/>
            <circle cx="360" cy="157" r="80" fill="rgba(255,255,255,0.04)"/>
            <text x="280" y="170" text-anchor="middle" font-family="'Libre Baskerville',serif" font-size="18" fill="rgba(255,255,255,0.15)" letter-spacing="8">LEDGER</text>
            <rect x="0" y="285" width="560" height="30" fill="rgba(196,30,30,0.15)"/>
          </svg>
        </div>
        <div class="lead-img-cap">The new global order: contested spaces and the architecture of multilateral failure. · Ledger / Graphics Desk</div>
        <div class="lead-cat">World Affairs</div>
        <h1 class="lead-title">The Fracture Lines<br>of a <em>Post-Western</em><br>World Order</h1>
        <div class="lead-deck">As the architecture of the postwar international system strains under the weight of competing hegemonies, historians and diplomats alike warn that the rules-based order may be entering its most consequential rupture since 1945.</div>
        <div class="lead-byline">By <strong>Prof. Mara Holloway</strong> · Analysis · May 28, 2026 · 18 min read</div>
        <div class="lead-body">
          <p>The system was never supposed to last forever. Built on the ruins of European empires and tempered by the cold arithmetic of nuclear deterrence, the institutions assembled at Bretton Woods and San Francisco were always products of a particular moment — and of particular power.</p>
          <p>That moment, most analysts now agree, has passed. The question is no longer whether the liberal international order will survive the century, but what will replace it — and who will write the rules for whatever comes next.</p>
          <p>The contest playing out across five continents is not merely geopolitical. It is epistemic. Rival conceptions of sovereignty, legitimacy, and the proper scope of international law are colliding in courtrooms, trading floors, and satellite networks simultaneously.</p>
        </div>
      </div>
      <div class="col-rule"></div>

      <div class="feat-col">
        <div class="side-story">
          <div class="side-cat">Culture</div>
          <div class="side-title">A Silence That Speaks: The Return of Slow Reading</div>
          <div class="side-deck">Sales of long-form literary nonfiction have climbed 34% in two years as readers push back against the algorithmic fragment. Publishers are cautiously celebratory.</div>
          <div class="side-by">By F. Andersen · 5 min read</div>
        </div>
        <div class="side-story breaking-story">
          <div class="side-cat">Breaking</div>
          <div class="side-title side-title-small">UN Security Council Convenes Emergency Session Over Arctic Shipping Dispute</div>
          <div class="side-deck">Norway, Russia, and Canada have submitted competing jurisdiction claims over newly navigable polar routes as ice coverage hits a 40-year low.</div>
          <div class="side-by">Developing story · Updated 12 min ago</div>
        </div>
        <div class="side-story side-story-mt">
          <div class="side-cat">Opinion</div>
          <div class="side-title">The Algorithm Doesn't Care About Your Attention — But You Should</div>
          <div class="side-deck">Our media columnist on why the fight against engagement-driven content is ultimately a fight for cognitive sovereignty.</div>
          <div class="side-by">By D. Laurent · 7 min read</div>
        </div>
      </div>
    </div>

    <div class="section-head">
      <h2>In Depth</h2>
      <span class="section-more">More →</span>
    </div>
    <div class="card-grid">
      <div class="story-card">
        <div class="card-img card-img-1">
          <svg width="100%" height="100%" viewBox="0 0 240 160" aria-hidden="true"><rect width="240" height="160" fill="#2c3e50"/><circle cx="120" cy="80" r="40" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="1"/><circle cx="120" cy="80" r="25" fill="rgba(52,152,219,0.3)"/></svg>
        </div>
        <div class="card-cat">Economics</div>
        <div class="card-title">Shadow Banking's Quiet Comeback, Decade After the Crisis</div>
        <div class="card-deck">Off-balance-sheet vehicles have returned to pre-2008 proportions, raising uncomfortable questions for regulators.</div>
        <div class="card-by">By T. Osei · 9 min read</div>
      </div>
      <div class="story-card">
        <div class="card-img card-img-2">
          <svg width="100%" height="100%" viewBox="0 0 240 160" aria-hidden="true"><rect width="240" height="160" fill="#1a3a2a"/><rect x="20" y="20" width="200" height="3" fill="rgba(255,255,255,0.08)"/><rect x="20" y="40" width="160" height="3" fill="rgba(255,255,255,0.05)"/><rect x="20" y="60" width="180" height="3" fill="rgba(255,255,255,0.08)"/></svg>
        </div>
        <div class="card-cat">Environment</div>
        <div class="card-title">Rewilding at Scale: The Nations Betting on Nature's Recovery</div>
        <div class="card-deck">From the Scottish Highlands to the Paraguayan Chaco, a quiet ecological revolution is underway — with surprisingly bankable results.</div>
        <div class="card-by">By J. Petersen · 11 min read</div>
      </div>
      <div class="story-card">
        <div class="card-img card-img-3">
          <svg width="100%" height="100%" viewBox="0 0 240 160" aria-hidden="true"><rect width="240" height="160" fill="#3d1a2c"/><polygon points="120,30 200,130 40,130" fill="none" stroke="rgba(255,255,255,0.08)" stroke-width="1"/></svg>
        </div>
        <div class="card-cat">Technology</div>
        <div class="card-title">Synthetic Biology Enters the Farm: A Reckoning With Risk</div>
        <div class="card-deck">Lab-engineered microbes designed to fix nitrogen without fertiliser are moving toward commercial release. Not everyone is ready.</div>
        <div class="card-by">By Dr. C. Iyer · 14 min read</div>
      </div>
      <div class="story-card">
        <div class="card-img card-img-4">
          <svg width="100%" height="100%" viewBox="0 0 240 160" aria-hidden="true"><rect width="240" height="160" fill="#1a1a2e"/><line x1="0" y1="80" x2="240" y2="80" stroke="rgba(255,255,255,0.08)"/><circle cx="60" cy="80" r="12" fill="rgba(100,100,200,0.3)"/><circle cx="120" cy="60" r="18" fill="rgba(100,100,200,0.2)"/><circle cx="180" cy="90" r="10" fill="rgba(100,100,200,0.25)"/></svg>
        </div>
        <div class="card-cat">Politics</div>
        <div class="card-title">The Technocrats vs. The Populists: Europe's Governing Crisis</div>
        <div class="card-deck">A new wave of election results across the continent is forcing a reckoning with the limits of expert-led government.</div>
        <div class="card-by">By A. Müller · 10 min read</div>
      </div>
    </div>

    <div class="opinion-data">
      <div class="opinion-block">
        <div class="section-head"><h2>Opinion</h2><span class="section-more">All columns →</span></div>
        <div class="opinion-quote">Democracy does not die in darkness alone — it also dies in the blinding light of too much noise, too quickly consumed.</div>
        <div class="side-by side-by-attrib">Mara Holloway · Contributing Editor</div>
        <div class="side-story">
          <div class="side-cat">Dispatch</div>
          <div class="side-title">From Geneva: The Treaties Nobody Talks About Anymore</div>
          <div class="side-deck">Our Geneva correspondent on the slow death of humanitarian law by bureaucratic attrition and the NGOs fighting back.</div>
          <div class="side-by">By S. Bonnet · 8 min read</div>
        </div>
      </div>
      <div class="data-block">
        <div class="data-title">By the Numbers</div>
        <div class="data-row"><span class="data-label">Press Freedom Index ↓</span><div class="data-bar-wrap"><div class="data-bar" data-w="38"></div></div><span class="data-val">38</span></div>
        <div class="data-row"><span class="data-label">Global Literacy Rate</span><div class="data-bar-wrap"><div class="data-bar" data-w="87"></div></div><span class="data-val">87%</span></div>
        <div class="data-row"><span class="data-label">Arctic Ice Cover</span><div class="data-bar-wrap"><div class="data-bar" data-w="41"></div></div><span class="data-val">−41%</span></div>
        <div class="data-row"><span class="data-label">UN Budget Shortfall</span><div class="data-bar-wrap"><div class="data-bar" data-w="72"></div></div><span class="data-val">$2.4B</span></div>
        <div class="data-row"><span class="data-label">Multilateral Treaties</span><div class="data-bar-wrap"><div class="data-bar" data-w="55"></div></div><span class="data-val">↑ 55</span></div>
      </div>
    </div>

    <div class="newsletter">
      <div class="nl-text">
        <div class="nl-eyebrow">The Ledger Brief</div>
        <div class="nl-title">Analysis that earns the<br>time you give it. Daily.</div>
      </div>
      <div class="nl-form">
        <input class="nl-input" type="email" placeholder="your@email.com" aria-label="Email address">
        <button class="nl-btn" type="button">Subscribe</button>
      </div>
    </div>
  </div>
</section>
```

**CSS:**
```css
/* ─── 04 Ledger — minimalist broadsheet editorial / news UI ────── */
@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Source+Sans+3:wght@300;400;600&display=swap');

.mu-ed {
  --mu-ed-bg: #f8f6f2;
  --mu-ed-white: #ffffff;
  --mu-ed-ink: #111010;
  --mu-ed-mid: #6a6560;
  --mu-ed-dim: #b0aaa4;
  --mu-ed-rule: #e0dbd4;
  --mu-ed-accent: #c41e1e;
  --mu-ed-accent-light: #fdf0f0;
  --mu-ed-serif: 'Libre Baskerville', serif;
  --mu-ed-sans: 'Source Sans 3', sans-serif;

  position: relative;
  width: 100%;
  min-height: 1800px;
  background: var(--mu-ed-bg);
  color: var(--mu-ed-ink);
  font-family: var(--mu-ed-sans);
  line-height: 1.6;
  overflow-x: hidden;
  box-sizing: border-box;
}
.mu-ed *, .mu-ed *::before, .mu-ed *::after { box-sizing: border-box; margin: 0; padding: 0; }

.mu-ed .reading-progress { position: absolute; top: 0; left: 0; height: 2px; background: var(--mu-ed-accent); z-index: 200; width: 0; transition: width 0.1s; }

.mu-ed .top-bar { background: var(--mu-ed-ink); color: var(--mu-ed-bg); display: flex; align-items: center; justify-content: space-between; padding: 8px 40px; font-size: 11px; letter-spacing: 0.1em; }
.mu-ed .top-bar-date { color: rgba(255,255,255,0.5); }
.mu-ed .top-bar-editions { display: flex; gap: 20px; }
.mu-ed .top-bar-edition { color: rgba(255,255,255,0.5); cursor: pointer; transition: color 0.2s; }
.mu-ed .top-bar-edition:hover, .mu-ed .top-bar-edition.active { color: rgba(255,255,255,1); }

.mu-ed .masthead { text-align: center; padding: 40px 40px 0; border-bottom: 3px solid var(--mu-ed-ink); position: relative; }
.mu-ed .masthead-tagline { font-size: 10px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--mu-ed-mid); margin-bottom: 16px; }
.mu-ed .masthead-name { font-family: var(--mu-ed-serif); font-size: clamp(60px,8vw,120px); font-weight: 700; line-height: 0.9; letter-spacing: -0.03em; margin-bottom: 8px; }
.mu-ed .masthead-sub { font-size: 12px; letter-spacing: 0.1em; color: var(--mu-ed-mid); margin-bottom: 32px; }
.mu-ed .masthead-nav { display: flex; align-items: center; justify-content: center; gap: 0; border-top: 1px solid var(--mu-ed-rule); border-bottom: 1px solid var(--mu-ed-rule); margin: 0 -40px; }
.mu-ed .mnav-item { font-size: 12px; letter-spacing: 0.15em; text-transform: uppercase; padding: 12px 24px; cursor: pointer; color: var(--mu-ed-mid); transition: all 0.2s; border-right: 1px solid var(--mu-ed-rule); }
.mu-ed .mnav-item:first-child { border-left: 1px solid var(--mu-ed-rule); }
.mu-ed .mnav-item:hover, .mu-ed .mnav-item.active { color: var(--mu-ed-ink); background: var(--mu-ed-white); }
.mu-ed .mnav-item.active { font-weight: 600; }

.mu-ed .page-wrap { max-width: 1280px; margin: 0 auto; padding: 40px 40px; }

.mu-ed .feature-grid { display: grid; grid-template-columns: 1fr 2px 1.6fr 2px 1fr; gap: 0; margin-bottom: 48px; }
.mu-ed .col-rule { background: var(--mu-ed-rule); }
.mu-ed .feat-col { padding: 0 32px; }
.mu-ed .feat-col:first-child { padding-left: 0; }
.mu-ed .feat-col:last-child { padding-right: 0; }

.mu-ed .lead-cat { font-size: 10px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--mu-ed-accent); font-weight: 600; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.mu-ed .lead-cat::after { content: ''; flex: 1; height: 1px; background: var(--mu-ed-accent); }
.mu-ed .lead-title { font-family: var(--mu-ed-serif); font-size: clamp(28px,3.5vw,44px); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; margin-bottom: 16px; }
.mu-ed .lead-title em { font-style: italic; font-weight: 400; }
.mu-ed .lead-deck { font-family: var(--mu-ed-serif); font-size: 16px; font-weight: 400; font-style: italic; color: var(--mu-ed-mid); line-height: 1.6; margin-bottom: 16px; }
.mu-ed .lead-byline { font-size: 11px; letter-spacing: 0.1em; color: var(--mu-ed-dim); border-top: 1px solid var(--mu-ed-rule); padding-top: 10px; margin-bottom: 20px; }
.mu-ed .lead-byline strong { color: var(--mu-ed-ink); letter-spacing: 0.05em; }
.mu-ed .lead-body { font-size: 15px; line-height: 1.85; color: var(--mu-ed-mid); font-weight: 300; }
.mu-ed .lead-body p { margin-bottom: 14px; }
.mu-ed .lead-body p:first-child::first-letter { font-family: var(--mu-ed-serif); font-size: 56px; font-weight: 700; float: left; line-height: 0.85; margin-right: 8px; margin-top: 4px; color: var(--mu-ed-ink); }
.mu-ed .lead-img { width: 100%; aspect-ratio: 16/9; background: linear-gradient(145deg,#1a1714,#3a3028); margin-bottom: 12px; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.mu-ed .lead-img-cap { font-size: 10px; color: var(--mu-ed-dim); letter-spacing: 0.05em; margin-bottom: 24px; }

.mu-ed .side-story { padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid var(--mu-ed-rule); }
.mu-ed .side-story:last-child { border-bottom: none; margin-bottom: 0; }
.mu-ed .side-story.breaking-story { background: var(--mu-ed-accent-light); padding: 16px; margin: 0 -16px; }
.mu-ed .side-story.side-story-mt { margin-top: 20px; }
.mu-ed .side-cat { font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--mu-ed-accent); font-weight: 600; margin-bottom: 8px; }
.mu-ed .side-title { font-family: var(--mu-ed-serif); font-size: 18px; font-weight: 700; line-height: 1.25; margin-bottom: 8px; cursor: pointer; }
.mu-ed .side-title.side-title-small { font-size: 16px; }
.mu-ed .side-title:hover { color: var(--mu-ed-accent); }
.mu-ed .side-deck { font-size: 13px; color: var(--mu-ed-mid); line-height: 1.65; margin-bottom: 8px; font-weight: 300; }
.mu-ed .side-by { font-size: 10px; letter-spacing: 0.08em; color: var(--mu-ed-dim); }
.mu-ed .side-by.side-by-attrib { margin-bottom: 16px; }

.mu-ed .section-head { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; padding-bottom: 12px; border-bottom: 2px solid var(--mu-ed-ink); }
.mu-ed .section-head h2 { font-family: var(--mu-ed-serif); font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
.mu-ed .section-head .section-more { margin-left: auto; font-size: 11px; letter-spacing: 0.1em; color: var(--mu-ed-accent); cursor: pointer; text-transform: uppercase; }

.mu-ed .card-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; margin-bottom: 48px; }
.mu-ed .story-card { cursor: pointer; }
.mu-ed .story-card:hover .card-title { color: var(--mu-ed-accent); }
.mu-ed .card-img { aspect-ratio: 3/2; margin-bottom: 12px; position: relative; overflow: hidden; }
.mu-ed .card-img.card-img-1 { background: linear-gradient(135deg,#2c3e50,#3498db); }
.mu-ed .card-img.card-img-2 { background: linear-gradient(135deg,#1a3a2a,#2d6a4f); }
.mu-ed .card-img.card-img-3 { background: linear-gradient(135deg,#3d1a2c,#8b2060); }
.mu-ed .card-img.card-img-4 { background: linear-gradient(135deg,#1a1a2e,#4a4a8a); }
.mu-ed .card-cat { font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--mu-ed-accent); font-weight: 600; margin-bottom: 6px; }
.mu-ed .card-title { font-family: var(--mu-ed-serif); font-size: 17px; font-weight: 700; line-height: 1.3; margin-bottom: 6px; transition: color 0.2s; }
.mu-ed .card-deck { font-size: 12px; color: var(--mu-ed-mid); line-height: 1.6; margin-bottom: 8px; font-weight: 300; }
.mu-ed .card-by { font-size: 10px; color: var(--mu-ed-dim); }

.mu-ed .opinion-data { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; margin-bottom: 48px; }
.mu-ed .opinion-quote { font-family: var(--mu-ed-serif); font-size: clamp(20px,2.5vw,28px); font-style: italic; font-weight: 400; line-height: 1.4; color: var(--mu-ed-ink); padding: 24px 0; border-top: 3px solid var(--mu-ed-ink); border-bottom: 1px solid var(--mu-ed-rule); margin-bottom: 20px; }
.mu-ed .opinion-quote::before { content: '\201C'; font-size: 60px; line-height: 0; vertical-align: -24px; color: var(--mu-ed-accent); margin-right: 4px; }
.mu-ed .data-title { font-family: var(--mu-ed-serif); font-size: 18px; font-weight: 700; margin-bottom: 20px; padding-bottom: 12px; border-bottom: 2px solid var(--mu-ed-ink); }
.mu-ed .data-row { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--mu-ed-rule); }
.mu-ed .data-label { font-size: 12px; color: var(--mu-ed-mid); flex: 1; }
.mu-ed .data-bar-wrap { width: 120px; height: 4px; background: var(--mu-ed-rule); border-radius: 2px; overflow: hidden; }
.mu-ed .data-bar { height: 100%; background: var(--mu-ed-ink); border-radius: 2px; }
.mu-ed .data-bar[data-w="38"] { width: 38%; }
.mu-ed .data-bar[data-w="41"] { width: 41%; }
.mu-ed .data-bar[data-w="55"] { width: 55%; }
.mu-ed .data-bar[data-w="72"] { width: 72%; }
.mu-ed .data-bar[data-w="87"] { width: 87%; }
.mu-ed .data-val { font-family: var(--mu-ed-serif); font-size: 14px; font-weight: 700; min-width: 40px; text-align: right; }

.mu-ed .newsletter { background: var(--mu-ed-ink); padding: 40px; margin-bottom: 48px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 40px; }
.mu-ed .nl-eyebrow { font-size: 10px; letter-spacing: 0.2em; color: rgba(255,255,255,0.4); text-transform: uppercase; margin-bottom: 8px; }
.mu-ed .nl-title { font-family: var(--mu-ed-serif); font-size: 26px; font-weight: 700; color: var(--mu-ed-white); line-height: 1.2; }
.mu-ed .nl-form { display: flex; gap: 0; }
.mu-ed .nl-input { font-family: var(--mu-ed-sans); font-size: 14px; padding: 14px 20px; border: none; background: rgba(255,255,255,0.1); color: var(--mu-ed-white); outline: none; min-width: 280px; }
.mu-ed .nl-input::placeholder { color: rgba(255,255,255,0.3); }
.mu-ed .nl-btn { font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; padding: 14px 24px; background: var(--mu-ed-accent); color: var(--mu-ed-white); border: none; cursor: pointer; font-family: var(--mu-ed-sans); font-weight: 600; transition: opacity 0.2s; }
.mu-ed .nl-btn:hover { opacity: 0.85; }

@media (max-width: 900px) {
  .mu-ed .top-bar, .mu-ed .masthead, .mu-ed .page-wrap { padding-left: 24px; padding-right: 24px; }
  .mu-ed .masthead-nav { margin: 0 -24px; flex-wrap: wrap; }
  .mu-ed .feature-grid { grid-template-columns: 1fr; gap: 24px; }
  .mu-ed .feat-col { padding: 0; }
  .mu-ed .col-rule { display: none; }
  .mu-ed .card-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
  .mu-ed .opinion-data { grid-template-columns: 1fr; gap: 24px; }
  .mu-ed .newsletter { grid-template-columns: 1fr; gap: 20px; padding: 24px; }
  .mu-ed .nl-form { flex-direction: column; gap: 8px; }
  .mu-ed .nl-input { min-width: 0; }
}
```

**JS:**
```js
(() => {
  // Scoped reading-progress bar — the source mock read
  // document.documentElement.scrollTop, which would track the host
  // page's scroll. Rebind to the wrapper's nearest scrollable
  // ancestor (or window as a fallback for full-page demos).
  const root = document.querySelector('.mu-ed');
  if (!root) return;
  const progress = root.querySelector('[data-mu-ed-progress]');
  if (!progress) return;

  function update() {
    const r = root.getBoundingClientRect();
    const total = root.scrollHeight - window.innerHeight;
    if (total <= 0) { progress.style.width = '0%'; return; }
    const scrolled = Math.max(0, -r.top);
    const pct = Math.min(100, (scrolled / total) * 100);
    progress.style.width = pct + '%';
  }
  window.addEventListener('scroll', update, { passive: true });
  window.addEventListener('resize', update);
  update();
})();
```

### 05. Elara FinTech

**Type:** Pure CSS
**Description:** A minimalist mobile fintech app UI rendered inside a realistic phone frame — proving that small-screen mobile interfaces win by stripping visual noise and exposing primary data in a single glance. Phone outer with rounded corners, notch (camera + speaker), and inner status bar (9:41 + battery/signal SVGs). Inside the screen: greeting header ("Good morning, Elara") with avatar, gradient balance card with $24,832.49 total + glow gradient corners + four wallet actions (Send / Receive / Swap / More), two-up quick stat cards (Portfolio +4.2% / Savings Goal 76%), animated SVG spending chart with gradient fill area + active dot, recent transactions list with iconified merchant rows + debit/credit amounts, and a frosted bottom dock nav with floating center "+" action button. Beside the phone: three context cards (Design Principles, AI Insights with three insight rows, Quick Actions 2x2 grid). Typography pairs Plus Jakarta Sans (UI) with Space Mono (numbers). Best for fintech mobile apps, banking apps, crypto wallets, budgeting UIs, neobank landing pages, mobile-first product showcases.

**HTML:**
```html
<section class="mu-fn" aria-label="Elara FinTech mobile app demo">
  <div class="layout">

    <div class="phone-outer">
      <div class="phone-notch" aria-hidden="true">
        <div class="notch-camera"></div>
        <div class="notch-speaker"></div>
      </div>
      <div class="phone-screen">
        <div class="status-bar">
          <div class="status-time">9:41</div>
          <div class="notch-space"></div>
          <div class="status-icons">
            <svg width="16" height="12" viewBox="0 0 16 12" aria-hidden="true"><rect x="0" y="4" width="3" height="8" rx="1" fill="currentColor" opacity="0.4"/><rect x="4" y="2" width="3" height="10" rx="1" fill="currentColor" opacity="0.6"/><rect x="8" y="0" width="3" height="12" rx="1" fill="currentColor" opacity="0.8"/><rect x="12" y="0" width="3" height="12" rx="1" fill="currentColor"/></svg>
            <svg width="14" height="12" viewBox="0 0 14 12" aria-hidden="true"><path d="M7 10 C3 10 0 7 0 7 S3 2 7 2 S14 7 14 7 S11 10 7 10Z" fill="none" stroke="currentColor" stroke-width="1.2"/><circle cx="7" cy="7" r="2" fill="currentColor"/></svg>
            <svg width="26" height="12" viewBox="0 0 26 12" aria-hidden="true"><rect x="0" y="1" width="22" height="10" rx="3" fill="none" stroke="currentColor" stroke-width="1.2"/><rect x="22" y="4" width="2" height="4" rx="1" fill="currentColor" opacity="0.4"/><rect x="1.5" y="2.5" width="16" height="7" rx="2" fill="currentColor"/></svg>
          </div>
        </div>

        <div class="screen-content">
          <div class="app-header">
            <div class="greeting-row">
              <div>
                <div class="greeting">Good morning,</div>
                <div class="user-name-main">Elara 👋</div>
              </div>
              <div class="header-avatar">EK</div>
            </div>
          </div>

          <div class="balance-card">
            <div class="balance-label">Total Balance</div>
            <div class="balance-amount">$24,832<span class="balance-cents">.49</span></div>
            <div class="balance-change">
              <span class="chg-arrow">↑</span>
              +$1,204.20
              <span class="chg-period">this month</span>
            </div>
            <div class="balance-actions">
              <button class="bal-action" type="button"><div class="bal-action-icon">↑</div><div class="bal-action-label">Send</div></button>
              <button class="bal-action" type="button"><div class="bal-action-icon">↓</div><div class="bal-action-label">Receive</div></button>
              <button class="bal-action" type="button"><div class="bal-action-icon">⇄</div><div class="bal-action-label">Swap</div></button>
              <button class="bal-action" type="button"><div class="bal-action-icon">⋯</div><div class="bal-action-label">More</div></button>
            </div>
          </div>

          <div class="stats-row">
            <div class="stat-card">
              <div class="stat-top">
                <div class="stat-icon-wrap stat-icon-green">💹</div>
                <div class="stat-change up">+4.2%</div>
              </div>
              <div class="stat-label">Portfolio</div>
              <div class="stat-value stat-value-green">$8,440</div>
            </div>
            <div class="stat-card">
              <div class="stat-top">
                <div class="stat-icon-wrap stat-icon-blue">🎯</div>
                <div class="stat-change up">+12%</div>
              </div>
              <div class="stat-label">Savings Goal</div>
              <div class="stat-value">76%</div>
            </div>
          </div>

          <div class="chart-section">
            <div class="chart-card">
              <div class="chart-header">
                <div class="chart-title">Spending</div>
                <div class="chart-period-group">
                  <div class="chart-period">1W</div>
                  <div class="chart-period active">1M</div>
                  <div class="chart-period">3M</div>
                </div>
              </div>
              <div class="chart-total">$3,214</div>
              <div class="chart-sub">↓ $380 vs last month</div>
              <svg class="chart-svg" viewBox="0 0 300 80" preserveAspectRatio="none" aria-hidden="true">
                <defs>
                  <linearGradient id="mu-fn-chartGrad" x1="0" y1="0" x2="0" y2="1">
                    <stop offset="0%" stop-color="#00e5a0" stop-opacity="0.3"/>
                    <stop offset="100%" stop-color="#00e5a0" stop-opacity="0"/>
                  </linearGradient>
                </defs>
                <path d="M0,60 C20,50 30,40 50,45 C70,50 80,30 100,25 C120,20 130,35 150,30 C170,25 180,15 200,18 C220,21 230,35 250,28 C270,21 280,10 300,8 L300,80 L0,80 Z" fill="url(#mu-fn-chartGrad)"/>
                <path d="M0,60 C20,50 30,40 50,45 C70,50 80,30 100,25 C120,20 130,35 150,30 C170,25 180,15 200,18 C220,21 230,35 250,28 C270,21 280,10 300,8" fill="none" stroke="#00e5a0" stroke-width="2" stroke-linecap="round"/>
                <circle cx="300" cy="8" r="4" fill="#00e5a0"/>
              </svg>
            </div>
          </div>

          <div class="transactions">
            <div class="tx-header">
              <div class="tx-title">Recent</div>
              <div class="tx-see-all">See all →</div>
            </div>
            <div class="tx-item">
              <div class="tx-icon tx-icon-blue">🛒</div>
              <div class="tx-info"><div class="tx-name">Whole Foods Market</div><div class="tx-date">Today, 8:24 AM</div></div>
              <div class="tx-amount debit">−$62.40</div>
            </div>
            <div class="tx-item">
              <div class="tx-icon tx-icon-green">💰</div>
              <div class="tx-info"><div class="tx-name">Salary Deposit</div><div class="tx-date">Yesterday</div></div>
              <div class="tx-amount credit">+$5,200.00</div>
            </div>
            <div class="tx-item">
              <div class="tx-icon tx-icon-yellow">☕</div>
              <div class="tx-info"><div class="tx-name">Blue Bottle Coffee</div><div class="tx-date">Mon, May 26</div></div>
              <div class="tx-amount debit">−$7.80</div>
            </div>
            <div class="tx-item">
              <div class="tx-icon tx-icon-red">🎬</div>
              <div class="tx-info"><div class="tx-name">Netflix</div><div class="tx-date">May 25</div></div>
              <div class="tx-amount debit">−$18.99</div>
            </div>
          </div>
        </div>

        <div class="bottom-nav">
          <button class="nav-btn active" type="button">
            <div class="nav-btn-icon">⌂</div>
            <div class="nav-btn-label">Home</div>
          </button>
          <button class="nav-btn" type="button">
            <div class="nav-btn-icon">◫</div>
            <div class="nav-btn-label">Cards</div>
          </button>
          <button class="nav-center-btn" type="button">+</button>
          <button class="nav-btn" type="button">
            <div class="nav-btn-icon">◎</div>
            <div class="nav-btn-label">Invest</div>
          </button>
          <button class="nav-btn" type="button">
            <div class="nav-btn-icon">◉</div>
            <div class="nav-btn-label">Profile</div>
          </button>
        </div>
      </div>
    </div>

    <div class="context-wrap">
      <div class="context-card">
        <div class="ctx-label">Design Principles</div>
        <div class="ctx-title">Zero-friction<br>money flows</div>
        <div class="ctx-desc">Every interaction is designed to reduce cognitive load. Primary data is always one glance away, secondary actions one tap, tertiary flows never more than two steps deep.</div>
      </div>
      <div class="context-card">
        <div class="ctx-label">AI Insights</div>
        <div class="insight-row">
          <div class="insight-icon insight-icon-green">📈</div>
          <div class="insight-text"><div class="insight-name">Spending down</div><div class="insight-sub">vs. 3-month avg</div></div>
          <div class="insight-val insight-val-green">−11%</div>
        </div>
        <div class="insight-row">
          <div class="insight-icon insight-icon-blue">🎯</div>
          <div class="insight-text"><div class="insight-name">Goal on track</div><div class="insight-sub">House fund · $40K</div></div>
          <div class="insight-val insight-val-blue">76%</div>
        </div>
        <div class="insight-row">
          <div class="insight-icon insight-icon-yellow">⚡</div>
          <div class="insight-text"><div class="insight-name">Bill due soon</div><div class="insight-sub">Rent · Jun 1</div></div>
          <div class="insight-val insight-val-yellow">3d</div>
        </div>
      </div>
      <div class="context-card">
        <div class="ctx-label">Quick Actions</div>
        <div class="quick-grid">
          <div class="quick-tile"><div class="quick-icon">💳</div><div class="quick-label">Virtual Card</div></div>
          <div class="quick-tile"><div class="quick-icon">📊</div><div class="quick-label">Analytics</div></div>
          <div class="quick-tile"><div class="quick-icon">🔐</div><div class="quick-label">Security</div></div>
          <div class="quick-tile quick-tile-accent"><div class="quick-icon">✨</div><div class="quick-label quick-label-accent">Upgrade</div></div>
        </div>
      </div>
    </div>
  </div>
</section>
```

**CSS:**
```css
/* ─── 05 Elara FinTech Mobile — minimalist mobile app UI ───────── */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Space+Mono:wght@400;700&display=swap');

.mu-fn {
  --mu-fn-bg: #0e0e14;
  --mu-fn-surface: #16161f;
  --mu-fn-surface2: #1e1e2a;
  --mu-fn-border: #26263a;
  --mu-fn-text: #f0f0f8;
  --mu-fn-text-mid: #8888aa;
  --mu-fn-text-dim: #44445a;
  --mu-fn-green: #00e5a0;
  --mu-fn-green-dim: rgba(0,229,160,0.12);
  --mu-fn-blue: #4488ff;
  --mu-fn-blue-dim: rgba(68,136,255,0.1);
  --mu-fn-red: #ff4466;
  --mu-fn-yellow: #ffcc44;
  --mu-fn-sans: 'Plus Jakarta Sans', sans-serif;
  --mu-fn-mono: 'Space Mono', monospace;

  position: relative;
  width: 100%;
  min-height: 900px;
  background: var(--mu-fn-bg);
  color: var(--mu-fn-text);
  font-family: var(--mu-fn-sans);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  overflow: hidden;
  box-sizing: border-box;
}
.mu-fn *, .mu-fn *::before, .mu-fn *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Ambient radial glow — was body::before fixed; scoped. */
.mu-fn::before {
  content: '';
  position: absolute;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle,rgba(0,229,160,0.06) 0%,transparent 70%);
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  pointer-events: none;
  z-index: 0;
}

.mu-fn .layout { position: relative; z-index: 1; display: flex; gap: 40px; align-items: center; }

.mu-fn .phone-outer { position: relative; background: linear-gradient(160deg,#2a2a3a,#1a1a28); border-radius: 54px; padding: 14px; box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 40px 120px rgba(0,0,0,0.6), inset 0 0 0 1px rgba(255,255,255,0.04); width: 380px; flex-shrink: 0; }
.mu-fn .phone-notch { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); width: 100px; height: 28px; background: #0e0e14; border-radius: 0 0 20px 20px; z-index: 10; display: flex; align-items: center; justify-content: center; gap: 6px; }
.mu-fn .notch-camera { width: 10px; height: 10px; border-radius: 50%; background: #1a1a24; border: 2px solid #252535; }
.mu-fn .notch-speaker { width: 48px; height: 5px; border-radius: 3px; background: #1a1a24; }
.mu-fn .phone-screen { background: var(--mu-fn-bg); border-radius: 42px; overflow: hidden; height: 780px; position: relative; display: flex; flex-direction: column; }

.mu-fn .status-bar { display: flex; align-items: center; justify-content: space-between; padding: 12px 24px 0; position: relative; z-index: 5; }
.mu-fn .status-time { font-family: var(--mu-fn-mono); font-size: 13px; font-weight: 700; }
.mu-fn .notch-space { width: 120px; }
.mu-fn .status-icons { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--mu-fn-text-mid); }

.mu-fn .screen-content { flex: 1; overflow-y: auto; padding: 8px 0 80px; scroll-behavior: smooth; }
.mu-fn .screen-content::-webkit-scrollbar { display: none; }

.mu-fn .app-header { padding: 16px 24px 20px; }
.mu-fn .greeting-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.mu-fn .greeting { font-size: 13px; color: var(--mu-fn-text-mid); font-weight: 400; }
.mu-fn .header-avatar { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg,var(--mu-fn-green),#008860); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; color: #0a0a0a; }
.mu-fn .user-name-main { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }

.mu-fn .balance-card { margin: 0 20px 20px; background: linear-gradient(135deg,#0f1f18 0%,#0a1810 50%,#0f1f18 100%); border: 1px solid rgba(0,229,160,0.15); border-radius: 24px; padding: 28px 28px 24px; position: relative; overflow: hidden; animation: mu-fn-cardin 0.5s ease 0.1s both; }
.mu-fn .balance-card::before { content: ''; position: absolute; top: -60px; right: -60px; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle,rgba(0,229,160,0.1) 0%,transparent 70%); }
.mu-fn .balance-card::after { content: ''; position: absolute; bottom: -40px; left: -40px; width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(circle,rgba(0,229,160,0.05) 0%,transparent 70%); }
.mu-fn .balance-label { font-size: 12px; letter-spacing: 0.12em; color: rgba(0,229,160,0.6); text-transform: uppercase; margin-bottom: 8px; font-weight: 500; position: relative; }
.mu-fn .balance-amount { font-family: var(--mu-fn-mono); font-size: 40px; font-weight: 700; letter-spacing: -0.03em; color: var(--mu-fn-text); line-height: 1; margin-bottom: 6px; position: relative; }
.mu-fn .balance-cents { font-size: 24px; opacity: 0.5; }
.mu-fn .balance-change { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--mu-fn-green); font-weight: 600; margin-bottom: 24px; position: relative; }
.mu-fn .chg-arrow { font-size: 14px; }
.mu-fn .chg-period { color: var(--mu-fn-text-mid); font-weight: 400; }
.mu-fn .balance-actions { display: flex; gap: 10px; position: relative; }
.mu-fn .bal-action { flex: 1; background: rgba(0,229,160,0.1); border: 1px solid rgba(0,229,160,0.15); border-radius: 14px; padding: 12px 8px; display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; transition: all 0.2s; font-family: inherit; color: inherit; }
.mu-fn .bal-action:hover { background: rgba(0,229,160,0.18); }
.mu-fn .bal-action-icon { font-size: 18px; }
.mu-fn .bal-action-label { font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mu-fn-text-mid); font-weight: 600; }

.mu-fn .stats-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 20px 20px; animation: mu-fn-cardin 0.5s ease 0.2s both; }
.mu-fn .stat-card { background: var(--mu-fn-surface); border: 1px solid var(--mu-fn-border); border-radius: 20px; padding: 18px 18px; }
.mu-fn .stat-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.mu-fn .stat-icon-wrap { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 16px; }
.mu-fn .stat-icon-green { background: var(--mu-fn-green-dim); } .mu-fn .stat-icon-blue { background: var(--mu-fn-blue-dim); }
.mu-fn .stat-change { font-size: 11px; font-weight: 600; padding: 3px 7px; border-radius: 20px; }
.mu-fn .stat-change.up { background: var(--mu-fn-green-dim); color: var(--mu-fn-green); }
.mu-fn .stat-label { font-size: 11px; color: var(--mu-fn-text-mid); margin-bottom: 4px; font-weight: 500; }
.mu-fn .stat-value { font-family: var(--mu-fn-mono); font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.mu-fn .stat-value-green { color: var(--mu-fn-green); }

.mu-fn .chart-section { margin: 0 20px 20px; }
.mu-fn .chart-card { background: var(--mu-fn-surface); border: 1px solid var(--mu-fn-border); border-radius: 20px; padding: 20px; animation: mu-fn-cardin 0.5s ease 0.3s both; }
.mu-fn .chart-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.mu-fn .chart-title { font-size: 14px; font-weight: 700; }
.mu-fn .chart-period-group { display: flex; gap: 2px; background: var(--mu-fn-surface2); border-radius: 8px; padding: 2px; }
.mu-fn .chart-period { font-size: 10px; padding: 4px 10px; border-radius: 6px; cursor: pointer; color: var(--mu-fn-text-dim); font-weight: 600; }
.mu-fn .chart-period.active { background: var(--mu-fn-border); color: var(--mu-fn-text); }
.mu-fn .chart-total { font-family: var(--mu-fn-mono); font-size: 26px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 4px; }
.mu-fn .chart-sub { font-size: 11px; color: var(--mu-fn-green); font-weight: 600; margin-bottom: 18px; }
.mu-fn .chart-svg { width: 100%; height: 90px; }

.mu-fn .transactions { padding: 0 20px; }
.mu-fn .tx-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.mu-fn .tx-title { font-size: 15px; font-weight: 700; }
.mu-fn .tx-see-all { font-size: 12px; color: var(--mu-fn-green); font-weight: 600; cursor: pointer; }
.mu-fn .tx-item { display: flex; align-items: center; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--mu-fn-border); }
.mu-fn .tx-item:last-child { border-bottom: none; }
.mu-fn .tx-icon { width: 42px; height: 42px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
.mu-fn .tx-icon-blue { background: var(--mu-fn-blue-dim); }
.mu-fn .tx-icon-green { background: var(--mu-fn-green-dim); }
.mu-fn .tx-icon-yellow { background: rgba(255,204,68,0.1); }
.mu-fn .tx-icon-red { background: rgba(255,68,102,0.1); }
.mu-fn .tx-info { flex: 1; min-width: 0; }
.mu-fn .tx-name { font-size: 14px; font-weight: 600; margin-bottom: 2px; }
.mu-fn .tx-date { font-size: 11px; color: var(--mu-fn-text-mid); }
.mu-fn .tx-amount { font-family: var(--mu-fn-mono); font-size: 14px; font-weight: 700; }
.mu-fn .tx-amount.debit { color: var(--mu-fn-text); }
.mu-fn .tx-amount.credit { color: var(--mu-fn-green); }

.mu-fn .bottom-nav { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(14,14,20,0.95); backdrop-filter: blur(20px); border-top: 1px solid var(--mu-fn-border); display: flex; align-items: center; justify-content: space-around; padding: 12px 8px 20px; }
.mu-fn .nav-btn { display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; flex: 1; padding: 4px; border: none; background: transparent; font-family: inherit; color: inherit; }
.mu-fn .nav-btn-icon { font-size: 22px; transition: transform 0.2s; }
.mu-fn .nav-btn-label { font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mu-fn-text-dim); font-weight: 600; }
.mu-fn .nav-btn.active .nav-btn-label { color: var(--mu-fn-green); }
.mu-fn .nav-btn.active .nav-btn-icon { transform: scale(1.1); }
.mu-fn .nav-center-btn { width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(135deg,var(--mu-fn-green),#00aa78); display: flex; align-items: center; justify-content: center; font-size: 22px; cursor: pointer; box-shadow: 0 0 24px rgba(0,229,160,0.3); transition: transform 0.2s, box-shadow 0.2s; flex-shrink: 0; margin-top: -18px; border: none; font-family: inherit; color: inherit; }
.mu-fn .nav-center-btn:hover { transform: scale(1.05); box-shadow: 0 0 32px rgba(0,229,160,0.4); }

.mu-fn .context-wrap { display: flex; flex-direction: column; gap: 20px; max-width: 280px; }
.mu-fn .context-card { background: var(--mu-fn-surface); border: 1px solid var(--mu-fn-border); border-radius: 20px; padding: 22px; }
.mu-fn .ctx-label { font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--mu-fn-text-mid); font-weight: 600; margin-bottom: 12px; }
.mu-fn .ctx-title { font-size: 18px; font-weight: 700; margin-bottom: 8px; letter-spacing: -0.01em; }
.mu-fn .ctx-desc { font-size: 12px; color: var(--mu-fn-text-mid); line-height: 1.7; font-weight: 300; }
.mu-fn .insight-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--mu-fn-border); }
.mu-fn .insight-row:last-child { border-bottom: none; }
.mu-fn .insight-icon { width: 32px; height: 32px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; }
.mu-fn .insight-icon-green { background: var(--mu-fn-green-dim); }
.mu-fn .insight-icon-blue { background: var(--mu-fn-blue-dim); }
.mu-fn .insight-icon-yellow { background: rgba(255,204,68,0.1); }
.mu-fn .insight-text { flex: 1; }
.mu-fn .insight-name { font-size: 12px; font-weight: 600; margin-bottom: 1px; }
.mu-fn .insight-sub { font-size: 10px; color: var(--mu-fn-text-mid); }
.mu-fn .insight-val { font-family: var(--mu-fn-mono); font-size: 12px; font-weight: 700; }
.mu-fn .insight-val-green { color: var(--mu-fn-green); }
.mu-fn .insight-val-blue { color: var(--mu-fn-blue); }
.mu-fn .insight-val-yellow { color: var(--mu-fn-yellow); }
.mu-fn .quick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
.mu-fn .quick-tile { background: var(--mu-fn-surface2); border: 1px solid var(--mu-fn-border); border-radius: 12px; padding: 14px; cursor: pointer; text-align: center; }
.mu-fn .quick-tile.quick-tile-accent { background: var(--mu-fn-green-dim); border-color: rgba(0,229,160,0.2); }
.mu-fn .quick-icon { font-size: 20px; margin-bottom: 4px; }
.mu-fn .quick-label { font-size: 11px; color: var(--mu-fn-text-mid); font-weight: 600; }
.mu-fn .quick-label.quick-label-accent { color: var(--mu-fn-green); }

@keyframes mu-fn-cardin { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 900px) {
  .mu-fn .layout { flex-direction: column; gap: 24px; align-items: stretch; }
  .mu-fn .context-wrap { max-width: 380px; margin: 0 auto; }
}

@media (prefers-reduced-motion: reduce) {
  .mu-fn .balance-card, .mu-fn .stats-row, .mu-fn .chart-card { animation: none !important; }
}
```

### 06. Crest Landing

**Type:** CSS + JS
**Description:** A minimalist SaaS landing page UI for a deployment platform — proving that high-impact single-product landing pages convert when they marry bold display typography to a focused single CTA. Sticky top nav (logo + Product / Pricing / Docs / Blog + orange "Start Free →" CTA), split-screen hero with an animated perspective grid background, pulsing orange ambient glow, "BUILD faster. SHIP BOLDLY." headline mixing Bebas Neue display + Fraunces italic serif, social-proof avatars (4,200+ teams), and on the right a live-updating product card mock with animated bars + counter + floating metric cards (99.98% Uptime, 1.2s Avg Deploy). Below: 4-column stats strip (4B+ requests, 1.2s deploys, 99.98% uptime, 140+ edges) with hover-revealed accent underlines, a 3×2 features grid with oversized ghost numbers and italic-serif feature names, and a centered CTA section with ambient glow + email capture form. Typography: Bebas Neue + Fraunces + Inter. Best for SaaS landing pages, dev-tool homepages, deployment platforms, B2B product launches, single-product marketing sites.

**HTML:**
```html
<section class="mu-ls" aria-label="Crest SaaS landing page demo">
  <nav class="topnav">
    <div class="nav-logo">Crest<span>.</span></div>
    <div class="nav-links">
      <span class="nav-link">Product</span>
      <span class="nav-link">Pricing</span>
      <span class="nav-link">Docs</span>
      <span class="nav-link">Blog</span>
    </div>
    <button class="nav-cta" type="button">Start Free →</button>
  </nav>

  <section class="hero">
    <div class="hero-grid" aria-hidden="true"></div>
    <div class="hero-glow" aria-hidden="true"></div>

    <div class="hero-left">
      <div class="hero-eyebrow">
        <span class="eyebrow-line"></span>
        The Platform for Modern Teams
      </div>
      <h1 class="hero-headline">
        BUILD<br>
        <span class="headline-serif">faster.</span>
        <br>SHIP<br>
        <span class="headline-accent">BOLDLY.</span>
      </h1>
      <p class="hero-sub">Crest is the all-in-one deployment and analytics platform that gets out of your way. Zero config. Instant rollbacks. Real insight — from commit to conversion.</p>
      <div class="hero-actions">
        <button class="btn-hero primary" type="button">Get Started Free <span class="btn-arrow">→</span></button>
        <button class="btn-hero secondary" type="button">Watch Demo</button>
      </div>
      <div class="hero-social-proof">
        <div class="proof-avatars">
          <div class="proof-avatar proof-a">A</div>
          <div class="proof-avatar proof-m">M</div>
          <div class="proof-avatar proof-s">S</div>
          <div class="proof-avatar proof-k">K</div>
          <div class="proof-avatar proof-plus">+</div>
        </div>
        <div>
          <div class="proof-stars">★★★★★</div>
          <div class="proof-text"><strong>4,200+ teams</strong> ship faster with Crest</div>
        </div>
      </div>
    </div>

    <div class="hero-right">
      <div class="product-visual">
        <div class="float-card top-right">
          <div class="float-val">99.98%</div>
          <div class="float-label">Uptime SLA</div>
        </div>
        <div class="float-card bottom-left">
          <div class="float-val">1.2s</div>
          <div class="float-label">Avg Deploy Time</div>
        </div>
        <div class="product-main-card">
          <div class="product-screen-label">Live Dashboard · Production</div>
          <div class="product-ui-mock">
            <div class="mock-topbar">
              <div class="mock-dots">
                <div class="mock-dot mock-dot-r"></div>
                <div class="mock-dot mock-dot-y"></div>
                <div class="mock-dot mock-dot-g"></div>
              </div>
              <div class="mock-url">crest.app/dashboard</div>
            </div>
            <div class="mock-content">
              <div class="mock-metric">
                <div class="mock-metric-label">Requests / sec</div>
                <div class="mock-metric-value accent" data-mu-ls-counter>12,840</div>
              </div>
              <div class="mock-bars" data-mu-ls-bars></div>
              <div class="mock-bottom">
                <div class="mock-chip">● Live</div>
                <div class="mock-chip">prod-v2.4.1</div>
                <div class="mock-chip">p95: 42ms</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <div class="stats-strip">
    <div class="stat-block">
      <div class="stat-number">4<span>B+</span></div>
      <div class="stat-desc">Requests served every month across our global edge network</div>
    </div>
    <div class="stat-block">
      <div class="stat-number">1<span>.2s</span></div>
      <div class="stat-desc">Average deployment time from push to production-ready</div>
    </div>
    <div class="stat-block">
      <div class="stat-number">99<span>.98%</span></div>
      <div class="stat-desc">Uptime SLA across all regions in the last 12 months</div>
    </div>
    <div class="stat-block">
      <div class="stat-number">140<span>+</span></div>
      <div class="stat-desc">Edge locations across six continents for instant delivery</div>
    </div>
  </div>

  <section class="features-section">
    <div class="features-header">
      <div>
        <div class="feat-eyebrow">Why Crest</div>
        <div class="feat-headline">THE STACK<br>DESERVES<br>BETTER</div>
      </div>
      <p class="feat-desc">We built Crest because the status quo is broken. Complex configs, flaky pipelines, and dashboards that tell you nothing useful. Crest is the platform we needed and couldn't find.</p>
    </div>
    <div class="features-grid">
      <div class="feature-item" data-num="01">
        <div class="feature-icon">⚡</div>
        <div class="feature-name">Instant <em>Deploy</em></div>
        <div class="feature-desc">Push your code and we handle the rest. Automatic builds, zero-downtime rollouts, and instant CDN propagation to every edge node simultaneously.</div>
      </div>
      <div class="feature-item" data-num="02">
        <div class="feature-icon">◎</div>
        <div class="feature-name">Real-time <em>Insight</em></div>
        <div class="feature-desc">Not just traffic — conversion funnels, session replays, and anomaly detection that fires before your users notice anything is wrong.</div>
      </div>
      <div class="feature-item" data-num="03">
        <div class="feature-icon">↩</div>
        <div class="feature-name">One-click <em>Rollback</em></div>
        <div class="feature-desc">Every deployment is immutable and stored. Spotted a regression? Roll back to any point in history in under two seconds, with full audit trail.</div>
      </div>
      <div class="feature-item" data-num="04">
        <div class="feature-icon">⬡</div>
        <div class="feature-name">Edge <em>Functions</em></div>
        <div class="feature-desc">Run server-side logic at 140+ locations worldwide. Sub-millisecond cold starts. No container overhead. Pay per invocation, not per instance.</div>
      </div>
      <div class="feature-item" data-num="05">
        <div class="feature-icon">🔐</div>
        <div class="feature-name">Secrets <em>Vault</em></div>
        <div class="feature-desc">Encrypted environment variables, rotated automatically. Zero-knowledge architecture means even we cannot read your credentials.</div>
      </div>
      <div class="feature-item" data-num="06">
        <div class="feature-icon">⌥</div>
        <div class="feature-name">Team <em>Workflows</em></div>
        <div class="feature-desc">Preview environments for every pull request. Configurable approval gates. Slack and Linear integrations so deployment news lives where your team does.</div>
      </div>
    </div>
  </section>

  <section class="cta-section">
    <div class="cta-glow" aria-hidden="true"></div>
    <div class="cta-pre">Get early access</div>
    <h2 class="cta-headline">SHIP YOUR<br><em>best work.</em></h2>
    <p class="cta-sub">Join 4,200 teams who stopped fighting their infrastructure and started focusing on what actually matters.</p>
    <div class="cta-form">
      <input class="cta-input" type="email" placeholder="you@company.com" aria-label="Email address">
      <button class="cta-submit" type="button">Start Free →</button>
    </div>
    <div class="cta-note">No credit card required · Free forever on Starter plan · Cancel anytime</div>
  </section>

  <footer class="footer">
    <div class="footer-logo">Crest<span>.</span></div>
    <div class="footer-links">
      <span class="footer-link">Privacy</span>
      <span class="footer-link">Terms</span>
      <span class="footer-link">Status</span>
      <span class="footer-link">Documentation</span>
    </div>
    <div class="footer-copy">© 2025 Crest Technologies, Inc.</div>
  </footer>
</section>
```

**CSS:**
```css
/* ─── 06 Crest SaaS Landing — minimalist single-product landing ── */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,700;1,9..144,300;1,9..144,700&family=Inter:wght@300;400;500&display=swap');

.mu-ls {
  --mu-ls-black: #060606;
  --mu-ls-offblack: #0d0d0d;
  --mu-ls-white: #fafafa;
  --mu-ls-cream: #f5f0e6;
  --mu-ls-orange: #ff4d00;
  --mu-ls-orange-glow: rgba(255,77,0,0.15);
  --mu-ls-mid: #666;
  --mu-ls-dim: #333;
  --mu-ls-display: 'Bebas Neue', sans-serif;
  --mu-ls-serif: 'Fraunces', serif;
  --mu-ls-body: 'Inter', sans-serif;

  position: relative;
  width: 100%;
  min-height: 2200px;
  background: var(--mu-ls-black);
  color: var(--mu-ls-white);
  font-family: var(--mu-ls-body);
  overflow-x: hidden;
  box-sizing: border-box;
}
.mu-ls *, .mu-ls *::before, .mu-ls *::after { box-sizing: border-box; margin: 0; padding: 0; }

.mu-ls .topnav { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; padding: 0 60px; height: 72px; background: rgba(6,6,6,0.85); backdrop-filter: blur(20px); border-bottom: 1px solid rgba(255,255,255,0.06); }
.mu-ls .nav-logo { font-family: var(--mu-ls-display); font-size: 26px; letter-spacing: 0.08em; color: var(--mu-ls-white); }
.mu-ls .nav-logo span { color: var(--mu-ls-orange); }
.mu-ls .nav-links { display: flex; gap: 40px; }
.mu-ls .nav-link { font-size: 13px; letter-spacing: 0.05em; color: var(--mu-ls-mid); cursor: pointer; transition: color 0.2s; }
.mu-ls .nav-link:hover { color: var(--mu-ls-white); }
.mu-ls .nav-cta { font-size: 13px; letter-spacing: 0.08em; font-weight: 500; background: var(--mu-ls-orange); color: var(--mu-ls-white); padding: 11px 24px; border: none; cursor: pointer; transition: all 0.3s; font-family: inherit; }
.mu-ls .nav-cta:hover { background: #ff6620; }

.mu-ls .hero { min-height: 720px; display: grid; grid-template-columns: 1fr 1fr; position: relative; overflow: hidden; padding-top: 0; }
.mu-ls .hero-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px); background-size: 64px 64px; animation: mu-ls-grid 20s linear infinite; }
@keyframes mu-ls-grid { from { transform: translateY(0); } to { transform: translateY(64px); } }
.mu-ls .hero-glow { position: absolute; top: 20%; left: 30%; width: 600px; height: 600px; border-radius: 50%; background: radial-gradient(circle,var(--mu-ls-orange-glow) 0%,transparent 70%); pointer-events: none; animation: mu-ls-pulse 4s ease-in-out infinite; }
@keyframes mu-ls-pulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.1); opacity: 0.7; } }

.mu-ls .hero-left { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; padding: 80px 60px; border-right: 1px solid rgba(255,255,255,0.06); }
.mu-ls .hero-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--mu-ls-orange); font-weight: 500; margin-bottom: 32px; }
.mu-ls .eyebrow-line { width: 32px; height: 1px; background: var(--mu-ls-orange); }
.mu-ls .hero-headline { font-family: var(--mu-ls-display); font-size: clamp(72px,8vw,130px); line-height: 0.92; letter-spacing: 0.02em; margin-bottom: 32px; animation: mu-ls-headlineIn 0.8s cubic-bezier(0.16,1,0.3,1) 0.1s both; }
.mu-ls .headline-accent { color: var(--mu-ls-orange); }
.mu-ls .headline-serif { font-family: var(--mu-ls-serif); font-style: italic; font-weight: 300; font-size: clamp(60px,7vw,110px); letter-spacing: -0.01em; display: block; line-height: 1; }
@keyframes mu-ls-headlineIn { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
.mu-ls .hero-sub { font-size: 16px; color: var(--mu-ls-mid); line-height: 1.75; max-width: 420px; margin-bottom: 48px; font-weight: 300; animation: mu-ls-fadeUp 0.8s ease 0.3s both; }
@keyframes mu-ls-fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
.mu-ls .hero-actions { display: flex; align-items: center; gap: 20px; animation: mu-ls-fadeUp 0.8s ease 0.45s both; margin-bottom: 60px; }
.mu-ls .btn-hero { font-family: var(--mu-ls-body); font-size: 14px; letter-spacing: 0.08em; font-weight: 500; padding: 16px 36px; border: none; cursor: pointer; transition: all 0.3s; display: flex; align-items: center; gap: 8px; }
.mu-ls .btn-hero.primary { background: var(--mu-ls-orange); color: var(--mu-ls-white); }
.mu-ls .btn-hero.primary:hover { background: #ff6620; transform: translateY(-1px); }
.mu-ls .btn-hero.secondary { background: transparent; color: var(--mu-ls-mid); border: 1px solid var(--mu-ls-dim); }
.mu-ls .btn-hero.secondary:hover { border-color: var(--mu-ls-mid); color: var(--mu-ls-white); }
.mu-ls .btn-arrow { font-size: 18px; transition: transform 0.2s; }
.mu-ls .btn-hero.primary:hover .btn-arrow { transform: translateX(3px); }
.mu-ls .hero-social-proof { display: flex; align-items: center; gap: 16px; animation: mu-ls-fadeUp 0.8s ease 0.55s both; }
.mu-ls .proof-avatars { display: flex; }
.mu-ls .proof-avatar { width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--mu-ls-black); margin-left: -8px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; }
.mu-ls .proof-avatar:first-child { margin-left: 0; }
.mu-ls .proof-a { background: linear-gradient(135deg,#ff6b6b,#ee5a24); }
.mu-ls .proof-m { background: linear-gradient(135deg,#48dbfb,#0abde3); }
.mu-ls .proof-s { background: linear-gradient(135deg,#ff9f43,#ee5a24); }
.mu-ls .proof-k { background: linear-gradient(135deg,#a29bfe,#6c5ce7); }
.mu-ls .proof-plus { background: linear-gradient(135deg,#55efc4,#00b894); }
.mu-ls .proof-text { font-size: 13px; color: var(--mu-ls-mid); }
.mu-ls .proof-text strong { color: var(--mu-ls-white); }
.mu-ls .proof-stars { color: var(--mu-ls-orange); letter-spacing: 1px; font-size: 12px; }

.mu-ls .hero-right { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; padding: 80px 60px; }
.mu-ls .product-visual { position: relative; width: 100%; max-width: 460px; }
.mu-ls .product-main-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: 4px; padding: 40px; backdrop-filter: blur(10px); position: relative; overflow: hidden; }
.mu-ls .product-main-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg,transparent,var(--mu-ls-orange),transparent); }
.mu-ls .product-screen-label { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,77,0,0.7); margin-bottom: 20px; font-weight: 500; }
.mu-ls .product-ui-mock { background: rgba(0,0,0,0.4); border-radius: 2px; overflow: hidden; }
.mu-ls .mock-topbar { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,0.06); }
.mu-ls .mock-dots { display: flex; gap: 6px; }
.mu-ls .mock-dot { width: 10px; height: 10px; border-radius: 50%; }
.mu-ls .mock-dot-r { background: #ff5f57; } .mu-ls .mock-dot-y { background: #febc2e; } .mu-ls .mock-dot-g { background: #28c840; }
.mu-ls .mock-url { font-size: 10px; color: rgba(255,255,255,0.2); font-family: monospace; }
.mu-ls .mock-content { padding: 20px 16px; }
.mu-ls .mock-metric { margin-bottom: 16px; }
.mu-ls .mock-metric-label { font-size: 10px; color: rgba(255,255,255,0.3); margin-bottom: 4px; letter-spacing: 0.1em; }
.mu-ls .mock-metric-value { font-family: var(--mu-ls-display); font-size: 32px; letter-spacing: 0.04em; }
.mu-ls .mock-metric-value.accent { color: var(--mu-ls-orange); }
.mu-ls .mock-bars { display: flex; align-items: flex-end; gap: 6px; height: 60px; margin-bottom: 12px; }
.mu-ls .mock-bar { flex: 1; border-radius: 2px 2px 0 0; background: rgba(255,255,255,0.1); transition: height 0.3s; }
.mu-ls .mock-bar.active { background: var(--mu-ls-orange); }
.mu-ls .mock-bottom { display: flex; gap: 8px; }
.mu-ls .mock-chip { font-size: 9px; letter-spacing: 0.1em; padding: 5px 10px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); border-radius: 20px; color: rgba(255,255,255,0.5); }

.mu-ls .float-card { position: absolute; background: rgba(13,13,13,0.95); border: 1px solid rgba(255,255,255,0.1); border-radius: 3px; padding: 14px 18px; backdrop-filter: blur(20px); animation: mu-ls-float 6s ease-in-out infinite; z-index: 3; }
.mu-ls .float-card:nth-child(2) { animation-delay: -2s; }
@keyframes mu-ls-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.mu-ls .float-card.top-right { top: -16px; right: -20px; }
.mu-ls .float-card.bottom-left { bottom: 20px; left: -30px; }
.mu-ls .float-val { font-family: var(--mu-ls-display); font-size: 24px; letter-spacing: 0.05em; color: var(--mu-ls-orange); }
.mu-ls .float-label { font-size: 10px; color: var(--mu-ls-mid); letter-spacing: 0.1em; margin-top: 2px; }

.mu-ls .stats-strip { border-top: 1px solid rgba(255,255,255,0.06); border-bottom: 1px solid rgba(255,255,255,0.06); display: grid; grid-template-columns: repeat(4,1fr); }
.mu-ls .stat-block { padding: 48px 60px; border-right: 1px solid rgba(255,255,255,0.06); position: relative; overflow: hidden; transition: background 0.3s; }
.mu-ls .stat-block:last-child { border-right: none; }
.mu-ls .stat-block:hover { background: rgba(255,255,255,0.02); }
.mu-ls .stat-block::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--mu-ls-orange); transform: scaleX(0); transform-origin: left; transition: transform 0.4s cubic-bezier(0.23,1,0.32,1); }
.mu-ls .stat-block:hover::after { transform: scaleX(1); }
.mu-ls .stat-number { font-family: var(--mu-ls-display); font-size: 56px; letter-spacing: 0.02em; line-height: 1; margin-bottom: 8px; }
.mu-ls .stat-number span { color: var(--mu-ls-orange); }
.mu-ls .stat-desc { font-size: 13px; color: var(--mu-ls-mid); line-height: 1.5; font-weight: 300; }

.mu-ls .features-section { padding: 120px 60px; }
.mu-ls .features-header { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; margin-bottom: 80px; align-items: end; }
.mu-ls .feat-eyebrow { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--mu-ls-orange); margin-bottom: 16px; font-weight: 500; }
.mu-ls .feat-headline { font-family: var(--mu-ls-display); font-size: clamp(48px,5vw,80px); letter-spacing: 0.02em; line-height: 0.95; }
.mu-ls .feat-desc { font-size: 15px; color: var(--mu-ls-mid); line-height: 1.8; font-weight: 300; max-width: 380px; }
.mu-ls .features-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: rgba(255,255,255,0.06); }
.mu-ls .feature-item { background: var(--mu-ls-black); padding: 48px 40px; transition: background 0.3s; position: relative; overflow: hidden; }
.mu-ls .feature-item:hover { background: var(--mu-ls-offblack); }
.mu-ls .feature-item::before { content: attr(data-num); position: absolute; top: 24px; right: 24px; font-family: var(--mu-ls-display); font-size: 80px; color: rgba(255,255,255,0.03); letter-spacing: 0.04em; line-height: 1; }
.mu-ls .feature-icon { width: 48px; height: 48px; border: 1px solid rgba(255,77,0,0.3); display: flex; align-items: center; justify-content: center; font-size: 20px; margin-bottom: 24px; transition: border-color 0.3s; }
.mu-ls .feature-item:hover .feature-icon { border-color: var(--mu-ls-orange); }
.mu-ls .feature-name { font-family: var(--mu-ls-serif); font-size: 22px; font-weight: 300; margin-bottom: 12px; }
.mu-ls .feature-name em { font-style: italic; color: var(--mu-ls-orange); }
.mu-ls .feature-desc { font-size: 13px; color: var(--mu-ls-mid); line-height: 1.75; font-weight: 300; }

.mu-ls .cta-section { padding: 120px 60px; display: flex; flex-direction: column; align-items: center; text-align: center; border-top: 1px solid rgba(255,255,255,0.06); position: relative; overflow: hidden; }
.mu-ls .cta-glow { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 800px; height: 400px; background: radial-gradient(ellipse,var(--mu-ls-orange-glow) 0%,transparent 65%); }
.mu-ls .cta-pre { font-size: 11px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--mu-ls-orange); margin-bottom: 24px; font-weight: 500; position: relative; z-index: 2; }
.mu-ls .cta-headline { font-family: var(--mu-ls-display); font-size: clamp(60px,8vw,120px); letter-spacing: 0.02em; line-height: 0.92; margin-bottom: 32px; position: relative; z-index: 2; }
.mu-ls .cta-headline em { font-family: var(--mu-ls-serif); font-style: italic; font-weight: 300; font-size: 0.85em; }
.mu-ls .cta-sub { font-size: 16px; color: var(--mu-ls-mid); max-width: 500px; margin-bottom: 48px; line-height: 1.7; font-weight: 300; position: relative; z-index: 2; }
.mu-ls .cta-form { display: flex; gap: 0; max-width: 460px; width: 100%; position: relative; z-index: 2; }
.mu-ls .cta-input { flex: 1; font-family: var(--mu-ls-body); font-size: 14px; padding: 16px 20px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-right: none; color: var(--mu-ls-white); outline: none; transition: border-color 0.2s; }
.mu-ls .cta-input::placeholder { color: var(--mu-ls-mid); }
.mu-ls .cta-input:focus { border-color: rgba(255,77,0,0.4); }
.mu-ls .cta-submit { font-family: var(--mu-ls-body); font-size: 13px; letter-spacing: 0.1em; font-weight: 500; padding: 16px 28px; background: var(--mu-ls-orange); color: var(--mu-ls-white); border: none; cursor: pointer; text-transform: uppercase; transition: background 0.2s; }
.mu-ls .cta-submit:hover { background: #ff6620; }
.mu-ls .cta-note { font-size: 12px; color: var(--mu-ls-dim); margin-top: 14px; position: relative; z-index: 2; }

.mu-ls .footer { border-top: 1px solid rgba(255,255,255,0.06); padding: 40px 60px; display: flex; align-items: center; justify-content: space-between; }
.mu-ls .footer-logo { font-family: var(--mu-ls-display); font-size: 20px; letter-spacing: 0.08em; }
.mu-ls .footer-logo span { color: var(--mu-ls-orange); }
.mu-ls .footer-links { display: flex; gap: 32px; }
.mu-ls .footer-link { font-size: 12px; color: var(--mu-ls-dim); cursor: pointer; transition: color 0.2s; }
.mu-ls .footer-link:hover { color: var(--mu-ls-white); }
.mu-ls .footer-copy { font-size: 12px; color: var(--mu-ls-dim); }

@media (max-width: 900px) {
  .mu-ls .topnav { padding: 0 24px; }
  .mu-ls .nav-links { display: none; }
  .mu-ls .hero { grid-template-columns: 1fr; }
  .mu-ls .hero-left, .mu-ls .hero-right { padding: 48px 24px; border-right: none; }
  .mu-ls .stats-strip { grid-template-columns: 1fr 1fr; }
  .mu-ls .stat-block { padding: 28px 24px; }
  .mu-ls .features-section { padding: 64px 24px; }
  .mu-ls .features-header { grid-template-columns: 1fr; gap: 24px; }
  .mu-ls .features-grid { grid-template-columns: 1fr; }
  .mu-ls .cta-section { padding: 64px 24px; }
  .mu-ls .footer { padding: 24px; flex-direction: column; gap: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .mu-ls .hero-grid, .mu-ls .hero-glow, .mu-ls .hero-headline, .mu-ls .hero-sub, .mu-ls .hero-actions, .mu-ls .hero-social-proof, .mu-ls .float-card { animation: none !important; }
}
```

**JS:**
```js
(() => {
  // Scoped landing-page animations. Rebuilds the mock bars + animated
  // counter targeting scoped attributes inside .mu-ls only, and stores
  // its intervals on the wrapper so a second instance of the demo
  // doesn't double-fire timers.
  const root = document.querySelector('.mu-ls');
  if (!root) return;
  const bars = root.querySelector('[data-mu-ls-bars]');
  const counter = root.querySelector('[data-mu-ls-counter]');
  if (!bars || !counter || bars.childElementCount > 0) return;

  const barData = [30, 50, 40, 70, 55, 90, 65, 80, 45, 75, 60, 95];
  barData.forEach((h, i) => {
    const b = document.createElement('div');
    b.className = 'mock-bar' + (i === 11 ? ' active' : '');
    b.style.height = h + '%';
    b.style.transition = 'height 0.5s ease';
    bars.appendChild(b);
  });

  let count = 12840;
  const counterTimer = setInterval(() => {
    count += Math.floor(Math.random() * 40 - 10);
    counter.textContent = count.toLocaleString();
  }, 800);

  const animTimer = setInterval(() => {
    bars.querySelectorAll('.mock-bar').forEach(b => {
      const h = 20 + Math.random() * 75;
      b.style.height = h + '%';
    });
  }, 2000);

  // Stash timers on the wrapper so an external lifecycle (e.g. a
  // gallery re-mount) can stop them if needed.
  root._muLsTimers = [counterTimer, animTimer];
})();
```

---
## 16 CSS Mobile Navigation Patterns

URL: https://codefronts.com/navigation/css-mobile-navigation/
Description: 16 hand-coded CSS mobile navigation patterns covering every production mobile-nav use case in 2026 — hamburger slide-out drawer, full-screen overlay menu, iOS-style bottom tab bar (Apple Human Interface Guidelines), morphing hamburger-to-X animation, radial fan menu, swipe-gesture sidebar (Facebook Messenger pattern), FAB speed dial navigation, tab bar with sliding indicator pill, mega-menu accordion, glassmorphism nav drawer, cyberpunk neon menu, minimal dot navigation, breadcrumb collapse for deep hierarchies, split-screen navigation, command-palette search (Cmd+K pattern), and neumorphic bottom navigation. 13 demos are 100% pure CSS using <code>:checked</code> state machines — drop into any stack with zero JS dependencies; 3 use ~40-60 lines of vanilla JavaScript for swipe gestures, dot-scrolling, and command-palette filtering. All ship 44×44px tap targets (WCAG 2.5.5), <code>aria-current="page"</code> on active links, <code>aria-expanded</code> on toggles, respect <code>prefers-reduced-motion</code>, scoped <code>.mn-NN__*</code> class names so multiple navs coexist without style bleed, MIT-licensed. Drop into React, Vue, Astro, Svelte, Rails, plain HTML.
Demo count: 16

### 01. Hamburger Slide-Out Drawer

**Type:** Pure CSS
**Description:** A dark slide-out nav drawer toggled by a Pure CSS checkbox. The hamburger icon morphs into an X via CSS transforms, while the drawer slides in over a click-to-close overlay.

**HTML:**
```html
<div class="mn-01">
  <input type="checkbox" id="mn-01-toggle">
  <label class="mn-01__hamburger" for="mn-01-toggle">
    <span></span><span></span><span></span>
  </label>
  <label class="mn-01__overlay" for="mn-01-toggle"></label>
  <nav class="mn-01__drawer">
    <div class="mn-01__drawer-header">
      <div class="mn-01__avatar">👤</div>
      <h3>Alex Mercer</h3>
      <p>alex@example.com</p>
    </div>
    <div class="mn-01__nav">
      <div class="mn-01__section-label">Main</div>
      <a href="#" class="is-active"><span class="mn-01__nav-icon">🏠</span> Dashboard</a>
      <a href="#"><span class="mn-01__nav-icon">📊</span> Analytics</a>
      <a href="#"><span class="mn-01__nav-icon">💬</span> Messages</a>
      <a href="#"><span class="mn-01__nav-icon">📁</span> Projects</a>
      <div class="mn-01__section-label">Account</div>
      <a href="#"><span class="mn-01__nav-icon">⚙️</span> Settings</a>
      <a href="#"><span class="mn-01__nav-icon">🔔</span> Notifications</a>
      <a href="#"><span class="mn-01__nav-icon">🚪</span> Sign Out</a>
    </div>
  </nav>
  <div class="mn-01__page">
    <div class="mn-01__topbar">
      <span class="mn-01__topbar-title">Dashboard</span>
    </div>
    <div class="mn-01__content">
      <div class="mn-01__card">
        <div class="mn-01__pill">New</div>
        <h4>Q4 Revenue Report</h4>
        <p>Your analytics are up 24% this quarter. Tap to view the full breakdown.</p>
      </div>
      <div class="mn-01__card">
        <h4>Recent Activity</h4>
        <p>3 new messages and 2 pending approvals waiting for your review.</p>
      </div>
      <div class="mn-01__card">
        <h4>Active Projects</h4>
        <p>5 projects in progress — 2 due this week.</p>
      </div>
    </div>
  </div>
</div>
```

**CSS:**
```css
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
body { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: #0f0f13; font-family: 'Segoe UI', sans-serif; }

.mn-01 {
  --bg: #1a1a2e;
  --drawer: #16213e;
  --accent: #e94560;
  --text: #eaeaea;
  --muted: #8892a4;
  --overlay: rgba(0,0,0,0.6);
  width: 375px;
  height: 667px;
  position: relative;
  overflow: hidden;
  background: var(--bg);
  border-radius: 32px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6);
}

/* Hidden checkbox toggle */
.mn-01 #mn-01-toggle { display: none; }

/* Overlay */
.mn-01__overlay {
  position: absolute;
  inset: 0;
  background: var(--overlay);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
  z-index: 10;
}
.mn-01 #mn-01-toggle:checked ~ .mn-01__overlay {
  opacity: 1;
  pointer-events: all;
}

/* Drawer */
.mn-01__drawer {
  position: absolute;
  top: 0;
  left: 0;
  width: 280px;
  height: 100%;
  background: var(--drawer);
  transform: translateX(-100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 20;
  display: flex;
  flex-direction: column;
  padding: 0;
}
.mn-01 #mn-01-toggle:checked ~ .mn-01__overlay ~ .mn-01__drawer {
  transform: translateX(0);
}

.mn-01__drawer-header {
  padding: 48px 24px 24px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.mn-01__avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), #f5a623);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin-bottom: 12px;
}
.mn-01__drawer-header h3 {
  color: var(--text);
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 2px;
}
.mn-01__drawer-header p {
  color: var(--muted);
  font-size: 13px;
}

.mn-01__nav {
  flex: 1;
  padding: 16px 0;
  overflow-y: auto;
}
.mn-01__nav a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 24px;
  color: var(--muted);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  transition: all 0.2s;
  position: relative;
}
.mn-01__nav a:hover, .mn-01__nav a.is-active {
  color: var(--text);
  background: rgba(233,69,96,0.08);
}
.mn-01__nav a.is-active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 60%;
  background: var(--accent);
  border-radius: 0 4px 4px 0;
}
.mn-01__nav-icon {
  width: 20px;
  text-align: center;
  font-size: 17px;
}
.mn-01__section-label {
  padding: 16px 24px 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(136,146,164,0.5);
}

/* Hamburger button */
.mn-01__hamburger {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 30;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(255,255,255,0.06);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: background 0.2s;
}
.mn-01__hamburger:hover { background: rgba(255,255,255,0.1); }
.mn-01__hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: center;
}
.mn-01 #mn-01-toggle:checked ~ .mn-01__hamburger span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.mn-01 #mn-01-toggle:checked ~ .mn-01__hamburger span:nth-child(2) {
  opacity: 0; transform: scaleX(0);
}
.mn-01 #mn-01-toggle:checked ~ .mn-01__hamburger span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Main page content */
.mn-01__page {
  position: absolute;
  inset: 0;
  padding: 72px 20px 20px;
}
.mn-01__topbar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 60px;
}
.mn-01__topbar-title {
  color: var(--text);
  font-size: 17px;
  font-weight: 600;
}
.mn-01__content {
  margin-top: 16px;
}
.mn-01__card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 12px;
}
.mn-01__card h4 {
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 6px;
}
.mn-01__card p {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}
.mn-01__pill {
  display: inline-block;
  background: rgba(233,69,96,0.15);
  color: var(--accent);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 20px;
  margin-bottom: 8px;
}

@media (prefers-reduced-motion: reduce) {
  .mn-01__drawer, .mn-01__overlay, .mn-01__hamburger span { transition: none; }
}
```

### 02. Full-Screen Overlay Navigation

**Type:** Pure CSS
**Description:** An editorial full-screen nav that expands via a circular clip-path reveal from the top-right corner. Menu links stagger in with a slide-up entrance driven entirely by CSS sibling selectors.

**HTML:**
```html
<div class="mn-02">
  <input type="checkbox" id="mn-02-toggle">
  <label class="mn-02__btn" for="mn-02-toggle">
    <div class="mn-02__btn-lines">
      <span></span><span></span><span></span>
    </div>
  </label>
  <div class="mn-02__overlay">
    <span class="mn-02__overlay-label">Navigation</span>
    <ul class="mn-02__overlay-links">
      <li><a href="#"><span class="num">01</span> Work</a></li>
      <li><a href="#"><span class="num">02</span> About</a></li>
      <li><a href="#"><span class="num">03</span> Services</a></li>
      <li><a href="#"><span class="num">04</span> Journal</a></li>
      <li><a href="#"><span class="num">05</span> Contact</a></li>
    </ul>
    <div class="mn-02__overlay-footer">
      <a href="#">Twitter</a>
      <a href="#">Instagram</a>
      <a href="#">Dribbble</a>
    </div>
  </div>
  <div class="mn-02__page">
    <div class="mn-02__header">
      <div class="mn-02__logo">Studio<span>.</span></div>
    </div>
    <div class="mn-02__hero">
      <div class="mn-02__eyebrow">Creative Agency</div>
      <h1>We craft digital experiences</h1>
      <p>Award-winning design studio specializing in brand identity and digital products.</p>
      <a href="#" class="mn-02__cta">View Our Work →</a>
    </div>
  </div>
</div>
```

**CSS:**
```css
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
body { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: #0f0f13; font-family: 'Segoe UI', sans-serif; }

.mn-02 {
  --bg: #f7f3ee;
  --overlay-bg: #1c1917;
  --accent: #d97706;
  --text-dark: #1c1917;
  --text-light: #f7f3ee;
  --muted: #78716c;
  width: 375px;
  height: 667px;
  position: relative;
  overflow: hidden;
  background: var(--bg);
  border-radius: 32px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6);
}

.mn-02 #mn-02-toggle { display: none; }

/* Overlay panel */
.mn-02__overlay {
  position: absolute;
  inset: 0;
  background: var(--overlay-bg);
  z-index: 20;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px 36px;
  clip-path: circle(0% at calc(100% - 36px) 36px);
  transition: clip-path 0.6s cubic-bezier(0.77, 0, 0.175, 1);
}
.mn-02 #mn-02-toggle:checked ~ .mn-02__overlay {
  clip-path: circle(150% at calc(100% - 36px) 36px);
}

.mn-02__overlay-links {
  list-style: none;
  margin-top: 40px;
}
.mn-02__overlay-links li {
  overflow: hidden;
  margin-bottom: 4px;
}
.mn-02__overlay-links a {
  display: flex;
  align-items: baseline;
  gap: 16px;
  color: var(--text-light);
  text-decoration: none;
  font-size: 38px;
  font-weight: 700;
  letter-spacing: -1px;
  line-height: 1.2;
  padding: 8px 0;
  transition: color 0.2s;
  transform: translateY(100%);
  opacity: 0;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s, color 0.2s;
}
.mn-02__overlay-links a:hover { color: var(--accent); }
.mn-02__overlay-links a .num {
  font-size: 13px;
  font-weight: 400;
  color: var(--muted);
  letter-spacing: 0;
  min-width: 28px;
}
.mn-02 #mn-02-toggle:checked ~ .mn-02__overlay .mn-02__overlay-links a {
  transform: translateY(0);
  opacity: 1;
}
.mn-02 #mn-02-toggle:checked ~ .mn-02__overlay .mn-02__overlay-links li:nth-child(1) a { transition-delay: 0.15s; }
.mn-02 #mn-02-toggle:checked ~ .mn-02__overlay .mn-02__overlay-links li:nth-child(2) a { transition-delay: 0.22s; }
.mn-02 #mn-02-toggle:checked ~ .mn-02__overlay .mn-02__overlay-links li:nth-child(3) a { transition-delay: 0.29s; }
.mn-02 #mn-02-toggle:checked ~ .mn-02__overlay .mn-02__overlay-links li:nth-child(4) a { transition-delay: 0.36s; }
.mn-02 #mn-02-toggle:checked ~ .mn-02__overlay .mn-02__overlay-links li:nth-child(5) a { transition-delay: 0.43s; }

.mn-02__overlay-footer {
  margin-top: 48px;
  display: flex;
  gap: 24px;
}
.mn-02__overlay-footer a {
  color: var(--muted);
  text-decoration: none;
  font-size: 13px;
  transition: color 0.2s;
}
.mn-02__overlay-footer a:hover { color: var(--text-light); }

/* Close / hamburger button */
.mn-02__btn {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 30;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--overlay-bg);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mn-02 #mn-02-toggle:checked ~ .mn-02__btn {
  background: rgba(255,255,255,0.1);
}
.mn-02__btn-lines {
  width: 22px;
  height: 14px;
  position: relative;
}
.mn-02__btn-lines span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: center;
}
.mn-02__btn-lines span:nth-child(1) { top: 0; }
.mn-02__btn-lines span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.mn-02__btn-lines span:nth-child(3) { bottom: 0; }
.mn-02 #mn-02-toggle:checked ~ .mn-02__btn .mn-02__btn-lines span:nth-child(1) { top: 50%; transform: translateY(-50%) rotate(45deg); }
.mn-02 #mn-02-toggle:checked ~ .mn-02__btn .mn-02__btn-lines span:nth-child(2) { opacity: 0; }
.mn-02 #mn-02-toggle:checked ~ .mn-02__btn .mn-02__btn-lines span:nth-child(3) { bottom: 50%; transform: translateY(50%) rotate(-45deg); }

.mn-02__overlay-label { color: rgba(255,255,255,0.3); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; }

/* Page */
.mn-02__page {
  padding: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.mn-02__header {
  padding: 24px 20px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.mn-02__logo {
  font-size: 20px;
  font-weight: 800;
  color: var(--text-dark);
  letter-spacing: -0.5px;
}
.mn-02__logo span { color: var(--accent); }
.mn-02__hero {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 32px 24px;
}
.mn-02__eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
}
.mn-02__hero h1 {
  font-size: 38px;
  font-weight: 800;
  color: var(--text-dark);
  letter-spacing: -1.5px;
  line-height: 1.1;
  margin-bottom: 16px;
}
.mn-02__hero p {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.7;
  max-width: 280px;
}
.mn-02__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  background: var(--text-dark);
  color: var(--text-light);
  font-size: 14px;
  font-weight: 600;
  padding: 12px 24px;
  border-radius: 100px;
  text-decoration: none;
  width: fit-content;
}

@media (prefers-reduced-motion: reduce) {
  .mn-02__overlay, .mn-02__overlay-links a, .mn-02__btn-lines span { transition: none; }
}
```

### 03. iOS-Style Bottom Tab Bar

**Type:** Pure CSS
**Description:** An iOS-inspired bottom navigation bar with four tab pages driven by radio inputs. Pages transition with a fade-scale effect and the tab bar uses backdrop-filter frosted glass.

**HTML:**
```html
<div class="mn-03">
  <input type="radio" name="mn-03-tab" id="mn-03-home" checked>
  <input type="radio" name="mn-03-tab" id="mn-03-search">
  <input type="radio" name="mn-03-tab" id="mn-03-alerts">
  <input type="radio" name="mn-03-tab" id="mn-03-profile">

  <div class="mn-03__status">
    <span class="mn-03__status-time">9:41</span>
    <div class="mn-03__status-icons">
      <span>▲</span><span>WiFi</span><span>🔋</span>
    </div>
  </div>

  <div class="mn-03__pages">
    <div class="mn-03__page" data-page="home">
      <div class="mn-03__page-header"><h2>Home</h2></div>
      <div class="mn-03__section-card">
        <div class="mn-03__row">
          <div class="mn-03__row-icon" style="background:#e8f5e9"><span>📈</span></div>
          <div class="mn-03__row-text"><h4>Portfolio Value</h4><p>+2.4% today</p></div>
          <span class="mn-03__row-chevron">›</span>
        </div>
        <div class="mn-03__row">
          <div class="mn-03__row-icon" style="background:#e3f2fd"><span>💳</span></div>
          <div class="mn-03__row-text"><h4>Spending</h4><p>$342 this week</p></div>
          <span class="mn-03__row-chevron">›</span>
        </div>
        <div class="mn-03__row">
          <div class="mn-03__row-icon" style="background:#fce4ec"><span>🎯</span></div>
          <div class="mn-03__row-text"><h4>Savings Goal</h4><p>68% complete</p></div>
          <span class="mn-03__row-chevron">›</span>
        </div>
      </div>
    </div>

    <div class="mn-03__page" data-page="search">
      <div class="mn-03__page-header"><h2>Search</h2></div>
      <div class="mn-03__search-bar">
        <span>🔍</span><p>Search transactions, people...</p>
      </div>
      <div class="mn-03__section-card">
        <div class="mn-03__row">
          <div class="mn-03__row-icon" style="background:#fff3e0"><span>🛒</span></div>
          <div class="mn-03__row-text"><h4>Groceries</h4><p>Yesterday</p></div>
          <span style="font-size:13px;color:#1c1c1e;">-$48</span>
        </div>
        <div class="mn-03__row">
          <div class="mn-03__row-icon" style="background:#e8f5e9"><span>💸</span></div>
          <div class="mn-03__row-text"><h4>Transfer received</h4><p>2 days ago</p></div>
          <span style="font-size:13px;color:#34c759;">+$200</span>
        </div>
      </div>
    </div>

    <div class="mn-03__page" data-page="alerts">
      <div class="mn-03__page-header"><h2>Notifications</h2></div>
      <div class="mn-03__section-card">
        <div class="mn-03__row">
          <div class="mn-03__row-icon" style="background:#fff3e0"><span>⚠️</span></div>
          <div class="mn-03__row-text"><h4>Unusual spend detected</h4><p>$340 at Electronics Hub</p></div>
        </div>
        <div class="mn-03__row">
          <div class="mn-03__row-icon" style="background:#e8f5e9"><span>✅</span></div>
          <div class="mn-03__row-text"><h4>Payment cleared</h4><p>Rent payment confirmed</p></div>
        </div>
      </div>
    </div>

    <div class="mn-03__page" data-page="profile">
      <div class="mn-03__profile-header">
        <div class="mn-03__profile-avatar">👤</div>
        <h3>Jordan Blake</h3>
        <p>Premium Member</p>
      </div>
      <div class="mn-03__section-card">
        <div class="mn-03__row">
          <div class="mn-03__row-icon" style="background:#f3e5f5"><span>🔒</span></div>
          <div class="mn-03__row-text"><h4>Security</h4></div>
          <span class="mn-03__row-chevron">›</span>
        </div>
        <div class="mn-03__row">
          <div class="mn-03__row-icon" style="background:#e3f2fd"><span>🔔</span></div>
          <div class="mn-03__row-text"><h4>Notifications</h4></div>
          <span class="mn-03__row-chevron">›</span>
        </div>
      </div>
    </div>
  </div>

  <div class="mn-03__tabbar">
    <label for="mn-03-home" class="mn-03__tab">
      <div class="mn-03__tab-icon">🏠</div>
      <span class="mn-03__tab-label">Home</span>
    </label>
    <label for="mn-03-search" class="mn-03__tab">
      <div class="mn-03__tab-icon">🔍</div>
      <span class="mn-03__tab-label">Search</span>
    </label>
    <label for="mn-03-alerts" class="mn-03__tab" style="position:relative">
      <div class="mn-03__tab-icon">🔔</div>
      <span class="mn-03__tab-label">Alerts</span>
    </label>
    <label for="mn-03-profile" class="mn-03__tab">
      <div class="mn-03__tab-icon">👤</div>
      <span class="mn-03__tab-label">Profile</span>
    </label>
  </div>
</div>
```

**CSS:**
```css
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
body { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: #0f0f13; font-family: -apple-system, 'SF Pro Display', 'Segoe UI', sans-serif; }

.mn-03 {
  --bg: #f2f2f7;
  --card: #ffffff;
  --accent: #007aff;
  --accent2: #34c759;
  --accent3: #ff9500;
  --accent4: #af52de;
  --accent5: #ff2d55;
  --text: #1c1c1e;
  --muted: #8e8e93;
  --tab-bg: #ffffff;
  --tab-border: rgba(0,0,0,0.1);
  width: 375px;
  height: 667px;
  position: relative;
  overflow: hidden;
  background: var(--bg);
  border-radius: 32px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.5);
}

.mn-03 input[type="radio"] { display: none; }

/* Status bar */
.mn-03__status {
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  background: var(--card);
}
.mn-03__status-time { font-size: 15px; font-weight: 600; color: var(--text); }
.mn-03__status-icons { display: flex; gap: 6px; align-items: center; font-size: 12px; color: var(--text); }

/* Page area */
.mn-03__pages { position: absolute; top: 44px; left: 0; right: 0; bottom: 83px; }
.mn-03__page {
  position: absolute;
  inset: 0;
  padding: 20px 16px;
  opacity: 0;
  pointer-events: none;
  transform: scale(0.97);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#mn-03-home:checked ~ .mn-03__pages .mn-03__page[data-page="home"],
#mn-03-search:checked ~ .mn-03__pages .mn-03__page[data-page="search"],
#mn-03-alerts:checked ~ .mn-03__pages .mn-03__page[data-page="alerts"],
#mn-03-profile:checked ~ .mn-03__pages .mn-03__page[data-page="profile"] {
  opacity: 1;
  pointer-events: all;
  transform: scale(1);
}

/* Page header */
.mn-03__page-header {
  margin-bottom: 20px;
}
.mn-03__page-header h2 {
  font-size: 28px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.5px;
}

/* Cards */
.mn-03__section-card {
  background: var(--card);
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 12px;
}
.mn-03__row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(0,0,0,0.05);
}
.mn-03__row:last-child { border-bottom: none; }
.mn-03__row-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.mn-03__row-text { flex: 1; }
.mn-03__row-text h4 { font-size: 14px; font-weight: 500; color: var(--text); }
.mn-03__row-text p { font-size: 12px; color: var(--muted); }
.mn-03__row-chevron { color: var(--muted); font-size: 12px; }

/* Search page */
.mn-03__search-bar {
  background: var(--card);
  border-radius: 12px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}
.mn-03__search-bar span { color: var(--muted); }
.mn-03__search-bar p { color: var(--muted); font-size: 15px; }

/* Alerts badge */
.mn-03__badge {
  background: #ff3b30;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}

/* Bottom Tab Bar */
.mn-03__tabbar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 83px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--tab-border);
  display: flex;
  align-items: flex-start;
  padding-top: 8px;
  z-index: 10;
}
.mn-03__tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  padding: 4px 0;
}
.mn-03__tab-icon {
  font-size: 24px;
  line-height: 1;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.mn-03__tab-label {
  font-size: 10px;
  font-weight: 500;
  color: var(--muted);
  transition: color 0.2s;
}

#mn-03-home:checked ~ .mn-03__tabbar label[for="mn-03-home"] .mn-03__tab-label,
#mn-03-search:checked ~ .mn-03__tabbar label[for="mn-03-search"] .mn-03__tab-label,
#mn-03-alerts:checked ~ .mn-03__tabbar label[for="mn-03-alerts"] .mn-03__tab-label,
#mn-03-profile:checked ~ .mn-03__tabbar label[for="mn-03-profile"] .mn-03__tab-label {
  color: var(--accent);
}
#mn-03-home:checked ~ .mn-03__tabbar label[for="mn-03-home"] .mn-03__tab-icon,
#mn-03-search:checked ~ .mn-03__tabbar label[for="mn-03-search"] .mn-03__tab-icon,
#mn-03-alerts:checked ~ .mn-03__tabbar label[for="mn-03-alerts"] .mn-03__tab-icon,
#mn-03-profile:checked ~ .mn-03__tabbar label[for="mn-03-profile"] .mn-03__tab-icon {
  transform: scale(1.1);
}

/* Profile page */
.mn-03__profile-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 0 24px;
  background: var(--card);
  border-radius: 16px;
  margin-bottom: 12px;
}
.mn-03__profile-avatar {
  width: 72px; height: 72px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent4));
  display: flex; align-items: center; justify-content: center;
  font-size: 30px; margin-bottom: 12px;
}
.mn-03__profile-header h3 { font-size: 18px; font-weight: 600; color: var(--text); }
.mn-03__profile-header p { font-size: 13px; color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  .mn-03__page, .mn-03__tab-icon, .mn-03__tab-label { transition: none; }
}
```

### 04. Morphing Hamburger to X

**Type:** Pure CSS
**Description:** A GitHub-dark-inspired top navigation bar where the hamburger icon morphs cleanly into a close X via CSS transforms. The dropdown menu slides down from beneath the nav with a smooth cubic-bezier easing.

**HTML:**
```html
<div class="mn-04">
  <input type="checkbox" id="mn-04-toggle">
  <div class="mn-04__topbar">
    <div class="mn-04__logo">
      <div class="mn-04__logo-mark">⬡</div>
      <span class="mn-04__logo-text">DevHub</span>
    </div>
    <label for="mn-04-toggle" class="mn-04__btn">
      <span class="mn-04__btn-bar"></span>
      <span class="mn-04__btn-bar"></span>
      <span class="mn-04__btn-bar"></span>
    </label>
  </div>

  <nav class="mn-04__menu">
    <div class="mn-04__menu-inner">
      <div class="mn-04__menu-section">Explore</div>
      <a href="#" class="mn-04__menu-item is-active">
        <span class="mn-04__menu-item-icon">🏠</span> Dashboard
      </a>
      <a href="#" class="mn-04__menu-item">
        <span class="mn-04__menu-item-icon">📦</span> Repositories
        <span class="mn-04__menu-item-badge">12</span>
      </a>
      <a href="#" class="mn-04__menu-item">
        <span class="mn-04__menu-item-icon">🔀</span> Pull Requests
        <span class="mn-04__menu-item-badge">3</span>
      </a>
      <a href="#" class="mn-04__menu-item">
        <span class="mn-04__menu-item-icon">🐛</span> Issues
      </a>
      <div class="mn-04__menu-divider"></div>
      <div class="mn-04__menu-section">Account</div>
      <a href="#" class="mn-04__menu-item">
        <span class="mn-04__menu-item-icon">👤</span> Profile
      </a>
      <a href="#" class="mn-04__menu-item">
        <span class="mn-04__menu-item-icon">⚙️</span> Settings
      </a>
    </div>
  </nav>

  <div class="mn-04__content">
    <div class="mn-04__greeting">
      <p>Good morning 👋</p>
      <h2>Welcome back, Dev</h2>
    </div>

    <div class="mn-04__repo">
      <div class="mn-04__repo-header">
        <div class="mn-04__repo-name">ui-components</div>
      </div>
      <div class="mn-04__repo-desc">A collection of production-ready React components built with TypeScript.</div>
      <div class="mn-04__repo-meta">
        <span><div class="mn-04__dot" style="background:#3fb950"></div> TypeScript</span>
        <span>⭐ 842</span>
        <span>🍴 124</span>
      </div>
    </div>

    <div class="mn-04__repo">
      <div class="mn-04__repo-header">
        <div class="mn-04__repo-name">api-gateway</div>
      </div>
      <div class="mn-04__repo-desc">High-performance API gateway with rate limiting and auth middleware.</div>
      <div class="mn-04__repo-meta">
        <span><div class="mn-04__dot" style="background:#58a6ff"></div> Go</span>
        <span>⭐ 231</span>
        <span>🍴 48</span>
      </div>
    </div>

    <div class="mn-04__repo">
      <div class="mn-04__repo-header">
        <div class="mn-04__repo-name">css-animations</div>
      </div>
      <div class="mn-04__repo-desc">60+ CSS animation demos with no dependencies required.</div>
      <div class="mn-04__repo-meta">
        <span><div class="mn-04__dot" style="background:#e34c26"></div> CSS</span>
        <span>⭐ 1.2k</span>
        <span>🍴 307</span>
      </div>
    </div>
  </div>
</div>
```

**CSS:**
```css
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
body { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: #0f0f13; font-family: 'Segoe UI', sans-serif; }

.mn-04 {
  --bg: #0d1117;
  --surface: #161b22;
  --border: #30363d;
  --accent: #58a6ff;
  --accent2: #3fb950;
  --text: #c9d1d9;
  --muted: #8b949e;
  width: 375px;
  height: 667px;
  position: relative;
  overflow: hidden;
  background: var(--bg);
  border-radius: 32px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.7);
  color: var(--text);
}

.mn-04 #mn-04-toggle { display: none; }

/* Top bar */
.mn-04__topbar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  z-index: 5;
}
.mn-04__logo {
  display: flex;
  align-items: center;
  gap: 8px;
}
.mn-04__logo-mark {
  width: 28px; height: 28px;
  background: var(--accent);
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
}
.mn-04__logo-text {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.3px;
}

/* Morphing hamburger button */
.mn-04__btn {
  width: 36px; height: 36px;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mn-04__btn-bar {
  position: absolute;
  width: 24px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  transform-origin: center;
}
.mn-04__btn-bar:nth-child(1) { transform: translateY(-7px); width: 16px; right: 6px; }
.mn-04__btn-bar:nth-child(2) { transform: translateY(0px); }
.mn-04__btn-bar:nth-child(3) { transform: translateY(7px); width: 20px; right: 6px; }

.mn-04 #mn-04-toggle:checked ~ .mn-04__topbar .mn-04__btn-bar:nth-child(1) {
  transform: translateY(0) rotate(45deg);
  width: 24px;
  right: 6px;
}
.mn-04 #mn-04-toggle:checked ~ .mn-04__topbar .mn-04__btn-bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0) translateY(0);
}
.mn-04 #mn-04-toggle:checked ~ .mn-04__topbar .mn-04__btn-bar:nth-child(3) {
  transform: translateY(0) rotate(-45deg);
  width: 24px;
  right: 6px;
}

/* Menu panel — drops from top */
.mn-04__menu {
  position: absolute;
  top: 60px; left: 0; right: 0;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  z-index: 4;
  transform: translateY(-100%);
  opacity: 0;
  transition: transform 0.45s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.3s;
  pointer-events: none;
}
.mn-04 #mn-04-toggle:checked ~ .mn-04__menu {
  transform: translateY(0);
  opacity: 1;
  pointer-events: all;
}
.mn-04__menu-inner { padding: 8px 0 16px; }
.mn-04__menu-section {
  padding: 12px 20px 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
}
.mn-04__menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  font-size: 14px;
  color: var(--text);
  cursor: pointer;
  transition: background 0.15s;
  text-decoration: none;
}
.mn-04__menu-item:hover { background: rgba(88,166,255,0.06); }
.mn-04__menu-item.is-active { color: var(--accent); }
.mn-04__menu-item-icon {
  width: 18px;
  text-align: center;
  font-size: 15px;
}
.mn-04__menu-item-badge {
  margin-left: auto;
  background: var(--accent);
  color: var(--bg);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
}
.mn-04__menu-divider {
  height: 1px;
  background: var(--border);
  margin: 8px 20px;
}

/* Page content */
.mn-04__content {
  position: absolute;
  top: 60px; left: 0; right: 0; bottom: 0;
  padding: 24px 20px;
  overflow-y: auto;
}
.mn-04__greeting {
  margin-bottom: 24px;
}
.mn-04__greeting p { color: var(--muted); font-size: 13px; margin-bottom: 4px; }
.mn-04__greeting h2 { font-size: 22px; font-weight: 700; color: var(--text); letter-spacing: -0.5px; }

.mn-04__repo {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 10px;
  transition: border-color 0.2s;
}
.mn-04__repo:hover { border-color: var(--accent); }
.mn-04__repo-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.mn-04__repo-name { font-size: 14px; font-weight: 600; color: var(--accent); }
.mn-04__repo-desc { font-size: 12px; color: var(--muted); line-height: 1.5; margin-bottom: 10px; }
.mn-04__repo-meta { display: flex; gap: 14px; }
.mn-04__repo-meta span { font-size: 11px; color: var(--muted); display: flex; align-items: center; gap: 4px; }
.mn-04__dot { width: 10px; height: 10px; border-radius: 50%; }

@media (prefers-reduced-motion: reduce) {
  .mn-04__btn-bar, .mn-04__menu { transition: none; }
}
```

### 05. Radial Fan Menu

**Type:** Pure CSS
**Description:** A floating action button that rotates 45° on activation and fans out five labelled radial action items in a bottom-right arc, each with a staggered spring entrance via CSS cubic-bezier.

**HTML:**
```html
<div class="mn-05">
  <input type="checkbox" id="mn-05-toggle">
  <div class="mn-05__overlay"></div>

  <div class="mn-05__page">
    <div class="mn-05__header">
      <div class="mn-05__logo">Spark<span>AI</span></div>
    </div>
    <div class="mn-05__hero-text">
      <h2>Your creative workspace</h2>
      <p>Generate, edit, and share stunning visuals with AI-powered tools.</p>
    </div>
    <div class="mn-05__stat-row">
      <div class="mn-05__stat">
        <div class="mn-05__stat-val">248</div>
        <div class="mn-05__stat-label">Creations</div>
      </div>
      <div class="mn-05__stat">
        <div class="mn-05__stat-val">12k</div>
        <div class="mn-05__stat-label">Views</div>
      </div>
      <div class="mn-05__stat">
        <div class="mn-05__stat-val">94</div>
        <div class="mn-05__stat-label">Likes</div>
      </div>
    </div>
  </div>

  <div class="mn-05__radial-items">
    <div class="mn-05__radial-item">
      <div class="mn-05__radial-btn" style="background:var(--accent3)">🖼️</div>
      <span class="mn-05__radial-label">Gallery</span>
    </div>
    <div class="mn-05__radial-item">
      <div class="mn-05__radial-btn" style="background:var(--accent4)">✏️</div>
      <span class="mn-05__radial-label">Edit</span>
    </div>
    <div class="mn-05__radial-item">
      <div class="mn-05__radial-btn" style="background:var(--accent5)">📤</div>
      <span class="mn-05__radial-label">Share</span>
    </div>
    <div class="mn-05__radial-item">
      <div class="mn-05__radial-btn" style="background:var(--accent2)">⭐</div>
      <span class="mn-05__radial-label">Favorites</span>
    </div>
    <div class="mn-05__radial-item">
      <div class="mn-05__radial-btn" style="background:#0ea5e9">⚙️</div>
      <span class="mn-05__radial-label">Settings</span>
    </div>
  </div>

  <label for="mn-05-toggle" class="mn-05__fab">
    <span class="mn-05__fab-icon">+</span>
  </label>
</div>
```

**CSS:**
```css
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
body { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: #0f0f13; font-family: 'Segoe UI', sans-serif; }

.mn-05 {
  --bg: #0f172a;
  --surface: #1e293b;
  --accent: #6366f1;
  --accent2: #ec4899;
  --accent3: #14b8a6;
  --accent4: #f59e0b;
  --accent5: #22c55e;
  --text: #f1f5f9;
  --muted: #64748b;
  width: 375px;
  height: 667px;
  position: relative;
  overflow: hidden;
  background: var(--bg);
  border-radius: 32px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.7);
}

.mn-05 #mn-05-toggle { display: none; }

/* Background overlay */
.mn-05__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
  z-index: 5;
}
.mn-05 #mn-05-toggle:checked ~ .mn-05__overlay {
  opacity: 1;
  pointer-events: all;
}

/* Page content */
.mn-05__page {
  position: absolute;
  inset: 0;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
}
.mn-05__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 32px;
}
.mn-05__logo {
  font-size: 22px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.5px;
}
.mn-05__logo span { color: var(--accent); }

.mn-05__hero-text {
  margin-bottom: 24px;
}
.mn-05__hero-text h2 {
  font-size: 28px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.7px;
  line-height: 1.2;
  margin-bottom: 8px;
}
.mn-05__hero-text p { color: var(--muted); font-size: 14px; line-height: 1.6; }

.mn-05__stat-row {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
}
.mn-05__stat {
  flex: 1;
  background: var(--surface);
  border-radius: 14px;
  padding: 16px;
  border: 1px solid rgba(255,255,255,0.06);
}
.mn-05__stat-val { font-size: 22px; font-weight: 700; color: var(--text); }
.mn-05__stat-label { font-size: 11px; color: var(--muted); margin-top: 2px; }

/* FAB button */
.mn-05__fab {
  position: absolute;
  bottom: 28px;
  right: 24px;
  z-index: 20;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 32px rgba(99,102,241,0.5);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s;
}
.mn-05__fab:hover { transform: scale(1.08); }
.mn-05 #mn-05-toggle:checked ~ .mn-05__fab {
  background: var(--accent2);
  transform: rotate(45deg);
}
.mn-05__fab-icon {
  font-size: 22px;
  color: #fff;
  transition: transform 0.3s;
  line-height: 1;
}

/* Radial items */
.mn-05__radial-item {
  position: absolute;
  z-index: 15;
  display: flex;
  /* row-reverse: label sits to the LEFT of the btn. The btn is on
     the right edge of the item (anchored to the right:Npx arc
     position), and the label extends LEFTWARD into the empty page
     area instead of stacking vertically below the btn — that fixes
     the label/adjacent-btn overlap when buttons sit close on the
     vertical part of the arc. */
  flex-direction: row-reverse;
  align-items: center;
  gap: 8px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.mn-05__radial-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
.mn-05__radial-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text);
  background: rgba(0,0,0,0.6);
  padding: 2px 7px;
  border-radius: 20px;
  white-space: nowrap;
}

/* Items positioned on a 140px arc fanning out from the FAB center.
   FAB at bottom:28 right:24 (58x58) so FAB center is at bottom:57
   right:53. Item buttons are 48x48 → subtract 24 to center btn on
   the arc. Result:
     right  = 53 + 140*sin(θ) - 24 = 29 + 140*sin(θ)
     bottom = 57 + 140*cos(θ) - 24 = 33 + 140*cos(θ)
   Five items spread across 10°-85° with NON-LINEAR angle distribution
   (10°, 32°, 50°, 68°, 85°) so vertical spacing between adjacent items
   increases progressively along the arc — the top items where cos
   changes slowly get larger angular jumps to avoid label overlap.
   Source-order matches visual order: Gallery near top, Settings near
   left. */
.mn-05__radial-item:nth-child(1) { bottom: 171px; right:  53px; transform: translateY(20px) scale(0.7); } /* 10° Gallery   */
.mn-05__radial-item:nth-child(2) { bottom: 152px; right: 103px; transform: translateY(20px) scale(0.7); } /* 32° Edit      */
.mn-05__radial-item:nth-child(3) { bottom: 123px; right: 136px; transform: translateY(20px) scale(0.7); } /* 50° Share     */
.mn-05__radial-item:nth-child(4) { bottom:  86px; right: 159px; transform: translateY(20px) scale(0.7); } /* 68° Favorites */
.mn-05__radial-item:nth-child(5) { bottom:  45px; right: 168px; transform: translateY(20px) scale(0.7); } /* 85° Settings  */

.mn-05 #mn-05-toggle:checked ~ .mn-05__radial-items .mn-05__radial-item {
  opacity: 1;
  pointer-events: all;
}
.mn-05 #mn-05-toggle:checked ~ .mn-05__radial-items .mn-05__radial-item:nth-child(1) { transform: translateY(0) scale(1); transition-delay: 0.03s; }
.mn-05 #mn-05-toggle:checked ~ .mn-05__radial-items .mn-05__radial-item:nth-child(2) { transform: translateY(0) scale(1); transition-delay: 0.08s; }
.mn-05 #mn-05-toggle:checked ~ .mn-05__radial-items .mn-05__radial-item:nth-child(3) { transform: translateY(0) scale(1); transition-delay: 0.13s; }
.mn-05 #mn-05-toggle:checked ~ .mn-05__radial-items .mn-05__radial-item:nth-child(4) { transform: translateY(0) scale(1); transition-delay: 0.18s; }
.mn-05 #mn-05-toggle:checked ~ .mn-05__radial-items .mn-05__radial-item:nth-child(5) { transform: translateY(0) scale(1); transition-delay: 0.23s; }

@media (prefers-reduced-motion: reduce) {
  .mn-05__fab, .mn-05__radial-item, .mn-05__overlay { transition: none; }
}
```

### 06. Swipe Gesture Sidebar

**Type:** CSS + JS
**Description:** A sidebar navigation that responds to edge-swipe touch gestures with real drag tracking, velocity-based dismiss, and a page push parallax effect — built with a small vanilla JS touch handler and CSS transitions.

**HTML:**
```html
<div class="mn-06" id="mn-06-root">
  <div class="mn-06__hint"></div>
  <div class="mn-06__overlay" id="mn-06-overlay"></div>

  <nav class="mn-06__sidebar" id="mn-06-sidebar">
    <div class="mn-06__sidebar-header">
      <div class="mn-06__user-pill">
        <div class="mn-06__avatar">🎨</div>
        <div class="mn-06__user-info">
          <h4>Casey Rivera</h4>
          <p>Pro Designer</p>
        </div>
      </div>
    </div>
    <div class="mn-06__sidebar-nav">
      <div class="mn-06__nav-label">Workspace</div>
      <a class="mn-06__nav-item is-active">🎨 Canvas</a>
      <a class="mn-06__nav-item">📐 Wireframes</a>
      <a class="mn-06__nav-item">🎬 Prototypes</a>
      <a class="mn-06__nav-item">📦 Assets</a>
      <div class="mn-06__nav-label">Team</div>
      <a class="mn-06__nav-item">👥 Members</a>
      <a class="mn-06__nav-item">💬 Comments</a>
      <div class="mn-06__nav-label">Account</div>
      <a class="mn-06__nav-item">⚙️ Settings</a>
    </div>
  </nav>

  <div class="mn-06__page">
    <div class="mn-06__topbar">
      <div class="mn-06__menu-btn" id="mn-06-menu-btn">
        <span></span><span></span><span></span>
      </div>
      <span class="mn-06__page-title">Canvas</span>
      <div style="width:40px"></div>
    </div>
    <div class="mn-06__swipe-hint-text">
      <strong>← Swipe right</strong> from the left edge<br>or tap the menu button<br>to open the sidebar
    </div>
    <div class="mn-06__card">
      <div class="mn-06__card-accent" style="background: linear-gradient(90deg, var(--accent), var(--accent2))"></div>
      <h4>Brand Identity Project</h4>
      <p>Updated 2 hours ago · 14 layers</p>
    </div>
    <div class="mn-06__card">
      <div class="mn-06__card-accent" style="background: #14b8a6"></div>
      <h4>App Redesign</h4>
      <p>Updated yesterday · 38 layers</p>
    </div>
  </div>

  <div class="mn-06__edge-zone" id="mn-06-edge"></div>
</div>

```

**CSS:**
```css
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
body { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: #0f0f13; font-family: 'Segoe UI', sans-serif; }

.mn-06 {
  --bg: #18181b;
  --surface: #27272a;
  --border: #3f3f46;
  --accent: #a78bfa;
  --accent2: #f472b6;
  --text: #fafafa;
  --muted: #71717a;
  width: 375px;
  height: 667px;
  position: relative;
  overflow: hidden;
  background: var(--bg);
  border-radius: 32px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.7);
  touch-action: pan-y;
  user-select: none;
}

/* Overlay */
.mn-06__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0);
  z-index: 10;
  pointer-events: none;
  transition: background 0.3s;
}
.mn-06.is-open .mn-06__overlay {
  background: rgba(0,0,0,0.55);
  pointer-events: all;
}

/* Sidebar */
.mn-06__sidebar {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 280px;
  background: var(--surface);
  transform: translateX(-100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 20;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  will-change: transform;
}
.mn-06.is-open .mn-06__sidebar { transform: translateX(0); }
.mn-06__sidebar.is-dragging { transition: none; }

/* Edge hit zone */
.mn-06__edge-zone {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 20px;
  z-index: 25;
  cursor: ew-resize;
}

.mn-06__sidebar-header {
  padding: 40px 20px 20px;
  background: linear-gradient(135deg, rgba(167,139,250,0.15), rgba(244,114,182,0.08));
  border-bottom: 1px solid var(--border);
}
.mn-06__user-pill {
  display: flex;
  align-items: center;
  gap: 12px;
}
.mn-06__avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.mn-06__user-info h4 { font-size: 15px; font-weight: 600; color: var(--text); }
.mn-06__user-info p { font-size: 12px; color: var(--muted); }

.mn-06__sidebar-nav { flex: 1; padding: 12px 0; }
.mn-06__nav-label {
  padding: 12px 20px 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(113,113,122,0.6);
}
.mn-06__nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  color: var(--muted);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.15s;
  border-radius: 0;
  cursor: pointer;
}
.mn-06__nav-item:hover, .mn-06__nav-item.is-active {
  color: var(--text);
  background: rgba(167,139,250,0.1);
}
.mn-06__nav-item.is-active { color: var(--accent); }

/* Swipe hint */
.mn-06__hint {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 48px;
  background: linear-gradient(to bottom, var(--accent), var(--accent2));
  border-radius: 0 4px 4px 0;
  opacity: 0.5;
  animation: mn-06-pulse 2s ease-in-out infinite;
}
.mn-06.is-open .mn-06__hint { opacity: 0; }

@keyframes mn-06-pulse {
  0%, 100% { opacity: 0.2; transform: translateY(-50%) scaleY(0.8); }
  50% { opacity: 0.6; transform: translateY(-50%) scaleY(1); }
}

/* Page content */
.mn-06__page {
  position: absolute;
  inset: 0;
  padding: 20px;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}
.mn-06.is-open .mn-06__page { transform: translateX(60px); }

.mn-06__topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
}
.mn-06__menu-btn {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--surface);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 4px;
  cursor: pointer;
  border: 1px solid var(--border);
}
.mn-06__menu-btn span {
  width: 18px; height: 2px;
  background: var(--text);
  border-radius: 2px;
}
.mn-06__page-title { font-size: 18px; font-weight: 700; color: var(--text); }

.mn-06__swipe-hint-text {
  text-align: center;
  margin-top: 40px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.8;
}
.mn-06__swipe-hint-text strong { color: var(--accent); }

.mn-06__card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 12px;
}
.mn-06__card h4 { font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.mn-06__card p { font-size: 13px; color: var(--muted); line-height: 1.5; }
.mn-06__card-accent { width: 32px; height: 3px; border-radius: 2px; margin-bottom: 10px; }

@media (prefers-reduced-motion: reduce) {
  .mn-06__sidebar, .mn-06__page, .mn-06__overlay, .mn-06__hint { transition: none; animation: none; }
}
```

**JS:**
```js
(function() {
  const root = document.getElementById('mn-06-root');
  const sidebar = document.getElementById('mn-06-sidebar');
  const overlay = document.getElementById('mn-06-overlay');
  const menuBtn = document.getElementById('mn-06-menu-btn');
  const edge = document.getElementById('mn-06-edge');
  const SIDEBAR_W = 280;

  let startX = 0, startY = 0, currentX = 0, isDragging = false, isOpen = false;

  function open() { isOpen = true; root.classList.add('is-open'); }
  function close() { isOpen = false; root.classList.remove('is-open'); sidebar.style.transform = ''; sidebar.classList.remove('is-dragging'); }

  menuBtn.addEventListener('click', () => isOpen ? close() : open());
  overlay.addEventListener('click', close);

  function onTouchStart(e) {
    startX = e.touches[0].clientX;
    startY = e.touches[0].clientY;
    isDragging = false;
  }

  function onTouchMove(e) {
    const dx = e.touches[0].clientX - startX;
    const dy = e.touches[0].clientY - startY;
    if (!isDragging && Math.abs(dy) > Math.abs(dx)) return;
    if (!isDragging && Math.abs(dx) < 8) return;
    isDragging = true;

    const rect = root.getBoundingClientRect();
    currentX = e.touches[0].clientX - rect.left;

    if (!isOpen && currentX > SIDEBAR_W + 20) return;
    if (isOpen) {
      const offset = Math.min(0, currentX - startX);
      if (offset < 0) {
        sidebar.classList.add('is-dragging');
        sidebar.style.transform = `translateX(${offset}px)`;
      }
    } else {
      const offset = Math.min(SIDEBAR_W, Math.max(0, currentX));
      sidebar.classList.add('is-dragging');
      sidebar.style.transform = `translateX(${offset - SIDEBAR_W}px)`;
    }
  }

  function onTouchEnd(e) {
    if (!isDragging) return;
    sidebar.classList.remove('is-dragging');
    sidebar.style.transform = '';
    const dx = e.changedTouches[0].clientX - startX;
    if (!isOpen && dx > 60) open();
    else if (isOpen && dx < -60) close();
    isDragging = false;
  }

  root.addEventListener('touchstart', onTouchStart, { passive: true });
  root.addEventListener('touchmove', onTouchMove, { passive: true });
  root.addEventListener('touchend', onTouchEnd);
})();
```

### 07. FAB Speed Dial Navigation

**Type:** Pure CSS
**Description:** A map-style UI with a floating action button that expands into a vertical speed-dial stack of four labelled action items, each with a spring entrance. The FAB morphs from a rounded square to a circle and rotates 45°.

**HTML:**
```html
<div class="mn-07">
  <input type="checkbox" id="mn-07-toggle">
  <label class="mn-07__scrim" for="mn-07-toggle"></label>

  <div class="mn-07__map">
    <div class="mn-07__map-road"></div>
    <div class="mn-07__map-road"></div>
    <div class="mn-07__map-road"></div>
    <div class="mn-07__map-road"></div>
    <div class="mn-07__map-road"></div>
    <div class="mn-07__map-pin">📍</div>
  </div>

  <div class="mn-07__search">
    <span>🔍</span>
    <p>Search places...</p>
  </div>

  <div class="mn-07__speed-items">
    <div class="mn-07__speed-item">
      <span class="mn-07__speed-label">Directions</span>
      <div class="mn-07__speed-btn" style="background:#3b82f6">🗺️</div>
    </div>
    <div class="mn-07__speed-item">
      <span class="mn-07__speed-label">Nearby</span>
      <div class="mn-07__speed-btn" style="background:#10b981">📌</div>
    </div>
    <div class="mn-07__speed-item">
      <span class="mn-07__speed-label">Save Location</span>
      <div class="mn-07__speed-btn" style="background:#f59e0b">⭐</div>
    </div>
    <div class="mn-07__speed-item">
      <span class="mn-07__speed-label">Share</span>
      <div class="mn-07__speed-btn" style="background:#8b5cf6">📤</div>
    </div>
  </div>

  <label for="mn-07-toggle" class="mn-07__fab">
    <span class="mn-07__fab-icon">+</span>
  </label>
</div>
```

**CSS:**
```css
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
body { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: #0f0f13; font-family: 'Segoe UI', sans-serif; }

.mn-07 {
  --bg: #fafaf9;
  --surface: #ffffff;
  --border: #e7e5e4;
  --accent: #dc2626;
  --text: #1c1917;
  --muted: #78716c;
  --shadow: rgba(0,0,0,0.12);
  width: 375px;
  height: 667px;
  position: relative;
  overflow: hidden;
  background: var(--bg);
  border-radius: 32px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.5);
}

.mn-07 #mn-07-toggle { display: none; }

/* Scrim */
.mn-07__scrim {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0);
  pointer-events: none;
  transition: background 0.3s;
  z-index: 5;
}
.mn-07 #mn-07-toggle:checked ~ .mn-07__scrim {
  background: rgba(0,0,0,0.2);
  pointer-events: all;
}

/* Map-style page */
.mn-07__map {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(250,250,249,0) 0%, rgba(250,250,249,0) 100%),
    repeating-linear-gradient(0deg, transparent, transparent 39px, rgba(0,0,0,0.05) 39px, rgba(0,0,0,0.05) 40px),
    repeating-linear-gradient(90deg, transparent, transparent 39px, rgba(0,0,0,0.05) 39px, rgba(0,0,0,0.05) 40px);
  background-color: #f5f0e8;
}
.mn-07__map-road {
  position: absolute;
  background: #fff;
  border-radius: 4px;
}
.mn-07__map-road:nth-child(1) { top: 120px; left: 0; right: 0; height: 18px; }
.mn-07__map-road:nth-child(2) { top: 0; bottom: 0; left: 140px; width: 18px; }
.mn-07__map-road:nth-child(3) { top: 280px; left: 0; right: 0; height: 10px; }
.mn-07__map-road:nth-child(4) { top: 0; bottom: 0; left: 60px; width: 10px; }
.mn-07__map-road:nth-child(5) { top: 0; bottom: 0; right: 80px; width: 10px; }
.mn-07__map-pin {
  position: absolute;
  top: 90px;
  left: 110px;
  font-size: 28px;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3));
  transform: translate(-50%, -100%);
  animation: mn-07-drop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes mn-07-drop {
  from { transform: translate(-50%, -160%) scale(0.5); opacity: 0; }
  to { transform: translate(-50%, -100%) scale(1); opacity: 1; }
}

/* Search bar */
.mn-07__search {
  position: absolute;
  top: 20px;
  left: 16px;
  right: 16px;
  background: var(--surface);
  border-radius: 28px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 4px 16px var(--shadow);
  z-index: 3;
}
.mn-07__search p { color: var(--muted); font-size: 14px; }

/* Speed dial items */
.mn-07__speed-item {
  position: absolute;
  right: 24px;
  z-index: 15;
  display: flex;
  align-items: center;
  gap: 12px;
  opacity: 0;
  pointer-events: none;
  transform: scale(0.6) translateY(20px);
  transition: opacity 0.25s, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.mn-07__speed-label {
  background: rgba(28,25,23,0.85);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 20px;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.mn-07__speed-btn {
  width: 48px; height: 48px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
  flex-shrink: 0;
}

/* Stacked upward from FAB at bottom: 100px */
.mn-07__speed-item:nth-child(1) { bottom: 104px; }
.mn-07__speed-item:nth-child(2) { bottom: 164px; }
.mn-07__speed-item:nth-child(3) { bottom: 224px; }
.mn-07__speed-item:nth-child(4) { bottom: 284px; }

.mn-07 #mn-07-toggle:checked ~ .mn-07__speed-items .mn-07__speed-item {
  opacity: 1; pointer-events: all;
}
.mn-07 #mn-07-toggle:checked ~ .mn-07__speed-items .mn-07__speed-item:nth-child(1) { transform: scale(1) translateY(0); transition-delay: 0s; }
.mn-07 #mn-07-toggle:checked ~ .mn-07__speed-items .mn-07__speed-item:nth-child(2) { transform: scale(1) translateY(0); transition-delay: 0.05s; }
.mn-07 #mn-07-toggle:checked ~ .mn-07__speed-items .mn-07__speed-item:nth-child(3) { transform: scale(1) translateY(0); transition-delay: 0.1s; }
.mn-07 #mn-07-toggle:checked ~ .mn-07__speed-items .mn-07__speed-item:nth-child(4) { transform: scale(1) translateY(0); transition-delay: 0.15s; }

/* FAB */
.mn-07__fab {
  position: absolute;
  bottom: 28px;
  right: 24px;
  z-index: 20;
  width: 56px; height: 56px;
  border-radius: 16px;
  background: var(--accent);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(220,38,38,0.45);
  transition: border-radius 0.3s, transform 0.2s;
}
.mn-07__fab:hover { transform: scale(1.05); }
.mn-07 #mn-07-toggle:checked ~ .mn-07__fab {
  border-radius: 50%;
  transform: rotate(45deg);
}
.mn-07__fab-icon { font-size: 22px; color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .mn-07__speed-item, .mn-07__fab, .mn-07__scrim, .mn-07__map-pin { transition: none; animation: none; }
}
```

### 08. Tab Bar with Sliding Indicator Pill

**Type:** Pure CSS
**Description:** A dark music-app tab bar with a smooth sliding pill indicator that transitions between four tabs, each with its own accent colour. Pages switch with a fade-slide animation, all driven by radio inputs.

**HTML:**
```html
<div class="mn-08">
  <input type="radio" name="mn-08-tab" id="mn-08-t1" checked>
  <input type="radio" name="mn-08-tab" id="mn-08-t2">
  <input type="radio" name="mn-08-tab" id="mn-08-t3">
  <input type="radio" name="mn-08-tab" id="mn-08-t4">

  <div class="mn-08__header">
    <div class="mn-08__logo">Wavify</div>
    <div class="mn-08__notif">🔔</div>
  </div>

  <div class="mn-08__tabs">
    <div class="mn-08__tab-pill"></div>
    <label for="mn-08-t1" class="mn-08__tab-label"><span>🎵</span>Music</label>
    <label for="mn-08-t2" class="mn-08__tab-label"><span>🎙️</span>Pods</label>
    <label for="mn-08-t3" class="mn-08__tab-label"><span>📻</span>Radio</label>
    <label for="mn-08-t4" class="mn-08__tab-label"><span>📚</span>Library</label>
  </div>

  <div class="mn-08__pages">
    <div class="mn-08__page" data-p="1">
      <div class="mn-08__section-title">Trending Now</div>
      <div class="mn-08__track">
        <div class="mn-08__track-art" style="background:linear-gradient(135deg,#22d3ee,#6366f1)">🎵</div>
        <div class="mn-08__track-info"><h4>Neon Lights</h4><p>Synthwave Collective · 3:42</p></div>
        <span class="mn-08__track-more">⋯</span>
      </div>
      <div class="mn-08__track">
        <div class="mn-08__track-art" style="background:linear-gradient(135deg,#fb923c,#f43f5e)">🎸</div>
        <div class="mn-08__track-info"><h4>Midnight Drive</h4><p>Neon Atlas · 4:18</p></div>
        <span class="mn-08__track-more">⋯</span>
      </div>
      <div class="mn-08__track">
        <div class="mn-08__track-art" style="background:linear-gradient(135deg,#a78bfa,#ec4899)">🎹</div>
        <div class="mn-08__track-info"><h4>Electric Dream</h4><p>Pixel Sound · 5:01</p></div>
        <span class="mn-08__track-more">⋯</span>
      </div>
    </div>

    <div class="mn-08__page" data-p="2">
      <div class="mn-08__section-title">Popular Podcasts</div>
      <div class="mn-08__grid">
        <div class="mn-08__grid-card"><div class="mn-08__grid-icon">🧠</div><h4>Deep Dives</h4><p>128 episodes</p></div>
        <div class="mn-08__grid-card"><div class="mn-08__grid-icon">💡</div><h4>Tech Talks</h4><p>84 episodes</p></div>
        <div class="mn-08__grid-card"><div class="mn-08__grid-icon">🌍</div><h4>World News</h4><p>312 episodes</p></div>
        <div class="mn-08__grid-card"><div class="mn-08__grid-icon">🎤</div><h4>Interviews</h4><p>56 episodes</p></div>
      </div>
    </div>

    <div class="mn-08__page" data-p="3">
      <div class="mn-08__section-title">Live Radio</div>
      <div class="mn-08__track">
        <div class="mn-08__track-art" style="background:linear-gradient(135deg,#a78bfa,#7c3aed)">📻</div>
        <div class="mn-08__track-info"><h4>Synthwave FM</h4><p>🔴 Live · 2.4k listeners</p></div>
        <span class="mn-08__track-more">▶</span>
      </div>
      <div class="mn-08__track">
        <div class="mn-08__track-art" style="background:linear-gradient(135deg,#4ade80,#16a34a)">🎶</div>
        <div class="mn-08__track-info"><h4>Chill Beats</h4><p>🔴 Live · 8.1k listeners</p></div>
        <span class="mn-08__track-more">▶</span>
      </div>
    </div>

    <div class="mn-08__page" data-p="4">
      <div class="mn-08__section-title">Your Library</div>
      <div class="mn-08__track">
        <div class="mn-08__track-art" style="background:linear-gradient(135deg,#4ade80,#06b6d4)">⭐</div>
        <div class="mn-08__track-info"><h4>Liked Songs</h4><p>248 tracks</p></div>
        <span class="mn-08__track-more">›</span>
      </div>
      <div class="mn-08__track">
        <div class="mn-08__track-art" style="background:linear-gradient(135deg,#f59e0b,#ef4444)">🎼</div>
        <div class="mn-08__track-info"><h4>My Playlists</h4><p>12 playlists</p></div>
        <span class="mn-08__track-more">›</span>
      </div>
    </div>
  </div>
</div>
```

**CSS:**
```css
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
body { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: #0f0f13; font-family: 'Segoe UI', sans-serif; }

.mn-08 {
  --bg: #09090b;
  --surface: #18181b;
  --border: #27272a;
  --accent: #22d3ee;
  --accent2: #fb923c;
  --accent3: #a78bfa;
  --accent4: #4ade80;
  --text: #fafafa;
  --muted: #71717a;
  width: 375px;
  height: 667px;
  position: relative;
  overflow: hidden;
  background: var(--bg);
  border-radius: 32px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.8);
}

.mn-08 input[type="radio"] { display: none; }

/* Header */
.mn-08__header {
  padding: 28px 20px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.mn-08__logo {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.5px;
  background: linear-gradient(90deg, var(--accent), var(--accent3));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.mn-08__notif {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  position: relative;
}
.mn-08__notif::after {
  content: '';
  position: absolute;
  top: 6px; right: 7px;
  width: 8px; height: 8px;
  background: #ef4444;
  border-radius: 50%;
  border: 2px solid var(--bg);
}

/* Tab pill nav */
.mn-08__tabs {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--surface);
  border-radius: 20px;
  margin: 20px 16px;
  padding: 4px;
  border: 1px solid var(--border);
}
.mn-08__tab-pill {
  position: absolute;
  height: calc(100% - 8px);
  border-radius: 16px;
  top: 4px;
  transition: left 0.35s cubic-bezier(0.4, 0, 0.2, 1), width 0.35s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s;
  pointer-events: none;
}

/* 4 tabs → each 25% */
#mn-08-t1:checked ~ .mn-08__tabs .mn-08__tab-pill {
  left: 4px; width: calc(25% - 2px); background: var(--accent);
}
#mn-08-t2:checked ~ .mn-08__tabs .mn-08__tab-pill {
  left: calc(25% + 2px); width: calc(25% - 2px); background: var(--accent2);
}
#mn-08-t3:checked ~ .mn-08__tabs .mn-08__tab-pill {
  left: calc(50% + 2px); width: calc(25% - 2px); background: var(--accent3);
}
#mn-08-t4:checked ~ .mn-08__tabs .mn-08__tab-pill {
  left: calc(75% + 2px); width: calc(25% - 4px); background: var(--accent4);
}

.mn-08__tab-label {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 8px 4px;
  cursor: pointer;
  z-index: 1;
  transition: color 0.25s;
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: 16px;
}
.mn-08__tab-label span { font-size: 18px; display: block; }

#mn-08-t1:checked ~ .mn-08__tabs label[for="mn-08-t1"],
#mn-08-t2:checked ~ .mn-08__tabs label[for="mn-08-t2"],
#mn-08-t3:checked ~ .mn-08__tabs label[for="mn-08-t3"],
#mn-08-t4:checked ~ .mn-08__tabs label[for="mn-08-t4"] {
  color: var(--bg);
}

/* Pages */
.mn-08__pages { position: absolute; top: 158px; left: 0; right: 0; bottom: 0; }
.mn-08__page {
  position: absolute;
  inset: 0;
  padding: 0 16px 16px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity 0.3s, transform 0.3s;
  overflow-y: auto;
}

#mn-08-t1:checked ~ .mn-08__pages .mn-08__page[data-p="1"],
#mn-08-t2:checked ~ .mn-08__pages .mn-08__page[data-p="2"],
#mn-08-t3:checked ~ .mn-08__pages .mn-08__page[data-p="3"],
#mn-08-t4:checked ~ .mn-08__pages .mn-08__page[data-p="4"] {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
}

.mn-08__section-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.4px;
  margin-bottom: 16px;
}
.mn-08__track {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 10px;
}
.mn-08__track-art {
  width: 48px; height: 48px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}
.mn-08__track-info h4 { font-size: 14px; font-weight: 600; color: var(--text); }
.mn-08__track-info p { font-size: 12px; color: var(--muted); }
.mn-08__track-more { margin-left: auto; color: var(--muted); font-size: 18px; cursor: pointer; }

/* Podcast / video cards */
.mn-08__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mn-08__grid-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mn-08__grid-icon { font-size: 28px; }
.mn-08__grid-card h4 { font-size: 13px; font-weight: 600; color: var(--text); }
.mn-08__grid-card p { font-size: 11px; color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  .mn-08__tab-pill, .mn-08__page { transition: none; }
}
```

### 09. Mega Menu Accordion

**Type:** Pure CSS
**Description:** A light-mode mobile nav where a hamburger toggles a full-height drawer containing three accordion sections. Sections expand via max-height transitions with animated chevrons, all driven by Pure CSS checkboxes.

**HTML:**
```html
<div class="mn-09">
  <input type="checkbox" id="mn-09-main">
  <input type="checkbox" id="mn-09-a1" class="mn-09__acc-check">
  <input type="checkbox" id="mn-09-a2" class="mn-09__acc-check">
  <input type="checkbox" id="mn-09-a3" class="mn-09__acc-check">

  <div class="mn-09__topbar">
    <div class="mn-09__logo">Green<span>Co</span></div>
    <label for="mn-09-main" class="mn-09__nav-toggle">
      <div class="mn-09__nav-toggle-bars">
        <span></span><span></span><span></span>
      </div>
      Menu
    </label>
  </div>

  <nav class="mn-09__nav-drawer">
    <div class="mn-09__acc-item">
      <label for="mn-09-a1" class="mn-09__acc-label">
        <div class="mn-09__acc-label-left">
          <div class="mn-09__acc-icon" style="background:rgba(5,150,105,0.1)">🌿</div>
          Products
        </div>
        <div class="mn-09__acc-chevron">▼</div>
      </label>
      <div class="mn-09__acc-body">
        <div class="mn-09__sub-links">
          <a href="#">Organic Skincare <span class="mn-09__sub-badge">New</span></a>
          <a href="#">Supplements</a>
          <a href="#">Home & Garden</a>
          <a href="#">Food & Beverages</a>
        </div>
      </div>
    </div>

    <div class="mn-09__acc-item">
      <label for="mn-09-a2" class="mn-09__acc-label">
        <div class="mn-09__acc-label-left">
          <div class="mn-09__acc-icon" style="background:rgba(8,145,178,0.1)">📚</div>
          Resources
        </div>
        <div class="mn-09__acc-chevron">▼</div>
      </label>
      <div class="mn-09__acc-body">
        <div class="mn-09__sub-links">
          <a href="#">Blog & Articles</a>
          <a href="#">Sustainability Guide</a>
          <a href="#">Community</a>
        </div>
        <div class="mn-09__acc-promo">
          <span style="font-size:24px">🌱</span>
          <p>Join <strong>12,000+</strong> readers — free newsletter every week.</p>
        </div>
      </div>
    </div>

    <div class="mn-09__acc-item">
      <label for="mn-09-a3" class="mn-09__acc-label">
        <div class="mn-09__acc-label-left">
          <div class="mn-09__acc-icon" style="background:rgba(124,58,237,0.1)">🏢</div>
          Company
        </div>
        <div class="mn-09__acc-chevron">▼</div>
      </label>
      <div class="mn-09__acc-body">
        <div class="mn-09__sub-links">
          <a href="#">About Us</a>
          <a href="#">Careers <span class="mn-09__sub-badge">Hiring</span></a>
          <a href="#">Press</a>
          <a href="#">Contact</a>
        </div>
      </div>
    </div>

    <div class="mn-09__nav-footer">
      <a href="#">Sign In</a>
      <a href="#">Get Started →</a>
    </div>
  </nav>

  <div class="mn-09__page">
    <h2>Sustainable Living</h2>
    <p>Eco-friendly products for a greener lifestyle.</p>
    <div class="mn-09__feature-grid">
      <div class="mn-09__feature">
        <div class="mn-09__feature-icon">♻️</div>
        <h4>100% Recycled</h4>
        <p>All packaging uses post-consumer materials.</p>
      </div>
      <div class="mn-09__feature">
        <div class="mn-09__feature-icon">🌍</div>
        <h4>Carbon Neutral</h4>
        <p>Certified carbon-neutral shipping worldwide.</p>
      </div>
      <div class="mn-09__feature">
        <div class="mn-09__feature-icon">🌿</div>
        <h4>Organic</h4>
        <p>USDA certified organic ingredients only.</p>
      </div>
      <div class="mn-09__feature">
        <div class="mn-09__feature-icon">🐰</div>
        <h4>Cruelty-Free</h4>
        <p>Never tested on animals. Leaping Bunny certified.</p>
      </div>
    </div>
  </div>
</div>
```

**CSS:**
```css
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
body { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: #0f0f13; font-family: 'Segoe UI', sans-serif; }

.mn-09 {
  --bg: #ffffff;
  --surface: #f9fafb;
  --border: #e5e7eb;
  --accent: #059669;
  --accent2: #0891b2;
  --accent3: #7c3aed;
  --text: #111827;
  --muted: #6b7280;
  width: 375px;
  height: 667px;
  position: relative;
  overflow: hidden;
  background: var(--bg);
  border-radius: 32px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.5);
  display: flex;
  flex-direction: column;
}

.mn-09 input[type="checkbox"], .mn-09 input[type="radio"] { display: none; }

/* Top bar */
.mn-09__topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  z-index: 10;
  flex-shrink: 0;
}
.mn-09__logo {
  font-size: 18px;
  font-weight: 800;
  color: var(--text);
}
.mn-09__logo span { color: var(--accent); }
.mn-09__nav-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 20px;
  transition: background 0.2s;
}
.mn-09__nav-toggle:hover { background: var(--surface); }
.mn-09__nav-toggle-bars {
  width: 16px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.mn-09__nav-toggle-bars span {
  display: block;
  height: 2px;
  background: var(--text);
  border-radius: 1px;
  transition: all 0.3s;
}
.mn-09__nav-toggle-bars span:nth-child(2) { width: 12px; }
#mn-09-main:checked ~ .mn-09__topbar .mn-09__nav-toggle .mn-09__nav-toggle-bars span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
#mn-09-main:checked ~ .mn-09__topbar .mn-09__nav-toggle .mn-09__nav-toggle-bars span:nth-child(2) { opacity: 0; }
#mn-09-main:checked ~ .mn-09__topbar .mn-09__nav-toggle .mn-09__nav-toggle-bars span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); width: 16px; }

/* Full nav drawer */
.mn-09__nav-drawer {
  position: absolute;
  top: 57px;
  left: 0; right: 0; bottom: 0;
  background: var(--bg);
  z-index: 9;
  transform: translateY(-100%);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
}
#mn-09-main:checked ~ .mn-09__nav-drawer { transform: translateY(0); }

/* Accordion items */
.mn-09__acc-item { border-bottom: 1px solid var(--border); }
.mn-09__acc-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  gap: 8px;
}
.mn-09__acc-label-left {
  display: flex; align-items: center; gap: 12px;
}
.mn-09__acc-icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px;
}
.mn-09__acc-chevron {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--surface);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px;
  transition: transform 0.3s;
  color: var(--muted);
}
.mn-09__acc-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  background: var(--surface);
}
.mn-09__acc-check:checked ~ .mn-09__acc-item .mn-09__acc-body { max-height: 300px; }
.mn-09__acc-check:checked ~ .mn-09__acc-item .mn-09__acc-chevron { transform: rotate(180deg); }

.mn-09__sub-links { padding: 8px 0 16px 60px; }
.mn-09__sub-links a {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 20px 10px 0;
  color: var(--muted);
  text-decoration: none;
  font-size: 14px;
  transition: color 0.15s;
  border-bottom: 1px solid rgba(0,0,0,0.04);
}
.mn-09__sub-links a:last-child { border-bottom: none; }
.mn-09__sub-links a:hover { color: var(--text); }
.mn-09__sub-badge {
  margin-left: auto;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 10px;
  background: rgba(5,150,105,0.12);
  color: var(--accent);
}

/* Promo strip in accordion */
.mn-09__acc-promo {
  margin: 0 16px 16px;
  padding: 14px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(5,150,105,0.08), rgba(8,145,178,0.08));
  border: 1px solid rgba(5,150,105,0.2);
  display: flex; align-items: center; gap: 12px;
}
.mn-09__acc-promo p { font-size: 13px; color: var(--text); line-height: 1.4; }
.mn-09__acc-promo strong { font-weight: 700; color: var(--accent); }

/* Nav footer */
.mn-09__nav-footer {
  padding: 20px;
  display: flex; gap: 10px;
}
.mn-09__nav-footer a {
  flex: 1;
  text-align: center;
  padding: 12px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}
.mn-09__nav-footer a:first-child { background: var(--surface); color: var(--text); border: 1px solid var(--border); }
.mn-09__nav-footer a:last-child { background: var(--accent); color: #fff; }

/* Page content */
.mn-09__page { flex: 1; padding: 20px; overflow-y: auto; }
.mn-09__page h2 { font-size: 22px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.mn-09__page p { color: var(--muted); font-size: 13px; margin-bottom: 20px; }
.mn-09__feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mn-09__feature {
  background: var(--surface);
  border-radius: 14px;
  padding: 16px;
  border: 1px solid var(--border);
}
.mn-09__feature-icon { font-size: 24px; margin-bottom: 8px; }
.mn-09__feature h4 { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
.mn-09__feature p { font-size: 11px; color: var(--muted); line-height: 1.4; margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  .mn-09__nav-drawer, .mn-09__acc-body, .mn-09__acc-chevron, .mn-09__nav-toggle-bars span { transition: none; }
}
```

### 10. Glass Morphism Nav Drawer

**Type:** Pure CSS
**Description:** A sidebar drawer with heavy backdrop-filter glass styling over continuously animated gradient blobs. Features a frosted glass avatar, gradient-tinted nav links, and an upgrade card — all Pure CSS.

**HTML:**
```html
<div class="mn-10">
  <div class="mn-10__bg">
    <div class="mn-10__blob"></div>
    <div class="mn-10__blob"></div>
    <div class="mn-10__blob"></div>
  </div>
  <input type="checkbox" id="mn-10-toggle">
  <div class="mn-10__topbar">
    <div class="mn-10__logo">Aura<span>UI</span></div>
    <label for="mn-10-toggle" class="mn-10__btn">
      <span></span><span></span><span></span>
    </label>
  </div>
  <label class="mn-10__overlay" for="mn-10-toggle"></label>
  <nav class="mn-10__drawer">
    <div class="mn-10__drawer-top">
      <div class="mn-10__glass-avatar">✨</div>
      <h3>Morgan Lee</h3>
      <p>morglee@studio.io</p>
    </div>
    <div class="mn-10__drawer-nav">
      <div class="mn-10__nav-section">Workspace</div>
      <a class="mn-10__nav-link is-active"><span class="mn-10__nav-link-icon">🏠</span> Dashboard</a>
      <a class="mn-10__nav-link"><span class="mn-10__nav-link-icon">🎨</span> Design <span class="mn-10__nav-link-badge">3</span></a>
      <a class="mn-10__nav-link"><span class="mn-10__nav-link-icon">📊</span> Analytics</a>
      <a class="mn-10__nav-link"><span class="mn-10__nav-link-icon">🔗</span> Integrations</a>
      <div class="mn-10__nav-section">Account</div>
      <a class="mn-10__nav-link"><span class="mn-10__nav-link-icon">👤</span> Profile</a>
      <a class="mn-10__nav-link"><span class="mn-10__nav-link-icon">⚙️</span> Settings</a>
    </div>
    <div class="mn-10__upgrade">
      <h4>Upgrade to Pro ✨</h4>
      <p>Unlock unlimited projects, advanced analytics, and priority support.</p>
      <a href="#" class="mn-10__upgrade-btn">Upgrade Now</a>
    </div>
  </nav>
  <div class="mn-10__page">
    <div class="mn-10__welcome">Good evening ✨</div>
    <div class="mn-10__sub">Here's your workspace overview</div>
    <div class="mn-10__glass-card">
      <div class="mn-10__card-accent-bar" style="background:linear-gradient(90deg,#a78bfa,#38bdf8)"></div>
      <h4>Active Projects</h4>
      <p>8 projects running — 3 due this week</p>
    </div>
    <div class="mn-10__glass-card">
      <div class="mn-10__card-accent-bar" style="background:linear-gradient(90deg,#f472b6,#fb923c)"></div>
      <h4>Recent Designs</h4>
      <p>Landing page refresh updated 20 min ago</p>
    </div>
    <div class="mn-10__glass-card">
      <div class="mn-10__card-accent-bar" style="background:linear-gradient(90deg,#4ade80,#06b6d4)"></div>
      <h4>Team Activity</h4>
      <p>4 collaborators online right now</p>
    </div>
  </div>
</div>
```

**CSS:**
```css
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
body { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: #0f0f13; font-family: 'Segoe UI', sans-serif; }

.mn-10 {
  width: 375px;
  height: 667px;
  position: relative;
  overflow: hidden;
  border-radius: 32px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.7);
}

/* Background gradient blobs */
.mn-10__bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #1a0533 0%, #0a0a2a 50%, #001a33 100%);
  z-index: 0;
}
.mn-10__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.6;
}
.mn-10__blob:nth-child(1) {
  width: 250px; height: 250px;
  top: -80px; left: -60px;
  background: radial-gradient(circle, #7c3aed, transparent 70%);
  animation: mn-10-blob1 8s ease-in-out infinite;
}
.mn-10__blob:nth-child(2) {
  width: 200px; height: 200px;
  bottom: -40px; right: -40px;
  background: radial-gradient(circle, #0ea5e9, transparent 70%);
  animation: mn-10-blob2 10s ease-in-out infinite;
}
.mn-10__blob:nth-child(3) {
  width: 150px; height: 150px;
  top: 50%; left: 60%;
  background: radial-gradient(circle, #ec4899, transparent 70%);
  animation: mn-10-blob3 12s ease-in-out infinite;
}

@keyframes mn-10-blob1 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(30px,30px)} }
@keyframes mn-10-blob2 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-20px,-20px)} }
@keyframes mn-10-blob3 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-15px,10px) scale(1.2)} }

.mn-10 #mn-10-toggle { display: none; }

/* Topbar */
.mn-10__topbar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  z-index: 10;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.mn-10__logo {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.3px;
}
.mn-10__logo span {
  background: linear-gradient(90deg, #a78bfa, #38bdf8);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

/* Hamburger */
.mn-10__btn {
  width: 40px; height: 40px;
  border-radius: 12px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.15);
  cursor: pointer;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 5px;
}
.mn-10__btn span {
  width: 18px; height: 2px;
  background: rgba(255,255,255,0.9);
  border-radius: 2px;
  transition: all 0.35s cubic-bezier(0.4,0,0.2,1);
  transform-origin: center;
}
.mn-10 #mn-10-toggle:checked ~ .mn-10__topbar .mn-10__btn span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mn-10 #mn-10-toggle:checked ~ .mn-10__topbar .mn-10__btn span:nth-child(2) { opacity: 0; }
.mn-10 #mn-10-toggle:checked ~ .mn-10__topbar .mn-10__btn span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Overlay */
.mn-10__overlay {
  position: absolute;
  inset: 0;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  background: rgba(0,0,0,0.3);
  z-index: 15;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s;
}
.mn-10 #mn-10-toggle:checked ~ .mn-10__overlay {
  opacity: 1;
  pointer-events: all;
}

/* Glass drawer */
.mn-10__drawer {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 285px;
  background: rgba(255,255,255,0.07);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-right: 1px solid rgba(255,255,255,0.12);
  z-index: 20;
  transform: translateX(-100%);
  transition: transform 0.4s cubic-bezier(0.4,0,0.2,1);
  display: flex;
  flex-direction: column;
}
.mn-10 #mn-10-toggle:checked ~ .mn-10__overlay ~ .mn-10__drawer {
  transform: translateX(0);
}

.mn-10__drawer-top {
  padding: 80px 24px 24px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.mn-10__glass-avatar {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(167,139,250,0.5), rgba(56,189,248,0.5));
  border: 2px solid rgba(255,255,255,0.3);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
  margin-bottom: 14px;
  backdrop-filter: blur(10px);
}
.mn-10__drawer-top h3 {
  color: rgba(255,255,255,0.95);
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 2px;
}
.mn-10__drawer-top p { color: rgba(255,255,255,0.45); font-size: 13px; }

.mn-10__drawer-nav { flex: 1; padding: 12px 0; overflow-y: auto; }
.mn-10__nav-section { padding: 12px 24px 4px; font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,0.25); }
.mn-10__nav-link {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 24px;
  color: rgba(255,255,255,0.65);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s;
  border-radius: 0;
}
.mn-10__nav-link:hover, .mn-10__nav-link.is-active {
  background: rgba(255,255,255,0.07);
  color: rgba(255,255,255,0.95);
}
.mn-10__nav-link.is-active { color: #a78bfa; }
.mn-10__nav-link-icon { width: 18px; text-align: center; font-size: 16px; }
.mn-10__nav-link-badge {
  margin-left: auto;
  background: rgba(167,139,250,0.2);
  color: #a78bfa;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
}

/* Glass upgrade card */
.mn-10__upgrade {
  margin: 12px 16px 24px;
  padding: 16px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(124,58,237,0.25), rgba(14,165,233,0.15));
  border: 1px solid rgba(167,139,250,0.3);
}
.mn-10__upgrade h4 { color: #fff; font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.mn-10__upgrade p { color: rgba(255,255,255,0.55); font-size: 11px; line-height: 1.5; margin-bottom: 10px; }
.mn-10__upgrade-btn {
  display: block; width: 100%;
  background: linear-gradient(90deg, #7c3aed, #0ea5e9);
  color: #fff;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  padding: 8px;
  border-radius: 8px;
  text-decoration: none;
}

/* Page */
.mn-10__page {
  position: absolute;
  top: 64px; inset-inline: 0; bottom: 0;
  padding: 24px 20px;
  z-index: 5;
  overflow-y: auto;
}
.mn-10__welcome { color: rgba(255,255,255,0.95); font-size: 24px; font-weight: 700; letter-spacing: -0.5px; margin-bottom: 8px; }
.mn-10__sub { color: rgba(255,255,255,0.45); font-size: 13px; margin-bottom: 24px; }

.mn-10__glass-card {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px;
  padding: 18px;
  margin-bottom: 12px;
  backdrop-filter: blur(8px);
}
.mn-10__glass-card h4 { color: rgba(255,255,255,0.9); font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.mn-10__glass-card p { color: rgba(255,255,255,0.45); font-size: 12px; line-height: 1.5; }
.mn-10__card-accent-bar { height: 3px; border-radius: 2px; margin-bottom: 12px; }

@media (prefers-reduced-motion: reduce) {
  .mn-10__blob { animation: none; }
  .mn-10__drawer, .mn-10__overlay, .mn-10__btn span { transition: none; }
}
```

### 11. Cyberpunk Neon Menu

**Type:** Pure CSS
**Description:** A full-screen cyberpunk navigation overlay with a scanline effect, CSS grid background, clip-path left-to-right reveal, and individually neon-coloured menu items that stagger in on activation.

**HTML:**
```html
<div class="mn-11">
  <div class="mn-11__grid"></div>
  <input type="checkbox" id="mn-11-toggle">
  <div class="mn-11__topbar">
    <div class="mn-11__logo">NEXUS</div>
    <label for="mn-11-toggle" class="mn-11__btn">
      <span></span><span></span><span></span>
    </label>
  </div>
  <div class="mn-11__menu">
    <div class="mn-11__menu-header">
      <div class="mn-11__menu-sys">SYS · <span>ONLINE</span></div>
      <label for="mn-11-toggle" class="mn-11__close">✕</label>
    </div>
    <ul class="mn-11__nav-list">
      <li><a href="#"><span class="num">01</span><span class="label">Missions</span><span class="arrow">→</span></a></li>
      <li><a href="#"><span class="num">02</span><span class="label">Arsenal</span><span class="arrow">→</span></a></li>
      <li><a href="#"><span class="num">03</span><span class="label">Intel</span><span class="arrow">→</span></a></li>
      <li><a href="#"><span class="num">04</span><span class="label">Network</span><span class="arrow">→</span></a></li>
      <li><a href="#"><span class="num">05</span><span class="label">Profile</span><span class="arrow">→</span></a></li>
    </ul>
    <div class="mn-11__menu-footer">Version 2.4.7 · <span>CLASSIFIED</span></div>
  </div>
  <div class="mn-11__page">
    <div class="mn-11__page-title">// System Status</div>
    <div class="mn-11__page-h1">Nexus Core</div>
    <div class="mn-11__neon-card">
      <h4>Active Missions</h4>
      <p>3 operations in progress — 1 critical priority</p>
    </div>
    <div class="mn-11__neon-card">
      <h4>Network Uplink</h4>
      <p>Encrypted tunnel established · Ping 12ms</p>
    </div>
    <div class="mn-11__neon-card">
      <h4>Agent Status</h4>
      <p>Identity verified · Clearance level ALPHA</p>
    </div>
  </div>
</div>
```

**CSS:**
```css
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
body { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: #0f0f13; font-family: 'Courier New', monospace; }

.mn-11 {
  --bg: #05010f;
  --surface: #0d0922;
  --cyan: #00f5ff;
  --magenta: #ff00a0;
  --yellow: #ffe600;
  --green: #00ff88;
  --text: #e0e0ff;
  --muted: #5a5a8a;
  width: 375px;
  height: 667px;
  position: relative;
  overflow: hidden;
  background: var(--bg);
  border-radius: 32px;
  box-shadow: 0 0 60px rgba(0,245,255,0.15), 0 30px 80px rgba(0,0,0,0.9);
}

/* Scanlines */
.mn-11::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.05) 2px, rgba(0,0,0,0.05) 4px);
  pointer-events: none;
  z-index: 1;
}

.mn-11 #mn-11-toggle { display: none; }

/* Grid lines */
.mn-11__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0,245,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,245,255,0.04) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* Top bar */
.mn-11__topbar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  z-index: 10;
  border-bottom: 1px solid rgba(0,245,255,0.15);
}
.mn-11__logo {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--cyan);
  text-shadow: 0 0 10px var(--cyan), 0 0 20px rgba(0,245,255,0.5);
  animation: mn-11-glow 3s ease-in-out infinite;
}
@keyframes mn-11-glow {
  0%, 100% { text-shadow: 0 0 8px var(--cyan), 0 0 16px rgba(0,245,255,0.4); }
  50% { text-shadow: 0 0 16px var(--cyan), 0 0 32px rgba(0,245,255,0.7); }
}

/* Neon hamburger */
.mn-11__btn {
  width: 40px; height: 40px;
  cursor: pointer;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 6px;
  border: 1px solid rgba(0,245,255,0.3);
  border-radius: 4px;
  background: rgba(0,245,255,0.04);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.mn-11__btn:hover {
  border-color: var(--cyan);
  box-shadow: 0 0 10px rgba(0,245,255,0.3) inset;
}
.mn-11__btn span {
  width: 20px; height: 1px;
  background: var(--cyan);
  box-shadow: 0 0 6px var(--cyan);
  transition: all 0.35s cubic-bezier(0.4,0,0.2,1);
  transform-origin: center;
}
.mn-11 #mn-11-toggle:checked ~ .mn-11__topbar .mn-11__btn span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mn-11 #mn-11-toggle:checked ~ .mn-11__topbar .mn-11__btn span:nth-child(2) { opacity: 0; }
.mn-11 #mn-11-toggle:checked ~ .mn-11__topbar .mn-11__btn span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Fullscreen neon overlay */
.mn-11__menu {
  position: absolute;
  inset: 0;
  background: rgba(5,1,15,0.97);
  z-index: 20;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px 32px;
  opacity: 0;
  pointer-events: none;
  clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
  transition: opacity 0.4s, clip-path 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.mn-11 #mn-11-toggle:checked ~ .mn-11__menu {
  opacity: 1;
  pointer-events: all;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

.mn-11__menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 48px;
}
.mn-11__menu-sys {
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--muted);
  text-transform: uppercase;
}
.mn-11__menu-sys span { color: var(--green); }
.mn-11__close {
  font-size: 20px;
  color: var(--cyan);
  cursor: pointer;
  text-shadow: 0 0 10px var(--cyan);
}

.mn-11__nav-list { list-style: none; }
.mn-11__nav-list li {
  margin-bottom: 4px;
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.4s, transform 0.4s cubic-bezier(0.4,0,0.2,1);
}
.mn-11 #mn-11-toggle:checked ~ .mn-11__menu .mn-11__nav-list li { opacity: 1; transform: translateX(0); }
.mn-11 #mn-11-toggle:checked ~ .mn-11__menu .mn-11__nav-list li:nth-child(1) { transition-delay: 0.15s; }
.mn-11 #mn-11-toggle:checked ~ .mn-11__menu .mn-11__nav-list li:nth-child(2) { transition-delay: 0.22s; }
.mn-11 #mn-11-toggle:checked ~ .mn-11__menu .mn-11__nav-list li:nth-child(3) { transition-delay: 0.29s; }
.mn-11 #mn-11-toggle:checked ~ .mn-11__menu .mn-11__nav-list li:nth-child(4) { transition-delay: 0.36s; }
.mn-11 #mn-11-toggle:checked ~ .mn-11__menu .mn-11__nav-list li:nth-child(5) { transition-delay: 0.43s; }

.mn-11__nav-list a {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 0;
  text-decoration: none;
  border-bottom: 1px solid rgba(0,245,255,0.08);
  transition: all 0.2s;
  position: relative;
  overflow: hidden;
}
.mn-11__nav-list a:hover { padding-left: 8px; }
.mn-11__nav-list a .num {
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 1px;
  min-width: 28px;
}
.mn-11__nav-list a .label {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.5px;
  text-transform: uppercase;
  transition: color 0.2s, text-shadow 0.2s;
}
.mn-11__nav-list li:nth-child(1) a .label { color: var(--cyan); text-shadow: 0 0 12px rgba(0,245,255,0.5); }
.mn-11__nav-list li:nth-child(2) a .label { color: var(--magenta); text-shadow: 0 0 12px rgba(255,0,160,0.5); }
.mn-11__nav-list li:nth-child(3) a .label { color: var(--yellow); text-shadow: 0 0 12px rgba(255,230,0,0.5); }
.mn-11__nav-list li:nth-child(4) a .label { color: var(--green); text-shadow: 0 0 12px rgba(0,255,136,0.5); }
.mn-11__nav-list li:nth-child(5) a .label { color: var(--text); }
.mn-11__nav-list a .arrow { margin-left: auto; font-size: 18px; color: var(--muted); }

.mn-11__menu-footer {
  margin-top: 40px;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
}
.mn-11__menu-footer span { color: var(--magenta); }

/* Page content */
.mn-11__page {
  position: absolute;
  top: 56px; inset-inline: 0; bottom: 0;
  padding: 24px 20px;
  z-index: 5;
}
.mn-11__page-title {
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 4px;
  text-shadow: 0 0 8px rgba(0,245,255,0.5);
}
.mn-11__page-h1 {
  font-size: 28px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.5px;
  margin-bottom: 24px;
}
.mn-11__neon-card {
  border: 1px solid;
  border-radius: 4px;
  padding: 16px;
  margin-bottom: 12px;
  position: relative;
}
.mn-11__neon-card:nth-child(1) { border-color: rgba(0,245,255,0.3); }
.mn-11__neon-card:nth-child(2) { border-color: rgba(255,0,160,0.3); }
.mn-11__neon-card:nth-child(3) { border-color: rgba(0,255,136,0.3); }
.mn-11__neon-card::before {
  content: '';
  position: absolute;
  top: 0; left: 16px;
  width: 32px; height: 2px;
  border-radius: 0 0 4px 4px;
}
.mn-11__neon-card:nth-child(1)::before { background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
.mn-11__neon-card:nth-child(2)::before { background: var(--magenta); box-shadow: 0 0 8px var(--magenta); }
.mn-11__neon-card:nth-child(3)::before { background: var(--green); box-shadow: 0 0 8px var(--green); }
.mn-11__neon-card h4 { font-size: 13px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--text); margin-bottom: 4px; }
.mn-11__neon-card p { font-size: 12px; color: var(--muted); line-height: 1.5; }

@media (prefers-reduced-motion: reduce) {
  .mn-11__logo { animation: none; }
  .mn-11__menu, .mn-11__nav-list li, .mn-11__btn span { transition: none; }
}
```

### 12. Minimal Dot Navigation

**Type:** CSS + JS
**Description:** A swipeable five-slide carousel with dot indicators that expand into a pill on the active slide. Supports arrow buttons, dot click, touch swipe, and auto-advance — with CSS transitions handling all visual motion.

**HTML:**
```html
<div class="mn-12" id="mn-12-root">
  <div class="mn-12__track" id="mn-12-track">
    <div class="mn-12__slide">
      <div class="mn-12__slide-emoji">🚀</div>
      <h2>Launch Your Ideas</h2>
      <p>Build and ship products 10x faster with our streamlined platform.</p>
      <a href="#" class="mn-12__slide-cta">Get Started →</a>
    </div>
    <div class="mn-12__slide">
      <div class="mn-12__slide-emoji">🔐</div>
      <h2>Security First</h2>
      <p>Enterprise-grade encryption and compliance built into every layer.</p>
      <a href="#" class="mn-12__slide-cta">Learn More →</a>
    </div>
    <div class="mn-12__slide">
      <div class="mn-12__slide-emoji">⚡</div>
      <h2>Lightning Fast</h2>
      <p>Sub-100ms response times globally with our edge network.</p>
      <a href="#" class="mn-12__slide-cta">See Benchmarks →</a>
    </div>
    <div class="mn-12__slide">
      <div class="mn-12__slide-emoji">🌍</div>
      <h2>Global Scale</h2>
      <p>Deploy to 32 regions worldwide in a single click.</p>
      <a href="#" class="mn-12__slide-cta">Explore Regions →</a>
    </div>
    <div class="mn-12__slide">
      <div class="mn-12__slide-emoji">💎</div>
      <h2>Premium Support</h2>
      <p>24/7 expert support with guaranteed 1-hour response time.</p>
      <a href="#" class="mn-12__slide-cta">Talk to Us →</a>
    </div>
  </div>

  <div class="mn-12__label">Discover</div>
  <div class="mn-12__counter"><span id="mn-12-curr">1</span> / 5</div>

  <button class="mn-12__arrow mn-12__arrow--prev" id="mn-12-prev">‹</button>
  <button class="mn-12__arrow mn-12__arrow--next" id="mn-12-next">›</button>

  <div class="mn-12__dots" id="mn-12-dots">
    <button class="mn-12__dot is-active" data-i="0"></button>
    <button class="mn-12__dot" data-i="1"></button>
    <button class="mn-12__dot" data-i="2"></button>
    <button class="mn-12__dot" data-i="3"></button>
    <button class="mn-12__dot" data-i="4"></button>
  </div>
</div>

```

**CSS:**
```css
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
body { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: #0f0f13; font-family: 'Segoe UI', sans-serif; }

.mn-12 {
  --accent: #6366f1;
  width: 375px;
  height: 667px;
  position: relative;
  overflow: hidden;
  border-radius: 32px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.7);
}

/* Slides */
.mn-12__track {
  display: flex;
  width: 500%;
  height: 100%;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.mn-12__slide {
  width: 20%;
  height: 100%;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 40px 36px;
  text-align: center;
  position: relative;
}

.mn-12__slide:nth-child(1) { background: linear-gradient(160deg, #1e1b4b 0%, #312e81 100%); }
.mn-12__slide:nth-child(2) { background: linear-gradient(160deg, #0c1446 0%, #1e3a5f 100%); }
.mn-12__slide:nth-child(3) { background: linear-gradient(160deg, #1a0533 0%, #3b0764 100%); }
.mn-12__slide:nth-child(4) { background: linear-gradient(160deg, #0a2e1a 0%, #14532d 100%); }
.mn-12__slide:nth-child(5) { background: linear-gradient(160deg, #2d1606 0%, #7c2d12 100%); }

.mn-12__slide-emoji { font-size: 72px; margin-bottom: 24px; filter: drop-shadow(0 8px 24px rgba(0,0,0,0.3)); }
.mn-12__slide h2 {
  font-size: 28px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.5px;
  margin-bottom: 12px;
  line-height: 1.2;
}
.mn-12__slide p { font-size: 14px; color: rgba(255,255,255,0.6); line-height: 1.7; max-width: 280px; }

/* CTA button */
.mn-12__slide-cta {
  display: inline-block;
  margin-top: 28px;
  background: rgba(255,255,255,0.15);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  padding: 12px 28px;
  border-radius: 100px;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,0.25);
  transition: background 0.2s;
}
.mn-12__slide-cta:hover { background: rgba(255,255,255,0.22); }

/* Dot navigation */
.mn-12__dots {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 10;
}
.mn-12__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.mn-12__dot.is-active {
  width: 28px;
  border-radius: 4px;
  background: #fff;
}

/* Arrow nav */
.mn-12__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.2);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: #fff;
  font-size: 16px;
  transition: background 0.2s;
}
.mn-12__arrow:hover { background: rgba(255,255,255,0.22); }
.mn-12__arrow--prev { left: 16px; }
.mn-12__arrow--next { right: 16px; }

/* Slide counter */
.mn-12__counter {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,0.5);
  letter-spacing: 1px;
}
.mn-12__counter span { color: rgba(255,255,255,0.9); }

/* Top label */
.mn-12__label {
  position: absolute;
  top: 20px;
  left: 20px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.3);
}

@media (prefers-reduced-motion: reduce) {
  .mn-12__track { transition: none; }
  .mn-12__dot { transition: none; }
}
```

**JS:**
```js
(function() {
  const track = document.getElementById('mn-12-track');
  const dots = document.querySelectorAll('.mn-12__dot');
  const counter = document.getElementById('mn-12-curr');
  const total = 5;
  let current = 0;

  function goTo(idx) {
    current = (idx + total) % total;
    track.style.transform = `translateX(-${current * 20}%)`;
    dots.forEach((d, i) => d.classList.toggle('is-active', i === current));
    counter.textContent = current + 1;
  }

  document.getElementById('mn-12-prev').addEventListener('click', () => goTo(current - 1));
  document.getElementById('mn-12-next').addEventListener('click', () => goTo(current + 1));
  dots.forEach(d => d.addEventListener('click', () => goTo(+d.dataset.i)));

  // Touch swipe
  let startX = 0;
  track.addEventListener('touchstart', e => { startX = e.touches[0].clientX; }, { passive: true });
  track.addEventListener('touchend', e => {
    const dx = e.changedTouches[0].clientX - startX;
    if (Math.abs(dx) > 50) goTo(current + (dx < 0 ? 1 : -1));
  });

  // Auto-advance
  let timer = setInterval(() => goTo(current + 1), 4000);
  document.getElementById('mn-12-root').addEventListener('touchstart', () => clearInterval(timer));
})();
```

### 13. Breadcrumb Collapse Navigation

**Type:** Pure CSS
**Description:** A file explorer UI with a collapsed breadcrumb showing an ellipsis button that reveals the full ancestor path as a dropdown. The dropdown toggles via Pure CSS checkbox with a scale-and-opacity entrance.

**HTML:**
```html
<div class="mn-13">
  <input type="checkbox" id="mn-13-collapse">
  <div class="mn-13__appbar">
    <div class="mn-13__appbar-row">
      <div class="mn-13__back">‹</div>
      <span class="mn-13__appbar-title">Documents</span>
      <div class="mn-13__appbar-actions">
        <div class="mn-13__icon-btn">🔍</div>
        <div class="mn-13__icon-btn">⋯</div>
      </div>
    </div>
    <!-- Collapsed breadcrumb with ellipsis -->
    <div class="mn-13__breadcrumb">
      <div class="mn-13__bc-item"><a href="#">Home</a></div>
      <span class="mn-13__bc-sep">›</span>
      <div class="mn-13__bc-ellipsis">
        <label for="mn-13-collapse" class="mn-13__ellipsis-btn">···</label>
        <div class="mn-13__bc-dropdown">
          <a href="#"><span>☁️</span> My Drive</a>
          <a href="#"><span>📁</span> Work Projects</a>
          <a href="#"><span>📁</span> 2024</a>
          <a href="#"><span>📁</span> Q4 Reports</a>
        </div>
      </div>
      <span class="mn-13__bc-sep">›</span>
      <div class="mn-13__bc-item is-current">Documents</div>
    </div>
  </div>

  <div class="mn-13__content">
    <div class="mn-13__section-header">Folders <span>+ New</span></div>
    <div class="mn-13__folder-item">
      <span class="mn-13__folder-icon">📁</span>
      <span class="mn-13__folder-name">Design Assets</span>
      <span class="mn-13__folder-count">48 items</span>
      <span class="mn-13__chevron">›</span>
    </div>
    <div class="mn-13__folder-item">
      <span class="mn-13__folder-icon">📁</span>
      <span class="mn-13__folder-name">Client Reports</span>
      <span class="mn-13__folder-count">12 items</span>
      <span class="mn-13__chevron">›</span>
    </div>
    <div class="mn-13__folder-item">
      <span class="mn-13__folder-icon">📁</span>
      <span class="mn-13__folder-name">Contracts</span>
      <span class="mn-13__folder-count">7 items</span>
      <span class="mn-13__chevron">›</span>
    </div>

    <div class="mn-13__section-header">Recent Files</div>
    <div class="mn-13__file-item">
      <div class="mn-13__file-icon" style="background:#eff6ff">📄</div>
      <div class="mn-13__file-info">
        <h4>Q4 Summary Report.pdf</h4>
        <p>PDF · 2.4 MB</p>
      </div>
      <div class="mn-13__file-meta"><p>Today</p><p>14:32</p></div>
    </div>
    <div class="mn-13__file-item">
      <div class="mn-13__file-icon" style="background:#f0fdf4">📊</div>
      <div class="mn-13__file-info">
        <h4>Analytics Dashboard.xlsx</h4>
        <p>Excel · 840 KB</p>
      </div>
      <div class="mn-13__file-meta"><p>Yesterday</p><p>09:15</p></div>
    </div>
    <div class="mn-13__file-item">
      <div class="mn-13__file-icon" style="background:#fef3c7">🖼️</div>
      <div class="mn-13__file-info">
        <h4>Brand Guidelines.fig</h4>
        <p>Figma · 18 MB</p>
      </div>
      <div class="mn-13__file-meta"><p>Dec 3</p><p>11:00</p></div>
    </div>
  </div>

  <div class="mn-13__upload">
    <div class="mn-13__upload-icon">☁️</div>
    <div class="mn-13__upload-text">
      <h4>24.8 GB of 50 GB used</h4>
      <p>Upgrade for more storage</p>
    </div>
    <div class="mn-13__upload-btn">Upgrade</div>
  </div>
</div>
```

**CSS:**
```css
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
body { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: #0f0f13; font-family: 'Segoe UI', sans-serif; }

.mn-13 {
  --bg: #fafafa;
  --surface: #ffffff;
  --border: #e4e4e7;
  --accent: #2563eb;
  --accent-hover: #1d4ed8;
  --text: #18181b;
  --muted: #71717a;
  --success: #16a34a;
  width: 375px;
  height: 667px;
  position: relative;
  overflow: hidden;
  background: var(--bg);
  border-radius: 32px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.5);
  display: flex;
  flex-direction: column;
}

.mn-13 #mn-13-collapse { display: none; }

/* Top app bar */
.mn-13__appbar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 14px 16px;
  flex-shrink: 0;
}
.mn-13__appbar-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.mn-13__back {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  cursor: pointer;
  color: var(--text);
  flex-shrink: 0;
}
.mn-13__appbar-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  flex: 1;
}
.mn-13__appbar-actions {
  display: flex;
  gap: 8px;
}
.mn-13__icon-btn {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  cursor: pointer;
}

/* Breadcrumb row */
.mn-13__breadcrumb {
  display: flex;
  align-items: center;
  gap: 0;
  overflow: hidden;
  height: 28px;
}
.mn-13__bc-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
  flex-shrink: 0;
}
.mn-13__bc-item a {
  color: var(--accent);
  text-decoration: none;
  padding: 2px 4px;
  border-radius: 4px;
  transition: background 0.15s;
}
.mn-13__bc-item a:hover { background: rgba(37,99,235,0.08); }
.mn-13__bc-item.is-current { color: var(--text); font-weight: 600; }
.mn-13__bc-sep { color: var(--border); margin: 0 2px; font-size: 14px; }

/* Collapsed ellipsis */
.mn-13__bc-ellipsis {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.mn-13__ellipsis-btn {
  width: 28px; height: 20px;
  border-radius: 4px;
  background: var(--bg);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px;
  cursor: pointer;
  color: var(--muted);
  font-weight: 700;
  letter-spacing: 1px;
  transition: background 0.2s, border-color 0.2s;
}
.mn-13__ellipsis-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); }

/* Dropdown from ellipsis */
.mn-13__bc-dropdown {
  position: absolute;
  top: 88px;
  left: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  z-index: 20;
  min-width: 180px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px) scale(0.96);
  transform-origin: top left;
  transition: opacity 0.2s, transform 0.2s;
}
.mn-13 #mn-13-collapse:checked ~ .mn-13__appbar .mn-13__bc-dropdown {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0) scale(1);
}
.mn-13__bc-dropdown a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  font-size: 13px;
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid rgba(0,0,0,0.04);
  transition: background 0.15s;
}
.mn-13__bc-dropdown a:last-child { border-bottom: none; }
.mn-13__bc-dropdown a:hover { background: var(--bg); }
.mn-13__bc-dropdown a span { color: var(--muted); font-size: 14px; }

/* Page content */
.mn-13__content { flex: 1; overflow-y: auto; }

/* File/folder explorer */
.mn-13__section-header {
  padding: 16px 16px 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
  display: flex; justify-content: space-between; align-items: center;
}
.mn-13__section-header span {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--accent);
  cursor: pointer;
}

.mn-13__file-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(0,0,0,0.04);
  cursor: pointer;
  transition: background 0.15s;
}
.mn-13__file-item:hover { background: rgba(0,0,0,0.02); }
.mn-13__file-icon {
  width: 36px; height: 36px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.mn-13__file-info { flex: 1; }
.mn-13__file-info h4 { font-size: 14px; font-weight: 500; color: var(--text); }
.mn-13__file-info p { font-size: 11px; color: var(--muted); margin-top: 1px; }
.mn-13__file-meta { font-size: 11px; color: var(--muted); text-align: right; }
.mn-13__file-meta p:first-child { color: var(--text); font-weight: 500; }

/* Folder items */
.mn-13__folder-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(0,0,0,0.04);
  cursor: pointer;
  transition: background 0.15s;
}
.mn-13__folder-item:hover { background: rgba(0,0,0,0.02); }
.mn-13__folder-icon { font-size: 22px; flex-shrink: 0; }
.mn-13__folder-name { font-size: 14px; font-weight: 500; color: var(--text); flex: 1; }
.mn-13__folder-count { font-size: 12px; color: var(--muted); }
.mn-13__chevron { font-size: 12px; color: var(--muted); }

/* Upload bar */
.mn-13__upload {
  background: rgba(37,99,235,0.06);
  border-top: 1px solid rgba(37,99,235,0.15);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.mn-13__upload-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  color: #fff;
}
.mn-13__upload-text { flex: 1; }
.mn-13__upload-text h4 { font-size: 13px; font-weight: 600; color: var(--text); }
.mn-13__upload-text p { font-size: 11px; color: var(--muted); }
.mn-13__upload-btn {
  font-size: 12px; font-weight: 600;
  color: var(--accent);
  cursor: pointer;
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid rgba(37,99,235,0.3);
}

@media (prefers-reduced-motion: reduce) {
  .mn-13__bc-dropdown { transition: none; }
}
```

### 14. Split-Screen Navigation

**Type:** Pure CSS
**Description:** A split-panel layout with a narrow 120px left category sidebar and a full-height right content panel. Radio inputs switch categories with a fade-slide page transition and a right-edge active indicator.

**HTML:**
```html
<div class="mn-14">
  <input type="radio" name="mn-14-cat" id="mn-14-c1" checked>
  <input type="radio" name="mn-14-cat" id="mn-14-c2">
  <input type="radio" name="mn-14-cat" id="mn-14-c3">
  <input type="radio" name="mn-14-cat" id="mn-14-c4">

  <div class="mn-14__left">
    <label for="mn-14-c1" class="mn-14__cat-item">
      <div class="mn-14__cat-icon" style="background:rgba(139,92,246,0.2)">🎮</div>
      <span class="mn-14__cat-name">Gaming</span>
      <div class="mn-14__cat-indicator"></div>
    </label>
    <label for="mn-14-c2" class="mn-14__cat-item">
      <div class="mn-14__cat-icon" style="background:rgba(34,197,94,0.2)">🌿</div>
      <span class="mn-14__cat-name">Nature</span>
      <div class="mn-14__cat-indicator"></div>
    </label>
    <label for="mn-14-c3" class="mn-14__cat-item">
      <div class="mn-14__cat-icon" style="background:rgba(239,68,68,0.2)">❤️</div>
      <span class="mn-14__cat-name">Health</span>
      <div class="mn-14__cat-indicator"></div>
    </label>
    <label for="mn-14-c4" class="mn-14__cat-item">
      <div class="mn-14__cat-icon" style="background:rgba(59,130,246,0.2)">📱</div>
      <span class="mn-14__cat-name">Tech</span>
      <div class="mn-14__cat-indicator"></div>
    </label>
  </div>

  <div class="mn-14__right">
    <div class="mn-14__panel" data-p="1">
      <div class="mn-14__panel-header"><h2>Gaming</h2></div>
      <div class="mn-14__panel-body">
        <div class="mn-14__product-card">
          <div class="mn-14__product-img" style="background:rgba(139,92,246,0.2)">🎮</div>
          <div class="mn-14__product-info"><h4>Pro Controller</h4><p>Wireless · 40hr battery</p></div>
          <div class="mn-14__product-price">$79</div>
        </div>
        <div class="mn-14__product-card">
          <div class="mn-14__product-img" style="background:rgba(139,92,246,0.15)">🎧</div>
          <div class="mn-14__product-info"><h4>Gaming Headset</h4><p>7.1 Surround · Noise cancel</p></div>
          <div class="mn-14__product-price">$120</div>
        </div>
        <div class="mn-14__product-card">
          <div class="mn-14__product-img" style="background:rgba(139,92,246,0.15)">🖥️</div>
          <div class="mn-14__product-info"><h4>144Hz Monitor</h4><p>27" IPS · 1ms response</p></div>
          <div class="mn-14__product-price">$349</div>
        </div>
      </div>
    </div>

    <div class="mn-14__panel" data-p="2">
      <div class="mn-14__panel-header"><h2>Nature</h2></div>
      <div class="mn-14__panel-body">
        <div class="mn-14__product-card">
          <div class="mn-14__product-img" style="background:rgba(34,197,94,0.15)">🌱</div>
          <div class="mn-14__product-info"><h4>Succulent Set</h4><p>6-pack · Indoor</p></div>
          <div class="mn-14__product-price">$32</div>
        </div>
        <div class="mn-14__product-card">
          <div class="mn-14__product-img" style="background:rgba(34,197,94,0.15)">🪴</div>
          <div class="mn-14__product-info"><h4>Ceramic Planter</h4><p>Matte White · 8"</p></div>
          <div class="mn-14__product-price">$28</div>
        </div>
        <div class="mn-14__product-card">
          <div class="mn-14__product-img" style="background:rgba(34,197,94,0.15)">🌿</div>
          <div class="mn-14__product-info"><h4>Plant Fertilizer</h4><p>Organic · 500ml</p></div>
          <div class="mn-14__product-price">$14</div>
        </div>
      </div>
    </div>

    <div class="mn-14__panel" data-p="3">
      <div class="mn-14__panel-header"><h2>Health</h2></div>
      <div class="mn-14__panel-body">
        <div class="mn-14__product-card">
          <div class="mn-14__product-img" style="background:rgba(239,68,68,0.15)">⌚</div>
          <div class="mn-14__product-info"><h4>Fitness Tracker</h4><p>Heart rate · Sleep</p></div>
          <div class="mn-14__product-price">$89</div>
        </div>
        <div class="mn-14__product-card">
          <div class="mn-14__product-img" style="background:rgba(239,68,68,0.15)">💊</div>
          <div class="mn-14__product-info"><h4>Vitamin D3</h4><p>5000 IU · 90 caps</p></div>
          <div class="mn-14__product-price">$22</div>
        </div>
      </div>
    </div>

    <div class="mn-14__panel" data-p="4">
      <div class="mn-14__panel-header"><h2>Tech</h2></div>
      <div class="mn-14__panel-body">
        <div class="mn-14__product-card">
          <div class="mn-14__product-img" style="background:rgba(59,130,246,0.15)">🎧</div>
          <div class="mn-14__product-info"><h4>ANC Earbuds</h4><p>Wireless · 30hr</p></div>
          <div class="mn-14__product-price">$149</div>
        </div>
        <div class="mn-14__product-card">
          <div class="mn-14__product-img" style="background:rgba(59,130,246,0.15)">📱</div>
          <div class="mn-14__product-info"><h4>Charging Pad</h4><p>15W · Qi2 compatible</p></div>
          <div class="mn-14__product-price">$35</div>
        </div>
        <div class="mn-14__product-card">
          <div class="mn-14__product-img" style="background:rgba(59,130,246,0.15)">🖱️</div>
          <div class="mn-14__product-info"><h4>Wireless Mouse</h4><p>Silent click · Ergonomic</p></div>
          <div class="mn-14__product-price">$55</div>
        </div>
      </div>
    </div>
  </div>
</div>
```

**CSS:**
```css
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
body { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: #0f0f13; font-family: 'Segoe UI', sans-serif; }

.mn-14 {
  width: 375px;
  height: 667px;
  position: relative;
  overflow: hidden;
  border-radius: 32px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6);
}

.mn-14 input[type="radio"] { display: none; }

/* Toggle button */
.mn-14__toggle-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 30;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.25);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
}

/* Left panel — category list */
.mn-14__left {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 120px;
  background: #1a1a2e;
  display: flex;
  flex-direction: column;
  padding-top: 80px;
}
.mn-14__cat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 16px 8px;
  cursor: pointer;
  position: relative;
  transition: background 0.2s;
}
.mn-14__cat-icon {
  width: 44px; height: 44px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.mn-14__cat-name {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: rgba(255,255,255,0.4);
  text-align: center;
  transition: color 0.2s;
}
.mn-14__cat-indicator {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 0;
  background: #fff;
  border-radius: 3px 0 0 3px;
  transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Active state via radio siblings */
#mn-14-c1:checked ~ .mn-14__left label[for="mn-14-c1"] .mn-14__cat-name,
#mn-14-c2:checked ~ .mn-14__left label[for="mn-14-c2"] .mn-14__cat-name,
#mn-14-c3:checked ~ .mn-14__left label[for="mn-14-c3"] .mn-14__cat-name,
#mn-14-c4:checked ~ .mn-14__left label[for="mn-14-c4"] .mn-14__cat-name { color: rgba(255,255,255,0.95); }

#mn-14-c1:checked ~ .mn-14__left label[for="mn-14-c1"] .mn-14__cat-icon,
#mn-14-c2:checked ~ .mn-14__left label[for="mn-14-c2"] .mn-14__cat-icon,
#mn-14-c3:checked ~ .mn-14__left label[for="mn-14-c3"] .mn-14__cat-icon,
#mn-14-c4:checked ~ .mn-14__left label[for="mn-14-c4"] .mn-14__cat-icon { transform: scale(1.1); }

#mn-14-c1:checked ~ .mn-14__left label[for="mn-14-c1"] .mn-14__cat-indicator,
#mn-14-c2:checked ~ .mn-14__left label[for="mn-14-c2"] .mn-14__cat-indicator,
#mn-14-c3:checked ~ .mn-14__left label[for="mn-14-c3"] .mn-14__cat-indicator,
#mn-14-c4:checked ~ .mn-14__left label[for="mn-14-c4"] .mn-14__cat-indicator { height: 28px; }

/* Right panel */
.mn-14__right {
  position: absolute;
  top: 0;
  left: 120px; right: 0; bottom: 0;
  overflow: hidden;
}
.mn-14__panel {
  position: absolute;
  inset: 0;
  padding: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateX(20px);
  transition: opacity 0.3s, transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
}

#mn-14-c1:checked ~ .mn-14__right .mn-14__panel[data-p="1"],
#mn-14-c2:checked ~ .mn-14__right .mn-14__panel[data-p="2"],
#mn-14-c3:checked ~ .mn-14__right .mn-14__panel[data-p="3"],
#mn-14-c4:checked ~ .mn-14__right .mn-14__panel[data-p="4"] { opacity: 1; pointer-events: all; transform: translateX(0); }

/* Panel header */
.mn-14__panel-header {
  height: 80px;
  display: flex;
  align-items: flex-end;
  padding: 0 16px 14px;
  position: relative;
  flex-shrink: 0;
}
.mn-14__panel-header h2 {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.4px;
}
.mn-14__panel-body { padding: 12px 14px 20px; }

/* Product cards */
.mn-14__product-card {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 10px;
  display: flex;
  gap: 12px;
  align-items: center;
}
.mn-14__product-img {
  width: 52px; height: 52px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px;
  flex-shrink: 0;
}
.mn-14__product-info { flex: 1; }
.mn-14__product-info h4 { font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.9); margin-bottom: 2px; }
.mn-14__product-info p { font-size: 11px; color: rgba(255,255,255,0.4); }
.mn-14__product-price { font-size: 14px; font-weight: 700; color: rgba(255,255,255,0.9); }

/* Unique left panel colors per category */
#mn-14-c1:checked ~ .mn-14__left { background: linear-gradient(180deg, #1a1a2e 0%, #1a1232 100%); }
#mn-14-c2:checked ~ .mn-14__left { background: linear-gradient(180deg, #0c1f0c 0%, #0a2e0a 100%); }
#mn-14-c3:checked ~ .mn-14__left { background: linear-gradient(180deg, #1a0c0c 0%, #2e0a0a 100%); }
#mn-14-c4:checked ~ .mn-14__left { background: linear-gradient(180deg, #0c1a2e 0%, #0a1a3a 100%); }

.mn-14__panel[data-p="1"] { background: linear-gradient(160deg, #1a1232, #0d0a1f); }
.mn-14__panel[data-p="2"] { background: linear-gradient(160deg, #0a2e0a, #051505); }
.mn-14__panel[data-p="3"] { background: linear-gradient(160deg, #2e0a0a, #1a0505); }
.mn-14__panel[data-p="4"] { background: linear-gradient(160deg, #0a1a3a, #050d20); }

@media (prefers-reduced-motion: reduce) {
  .mn-14__panel, .mn-14__cat-icon, .mn-14__cat-indicator { transition: none; }
}
```

### 15. Command Palette Search Nav

**Type:** CSS + JS
**Description:** A Spotlight-style command palette triggered by a search bar click or a keyboard shortcut. Live-filters a command list by label and description, with group labels, keyboard shortcut badges, and an animated box entrance.

**HTML:**
```html
<div class="mn-15" id="mn-15-root">
  <div class="mn-15__trigger" id="mn-15-trigger">
    <span class="mn-15__trigger-icon">🔍</span>
    <span class="mn-15__trigger-text">Search or jump to...</span>
    <div class="mn-15__trigger-kbd"><kbd>⌘</kbd><kbd>K</kbd></div>
  </div>

  <div class="mn-15__palette" id="mn-15-palette">
    <div class="mn-15__palette-box">
      <div class="mn-15__input-row">
        <span class="mn-15__input-icon">🔍</span>
        <input class="mn-15__input" id="mn-15-input" placeholder="Search commands, pages, people...">
        <button class="mn-15__input-clear" id="mn-15-clear">✕</button>
      </div>
      <div class="mn-15__results" id="mn-15-results">
        <!-- Populated by JS -->
      </div>
      <div class="mn-15__palette-footer">
        <span><kbd>↑↓</kbd> Navigate</span>
        <span><kbd>↵</kbd> Open</span>
        <span><kbd>Esc</kbd> Close</span>
      </div>
    </div>
  </div>

  <div class="mn-15__page">
    <div class="mn-15__section-title">Quick Actions</div>
    <div class="mn-15__quick-actions">
      <div class="mn-15__action-card">
        <div class="icon">✍️</div>
        <h4>New Document</h4>
        <p>Create blank doc</p>
      </div>
      <div class="mn-15__action-card">
        <div class="icon">📅</div>
        <h4>Schedule</h4>
        <p>Add to calendar</p>
      </div>
      <div class="mn-15__action-card">
        <div class="icon">👥</div>
        <h4>Invite Team</h4>
        <p>Share workspace</p>
      </div>
      <div class="mn-15__action-card">
        <div class="icon">📊</div>
        <h4>Analytics</h4>
        <p>View insights</p>
      </div>
    </div>
    <div class="mn-15__section-title">Recently Visited</div>
    <div class="mn-15__recent-item">
      <div class="mn-15__recent-icon">📄</div>
      <div class="mn-15__recent-text"><h4>Product Roadmap</h4><p>Updated 10 min ago</p></div>
    </div>
    <div class="mn-15__recent-item">
      <div class="mn-15__recent-icon">💬</div>
      <div class="mn-15__recent-text"><h4>Design Review Thread</h4><p>Updated 1 hour ago</p></div>
    </div>
    <div class="mn-15__recent-item">
      <div class="mn-15__recent-icon">📋</div>
      <div class="mn-15__recent-text"><h4>Sprint Planning Board</h4><p>Updated yesterday</p></div>
    </div>
  </div>
</div>

```

**CSS:**
```css
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
body { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: #0f0f13; font-family: 'Segoe UI', sans-serif; }

.mn-15 {
  --bg: #111113;
  --surface: #1c1c1f;
  --surface2: #252528;
  --border: #2d2d32;
  --accent: #f97316;
  --text: #ececf1;
  --muted: #737379;
  --highlight: rgba(249,115,22,0.1);
  width: 375px;
  height: 667px;
  position: relative;
  overflow: hidden;
  background: var(--bg);
  border-radius: 32px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.8);
}

/* Search trigger button */
.mn-15__trigger {
  position: absolute;
  top: 20px;
  left: 16px;
  right: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  cursor: text;
  z-index: 5;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.mn-15__trigger:hover {
  border-color: rgba(249,115,22,0.4);
  box-shadow: 0 0 0 3px rgba(249,115,22,0.08);
}
.mn-15__trigger-icon { font-size: 16px; color: var(--muted); }
.mn-15__trigger-text { flex: 1; color: var(--muted); font-size: 14px; }
.mn-15__trigger-kbd {
  display: flex;
  gap: 4px;
}
.mn-15__trigger-kbd kbd {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 11px;
  color: var(--muted);
  font-family: inherit;
}

/* Command palette overlay */
.mn-15__palette {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 20;
  display: flex;
  flex-direction: column;
  padding: 60px 16px 16px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.mn-15__palette.is-open {
  opacity: 1;
  pointer-events: all;
}

.mn-15__palette-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0,0,0,0.5);
  transform: scale(0.95) translateY(-8px);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.mn-15__palette.is-open .mn-15__palette-box {
  transform: scale(1) translateY(0);
}

/* Search input */
.mn-15__input-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.mn-15__input-icon { font-size: 18px; color: var(--muted); }
.mn-15__input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-size: 15px;
  color: var(--text);
  font-family: inherit;
}
.mn-15__input::placeholder { color: var(--muted); }
.mn-15__input-clear {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--surface2);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: 10px;
  color: var(--muted);
  border: none;
  padding: 0;
  display: none;
}
.mn-15__input-clear.is-visible { display: flex; }

/* Results */
.mn-15__results { max-height: 380px; overflow-y: auto; }
.mn-15__group-label {
  padding: 8px 16px 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
}
.mn-15__result-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  cursor: pointer;
  transition: background 0.1s;
}
.mn-15__result-item:hover, .mn-15__result-item.is-selected {
  background: var(--highlight);
}
.mn-15__result-icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
  background: var(--surface2);
}
.mn-15__result-info { flex: 1; }
.mn-15__result-info h4 { font-size: 13px; font-weight: 500; color: var(--text); }
.mn-15__result-info p { font-size: 11px; color: var(--muted); }
.mn-15__result-shortcut {
  font-size: 11px;
  color: var(--muted);
}
.mn-15__result-shortcut kbd {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 5px;
  font-family: inherit;
}
.mn-15__divider { height: 1px; background: var(--border); margin: 4px 0; }

/* Palette footer */
.mn-15__palette-footer {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 14px;
  border-top: 1px solid var(--border);
}
.mn-15__palette-footer span {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--muted);
}
.mn-15__palette-footer kbd {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 10px;
  font-family: inherit;
}

/* Page content */
.mn-15__page {
  position: absolute;
  top: 72px; left: 0; right: 0; bottom: 0;
  padding: 16px;
  overflow-y: auto;
}
.mn-15__section-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
}
.mn-15__quick-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 20px;
}
.mn-15__action-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px;
  cursor: pointer;
  transition: border-color 0.2s;
}
.mn-15__action-card:hover { border-color: var(--accent); }
.mn-15__action-card .icon { font-size: 24px; margin-bottom: 8px; }
.mn-15__action-card h4 { font-size: 12px; font-weight: 600; color: var(--text); margin-bottom: 2px; }
.mn-15__action-card p { font-size: 11px; color: var(--muted); }
.mn-15__recent-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  cursor: pointer;
}
.mn-15__recent-icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--surface);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px;
}
.mn-15__recent-text h4 { font-size: 13px; font-weight: 500; color: var(--text); }
.mn-15__recent-text p { font-size: 11px; color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  .mn-15__palette, .mn-15__palette-box { transition: none; }
}
```

**JS:**
```js
(function() {
  const trigger = document.getElementById('mn-15-trigger');
  const palette = document.getElementById('mn-15-palette');
  const input = document.getElementById('mn-15-input');
  const results = document.getElementById('mn-15-results');
  const clear = document.getElementById('mn-15-clear');
  const root = document.getElementById('mn-15-root');

  const COMMANDS = [
    { group: 'Pages', icon: '🏠', label: 'Dashboard', desc: 'Main workspace' },
    { group: 'Pages', icon: '📊', label: 'Analytics', desc: 'Traffic & conversions' },
    { group: 'Pages', icon: '👥', label: 'Team Members', desc: '12 members' },
    { group: 'Pages', icon: '⚙️', label: 'Settings', desc: 'Account & preferences' },
    { group: 'Actions', icon: '✍️', label: 'New Document', desc: 'Create blank page', shortcut: 'N' },
    { group: 'Actions', icon: '📤', label: 'Export', desc: 'Download as PDF', shortcut: 'E' },
    { group: 'Actions', icon: '🔗', label: 'Copy Link', desc: 'Share current page', shortcut: 'L' },
    { group: 'Actions', icon: '🎨', label: 'Change Theme', desc: 'Appearance settings' },
    { group: 'Recent', icon: '📄', label: 'Product Roadmap', desc: '10 min ago' },
    { group: 'Recent', icon: '💬', label: 'Design Review', desc: '1 hour ago' },
  ];

  function render(q) {
    const filtered = q ? COMMANDS.filter(c => c.label.toLowerCase().includes(q.toLowerCase()) || c.desc.toLowerCase().includes(q.toLowerCase())) : COMMANDS;
    if (!filtered.length) {
      results.innerHTML = `<div style="padding:24px 16px;text-align:center;color:var(--muted);font-size:13px">No results for "${q}"</div>`;
      return;
    }
    let html = '';
    let lastGroup = '';
    filtered.forEach(c => {
      if (c.group !== lastGroup) {
        if (lastGroup) html += '<div class="mn-15__divider"></div>';
        html += `<div class="mn-15__group-label">${c.group}</div>`;
        lastGroup = c.group;
      }
      html += `<div class="mn-15__result-item">
        <div class="mn-15__result-icon">${c.icon}</div>
        <div class="mn-15__result-info"><h4>${c.label}</h4><p>${c.desc}</p></div>
        ${c.shortcut ? `<div class="mn-15__result-shortcut"><kbd>${c.shortcut}</kbd></div>` : ''}
      </div>`;
    });
    results.innerHTML = html;
  }

  function open() { palette.classList.add('is-open'); setTimeout(() => input.focus(), 50); render(''); }
  function close() { palette.classList.remove('is-open'); input.value = ''; clear.classList.remove('is-visible'); }

  trigger.addEventListener('click', open);
  palette.addEventListener('click', e => { if (e.target === palette) close(); });

  input.addEventListener('input', () => {
    render(input.value);
    clear.classList.toggle('is-visible', input.value.length > 0);
  });

  clear.addEventListener('click', () => { input.value = ''; render(''); clear.classList.remove('is-visible'); input.focus(); });

  document.addEventListener('keydown', e => {
    if ((e.metaKey || e.ctrlKey) && e.key === 'k') { e.preventDefault(); palette.classList.contains('is-open') ? close() : open(); }
    if (e.key === 'Escape') close();
  });

  render('');
})();
```

### 16. Neumorphic Bottom Navigation

**Type:** Pure CSS
**Description:** A soft-UI neumorphic bottom navigation bar on a warm light-gray background. Active tabs press inward with a CSS inset box-shadow. Four pages switch with a fade-slide transition driven by radio inputs.

**HTML:**
```html
<div class="mn-16">
  <input type="radio" name="mn-16-tab" id="mn-16-t1" checked>
  <input type="radio" name="mn-16-tab" id="mn-16-t2">
  <input type="radio" name="mn-16-tab" id="mn-16-t3">
  <input type="radio" name="mn-16-tab" id="mn-16-t4">

  <div class="mn-16__pages">
    <div class="mn-16__page" data-p="1">
      <div class="mn-16__page-title">Overview</div>
      <div class="mn-16__page-sub">Good morning, Taylor ☀️</div>
      <div class="mn-16__stat-row" style="margin-bottom:14px">
        <div class="mn-16__stat-pill"><div class="val">7.4k</div><div class="lbl">Steps</div></div>
        <div class="mn-16__stat-pill"><div class="val">420</div><div class="lbl">Calories</div></div>
        <div class="mn-16__stat-pill"><div class="val">6.5h</div><div class="lbl">Sleep</div></div>
      </div>
      <div class="mn-16__neu-card">
        <h4>Daily Goal</h4>
        <p>74% complete — keep going!</p>
      </div>
      <div class="mn-16__neu-inset">
        <h4>Steps Progress</h4>
        <div class="mn-16__progress-track"><div class="mn-16__progress-fill" style="width:74%"></div></div>
        <div class="mn-16__progress-label"><span>7,400 steps</span><span>10,000</span></div>
      </div>
    </div>

    <div class="mn-16__page" data-p="2">
      <div class="mn-16__page-title">Workouts</div>
      <div class="mn-16__page-sub">This week's activity</div>
      <div class="mn-16__icon-row">
        <div class="mn-16__neu-icon-btn">🏃</div>
        <div class="mn-16__neu-icon-btn">🚴</div>
        <div class="mn-16__neu-icon-btn">🏊</div>
        <div class="mn-16__neu-icon-btn">🧘</div>
      </div>
      <div class="mn-16__neu-card">
        <h4>Morning Run</h4>
        <p>5.2 km · 28 min · 310 cal burned</p>
      </div>
      <div class="mn-16__neu-card">
        <h4>Strength Training</h4>
        <p>45 min · Full body · 280 cal burned</p>
      </div>
    </div>

    <div class="mn-16__page" data-p="3">
      <div class="mn-16__page-title">Nutrition</div>
      <div class="mn-16__page-sub">Today's intake</div>
      <div class="mn-16__neu-inset">
        <h4>Calories</h4>
        <div class="mn-16__progress-track"><div class="mn-16__progress-fill" style="width:60%;background:linear-gradient(90deg,#43d9b0,#4f7cff)"></div></div>
        <div class="mn-16__progress-label"><span>1,240 eaten</span><span>2,000 goal</span></div>
      </div>
      <div class="mn-16__neu-card">
        <h4>Protein · 68g</h4>
        <p>Chicken, eggs, Greek yogurt</p>
      </div>
      <div class="mn-16__neu-card">
        <h4>Carbs · 142g</h4>
        <p>Oats, rice, banana</p>
      </div>
    </div>

    <div class="mn-16__page" data-p="4">
      <div class="mn-16__page-title">Profile</div>
      <div class="mn-16__page-sub">Your health data</div>
      <div class="mn-16__neu-card" style="display:flex;align-items:center;gap:16px">
        <div style="width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,#4f7cff,#43d9b0);display:flex;align-items:center;justify-content:center;font-size:24px;box-shadow:3px 3px 8px var(--shadow-dark),-3px -3px 8px var(--shadow-light)">🏃</div>
        <div><h4>Taylor Kim</h4><p style="font-size:12px;color:var(--muted)">Premium · Since 2022</p></div>
      </div>
      <div class="mn-16__neu-inset">
        <h4>Weekly Streak</h4>
        <div style="display:flex;gap:8px;margin-top:6px">
          <div style="flex:1;height:32px;border-radius:8px;background:linear-gradient(135deg,#4f7cff,#43d9b0);opacity:1"></div>
          <div style="flex:1;height:32px;border-radius:8px;background:linear-gradient(135deg,#4f7cff,#43d9b0);opacity:1"></div>
          <div style="flex:1;height:32px;border-radius:8px;background:linear-gradient(135deg,#4f7cff,#43d9b0);opacity:1"></div>
          <div style="flex:1;height:32px;border-radius:8px;background:linear-gradient(135deg,#4f7cff,#43d9b0);opacity:0.4"></div>
          <div style="flex:1;height:32px;border-radius:8px;background:linear-gradient(135deg,#4f7cff,#43d9b0);opacity:1"></div>
          <div style="flex:1;height:32px;border-radius:8px;background:var(--bg);box-shadow:inset 2px 2px 5px var(--shadow-dark),inset -2px -2px 5px var(--shadow-light)"></div>
          <div style="flex:1;height:32px;border-radius:8px;background:var(--bg);box-shadow:inset 2px 2px 5px var(--shadow-dark),inset -2px -2px 5px var(--shadow-light)"></div>
        </div>
      </div>
    </div>
  </div>

  <div class="mn-16__navbar">
    <label for="mn-16-t1" class="mn-16__nav-item">
      <div class="mn-16__nav-icon">🏠</div>
      <span class="mn-16__nav-label">Home</span>
    </label>
    <label for="mn-16-t2" class="mn-16__nav-item">
      <div class="mn-16__nav-icon">🏃</div>
      <span class="mn-16__nav-label">Workout</span>
    </label>
    <label for="mn-16-t3" class="mn-16__nav-item">
      <div class="mn-16__nav-icon">🥗</div>
      <span class="mn-16__nav-label">Nutrition</span>
    </label>
    <label for="mn-16-t4" class="mn-16__nav-item">
      <div class="mn-16__nav-icon">👤</div>
      <span class="mn-16__nav-label">Profile</span>
    </label>
  </div>
</div>
```

**CSS:**
```css
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
body { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: #0f0f13; font-family: 'Segoe UI', sans-serif; }

.mn-16 {
  --bg: #e0e5ec;
  --text: #2d3748;
  --muted: #8899aa;
  --accent: #4f7cff;
  --accent2: #ff6b9d;
  --accent3: #43d9b0;
  --accent4: #ffb347;
  --shadow-light: rgba(255,255,255,0.8);
  --shadow-dark: rgba(163,177,198,0.7);
  width: 375px;
  height: 667px;
  position: relative;
  overflow: hidden;
  background: var(--bg);
  border-radius: 32px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.5);
}

.mn-16 input[type="radio"] { display: none; }

/* Page area */
.mn-16__pages {
  position: absolute;
  top: 0; left: 0; right: 0;
  bottom: 88px;
  padding: 32px 24px 16px;
}

.mn-16__page {
  position: absolute;
  inset: 0;
  padding: 32px 24px 16px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity 0.3s, transform 0.3s cubic-bezier(0.4,0,0.2,1);
}

#mn-16-t1:checked ~ .mn-16__pages .mn-16__page[data-p="1"],
#mn-16-t2:checked ~ .mn-16__pages .mn-16__page[data-p="2"],
#mn-16-t3:checked ~ .mn-16__pages .mn-16__page[data-p="3"],
#mn-16-t4:checked ~ .mn-16__pages .mn-16__page[data-p="4"] {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
}

/* Page heading */
.mn-16__page-title {
  font-size: 26px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.5px;
  margin-bottom: 4px;
}
.mn-16__page-sub { font-size: 13px; color: var(--muted); margin-bottom: 28px; }

/* Neumorphic cards */
.mn-16__neu-card {
  background: var(--bg);
  border-radius: 20px;
  padding: 20px;
  margin-bottom: 14px;
  box-shadow:
    6px 6px 14px var(--shadow-dark),
    -6px -6px 14px var(--shadow-light);
}
.mn-16__neu-card h4 { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.mn-16__neu-card p { font-size: 12px; color: var(--muted); line-height: 1.6; }

/* Neumorphic inset card */
.mn-16__neu-inset {
  background: var(--bg);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 14px;
  box-shadow:
    inset 4px 4px 10px var(--shadow-dark),
    inset -4px -4px 10px var(--shadow-light);
}
.mn-16__neu-inset h4 { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 8px; }

/* Progress bar */
.mn-16__progress-track {
  height: 8px;
  border-radius: 4px;
  background: var(--bg);
  box-shadow: inset 2px 2px 5px var(--shadow-dark), inset -2px -2px 5px var(--shadow-light);
  overflow: hidden;
  margin-bottom: 6px;
}
.mn-16__progress-fill {
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--accent), var(--accent3));
}
.mn-16__progress-label {
  display: flex; justify-content: space-between;
  font-size: 11px; color: var(--muted);
}

/* Icon row */
.mn-16__icon-row {
  display: flex; gap: 12px; margin-bottom: 14px;
}
.mn-16__neu-icon-btn {
  width: 52px; height: 52px;
  border-radius: 14px;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  box-shadow: 4px 4px 10px var(--shadow-dark), -4px -4px 10px var(--shadow-light);
  cursor: pointer;
  transition: box-shadow 0.15s;
}
.mn-16__neu-icon-btn:active {
  box-shadow: inset 3px 3px 8px var(--shadow-dark), inset -3px -3px 8px var(--shadow-light);
}

/* Bottom nav bar */
.mn-16__navbar {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 88px;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0 16px 12px;
  box-shadow: 0 -2px 20px rgba(163,177,198,0.4);
}

.mn-16__nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  padding: 8px 16px;
  border-radius: 16px;
  transition: all 0.2s;
  position: relative;
}

/* Inset pressed state for active tab */
#mn-16-t1:checked ~ .mn-16__navbar label[for="mn-16-t1"],
#mn-16-t2:checked ~ .mn-16__navbar label[for="mn-16-t2"],
#mn-16-t3:checked ~ .mn-16__navbar label[for="mn-16-t3"],
#mn-16-t4:checked ~ .mn-16__navbar label[for="mn-16-t4"] {
  box-shadow: inset 3px 3px 8px var(--shadow-dark), inset -3px -3px 8px var(--shadow-light);
}

.mn-16__nav-icon {
  font-size: 22px;
  line-height: 1;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.mn-16__nav-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--muted);
  transition: color 0.2s;
}

#mn-16-t1:checked ~ .mn-16__navbar label[for="mn-16-t1"] .mn-16__nav-label { color: var(--accent); }
#mn-16-t2:checked ~ .mn-16__navbar label[for="mn-16-t2"] .mn-16__nav-label { color: var(--accent2); }
#mn-16-t3:checked ~ .mn-16__navbar label[for="mn-16-t3"] .mn-16__nav-label { color: var(--accent3); }
#mn-16-t4:checked ~ .mn-16__navbar label[for="mn-16-t4"] .mn-16__nav-label { color: var(--accent4); }

#mn-16-t1:checked ~ .mn-16__navbar label[for="mn-16-t1"] .mn-16__nav-icon,
#mn-16-t2:checked ~ .mn-16__navbar label[for="mn-16-t2"] .mn-16__nav-icon,
#mn-16-t3:checked ~ .mn-16__navbar label[for="mn-16-t3"] .mn-16__nav-icon,
#mn-16-t4:checked ~ .mn-16__navbar label[for="mn-16-t4"] .mn-16__nav-icon {
  transform: scale(1.15);
}

/* Dot stat row */
.mn-16__stat-row { display: flex; gap: 12px; }
.mn-16__stat-pill {
  flex: 1;
  background: var(--bg);
  border-radius: 14px;
  padding: 14px 12px;
  text-align: center;
  box-shadow: 4px 4px 10px var(--shadow-dark), -4px -4px 10px var(--shadow-light);
}
.mn-16__stat-pill .val { font-size: 20px; font-weight: 700; color: var(--text); }
.mn-16__stat-pill .lbl { font-size: 10px; color: var(--muted); margin-top: 2px; }

@media (prefers-reduced-motion: reduce) {
  .mn-16__page, .mn-16__nav-icon, .mn-16__nav-label { transition: none; }
}
```

---
## 8 CSS Navbar Designs

URL: https://codefronts.com/navigation/css-navbars/
Description: 8 hand-coded CSS navbar patterns covering the surfaces every site needs to handle — a responsive hamburger drawer, a mega menu with hover panels, a floating glassmorphism nav, a collapsible vertical sidebar, a sticky scroll-transforming bar, a full-screen overlay menu, a navbar with a dark-mode toggle, and a minimalist navbar with underline hover animations. Pure CSS plus scoped JS — no UI framework, semantic HTML, accessibility-first.
Demo count: 8

### 01. Responsive CSS Navbar with Hamburger Menu

**Type:** CSS + JS
**Description:** A literary-magazine editorial navbar UI in ink and paper — proving that a responsive hamburger nav can carry serious typographic identity instead of disappearing into a sans-serif default. Top bar with a numbered issue badge (No. 47), a Playfair Display wordmark with italic rust accent, a column-ruled link list (Features / Culture / Opinion / Science / Archive) with a rust underline sweep on hover, a search icon button, and a black "Subscribe" CTA. On mobile (<900px) the desktop links hide and a 1.5px-line hamburger appears; clicking it morphs the three lines into an X and reveals a full-bleed dark drawer with six numbered category tiles (each with a Playfair label + monospace subtext) and a footer row carrying the tagline + "$9/mo" subscribe CTA. Below the navbar a rust-colored marquee ticker scrolls four headline items. Playfair Display + DM Mono. Best for editorial publications, online magazines, literary sites, indie newsletter brands, content-led marketing pages.

**HTML:**
```html
<section class="nb-hbg" aria-label="Verdure editorial hamburger navbar demo">
  <nav aria-label="Primary">
    <div class="nav-inner">
      <div class="issue-tag">No. 47</div>
      <a href="#" class="brand">Verd<em>ure</em></a>
      <div class="rule-v" aria-hidden="true"></div>
      <ul class="nav-links" role="menubar">
        <li role="none"><a href="#" class="active" role="menuitem">Features</a></li>
        <li role="none"><a href="#" role="menuitem">Culture</a></li>
        <li role="none"><a href="#" role="menuitem">Opinion</a></li>
        <li role="none"><a href="#" role="menuitem">Science</a></li>
        <li role="none"><a href="#" role="menuitem">Archive</a></li>
      </ul>
      <div class="nav-spacer"></div>
      <div class="nav-actions">
        <button class="btn-search" type="button" aria-label="Search">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
        </button>
        <button class="btn-subscribe" type="button">Subscribe</button>
      </div>
      <button class="hamburger" type="button" data-nb-hbg-burger aria-label="Open menu" aria-expanded="false" aria-controls="nb-hbg-drawer">
        <span></span><span></span><span></span>
      </button>
    </div>
  </nav>

  <div class="mobile-drawer" id="nb-hbg-drawer" data-nb-hbg-drawer aria-hidden="true">
    <div class="drawer-grid">
      <a href="#" class="drawer-item">
        <span class="drawer-item-num">01</span>
        <span class="drawer-item-label">Features</span>
        <span class="drawer-item-sub">Long reads &amp; investigations</span>
      </a>
      <a href="#" class="drawer-item">
        <span class="drawer-item-num">02</span>
        <span class="drawer-item-label">Culture</span>
        <span class="drawer-item-sub">Arts, film &amp; society</span>
      </a>
      <a href="#" class="drawer-item">
        <span class="drawer-item-num">03</span>
        <span class="drawer-item-label">Opinion</span>
        <span class="drawer-item-sub">Voices &amp; perspectives</span>
      </a>
      <a href="#" class="drawer-item">
        <span class="drawer-item-num">04</span>
        <span class="drawer-item-label">Science</span>
        <span class="drawer-item-sub">Research &amp; discovery</span>
      </a>
      <a href="#" class="drawer-item">
        <span class="drawer-item-num">05</span>
        <span class="drawer-item-label">Archive</span>
        <span class="drawer-item-sub">Back issues &amp; classics</span>
      </a>
      <a href="#" class="drawer-item">
        <span class="drawer-item-num">06</span>
        <span class="drawer-item-label">About</span>
        <span class="drawer-item-sub">Our story &amp; mission</span>
      </a>
    </div>
    <div class="drawer-bottom">
      <span class="drawer-tagline">Independent since 2008</span>
      <button class="drawer-cta" type="button">Subscribe — $9/mo</button>
    </div>
  </div>

  <div class="ticker" aria-hidden="true">
    <div class="ticker-inner">
      <span>World Press Freedom Day</span>
      <span>The Climate Issue — Out Now</span>
      <span>Interview: The Architects of AI</span>
      <span>Summer Reading List 2026</span>
      <span>World Press Freedom Day</span>
      <span>The Climate Issue — Out Now</span>
      <span>Interview: The Architects of AI</span>
      <span>Summer Reading List 2026</span>
    </div>
  </div>

  <section class="hero">
    <div class="hero-text">
      <p class="overline">Cover Story</p>
      <h1>The Last<br><em>Quiet</em><br>Places</h1>
      <p class="deck">As noise pollution reaches crisis levels in every major city, researchers are mapping the world's remaining acoustic sanctuaries — and what their disappearance will cost us.</p>
      <a href="#" class="read-more">
        Read the feature
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12,5 19,12 12,19"/></svg>
      </a>
    </div>
    <div class="hero-visual" aria-hidden="true">
      <div class="hero-pattern"></div>
      <div class="hero-pullquote">
        <blockquote>"Silence is not the absence of sound — it is the presence of everything we've forgotten to hear."</blockquote>
        <cite>Dr. Helena Marsh, Acoustic Ecologist</cite>
      </div>
    </div>
  </section>
</section>
```

**CSS:**
```css
/* ─── 01 Verdure Editorial Hamburger — magazine navbar UI ──────── */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400&family=DM+Mono:wght@300;400;500&display=swap');

.nb-hbg {
  --nb-hbg-ink: #0e0d0b;
  --nb-hbg-paper: #f5f0e8;
  --nb-hbg-rust: #c4451c;
  --nb-hbg-muted: #8a8070;
  --nb-hbg-rule: #d4cdc0;
  --nb-hbg-nav-h: 72px;

  position: relative;
  width: 100%;
  min-height: 820px;
  background: var(--nb-hbg-paper);
  color: var(--nb-hbg-ink);
  font-family: 'DM Mono', monospace;
  overflow: hidden;
  box-sizing: border-box;
}
.nb-hbg *, .nb-hbg *::before, .nb-hbg *::after { box-sizing: border-box; margin: 0; padding: 0; }

.nb-hbg nav { position: absolute; top: 0; left: 0; right: 0; z-index: 100; background: var(--nb-hbg-paper); border-bottom: 2px solid var(--nb-hbg-ink); height: var(--nb-hbg-nav-h); }
.nb-hbg .nav-inner { max-width: 1400px; margin: 0 auto; height: 100%; display: flex; align-items: center; padding: 0 2rem; gap: 2rem; }
.nb-hbg .issue-tag { font-size: 0.6rem; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; color: var(--nb-hbg-paper); background: var(--nb-hbg-rust); padding: 3px 8px; flex-shrink: 0; }
.nb-hbg .brand { font-family: 'Playfair Display', serif; font-size: 1.7rem; font-weight: 900; letter-spacing: -0.02em; color: var(--nb-hbg-ink); text-decoration: none; line-height: 1; flex-shrink: 0; }
.nb-hbg .brand em { font-style: italic; color: var(--nb-hbg-rust); }
.nb-hbg .rule-v { width: 1px; height: 28px; background: var(--nb-hbg-rule); flex-shrink: 0; }
.nb-hbg .nav-links { display: flex; align-items: center; gap: 0; list-style: none; flex: 1; }
.nb-hbg .nav-links a { display: flex; align-items: center; font-size: 0.7rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--nb-hbg-muted); text-decoration: none; padding: 0 1.1rem; height: var(--nb-hbg-nav-h); border-right: 1px solid var(--nb-hbg-rule); transition: color 0.15s, background 0.15s; position: relative; }
.nb-hbg .nav-links li:first-child a { border-left: 1px solid var(--nb-hbg-rule); }
.nb-hbg .nav-links a::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: var(--nb-hbg-rust); transform: scaleX(0); transform-origin: left; transition: transform 0.2s ease; }
.nb-hbg .nav-links a:hover { color: var(--nb-hbg-ink); background: rgba(196,69,28,0.04); }
.nb-hbg .nav-links a:hover::after, .nb-hbg .nav-links a.active::after { transform: scaleX(1); }
.nb-hbg .nav-links a.active { color: var(--nb-hbg-ink); }
.nb-hbg .nav-spacer { flex: 1; }
.nb-hbg .nav-actions { display: flex; align-items: center; gap: 1rem; flex-shrink: 0; }
.nb-hbg .btn-subscribe { font-family: 'DM Mono', monospace; font-size: 0.65rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--nb-hbg-paper); background: var(--nb-hbg-ink); border: none; padding: 9px 18px; cursor: pointer; transition: background 0.15s; }
.nb-hbg .btn-subscribe:hover { background: var(--nb-hbg-rust); }
.nb-hbg .btn-search { background: none; border: none; cursor: pointer; padding: 6px; color: var(--nb-hbg-muted); transition: color 0.15s; display: flex; }
.nb-hbg .btn-search:hover { color: var(--nb-hbg-ink); }

.nb-hbg .hamburger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; background: none; border: none; cursor: pointer; padding: 6px; flex-shrink: 0; }
.nb-hbg .hamburger span { display: block; width: 100%; height: 1.5px; background: var(--nb-hbg-ink); transition: transform 0.3s cubic-bezier(0.23,1,0.32,1), opacity 0.2s; transform-origin: center; }
.nb-hbg .hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nb-hbg .hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nb-hbg .hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.nb-hbg .mobile-drawer { position: absolute; top: var(--nb-hbg-nav-h); left: 0; right: 0; background: var(--nb-hbg-ink); z-index: 99; transform: translateY(-101%); transition: transform 0.4s cubic-bezier(0.23,1,0.32,1); border-bottom: 3px solid var(--nb-hbg-rust); }
.nb-hbg .mobile-drawer.open { transform: translateY(0); }
.nb-hbg .drawer-grid { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid rgba(255,255,255,0.08); }
.nb-hbg .drawer-item { display: flex; flex-direction: column; padding: 1.5rem 2rem; border-right: 1px solid rgba(255,255,255,0.08); border-bottom: 1px solid rgba(255,255,255,0.08); text-decoration: none; transition: background 0.15s; position: relative; overflow: hidden; }
.nb-hbg .drawer-item:hover { background: rgba(196,69,28,0.12); }
.nb-hbg .drawer-item:nth-child(even) { border-right: none; }
.nb-hbg .drawer-item-num { font-size: 0.6rem; letter-spacing: 0.15em; color: var(--nb-hbg-rust); margin-bottom: 0.5rem; }
.nb-hbg .drawer-item-label { font-family: 'Playfair Display', serif; font-size: 1.3rem; font-weight: 700; color: var(--nb-hbg-paper); line-height: 1.1; }
.nb-hbg .drawer-item-sub { font-size: 0.6rem; letter-spacing: 0.08em; color: rgba(245,240,232,0.4); margin-top: 0.4rem; text-transform: uppercase; }
.nb-hbg .drawer-bottom { padding: 1.5rem 2rem; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid rgba(255,255,255,0.08); }
.nb-hbg .drawer-tagline { font-size: 0.65rem; letter-spacing: 0.1em; color: rgba(245,240,232,0.35); text-transform: uppercase; }
.nb-hbg .drawer-cta { font-family: 'DM Mono', monospace; font-size: 0.65rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--nb-hbg-ink); background: var(--nb-hbg-rust); border: none; padding: 9px 18px; cursor: pointer; }

.nb-hbg .ticker { background: var(--nb-hbg-rust); overflow: hidden; white-space: nowrap; padding: 0.6rem 0; margin-top: var(--nb-hbg-nav-h); }
.nb-hbg .ticker-inner { display: inline-block; animation: nb-hbg-ticker 18s linear infinite; }
.nb-hbg .ticker span { font-size: 0.65rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--nb-hbg-paper); padding: 0 3rem; }
.nb-hbg .ticker span::before { content: '◆  '; }
@keyframes nb-hbg-ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.nb-hbg .hero { min-height: 680px; display: grid; grid-template-columns: 1fr 1fr; border-bottom: 2px solid var(--nb-hbg-ink); }
.nb-hbg .hero-text { padding: 5rem 3rem 4rem; border-right: 2px solid var(--nb-hbg-ink); display: flex; flex-direction: column; justify-content: center; }
.nb-hbg .overline { font-size: 0.65rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--nb-hbg-rust); margin-bottom: 1.5rem; display: flex; align-items: center; gap: 0.75rem; }
.nb-hbg .overline::before { content: ''; width: 24px; height: 1.5px; background: var(--nb-hbg-rust); }
.nb-hbg h1 { font-family: 'Playfair Display', serif; font-size: clamp(3rem, 5vw, 5.5rem); font-weight: 900; line-height: 1.0; letter-spacing: -0.02em; color: var(--nb-hbg-ink); margin-bottom: 1.5rem; }
.nb-hbg h1 em { font-style: italic; color: var(--nb-hbg-rust); }
.nb-hbg .deck { font-size: 1rem; line-height: 1.65; color: var(--nb-hbg-muted); max-width: 38ch; margin-bottom: 2.5rem; }
.nb-hbg .read-more { display: inline-flex; align-items: center; gap: 0.75rem; font-size: 0.7rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--nb-hbg-ink); text-decoration: none; border-bottom: 1.5px solid var(--nb-hbg-ink); padding-bottom: 2px; transition: color 0.15s, border-color 0.15s; }
.nb-hbg .read-more:hover { color: var(--nb-hbg-rust); border-color: var(--nb-hbg-rust); }
.nb-hbg .read-more svg { transition: transform 0.2s; }
.nb-hbg .read-more:hover svg { transform: translateX(4px); }
.nb-hbg .hero-visual { background: var(--nb-hbg-ink); position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.nb-hbg .hero-pattern { position: absolute; inset: 0; background-image: repeating-linear-gradient(0deg, transparent, transparent 39px, rgba(255,255,255,0.04) 39px, rgba(255,255,255,0.04) 40px), repeating-linear-gradient(90deg, transparent, transparent 39px, rgba(255,255,255,0.04) 39px, rgba(255,255,255,0.04) 40px); }
.nb-hbg .hero-pullquote { position: relative; z-index: 1; padding: 3rem; text-align: center; }
.nb-hbg .hero-pullquote blockquote { font-family: 'Playfair Display', serif; font-size: clamp(1.8rem, 3vw, 3rem); font-weight: 400; font-style: italic; color: var(--nb-hbg-paper); line-height: 1.3; }
.nb-hbg .hero-pullquote cite { display: block; font-family: 'DM Mono', monospace; font-size: 0.65rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--nb-hbg-rust); margin-top: 1.5rem; font-style: normal; }

@media (max-width: 900px) {
  .nb-hbg .nav-links, .nb-hbg .rule-v, .nb-hbg .issue-tag, .nb-hbg .btn-subscribe, .nb-hbg .btn-search { display: none; }
  .nb-hbg .hamburger { display: flex; }
  .nb-hbg .hero { grid-template-columns: 1fr; }
  .nb-hbg .hero-text { border-right: none; border-bottom: 2px solid var(--nb-hbg-ink); padding: 3rem 1.5rem; }
  .nb-hbg .hero-pullquote blockquote { font-size: 1.6rem; }
  .nb-hbg .drawer-grid { grid-template-columns: 1fr; }
  .nb-hbg .drawer-item { border-right: none; }
}
@media (max-width: 500px) {
  .nb-hbg .nav-inner { padding: 0 1rem; }
  .nb-hbg .hero-text { padding: 2.5rem 1rem 2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .nb-hbg .ticker-inner, .nb-hbg .hamburger span, .nb-hbg .mobile-drawer, .nb-hbg .read-more svg { animation: none !important; transition: none !important; }
}
```

**JS:**
```js
(() => {
  // Scoped hamburger + drawer wiring. The source mock binds a click
  // listener to `document` to close on outside-click — re-scope to
  // the wrapper so two demos can coexist without interfering with
  // each other or the gallery page chrome.
  const root = document.querySelector('.nb-hbg');
  if (!root) return;
  const burger = root.querySelector('[data-nb-hbg-burger]');
  const drawer = root.querySelector('[data-nb-hbg-drawer]');
  if (!burger || !drawer) return;

  function setOpen(open) {
    burger.classList.toggle('open', open);
    drawer.classList.toggle('open', open);
    burger.setAttribute('aria-expanded', open);
    drawer.setAttribute('aria-hidden', !open);
  }

  burger.addEventListener('click', (e) => {
    e.stopPropagation();
    setOpen(!burger.classList.contains('open'));
  });

  // Close on click outside the burger + drawer, but only within
  // this wrapper. Listening on the wrapper itself, not document.
  root.addEventListener('click', (e) => {
    if (!burger.classList.contains('open')) return;
    if (!burger.contains(e.target) && !drawer.contains(e.target)) {
      setOpen(false);
    }
  });
})();
```

### 02. CSS Mega Menu

**Type:** Pure CSS
**Description:** A luxury fashion mega menu navbar UI in deep void black with gold #c9a84c accents and Cormorant Garamond display type — proving a mega menu can carry editorial weight without the SaaS-default look. Top bar with a serif-italic "Aurèlia" wordmark and a 5-item menubar (Women, Men, Collections, Designers, Sale). Hovering Women drops a 4-column panel (Ready to Wear + Accessories + By Occasion link lists with New badges + an italic editorial card "The Art of Understated Power"). Men opens a 4-column with grooming + AW26 lookbook card. Collections shows a 4-up grid of seasonal collection cards (Lumière Douce SS26, Nuit Blanche Pre-Fall, Jardin Sauvage Capsule, Maison Éternelle Bridal). Designers gives a featured list + 12-tile A–Z directory + Voices from the Atelier interview card. Right-rail has Search, Account, and a gold-bordered Bag CTA with a "3" counter. Cormorant Garamond + Jost. Best for luxury fashion e-commerce, boutique storefronts, jewellery sites, perfume houses, premium B2C navigation.

**HTML:**
```html
<section class="nb-mga" aria-label="Aurelia luxury mega menu demo">
  <nav aria-label="Primary">
    <div class="nav-inner">
      <a href="#" class="brand">Aur<strong>è</strong>lia</a>
      <ul class="nav-items" role="menubar">
        <li class="nav-item" role="none">
          <button type="button" role="menuitem" aria-haspopup="true">Women <span class="chevron" aria-hidden="true"></span></button>
          <div class="mega mega-women" role="menu">
            <div class="mega-inner">
              <div>
                <p class="mega-col-title">Ready to Wear</p>
                <ul class="mega-links">
                  <li><a href="#" role="menuitem">Coats &amp; Jackets <span>New</span></a></li>
                  <li><a href="#" role="menuitem">Dresses &amp; Skirts</a></li>
                  <li><a href="#" role="menuitem">Trousers &amp; Shorts</a></li>
                  <li><a href="#" role="menuitem">Knitwear &amp; Tops</a></li>
                  <li><a href="#" role="menuitem">Shirts &amp; Blouses</a></li>
                  <li><a href="#" role="menuitem">Jumpsuits</a></li>
                  <li><a href="#" role="menuitem">Swimwear</a></li>
                </ul>
              </div>
              <div>
                <p class="mega-col-title">Accessories</p>
                <ul class="mega-links">
                  <li><a href="#" role="menuitem">Handbags <span>New</span></a></li>
                  <li><a href="#" role="menuitem">Shoes &amp; Boots</a></li>
                  <li><a href="#" role="menuitem">Jewellery</a></li>
                  <li><a href="#" role="menuitem">Scarves &amp; Belts</a></li>
                  <li><a href="#" role="menuitem">Sunglasses</a></li>
                  <li><a href="#" role="menuitem">Watches</a></li>
                </ul>
              </div>
              <div>
                <p class="mega-col-title">By Occasion</p>
                <ul class="mega-links">
                  <li><a href="#" role="menuitem">Evening &amp; Gala</a></li>
                  <li><a href="#" role="menuitem">Resort &amp; Beach</a></li>
                  <li><a href="#" role="menuitem">Business &amp; Smart</a></li>
                  <li><a href="#" role="menuitem">Weekend Casual</a></li>
                  <li><a href="#" role="menuitem">Bridal</a></li>
                </ul>
              </div>
              <div class="mega-editorial">
                <div class="editorial-pattern" aria-hidden="true"></div>
                <p class="editorial-tag">Editorial — SS26</p>
                <p class="editorial-headline">The Art of<br>Understated<br>Power</p>
                <a href="#" class="editorial-cta">Discover →</a>
              </div>
            </div>
          </div>
        </li>

        <li class="nav-item" role="none">
          <button type="button" role="menuitem" aria-haspopup="true">Men <span class="chevron" aria-hidden="true"></span></button>
          <div class="mega mega-men" role="menu">
            <div class="mega-inner">
              <div>
                <p class="mega-col-title">Clothing</p>
                <ul class="mega-links">
                  <li><a href="#" role="menuitem">Suits &amp; Blazers <span>New</span></a></li>
                  <li><a href="#" role="menuitem">Outerwear</a></li>
                  <li><a href="#" role="menuitem">Shirts</a></li>
                  <li><a href="#" role="menuitem">Trousers &amp; Jeans</a></li>
                  <li><a href="#" role="menuitem">Knitwear</a></li>
                  <li><a href="#" role="menuitem">T-Shirts &amp; Polos</a></li>
                </ul>
              </div>
              <div>
                <p class="mega-col-title">Accessories</p>
                <ul class="mega-links">
                  <li><a href="#" role="menuitem">Shoes &amp; Boots</a></li>
                  <li><a href="#" role="menuitem">Bags &amp; Briefcases</a></li>
                  <li><a href="#" role="menuitem">Ties &amp; Cufflinks</a></li>
                  <li><a href="#" role="menuitem">Belts</a></li>
                  <li><a href="#" role="menuitem">Watches</a></li>
                </ul>
              </div>
              <div>
                <p class="mega-col-title">Grooming</p>
                <ul class="mega-links">
                  <li><a href="#" role="menuitem">Skincare</a></li>
                  <li><a href="#" role="menuitem">Fragrance</a></li>
                  <li><a href="#" role="menuitem">Hair</a></li>
                </ul>
              </div>
              <div class="mega-editorial">
                <div class="editorial-pattern" aria-hidden="true"></div>
                <p class="editorial-tag">Lookbook — AW26</p>
                <p class="editorial-headline">New Tailoring<br>Classics</p>
                <a href="#" class="editorial-cta">Explore →</a>
              </div>
            </div>
          </div>
        </li>

        <li class="nav-item" role="none">
          <button type="button" role="menuitem" aria-haspopup="true">Collections <span class="chevron" aria-hidden="true"></span></button>
          <div class="mega mega-collections" role="menu">
            <div class="mega-inner">
              <div class="collection-card">
                <div class="collection-card-accent" aria-hidden="true"></div>
                <p class="collection-season">Spring / Summer 2026</p>
                <p class="collection-name">Lumière<br>Douce</p>
                <p class="collection-desc">Soft light and shadow play through sheer silks and structured linen.</p>
              </div>
              <div class="collection-card">
                <div class="collection-card-accent" aria-hidden="true"></div>
                <p class="collection-season">Pre-Fall 2026</p>
                <p class="collection-name">Nuit<br>Blanche</p>
                <p class="collection-desc">The elegance of the in-between — neither day nor evening.</p>
              </div>
              <div class="collection-card">
                <div class="collection-card-accent" aria-hidden="true"></div>
                <p class="collection-season">Capsule</p>
                <p class="collection-name">Jardin<br>Sauvage</p>
                <p class="collection-desc">Botanically inspired prints on sustainable organic cotton.</p>
              </div>
              <div class="collection-card">
                <div class="collection-card-accent" aria-hidden="true"></div>
                <p class="collection-season">Bridal 2026</p>
                <p class="collection-name">Maison<br>Éternelle</p>
                <p class="collection-desc">Couture-grade craftsmanship for life's most defining moments.</p>
              </div>
            </div>
          </div>
        </li>

        <li class="nav-item" role="none">
          <button type="button" role="menuitem" aria-haspopup="true">Designers <span class="chevron" aria-hidden="true"></span></button>
          <div class="mega mega-designers" role="menu">
            <div class="mega-inner">
              <div>
                <p class="mega-col-title">Featured</p>
                <ul class="mega-links">
                  <li><a href="#" role="menuitem">Valentino</a></li>
                  <li><a href="#" role="menuitem">Bottega Veneta</a></li>
                  <li><a href="#" role="menuitem">The Row</a></li>
                  <li><a href="#" role="menuitem">Alaïa</a></li>
                  <li><a href="#" role="menuitem">Toteme</a></li>
                </ul>
              </div>
              <div>
                <p class="mega-col-title">A–Z Directory</p>
                <div class="designers-grid">
                  <a href="#" class="designer-tile">Acne</a>
                  <a href="#" class="designer-tile">AMI</a>
                  <a href="#" class="designer-tile">Balenciaga</a>
                  <a href="#" class="designer-tile">Celine</a>
                  <a href="#" class="designer-tile">Chloé</a>
                  <a href="#" class="designer-tile">Dior</a>
                  <a href="#" class="designer-tile">Givenchy</a>
                  <a href="#" class="designer-tile">Isabel</a>
                  <a href="#" class="designer-tile">Jacquemus</a>
                  <a href="#" class="designer-tile">Khaite</a>
                  <a href="#" class="designer-tile">Loewe</a>
                  <a href="#" class="designer-tile">Marni</a>
                </div>
              </div>
              <div class="mega-editorial">
                <div class="editorial-pattern" aria-hidden="true"></div>
                <p class="editorial-tag">Interview Series</p>
                <p class="editorial-headline">Voices from<br>the Atelier</p>
                <a href="#" class="editorial-cta">Read interviews →</a>
              </div>
            </div>
          </div>
        </li>

        <li class="nav-item sale-item" role="none"><a href="#" role="menuitem">Sale <span class="sale-flash">UP TO 60%</span></a></li>
      </ul>

      <div class="nav-spacer"></div>

      <div class="nav-utils">
        <button class="util-btn" type="button">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
          Search
        </button>
        <button class="util-btn" type="button">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
          Account
        </button>
        <button class="cart-btn" type="button">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path d="M6 2 3 6v14a2 2 0 002 2h14a2 2 0 002-2V6l-3-4z"/><line x1="3" y1="6" x2="21" y2="6"/><path d="M16 10a4 4 0 01-8 0"/></svg>
          Bag
          <span class="cart-count">3</span>
        </button>
      </div>
    </div>
  </nav>

  <div class="page-content">
    <div class="bg-orb bg-orb-1" aria-hidden="true"></div>
    <div class="bg-orb bg-orb-2" aria-hidden="true"></div>
    <p class="page-eyebrow">New Season — SS 2026</p>
    <div class="page-line"></div>
    <h1 class="page-h1">The Art of<br><em>Refinement</em></h1>
    <p class="page-sub">Hover over the navigation to explore our collections. Each category unfolds into a world carefully curated for you.</p>
  </div>
</section>
```

**CSS:**
```css
/* ─── 02 Aurélia — luxury e-commerce mega menu navbar UI ───────── */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=Jost:wght@300;400;500;600&display=swap');

.nb-mga {
  --nb-mga-void: #080808;
  --nb-mga-deep: #111010;
  --nb-mga-surface: #1a1918;
  --nb-mga-gold: #c9a84c;
  --nb-mga-gold-light: #e8c97a;
  --nb-mga-cream: #f2ede6;
  --nb-mga-muted: #6b6560;
  --nb-mga-border: rgba(201,168,76,0.15);
  --nb-mga-nav-h: 80px;

  position: relative;
  width: 100%;
  min-height: 720px;
  background: var(--nb-mga-deep);
  color: var(--nb-mga-cream);
  font-family: 'Jost', sans-serif;
  overflow: hidden;
  box-sizing: border-box;
}
.nb-mga *, .nb-mga *::before, .nb-mga *::after { box-sizing: border-box; margin: 0; padding: 0; }

.nb-mga nav { position: absolute; top: 0; left: 0; right: 0; z-index: 200; height: var(--nb-mga-nav-h); background: var(--nb-mga-void); border-bottom: 1px solid var(--nb-mga-border); }
.nb-mga .nav-inner { max-width: 1440px; margin: 0 auto; height: 100%; display: flex; align-items: center; padding: 0 3rem; }
.nb-mga .brand { font-family: 'Cormorant Garamond', serif; font-size: 1.6rem; font-weight: 300; letter-spacing: 0.3em; text-transform: uppercase; color: var(--nb-mga-cream); text-decoration: none; flex-shrink: 0; margin-right: 4rem; }
.nb-mga .brand strong { color: var(--nb-mga-gold); font-weight: 600; }
.nb-mga .nav-items { display: flex; align-items: stretch; height: 100%; flex: 1; list-style: none; gap: 0; }
.nb-mga .nav-item { position: static; height: 100%; }
.nb-mga .nav-item > a, .nb-mga .nav-item > button { display: flex; align-items: center; gap: 5px; height: 100%; padding: 0 1.4rem; font-size: 0.72rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(242,237,230,0.6); text-decoration: none; background: none; border: none; cursor: pointer; transition: color 0.2s; position: relative; white-space: nowrap; font-family: inherit; }
.nb-mga .nav-item > a::after, .nb-mga .nav-item > button::after { content: ''; position: absolute; bottom: 0; left: 50%; right: 50%; height: 1px; background: var(--nb-mga-gold); transition: left 0.3s ease, right 0.3s ease; }
.nb-mga .nav-item:hover > a, .nb-mga .nav-item:hover > button, .nb-mga .nav-item:focus-within > a, .nb-mga .nav-item:focus-within > button { color: var(--nb-mga-cream); }
.nb-mga .nav-item:hover > a::after, .nb-mga .nav-item:hover > button::after, .nb-mga .nav-item:focus-within > a::after, .nb-mga .nav-item:focus-within > button::after { left: 1.4rem; right: 1.4rem; }
.nb-mga .chevron { width: 8px; height: 8px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform 0.25s; flex-shrink: 0; }
.nb-mga .nav-item:hover .chevron, .nb-mga .nav-item:focus-within .chevron { transform: rotate(225deg) translateY(-2px); }
.nb-mga .nav-spacer { flex: 1; }
.nb-mga .nav-utils { display: flex; align-items: center; gap: 0.25rem; flex-shrink: 0; }
.nb-mga .util-btn { display: flex; align-items: center; gap: 6px; font-size: 0.65rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(242,237,230,0.5); background: none; border: none; cursor: pointer; padding: 8px 12px; transition: color 0.2s; white-space: nowrap; font-family: inherit; }
.nb-mga .util-btn:hover { color: var(--nb-mga-cream); }
.nb-mga .cart-btn { display: flex; align-items: center; gap: 8px; font-size: 0.65rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--nb-mga-gold); background: none; border: 1px solid var(--nb-mga-border); cursor: pointer; padding: 8px 16px; transition: border-color 0.2s, background 0.2s; margin-left: 0.5rem; font-family: inherit; }
.nb-mga .cart-btn:hover { border-color: var(--nb-mga-gold); background: rgba(201,168,76,0.06); }
.nb-mga .cart-count { background: var(--nb-mga-gold); color: var(--nb-mga-void); font-size: 0.55rem; font-weight: 600; width: 16px; height: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.nb-mga .sale-flash { color: var(--nb-mga-gold); margin-left: 4px; font-size: 0.6rem; letter-spacing: 0.1em; }

.nb-mga .mega { position: absolute; top: var(--nb-mga-nav-h); left: 0; right: 0; background: var(--nb-mga-void); border-bottom: 1px solid var(--nb-mga-border); z-index: 199; opacity: 0; visibility: hidden; transform: translateY(-12px); transition: opacity 0.3s ease, visibility 0.3s, transform 0.3s cubic-bezier(0.16,1,0.3,1); pointer-events: none; }
.nb-mga .nav-item:hover .mega, .nb-mga .nav-item:focus-within .mega { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: all; }
.nb-mga .mega-inner { max-width: 1440px; margin: 0 auto; padding: 3rem; display: grid; gap: 3rem; }
.nb-mga .mega-women .mega-inner { grid-template-columns: 2fr 1fr 1fr 1.2fr; }
.nb-mga .mega-men .mega-inner { grid-template-columns: 1fr 1fr 1fr 1.5fr; }
.nb-mga .mega-collections .mega-inner { grid-template-columns: repeat(4, 1fr); }
.nb-mga .mega-designers .mega-inner { grid-template-columns: 1fr 1fr 2fr; }
.nb-mga .mega-col-title { font-size: 0.6rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--nb-mga-gold); margin-bottom: 1.5rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--nb-mga-border); }
.nb-mga .mega-links { list-style: none; display: flex; flex-direction: column; gap: 0; }
.nb-mga .mega-links a { display: flex; align-items: center; justify-content: space-between; font-family: 'Cormorant Garamond', serif; font-size: 1.1rem; font-weight: 300; color: rgba(242,237,230,0.7); text-decoration: none; padding: 0.55rem 0; border-bottom: 1px solid rgba(201,168,76,0.06); transition: color 0.2s, padding-left 0.2s; }
.nb-mga .mega-links a:hover { color: var(--nb-mga-gold-light); padding-left: 0.5rem; }
.nb-mga .mega-links a span { font-family: 'Jost', sans-serif; font-size: 0.6rem; letter-spacing: 0.1em; color: var(--nb-mga-muted); }
.nb-mga .mega-links a:hover span { color: var(--nb-mga-gold); }

.nb-mga .mega-editorial { position: relative; overflow: hidden; min-height: 240px; background: var(--nb-mga-surface); display: flex; flex-direction: column; justify-content: flex-end; padding: 2rem; }
.nb-mga .editorial-pattern { position: absolute; inset: 0; background: radial-gradient(ellipse at 80% 20%, rgba(201,168,76,0.08) 0%, transparent 60%), repeating-linear-gradient(135deg, transparent, transparent 20px, rgba(201,168,76,0.02) 20px, rgba(201,168,76,0.02) 21px); }
.nb-mga .editorial-tag { font-size: 0.55rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--nb-mga-gold); margin-bottom: 0.5rem; position: relative; z-index: 1; }
.nb-mga .editorial-headline { font-family: 'Cormorant Garamond', serif; font-size: 1.4rem; font-weight: 300; font-style: italic; color: var(--nb-mga-cream); line-height: 1.3; margin-bottom: 1rem; position: relative; z-index: 1; }
.nb-mga .editorial-cta { display: inline-flex; align-items: center; gap: 8px; font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--nb-mga-gold); text-decoration: none; transition: gap 0.2s; position: relative; z-index: 1; }
.nb-mga .editorial-cta:hover { gap: 14px; }

.nb-mga .designers-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
.nb-mga .designer-tile { padding: 0.9rem 1rem; background: var(--nb-mga-surface); font-family: 'Cormorant Garamond', serif; font-size: 1rem; font-weight: 300; color: rgba(242,237,230,0.65); text-decoration: none; transition: background 0.2s, color 0.2s; display: flex; align-items: center; gap: 0.5rem; }
.nb-mga .designer-tile::before { content: ''; width: 3px; height: 3px; border-radius: 50%; background: var(--nb-mga-gold); opacity: 0; transition: opacity 0.2s; flex-shrink: 0; }
.nb-mga .designer-tile:hover { background: rgba(201,168,76,0.08); color: var(--nb-mga-gold-light); }
.nb-mga .designer-tile:hover::before { opacity: 1; }

.nb-mga .collection-card { background: var(--nb-mga-surface); padding: 2rem 1.5rem; position: relative; overflow: hidden; transition: transform 0.2s; }
.nb-mga .collection-card:hover { transform: translateY(-4px); }
.nb-mga .collection-card-accent { position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--nb-mga-gold), transparent); opacity: 0; transition: opacity 0.2s; }
.nb-mga .collection-card:hover .collection-card-accent { opacity: 1; }
.nb-mga .collection-season { font-size: 0.55rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--nb-mga-gold); margin-bottom: 0.5rem; }
.nb-mga .collection-name { font-family: 'Cormorant Garamond', serif; font-size: 1.5rem; font-weight: 300; color: var(--nb-mga-cream); margin-bottom: 0.75rem; line-height: 1.2; }
.nb-mga .collection-desc { font-size: 0.7rem; color: var(--nb-mga-muted); line-height: 1.6; }

.nb-mga .page-content { padding-top: var(--nb-mga-nav-h); min-height: 640px; display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; gap: 1.5rem; position: relative; overflow: hidden; }
.nb-mga .bg-orb { position: absolute; border-radius: 50%; filter: blur(120px); pointer-events: none; }
.nb-mga .bg-orb-1 { width: 600px; height: 600px; background: rgba(201,168,76,0.04); top: -200px; left: -200px; }
.nb-mga .bg-orb-2 { width: 400px; height: 400px; background: rgba(201,168,76,0.03); bottom: -100px; right: -100px; }
.nb-mga .page-eyebrow { font-size: 0.65rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--nb-mga-gold); }
.nb-mga .page-h1 { font-family: 'Cormorant Garamond', serif; font-size: clamp(3.5rem, 8vw, 8rem); font-weight: 300; letter-spacing: 0.05em; color: var(--nb-mga-cream); line-height: 1; }
.nb-mga .page-h1 em { font-style: italic; color: var(--nb-mga-gold); }
.nb-mga .page-sub { font-size: 0.8rem; letter-spacing: 0.08em; color: var(--nb-mga-muted); max-width: 40ch; }
.nb-mga .page-line { width: 60px; height: 1px; background: linear-gradient(90deg, transparent, var(--nb-mga-gold), transparent); }

@media (max-width: 900px) {
  .nb-mga .nav-inner { padding: 0 1.5rem; }
  .nb-mga .nav-items { display: none; }
  .nb-mga .brand { margin-right: 0; flex: 1; }
  .nb-mga .util-btn span, .nb-mga .util-btn { padding: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .nb-mga .mega, .nb-mga .chevron, .nb-mga .collection-card, .nb-mga .designer-tile { transition: none !important; }
}
```

### 03. Glassmorphism CSS Navbar

**Type:** Pure CSS
**Description:** A pill-shaped glassmorphism navbar UI floating 20px above the wrapper edge, built with backdrop-filter:blur() over a living aurora gradient background — proving that frosted-glass navbars composite cleanly against any vibrant scene. Four blurred radial-gradient orbs (violet, cyan, rose, green) drift in mix-blend-mode:screen across a deep #050311 backdrop, with a fractal noise overlay for grain. The pill nav itself has Syne wordmark + cyan dot, divider rule, link list with active-pill state + glowing cyan dot indicator, two has-drop dropdown triggers that reveal nested glassmorphic panels with icon tiles (⚡ Analytics, 🧠 AI Studio, 🔗 Integrations / 🏢 Enterprise, 🚀 Startups, 🎓 Education), Search + Theme icon buttons, and a cyan-to-violet gradient "Get Started" CTA. Below, a gradient-clipped "Build the future, fast." hero with three frosted demo cards. Syne + Inter. Best for SaaS product sites, AI/ML company landing pages, modern marketing chrome, cyberpunk-inflected dashboards.

**HTML:**
```html
<section class="nb-gls" aria-label="Nova glass pill navbar demo">
  <div class="bg-scene" aria-hidden="true">
    <div class="aurora a1"></div>
    <div class="aurora a2"></div>
    <div class="aurora a3"></div>
    <div class="aurora a4"></div>
  </div>

  <nav aria-label="Primary">
    <div class="nav-inner">
      <a href="#" class="brand">Nōva<span class="brand-dot" aria-hidden="true"></span></a>
      <div class="nav-divider" aria-hidden="true"></div>
      <ul class="nav-links" role="menubar">
        <li role="none"><a href="#" class="active" role="menuitem">Home</a></li>
        <li class="has-drop" role="none">
          <a href="#" role="menuitem">
            Products
            <span class="drop-arrow" aria-hidden="true"><svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="6 9 12 15 18 9"/></svg></span>
          </a>
          <div class="drop-menu" role="menu">
            <a href="#" role="menuitem"><span class="drop-icon">⚡</span> Analytics</a>
            <a href="#" role="menuitem"><span class="drop-icon">🧠</span> AI Studio</a>
            <a href="#" role="menuitem"><span class="drop-icon">🔗</span> Integrations</a>
            <div class="drop-divider" aria-hidden="true"></div>
            <a href="#" role="menuitem"><span class="drop-icon">📦</span> All Products</a>
          </div>
        </li>
        <li class="has-drop" role="none">
          <a href="#" role="menuitem">
            Solutions
            <span class="drop-arrow" aria-hidden="true"><svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="6 9 12 15 18 9"/></svg></span>
          </a>
          <div class="drop-menu" role="menu">
            <a href="#" role="menuitem"><span class="drop-icon">🏢</span> Enterprise</a>
            <a href="#" role="menuitem"><span class="drop-icon">🚀</span> Startups</a>
            <a href="#" role="menuitem"><span class="drop-icon">🎓</span> Education</a>
          </div>
        </li>
        <li role="none"><a href="#" role="menuitem">Pricing</a></li>
        <li role="none"><a href="#" role="menuitem">Docs</a></li>
      </ul>
      <div class="nav-spacer"></div>
      <div class="nav-actions">
        <button class="action-icon" type="button" aria-label="Search">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
        </button>
        <button class="action-icon" type="button" aria-label="Theme">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>
        </button>
        <button class="btn-launch" type="button">Get Started →</button>
      </div>
    </div>
  </nav>

  <div class="page">
    <div class="pill-badge">Now in public beta</div>
    <h1 class="hero-title">Build the<br><span class="gradient-text">future, fast.</span></h1>
    <p class="hero-sub">The glassmorphic navbar adapts elegantly to any vibrant background — see how the frosted blur composites perfectly against live aurora gradients.</p>
    <div class="demo-cards">
      <div class="demo-card">
        <div class="demo-card-icon">⚡</div>
        <div class="demo-card-label">Speed</div>
        <div class="demo-card-val">12ms avg response</div>
      </div>
      <div class="demo-card">
        <div class="demo-card-icon">🔒</div>
        <div class="demo-card-label">Secure</div>
        <div class="demo-card-val">SOC2 Type II</div>
      </div>
      <div class="demo-card">
        <div class="demo-card-icon">🌐</div>
        <div class="demo-card-label">Global</div>
        <div class="demo-card-val">48 edge nodes</div>
      </div>
    </div>
  </div>
</section>
```

**CSS:**
```css
/* ─── 03 Nōva — glassmorphism floating pill navbar UI ──────────── */
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=Inter:wght@300;400;500&display=swap');

.nb-gls {
  --nb-gls-glass-bg: rgba(255,255,255,0.07);
  --nb-gls-glass-border: rgba(255,255,255,0.14);
  --nb-gls-glass-shadow: rgba(0,0,0,0.2);
  --nb-gls-text-primary: rgba(255,255,255,0.95);
  --nb-gls-text-muted: rgba(255,255,255,0.55);
  --nb-gls-accent-cyan: #00f0ff;
  --nb-gls-accent-violet: #c77dff;
  --nb-gls-accent-rose: #ff6b9d;
  --nb-gls-nav-h: 68px;

  position: relative;
  width: 100%;
  min-height: 720px;
  background: #050311;
  font-family: 'Inter', sans-serif;
  overflow: hidden;
  box-sizing: border-box;
}
.nb-gls *, .nb-gls *::before, .nb-gls *::after { box-sizing: border-box; margin: 0; padding: 0; }

.nb-gls .bg-scene { position: absolute; inset: 0; z-index: 0; background: #050311; overflow: hidden; }
.nb-gls .aurora { position: absolute; border-radius: 50%; filter: blur(80px); mix-blend-mode: screen; animation: nb-gls-float var(--dur, 14s) ease-in-out infinite alternate; }
@keyframes nb-gls-float { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(var(--tx, 40px), var(--ty, 30px)) scale(var(--s, 1.1)); } }
.nb-gls .a1 { width: 700px; height: 700px; background: radial-gradient(circle, #6e00ff 0%, transparent 70%); top: -200px; left: -100px; --dur: 18s; --tx: 60px; --ty: 50px; --s: 1.2; opacity: 0.5; }
.nb-gls .a2 { width: 600px; height: 600px; background: radial-gradient(circle, #00c8ff 0%, transparent 70%); top: 100px; right: -150px; --dur: 22s; --tx: -80px; --ty: 60px; --s: 1.15; opacity: 0.45; }
.nb-gls .a3 { width: 500px; height: 500px; background: radial-gradient(circle, #ff0080 0%, transparent 70%); bottom: -100px; left: 30%; --dur: 16s; --tx: -50px; --ty: -40px; --s: 1.3; opacity: 0.35; }
.nb-gls .a4 { width: 400px; height: 400px; background: radial-gradient(circle, #00ff88 0%, transparent 70%); bottom: 200px; right: 20%; --dur: 20s; --tx: 30px; --ty: -60px; --s: 1.1; opacity: 0.25; }
.nb-gls .bg-scene::after { content: ''; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E"); pointer-events: none; opacity: 0.4; }

.nb-gls nav { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); z-index: 100; width: calc(100% - 48px); max-width: 1200px; height: var(--nb-gls-nav-h); background: var(--nb-gls-glass-bg); backdrop-filter: blur(24px) saturate(160%); -webkit-backdrop-filter: blur(24px) saturate(160%); border: 1px solid var(--nb-gls-glass-border); border-radius: 20px; box-shadow: 0 8px 32px var(--nb-gls-glass-shadow), inset 0 1px 0 rgba(255,255,255,0.12), 0 0 0 1px rgba(255,255,255,0.04); }
.nb-gls nav::before { content: ''; position: absolute; top: 0; left: 15%; right: 15%; height: 1px; background: linear-gradient(90deg, transparent, rgba(0,240,255,0.5), rgba(199,125,255,0.5), transparent); border-radius: 0 0 50% 50%; }
.nb-gls .nav-inner { height: 100%; display: flex; align-items: center; padding: 0 1.5rem; gap: 0; }
.nb-gls .brand { font-family: 'Syne', sans-serif; font-size: 1.3rem; font-weight: 800; color: var(--nb-gls-text-primary); text-decoration: none; letter-spacing: -0.02em; flex-shrink: 0; position: relative; }
.nb-gls .brand-dot { display: inline-block; width: 6px; height: 6px; background: var(--nb-gls-accent-cyan); border-radius: 50%; margin-left: 2px; box-shadow: 0 0 10px var(--nb-gls-accent-cyan); vertical-align: middle; margin-bottom: 3px; }
.nb-gls .nav-divider { width: 1px; height: 24px; background: var(--nb-gls-glass-border); margin: 0 1.5rem; flex-shrink: 0; }
.nb-gls .nav-links { display: flex; align-items: center; gap: 0; list-style: none; flex: 1; }
.nb-gls .nav-links a { display: block; font-family: 'Syne', sans-serif; font-size: 0.8rem; font-weight: 500; letter-spacing: 0.02em; color: var(--nb-gls-text-muted); text-decoration: none; padding: 8px 14px; border-radius: 10px; transition: color 0.2s, background 0.2s; position: relative; white-space: nowrap; }
.nb-gls .nav-links a:hover { color: var(--nb-gls-text-primary); background: rgba(255,255,255,0.08); }
.nb-gls .nav-links a.active { color: var(--nb-gls-text-primary); background: rgba(255,255,255,0.1); }
.nb-gls .nav-links a.active::after { content: ''; position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 50%; background: var(--nb-gls-accent-cyan); box-shadow: 0 0 8px var(--nb-gls-accent-cyan); }
.nb-gls .has-drop { position: relative; }
.nb-gls .has-drop > a { display: flex; align-items: center; gap: 4px; }
.nb-gls .drop-arrow { width: 12px; height: 12px; display: flex; align-items: center; justify-content: center; transition: transform 0.2s; }
.nb-gls .has-drop:hover .drop-arrow { transform: rotate(180deg); }
.nb-gls .drop-menu { position: absolute; top: calc(100% + 12px); left: 0; min-width: 200px; background: rgba(10,6,30,0.7); backdrop-filter: blur(32px) saturate(180%); -webkit-backdrop-filter: blur(32px) saturate(180%); border: 1px solid var(--nb-gls-glass-border); border-radius: 16px; padding: 8px; z-index: 200; opacity: 0; visibility: hidden; transform: translateY(-6px) scale(0.97); transform-origin: top left; transition: opacity 0.2s, visibility 0.2s, transform 0.2s cubic-bezier(0.16,1,0.3,1); box-shadow: 0 20px 60px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.08); }
.nb-gls .has-drop:hover .drop-menu, .nb-gls .has-drop:focus-within .drop-menu { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.nb-gls .drop-menu a { display: flex; align-items: center; gap: 10px; font-family: 'Inter', sans-serif; font-size: 0.78rem; font-weight: 400; color: var(--nb-gls-text-muted); text-decoration: none; padding: 9px 12px; border-radius: 10px; transition: background 0.15s, color 0.15s; white-space: nowrap; }
.nb-gls .drop-menu a:hover { background: rgba(255,255,255,0.07); color: var(--nb-gls-text-primary); }
.nb-gls .drop-icon { width: 28px; height: 28px; border-radius: 8px; background: rgba(255,255,255,0.06); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 0.9rem; }
.nb-gls .drop-divider { height: 1px; background: var(--nb-gls-glass-border); margin: 6px 0; }
.nb-gls .nav-spacer { flex: 1; min-width: 1rem; }
.nb-gls .nav-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.nb-gls .action-icon { width: 38px; height: 38px; border-radius: 10px; background: rgba(255,255,255,0.06); border: 1px solid var(--nb-gls-glass-border); display: flex; align-items: center; justify-content: center; color: var(--nb-gls-text-muted); cursor: pointer; transition: background 0.2s, color 0.2s, border-color 0.2s; }
.nb-gls .action-icon:hover { background: rgba(255,255,255,0.12); color: var(--nb-gls-text-primary); border-color: rgba(255,255,255,0.25); }
.nb-gls .btn-launch { font-family: 'Syne', sans-serif; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.02em; color: #050311; background: linear-gradient(135deg, var(--nb-gls-accent-cyan), var(--nb-gls-accent-violet)); border: none; border-radius: 12px; padding: 9px 18px; cursor: pointer; transition: opacity 0.2s, transform 0.15s; box-shadow: 0 4px 20px rgba(0,240,255,0.3); white-space: nowrap; }
.nb-gls .btn-launch:hover { opacity: 0.9; transform: translateY(-1px); }

.nb-gls .page { position: relative; z-index: 1; min-height: 720px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-top: 120px; text-align: center; gap: 2rem; }
.nb-gls .pill-badge { display: inline-flex; align-items: center; gap: 8px; font-family: 'Syne', sans-serif; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em; color: var(--nb-gls-accent-cyan); background: rgba(0,240,255,0.08); border: 1px solid rgba(0,240,255,0.2); border-radius: 100px; padding: 6px 16px; }
.nb-gls .pill-badge::before { content: '◉'; font-size: 0.6rem; animation: nb-gls-pulse 2s ease-in-out infinite; }
@keyframes nb-gls-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
.nb-gls .hero-title { font-family: 'Syne', sans-serif; font-size: clamp(3rem, 7vw, 7rem); font-weight: 800; color: var(--nb-gls-text-primary); line-height: 1; letter-spacing: -0.03em; }
.nb-gls .hero-title .gradient-text { background: linear-gradient(135deg, var(--nb-gls-accent-cyan), var(--nb-gls-accent-violet), var(--nb-gls-accent-rose)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.nb-gls .hero-sub { font-size: 1.1rem; color: var(--nb-gls-text-muted); max-width: 50ch; line-height: 1.7; }
.nb-gls .demo-cards { display: flex; gap: 1rem; margin-top: 1rem; }
.nb-gls .demo-card { background: var(--nb-gls-glass-bg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--nb-gls-glass-border); border-radius: 16px; padding: 1.5rem; width: 160px; text-align: left; transition: transform 0.2s, border-color 0.2s; }
.nb-gls .demo-card:hover { transform: translateY(-6px); border-color: rgba(255,255,255,0.25); }
.nb-gls .demo-card-icon { font-size: 1.5rem; margin-bottom: 0.75rem; }
.nb-gls .demo-card-label { font-family: 'Syne', sans-serif; font-size: 0.75rem; font-weight: 700; color: var(--nb-gls-text-primary); margin-bottom: 0.25rem; }
.nb-gls .demo-card-val { font-size: 0.7rem; color: var(--nb-gls-text-muted); }

@media (max-width: 768px) {
  .nb-gls nav { width: calc(100% - 24px); top: 12px; }
  .nb-gls .nav-links .has-drop, .nb-gls .nav-links li:not(.has-drop):nth-child(n+4) { display: none; }
  .nb-gls .nav-divider { display: none; }
  .nb-gls .demo-cards { display: none; }
  .nb-gls .hero-sub { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .nb-gls .aurora, .nb-gls .pill-badge::before, .nb-gls .demo-card { animation: none !important; transition: none !important; }
}
```

### 04. Vertical CSS Sidebar Navigation

**Type:** CSS + JS
**Description:** A GitHub-dark-inspired collapsible sidebar navbar UI for a SaaS dashboard — proving that the canonical 240px ↔ 64px sidebar collapse pattern can carry a complete information density. Sidebar with gradient hex logo, a circular collapse-toggle button that rotates 180° on click, a workspace selector card (Acme Corp / Pro Plan), three nav sections (Overview / Workspace / System) with mono-uppercase labels and colour-coded badges (Live green, "12" blue, "2" orange, "3" red), and a bottom user row with gradient avatar. On collapse the entire 240px width animates to 64px — every label, badge, and the workspace info smoothly fade out — and tooltips appear on hover via a `data-label` attribute. The main pane carries a sticky topbar (breadcrumb / ⌘K search / notifications dot / command icon) and the actual dashboard content: 4-up stat cards (Revenue $84.2k +12.4%, Active Users 4,291, Deployments 138 −3.2%, Uptime 99.97%) plus a 14-bar Request Volume chart + Recent Activity feed. IBM Plex Sans + IBM Plex Mono. Best for SaaS admin panels, developer tools, internal dashboards, analytics platforms, B2B product chrome.

**HTML:**
```html
<section class="nb-sdb" aria-label="hexlane collapsible sidebar demo">
  <aside data-nb-sdb-sidebar aria-label="Primary">
    <div class="sidebar-logo">
      <div class="logo-icon" aria-hidden="true">⬡</div>
      <span class="logo-text">hexlane<span class="logo-dot">.</span>io</span>
    </div>

    <div class="workspace">
      <div class="ws-avatar">A</div>
      <div class="ws-info">
        <div class="ws-name">Acme Corp</div>
        <div class="ws-plan">Pro Plan</div>
      </div>
      <span class="ws-chevron" aria-hidden="true"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="6 9 12 15 18 9"/></svg></span>
    </div>

    <nav class="sidebar-nav" aria-label="Sections">
      <div class="nav-section">
        <div class="nav-section-label">Overview</div>
        <a href="#" class="nav-item active" data-label="Dashboard">
          <span class="nav-icon" aria-hidden="true"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg></span>
          <span class="nav-label">Dashboard</span>
        </a>
        <a href="#" class="nav-item" data-label="Analytics">
          <span class="nav-icon" aria-hidden="true"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg></span>
          <span class="nav-label">Analytics</span>
          <span class="nav-badge badge-green">Live</span>
        </a>
        <a href="#" class="nav-item" data-label="Reports">
          <span class="nav-icon" aria-hidden="true"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14,2 14,8 20,8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg></span>
          <span class="nav-label">Reports</span>
        </a>
      </div>

      <div class="nav-section">
        <div class="nav-section-label">Workspace</div>
        <a href="#" class="nav-item" data-label="Projects">
          <span class="nav-icon" aria-hidden="true"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><polygon points="12,2 2,7 12,12 22,7"/><polyline points="2,17 12,22 22,17"/><polyline points="2,12 12,17 22,12"/></svg></span>
          <span class="nav-label">Projects</span>
          <span class="nav-badge badge-blue">12</span>
        </a>
        <a href="#" class="nav-item" data-label="Team">
          <span class="nav-icon" aria-hidden="true"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg></span>
          <span class="nav-label">Team</span>
        </a>
        <a href="#" class="nav-item" data-label="Deployments">
          <span class="nav-icon" aria-hidden="true"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><polyline points="22,12 18,12 15,21 9,3 6,12 2,12"/></svg></span>
          <span class="nav-label">Deployments</span>
          <span class="nav-badge badge-orange">2</span>
        </a>
        <a href="#" class="nav-item" data-label="Logs">
          <span class="nav-icon" aria-hidden="true"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/></svg></span>
          <span class="nav-label">Logs</span>
        </a>
      </div>

      <div class="nav-section">
        <div class="nav-section-label">System</div>
        <a href="#" class="nav-item" data-label="Alerts">
          <span class="nav-icon" aria-hidden="true"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg></span>
          <span class="nav-label">Alerts</span>
          <span class="nav-badge badge-red">3</span>
        </a>
        <a href="#" class="nav-item" data-label="Settings">
          <span class="nav-icon" aria-hidden="true"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg></span>
          <span class="nav-label">Settings</span>
        </a>
        <a href="#" class="nav-item" data-label="Docs">
          <span class="nav-icon" aria-hidden="true"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg></span>
          <span class="nav-label">Docs</span>
        </a>
      </div>
    </nav>

    <div class="sidebar-foot">
      <div class="user-row">
        <div class="user-avatar">JL</div>
        <div class="user-info">
          <div class="user-name">Jordan Lee</div>
          <div class="user-handle">admin · Acme Corp</div>
        </div>
        <span class="user-menu-btn" aria-hidden="true"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="5" r="1"/><circle cx="12" cy="12" r="1"/><circle cx="12" cy="19" r="1"/></svg></span>
      </div>
    </div>
  </aside>

  <button class="collapse-btn" type="button" data-nb-sdb-toggle aria-label="Toggle sidebar" aria-expanded="true">
    <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><polyline points="15 18 9 12 15 6"/></svg>
  </button>

  <div class="main">
    <div class="topbar">
      <div class="breadcrumb">
        <span>hexlane</span>
        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><polyline points="9 18 15 12 9 6"/></svg>
        <span>Acme Corp</span>
        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><polyline points="9 18 15 12 9 6"/></svg>
        <strong>Dashboard</strong>
      </div>
      <div class="topbar-spacer"></div>
      <div class="topbar-search">
        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
        Search...
        <span class="search-shortcut">⌘K</span>
      </div>
      <div class="topbar-actions">
        <button class="topbar-icon" type="button" aria-label="Notifications">
          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
          <span class="notif-dot" aria-hidden="true"></span>
        </button>
        <button class="topbar-icon" type="button" aria-label="Command palette">
          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><polyline points="4 17 10 11 4 5"/><line x1="12" y1="19" x2="20" y2="19"/></svg>
        </button>
      </div>
    </div>

    <div class="content">
      <h1 class="page-title">Overview</h1>
      <p class="page-desc">Your workspace at a glance — updated just now</p>

      <div class="stats-row">
        <div class="stat-card">
          <div class="stat-label">Monthly Revenue</div>
          <div class="stat-value">$84.2k</div>
          <div class="stat-change up"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><polyline points="18 15 12 9 6 15"/></svg> +12.4%</div>
        </div>
        <div class="stat-card">
          <div class="stat-label">Active Users</div>
          <div class="stat-value">4,291</div>
          <div class="stat-change up"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><polyline points="18 15 12 9 6 15"/></svg> +8.1%</div>
        </div>
        <div class="stat-card">
          <div class="stat-label">Deployments</div>
          <div class="stat-value">138</div>
          <div class="stat-change down"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><polyline points="6 9 12 15 18 9"/></svg> −3.2%</div>
        </div>
        <div class="stat-card">
          <div class="stat-label">Uptime SLA</div>
          <div class="stat-value">99.97%</div>
          <div class="stat-change up"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><polyline points="18 15 12 9 6 15"/></svg> Stable</div>
        </div>
      </div>

      <div class="chart-area">
        <div class="chart-card">
          <div class="chart-title">Request Volume</div>
          <div class="chart-sub">Last 14 days — hover over bars</div>
          <div class="chart-bars" aria-hidden="true">
            <div class="bar bh-45"></div><div class="bar bh-60"></div><div class="bar bh-40"></div><div class="bar bh-70"></div><div class="bar bh-55"></div><div class="bar bh-80"></div><div class="bar active bh-90"></div><div class="bar bh-65"></div><div class="bar bh-75"></div><div class="bar bh-50"></div><div class="bar bh-85"></div><div class="bar bh-70"></div><div class="bar bh-95"></div><div class="bar bh-78"></div>
          </div>
        </div>
        <div class="chart-card">
          <div class="chart-title">Recent Activity</div>
          <div class="chart-sub">Live feed</div>
          <div class="activity-list">
            <div class="activity-item">
              <div class="activity-dot dot-green" aria-hidden="true"></div>
              <div class="activity-text"><strong>Deploy succeeded</strong> — production v2.4.1</div>
              <div class="activity-time">2m ago</div>
            </div>
            <div class="activity-item">
              <div class="activity-dot dot-blue" aria-hidden="true"></div>
              <div class="activity-text"><strong>Jordan Lee</strong> updated API keys</div>
              <div class="activity-time">14m</div>
            </div>
            <div class="activity-item">
              <div class="activity-dot dot-orange" aria-hidden="true"></div>
              <div class="activity-text"><strong>Alert triggered</strong> — latency spike</div>
              <div class="activity-time">1h</div>
            </div>
            <div class="activity-item">
              <div class="activity-dot dot-red" aria-hidden="true"></div>
              <div class="activity-text"><strong>Build failed</strong> — staging branch</div>
              <div class="activity-time">2h</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
```

**CSS:**
```css
/* ─── 04 hexlane — collapsible sidebar dashboard navbar UI ─────── */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

.nb-sdb {
  --nb-sdb-sidebar-w: 240px;
  --nb-sdb-sidebar-collapsed: 64px;
  --nb-sdb-bg: #0d1117;
  --nb-sdb-surface: #161b22;
  --nb-sdb-surface-2: #21262d;
  --nb-sdb-border: #30363d;
  --nb-sdb-text: #e6edf3;
  --nb-sdb-text-muted: #7d8590;
  --nb-sdb-text-dim: #484f58;
  --nb-sdb-accent: #58a6ff;
  --nb-sdb-accent-green: #3fb950;
  --nb-sdb-accent-orange: #d29922;
  --nb-sdb-accent-red: #f85149;
  --nb-sdb-accent-purple: #bc8cff;
  --nb-sdb-transition: 0.22s cubic-bezier(0.4, 0, 0.2, 1);

  position: relative;
  width: 100%;
  min-height: 720px;
  background: var(--nb-sdb-bg);
  color: var(--nb-sdb-text);
  font-family: 'IBM Plex Sans', sans-serif;
  display: flex;
  overflow: hidden;
  box-sizing: border-box;
}
.nb-sdb *, .nb-sdb *::before, .nb-sdb *::after { box-sizing: border-box; margin: 0; padding: 0; }

.nb-sdb aside { width: var(--nb-sdb-sidebar-w); background: var(--nb-sdb-surface); border-right: 1px solid var(--nb-sdb-border); display: flex; flex-direction: column; transition: width var(--nb-sdb-transition); position: relative; z-index: 50; overflow: hidden; flex-shrink: 0; }
.nb-sdb aside.collapsed { width: var(--nb-sdb-sidebar-collapsed); }

.nb-sdb .sidebar-logo { display: flex; align-items: center; gap: 10px; padding: 0 16px; height: 56px; border-bottom: 1px solid var(--nb-sdb-border); flex-shrink: 0; overflow: hidden; white-space: nowrap; }
.nb-sdb .logo-icon { width: 32px; height: 32px; border-radius: 8px; background: linear-gradient(135deg, var(--nb-sdb-accent), var(--nb-sdb-accent-purple)); display: flex; align-items: center; justify-content: center; font-size: 0.9rem; flex-shrink: 0; box-shadow: 0 2px 12px rgba(88,166,255,0.3); color: #fff; }
.nb-sdb .logo-text { font-family: 'IBM Plex Mono', monospace; font-size: 0.9rem; font-weight: 500; letter-spacing: -0.02em; color: var(--nb-sdb-text); transition: opacity var(--nb-sdb-transition), width var(--nb-sdb-transition); overflow: hidden; }
.nb-sdb .logo-dot { color: var(--nb-sdb-accent); }
.nb-sdb aside.collapsed .logo-text { opacity: 0; width: 0; }

/* Collapse toggle sits at the sidebar's outer edge. Lifted out of
   <aside> so aside's overflow:hidden (which clips the fading labels)
   doesn't also clip this button. Positioned absolute against the
   wrapper; its left coord tracks the sidebar width via :has(). */
.nb-sdb .collapse-btn {
  position: absolute;
  top: 68px;
  left: calc(var(--nb-sdb-sidebar-w) - 12px);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--nb-sdb-surface-2);
  border: 1px solid var(--nb-sdb-border);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--nb-sdb-text-muted);
  transition: background 0.15s, color 0.15s, left var(--nb-sdb-transition);
  z-index: 60;
}
.nb-sdb:has(aside.collapsed) .collapse-btn {
  left: calc(var(--nb-sdb-sidebar-collapsed) - 12px);
}
.nb-sdb .collapse-btn:hover { background: var(--nb-sdb-accent); color: #fff; border-color: var(--nb-sdb-accent); }
.nb-sdb .collapse-btn svg { transition: transform var(--nb-sdb-transition); }
.nb-sdb:has(aside.collapsed) .collapse-btn svg { transform: rotate(180deg); }

.nb-sdb .workspace { margin: 12px 10px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--nb-sdb-border); background: var(--nb-sdb-surface-2); display: flex; align-items: center; gap: 10px; cursor: pointer; transition: border-color 0.15s, background 0.15s; overflow: hidden; white-space: nowrap; flex-shrink: 0; }
.nb-sdb .workspace:hover { border-color: var(--nb-sdb-accent); background: rgba(88,166,255,0.05); }
.nb-sdb .ws-avatar { width: 24px; height: 24px; border-radius: 6px; background: linear-gradient(135deg, #3fb950, #1f6feb); flex-shrink: 0; font-size: 0.6rem; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 600; }
.nb-sdb .ws-info { flex: 1; min-width: 0; overflow: hidden; transition: opacity var(--nb-sdb-transition), width var(--nb-sdb-transition); }
.nb-sdb aside.collapsed .ws-info { opacity: 0; width: 0; }
.nb-sdb .ws-name { font-size: 0.75rem; font-weight: 500; color: var(--nb-sdb-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nb-sdb .ws-plan { font-size: 0.6rem; color: var(--nb-sdb-text-muted); letter-spacing: 0.05em; text-transform: uppercase; }
.nb-sdb .ws-chevron { color: var(--nb-sdb-text-dim); flex-shrink: 0; transition: opacity var(--nb-sdb-transition); }
.nb-sdb aside.collapsed .ws-chevron { opacity: 0; }

.nb-sdb .sidebar-nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 8px 0; scrollbar-width: thin; scrollbar-color: var(--nb-sdb-border) transparent; }
.nb-sdb .sidebar-nav::-webkit-scrollbar { width: 4px; }
.nb-sdb .sidebar-nav::-webkit-scrollbar-thumb { background: var(--nb-sdb-border); border-radius: 2px; }
.nb-sdb .nav-section { margin-bottom: 4px; }
.nb-sdb .nav-section-label { font-size: 0.6rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--nb-sdb-text-dim); padding: 8px 20px 4px; white-space: nowrap; overflow: hidden; transition: opacity var(--nb-sdb-transition); }
.nb-sdb aside.collapsed .nav-section-label { opacity: 0; }
.nb-sdb .nav-item { position: relative; display: flex; align-items: center; gap: 10px; padding: 7px 10px 7px 16px; margin: 1px 8px; border-radius: 8px; font-size: 0.82rem; font-weight: 400; color: var(--nb-sdb-text-muted); text-decoration: none; cursor: pointer; transition: background 0.12s, color 0.12s; white-space: nowrap; overflow: hidden; user-select: none; }
.nb-sdb .nav-item:hover { background: var(--nb-sdb-surface-2); color: var(--nb-sdb-text); }
.nb-sdb .nav-item.active { background: rgba(88,166,255,0.1); color: var(--nb-sdb-accent); }
.nb-sdb .nav-item.active::before { content: ''; position: absolute; left: 0; top: 20%; bottom: 20%; width: 3px; border-radius: 0 2px 2px 0; background: var(--nb-sdb-accent); }
.nb-sdb .nav-icon { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; opacity: 0.8; }
.nb-sdb .nav-item.active .nav-icon, .nb-sdb .nav-item:hover .nav-icon { opacity: 1; }
.nb-sdb .nav-label { transition: opacity var(--nb-sdb-transition), width var(--nb-sdb-transition); overflow: hidden; }
.nb-sdb aside.collapsed .nav-label { opacity: 0; width: 0; }
.nb-sdb .nav-badge { margin-left: auto; flex-shrink: 0; font-size: 0.6rem; font-weight: 600; padding: 2px 6px; border-radius: 100px; transition: opacity var(--nb-sdb-transition); }
.nb-sdb aside.collapsed .nav-badge { opacity: 0; }
.nb-sdb .badge-blue { background: rgba(88,166,255,0.15); color: var(--nb-sdb-accent); }
.nb-sdb .badge-green { background: rgba(63,185,80,0.15); color: var(--nb-sdb-accent-green); }
.nb-sdb .badge-orange { background: rgba(210,153,34,0.15); color: var(--nb-sdb-accent-orange); }
.nb-sdb .badge-red { background: rgba(248,81,73,0.15); color: var(--nb-sdb-accent-red); }

.nb-sdb aside.collapsed .nav-item::after { content: attr(data-label); position: absolute; left: calc(var(--nb-sdb-sidebar-collapsed) - 8px); top: 50%; transform: translateY(-50%); background: var(--nb-sdb-surface-2); color: var(--nb-sdb-text); font-size: 0.75rem; padding: 5px 10px; border-radius: 6px; border: 1px solid var(--nb-sdb-border); white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 0.15s; z-index: 100; box-shadow: 0 4px 16px rgba(0,0,0,0.4); }
.nb-sdb aside.collapsed .nav-item:hover::after { opacity: 1; }

.nb-sdb .sidebar-foot { border-top: 1px solid var(--nb-sdb-border); padding: 10px; flex-shrink: 0; overflow: hidden; }
.nb-sdb .user-row { display: flex; align-items: center; gap: 10px; padding: 6px 6px; border-radius: 8px; cursor: pointer; transition: background 0.12s; white-space: nowrap; overflow: hidden; }
.nb-sdb .user-row:hover { background: var(--nb-sdb-surface-2); }
.nb-sdb .user-avatar { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, var(--nb-sdb-accent-purple), var(--nb-sdb-accent)); flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 600; color: #fff; }
.nb-sdb .user-info { flex: 1; min-width: 0; overflow: hidden; transition: opacity var(--nb-sdb-transition), width var(--nb-sdb-transition); }
.nb-sdb aside.collapsed .user-info { opacity: 0; width: 0; }
.nb-sdb .user-name { font-size: 0.78rem; font-weight: 500; color: var(--nb-sdb-text); overflow: hidden; text-overflow: ellipsis; }
.nb-sdb .user-handle { font-size: 0.65rem; color: var(--nb-sdb-text-dim); overflow: hidden; text-overflow: ellipsis; }
.nb-sdb .user-menu-btn { color: var(--nb-sdb-text-dim); flex-shrink: 0; transition: opacity var(--nb-sdb-transition); }
.nb-sdb aside.collapsed .user-menu-btn { opacity: 0; }

.nb-sdb .main { flex: 1; display: flex; flex-direction: column; min-height: 720px; }
.nb-sdb .topbar { height: 56px; border-bottom: 1px solid var(--nb-sdb-border); display: flex; align-items: center; padding: 0 24px; gap: 16px; background: var(--nb-sdb-surface); flex-shrink: 0; }
.nb-sdb .breadcrumb { display: flex; align-items: center; gap: 6px; font-family: 'IBM Plex Mono', monospace; font-size: 0.72rem; color: var(--nb-sdb-text-muted); }
.nb-sdb .breadcrumb span { color: var(--nb-sdb-text-dim); }
.nb-sdb .breadcrumb strong { color: var(--nb-sdb-text); font-weight: 500; }
.nb-sdb .topbar-spacer { flex: 1; }
.nb-sdb .topbar-search { display: flex; align-items: center; gap: 8px; background: var(--nb-sdb-bg); border: 1px solid var(--nb-sdb-border); border-radius: 8px; padding: 6px 12px; color: var(--nb-sdb-text-muted); font-size: 0.75rem; cursor: pointer; transition: border-color 0.15s; }
.nb-sdb .topbar-search:hover { border-color: var(--nb-sdb-text-dim); }
.nb-sdb .search-shortcut { font-family: 'IBM Plex Mono', monospace; font-size: 0.6rem; background: var(--nb-sdb-surface-2); border: 1px solid var(--nb-sdb-border); border-radius: 4px; padding: 1px 5px; color: var(--nb-sdb-text-dim); margin-left: 24px; }
.nb-sdb .topbar-actions { display: flex; align-items: center; gap: 8px; }
.nb-sdb .topbar-icon { width: 32px; height: 32px; border-radius: 6px; border: 1px solid var(--nb-sdb-border); background: transparent; display: flex; align-items: center; justify-content: center; color: var(--nb-sdb-text-muted); cursor: pointer; transition: background 0.12s, color 0.12s; position: relative; }
.nb-sdb .topbar-icon:hover { background: var(--nb-sdb-surface-2); color: var(--nb-sdb-text); }
.nb-sdb .notif-dot { position: absolute; top: 6px; right: 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--nb-sdb-accent-red); border: 1.5px solid var(--nb-sdb-surface); }

.nb-sdb .content { padding: 28px; flex: 1; }
.nb-sdb .page-title { font-size: 1.2rem; font-weight: 600; color: var(--nb-sdb-text); margin-bottom: 4px; }
.nb-sdb .page-desc { font-size: 0.82rem; color: var(--nb-sdb-text-muted); margin-bottom: 24px; }
.nb-sdb .stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
.nb-sdb .stat-card { background: var(--nb-sdb-surface); border: 1px solid var(--nb-sdb-border); border-radius: 12px; padding: 18px 20px; transition: border-color 0.15s; }
.nb-sdb .stat-card:hover { border-color: var(--nb-sdb-text-dim); }
.nb-sdb .stat-label { font-size: 0.7rem; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; color: var(--nb-sdb-text-muted); margin-bottom: 10px; }
.nb-sdb .stat-value { font-family: 'IBM Plex Mono', monospace; font-size: 1.6rem; font-weight: 500; color: var(--nb-sdb-text); line-height: 1; margin-bottom: 8px; }
.nb-sdb .stat-change { font-size: 0.72rem; display: flex; align-items: center; gap: 4px; }
.nb-sdb .up { color: var(--nb-sdb-accent-green); }
.nb-sdb .down { color: var(--nb-sdb-accent-red); }
.nb-sdb .chart-area { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; }
.nb-sdb .chart-card { background: var(--nb-sdb-surface); border: 1px solid var(--nb-sdb-border); border-radius: 12px; padding: 20px; }
.nb-sdb .chart-title { font-size: 0.82rem; font-weight: 500; color: var(--nb-sdb-text); margin-bottom: 4px; }
.nb-sdb .chart-sub { font-size: 0.72rem; color: var(--nb-sdb-text-muted); margin-bottom: 16px; }
.nb-sdb .chart-bars { display: flex; align-items: flex-end; gap: 6px; height: 100px; }
.nb-sdb .bar { flex: 1; border-radius: 4px 4px 0 0; background: rgba(88,166,255,0.15); border: 1px solid rgba(88,166,255,0.2); transition: background 0.15s; }
.nb-sdb .bar:hover { background: rgba(88,166,255,0.35); }
.nb-sdb .bar.active { background: rgba(88,166,255,0.6); border-color: var(--nb-sdb-accent); }
.nb-sdb .bh-40 { height: 40%; } .nb-sdb .bh-45 { height: 45%; } .nb-sdb .bh-50 { height: 50%; }
.nb-sdb .bh-55 { height: 55%; } .nb-sdb .bh-60 { height: 60%; } .nb-sdb .bh-65 { height: 65%; }
.nb-sdb .bh-70 { height: 70%; } .nb-sdb .bh-75 { height: 75%; } .nb-sdb .bh-78 { height: 78%; }
.nb-sdb .bh-80 { height: 80%; } .nb-sdb .bh-85 { height: 85%; } .nb-sdb .bh-90 { height: 90%; } .nb-sdb .bh-95 { height: 95%; }
.nb-sdb .activity-list { display: flex; flex-direction: column; gap: 12px; }
.nb-sdb .activity-item { display: flex; gap: 10px; align-items: flex-start; }
.nb-sdb .activity-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 4px; }
.nb-sdb .dot-green { background: var(--nb-sdb-accent-green); }
.nb-sdb .dot-blue { background: var(--nb-sdb-accent); }
.nb-sdb .dot-orange { background: var(--nb-sdb-accent-orange); }
.nb-sdb .dot-red { background: var(--nb-sdb-accent-red); }
.nb-sdb .activity-text { font-size: 0.75rem; line-height: 1.5; color: var(--nb-sdb-text-muted); }
.nb-sdb .activity-text strong { color: var(--nb-sdb-text); }
.nb-sdb .activity-time { font-family: 'IBM Plex Mono', monospace; font-size: 0.65rem; color: var(--nb-sdb-text-dim); margin-left: auto; flex-shrink: 0; }

@media (max-width: 1024px) {
  .nb-sdb .stats-row { grid-template-columns: repeat(2, 1fr); }
  .nb-sdb .chart-area { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .nb-sdb .stats-row { grid-template-columns: 1fr; }
  .nb-sdb .search-shortcut { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .nb-sdb aside, .nb-sdb .nav-label, .nb-sdb .ws-info, .nb-sdb .user-info, .nb-sdb .collapse-btn svg { transition: none !important; }
}
```

**JS:**
```js
(() => {
  // Scoped collapsible-sidebar wiring. State lives on the wrapper, so
  // two instances of this demo on one page can each collapse
  // independently.
  const root = document.querySelector('.nb-sdb');
  if (!root) return;
  const sidebar = root.querySelector('[data-nb-sdb-sidebar]');
  const toggle = root.querySelector('[data-nb-sdb-toggle]');
  if (!sidebar || !toggle) return;

  toggle.addEventListener('click', () => {
    const collapsed = sidebar.classList.toggle('collapsed');
    toggle.setAttribute('aria-expanded', !collapsed);
  });

  // Click to set the active nav item, scoped to this sidebar.
  sidebar.querySelectorAll('.nav-item').forEach((item) => {
    item.addEventListener('click', (e) => {
      e.preventDefault();
      sidebar.querySelectorAll('.nav-item').forEach((i) => i.classList.remove('active'));
      item.classList.add('active');
    });
  });
})();
```

### 05. Sticky CSS Navbar on Scroll

**Type:** CSS + JS
**Description:** A sustainable lifestyle brand navbar UI that gracefully compresses on scroll — proving the right way to do scroll-transforming sticky navigation without janky reflow. The navbar starts at 96px tall with a large Fraunces serif "Sylvé" wordmark and a "Sustainable Living" sub-tagline beneath; as the page scrolls past 60px, a single class toggle (driven by IntersectionObserver scoped to this demo) compresses the bar to a 60px frosted-glass version, fades the sub-tagline out, and shrinks the wordmark to 1.3rem — all via pure CSS transitions, no JS animation loop. A 3px lime-to-clay gradient progress bar tracks reading depth at the very top of the wrapper. Below the navbar is a sage-and-sand long-form page: decorative circles in the hero, Fraunces italic "earth in mind" headline, a 3-up Regenerative/Zero-Waste/Transparent feature grid, a sage pull-quote divider, and a "Slow Living" journal section that gives readers reason to scroll. Fraunces + Mulish. Best for sustainable brands, lifestyle e-commerce, editorial product sites, slow-content brands, marketing pages that need scroll-aware chrome.

**HTML:**
```html
<section class="nb-stk" aria-label="Sylve sticky scroll navbar demo">
  <div class="progress-bar" data-nb-stk-progress aria-hidden="true"></div>

  <nav data-nb-stk-nav aria-label="Primary">
    <div class="nav-inner">
      <a href="#nb-stk-home" class="brand">
        <span class="brand-main">Sylvé</span>
        <span class="brand-sub">Sustainable Living</span>
      </a>
      <ul class="nav-links">
        <li><a href="#nb-stk-home" class="active">Home</a></li>
        <li><a href="#nb-stk-about">About</a></li>
        <li><a href="#nb-stk-products">Products</a></li>
        <li><a href="#nb-stk-journal">Journal</a></li>
        <li><a href="#nb-stk-contact">Contact</a></li>
      </ul>
      <div class="nav-actions">
        <button class="btn-ghost" type="button">Log in</button>
        <button class="btn-solid" type="button">Shop Now</button>
      </div>
    </div>
  </nav>

  <section class="hero" id="nb-stk-home">
    <div class="hero-circle hc-1" aria-hidden="true"></div>
    <div class="hero-circle hc-2" aria-hidden="true"></div>
    <div class="hero-circle hc-3" aria-hidden="true"></div>
    <div class="hero-circle hc-4" aria-hidden="true"></div>
    <div class="hero-inner">
      <p class="hero-eyebrow">New Collection 2026</p>
      <h1>Living in<br>full <em>bloom</em></h1>
      <p class="hero-body">Scroll down to watch the navbar gracefully compress and transform — growing more refined as you descend deeper into the page.</p>
      <div class="hero-ctas">
        <button class="cta-primary" type="button">Explore Collection</button>
        <a href="#nb-stk-about" class="cta-secondary">
          Learn more
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
        </a>
      </div>
    </div>
    <div class="scroll-hint" aria-hidden="true">
      <div class="scroll-mouse"></div>
      <span class="scroll-hint-text">Scroll to see nav transform</span>
    </div>
  </section>

  <section class="section" id="nb-stk-about">
    <div class="section-inner">
      <p class="section-label">Our Philosophy</p>
      <h2 class="section-title">Designed with the<br><em>earth in mind</em></h2>
      <p class="section-body">Every product in our collection is crafted with deep respect for natural systems. We source exclusively from regenerative farms and artisan workshops that prioritize ecological balance over extraction.</p>
      <div class="feature-grid">
        <div class="feature-card">
          <div class="feature-num">01</div>
          <div class="feature-title">Regenerative</div>
          <div class="feature-text">All materials sourced from certified regenerative agriculture operations that actively restore soil biodiversity.</div>
        </div>
        <div class="feature-card">
          <div class="feature-num">02</div>
          <div class="feature-title">Zero-Waste</div>
          <div class="feature-text">Our production process generates zero landfill waste. All offcuts are composted or repurposed into secondary goods.</div>
        </div>
        <div class="feature-card">
          <div class="feature-num">03</div>
          <div class="feature-title">Transparent</div>
          <div class="feature-text">Every product includes a full supply chain trace, from seed to shelf, available in your account dashboard.</div>
        </div>
      </div>
    </div>
  </section>

  <div class="divider-section" id="nb-stk-products">
    <div class="section-inner divider-inner">
      <h2>"The most sustainable product<br>is one that lasts a lifetime."</h2>
      <button type="button">Browse All Products →</button>
    </div>
  </div>

  <section class="section long-section" id="nb-stk-journal">
    <div class="section-inner">
      <p class="section-label">From the Journal</p>
      <h2 class="section-title">Stories of<br><em>slow living</em></h2>
      <p class="section-body">Reflections on seasonality, craft, ecology, and the small daily choices that accumulate into a life well-lived in relationship with the living world.</p>
    </div>
  </section>

  <section class="section long-section" id="nb-stk-contact">
    <div class="section-inner">
      <p class="section-label">Get in Touch</p>
      <h2 class="section-title">Let's grow<br><em>together</em></h2>
      <p class="section-body">Whether you're a stockist, collaborator, or simply curious — we'd love to hear from you. Reach us at hello@sylve.co</p>
    </div>
  </section>
</section>
```

**CSS:**
```css
/* ─── 05 Sylvé — sticky scroll-transforming navbar UI ──────────── */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,600;0,9..144,900;1,9..144,300;1,9..144,600&family=Mulish:wght@300;400;600&display=swap');

.nb-stk {
  --nb-stk-sage: #3a5a40;
  --nb-stk-sage-light: #4e7c57;
  --nb-stk-sand: #f7f4ef;
  --nb-stk-warm: #e8e0d0;
  --nb-stk-warm-2: #d4c9b4;
  --nb-stk-clay: #8b6f47;
  --nb-stk-text: #1c2417;
  --nb-stk-muted: #7a8c72;
  --nb-stk-nav-h-tall: 96px;
  --nb-stk-nav-h-short: 60px;

  position: relative;
  width: 100%;
  min-height: 1800px;
  background: var(--nb-stk-sand);
  color: var(--nb-stk-text);
  font-family: 'Mulish', sans-serif;
  /* overflow:clip keeps horizontal escapes contained without
     establishing a scrolling container — overflow:hidden would make
     this wrapper the scrolling ancestor for the sticky nav and break
     sticky behavior inside the iframe + gallery context. */
  overflow: clip;
  box-sizing: border-box;
  scroll-behavior: smooth;
}
.nb-stk *, .nb-stk *::before, .nb-stk *::after { box-sizing: border-box; margin: 0; padding: 0; }

.nb-stk .progress-bar { position: absolute; top: 0; left: 0; height: 3px; background: linear-gradient(90deg, var(--nb-stk-sage), var(--nb-stk-clay)); z-index: 200; transform-origin: left; transform: scaleX(0); transition: transform 0.05s linear; border-radius: 0 2px 2px 0; width: 100%; }

.nb-stk nav { position: sticky; top: 0; left: 0; right: 0; z-index: 100; height: var(--nb-stk-nav-h-tall); background: transparent; transition: height 0.4s cubic-bezier(0.4,0,0.2,1), background 0.4s ease, box-shadow 0.4s ease, border-bottom 0.4s ease; }
.nb-stk nav.scrolled { height: var(--nb-stk-nav-h-short); background: rgba(247,244,239,0.92); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 1px 0 rgba(58,90,64,0.1), 0 8px 32px rgba(28,36,23,0.06); }
.nb-stk .nav-inner { max-width: 1320px; margin: 0 auto; height: 100%; display: flex; align-items: center; padding: 0 3rem; gap: 2rem; transition: padding 0.4s cubic-bezier(0.4,0,0.2,1); }
.nb-stk nav.scrolled .nav-inner { padding: 0 2rem; }
.nb-stk .brand { text-decoration: none; flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-start; }
.nb-stk .brand-main { font-family: 'Fraunces', serif; font-size: 2rem; font-weight: 900; letter-spacing: -0.04em; color: var(--nb-stk-sage); line-height: 1; transition: font-size 0.4s cubic-bezier(0.4,0,0.2,1); }
.nb-stk .brand-sub { font-size: 0.55rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--nb-stk-muted); line-height: 1; margin-top: 3px; transition: opacity 0.3s, max-height 0.3s, margin 0.3s; max-height: 20px; overflow: hidden; }
.nb-stk nav.scrolled .brand-main { font-size: 1.3rem; }
.nb-stk nav.scrolled .brand-sub { opacity: 0; max-height: 0; margin: 0; }
.nb-stk .nav-links { display: flex; align-items: center; list-style: none; gap: 0.25rem; flex: 1; justify-content: center; }
.nb-stk .nav-links a { display: block; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--nb-stk-muted); text-decoration: none; padding: 8px 14px; border-radius: 100px; transition: color 0.2s, background 0.2s; position: relative; }
.nb-stk .nav-links a:hover { color: var(--nb-stk-sage); background: rgba(58,90,64,0.06); }
.nb-stk .nav-links a.active { color: var(--nb-stk-sage); background: rgba(58,90,64,0.1); }
.nb-stk .nav-actions { display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0; }
.nb-stk .btn-ghost { font-family: 'Mulish', sans-serif; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--nb-stk-sage); background: none; border: 1.5px solid var(--nb-stk-warm-2); border-radius: 100px; padding: 8px 18px; cursor: pointer; transition: border-color 0.2s, background 0.2s, color 0.2s; }
.nb-stk .btn-ghost:hover { border-color: var(--nb-stk-sage); background: rgba(58,90,64,0.04); }
.nb-stk .btn-solid { font-family: 'Mulish', sans-serif; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--nb-stk-sand); background: var(--nb-stk-sage); border: 1.5px solid var(--nb-stk-sage); border-radius: 100px; padding: 8px 20px; cursor: pointer; transition: background 0.2s, transform 0.15s; }
.nb-stk .btn-solid:hover { background: var(--nb-stk-sage-light); transform: translateY(-1px); }

.nb-stk .hero { min-height: 680px; display: flex; align-items: center; position: relative; overflow: hidden; padding-top: 1rem; }
.nb-stk .hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 70% 40%, rgba(58,90,64,0.06) 0%, transparent 60%), radial-gradient(ellipse at 20% 80%, rgba(139,111,71,0.06) 0%, transparent 50%); }
.nb-stk .hero-circle { position: absolute; border-radius: 50%; pointer-events: none; }
.nb-stk .hc-1 { width: 500px; height: 500px; border: 1px solid rgba(58,90,64,0.1); top: 10%; right: -100px; }
.nb-stk .hc-2 { width: 300px; height: 300px; border: 1px solid rgba(58,90,64,0.08); top: 25%; right: 50px; }
.nb-stk .hc-3 { width: 40px; height: 40px; background: rgba(58,90,64,0.12); bottom: 30%; left: 10%; animation: nb-stk-float 8s ease-in-out infinite; }
.nb-stk .hc-4 { width: 16px; height: 16px; background: var(--nb-stk-clay); opacity: 0.3; top: 35%; left: 25%; animation: nb-stk-float 12s ease-in-out infinite reverse; border-radius: 50%; }
@keyframes nb-stk-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px); } }
.nb-stk .hero-inner { max-width: 1320px; margin: 0 auto; padding: 4rem 3rem; position: relative; z-index: 1; width: 100%; }
.nb-stk .hero-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--nb-stk-clay); margin-bottom: 2rem; }
.nb-stk .hero-eyebrow::before { content: ''; width: 28px; height: 1.5px; background: var(--nb-stk-clay); }
.nb-stk h1 { font-family: 'Fraunces', serif; font-size: clamp(4rem, 7vw, 8rem); font-weight: 300; line-height: 1.05; letter-spacing: -0.03em; color: var(--nb-stk-text); margin-bottom: 2rem; max-width: 14ch; }
.nb-stk h1 em { font-style: italic; color: var(--nb-stk-sage); }
.nb-stk .hero-body { font-size: 1.05rem; color: var(--nb-stk-muted); line-height: 1.7; max-width: 42ch; margin-bottom: 2.5rem; }
.nb-stk .hero-ctas { display: flex; gap: 1rem; align-items: center; }
.nb-stk .cta-primary { font-family: 'Mulish', sans-serif; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--nb-stk-sand); background: var(--nb-stk-sage); border: none; border-radius: 100px; padding: 14px 32px; cursor: pointer; transition: background 0.2s, transform 0.15s; box-shadow: 0 4px 24px rgba(58,90,64,0.3); }
.nb-stk .cta-primary:hover { background: var(--nb-stk-sage-light); transform: translateY(-2px); }
.nb-stk .cta-secondary { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; font-weight: 600; color: var(--nb-stk-muted); text-decoration: none; transition: color 0.2s, gap 0.2s; }
.nb-stk .cta-secondary:hover { color: var(--nb-stk-sage); gap: 12px; }

.nb-stk .section { padding: 8rem 0; }
.nb-stk .section-inner { max-width: 1320px; margin: 0 auto; padding: 0 3rem; }
.nb-stk .section-label { font-size: 0.65rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--nb-stk-clay); margin-bottom: 1rem; display: flex; align-items: center; gap: 10px; }
.nb-stk .section-label::after { content: ''; flex: 1; max-width: 40px; height: 1px; background: var(--nb-stk-clay); }
.nb-stk .section-title { font-family: 'Fraunces', serif; font-size: clamp(2.5rem, 4vw, 4rem); font-weight: 300; letter-spacing: -0.02em; color: var(--nb-stk-text); line-height: 1.1; margin-bottom: 1.5rem; }
.nb-stk .section-title em { font-style: italic; color: var(--nb-stk-sage); }
.nb-stk .section-body { font-size: 1rem; color: var(--nb-stk-muted); max-width: 52ch; line-height: 1.75; }

.nb-stk .feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5px; margin-top: 4rem; background: var(--nb-stk-warm-2); border: 1.5px solid var(--nb-stk-warm-2); }
.nb-stk .feature-card { background: var(--nb-stk-sand); padding: 2.5rem 2rem; transition: background 0.2s; }
.nb-stk .feature-card:hover { background: var(--nb-stk-warm); }
.nb-stk .feature-num { font-family: 'Fraunces', serif; font-size: 2.5rem; font-weight: 900; color: rgba(58,90,64,0.12); line-height: 1; margin-bottom: 1rem; }
.nb-stk .feature-title { font-family: 'Fraunces', serif; font-size: 1.3rem; font-weight: 600; color: var(--nb-stk-text); margin-bottom: 0.75rem; }
.nb-stk .feature-text { font-size: 0.85rem; color: var(--nb-stk-muted); line-height: 1.65; }

.nb-stk .divider-section { background: var(--nb-stk-sage); padding: 5rem 0; text-align: center; position: relative; overflow: hidden; }
.nb-stk .divider-section::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(45deg, transparent, transparent 40px, rgba(255,255,255,0.02) 40px, rgba(255,255,255,0.02) 41px); }
.nb-stk .divider-inner { position: relative; z-index: 1; }
.nb-stk .divider-inner h2 { font-family: 'Fraunces', serif; font-size: clamp(2rem, 4vw, 4rem); font-weight: 300; font-style: italic; color: rgba(247,244,239,0.95); line-height: 1.2; margin-bottom: 2rem; }
.nb-stk .divider-inner button { font-family: 'Mulish', sans-serif; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--nb-stk-sage); background: var(--nb-stk-sand); border: none; border-radius: 100px; padding: 13px 30px; cursor: pointer; }
.nb-stk .long-section { padding: 6rem 0; border-top: 1px solid var(--nb-stk-warm-2); }

.nb-stk .scroll-hint { position: absolute; bottom: 3rem; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--nb-stk-muted); z-index: 1; }
.nb-stk .scroll-hint-text { font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; }
.nb-stk .scroll-mouse { width: 22px; height: 34px; border: 1.5px solid var(--nb-stk-warm-2); border-radius: 12px; display: flex; align-items: flex-start; justify-content: center; padding-top: 6px; }
.nb-stk .scroll-mouse::after { content: ''; width: 4px; height: 8px; background: var(--nb-stk-sage); border-radius: 2px; animation: nb-stk-scrollDot 1.8s ease-in-out infinite; }
@keyframes nb-stk-scrollDot { 0%, 100% { opacity: 1; transform: translateY(0); } 50% { opacity: 0.2; transform: translateY(6px); } }

@media (max-width: 768px) {
  .nb-stk .feature-grid { grid-template-columns: 1fr; }
  .nb-stk .hero-inner { padding: 3rem 1.5rem; }
  .nb-stk .section-inner { padding: 0 1.5rem; }
  .nb-stk .nav-links { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .nb-stk nav, .nb-stk .brand-main, .nb-stk .brand-sub, .nb-stk .hc-3, .nb-stk .hc-4, .nb-stk .scroll-mouse::after { animation: none !important; transition: none !important; }
}
```

**JS:**
```js
(() => {
  // Scoped sticky-scroll navbar wiring. The source mock bound a
  // `window.scroll` listener and read documentElement.scrollTop —
  // that would track the host gallery's scroll. Re-scope: use a
  // sentinel `hero` element to toggle the .scrolled class via
  // IntersectionObserver (fires when the hero top passes 60px below
  // the viewport top), and compute reading progress from the wrapper's
  // own bounding rect against the viewport.
  const root = document.querySelector('.nb-stk');
  if (!root) return;
  const nav = root.querySelector('[data-nb-stk-nav]');
  const progress = root.querySelector('[data-nb-stk-progress]');
  const hero = root.querySelector('.hero');
  if (!nav || !progress) return;

  // Toggle .scrolled when the hero crosses 60px below the viewport top.
  if (hero && 'IntersectionObserver' in window) {
    const io = new IntersectionObserver(
      ([entry]) => {
        // entry.boundingClientRect.top < -60 means the hero has scrolled
        // up past the threshold. We rely on entry.isIntersecting plus
        // the sentinel offset.
        const top = entry.boundingClientRect.top;
        nav.classList.toggle('scrolled', top < -60);
      },
      { threshold: [0], rootMargin: '-60px 0px 0px 0px' }
    );
    io.observe(hero);
  }

  function updateProgress() {
    const r = root.getBoundingClientRect();
    const vh = window.innerHeight;
    const total = root.offsetHeight - vh;
    if (total <= 0) { progress.style.transform = 'scaleX(0)'; return; }
    const scrolled = Math.min(Math.max(-r.top, 0), total);
    const pct = scrolled / total;
    progress.style.transform = 'scaleX(' + pct.toFixed(4) + ')';
  }
  window.addEventListener('scroll', updateProgress, { passive: true });
  window.addEventListener('resize', updateProgress);
  updateProgress();

  // Smooth scroll for in-page anchors.
  root.querySelectorAll('.nav-links a').forEach((a) => {
    a.addEventListener('click', (e) => {
      const href = a.getAttribute('href');
      if (!href || !href.startsWith('#')) return;
      const target = root.querySelector(href);
      if (!target) return;
      e.preventDefault();
      target.scrollIntoView({ behavior: 'smooth', block: 'start' });
      root.querySelectorAll('.nav-links a').forEach((l) => l.classList.remove('active'));
      a.classList.add('active');
    });
  });
})();
```

### 06. Full Screen Overlay CSS Menu

**Type:** CSS + JS
**Description:** A creative-agency full-screen overlay menu navbar UI for Kairos/Studio — proving that hamburger nav can be the headline interaction instead of an afterthought. Minimal dark header with a Space Mono "Kairos/Studio" wordmark (lime slash) and an asymmetric three-line hamburger button (28/18/28 px). Clicking the burger triggers a two-panel curtain wipe (panel 1 #09090b + panel 2 #0f0f11 with a 0.05s delay) that fills the demo, then reveals five giant Bebas Neue stacked menu items (01 Work / 02 Studio / 03 Services / 04 Journal / 05 Contact) that slide up from below with staggered 50ms-step delays. A right sidebar panel fades in showing selected work links, a pulsing-lime "Available for projects" status dot, and four monospace social links. Hover any item: text turns lime, a lime arrow slides in. Closing reverses the curtain. The demo page itself carries a giant "KAIROS" outlined-stroke background letterform, a corner deco block, a randomised 5x5 dot grid, and a "We craft the unusual." hero with a lime CTA. Bebas Neue + Outfit + Space Mono. Best for creative agency sites, design studios, motion/portfolio brands, asymmetric editorial sites, full-bleed creative landings.

**HTML:**
```html
<section class="nb-ovl" aria-label="Kairos Studio fullscreen overlay menu demo">
  <div class="overlay" data-nb-ovl-overlay aria-hidden="true">
    <div class="overlay-panel" aria-hidden="true"></div>
    <div class="overlay-panel overlay-panel-2" aria-hidden="true"></div>
    <div class="overlay-content">
      <nav class="overlay-nav" aria-label="Overlay menu">
        <div class="overlay-counter">NAVIGATION — 05 LINKS</div>
        <a href="#" class="menu-item" data-nb-ovl-link>
          <span class="item-line" aria-hidden="true"></span>
          <span class="menu-item-inner">
            <span class="item-num">01</span>
            <span class="item-label">Work</span>
            <span class="item-arrow" aria-hidden="true">→</span>
          </span>
        </a>
        <a href="#" class="menu-item" data-nb-ovl-link>
          <span class="item-line" aria-hidden="true"></span>
          <span class="menu-item-inner">
            <span class="item-num">02</span>
            <span class="item-label">Studio</span>
            <span class="item-arrow" aria-hidden="true">→</span>
          </span>
        </a>
        <a href="#" class="menu-item" data-nb-ovl-link>
          <span class="item-line" aria-hidden="true"></span>
          <span class="menu-item-inner">
            <span class="item-num">03</span>
            <span class="item-label">Services</span>
            <span class="item-arrow" aria-hidden="true">→</span>
          </span>
        </a>
        <a href="#" class="menu-item" data-nb-ovl-link>
          <span class="item-line" aria-hidden="true"></span>
          <span class="menu-item-inner">
            <span class="item-num">04</span>
            <span class="item-label">Journal</span>
            <span class="item-arrow" aria-hidden="true">→</span>
          </span>
        </a>
        <a href="#" class="menu-item" data-nb-ovl-link>
          <span class="item-line" aria-hidden="true"></span>
          <span class="menu-item-inner">
            <span class="item-num">05</span>
            <span class="item-label">Contact</span>
            <span class="item-arrow" aria-hidden="true">→</span>
          </span>
        </a>
      </nav>

      <aside class="overlay-sidebar">
        <div>
          <div class="sidebar-block">
            <div class="sidebar-label">Selected Work</div>
            <a href="#" class="sidebar-link">Brand Identity, Oasis Collective</a>
            <a href="#" class="sidebar-link">Motion Design, Volta Studio</a>
            <a href="#" class="sidebar-link">Web Design, Meridian Labs</a>
            <a href="#" class="sidebar-link">Campaign, Norda Athletics</a>
          </div>
        </div>
        <div>
          <div class="sidebar-block">
            <div class="sidebar-label">Currently</div>
            <div class="sidebar-status">
              <div class="status-dot" aria-hidden="true"></div>
              Available for projects — Q3 2026
            </div>
          </div>
          <div class="sidebar-block sidebar-block-spaced">
            <div class="sidebar-label">Follow</div>
            <div class="sidebar-social">
              <a href="#" class="social-link">Twitter</a>
              <a href="#" class="social-link">Instagram</a>
              <a href="#" class="social-link">Dribbble</a>
              <a href="#" class="social-link">LinkedIn</a>
            </div>
          </div>
        </div>
      </aside>
    </div>
  </div>

  <header>
    <a href="#" class="brand">Kairos<span class="slash">/</span>Studio</a>
    <div class="header-spacer"></div>
    <button class="menu-btn" type="button" data-nb-ovl-toggle aria-label="Open menu" aria-expanded="false">
      <span class="menu-line l1" aria-hidden="true"></span>
      <span class="menu-line l2" aria-hidden="true"></span>
      <span class="menu-line l3" aria-hidden="true"></span>
    </button>
  </header>

  <div class="page">
    <div class="bg-text" aria-hidden="true">KAIROS</div>
    <div class="corner-deco" aria-hidden="true">
      DESIGN STUDIO<br>
      EST. 2019<br>
      BERLIN — NYC
    </div>
    <div class="grid-deco" data-nb-ovl-dotgrid aria-hidden="true"></div>

    <div class="hero-content">
      <div class="hero-caption">
        <div>
          <div class="h-eyebrow">
            <div class="h-eyebrow-line" aria-hidden="true"></div>
            <div class="h-eyebrow-text">Selected work — 2026</div>
          </div>
          <h1 class="h-title">We craft<br>the un<span class="accent">usual.</span></h1>
        </div>
        <div class="h-right">
          <p class="h-desc">Click the hamburger above to trigger a full-screen overlay — bold typography slides in with staggered reveals and the menu becomes the moment.</p>
          <button class="h-cta" type="button" data-nb-ovl-open>
            Open the menu
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
          </button>
        </div>
      </div>
    </div>
  </div>
</section>
```

**CSS:**
```css
/* ─── 06 Kairos/Studio — fullscreen overlay menu navbar UI ─────── */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Outfit:wght@300;400;500;600&family=Space+Mono:ital,wght@0,400;1,400&display=swap');

.nb-ovl {
  --nb-ovl-void: #09090b;
  --nb-ovl-lime: #c8f135;
  --nb-ovl-lime-dim: #9bb822;
  --nb-ovl-off-white: #f0efeb;
  --nb-ovl-warm-grey: #a09fa0;
  --nb-ovl-border: rgba(240,239,235,0.1);

  position: relative;
  width: 100%;
  min-height: 720px;
  background: var(--nb-ovl-void);
  color: var(--nb-ovl-off-white);
  font-family: 'Outfit', sans-serif;
  overflow: hidden;
  box-sizing: border-box;
}
.nb-ovl *, .nb-ovl *::before, .nb-ovl *::after { box-sizing: border-box; margin: 0; padding: 0; }

.nb-ovl header { position: absolute; top: 0; left: 0; right: 0; z-index: 200; padding: 1.5rem 2.5rem; display: flex; align-items: center; mix-blend-mode: difference; }
.nb-ovl .brand { font-family: 'Space Mono', monospace; font-size: 1rem; font-weight: 400; letter-spacing: 0.04em; color: var(--nb-ovl-off-white); text-decoration: none; z-index: 10; position: relative; }
.nb-ovl .brand .slash { color: var(--nb-ovl-lime); margin: 0 2px; }
.nb-ovl .header-spacer { flex: 1; }
.nb-ovl .menu-btn { background: none; border: none; cursor: pointer; padding: 8px; display: flex; flex-direction: column; gap: 0; align-items: flex-end; z-index: 300; position: relative; }
.nb-ovl .menu-line { display: block; height: 1.5px; background: var(--nb-ovl-off-white); border-radius: 1px; transition: transform 0.4s cubic-bezier(0.23,1,0.32,1), width 0.3s ease, opacity 0.2s; }
.nb-ovl .l1 { width: 28px; margin-bottom: 6px; }
.nb-ovl .l2 { width: 18px; margin-bottom: 6px; }
.nb-ovl .l3 { width: 28px; }
.nb-ovl .menu-btn.open .l1 { transform: translateY(7.5px) rotate(45deg); width: 28px; }
.nb-ovl .menu-btn.open .l2 { opacity: 0; transform: scaleX(0); }
.nb-ovl .menu-btn.open .l3 { transform: translateY(-7.5px) rotate(-45deg); width: 28px; }

.nb-ovl .overlay { position: absolute; inset: 0; z-index: 150; pointer-events: none; overflow: hidden; }
.nb-ovl .overlay-panel { position: absolute; inset: 0; background: var(--nb-ovl-void); transform: translateY(-100%); transition: transform 0.65s cubic-bezier(0.86,0,0.07,1); }
.nb-ovl .overlay-panel-2 { background: #0f0f11; transition-delay: 0.05s; }
.nb-ovl .overlay.open .overlay-panel { transform: translateY(0); }
.nb-ovl .overlay.open { pointer-events: all; }
.nb-ovl .overlay:not(.open) .overlay-panel { transition: transform 0.5s cubic-bezier(0.86,0,0.07,1); transform: translateY(-100%); }
.nb-ovl .overlay.closing .overlay-panel { transform: translateY(-100%); }
.nb-ovl .overlay.closing .overlay-panel-2 { transition-delay: 0.05s; }

.nb-ovl .overlay-content { position: absolute; inset: 0; z-index: 10; display: grid; grid-template-columns: 1fr 340px; opacity: 0; transition: opacity 0.3s 0.2s; pointer-events: none; }
.nb-ovl .overlay.open .overlay-content { opacity: 1; pointer-events: all; }
.nb-ovl .overlay.closing .overlay-content { opacity: 0; transition-delay: 0s; }

.nb-ovl .overlay-nav { display: flex; flex-direction: column; justify-content: center; padding: 6rem 4rem; border-right: 1px solid var(--nb-ovl-border); overflow: hidden; }
.nb-ovl .overlay-counter { font-family: 'Space Mono', monospace; font-size: 0.65rem; letter-spacing: 0.15em; color: rgba(240,239,235,0.25); margin-bottom: 3rem; }
.nb-ovl .menu-item { display: flex; align-items: baseline; gap: 1.5rem; text-decoration: none; overflow: hidden; padding: 0.3rem 0; cursor: pointer; position: relative; }
.nb-ovl .menu-item-inner { display: flex; align-items: baseline; gap: 1.5rem; transform: translateY(100%); transition: transform 0.6s cubic-bezier(0.23,1,0.32,1); width: 100%; }
.nb-ovl .overlay.open .menu-item:nth-child(2) .menu-item-inner { transition-delay: 0.15s; transform: translateY(0); }
.nb-ovl .overlay.open .menu-item:nth-child(3) .menu-item-inner { transition-delay: 0.20s; transform: translateY(0); }
.nb-ovl .overlay.open .menu-item:nth-child(4) .menu-item-inner { transition-delay: 0.25s; transform: translateY(0); }
.nb-ovl .overlay.open .menu-item:nth-child(5) .menu-item-inner { transition-delay: 0.30s; transform: translateY(0); }
.nb-ovl .overlay.open .menu-item:nth-child(6) .menu-item-inner { transition-delay: 0.35s; transform: translateY(0); }
.nb-ovl .overlay.closing .menu-item .menu-item-inner { transform: translateY(-100%); transition-delay: 0s !important; transition-duration: 0.3s; }
.nb-ovl .item-num { font-family: 'Space Mono', monospace; font-size: 0.7rem; color: rgba(240,239,235,0.3); letter-spacing: 0.1em; flex-shrink: 0; margin-bottom: 4px; align-self: flex-end; }
.nb-ovl .item-label { font-family: 'Bebas Neue', sans-serif; font-size: clamp(4rem, 8vw, 8rem); font-weight: 400; letter-spacing: 0.02em; color: var(--nb-ovl-off-white); line-height: 0.9; transition: color 0.2s; position: relative; }
.nb-ovl .item-arrow { opacity: 0; transform: translateX(-10px); transition: opacity 0.2s, transform 0.2s; color: var(--nb-ovl-lime); font-size: 2rem; align-self: center; flex-shrink: 0; }
.nb-ovl .menu-item:hover .item-label { color: var(--nb-ovl-lime); }
.nb-ovl .menu-item:hover .item-num { color: var(--nb-ovl-lime); }
.nb-ovl .menu-item:hover .item-arrow { opacity: 1; transform: translateX(0); }
.nb-ovl .item-line { position: absolute; bottom: 0; left: 0; height: 1px; background: var(--nb-ovl-border); width: 100%; }

.nb-ovl .overlay-sidebar { padding: 6rem 2.5rem 3rem; display: flex; flex-direction: column; justify-content: space-between; gap: 2rem; opacity: 0; transform: translateX(20px); transition: opacity 0.4s 0.4s, transform 0.4s 0.4s; }
.nb-ovl .overlay.open .overlay-sidebar { opacity: 1; transform: translateX(0); }
.nb-ovl .overlay.closing .overlay-sidebar { opacity: 0; transform: translateX(20px); transition-delay: 0s; }
.nb-ovl .sidebar-block { display: flex; flex-direction: column; gap: 0.5rem; }
.nb-ovl .sidebar-block-spaced { margin-top: 1.5rem; }
.nb-ovl .sidebar-label { font-size: 0.58rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(240,239,235,0.3); margin-bottom: 0.5rem; }
.nb-ovl .sidebar-link { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; color: rgba(240,239,235,0.6); text-decoration: none; transition: color 0.15s; padding: 3px 0; }
.nb-ovl .sidebar-link:hover { color: var(--nb-ovl-off-white); }
.nb-ovl .sidebar-link::before { content: '→'; color: var(--nb-ovl-lime); font-size: 0.7rem; }
.nb-ovl .sidebar-status { display: flex; align-items: center; gap: 8px; font-size: 0.72rem; color: rgba(240,239,235,0.5); }
.nb-ovl .status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--nb-ovl-lime); box-shadow: 0 0 8px var(--nb-ovl-lime); flex-shrink: 0; animation: nb-ovl-pulse 2s ease-in-out infinite; }
@keyframes nb-ovl-pulse { 0%, 100% { box-shadow: 0 0 8px var(--nb-ovl-lime); } 50% { box-shadow: 0 0 16px var(--nb-ovl-lime); } }
.nb-ovl .sidebar-social { display: flex; gap: 1rem; flex-wrap: wrap; }
.nb-ovl .social-link { font-family: 'Space Mono', monospace; font-size: 0.6rem; letter-spacing: 0.1em; color: rgba(240,239,235,0.35); text-decoration: none; transition: color 0.15s; }
.nb-ovl .social-link:hover { color: var(--nb-ovl-lime); }

.nb-ovl .page { min-height: 720px; position: relative; overflow: hidden; }
.nb-ovl .page::before { content: ''; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.05'/%3E%3C/svg%3E"); pointer-events: none; z-index: 0; opacity: 0.6; }
.nb-ovl .bg-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-family: 'Bebas Neue', sans-serif; font-size: clamp(12rem, 25vw, 28rem); font-weight: 400; color: transparent; -webkit-text-stroke: 1px rgba(240,239,235,0.04); letter-spacing: 0.05em; white-space: nowrap; pointer-events: none; user-select: none; z-index: 0; line-height: 1; }
.nb-ovl .hero-content { position: relative; z-index: 1; min-height: 720px; display: flex; flex-direction: column; justify-content: flex-end; padding: 4rem 3rem; }
.nb-ovl .hero-caption { display: grid; grid-template-columns: auto 1fr; gap: 3rem; align-items: end; max-width: 1200px; }
.nb-ovl .h-eyebrow { display: flex; flex-direction: column; gap: 6px; margin-bottom: 1rem; }
.nb-ovl .h-eyebrow-line { width: 40px; height: 1.5px; background: var(--nb-ovl-lime); }
.nb-ovl .h-eyebrow-text { font-family: 'Space Mono', monospace; font-size: 0.65rem; letter-spacing: 0.15em; color: rgba(240,239,235,0.45); text-transform: uppercase; }
.nb-ovl .h-title { font-family: 'Bebas Neue', sans-serif; font-size: clamp(4rem, 10vw, 12rem); font-weight: 400; letter-spacing: 0.02em; line-height: 0.9; color: var(--nb-ovl-off-white); }
.nb-ovl .h-title .accent { color: var(--nb-ovl-lime); }
.nb-ovl .h-right { display: flex; flex-direction: column; justify-content: flex-end; gap: 1.5rem; padding-bottom: 0.5rem; }
.nb-ovl .h-desc { font-size: 0.9rem; color: rgba(240,239,235,0.5); line-height: 1.65; max-width: 36ch; }
.nb-ovl .h-cta { display: inline-flex; align-items: center; gap: 10px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--nb-ovl-void); background: var(--nb-ovl-lime); border: none; padding: 12px 24px; border-radius: 100px; cursor: pointer; transition: background 0.2s, transform 0.15s; width: fit-content; font-family: inherit; }
.nb-ovl .h-cta:hover { background: #d4f850; transform: translateX(4px); }
.nb-ovl .corner-deco { position: absolute; top: 2rem; right: 2rem; font-family: 'Space Mono', monospace; font-size: 0.6rem; letter-spacing: 0.12em; color: rgba(240,239,235,0.15); text-align: right; line-height: 2; z-index: 1; pointer-events: none; }
.nb-ovl .grid-deco { position: absolute; bottom: 3rem; right: 3rem; display: grid; grid-template-columns: repeat(5, 6px); grid-template-rows: repeat(5, 6px); gap: 4px; z-index: 1; pointer-events: none; }
.nb-ovl .grid-dot { width: 4px; height: 4px; border-radius: 50%; background: rgba(240,239,235,0.12); }
.nb-ovl .grid-dot.lit { background: var(--nb-ovl-lime); opacity: 0.6; }

@media (max-width: 768px) {
  .nb-ovl .hero-caption { grid-template-columns: 1fr; gap: 1.5rem; }
  .nb-ovl .overlay-content { grid-template-columns: 1fr; }
  .nb-ovl .overlay-sidebar { display: none; }
  .nb-ovl .overlay-nav { padding: 6rem 2rem; }
  .nb-ovl .item-label { font-size: clamp(3rem, 12vw, 6rem); }
  .nb-ovl header { padding: 1rem 1.25rem; }
}
@media (prefers-reduced-motion: reduce) {
  .nb-ovl .overlay-panel, .nb-ovl .menu-item-inner, .nb-ovl .overlay-sidebar, .nb-ovl .status-dot, .nb-ovl .menu-line { transition: none !important; animation: none !important; }
}
```

**JS:**
```js
(() => {
  // Scoped fullscreen-overlay wiring. Drops the source mock's
  // `document.body.style.overflow = 'hidden'` since the embedded
  // wrapper isn't the viewport. Escape-to-close listener bound to
  // the wrapper, so two demos can coexist on one page.
  const root = document.querySelector('.nb-ovl');
  if (!root) return;
  const overlay = root.querySelector('[data-nb-ovl-overlay]');
  const toggle = root.querySelector('[data-nb-ovl-toggle]');
  const opener = root.querySelector('[data-nb-ovl-open]');
  const dotGrid = root.querySelector('[data-nb-ovl-dotgrid]');
  if (!overlay || !toggle) return;

  // Build the 5x5 dot grid once.
  if (dotGrid && dotGrid.childElementCount === 0) {
    for (let i = 0; i < 25; i++) {
      const d = document.createElement('div');
      d.className = 'grid-dot' + (Math.random() > 0.7 ? ' lit' : '');
      dotGrid.appendChild(d);
    }
  }

  let isOpen = false;
  function openMenu() {
    isOpen = true;
    overlay.classList.remove('closing');
    overlay.classList.add('open');
    toggle.classList.add('open');
    toggle.setAttribute('aria-expanded', 'true');
    overlay.setAttribute('aria-hidden', 'false');
  }
  function closeMenu() {
    if (!isOpen) return;
    isOpen = false;
    overlay.classList.add('closing');
    toggle.classList.remove('open');
    toggle.setAttribute('aria-expanded', 'false');
    overlay.setAttribute('aria-hidden', 'true');
    setTimeout(() => {
      overlay.classList.remove('open', 'closing');
    }, 650);
  }

  toggle.addEventListener('click', () => { isOpen ? closeMenu() : openMenu(); });
  if (opener) opener.addEventListener('click', openMenu);

  // Close on any overlay menu item click.
  root.querySelectorAll('[data-nb-ovl-link]').forEach((link) => {
    link.addEventListener('click', (e) => {
      e.preventDefault();
      closeMenu();
    });
  });

  // Escape closes (only when overlay is open). Listener on wrapper so
  // multiple demos don't all close on one keypress.
  root.addEventListener('keydown', (e) => {
    if (e.key === 'Escape' && isOpen) closeMenu();
  });

  // Subtle dot animation, scoped.
  let dotTimer = null;
  if (dotGrid) {
    dotTimer = setInterval(() => {
      const dots = dotGrid.querySelectorAll('.grid-dot');
      if (!dots.length) return;
      const idx = Math.floor(Math.random() * dots.length);
      dots[idx].classList.toggle('lit');
    }, 800);
    root._nbOvlDotTimer = dotTimer;
  }
})();
```

### 07. CSS Navbar with Dark Mode Toggle

**Type:** CSS + JS
**Description:** A CSS navbar with a built-in dark mode toggle that flips the entire UI in under half a second — proving that semantic design tokens beat a `prefers-color-scheme` media query when you want users to control the theme themselves. The frosted backdrop-filter navbar carries a Linea wordmark + version chip, 5 active-dot nav links (Overview / Components / Templates / Docs / Changelog), and a custom track-and-thumb theme toggle that transitions between sun and moon icons with a 0.45s ease. Click triggers a radial flash overlay that ripples outward as the body recolors. Below the navbar: a hero with a live token preview panel (4 swatch cards for `--bg`, `--text`, `--accent`, `--border` updating their hex values in real time) + a `[data-theme]` CSS code block that re-renders + a stats strip (48 Tokens / 2 Themes / 0.45s Transition). Bottom features grid covers semantic-token theming, CSS-only transitions, WCAG AA contrast, and `localStorage` persistence. Epilogue + Fira Code. Best for design system docs, developer tool sites, modern SaaS landing pages, theme-toggle component galleries.

**HTML:**
```html
<section class="nb-drk" data-theme="light" aria-label="CSS navbar with dark mode toggle demo">
  <div class="theme-flash" data-nb-drk-flash aria-hidden="true"></div>

  <nav aria-label="Primary">
    <div class="nav-inner">
      <a href="#" class="brand">
        <div class="brand-mark">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5" aria-hidden="true"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
        </div>
        <div>
          <div class="brand-name">Linea</div>
          <div class="brand-tag">v3.2.0</div>
        </div>
      </a>

      <ul class="nav-links">
        <li><a href="#" class="active"><span class="link-dot"></span>Overview</a></li>
        <li><a href="#"><span class="link-dot"></span>Components</a></li>
        <li><a href="#"><span class="link-dot"></span>Templates</a></li>
        <li><a href="#"><span class="link-dot"></span>Docs</a></li>
        <li><a href="#"><span class="link-dot"></span>Changelog</a></li>
      </ul>

      <div class="nav-spacer"></div>

      <div class="nav-actions">
        <button class="theme-toggle" type="button" data-nb-drk-toggle aria-label="Toggle dark mode">
          <svg class="icon-sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>
          <div class="toggle-track"><div class="toggle-thumb"></div></div>
          <svg class="icon-moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
          <span class="toggle-label" data-nb-drk-label>Light</span>
        </button>
        <div class="nav-div" aria-hidden="true"></div>
        <button class="btn-ghost" type="button">Sign in</button>
        <button class="btn-fill" type="button">Get started</button>
      </div>
    </div>
  </nav>

  <div class="page">
    <section class="hero">
      <div class="hero-left">
        <div class="hero-pill">Now in v3 — See what's new</div>
        <h1>Design tokens<br>that <em>adapt</em><br>with you.</h1>
        <p class="hero-body">Every color, shadow, and surface in this UI is driven by semantic CSS custom properties. Watch them all flip in under half a second — click the toggle above.</p>
        <div class="hero-ctas">
          <button class="cta-main" type="button">Browse Components →</button>
          <a href="#" class="cta-link">
            View on GitHub
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"/></svg>
          </a>
        </div>
      </div>
      <div class="hero-right">
        <div class="preview-panel">
          <p class="preview-label">Live token preview — toggle the theme above</p>
          <div class="token-grid">
            <div class="token-card">
              <div class="token-swatch" data-nb-drk-swatch="bg"></div>
              <div class="token-name">--bg</div>
              <div class="token-val" data-nb-drk-val="bg">—</div>
            </div>
            <div class="token-card">
              <div class="token-swatch" data-nb-drk-swatch="text"></div>
              <div class="token-name">--text</div>
              <div class="token-val" data-nb-drk-val="text">—</div>
            </div>
            <div class="token-card">
              <div class="token-swatch" data-nb-drk-swatch="accent"></div>
              <div class="token-name">--accent</div>
              <div class="token-val" data-nb-drk-val="accent">—</div>
            </div>
            <div class="token-card">
              <div class="token-swatch" data-nb-drk-swatch="border"></div>
              <div class="token-name">--border</div>
              <div class="token-val" data-nb-drk-val="border">—</div>
            </div>
          </div>
          <div class="code-block">
<span class="code-attr">[data-theme=<span class="code-val">"<span data-nb-drk-theme-in-code>light</span>"</span>]</span> {<br>
&nbsp;&nbsp;<span class="code-attr">--bg</span>: <span class="code-val" data-nb-drk-code="bg">#fafaf8</span>;<br>
&nbsp;&nbsp;<span class="code-attr">--text</span>: <span class="code-val" data-nb-drk-code="text">#18181a</span>;<br>
&nbsp;&nbsp;<span class="code-attr">--accent</span>: <span class="code-val" data-nb-drk-code="accent">#e84a2f</span>;<br>
&nbsp;&nbsp;<span class="code-attr">--surface</span>: <span class="code-val" data-nb-drk-code="surface">#ffffff</span>;<br>
}
          </div>
          <div class="stat-strip">
            <div class="stat-item"><div class="stat-val">48</div><div class="stat-lbl">Tokens</div></div>
            <div class="stat-item"><div class="stat-val">2</div><div class="stat-lbl">Themes</div></div>
            <div class="stat-item"><div class="stat-val">0.45s</div><div class="stat-lbl">Transition</div></div>
          </div>
        </div>
      </div>
    </section>

    <div class="features">
      <div class="feature">
        <div class="feature-icon">◑</div>
        <div class="feature-title">Semantic tokens</div>
        <div class="feature-desc">Every value maps to intent, not raw colors. Theme by switching a single attribute.</div>
      </div>
      <div class="feature">
        <div class="feature-icon">⚡</div>
        <div class="feature-title">CSS-only transitions</div>
        <div class="feature-desc">No JavaScript required for the color shift. Pure CSS custom properties do the work.</div>
      </div>
      <div class="feature">
        <div class="feature-icon">♿</div>
        <div class="feature-title">WCAG AA+</div>
        <div class="feature-desc">Both themes pass contrast requirements for text, borders, and interactive states.</div>
      </div>
      <div class="feature">
        <div class="feature-icon">💾</div>
        <div class="feature-title">Persisted preference</div>
        <div class="feature-desc">Choice is saved to localStorage and respects prefers-color-scheme on first load.</div>
      </div>
    </div>
  </div>
</section>
```

**CSS:**
```css
/* ─── 07 Linea — CSS navbar with dark mode toggle UI ──────────── */
@import url('https://fonts.googleapis.com/css2?family=Epilogue:ital,wght@0,300;0,400;0,500;0,700;0,900;1,300;1,700&family=Fira+Code:wght@300;400;500&display=swap');

.nb-drk {
  --nb-drk-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --nb-drk-dur: 0.45s;

  position: relative;
  width: 100%;
  min-height: 720px;
  font-family: 'Epilogue', sans-serif;
  overflow: hidden;
  box-sizing: border-box;
  transition: background var(--nb-drk-dur) var(--nb-drk-ease), color var(--nb-drk-dur) var(--nb-drk-ease);
}
.nb-drk *, .nb-drk *::before, .nb-drk *::after { box-sizing: border-box; margin: 0; padding: 0; }

.nb-drk[data-theme="light"] {
  --nb-drk-bg:            #fafaf8;
  --nb-drk-bg-2:          #f2f1ee;
  --nb-drk-surface:       #ffffff;
  --nb-drk-surface-float: rgba(255,255,255,0.85);
  --nb-drk-border:        #e4e2dc;
  --nb-drk-border-soft:   rgba(0,0,0,0.06);
  --nb-drk-text:          #18181a;
  --nb-drk-text-2:        #5a5856;
  --nb-drk-text-3:        #a09e99;
  --nb-drk-accent:        #e84a2f;
  --nb-drk-accent-bg:     rgba(232,74,47,0.08);
  --nb-drk-toggle-track:  #e4e2dc;
  --nb-drk-toggle-thumb:  #18181a;
  --nb-drk-shadow-nav:    0 1px 0 var(--nb-drk-border), 0 4px 24px rgba(0,0,0,0.05);
  --nb-drk-shadow-card:   0 2px 16px rgba(0,0,0,0.07);
  --nb-drk-invert-text:   #fafaf8;
}
.nb-drk[data-theme="dark"] {
  --nb-drk-bg:            #111113;
  --nb-drk-bg-2:          #19191c;
  --nb-drk-surface:       #1e1e22;
  --nb-drk-surface-float: rgba(22,22,26,0.88);
  --nb-drk-border:        #2e2e34;
  --nb-drk-border-soft:   rgba(255,255,255,0.06);
  --nb-drk-text:          #f0efec;
  --nb-drk-text-2:        #9e9c97;
  --nb-drk-text-3:        #5c5a57;
  --nb-drk-accent:        #ff6b4a;
  --nb-drk-accent-bg:     rgba(255,107,74,0.1);
  --nb-drk-toggle-track:  #2e2e34;
  --nb-drk-toggle-thumb:  #f0efec;
  --nb-drk-shadow-nav:    0 1px 0 var(--nb-drk-border), 0 4px 32px rgba(0,0,0,0.3);
  --nb-drk-shadow-card:   0 2px 20px rgba(0,0,0,0.3);
  --nb-drk-invert-text:   #111113;
}
.nb-drk { background: var(--nb-drk-bg); color: var(--nb-drk-text); }

.nb-drk nav { position: absolute; top: 0; left: 0; right: 0; z-index: 100; height: 64px; background: var(--nb-drk-surface-float); backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%); border-bottom: 1px solid var(--nb-drk-border); box-shadow: var(--nb-drk-shadow-nav); transition: background var(--nb-drk-dur) var(--nb-drk-ease), border-color var(--nb-drk-dur) var(--nb-drk-ease), box-shadow var(--nb-drk-dur) var(--nb-drk-ease); }
.nb-drk .nav-inner { max-width: 1280px; margin: 0 auto; height: 100%; display: flex; align-items: center; padding: 0 2rem; gap: 2rem; }
.nb-drk .brand { text-decoration: none; display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.nb-drk .brand-mark { width: 28px; height: 28px; border-radius: 7px; background: var(--nb-drk-accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background var(--nb-drk-dur) var(--nb-drk-ease); }
.nb-drk .brand-mark svg { display: block; }
.nb-drk .brand-name { font-size: 1rem; font-weight: 700; letter-spacing: -0.02em; color: var(--nb-drk-text); transition: color var(--nb-drk-dur) var(--nb-drk-ease); }
.nb-drk .brand-tag { font-family: 'Fira Code', monospace; font-size: 0.6rem; font-weight: 300; color: var(--nb-drk-text-3); letter-spacing: 0.04em; transition: color var(--nb-drk-dur) var(--nb-drk-ease); }
.nb-drk .nav-links { display: flex; align-items: center; gap: 0; list-style: none; flex: 1; }
.nb-drk .nav-links a { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; font-weight: 500; color: var(--nb-drk-text-2); text-decoration: none; padding: 7px 13px; border-radius: 8px; transition: color var(--nb-drk-dur) var(--nb-drk-ease), background 0.18s var(--nb-drk-ease); white-space: nowrap; }
.nb-drk .nav-links a:hover { color: var(--nb-drk-text); background: var(--nb-drk-border-soft); }
.nb-drk .nav-links a.active { color: var(--nb-drk-text); background: var(--nb-drk-accent-bg); }
.nb-drk .nav-links a.active .link-dot { background: var(--nb-drk-accent); }
.nb-drk .link-dot { width: 5px; height: 5px; border-radius: 50%; background: transparent; flex-shrink: 0; transition: background var(--nb-drk-dur) var(--nb-drk-ease); }
.nb-drk .nav-spacer { flex: 1; }
.nb-drk .nav-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.nb-drk .theme-toggle { display: flex; align-items: center; gap: 9px; background: none; border: none; cursor: pointer; padding: 6px 10px; border-radius: 10px; transition: background 0.18s; font-family: inherit; color: inherit; }
.nb-drk .theme-toggle:hover { background: var(--nb-drk-border-soft); }
.nb-drk .toggle-track { width: 36px; height: 20px; border-radius: 100px; background: var(--nb-drk-toggle-track); border: 1.5px solid var(--nb-drk-border); position: relative; transition: background var(--nb-drk-dur) var(--nb-drk-ease), border-color var(--nb-drk-dur) var(--nb-drk-ease); flex-shrink: 0; }
.nb-drk .toggle-thumb { position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--nb-drk-toggle-thumb); transition: transform var(--nb-drk-dur) cubic-bezier(0.34, 1.56, 0.64, 1), background var(--nb-drk-dur) var(--nb-drk-ease); }
.nb-drk[data-theme="dark"] .toggle-thumb { transform: translateX(16px); }
.nb-drk .icon-sun, .nb-drk .icon-moon { width: 14px; height: 14px; transition: opacity 0.3s var(--nb-drk-ease), transform 0.4s var(--nb-drk-ease), color var(--nb-drk-dur) var(--nb-drk-ease); color: var(--nb-drk-text-2); }
.nb-drk[data-theme="light"] .icon-sun { opacity: 1; transform: rotate(0deg); }
.nb-drk[data-theme="light"] .icon-moon { opacity: 0.3; }
.nb-drk[data-theme="dark"] .icon-moon { opacity: 1; transform: rotate(-15deg); }
.nb-drk[data-theme="dark"] .icon-sun { opacity: 0.3; }
.nb-drk .toggle-label { font-family: 'Fira Code', monospace; font-size: 0.65rem; color: var(--nb-drk-text-3); transition: color var(--nb-drk-dur) var(--nb-drk-ease); white-space: nowrap; }
.nb-drk .nav-div { width: 1px; height: 20px; background: var(--nb-drk-border); transition: background var(--nb-drk-dur) var(--nb-drk-ease); }
.nb-drk .btn-ghost { font-family: 'Epilogue', sans-serif; font-size: 0.78rem; font-weight: 500; color: var(--nb-drk-text-2); background: none; border: 1px solid var(--nb-drk-border); border-radius: 8px; padding: 7px 15px; cursor: pointer; transition: color var(--nb-drk-dur) var(--nb-drk-ease), border-color var(--nb-drk-dur) var(--nb-drk-ease), background 0.18s; white-space: nowrap; }
.nb-drk .btn-ghost:hover { color: var(--nb-drk-text); border-color: var(--nb-drk-text-3); }
.nb-drk .btn-fill { font-family: 'Epilogue', sans-serif; font-size: 0.78rem; font-weight: 700; color: var(--nb-drk-invert-text); background: var(--nb-drk-text); border: none; border-radius: 8px; padding: 7px 16px; cursor: pointer; transition: background var(--nb-drk-dur) var(--nb-drk-ease), color var(--nb-drk-dur) var(--nb-drk-ease), transform 0.15s; white-space: nowrap; }
.nb-drk .btn-fill:hover { transform: translateY(-1px); }

.nb-drk .page { padding-top: 64px; }
.nb-drk .hero { min-height: 560px; display: grid; grid-template-columns: 1fr 1fr; }
.nb-drk .hero-left { padding: 5rem 4rem; display: flex; flex-direction: column; justify-content: center; border-right: 1px solid var(--nb-drk-border); transition: border-color var(--nb-drk-dur) var(--nb-drk-ease); }
.nb-drk .hero-pill { display: inline-flex; align-items: center; gap: 8px; font-family: 'Fira Code', monospace; font-size: 0.65rem; font-weight: 400; color: var(--nb-drk-accent); background: var(--nb-drk-accent-bg); border: 1px solid rgba(232,74,47,0.15); border-radius: 100px; padding: 5px 12px; margin-bottom: 2rem; width: fit-content; transition: color var(--nb-drk-dur) var(--nb-drk-ease), background var(--nb-drk-dur) var(--nb-drk-ease), border-color var(--nb-drk-dur) var(--nb-drk-ease); }
.nb-drk .hero-pill::before { content: '◉'; font-size: 0.55rem; }
.nb-drk h1 { font-size: clamp(2.8rem, 4.5vw, 5rem); font-weight: 900; letter-spacing: -0.04em; line-height: 1.0; color: var(--nb-drk-text); margin-bottom: 1.5rem; transition: color var(--nb-drk-dur) var(--nb-drk-ease); }
.nb-drk h1 em { font-style: italic; font-weight: 300; color: var(--nb-drk-accent); transition: color var(--nb-drk-dur) var(--nb-drk-ease); }
.nb-drk .hero-body { font-size: 1rem; color: var(--nb-drk-text-2); line-height: 1.7; max-width: 42ch; margin-bottom: 2.5rem; transition: color var(--nb-drk-dur) var(--nb-drk-ease); }
.nb-drk .hero-ctas { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.nb-drk .cta-main { font-family: 'Epilogue', sans-serif; font-size: 0.82rem; font-weight: 700; color: var(--nb-drk-invert-text); background: var(--nb-drk-text); border: none; border-radius: 10px; padding: 12px 22px; cursor: pointer; transition: background var(--nb-drk-dur) var(--nb-drk-ease), color var(--nb-drk-dur) var(--nb-drk-ease), transform 0.15s; }
.nb-drk .cta-main:hover { transform: translateY(-2px); }
.nb-drk .cta-link { font-size: 0.82rem; font-weight: 500; color: var(--nb-drk-text-2); text-decoration: none; transition: color 0.2s; display: flex; align-items: center; gap: 6px; }
.nb-drk .cta-link:hover { color: var(--nb-drk-text); }

.nb-drk .hero-right { padding: 3rem; display: flex; align-items: center; justify-content: center; background: var(--nb-drk-bg-2); transition: background var(--nb-drk-dur) var(--nb-drk-ease); }
.nb-drk .preview-panel { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 12px; }
.nb-drk .preview-label { font-family: 'Fira Code', monospace; font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--nb-drk-text-3); margin-bottom: 4px; transition: color var(--nb-drk-dur) var(--nb-drk-ease); }
.nb-drk .token-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 4px; }
.nb-drk .token-card { background: var(--nb-drk-surface); border: 1px solid var(--nb-drk-border); border-radius: 10px; padding: 12px 14px; transition: background var(--nb-drk-dur) var(--nb-drk-ease), border-color var(--nb-drk-dur) var(--nb-drk-ease), box-shadow var(--nb-drk-dur) var(--nb-drk-ease); box-shadow: var(--nb-drk-shadow-card); }
.nb-drk .token-swatch { width: 20px; height: 20px; border-radius: 5px; margin-bottom: 8px; border: 1px solid var(--nb-drk-border-soft); }
.nb-drk .token-name { font-family: 'Fira Code', monospace; font-size: 0.6rem; color: var(--nb-drk-text-3); transition: color var(--nb-drk-dur) var(--nb-drk-ease); margin-bottom: 2px; }
.nb-drk .token-val { font-family: 'Fira Code', monospace; font-size: 0.65rem; color: var(--nb-drk-text); font-weight: 500; transition: color var(--nb-drk-dur) var(--nb-drk-ease); }
.nb-drk .code-block { background: var(--nb-drk-surface); border: 1px solid var(--nb-drk-border); border-radius: 10px; padding: 14px 16px; font-family: 'Fira Code', monospace; font-size: 0.68rem; line-height: 1.8; color: var(--nb-drk-text-2); transition: background var(--nb-drk-dur) var(--nb-drk-ease), border-color var(--nb-drk-dur) var(--nb-drk-ease), color var(--nb-drk-dur) var(--nb-drk-ease); box-shadow: var(--nb-drk-shadow-card); }
.nb-drk .code-attr { color: var(--nb-drk-accent); transition: color var(--nb-drk-dur) var(--nb-drk-ease); }
.nb-drk .code-val { color: var(--nb-drk-text); transition: color var(--nb-drk-dur) var(--nb-drk-ease); }
.nb-drk .stat-strip { display: flex; gap: 0; background: var(--nb-drk-surface); border: 1px solid var(--nb-drk-border); border-radius: 10px; overflow: hidden; box-shadow: var(--nb-drk-shadow-card); transition: background var(--nb-drk-dur) var(--nb-drk-ease), border-color var(--nb-drk-dur) var(--nb-drk-ease); }
.nb-drk .stat-item { flex: 1; padding: 12px 14px; border-right: 1px solid var(--nb-drk-border); transition: border-color var(--nb-drk-dur) var(--nb-drk-ease); }
.nb-drk .stat-item:last-child { border-right: none; }
.nb-drk .stat-val { font-size: 1.2rem; font-weight: 900; letter-spacing: -0.03em; color: var(--nb-drk-text); line-height: 1; margin-bottom: 3px; transition: color var(--nb-drk-dur) var(--nb-drk-ease); }
.nb-drk .stat-lbl { font-size: 0.62rem; color: var(--nb-drk-text-3); font-weight: 500; letter-spacing: 0.04em; transition: color var(--nb-drk-dur) var(--nb-drk-ease); }

.nb-drk .theme-flash { position: absolute; inset: 0; z-index: 99; pointer-events: none; opacity: 0; border-radius: 50%; transform: scale(0); }
.nb-drk .theme-flash.animate { animation: nb-drk-ripple 0.55s ease-out forwards; }
@keyframes nb-drk-ripple {
  0%   { opacity: 0.12; transform: scale(0); border-radius: 50%; }
  60%  { opacity: 0.06; transform: scale(3); }
  100% { opacity: 0; transform: scale(5); }
}

.nb-drk .features { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--nb-drk-border); transition: border-color var(--nb-drk-dur) var(--nb-drk-ease); }
.nb-drk .feature { padding: 2.5rem 2rem; border-right: 1px solid var(--nb-drk-border); transition: background 0.2s, border-color var(--nb-drk-dur) var(--nb-drk-ease); }
.nb-drk .feature:last-child { border-right: none; }
.nb-drk .feature:hover { background: var(--nb-drk-bg-2); }
.nb-drk .feature-icon { width: 36px; height: 36px; border-radius: 9px; background: var(--nb-drk-accent-bg); display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; color: var(--nb-drk-accent); font-size: 1rem; transition: background var(--nb-drk-dur) var(--nb-drk-ease); }
.nb-drk .feature-title { font-size: 0.88rem; font-weight: 700; color: var(--nb-drk-text); margin-bottom: 0.4rem; letter-spacing: -0.01em; transition: color var(--nb-drk-dur) var(--nb-drk-ease); }
.nb-drk .feature-desc { font-size: 0.78rem; color: var(--nb-drk-text-2); line-height: 1.6; transition: color var(--nb-drk-dur) var(--nb-drk-ease); }

@media (max-width: 900px) {
  .nb-drk .hero { grid-template-columns: 1fr; }
  .nb-drk .hero-left { border-right: none; border-bottom: 1px solid var(--nb-drk-border); padding: 3rem 2rem; }
  .nb-drk .hero-right { padding: 2rem; }
  .nb-drk .features { grid-template-columns: 1fr 1fr; }
  .nb-drk .feature:nth-child(2) { border-right: none; }
  .nb-drk .feature:nth-child(3), .nb-drk .feature:nth-child(4) { border-top: 1px solid var(--nb-drk-border); }
  .nb-drk .nav-links { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .nb-drk *, .nb-drk *::before, .nb-drk *::after { transition: none !important; animation: none !important; }
}
```

**JS:**
```js
(() => {
  // Scoped dark-mode toggle. Theme attribute lives on the wrapper, not
  // <html>, so multiple instances on a page each carry their own theme
  // state. The source mock used localStorage + prefers-color-scheme —
  // both dropped because the embedded demo doesn't own the host page's
  // theme preference. The radial flash overlay is bounded to the
  // wrapper (position:absolute) so it doesn't escape into the gallery.
  const root = document.querySelector('.nb-drk');
  if (!root) return;
  const toggle = root.querySelector('[data-nb-drk-toggle]');
  const label = root.querySelector('[data-nb-drk-label]');
  const flash = root.querySelector('[data-nb-drk-flash]');
  if (!toggle || !label || !flash) return;

  const tokens = {
    light: { bg: '#fafaf8', text: '#18181a', accent: '#e84a2f', border: '#e4e2dc', surface: '#ffffff' },
    dark:  { bg: '#111113', text: '#f0efec', accent: '#ff6b4a', border: '#2e2e34', surface: '#1e1e22' },
  };

  function updatePreview(theme) {
    const t = tokens[theme];
    for (const key of ['bg', 'text', 'accent', 'border']) {
      const valEl = root.querySelector('[data-nb-drk-val="' + key + '"]');
      const swatchEl = root.querySelector('[data-nb-drk-swatch="' + key + '"]');
      if (valEl) valEl.textContent = t[key];
      if (swatchEl) swatchEl.style.background = t[key];
    }
    for (const key of ['bg', 'text', 'accent', 'surface']) {
      const codeEl = root.querySelector('[data-nb-drk-code="' + key + '"]');
      if (codeEl) codeEl.textContent = t[key];
    }
    const themeInCode = root.querySelector('[data-nb-drk-theme-in-code]');
    if (themeInCode) themeInCode.textContent = theme;
    label.textContent = theme === 'dark' ? 'Dark' : 'Light';
  }

  function triggerFlash(theme) {
    flash.style.background = theme === 'dark' ? '#f0efec' : '#111113';
    flash.classList.remove('animate');
    // Force reflow so the animation restarts.
    void flash.offsetWidth;
    flash.classList.add('animate');
  }

  function applyTheme(theme) {
    root.setAttribute('data-theme', theme);
    updatePreview(theme);
  }

  // Seed from the wrapper's current data-theme (default "light" via HTML).
  applyTheme(root.getAttribute('data-theme') || 'light');

  toggle.addEventListener('click', () => {
    const next = root.getAttribute('data-theme') === 'dark' ? 'light' : 'dark';
    triggerFlash(next);
    applyTheme(next);
  });
})();
```

### 08. CSS Navbar with Underline Hover Animation

**Type:** CSS + JS
**Description:** A minimalist CSS navbar with three distinct underline hover animation techniques side-by-side — proving that the most elegant nav effects come from doing less, not more. Variant 1 (the production nav at top) uses a JS-driven magnetic ink line: a single absolutely-positioned 1.5px rail glides between hovered items via getBoundingClientRect, with a red static line marking the active item. Variant 2 is pure CSS — each link owns an `::after` pseudo-element that starts at `left: 50%; right: 50%` (zero width, centered) and expands outward to the padding edge on hover, blooming symmetrically. Variant 3 uses the same `::after` trick but transitions only one edge, producing a left-anchored directional wipe. The page includes a Libre Baskerville serif "art of the quiet hover" hero, an A–Z alphabet ticker where every letter gets the underline treatment, and a 4-row showcase list where each title gets a 2px red underline wipe on hover. Libre Baskerville + Instrument Sans. Best for editorial sites, personal portfolios, design studio navs, content-led blogs, minimalist typography-first layouts.

**HTML:**
```html
<section class="nb-und" aria-label="CSS navbar with underline hover animation demo">
  <nav aria-label="Primary">
    <div class="nav-inner">
      <a href="#" class="brand">Thesis</a>

      <div class="nav-links-wrap" data-nb-und-wrap>
        <div class="ink-line" data-nb-und-line aria-hidden="true"></div>
        <div class="ink-line-static" data-nb-und-static aria-hidden="true"></div>

        <ul class="nav-links" data-nb-und-nav>
          <li><a href="#" class="active"><span>Studio</span></a></li>
          <li><a href="#"><span>Work</span></a></li>
          <li><a href="#"><span>Writing</span></a></li>
          <li><a href="#"><span>Process</span></a></li>
          <li><a href="#"><span>Archive</span></a></li>
          <li><a href="#"><span>Contact</span></a></li>
        </ul>
      </div>

      <div class="nav-spacer"></div>

      <div class="nav-end">
        <a href="#">Index</a>
        <div class="nav-end-dot" aria-hidden="true"></div>
        <a href="#">RSS</a>
        <div class="nav-end-dot" aria-hidden="true"></div>
        <button class="btn-nav" type="button">Inquire</button>
      </div>
    </div>
  </nav>

  <div class="page">
    <div class="hero">
      <div class="hero-left">
        <h1>The art of<br>the <em>quiet</em><br>hover.</h1>
        <p>Three distinct CSS underline animation techniques — each achieving elegance through restraint. The navbar above uses a magnetic sliding ink line that follows your cursor. Below, explore every method.</p>
      </div>
      <div class="hero-right">
        <p>"Typography is a <strong>silent conversation</strong> — the best underlines join it without interrupting. Hover the navigation above and each demo below to see them in motion."</p>
      </div>
    </div>

    <div class="section-rule"></div>

    <section class="section">
      <div class="variant-label">
        <span class="variant-num">01</span>
        <div class="variant-info">
          <h3>Magnetic Sliding Line — Single Global Rail</h3>
          <p>One line glides beneath the entire nav, tracking the hovered link. Active item uses a static accent-colored line.</p>
        </div>
      </div>
      <div class="demo-nav">
        <div class="nav-links-wrap demo-wrap" data-nb-und-demo-wrap>
          <div class="ink-line" data-nb-und-demo-line aria-hidden="true"></div>
          <div class="ink-line-static" data-nb-und-demo-static aria-hidden="true"></div>
          <ul class="nav-links" data-nb-und-demo-nav>
            <li><a href="#" class="active"><span>Objects</span></a></li>
            <li><a href="#"><span>Spaces</span></a></li>
            <li><a href="#"><span>Systems</span></a></li>
            <li><a href="#"><span>Texts</span></a></li>
            <li><a href="#"><span>People</span></a></li>
          </ul>
        </div>
      </div>
      <p class="code-note">
        One <code>.ink-line</code> element is positioned with JS using <code>getBoundingClientRect()</code> on each hover target.
        CSS <code>transition: left, width</code> with <code>cubic-bezier(0.25,1,0.5,1)</code> creates the magnetic feel.
        The static <code>.ink-line-static</code> marks the active item in accent red.
      </p>
    </section>

    <div class="section-rule"></div>

    <section class="section">
      <div class="variant-label">
        <span class="variant-num">02</span>
        <div class="variant-info">
          <h3>Center-Bloom — Per-Link <code>::after</code> Pseudo-Element</h3>
          <p>Each link owns its underline. On hover, it expands from the center outward — no JavaScript needed at all.</p>
        </div>
      </div>
      <div class="demo-nav">
        <ul class="nav-links-v2">
          <li><a href="#" class="active">Foundations</a></li>
          <li><a href="#">Components</a></li>
          <li><a href="#">Patterns</a></li>
          <li><a href="#">Motion</a></li>
          <li><a href="#">Tokens</a></li>
        </ul>
      </div>
      <p class="code-note">
        CSS only. Each <code>a::after</code> starts at <code>left: 50%; right: 50%</code> (zero width, centered).
        On <code>:hover</code>, <code>left</code> and <code>right</code> both animate to the padding value — blooming outward symmetrically.
      </p>
    </section>

    <div class="section-rule"></div>

    <section class="section">
      <div class="variant-label">
        <span class="variant-num">03</span>
        <div class="variant-info">
          <h3>Left-Wipe — Directional Reveal</h3>
          <p>The underline sweeps in from the left, anchored to the link's left edge. Clean, directional, editorial.</p>
        </div>
      </div>
      <div class="demo-nav">
        <ul class="nav-links-v3">
          <li><a href="#" class="active">Editorial</a></li>
          <li><a href="#">Research</a></li>
          <li><a href="#">Narrative</a></li>
          <li><a href="#">Margins</a></li>
          <li><a href="#">Colophon</a></li>
        </ul>
      </div>
      <p class="code-note">
        CSS only. <code>a::before</code> starts at <code>left: 50%; right: 50%</code> and transitions to <code>left: 1.1rem; right: 1.1rem</code>.
        The asymmetric easing of <code>left</code> gives it the wipe directionality.
      </p>
    </section>

    <div class="section-rule"></div>

    <div class="alphabet-demo">
      <p class="alpha-label">Every link, same principle — hover any letter</p>
      <div class="alpha-links" data-nb-und-alpha></div>
    </div>

    <div class="section-rule"></div>

    <div class="showcase">
      <div class="showcase-item">
        <span class="showcase-title">Clarity</span>
        <div class="showcase-right">
          <span class="showcase-meta">Principle 01</span>
          <span class="showcase-arrow" aria-hidden="true">→</span>
        </div>
      </div>
      <div class="showcase-item">
        <span class="showcase-title">Restraint</span>
        <div class="showcase-right">
          <span class="showcase-meta">Principle 02</span>
          <span class="showcase-arrow" aria-hidden="true">→</span>
        </div>
      </div>
      <div class="showcase-item">
        <span class="showcase-title">Intention</span>
        <div class="showcase-right">
          <span class="showcase-meta">Principle 03</span>
          <span class="showcase-arrow" aria-hidden="true">→</span>
        </div>
      </div>
      <div class="showcase-item">
        <span class="showcase-title">Motion</span>
        <div class="showcase-right">
          <span class="showcase-meta">Principle 04</span>
          <span class="showcase-arrow" aria-hidden="true">→</span>
        </div>
      </div>
    </div>
  </div>
</section>
```

**CSS:**
```css
/* ─── 08 Thesis — CSS navbar underline hover animation UI ─────── */
@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Instrument+Sans:ital,wght@0,400;0,500;0,600;1,400&display=swap');

.nb-und {
  --nb-und-paper: #f8f6f1;
  --nb-und-ink: #1a1916;
  --nb-und-ink-2: #6b6760;
  --nb-und-ink-3: #b5b2ac;
  --nb-und-rule: #e0ddd6;
  --nb-und-red: #c93a24;
  --nb-und-nav-h: 70px;

  position: relative;
  width: 100%;
  min-height: 1600px;
  background: var(--nb-und-paper);
  color: var(--nb-und-ink);
  font-family: 'Instrument Sans', sans-serif;
  overflow: clip;
  box-sizing: border-box;
}
.nb-und *, .nb-und *::before, .nb-und *::after { box-sizing: border-box; margin: 0; padding: 0; }

.nb-und nav { position: absolute; top: 0; left: 0; right: 0; z-index: 100; height: var(--nb-und-nav-h); background: var(--nb-und-paper); border-bottom: 1px solid var(--nb-und-rule); }
.nb-und .nav-inner { max-width: 1440px; margin: 0 auto; height: 100%; display: flex; align-items: center; padding: 0 3rem; }
.nb-und .brand { font-family: 'Libre Baskerville', serif; font-size: 1.2rem; font-weight: 700; letter-spacing: -0.01em; color: var(--nb-und-ink); text-decoration: none; flex-shrink: 0; margin-right: 4rem; }

.nb-und .nav-links-wrap { flex: 1; position: relative; display: flex; align-items: center; }
.nb-und .nav-links { display: flex; align-items: center; list-style: none; gap: 0; }
.nb-und .ink-line { position: absolute; bottom: -1px; height: 1.5px; background: var(--nb-und-ink); transition: left 0.38s cubic-bezier(0.25, 1, 0.5, 1), width 0.38s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.25s; pointer-events: none; opacity: 0; }
.nb-und .ink-line.visible { opacity: 1; }
.nb-und .ink-line-static { position: absolute; bottom: -1px; height: 1.5px; background: var(--nb-und-red); pointer-events: none; transition: left 0.4s cubic-bezier(0.25, 1, 0.5, 1), width 0.4s; }

.nb-und .nav-links a { display: flex; align-items: center; font-size: 0.8rem; font-weight: 500; letter-spacing: 0.04em; color: var(--nb-und-ink-2); text-decoration: none; padding: 0 1.1rem; height: var(--nb-und-nav-h); transition: color 0.22s; position: relative; white-space: nowrap; }
.nb-und .nav-links a:hover { color: var(--nb-und-ink); }
.nb-und .nav-links a.active { color: var(--nb-und-ink); }
.nb-und .nav-links a span { display: inline-block; transition: letter-spacing 0.35s cubic-bezier(0.25, 1, 0.5, 1); }
.nb-und .nav-links a:hover span { letter-spacing: 0.09em; }
.nb-und .nav-links a.active span { letter-spacing: 0.02em; }

/* Variant 2 — center-bloom (pure CSS) */
.nb-und .nav-links-v2 { display: flex; align-items: center; list-style: none; gap: 0; }
.nb-und .nav-links-v2 a { display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 500; letter-spacing: 0.04em; color: var(--nb-und-ink-2); text-decoration: none; padding: 0 1.1rem; height: var(--nb-und-nav-h); position: relative; white-space: nowrap; transition: color 0.22s; }
.nb-und .nav-links-v2 a:hover { color: var(--nb-und-ink); }
.nb-und .nav-links-v2 a.active { color: var(--nb-und-ink); }
.nb-und .nav-links-v2 a::after { content: ''; position: absolute; bottom: 0; left: 50%; right: 50%; height: 1.5px; background: var(--nb-und-ink); transition: left 0.35s cubic-bezier(0.25, 1, 0.5, 1), right 0.35s cubic-bezier(0.25, 1, 0.5, 1); }
.nb-und .nav-links-v2 a.active::after { background: var(--nb-und-red); left: 1.1rem; right: 1.1rem; }
.nb-und .nav-links-v2 a:hover::after { left: 1.1rem; right: 1.1rem; }

/* Variant 3 — left-wipe */
.nb-und .nav-links-v3 { display: flex; align-items: center; list-style: none; gap: 0; }
.nb-und .nav-links-v3 a { display: flex; align-items: center; height: var(--nb-und-nav-h); padding: 0 1.1rem; text-decoration: none; white-space: nowrap; position: relative; overflow: hidden; font-size: 0.8rem; font-weight: 500; letter-spacing: 0.04em; color: var(--nb-und-ink-2); transition: color 0.22s; }
.nb-und .nav-links-v3 a:hover, .nb-und .nav-links-v3 a.active { color: var(--nb-und-ink); }
.nb-und .nav-links-v3 a::before { content: ''; position: absolute; bottom: 0; left: 50%; right: 50%; height: 1.5px; background: var(--nb-und-ink); transition: left 0.3s ease, right 0.3s ease; }
.nb-und .nav-links-v3 a:hover::before { left: 1.1rem; right: 1.1rem; }
.nb-und .nav-links-v3 a.active::before { left: 1.1rem; right: 1.1rem; background: var(--nb-und-red); }

.nb-und .nav-spacer { flex: 1; }
.nb-und .nav-end { display: flex; align-items: center; gap: 1.5rem; flex-shrink: 0; }
.nb-und .nav-end a { font-size: 0.78rem; font-weight: 500; letter-spacing: 0.04em; color: var(--nb-und-ink-2); text-decoration: none; transition: color 0.2s; position: relative; }
.nb-und .nav-end a::after { content: ''; position: absolute; bottom: -2px; left: 50%; right: 50%; height: 1px; background: var(--nb-und-ink); transition: left 0.3s ease, right 0.3s ease; }
.nb-und .nav-end a:hover { color: var(--nb-und-ink); }
.nb-und .nav-end a:hover::after { left: 0; right: 0; }
.nb-und .nav-end-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--nb-und-rule); }
.nb-und .btn-nav { font-family: 'Instrument Sans', sans-serif; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; color: var(--nb-und-paper); background: var(--nb-und-ink); border: none; padding: 8px 18px; border-radius: 2px; cursor: pointer; transition: background 0.2s; }
.nb-und .btn-nav:hover { background: var(--nb-und-red); }

.nb-und .page { padding-top: var(--nb-und-nav-h); }

.nb-und .hero { padding: 6rem 3rem 4rem; max-width: 1440px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 6rem; align-items: end; }
.nb-und .hero-left h1 { font-family: 'Libre Baskerville', serif; font-size: clamp(3rem, 5vw, 5.5rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.08; color: var(--nb-und-ink); margin-bottom: 1.5rem; }
.nb-und .hero-left h1 em { font-style: italic; font-weight: 400; color: var(--nb-und-red); }
.nb-und .hero-left p { font-size: 1rem; color: var(--nb-und-ink-2); line-height: 1.7; max-width: 44ch; }
.nb-und .hero-right { padding-bottom: 1rem; }
.nb-und .hero-right p { font-family: 'Libre Baskerville', serif; font-size: 1.3rem; font-style: italic; font-weight: 400; color: var(--nb-und-ink-2); line-height: 1.6; max-width: 36ch; }
.nb-und .hero-right p strong { color: var(--nb-und-ink); font-style: normal; font-weight: 700; }

.nb-und .section-rule { height: 1px; background: var(--nb-und-rule); margin: 0 3rem; }
.nb-und .section { padding: 5rem 3rem; max-width: 1440px; margin: 0 auto; }
.nb-und .variant-label { display: flex; align-items: center; gap: 1rem; margin-bottom: 2rem; }
.nb-und .variant-num { font-family: 'Libre Baskerville', serif; font-size: 3rem; font-weight: 400; color: var(--nb-und-rule); line-height: 1; }
.nb-und .variant-info h3 { font-size: 0.88rem; font-weight: 600; color: var(--nb-und-ink); letter-spacing: 0.02em; margin-bottom: 3px; }
.nb-und .variant-info p { font-size: 0.78rem; color: var(--nb-und-ink-2); line-height: 1.5; }

.nb-und .demo-nav { border: 1px solid var(--nb-und-rule); border-radius: 4px; background: var(--nb-und-paper); height: 60px; display: flex; align-items: center; padding: 0 2rem; position: relative; margin-bottom: 1.5rem; overflow: hidden; }
.nb-und .demo-wrap { position: relative; display: flex; align-items: center; }
.nb-und .code-note { font-family: 'Instrument Sans', monospace; font-size: 0.72rem; color: var(--nb-und-ink-3); line-height: 1.7; background: #f2f0ea; border-left: 2px solid var(--nb-und-rule); padding: 0.75rem 1rem; border-radius: 0 3px 3px 0; margin-bottom: 3rem; }
.nb-und .code-note code { font-family: monospace; color: var(--nb-und-red); font-size: 0.7rem; }

.nb-und .alphabet-demo { margin: 4rem 3rem; padding: 3rem; border: 1px solid var(--nb-und-rule); border-radius: 4px; text-align: center; }
.nb-und .alpha-label { font-size: 0.62rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--nb-und-ink-3); margin-bottom: 2rem; }
.nb-und .alpha-links { display: flex; align-items: center; justify-content: center; gap: 0; flex-wrap: wrap; }
.nb-und .alpha-links a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; font-family: 'Libre Baskerville', serif; font-size: 1rem; color: var(--nb-und-ink-3); text-decoration: none; position: relative; transition: color 0.2s; border-radius: 4px; }
.nb-und .alpha-links a::after { content: ''; position: absolute; bottom: 4px; left: 50%; right: 50%; height: 1px; background: var(--nb-und-ink); transition: left 0.3s ease, right 0.3s ease; }
.nb-und .alpha-links a:hover { color: var(--nb-und-ink); }
.nb-und .alpha-links a:hover::after { left: 8px; right: 8px; }

.nb-und .showcase { padding: 5rem 3rem; border-top: 1px solid var(--nb-und-rule); max-width: 1440px; margin: 0 auto; display: flex; flex-direction: column; gap: 0; }
.nb-und .showcase-item { display: flex; align-items: center; justify-content: space-between; padding: 2rem 0; border-bottom: 1px solid var(--nb-und-rule); cursor: pointer; overflow: hidden; position: relative; }
.nb-und .showcase-title { font-family: 'Libre Baskerville', serif; font-size: clamp(2rem, 4vw, 4rem); font-weight: 400; color: var(--nb-und-ink); line-height: 1; position: relative; display: inline-block; transition: color 0.2s; }
.nb-und .showcase-title::after { content: ''; position: absolute; bottom: 4px; left: 0; right: 100%; height: 2px; background: var(--nb-und-red); transition: right 0.5s cubic-bezier(0.25, 1, 0.5, 1); }
.nb-und .showcase-item:hover .showcase-title::after { right: 0; }
.nb-und .showcase-item:hover .showcase-title { color: var(--nb-und-red); }
.nb-und .showcase-right { display: flex; align-items: center; gap: 1rem; }
.nb-und .showcase-meta { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--nb-und-ink-3); }
.nb-und .showcase-arrow { font-size: 1.5rem; color: var(--nb-und-ink-3); transform: translateX(-8px); transition: transform 0.3s ease, color 0.2s; }
.nb-und .showcase-item:hover .showcase-arrow { transform: translateX(0); color: var(--nb-und-red); }

@media (max-width: 900px) {
  .nb-und .hero { grid-template-columns: 1fr; gap: 2rem; padding: 3rem 1.5rem 2rem; }
  .nb-und .nav-end a, .nb-und .nav-end-dot { display: none; }
  .nb-und .section { padding: 3rem 1.5rem; }
  .nb-und .alphabet-demo { margin: 2rem 1.5rem; padding: 2rem 1rem; }
  .nb-und .showcase { padding: 3rem 1.5rem; }
  .nb-und .demo-nav { padding: 0 1rem; }
  .nb-und nav .nav-inner { padding: 0 1.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .nb-und * { transition: none !important; }
}
```

**JS:**
```js
(() => {
  // Scoped magnetic-line wiring. Two instances of the magnetic line
  // pattern run on the page (the main top nav + the demo nav in
  // variant 01). Each is independently bound to its wrapper + nav
  // + line + static-line via data-* attributes — no document.getElementById,
  // no shared state, multiple instances coexist safely.
  const root = document.querySelector('.nb-und');
  if (!root) return;

  function setupMagneticLine(navEl, wrapper, line, staticLine) {
    if (!navEl || !wrapper || !line || !staticLine) return;
    const links = navEl.querySelectorAll('a');

    function positionLine(el, targetLine, useAccent) {
      const wRect = wrapper.getBoundingClientRect();
      const rect = el.getBoundingClientRect();
      targetLine.style.left = (rect.left - wRect.left) + 'px';
      targetLine.style.width = rect.width + 'px';
      if (useAccent) targetLine.style.background = 'var(--nb-und-red)';
    }

    const active = navEl.querySelector('a.active');
    if (active) {
      requestAnimationFrame(() => positionLine(active, staticLine, true));
    }

    links.forEach((a) => {
      a.addEventListener('mouseenter', () => {
        positionLine(a, line);
        line.classList.add('visible');
      });
      a.addEventListener('click', (e) => {
        e.preventDefault();
        links.forEach((l) => l.classList.remove('active'));
        a.classList.add('active');
        positionLine(a, staticLine, true);
      });
    });
    wrapper.addEventListener('mouseleave', () => {
      line.classList.remove('visible');
    });
  }

  // Main top nav
  setupMagneticLine(
    root.querySelector('[data-nb-und-nav]'),
    root.querySelector('[data-nb-und-wrap]'),
    root.querySelector('[data-nb-und-line]'),
    root.querySelector('[data-nb-und-static]'),
  );

  // Demo 1 (the in-page variant showcase)
  setupMagneticLine(
    root.querySelector('[data-nb-und-demo-nav]'),
    root.querySelector('[data-nb-und-demo-wrap]'),
    root.querySelector('[data-nb-und-demo-line]'),
    root.querySelector('[data-nb-und-demo-static]'),
  );

  // Variant 2 / 3 click-to-activate (pure CSS hover; this just keeps the
  // active state in sync after a click).
  root.querySelectorAll('.nav-links-v2 a, .nav-links-v3 a').forEach((a) => {
    a.addEventListener('click', (e) => {
      e.preventDefault();
      const siblings = a.closest('ul').querySelectorAll('a');
      siblings.forEach((s) => s.classList.remove('active'));
      a.classList.add('active');
    });
  });

  // Alphabet ticker — 26 links built once.
  const alpha = root.querySelector('[data-nb-und-alpha]');
  if (alpha && alpha.childElementCount === 0) {
    'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('').forEach((ch) => {
      const a = document.createElement('a');
      a.href = '#';
      a.textContent = ch;
      a.addEventListener('click', (e) => e.preventDefault());
      alpha.appendChild(a);
    });
  }
})();
```

---
## 15 CSS Navigation Menu Designs

URL: https://codefronts.com/navigation/css-navigation-menu-designs/
Description: 15 hand-coded CSS navigation menu designs covering every production navigation pattern developers ship in 2026 — horizontal navigation bar with hover underline, dropdown navigation menu, full mega menu with category columns and feature panel, hamburger menu with slide-out drawer, full-screen overlay navigation, sticky navigation bar with scroll shrink (scroll-driven CSS animation), sidebar navigation menu, tab navigation with animated sliding indicator, breadcrumb navigation, glassmorphism navigation (frosted-glass backdrop-filter pattern), animated navigation icons with labels, multi-level accordion navigation, navigation with magnetic hover effect, neon glow navigation menu, and morphing navigation pill indicator. 13 demos are 100% pure CSS using <code>:hover</code> + <code>:focus-within</code> + <code>:checked</code> state machines — drop into any stack with zero JS dependencies. 2 use ~20-50 lines of vanilla JavaScript for sticky-scroll behaviour and pointer-tracking magnetic hover effects. All ship semantic <code>&lt;nav&gt;</code> + <code>&lt;ul&gt;</code> markup with <code>aria-current="page"</code> on the active link, <code>aria-expanded</code> on toggles, <code>aria-haspopup</code> on dropdown triggers, respect <code>prefers-reduced-motion</code>, use scoped <code>.nav-NN__*</code> class names so multiple navs coexist on the same page without style bleed, ship with 44×44px tap targets (WCAG 2.5.5), MIT-licensed. Drop into React, Vue, Astro, Svelte, Rails ERB, plain HTML, WordPress, Shopify, or any other stack.
Demo count: 15

### 01. CSS Horizontal Navigation Bar with Hover Underline

**Type:** Pure CSS
**Description:** A clean, professional horizontal navigation bar featuring smooth animated underline indicators on hover. Built with CSS custom properties for easy theming, this pattern is the foundation of most website headers — links slide a colored underline in from the left on hover with a cubic-bezier transition.

**HTML:**
```html
<div class="nav-01">
  <nav class="nav-01__bar" role="navigation" aria-label="Main navigation">
    <div class="nav-01__logo">
      <span class="nav-01__logo-dot"></span>Clarity
    </div>
    <ul class="nav-01__links">
      <li><a href="#" class="nav-01__active" aria-current="page">Home</a></li>
      <li><a href="#">Products</a></li>
      <li><a href="#">Features</a></li>
      <li><a href="#">Pricing</a></li>
      <li><a href="#">Blog</a></li>
      <li><a href="#">About</a></li>
    </ul>
    <div class="nav-01__actions">
      <a href="#" class="nav-01__btn-ghost">Sign in</a>
      <a href="#" class="nav-01__btn-primary">Get started</a>
    </div>
  </nav>
  <div class="nav-01__hero">
    <span class="nav-01__badge">Pure CSS underline effect</span>
    <h1>Hover the nav links above</h1>
    <p>Each link reveals a smooth underline indicator using a CSS <code>::after</code> pseudo-element scaled from zero via <code>cubic-bezier</code> spring easing — no JavaScript.</p>
    <div class="nav-01__note">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4M12 8h.01"/></svg>
      The underline uses <code>transform: scaleX()</code> — a compositor-only property — so hover transitions run at 60 fps even on low-end devices.
    </div>
  </div>
</div>
```

**CSS:**
```css
.nav-01,.nav-01 *,.nav-01 *::before,.nav-01 *::after{box-sizing:border-box;margin:0;padding:0}
.nav-01 ::selection{background:#2563eb;color:#fff}
.nav-01{
  --bg:#f8fafc;--surface:#ffffff;--border:#e2e8f0;
  --text:#1e293b;--muted:#64748b;--accent:#2563eb;--accent-light:#dbeafe;
  font-family:'Inter',system-ui,sans-serif;
  background:var(--bg);min-height:100vh;display:flex;flex-direction:column;
}
.nav-01__bar{
  background:var(--surface);border-bottom:1px solid var(--border);
  padding:0 40px;display:flex;align-items:center;justify-content:space-between;
  height:64px;position:sticky;top:0;z-index:10;
  box-shadow:0 1px 3px rgba(0,0,0,.04);
}
.nav-01__logo{
  font-size:1.125rem;font-weight:600;color:var(--text);
  letter-spacing:-.02em;display:flex;align-items:center;gap:8px;
}
.nav-01__logo-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);display:inline-block}
.nav-01__links{display:flex;align-items:center;gap:4px;list-style:none}
.nav-01__links a{
  display:flex;align-items:center;padding:8px 14px;
  color:var(--muted);text-decoration:none;
  font-size:.875rem;font-weight:500;border-radius:6px;
  position:relative;transition:color .2s ease;
}
.nav-01__links a::after{
  content:'';position:absolute;bottom:-1px;left:14px;right:14px;
  height:2px;background:var(--accent);border-radius:1px;
  transform:scaleX(0);transform-origin:center;
  transition:transform .25s cubic-bezier(.34,1.56,.64,1);
}
.nav-01__links a:hover{color:var(--text)}
.nav-01__links a:hover::after,.nav-01__links a.nav-01__active::after{transform:scaleX(1)}
.nav-01__links a.nav-01__active{color:var(--text)}
.nav-01__actions{display:flex;align-items:center;gap:10px}
.nav-01__btn-ghost{
  padding:7px 16px;border:1px solid var(--border);border-radius:6px;
  background:transparent;color:var(--text);font-size:.875rem;font-weight:500;
  cursor:pointer;transition:background .18s,border-color .18s;
  text-decoration:none;display:inline-flex;align-items:center;
}
.nav-01__btn-ghost:hover{background:var(--bg);border-color:#cbd5e1}
.nav-01__btn-primary{
  padding:7px 16px;border:1px solid var(--accent);border-radius:6px;
  background:var(--accent);color:#fff;font-size:.875rem;font-weight:500;
  cursor:pointer;transition:opacity .18s;
  text-decoration:none;display:inline-flex;align-items:center;
}
.nav-01__btn-primary:hover{opacity:.88}
.nav-01__hero{
  flex:1;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  padding:80px 24px;text-align:center;
}
.nav-01__badge{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--accent-light);color:var(--accent);
  padding:4px 12px;border-radius:100px;
  font-size:.75rem;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;margin-bottom:24px;
}
.nav-01__hero h1{
  font-size:clamp(2rem,5vw,3.5rem);font-weight:600;
  color:var(--text);letter-spacing:-.03em;line-height:1.15;
  max-width:640px;margin-bottom:16px;
}
.nav-01__hero p{
  font-size:1.0625rem;color:var(--muted);
  max-width:480px;line-height:1.65;
}
.nav-01__note{
  display:flex;align-items:flex-start;gap:8px;
  background:var(--surface);border:1px solid var(--border);
  border-radius:10px;padding:14px 18px;margin-top:40px;
  max-width:480px;font-size:.8125rem;color:var(--muted);
  line-height:1.5;text-align:left;
}
.nav-01__note svg{width:18px;height:18px;flex-shrink:0;margin-top:1px;color:var(--accent)}
code{background:#f1f5f9;padding:1px 5px;border-radius:3px;font-family:monospace;font-size:.85em}
@media(max-width:600px){.nav-01__links,.nav-01__btn-ghost{display:none}}
@media(prefers-reduced-motion:reduce){.nav-01__links a::after,.nav-01__links a{transition:none}}
```

### 02. CSS Dropdown Navigation Menu

**Type:** Pure CSS
**Description:** A multi-level dropdown navigation built entirely with CSS using the checkbox hack and `:focus-within` for accessibility. Submenus fade and slide down on hover, with smooth opacity and transform transitions — no JavaScript required.

**HTML:**
```html
<div class="nav-02">
  <nav class="nav-02__bar" role="navigation">
    <div class="nav-02__logo">
      <span class="nav-02__logo-mark">
        <svg viewBox="0 0 24 24"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
      </span>
      Vertex
    </div>
    <ul class="nav-02__links">
      <li>
        <a href="#">Products
          <svg class="nav-02__caret" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 9l6 6 6-6"/></svg>
        </a>
        <ul class="nav-02__dropdown nav-02__dropdown--wide">
          <li>
            <a href="#">
              <span class="nav-02__dropdown-icon"><svg viewBox="0 0 24 24"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg></span>
              <span class="nav-02__dropdown-text">Dashboard<span>Analytics & insights</span></span>
            </a>
          </li>
          <li>
            <a href="#">
              <span class="nav-02__dropdown-icon"><svg viewBox="0 0 24 24"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg></span>
              <span class="nav-02__dropdown-text">Monitoring<span>Real-time metrics</span></span>
            </a>
          </li>
          <li>
            <a href="#">
              <span class="nav-02__dropdown-icon"><svg viewBox="0 0 24 24"><path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 00-3-3.87"/><path d="M16 3.13a4 4 0 010 7.75"/></svg></span>
              <span class="nav-02__dropdown-text">Teams<span>Collaboration tools</span></span>
            </a>
          </li>
          <li>
            <a href="#">
              <span class="nav-02__dropdown-icon"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/><path d="M19.07 4.93l-1.41 1.41M5.34 18.66l-1.41 1.41M20 12h2M2 12H0M19.07 19.07l-1.41-1.41M5.34 5.34L3.93 3.93M12 20v2M12 2v2"/></svg></span>
              <span class="nav-02__dropdown-text">Automation<span>Workflow builder</span></span>
            </a>
          </li>
          <li class="nav-02__dropdown-cta-wrap" style="grid-column:1/-1">
            <a href="#" class="nav-02__dropdown-cta">
              Explore all products →
              <svg viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
            </a>
          </li>
        </ul>
      </li>
      <li>
        <a href="#">Solutions
          <svg class="nav-02__caret" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 9l6 6 6-6"/></svg>
        </a>
        <ul class="nav-02__dropdown">
          <li><a href="#"><span class="nav-02__dropdown-text">Enterprise</span></a></li>
          <li><a href="#"><span class="nav-02__dropdown-text">Startups</span></a></li>
          <li><a href="#"><span class="nav-02__dropdown-text">Agencies</span></a></li>
          <div class="nav-02__dropdown-divider"></div>
          <li><a href="#"><span class="nav-02__dropdown-text">Case Studies</span></a></li>
        </ul>
      </li>
      <li><a href="#">Pricing</a></li>
      <li>
        <a href="#">Resources
          <svg class="nav-02__caret" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 9l6 6 6-6"/></svg>
        </a>
        <ul class="nav-02__dropdown">
          <li><a href="#"><span class="nav-02__dropdown-text">Documentation</span></a></li>
          <li><a href="#"><span class="nav-02__dropdown-text">Blog</span></a></li>
          <li><a href="#"><span class="nav-02__dropdown-text">Community</span></a></li>
        </ul>
      </li>
    </ul>
    <div class="nav-02__actions">
      <a href="#" class="nav-02__btn nav-02__btn--ghost">Log in</a>
      <a href="#" class="nav-02__btn nav-02__btn--fill">Start free</a>
    </div>
  </nav>
  <div class="nav-02__hero">
    <span class="nav-02__pill"><span class="nav-02__pill-dot"></span>Hover any nav item with an arrow</span>
    <h1>CSS Dropdown Navigation Menu</h1>
    <p>Dropdowns appear on <code>:hover</code> using <code>opacity</code> + <code>translateY</code> transitions. Wide panels use CSS Grid. Zero JavaScript required.</p>
  </div>
</div>
```

**CSS:**
```css
.nav-02,.nav-02 *,.nav-02 *::before,.nav-02 *::after{box-sizing:border-box;margin:0;padding:0}
.nav-02 ::selection{background:#7c3aed;color:#fff}
.nav-02{
  --bg:#faf5ff;--surface:#ffffff;--border:#ede9fe;
  --text:#1e1b4b;--muted:#6b7280;--accent:#7c3aed;
  --accent2:#a78bfa;--shadow:rgba(124,58,237,.12);
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;
  background:var(--bg);min-height:100vh;
}
.nav-02__bar{
  background:var(--surface);border-bottom:1px solid var(--border);
  padding:0 48px;display:flex;align-items:center;
  justify-content:space-between;height:68px;
  position:sticky;top:0;z-index:100;
  box-shadow:0 2px 16px var(--shadow);
}
.nav-02__logo{
  font-size:1.25rem;font-weight:600;color:var(--text);
  letter-spacing:-.03em;display:flex;align-items:center;gap:10px;
}
.nav-02__logo-mark{
  width:32px;height:32px;border-radius:8px;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  display:grid;place-items:center;
}
.nav-02__logo-mark svg{width:18px;height:18px;fill:#fff}
.nav-02__links{display:flex;align-items:center;gap:2px;list-style:none}

/* top-level item */
.nav-02__links > li{position:relative}
.nav-02__links > li > a{
  display:flex;align-items:center;gap:5px;
  padding:10px 14px;color:var(--muted);
  text-decoration:none;font-size:.875rem;font-weight:500;
  border-radius:7px;transition:color .18s,background .18s;
  white-space:nowrap;
}
.nav-02__links > li > a:hover,.nav-02__links > li:hover > a{
  color:var(--text);background:var(--bg);
}
.nav-02__links > li > a .nav-02__caret{
  width:14px;height:14px;opacity:.5;
  transition:transform .22s ease;
}
.nav-02__links > li:hover > a .nav-02__caret{transform:rotate(180deg)}

/* dropdown panel */
.nav-02__dropdown{
  position:absolute;top:calc(100% + 8px);left:50%;
  transform:translateX(-50%) translateY(-6px);
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:12px;
  box-shadow:0 12px 40px var(--shadow);
  padding:8px;
  min-width:200px;
  list-style:none;
  opacity:0;pointer-events:none;
  transition:opacity .18s ease,transform .2s ease;
  z-index:200;
}
.nav-02__links > li:hover .nav-02__dropdown,
.nav-02__links > li:focus-within .nav-02__dropdown{
  opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0);
}
.nav-02__dropdown li a{
  display:flex;align-items:center;gap:10px;
  padding:9px 12px;color:var(--muted);
  text-decoration:none;font-size:.875rem;font-weight:500;
  border-radius:7px;transition:background .15s,color .15s;
}
.nav-02__dropdown li a:hover{background:var(--bg);color:var(--text)}
.nav-02__dropdown-icon{
  width:32px;height:32px;border-radius:7px;
  background:var(--bg);display:grid;place-items:center;flex-shrink:0;
}
.nav-02__dropdown-icon svg{width:16px;height:16px;stroke:var(--accent);fill:none;stroke-width:2}
.nav-02__dropdown-text{display:flex;flex-direction:column;gap:1px}
.nav-02__dropdown-text span{font-size:.75rem;color:var(--accent2);font-weight:400}
.nav-02__dropdown-divider{height:1px;background:var(--border);margin:6px 8px}

/* wide dropdown */
.nav-02__dropdown--wide{min-width:480px;display:grid;grid-template-columns:1fr 1fr;gap:0}

/* cta row */
.nav-02__dropdown-cta{
  grid-column:1/-1;
  display:flex;align-items:center;justify-content:space-between;
  background:linear-gradient(135deg,#f5f3ff,#ede9fe);
  border-radius:8px;padding:12px 14px;margin-top:4px;
  font-size:.8125rem;color:var(--accent);font-weight:600;
  text-decoration:none;
}
.nav-02__dropdown-cta:hover{background:linear-gradient(135deg,#ede9fe,#ddd6fe)}
.nav-02__dropdown-cta svg{width:16px;height:16px;stroke:var(--accent);fill:none;stroke-width:2}

.nav-02__actions{display:flex;align-items:center;gap:10px}
.nav-02__btn{
  padding:8px 18px;border-radius:7px;font-size:.875rem;font-weight:600;
  cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;
  transition:all .18s;border:1.5px solid;
}
.nav-02__btn--ghost{color:var(--accent);border-color:var(--border);background:transparent}
.nav-02__btn--ghost:hover{border-color:var(--accent2);background:var(--bg)}
.nav-02__btn--fill{color:#fff;border-color:var(--accent);background:var(--accent)}
.nav-02__btn--fill:hover{opacity:.88}

/* hero */
.nav-02__hero{
  display:flex;flex-direction:column;align-items:center;
  justify-content:center;padding:100px 24px;text-align:center;
}
.nav-02__hero h1{
  font-size:clamp(2rem,5vw,3.25rem);font-weight:600;
  color:var(--text);letter-spacing:-.03em;max-width:600px;
  margin-bottom:14px;line-height:1.2;
}
.nav-02__hero p{font-size:1rem;color:var(--muted);max-width:440px;line-height:1.65}
.nav-02__pill{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--accent);color:#fff;
  border-radius:100px;padding:4px 12px 4px 6px;
  font-size:.75rem;font-weight:600;margin-bottom:22px;
}
.nav-02__pill-dot{width:18px;height:18px;background:rgba(255,255,255,.25);border-radius:50%;display:grid;place-items:center}
.nav-02__pill-dot::after{content:'';width:6px;height:6px;background:#fff;border-radius:50%;display:block}

@media(max-width:700px){.nav-02__links,.nav-02__btn--ghost{display:none}}
@media(prefers-reduced-motion:reduce){
  .nav-02__dropdown,.nav-02__links > li > a .nav-02__caret{transition:none}
}
```

### 03. CSS Mega Menu Navigation

**Type:** Pure CSS
**Description:** A full-width mega menu with categorized link columns, featured cards, and icon-enhanced entries. The mega panel spans the full viewport width and organizes content into a responsive grid, perfect for content-heavy sites like e-commerce or documentation portals.

**HTML:**
```html
<div class="nav-03">
  <nav class="nav-03__bar" role="navigation">
    <div class="nav-03__logo">Arc<span>OS</span></div>
    <ul class="nav-03__links">
      <li>
        <a href="#">Platform
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 9l6 6 6-6"/></svg>
        </a>
        <div class="nav-03__mega">
          <div class="nav-03__mega-grid">
            <a href="#" class="nav-03__mega-item">
              <span class="nav-03__mega-icon" style="background:#0ea5e910;color:#0ea5e9"><svg viewBox="0 0 24 24"><rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8M12 17v4"/></svg></span>
              <span class="nav-03__mega-text"><h4>Cloud IDE</h4><p>Full-stack dev environment</p></span>
            </a>
            <a href="#" class="nav-03__mega-item">
              <span class="nav-03__mega-icon" style="background:#10b98110;color:#10b981"><svg viewBox="0 0 24 24"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg></span>
              <span class="nav-03__mega-text"><h4>Code Review</h4><p>AI-powered PR analysis</p></span>
            </a>
            <a href="#" class="nav-03__mega-item">
              <span class="nav-03__mega-icon" style="background:#f59e0b10;color:#f59e0b"><svg viewBox="0 0 24 24"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg></span>
              <span class="nav-03__mega-text"><h4>Security</h4><p>Secrets & vulnerability scan</p></span>
            </a>
            <a href="#" class="nav-03__mega-item">
              <span class="nav-03__mega-icon" style="background:#ec489910;color:#ec4899"><svg viewBox="0 0 24 24"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg></span>
              <span class="nav-03__mega-text"><h4>Observability</h4><p>Logs, traces, metrics</p></span>
            </a>
            <a href="#" class="nav-03__mega-item">
              <span class="nav-03__mega-icon" style="background:#8b5cf610;color:#8b5cf6"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="M8 14s1.5 2 4 2 4-2 4-2"/><line x1="9" y1="9" x2="9.01" y2="9"/><line x1="15" y1="9" x2="15.01" y2="9"/></svg></span>
              <span class="nav-03__mega-text"><h4>AI Assistant</h4><p>Intelligent code completion</p></span>
            </a>
            <a href="#" class="nav-03__mega-item">
              <span class="nav-03__mega-icon" style="background:#06b6d410;color:#06b6d4"><svg viewBox="0 0 24 24"><path d="M21 16V8a2 2 0 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 003 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l7-4A2 2 0 0021 16z"/></svg></span>
              <span class="nav-03__mega-text"><h4>Deployments</h4><p>One-click to production</p></span>
            </a>
          </div>
          <div class="nav-03__mega-footer">
            <a href="#" class="nav-03__mega-tag" style="background:#0ea5e915;color:#0ea5e9">New: Edge Functions</a>
            <a href="#" class="nav-03__mega-tag" style="background:#10b98115;color:#10b981">New: AI Reviews</a>
            <a href="#" class="nav-03__mega-tag" style="background:rgba(255,255,255,.06);color:var(--muted)">View all →</a>
          </div>
        </div>
      </li>
      <li>
        <a href="#">Solutions
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 9l6 6 6-6"/></svg>
        </a>
        <div class="nav-03__mega" style="width:360px">
          <div class="nav-03__mega-grid" style="grid-template-columns:1fr 1fr">
            <a href="#" class="nav-03__mega-item">
              <span class="nav-03__mega-text"><h4>Enterprise</h4><p>SSO, audit logs, SLA</p></span>
            </a>
            <a href="#" class="nav-03__mega-item">
              <span class="nav-03__mega-text"><h4>Startups</h4><p>Free credits, fast scaling</p></span>
            </a>
            <a href="#" class="nav-03__mega-item">
              <span class="nav-03__mega-text"><h4>Open Source</h4><p>Special plans available</p></span>
            </a>
            <a href="#" class="nav-03__mega-item">
              <span class="nav-03__mega-text"><h4>Education</h4><p>Free for students</p></span>
            </a>
          </div>
        </div>
      </li>
      <li><a href="#">Pricing</a></li>
      <li><a href="#">Docs</a></li>
    </ul>
    <div class="nav-03__actions">
      <a href="#" class="nav-03__btn nav-03__btn--out">Sign in</a>
      <a href="#" class="nav-03__btn nav-03__btn--in">
        Start building
        <svg viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
      </a>
    </div>
  </nav>
  <div class="nav-03__hero">
    <h1>CSS <em>Mega Menu</em> Navigation</h1>
    <p>Hover "Platform" or "Solutions" to reveal a grid-based mega panel. Built with pure CSS <code>:hover</code> + <code>opacity</code> transitions and CSS Grid layout — no JS.</p>
  </div>
</div>
```

**CSS:**
```css
.nav-03,.nav-03 *,.nav-03 *::before,.nav-03 *::after{box-sizing:border-box;margin:0;padding:0}
.nav-03 ::selection{background:#0ea5e9;color:#fff}
.nav-03{
  --bg:#0c1222;--surface:#111827;--surface2:#1e2a3d;
  --border:rgba(255,255,255,.07);--text:#f1f5f9;
  --muted:#94a3b8;--accent:#0ea5e9;--accent2:#38bdf8;
  --green:#10b981;--orange:#f59e0b;--pink:#ec4899;
  font-family:'DM Sans',system-ui,sans-serif;
  background:var(--bg);min-height:100vh;
}
.nav-03__bar{
  background:rgba(17,24,39,.9);backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);
  padding:0 48px;display:flex;align-items:center;
  justify-content:space-between;height:68px;
  position:sticky;top:0;z-index:100;
}
.nav-03__logo{
  font-size:1.2rem;font-weight:700;color:var(--text);
  display:flex;align-items:center;gap:10px;letter-spacing:-.02em;
}
.nav-03__logo span{color:var(--accent)}
.nav-03__links{display:flex;align-items:center;gap:2px;list-style:none}
.nav-03__links > li{position:relative}
.nav-03__links > li > a{
  display:flex;align-items:center;gap:4px;
  padding:9px 14px;color:var(--muted);
  text-decoration:none;font-size:.875rem;font-weight:500;
  border-radius:6px;transition:color .18s,background .18s;
}
.nav-03__links > li > a:hover,.nav-03__links > li:hover > a{
  color:var(--text);background:rgba(255,255,255,.05);
}
.nav-03__links > li > a svg{width:14px;height:14px;opacity:.5;transition:transform .22s}
.nav-03__links > li:hover > a svg{transform:rotate(180deg)}

/* mega panel */
.nav-03__mega{
  position:absolute;top:calc(100% + 10px);left:50%;
  transform:translateX(-50%) translateY(-8px);
  width:680px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:0 24px 60px rgba(0,0,0,.5);
  padding:24px;
  opacity:0;pointer-events:none;
  transition:opacity .2s ease,transform .22s ease;
  z-index:200;
}
.nav-03__links > li:hover .nav-03__mega,
.nav-03__links > li:focus-within .nav-03__mega{
  opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0);
}
.nav-03__mega-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px}
.nav-03__mega-item{
  display:flex;align-items:flex-start;gap:12px;
  padding:12px;border-radius:10px;
  text-decoration:none;
  transition:background .15s;
}
.nav-03__mega-item:hover{background:var(--surface2)}
.nav-03__mega-icon{
  width:38px;height:38px;border-radius:9px;flex-shrink:0;
  display:grid;place-items:center;
}
.nav-03__mega-icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.75}
.nav-03__mega-text h4{font-size:.8125rem;font-weight:600;color:var(--text);margin-bottom:3px}
.nav-03__mega-text p{font-size:.75rem;color:var(--muted);line-height:1.4}

.nav-03__mega-footer{
  margin-top:16px;padding-top:16px;
  border-top:1px solid var(--border);
  display:flex;gap:8px;
}
.nav-03__mega-tag{
  padding:4px 10px;border-radius:100px;
  font-size:.7rem;font-weight:600;letter-spacing:.03em;
  text-decoration:none;transition:opacity .15s;
}
.nav-03__mega-tag:hover{opacity:.75}

.nav-03__actions{display:flex;align-items:center;gap:10px}
.nav-03__btn{
  padding:8px 18px;border-radius:7px;font-size:.875rem;font-weight:600;
  text-decoration:none;display:inline-flex;align-items:center;gap:6px;
  transition:all .18s;border:1.5px solid transparent;cursor:pointer;
}
.nav-03__btn--out{color:var(--muted);border-color:var(--border)}
.nav-03__btn--out:hover{color:var(--text);border-color:rgba(255,255,255,.15)}
.nav-03__btn--in{color:#fff;background:var(--accent);border-color:var(--accent)}
.nav-03__btn--in:hover{opacity:.88}
.nav-03__btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2}

/* hero */
.nav-03__hero{
  display:flex;flex-direction:column;align-items:center;
  justify-content:center;padding:100px 24px;text-align:center;
}
.nav-03__hero h1{
  font-size:clamp(2rem,5vw,3.5rem);font-weight:700;
  color:var(--text);letter-spacing:-.03em;
  max-width:640px;margin-bottom:14px;line-height:1.15;
}
.nav-03__hero h1 em{color:var(--accent);font-style:normal}
.nav-03__hero p{font-size:1rem;color:var(--muted);max-width:460px;line-height:1.7}

@media(max-width:768px){.nav-03__links,.nav-03__btn--out{display:none}}
@media(prefers-reduced-motion:reduce){.nav-03__mega,.nav-03__links > li > a svg{transition:none}}
```

### 04. CSS Hamburger Menu with Slide-Out Drawer

**Type:** Pure CSS
**Description:** A mobile-first hamburger menu that reveals a full-height slide-out navigation drawer using only a hidden checkbox. The three-bar icon morphs into an X when active, and a backdrop overlay fades in behind the open drawer.

**HTML:**
```html
<div class="nav-04">
  <input type="checkbox" id="nav-04-toggle">
  <nav class="nav-04__bar">
    <div class="nav-04__logo">Mo<span>ve</span></div>
    <label for="nav-04-toggle" class="nav-04__ham" aria-label="Toggle menu">
      <span></span><span></span><span></span>
    </label>
  </nav>
  <label for="nav-04-toggle" class="nav-04__overlay"></label>
  <div class="nav-04__drawer" role="dialog" aria-label="Navigation drawer">
    <div class="nav-04__drawer-head">
      <div class="nav-04__drawer-logo">Mo<span>ve</span></div>
      <label for="nav-04-toggle" class="nav-04__close" aria-label="Close menu">
        <svg viewBox="0 0 24 24"><path d="M18 6L6 18M6 6l12 12"/></svg>
      </label>
    </div>
    <ul class="nav-04__drawer-links">
      <li class="nav-04__active">
        <a href="#">
          <svg viewBox="0 0 24 24"><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
          Home
        </a>
      </li>
      <li>
        <a href="#">
          <svg viewBox="0 0 24 24"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg>
          Products
        </a>
      </li>
      <li>
        <a href="#">
          <svg viewBox="0 0 24 24"><path d="M20.59 13.41l-7.17 7.17a2 2 0 01-2.83 0L2 12V2h10l8.59 8.59a2 2 0 010 2.82z"/><line x1="7" y1="7" x2="7.01" y2="7"/></svg>
          Pricing
        </a>
      </li>
      <li>
        <a href="#">
          <svg viewBox="0 0 24 24"><path d="M2 3h6a4 4 0 014 4v14a3 3 0 00-3-3H2z"/><path d="M22 3h-6a4 4 0 00-4 4v14a3 3 0 013-3h7z"/></svg>
          Docs
        </a>
      </li>
      <div class="nav-04__drawer-divider"></div>
      <li>
        <a href="#">
          <svg viewBox="0 0 24 24"><path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 00-3-3.87M16 3.13a4 4 0 010 7.75"/></svg>
          Community
        </a>
      </li>
      <li>
        <a href="#">
          <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3M12 17h.01"/></svg>
          Support
        </a>
      </li>
    </ul>
    <div class="nav-04__drawer-footer">
      <a href="#" class="nav-04__drawer-cta">Get started free →</a>
    </div>
  </div>
  <div class="nav-04__hero">
    <h1>CSS Hamburger Menu with Slide-Out Drawer</h1>
    <p>A hidden <code>&lt;input type="checkbox"&gt;</code> toggled by the hamburger label. The drawer uses <code>translateX</code> and the overlay uses <code>opacity</code> transitions — zero JavaScript.</p>
    <span class="nav-04__instruction">
      <svg viewBox="0 0 24 24"><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
      Tap the hamburger icon top-right
    </span>
  </div>
</div>
```

**CSS:**
```css
.nav-04,.nav-04 *,.nav-04 *::before,.nav-04 *::after{box-sizing:border-box;margin:0;padding:0}
.nav-04 ::selection{background:#f97316;color:#fff}
.nav-04{
  --bg:#fffbf7;--surface:#ffffff;--drawer:#1c1917;
  --border:#fde8d8;--text:#1c1917;--muted:#78716c;
  --accent:#f97316;--accent2:#fb923c;
  font-family:'Outfit',system-ui,sans-serif;
  background:var(--bg);min-height:100vh;
}
/* hidden checkbox toggle */
#nav-04-toggle{display:none}

.nav-04__bar{
  background:var(--surface);border-bottom:2px solid var(--border);
  padding:0 24px;display:flex;align-items:center;
  justify-content:space-between;height:64px;
  position:sticky;top:0;z-index:200;
}
.nav-04__logo{
  font-size:1.3rem;font-weight:700;color:var(--text);letter-spacing:-.03em;
}
.nav-04__logo span{color:var(--accent)}

/* hamburger button */
.nav-04__ham{
  width:44px;height:44px;cursor:pointer;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:5px;
  border-radius:10px;transition:background .18s;
  user-select:none;
}
.nav-04__ham:hover{background:var(--border)}
.nav-04__ham span{
  display:block;width:22px;height:2px;
  background:var(--text);border-radius:2px;
  transition:transform .3s cubic-bezier(.23,1,.32,1),opacity .2s,width .3s;
  transform-origin:center;
}
/* open state — morph to X */
#nav-04-toggle:checked ~ .nav-04__bar .nav-04__ham span:nth-child(1){
  transform:translateY(7px) rotate(45deg);
}
#nav-04-toggle:checked ~ .nav-04__bar .nav-04__ham span:nth-child(2){
  opacity:0;width:0;
}
#nav-04-toggle:checked ~ .nav-04__bar .nav-04__ham span:nth-child(3){
  transform:translateY(-7px) rotate(-45deg);
}

/* overlay */
.nav-04__overlay{
  position:fixed;inset:0;z-index:150;
  background:rgba(0,0,0,0);pointer-events:none;
  transition:background .35s ease;
}
#nav-04-toggle:checked ~ .nav-04__overlay{
  background:rgba(0,0,0,.45);pointer-events:auto;
}

/* drawer */
.nav-04__drawer{
  position:fixed;top:0;right:0;bottom:0;
  width:300px;z-index:160;
  background:var(--drawer);
  transform:translateX(100%);
  transition:transform .35s cubic-bezier(.23,1,.32,1);
  display:flex;flex-direction:column;
  overflow-y:auto;
}
#nav-04-toggle:checked ~ .nav-04__overlay ~ .nav-04__drawer{
  transform:translateX(0);
}
.nav-04__drawer-head{
  padding:20px 24px;border-bottom:1px solid rgba(255,255,255,.07);
  display:flex;align-items:center;justify-content:space-between;
}
.nav-04__drawer-logo{
  font-size:1.2rem;font-weight:700;color:#fff;letter-spacing:-.02em;
}
.nav-04__drawer-logo span{color:var(--accent)}
.nav-04__close{
  width:36px;height:36px;border-radius:8px;cursor:pointer;
  display:grid;place-items:center;background:rgba(255,255,255,.07);
  transition:background .18s;
}
.nav-04__close:hover{background:rgba(255,255,255,.14)}
.nav-04__close svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:2}

.nav-04__drawer-links{padding:16px;flex:1;list-style:none}
.nav-04__drawer-links li a{
  display:flex;align-items:center;gap:12px;
  padding:13px 14px;color:rgba(255,255,255,.7);
  text-decoration:none;font-size:.9375rem;font-weight:500;
  border-radius:10px;transition:background .18s,color .18s;
}
.nav-04__drawer-links li a:hover{background:rgba(255,255,255,.06);color:#fff}
.nav-04__drawer-links li a svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.75;flex-shrink:0;opacity:.6}
.nav-04__drawer-links .nav-04__active a{color:#fff;background:rgba(249,115,22,.12)}
.nav-04__drawer-links .nav-04__active a svg{color:var(--accent);opacity:1}

.nav-04__drawer-divider{height:1px;background:rgba(255,255,255,.06);margin:8px 14px}
.nav-04__drawer-footer{padding:20px 16px;border-top:1px solid rgba(255,255,255,.07)}
.nav-04__drawer-cta{
  display:block;width:100%;padding:12px;
  background:var(--accent);color:#fff;
  border-radius:10px;text-align:center;
  text-decoration:none;font-weight:600;font-size:.9rem;
  transition:opacity .18s;
}
.nav-04__drawer-cta:hover{opacity:.88}

/* hero */
.nav-04__hero{
  display:flex;flex-direction:column;align-items:center;
  justify-content:center;padding:100px 24px;text-align:center;
}
.nav-04__hero h1{
  font-size:clamp(2rem,5vw,3.25rem);font-weight:700;
  color:var(--text);letter-spacing:-.03em;max-width:560px;
  margin-bottom:14px;line-height:1.2;
}
.nav-04__hero p{font-size:1rem;color:var(--muted);max-width:420px;line-height:1.7}
.nav-04__instruction{
  margin-top:32px;display:inline-flex;align-items:center;gap:8px;
  background:var(--surface);border:2px solid var(--border);
  padding:10px 18px;border-radius:100px;
  font-size:.875rem;font-weight:600;color:var(--accent);
}
.nav-04__instruction svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2}

@media(prefers-reduced-motion:reduce){
  .nav-04__ham span,.nav-04__drawer,.nav-04__overlay{transition:none}
}
```

### 05. CSS Full-Screen Overlay Navigation

**Type:** Pure CSS
**Description:** A dramatic full-screen navigation overlay that covers the entire viewport with a dark semi-transparent background. Menu links animate in with a staggered slide-up entrance, creating a cinematic reveal effect perfect for portfolio and creative agency sites.

**HTML:**
```html
<div class="nav-05">
  <input type="checkbox" id="nav-05-toggle">
  <nav class="nav-05__bar">
    <a href="#" class="nav-05__logo">Vol<em>ta</em></a>
    <label for="nav-05-toggle" class="nav-05__btn" aria-label="Open menu">
      <span></span><span></span><span></span>
    </label>
  </nav>
  <div class="nav-05__overlay" role="dialog" aria-label="Full screen navigation">
    <ul class="nav-05__nav-list">
      <li><a href="#"><span class="nav-05__num">01</span>Work</a></li>
      <li><a href="#"><span class="nav-05__num">02</span>Studio</a></li>
      <li><a href="#"><span class="nav-05__num">03</span>Services</a></li>
      <li><a href="#"><span class="nav-05__num">04</span>Journal</a></li>
      <li><a href="#"><span class="nav-05__num">05</span>Contact</a></li>
    </ul>
    <div class="nav-05__overlay-footer">
      <div class="nav-05__overlay-social">
        <a href="#">Twitter</a>
        <a href="#">Dribbble</a>
        <a href="#">Instagram</a>
        <a href="#">LinkedIn</a>
      </div>
      <a href="#" class="nav-05__overlay-cta">Start a project →</a>
    </div>
  </div>
  <div class="nav-05__hero">
    <h1>Design <span>beyond</span><br>the ordinary</h1>
    <p>Open the menu top-right. The overlay slides in using <code>translateY(-100%)</code> — no JavaScript, just a checkbox toggle and CSS transitions.</p>
  </div>
</div>
```

**CSS:**
```css
.nav-05,.nav-05 *,.nav-05 *::before,.nav-05 *::after{box-sizing:border-box;margin:0;padding:0}
.nav-05 ::selection{background:#d946ef;color:#fff}
#nav-05-toggle{display:none}
.nav-05{
  --bg:#09090b;--surface:#18181b;
  --text:#fafafa;--muted:#a1a1aa;
  --accent:#d946ef;--accent2:#e879f9;
  font-family:'Syne',system-ui,sans-serif;
  background:var(--bg);min-height:100vh;
}
.nav-05__bar{
  position:fixed;top:0;left:0;right:0;z-index:300;
  padding:24px 40px;display:flex;
  align-items:center;justify-content:space-between;
}
.nav-05__logo{
  font-size:1.5rem;font-weight:800;color:var(--text);
  letter-spacing:-.04em;text-decoration:none;z-index:310;position:relative;
}
.nav-05__logo em{color:var(--accent);font-style:normal}

/* open btn */
.nav-05__btn{
  z-index:310;position:relative;cursor:pointer;
  display:flex;flex-direction:column;gap:4px;padding:12px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
  border-radius:10px;transition:background .18s;user-select:none;
}
.nav-05__btn:hover{background:rgba(255,255,255,.1)}
.nav-05__btn span{
  display:block;border-radius:2px;background:var(--text);
  transition:transform .35s cubic-bezier(.23,1,.32,1),opacity .25s,width .35s;
}
.nav-05__btn span:nth-child(1){width:24px;height:2px}
.nav-05__btn span:nth-child(2){width:16px;height:2px}
.nav-05__btn span:nth-child(3){width:20px;height:2px}
#nav-05-toggle:checked ~ .nav-05__bar .nav-05__btn span:nth-child(1){
  transform:translateY(6px) rotate(45deg);width:24px;
}
#nav-05-toggle:checked ~ .nav-05__bar .nav-05__btn span:nth-child(2){opacity:0;width:0}
#nav-05-toggle:checked ~ .nav-05__bar .nav-05__btn span:nth-child(3){
  transform:translateY(-6px) rotate(-45deg);width:24px;
}

/* full-screen overlay */
.nav-05__overlay{
  position:fixed;inset:0;z-index:200;
  background:var(--bg);
  display:flex;flex-direction:column;
  justify-content:center;
  padding:80px 60px;
  transform:translateY(-100%);
  transition:transform .5s cubic-bezier(.77,0,.175,1);
  overflow:hidden;
}
#nav-05-toggle:checked ~ .nav-05__overlay{transform:translateY(0)}
.nav-05__overlay::before{
  content:'';position:absolute;bottom:-200px;right:-200px;
  width:600px;height:600px;border-radius:50%;
  background:radial-gradient(circle,rgba(217,70,239,.12) 0%,transparent 70%);
  pointer-events:none;
}

.nav-05__nav-list{list-style:none;margin-bottom:48px}
.nav-05__nav-list li{overflow:hidden}
.nav-05__nav-list li a{
  display:inline-flex;align-items:center;gap:16px;
  font-size:clamp(2.5rem,7vw,5rem);font-weight:800;
  color:rgba(255,255,255,.15);text-decoration:none;
  letter-spacing:-.04em;line-height:1.15;
  transition:color .2s ease;
  padding:4px 0;
}
.nav-05__nav-list li a:hover{color:var(--text)}
.nav-05__nav-list li a .nav-05__num{
  font-size:.875rem;font-weight:600;color:var(--accent);
  letter-spacing:.06em;margin-top:4px;
  opacity:0;transition:opacity .2s;
}
.nav-05__nav-list li a:hover .nav-05__num{opacity:1}

.nav-05__overlay-footer{
  display:flex;align-items:center;gap:48px;flex-wrap:wrap;
}
.nav-05__overlay-social{display:flex;gap:16px}
.nav-05__overlay-social a{
  font-size:.875rem;color:var(--muted);text-decoration:none;
  font-weight:600;transition:color .18s;
}
.nav-05__overlay-social a:hover{color:var(--text)}
.nav-05__overlay-cta{
  padding:12px 28px;background:var(--accent);color:#fff;
  border-radius:100px;text-decoration:none;font-weight:700;
  font-size:.9375rem;transition:opacity .18s;
}
.nav-05__overlay-cta:hover{opacity:.85}

/* page content */
.nav-05__hero{
  min-height:100vh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  padding:100px 24px;
}
.nav-05__hero h1{
  font-size:clamp(2.5rem,8vw,6rem);font-weight:800;
  color:var(--text);letter-spacing:-.05em;
  line-height:1;margin-bottom:20px;
}
.nav-05__hero h1 span{
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
}
.nav-05__hero p{font-size:1.0625rem;color:var(--muted);max-width:440px;line-height:1.65}

@media(prefers-reduced-motion:reduce){
  .nav-05__overlay,.nav-05__btn span{transition:none}
}
```

### 06. CSS Sticky Navigation Bar with Scroll Shrink

**Type:** CSS + JS
**Description:** A sticky navigation bar that smoothly shrinks its height and adds a drop shadow as the user scrolls down, with a scroll-progress indicator bar at the top. The shrink effect is driven by a CSS class toggled via a tiny IntersectionObserver-based scroll listener.

**HTML:**
```html
<div class="nav-06">
  <div class="nav-06__progress" id="nav-06-progress"></div>
  <nav class="nav-06__bar" id="nav-06-bar">
    <div class="nav-06__logo">
      <span class="nav-06__logo-leaf">
        <svg viewBox="0 0 24 24"><path d="M12 22s-8-4.5-8-11.8A8 8 0 0112 2a8 8 0 018 8.2c0 7.3-8 11.8-8 11.8z"/></svg>
      </span>
      Verdant
    </div>
    <ul class="nav-06__links">
      <li><a href="#" class="nav-06__active">Home</a></li>
      <li><a href="#">Features</a></li>
      <li><a href="#">Pricing</a></li>
      <li><a href="#">Blog</a></li>
    </ul>
    <div class="nav-06__actions">
      <a href="#" class="nav-06__btn nav-06__btn--ghost">Login</a>
      <a href="#" class="nav-06__btn nav-06__btn--fill">Try free</a>
    </div>
  </nav>
  <div class="nav-06__hero">
    <h1>Sticky nav that<br><span>shrinks on scroll</span></h1>
    <p>Scroll down to see the navbar compress from 72px to 52px. JavaScript reads <code>scrollY</code> and toggles a class. All visual transitions are pure CSS.</p>
    <div class="nav-06__scroll-hint">
      <svg viewBox="0 0 24 24"><path d="M12 5v14M5 12l7 7 7-7"/></svg>
      Scroll down to trigger
    </div>
  </div>
  <div class="nav-06__content">
    <div class="nav-06__card">
      <h3>How it works</h3>
      <p>A tiny scroll event listener adds <code>.nav-06--shrunk</code> once <code>scrollY > 60</code>. The navbar's <code>height</code>, logo scale, and button size all transition via CSS. The scroll progress bar width is updated in the same handler.</p>
    </div>
    <div class="nav-06__card">
      <h3>Performance</h3>
      <p>Only <code>height</code>, <code>transform</code>, and <code>box-shadow</code> animate — height is handled via CSS transition on a sticky element, transform stays on the compositor.</p>
    </div>
    <div class="nav-06__card">
      <h3>Accessibility</h3>
      <p>The navbar remains fully keyboard-navigable throughout. The shrink behaviour is a visual enhancement only and doesn't affect focus order or ARIA roles.</p>
    </div>
  </div>
</div>

```

**CSS:**
```css
.nav-06,.nav-06 *,.nav-06 *::before,.nav-06 *::after{box-sizing:border-box;margin:0;padding:0}
.nav-06 ::selection{background:#059669;color:#fff}
.nav-06{
  --bg:#f0fdf4;--surface:#fff;
  --text:#052e16;--muted:#6b7280;
  --accent:#059669;--accent2:#34d399;--border:#d1fae5;
  font-family:'Inter',system-ui,sans-serif;
  background:var(--bg);min-height:200vh;
}
.nav-06__bar{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.9);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
  padding:0 48px;display:flex;align-items:center;justify-content:space-between;
  height:72px;
  transition:height .3s ease,box-shadow .3s ease,border-color .3s;
}
.nav-06__bar.nav-06--shrunk{
  height:52px;
  box-shadow:0 4px 20px rgba(5,150,105,.1);
  border-color:rgba(5,150,105,.2);
}
.nav-06__logo{
  font-size:1.2rem;font-weight:700;color:var(--text);
  display:flex;align-items:center;gap:8px;transition:transform .3s ease;
}
.nav-06__bar.nav-06--shrunk .nav-06__logo{transform:scale(.9)}
.nav-06__logo-leaf{
  width:28px;height:28px;background:var(--accent);border-radius:50% 0 50% 50%;
  display:grid;place-items:center;transition:width .3s,height .3s;
}
.nav-06__bar.nav-06--shrunk .nav-06__logo-leaf{width:22px;height:22px}
.nav-06__logo-leaf svg{width:14px;height:14px;stroke:#fff;fill:none;stroke-width:2}
.nav-06__links{display:flex;align-items:center;gap:4px;list-style:none}
.nav-06__links a{
  padding:7px 13px;color:var(--muted);text-decoration:none;
  font-size:.875rem;font-weight:500;border-radius:6px;
  transition:color .18s,background .18s;
}
.nav-06__links a:hover{color:var(--text);background:var(--border)}
.nav-06__links a.nav-06__active{color:var(--accent);background:#ecfdf5}
.nav-06__actions{display:flex;align-items:center;gap:10px}
.nav-06__btn{
  padding:7px 16px;border-radius:6px;font-size:.875rem;
  font-weight:600;text-decoration:none;cursor:pointer;transition:all .18s;
  display:inline-flex;align-items:center;
}
.nav-06__btn--ghost{color:var(--accent);background:transparent;border:1.5px solid var(--border)}
.nav-06__btn--ghost:hover{border-color:var(--accent2)}
.nav-06__btn--fill{color:#fff;background:var(--accent);border:1.5px solid var(--accent)}
.nav-06__btn--fill:hover{opacity:.88}
/* shrink cta */
.nav-06__bar.nav-06--shrunk .nav-06__btn{padding:5px 13px;font-size:.8125rem}

/* scroll indicator bar */
.nav-06__progress{
  position:fixed;top:0;left:0;height:3px;z-index:101;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  width:0%;transition:width .1s linear;
}

/* sections */
.nav-06__hero{
  padding:100px 48px;max-width:800px;margin:0 auto;
}
.nav-06__hero h1{
  font-size:clamp(2.5rem,5vw,4rem);font-weight:700;
  color:var(--text);letter-spacing:-.04em;line-height:1.1;
  margin-bottom:20px;
}
.nav-06__hero h1 span{color:var(--accent)}
.nav-06__hero p{font-size:1.0625rem;color:var(--muted);max-width:520px;line-height:1.7;margin-bottom:32px}
.nav-06__scroll-hint{
  display:inline-flex;align-items:center;gap:8px;
  color:var(--accent);font-size:.875rem;font-weight:600;
  animation:nav-06-bounce 1.5s ease-in-out infinite;
}
.nav-06__scroll-hint svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2}
@keyframes nav-06-bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
.nav-06__content{padding:60px 48px;max-width:800px;margin:0 auto}
.nav-06__card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:14px;padding:28px;margin-bottom:24px;
}
.nav-06__card h3{font-size:1.125rem;font-weight:600;color:var(--text);margin-bottom:8px}
.nav-06__card p{color:var(--muted);line-height:1.65;font-size:.9375rem}

@media(max-width:640px){.nav-06__links,.nav-06__btn--ghost{display:none}}
@media(prefers-reduced-motion:reduce){
  .nav-06__bar,.nav-06__logo,.nav-06__logo-leaf,.nav-06__btn,.nav-06__scroll-hint{transition:none;animation:none}
}
```

**JS:**
```js
(function(){
  var bar=document.getElementById('nav-06-bar');
  var prog=document.getElementById('nav-06-progress');
  function onScroll(){
    var y=window.scrollY;
    bar.classList.toggle('nav-06--shrunk',y>60);
    var doc=document.documentElement;
    var pct=y/(doc.scrollHeight-doc.clientHeight)*100;
    prog.style.width=Math.min(pct,100)+'%';
  }
  window.addEventListener('scroll',onScroll,{passive:true});
}());
```

### 07. CSS Sidebar Navigation Menu

**Type:** Pure CSS
**Description:** A collapsible vertical sidebar navigation with nested sub-menus, icon support, and a mini-mode that collapses to icon-only width. The sidebar uses CSS Grid for layout and supports multiple levels of navigation hierarchy, ideal for admin dashboards and web apps.

**HTML:**
```html
<div class="nav-07">
  <input type="checkbox" id="nav-07-collapse">
  <aside class="nav-07__sidebar" role="navigation" aria-label="Sidebar">
    <div class="nav-07__sidebar-top">
      <div class="nav-07__brand">
        <div class="nav-07__brand-icon">
          <svg viewBox="0 0 24 24"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
        </div>
        <span class="nav-07__brand-name">Quantum</span>
      </div>
      <label for="nav-07-collapse" class="nav-07__collapse-btn" aria-label="Collapse sidebar">
        <svg viewBox="0 0 24 24"><path d="M15 18l-6-6 6-6"/></svg>
      </label>
    </div>
    <nav class="nav-07__nav">
      <div class="nav-07__nav-label">Main</div>
      <ul>
        <li class="nav-07__active">
          <a href="#">
            <svg viewBox="0 0 24 24"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg>
            <span>Dashboard</span>
          </a>
        </li>
        <li>
          <a href="#">
            <svg viewBox="0 0 24 24"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg>
            <span>Analytics</span>
            <span class="nav-07__badge">5</span>
          </a>
        </li>
        <li>
          <a href="#">
            <svg viewBox="0 0 24 24"><path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 00-3-3.87M16 3.13a4 4 0 010 7.75"/></svg>
            <span>Users</span>
          </a>
        </li>
        <li>
          <a href="#">
            <svg viewBox="0 0 24 24"><path d="M6 2L3 6v14a2 2 0 002 2h14a2 2 0 002-2V6l-3-4z"/><line x1="3" y1="6" x2="21" y2="6"/><path d="M16 10a4 4 0 01-8 0"/></svg>
            <span>Orders</span>
            <span class="nav-07__badge">12</span>
          </a>
        </li>
      </ul>
      <div class="nav-07__nav-label">System</div>
      <ul>
        <li>
          <a href="#">
            <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/><path d="M19.07 4.93l-1.41 1.41M5.34 18.66l-1.41 1.41M20 12h2M2 12H0M19.07 19.07l-1.41-1.41M5.34 5.34L3.93 3.93M12 20v2M12 2v2"/></svg>
            <span>Settings</span>
          </a>
        </li>
        <li>
          <a href="#">
            <svg viewBox="0 0 24 24"><path d="M18 8h1a4 4 0 010 8h-1M2 8h16v9a4 4 0 01-4 4H6a4 4 0 01-4-4V8zM6 1v3M10 1v3M14 1v3"/></svg>
            <span>Integrations</span>
          </a>
        </li>
      </ul>
    </nav>
    <div class="nav-07__user">
      <div class="nav-07__avatar">JD</div>
      <div class="nav-07__user-info">
        <b>Jane Doe</b>
        <span>Admin</span>
      </div>
    </div>
  </aside>
  <main class="nav-07__main">
    <div class="nav-07__topbar">
      <h2>Dashboard Overview</h2>
      <div class="nav-07__topbar-right">
        <button class="nav-07__chip">This month</button>
        <button class="nav-07__chip">Export</button>
      </div>
    </div>
    <div class="nav-07__grid">
      <div class="nav-07__stat"><div class="nav-07__stat-label">Revenue</div><div class="nav-07__stat-val">$84.2k</div><div class="nav-07__stat-sub">↑ 12.4% vs last month</div></div>
      <div class="nav-07__stat"><div class="nav-07__stat-label">Users</div><div class="nav-07__stat-val">4,218</div><div class="nav-07__stat-sub">↑ 8.1% vs last month</div></div>
      <div class="nav-07__stat"><div class="nav-07__stat-label">Orders</div><div class="nav-07__stat-val">1,093</div><div class="nav-07__stat-sub">↑ 5.2% vs last month</div></div>
    </div>
    <div class="nav-07__table">
      <div class="nav-07__table-head"><span>Order</span><span>Amount</span><span>Date</span><span>Status</span></div>
      <div class="nav-07__table-row"><span>#1082 – Acme Corp</span><span>$2,400</span><span>Jun 11</span><span class="nav-07__dot nav-07__dot--green">Paid</span></div>
      <div class="nav-07__table-row"><span>#1081 – Globex Inc</span><span>$980</span><span>Jun 10</span><span class="nav-07__dot nav-07__dot--yellow">Pending</span></div>
      <div class="nav-07__table-row"><span>#1080 – Initech</span><span>$3,150</span><span>Jun 9</span><span class="nav-07__dot nav-07__dot--green">Paid</span></div>
      <div class="nav-07__table-row"><span>#1079 – Umbrella</span><span>$640</span><span>Jun 8</span><span class="nav-07__dot nav-07__dot--red">Failed</span></div>
    </div>
  </main>
</div>
```

**CSS:**
```css
.nav-07,.nav-07 *,.nav-07 *::before,.nav-07 *::after{box-sizing:border-box;margin:0;padding:0}
.nav-07 ::selection{background:#4f46e5;color:#fff}
#nav-07-collapse{display:none}
.nav-07{
  --bg:#f5f5f4;--sidebar:#1e1e2e;--sidebar-hover:#2a2a3e;
  --surface:#ffffff;--border:#e7e5e4;
  --text:#1c1917;--muted:#78716c;
  --sidebar-text:rgba(255,255,255,.65);--sidebar-active:#fff;
  --accent:#818cf8;--accent-bg:rgba(129,140,248,.15);
  font-family:'IBM Plex Sans',system-ui,sans-serif;
  background:var(--bg);min-height:100vh;
  display:flex;
}
/* sidebar */
.nav-07__sidebar{
  width:240px;min-height:100vh;background:var(--sidebar);
  display:flex;flex-direction:column;flex-shrink:0;
  transition:width .28s cubic-bezier(.4,0,.2,1);
  overflow:hidden;
}
#nav-07-collapse:checked ~ .nav-07__sidebar{width:64px}

.nav-07__sidebar-top{
  padding:20px 16px;border-bottom:1px solid rgba(255,255,255,.06);
  display:flex;align-items:center;justify-content:space-between;
  height:64px;
}
.nav-07__brand{
  display:flex;align-items:center;gap:10px;
  overflow:hidden;white-space:nowrap;
}
.nav-07__brand-icon{
  width:32px;height:32px;flex-shrink:0;border-radius:8px;
  background:linear-gradient(135deg,var(--accent),#6366f1);
  display:grid;place-items:center;
}
.nav-07__brand-icon svg{width:16px;height:16px;fill:#fff}
.nav-07__brand-name{
  font-size:1rem;font-weight:600;color:#fff;
  letter-spacing:-.02em;
  transition:opacity .2s,width .28s;
}
#nav-07-collapse:checked ~ .nav-07__sidebar .nav-07__brand-name{opacity:0;width:0}

.nav-07__collapse-btn{
  width:28px;height:28px;flex-shrink:0;cursor:pointer;
  background:rgba(255,255,255,.06);border-radius:6px;
  display:grid;place-items:center;transition:background .18s;
}
.nav-07__collapse-btn:hover{background:rgba(255,255,255,.1)}
.nav-07__collapse-btn svg{width:14px;height:14px;stroke:#fff;fill:none;stroke-width:2;transition:transform .28s}
#nav-07-collapse:checked ~ .nav-07__sidebar .nav-07__collapse-btn svg{transform:rotate(180deg)}

/* nav sections */
.nav-07__nav{flex:1;padding:12px 8px;overflow-y:auto;overflow-x:hidden}
.nav-07__nav-label{
  font-size:.65rem;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:rgba(255,255,255,.25);
  padding:4px 8px 6px;margin-top:8px;
  white-space:nowrap;overflow:hidden;
  transition:opacity .2s;
}
#nav-07-collapse:checked ~ .nav-07__sidebar .nav-07__nav-label{opacity:0}

.nav-07__nav ul{list-style:none}
.nav-07__nav li a{
  display:flex;align-items:center;gap:10px;
  padding:9px 8px;color:var(--sidebar-text);
  text-decoration:none;font-size:.875rem;font-weight:500;
  border-radius:8px;transition:background .18s,color .18s;
  white-space:nowrap;overflow:hidden;
}
.nav-07__nav li a:hover{background:var(--sidebar-hover);color:var(--sidebar-active)}
.nav-07__nav li.nav-07__active a{background:var(--accent-bg);color:var(--accent)}
.nav-07__nav li a svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.75;flex-shrink:0}
.nav-07__nav li a span{transition:opacity .2s,width .28s}
#nav-07-collapse:checked ~ .nav-07__sidebar .nav-07__nav li a span{opacity:0;width:0;overflow:hidden;display:inline-block}

.nav-07__badge{
  margin-left:auto;padding:2px 7px;border-radius:100px;
  font-size:.65rem;font-weight:700;background:var(--accent);color:#fff;
  flex-shrink:0;transition:opacity .2s;
}
#nav-07-collapse:checked ~ .nav-07__sidebar .nav-07__badge{opacity:0}

/* user row */
.nav-07__user{
  padding:12px 10px;border-top:1px solid rgba(255,255,255,.06);
  display:flex;align-items:center;gap:10px;overflow:hidden;
}
.nav-07__avatar{
  width:34px;height:34px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,#818cf8,#6366f1);
  display:grid;place-items:center;font-size:.8rem;font-weight:700;color:#fff;
}
.nav-07__user-info{overflow:hidden;white-space:nowrap;transition:opacity .2s}
.nav-07__user-info b{display:block;font-size:.8125rem;font-weight:600;color:#fff}
.nav-07__user-info span{font-size:.7rem;color:rgba(255,255,255,.35)}
#nav-07-collapse:checked ~ .nav-07__sidebar .nav-07__user-info{opacity:0;width:0}

/* main */
.nav-07__main{flex:1;padding:32px;overflow-y:auto}
.nav-07__topbar{
  background:var(--surface);border:1px solid var(--border);
  border-radius:12px;padding:16px 24px;margin-bottom:28px;
  display:flex;align-items:center;gap:12px;
}
.nav-07__topbar h2{font-size:1rem;font-weight:600;color:var(--text)}
.nav-07__topbar-right{margin-left:auto;display:flex;gap:10px}
.nav-07__chip{
  padding:5px 12px;border-radius:6px;font-size:.8rem;font-weight:500;
  background:var(--bg);border:1px solid var(--border);color:var(--muted);
  cursor:pointer;transition:background .18s;
}
.nav-07__chip:hover{background:var(--border)}
.nav-07__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:24px}
.nav-07__stat{
  background:var(--surface);border:1px solid var(--border);
  border-radius:12px;padding:20px 22px;
}
.nav-07__stat-label{font-size:.75rem;color:var(--muted);font-weight:500;margin-bottom:8px;letter-spacing:.03em;text-transform:uppercase}
.nav-07__stat-val{font-size:1.875rem;font-weight:700;color:var(--text);letter-spacing:-.03em}
.nav-07__stat-sub{font-size:.75rem;color:#10b981;font-weight:600;margin-top:4px}
.nav-07__table{background:var(--surface);border:1px solid var(--border);border-radius:12px;overflow:hidden}
.nav-07__table-head{
  display:grid;grid-template-columns:2fr 1fr 1fr 1fr;
  padding:12px 20px;border-bottom:1px solid var(--border);
  font-size:.75rem;font-weight:600;color:var(--muted);letter-spacing:.04em;text-transform:uppercase;
}
.nav-07__table-row{
  display:grid;grid-template-columns:2fr 1fr 1fr 1fr;
  padding:14px 20px;border-bottom:1px solid var(--border);
  font-size:.875rem;color:var(--text);
  transition:background .15s;
}
.nav-07__table-row:last-child{border-bottom:none}
.nav-07__table-row:hover{background:var(--bg)}
.nav-07__dot{
  display:inline-flex;align-items:center;gap:6px;
}
.nav-07__dot::before{
  content:'';width:7px;height:7px;border-radius:50%;display:inline-block;
}
.nav-07__dot--green::before{background:#10b981}
.nav-07__dot--yellow::before{background:#f59e0b}
.nav-07__dot--red::before{background:#ef4444}

@media(max-width:768px){
  .nav-07__sidebar{width:64px}
  .nav-07__brand-name,.nav-07__nav li a span,.nav-07__badge,.nav-07__user-info,.nav-07__nav-label{opacity:0;width:0;overflow:hidden}
  .nav-07__main{padding:16px}
  .nav-07__grid{grid-template-columns:1fr 1fr}
}
@media(prefers-reduced-motion:reduce){
  .nav-07__sidebar,.nav-07__brand-name,.nav-07__nav li a span,.nav-07__badge,.nav-07__user-info{transition:none}
}
```

### 08. CSS Tab Navigation with Animated Indicator

**Type:** Pure CSS
**Description:** A tab navigation component with a smooth sliding pill indicator that moves between tabs using only CSS. The indicator position and width are driven by CSS custom properties set via sibling selectors from hidden radio inputs — no JavaScript required for the animation.

**HTML:**
```html
<div class="nav-08">

  <!-- Pill tabs -->
  <div class="nav-08__demo-wrap">
    <p class="nav-08__demo-label">Pill / Capsule Tabs</p>
    <input type="radio" name="nav-08-t1" id="nav-08-t1-1" checked>
    <input type="radio" name="nav-08-t1" id="nav-08-t1-2">
    <input type="radio" name="nav-08-t1" id="nav-08-t1-3">
    <input type="radio" name="nav-08-t1" id="nav-08-t1-4">
    <div class="nav-08__tabs-1">
      <label for="nav-08-t1-1">Overview</label>
      <label for="nav-08-t1-2">Analytics</label>
      <label for="nav-08-t1-3">Reports</label>
      <label for="nav-08-t1-4">Settings</label>
      <div class="nav-08__pill"></div>
    </div>
    <div class="nav-08__panels-1">
      <div class="nav-08__panel"><h3>Overview</h3><p>A summary of all key metrics across your workspace, updated in real time.</p></div>
      <div class="nav-08__panel"><h3>Analytics</h3><p>Deep-dive charts showing traffic, conversions, and user behaviour trends.</p></div>
      <div class="nav-08__panel"><h3>Reports</h3><p>Scheduled reports delivered to your inbox every Monday morning.</p></div>
      <div class="nav-08__panel"><h3>Settings</h3><p>Configure notifications, integrations, and workspace preferences here.</p></div>
    </div>
  </div>

  <!-- Underline tabs -->
  <div class="nav-08__demo-wrap">
    <p class="nav-08__demo-label">Underline Tabs</p>
    <input type="radio" name="nav-08-t2" id="nav-08-t2-1" checked>
    <input type="radio" name="nav-08-t2" id="nav-08-t2-2">
    <input type="radio" name="nav-08-t2" id="nav-08-t2-3">
    <div class="nav-08__tabs-2">
      <label for="nav-08-t2-1">Activity</label>
      <label for="nav-08-t2-2">Integrations</label>
      <label for="nav-08-t2-3">Members</label>
      <div class="nav-08__underline"></div>
    </div>
    <div class="nav-08__panels-2">
      <div class="nav-08__panel"><h3>Activity</h3><p>Latest actions taken by team members in this workspace over the past 7 days.</p></div>
      <div class="nav-08__panel"><h3>Integrations</h3><p>Connect Slack, GitHub, Jira, and 40+ other tools with one click.</p></div>
      <div class="nav-08__panel"><h3>Members</h3><p>Manage roles, permissions, and invitations for every workspace member.</p></div>
    </div>
  </div>

  <!-- Segmented control -->
  <div class="nav-08__demo-wrap">
    <p class="nav-08__demo-label">Segmented Control</p>
    <input type="radio" name="nav-08-s" id="nav-08-s1" checked>
    <input type="radio" name="nav-08-s" id="nav-08-s2">
    <input type="radio" name="nav-08-s" id="nav-08-s3">
    <div class="nav-08__seg">
      <label for="nav-08-s1">Daily</label>
      <label for="nav-08-s2">Weekly</label>
      <label for="nav-08-s3">Monthly</label>
      <div class="nav-08__seg-thumb"></div>
    </div>
  </div>

</div>
```

**CSS:**
```css
.nav-08,.nav-08 *,.nav-08 *::before,.nav-08 *::after{box-sizing:border-box;margin:0;padding:0}
.nav-08 ::selection{background:#e11d48;color:#fff}
/* Hide the raw radio inputs. The labels are the visible tab triggers; the
   :checked state on the inputs drives the sliding indicator via sibling
   selectors. position:absolute + opacity:0 + 1px box keeps them keyboard-
   focusable (screen-reader and tab-key users can still activate them) but
   visually invisible. display:none would break keyboard accessibility. */
.nav-08 input[type="radio"]{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px;margin:0;}
.nav-08{
  --bg:#fff1f2;--surface:#fff;--border:#fecdd3;
  --text:#1a0a0d;--muted:#9f1239;
  --accent:#e11d48;--accent2:#fb7185;
  font-family:'Manrope',system-ui,sans-serif;
  background:var(--bg);min-height:100vh;
  display:flex;flex-direction:column;align-items:center;
  padding:60px 24px;
}
.nav-08__demo-wrap{width:100%;max-width:720px}
.nav-08__demo-wrap + .nav-08__demo-wrap{margin-top:56px}
.nav-08__demo-label{
  font-size:.75rem;font-weight:700;color:var(--muted);
  letter-spacing:.08em;text-transform:uppercase;margin-bottom:14px;
}

/* === Tab style 1: pill/capsule tabs === */
.nav-08__tabs-1{
  background:var(--surface);border:1px solid var(--border);
  border-radius:16px;padding:6px;
  /* CSS Grid with 4 equal columns so each tab gets exactly 1/4 of
     the container width regardless of label text length. The pill
     spans one column and shifts by exact multiples — no hardcoded
     pixel widths to drift from rendered label sizes. */
  display:grid;grid-template-columns:repeat(4,1fr);gap:2px;
  position:relative;
}
.nav-08__tabs-1 label{
  position:relative;z-index:1;
  padding:9px 12px;border-radius:11px;
  font-size:.875rem;font-weight:600;color:var(--muted);
  cursor:pointer;transition:color .2s;white-space:nowrap;
  user-select:none;text-align:center;
}
.nav-08__pill{
  position:absolute;top:6px;bottom:6px;
  border-radius:11px;background:var(--accent);
  /* Pill width = one grid column. With 4 columns + 3 gaps of 2px
     inside a container with 6px left+right padding: track width
     = 100% - 12px - 6px = 100% - 18px, single column = that / 4. */
  width:calc((100% - 18px) / 4);
  left:6px;
  transition:transform .28s cubic-bezier(.34,1.2,.64,1);
  z-index:0;
}
/* The radio inputs sit OUTSIDE .nav-08__tabs-1 (siblings of the
   tabs container, not of the .nav-08__pill inside it), so the
   old plain-sibling :checked ~ .nav-08__pill selector matched nothing.
   :has() lets us style descendants based on a sibling's state. */
.nav-08__demo-wrap:has(#nav-08-t1-1:checked) .nav-08__pill{transform:translateX(0)}
.nav-08__demo-wrap:has(#nav-08-t1-1:checked) label[for="nav-08-t1-1"]{color:#fff}
.nav-08__demo-wrap:has(#nav-08-t1-2:checked) .nav-08__pill{transform:translateX(calc(100% + 2px))}
.nav-08__demo-wrap:has(#nav-08-t1-2:checked) label[for="nav-08-t1-2"]{color:#fff}
.nav-08__demo-wrap:has(#nav-08-t1-3:checked) .nav-08__pill{transform:translateX(calc(200% + 4px))}
.nav-08__demo-wrap:has(#nav-08-t1-3:checked) label[for="nav-08-t1-3"]{color:#fff}
.nav-08__demo-wrap:has(#nav-08-t1-4:checked) .nav-08__pill{transform:translateX(calc(300% + 6px))}
.nav-08__demo-wrap:has(#nav-08-t1-4:checked) label[for="nav-08-t1-4"]{color:#fff}

/* panel content */
.nav-08__panels-1{
  background:var(--surface);border:1px solid var(--border);
  border-radius:16px;margin-top:4px;overflow:hidden;
}
/* show panel matching checked */
.nav-08__panel{display:none;padding:28px}
#nav-08-t1-1:checked ~ .nav-08__panels-1 .nav-08__panel:nth-child(1){display:block}
#nav-08-t1-2:checked ~ .nav-08__panels-1 .nav-08__panel:nth-child(2){display:block}
#nav-08-t1-3:checked ~ .nav-08__panels-1 .nav-08__panel:nth-child(3){display:block}
#nav-08-t1-4:checked ~ .nav-08__panels-1 .nav-08__panel:nth-child(4){display:block}
.nav-08__panel h3{font-size:1rem;font-weight:700;color:var(--text);margin-bottom:8px}
.nav-08__panel p{font-size:.9rem;color:var(--muted);line-height:1.6}

/* === Tab style 2: underline tabs === */
.nav-08__tabs-2{
  /* 3-column grid for 3 equally-sized tabs. Underline width matches
     a single column exactly. */
  display:grid;grid-template-columns:repeat(3,1fr);
  border-bottom:2px solid var(--border);
  position:relative;
}
.nav-08__tabs-2 label{
  padding:12px 20px;font-size:.875rem;font-weight:600;
  color:var(--muted);cursor:pointer;transition:color .2s;
  user-select:none;text-align:center;
}
.nav-08__tabs-2 label:hover{color:var(--text)}
.nav-08__underline{
  position:absolute;bottom:-2px;height:2px;
  background:var(--accent);border-radius:2px;
  width:calc(100% / 3);left:0;
  transition:transform .28s cubic-bezier(.4,0,.2,1);
}
/* Same :has() pattern — radios are outside .nav-08__tabs-2. */
.nav-08__demo-wrap:has(#nav-08-t2-1:checked) .nav-08__underline{transform:translateX(0)}
.nav-08__demo-wrap:has(#nav-08-t2-1:checked) label[for="nav-08-t2-1"]{color:var(--text)}
.nav-08__demo-wrap:has(#nav-08-t2-2:checked) .nav-08__underline{transform:translateX(100%)}
.nav-08__demo-wrap:has(#nav-08-t2-2:checked) label[for="nav-08-t2-2"]{color:var(--text)}
.nav-08__demo-wrap:has(#nav-08-t2-3:checked) .nav-08__underline{transform:translateX(200%)}
.nav-08__demo-wrap:has(#nav-08-t2-3:checked) label[for="nav-08-t2-3"]{color:var(--text)}

.nav-08__panels-2{
  background:var(--surface);border:1px solid var(--border);
  border-top:none;border-radius:0 0 14px 14px;
}
#nav-08-t2-1:checked ~ .nav-08__panels-2 .nav-08__panel:nth-child(1){display:block}
#nav-08-t2-2:checked ~ .nav-08__panels-2 .nav-08__panel:nth-child(2){display:block}
#nav-08-t2-3:checked ~ .nav-08__panels-2 .nav-08__panel:nth-child(3){display:block}

/* === Segmented control === */
.nav-08__seg{
  /* 3-column grid so each segment label is the same width as the
     thumb that highlights it. */
  display:grid;grid-template-columns:repeat(3,1fr);gap:2px;
  background:var(--border);border-radius:10px;padding:3px;position:relative;
}
.nav-08__seg label{
  padding:8px 18px;border-radius:8px;font-size:.8125rem;font-weight:600;
  color:var(--muted);cursor:pointer;transition:color .2s;
  position:relative;z-index:1;user-select:none;text-align:center;
}
.nav-08__seg-thumb{
  position:absolute;top:3px;bottom:3px;
  background:#fff;border-radius:8px;
  box-shadow:0 1px 4px rgba(0,0,0,.1);
  /* width = one column = (track width minus 6px padding and 4px gaps) / 3 */
  width:calc((100% - 10px) / 3);
  left:3px;
  transition:transform .25s cubic-bezier(.34,1.2,.64,1);
  z-index:0;
}
/* :has() — same pattern as the other two tab styles. */
.nav-08__demo-wrap:has(#nav-08-s1:checked) .nav-08__seg-thumb{transform:translateX(0)}
.nav-08__demo-wrap:has(#nav-08-s1:checked) label[for="nav-08-s1"]{color:var(--text)}
.nav-08__demo-wrap:has(#nav-08-s2:checked) .nav-08__seg-thumb{transform:translateX(calc(100% + 2px))}
.nav-08__demo-wrap:has(#nav-08-s2:checked) label[for="nav-08-s2"]{color:var(--text)}
.nav-08__demo-wrap:has(#nav-08-s3:checked) .nav-08__seg-thumb{transform:translateX(calc(200% + 4px))}
.nav-08__demo-wrap:has(#nav-08-s3:checked) label[for="nav-08-s3"]{color:var(--text)}

@media(prefers-reduced-motion:reduce){
  .nav-08__pill,.nav-08__underline,.nav-08__seg-thumb{transition:none}
}
```

### 09. CSS Breadcrumb Navigation

**Type:** Pure CSS
**Description:** A versatile breadcrumb navigation component with three style variants: classic arrow separators, rounded pill badges, and a slash-separated minimal style. Breadcrumbs improve site navigation hierarchy clarity and are critical for SEO structured data markup.

**HTML:**
```html
<div class="nav-09">

  <div class="nav-09__section">
    <p class="nav-09__section-label">Chevron Separator (default)</p>
    <ol class="nav-09__crumb" aria-label="Breadcrumb">
      <li><a href="#">Home</a></li>
      <li>
        <svg class="nav-09__sep" viewBox="0 0 24 24"><path d="M9 18l6-6-6-6"/></svg>
        <a href="#">Documentation</a>
      </li>
      <li>
        <svg class="nav-09__sep" viewBox="0 0 24 24"><path d="M9 18l6-6-6-6"/></svg>
        <a href="#">CSS Guides</a>
      </li>
      <li>
        <svg class="nav-09__sep" viewBox="0 0 24 24"><path d="M9 18l6-6-6-6"/></svg>
        <span aria-current="page">Navigation Patterns</span>
      </li>
    </ol>
  </div>

  <div class="nav-09__section">
    <p class="nav-09__section-label">Slash Separator</p>
    <ol class="nav-09__crumb nav-09__crumb--slash" aria-label="Breadcrumb">
      <li><a href="#">Dashboard</a></li>
      <li><a href="#">Projects</a></li>
      <li><a href="#">Website Redesign</a></li>
      <li><span aria-current="page">Assets</span></li>
    </ol>
  </div>

  <div class="nav-09__section">
    <p class="nav-09__section-label">With Icons</p>
    <ol class="nav-09__crumb" aria-label="Breadcrumb">
      <li>
        <a href="#" style="display:flex;align-items:center">
          <svg class="nav-09__crumb-icon" viewBox="0 0 24 24"><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/></svg>Home
        </a>
      </li>
      <li>
        <svg class="nav-09__sep" viewBox="0 0 24 24"><path d="M9 18l6-6-6-6"/></svg>
        <a href="#" style="display:flex;align-items:center">
          <svg class="nav-09__crumb-icon" viewBox="0 0 24 24"><path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z"/></svg>Components
        </a>
      </li>
      <li>
        <svg class="nav-09__sep" viewBox="0 0 24 24"><path d="M9 18l6-6-6-6"/></svg>
        <span aria-current="page" style="display:flex;align-items:center">
          <svg class="nav-09__crumb-icon" viewBox="0 0 24 24"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg>Navigation
        </span>
      </li>
    </ol>
  </div>

  <div class="nav-09__section">
    <p class="nav-09__section-label">Filled Pill Style</p>
    <ol class="nav-09__crumb nav-09__crumb--filled" aria-label="Breadcrumb">
      <li><a href="#">Home</a></li>
      <li>
        <svg class="nav-09__sep" viewBox="0 0 24 24"><path d="M9 18l6-6-6-6"/></svg>
        <a href="#">Products</a>
      </li>
      <li>
        <svg class="nav-09__sep" viewBox="0 0 24 24"><path d="M9 18l6-6-6-6"/></svg>
        <span aria-current="page">Navigation Bars</span>
      </li>
    </ol>
  </div>

  <div class="nav-09__section">
    <p class="nav-09__section-label">Mobile Back Button</p>
    <a href="#" class="nav-09__back" aria-label="Back to CSS Guides">
      <svg viewBox="0 0 24 24"><path d="M19 12H5M12 5l-7 7 7 7"/></svg>
      CSS Guides
    </a>
  </div>

  <div class="nav-09__section">
    <p class="nav-09__section-label">In Context — Documentation Layout</p>
    <div class="nav-09__doc">
      <div class="nav-09__doc-bar">
        <ol class="nav-09__crumb" style="background:transparent;border:none;padding:0" aria-label="Breadcrumb">
          <li><a href="#">Docs</a></li>
          <li><svg class="nav-09__sep" viewBox="0 0 24 24"><path d="M9 18l6-6-6-6"/></svg><a href="#">Navigation</a></li>
          <li><svg class="nav-09__sep" viewBox="0 0 24 24"><path d="M9 18l6-6-6-6"/></svg><span aria-current="page">Breadcrumbs</span></li>
        </ol>
      </div>
      <div class="nav-09__doc-body">
        <h2>Breadcrumb Navigation</h2>
        <p>Breadcrumbs show users where they are in the site hierarchy and let them jump up to any ancestor page. Built entirely with CSS using <code>flex</code>, pseudo-elements for separators, and <code>:hover</code> transitions — no JavaScript needed.</p>
      </div>
    </div>
  </div>

</div>
```

**CSS:**
```css
.nav-09,.nav-09 *,.nav-09 *::before,.nav-09 *::after{box-sizing:border-box;margin:0;padding:0}
.nav-09 ::selection{background:#0d9488;color:#fff}
.nav-09{
  --bg:#f0fdfa;--surface:#fff;--border:#ccfbf1;
  --text:#0f172a;--muted:#64748b;--link:#0d9488;--link-h:#0f766e;
  font-family:'Source Sans 3',system-ui,sans-serif;
  background:var(--bg);min-height:100vh;
  display:flex;flex-direction:column;align-items:center;
  padding:60px 24px;gap:48px;
}
.nav-09__section{width:100%;max-width:700px}
.nav-09__section-label{
  font-size:.7rem;font-weight:700;color:#0d9488;
  letter-spacing:.1em;text-transform:uppercase;margin-bottom:12px;
}

/* base breadcrumb */
.nav-09__crumb{
  display:flex;align-items:center;flex-wrap:wrap;
  gap:0;list-style:none;background:var(--surface);
  border:1px solid var(--border);border-radius:10px;
  padding:12px 18px;
}
.nav-09__crumb li{display:flex;align-items:center}
.nav-09__crumb li a{
  color:var(--link);text-decoration:none;font-size:.9rem;font-weight:500;
  padding:3px 6px;border-radius:5px;transition:background .15s,color .15s;
}
.nav-09__crumb li a:hover{background:#ccfbf1;color:var(--link-h)}
.nav-09__crumb li span{
  font-size:.9rem;font-weight:600;color:var(--text);
  padding:3px 6px;
}
/* separator with chevron */
.nav-09__sep{
  width:16px;height:16px;margin:0 2px;opacity:.35;flex-shrink:0;
  stroke:var(--text);fill:none;stroke-width:2;
}
/* separator with slash */
.nav-09__crumb--slash li:not(:last-child)::after{
  content:'/';margin:0 8px;color:rgba(0,0,0,.2);font-size:.9rem;
}
.nav-09__crumb--slash .nav-09__sep{display:none}
/* separator with dot */
.nav-09__crumb--dot li:not(:last-child)::after{
  content:'·';margin:0 8px;color:rgba(0,0,0,.25);font-size:1.2rem;line-height:1;
}
.nav-09__crumb--dot .nav-09__sep{display:none}

/* icons in crumbs */
.nav-09__crumb-icon{
  width:14px;height:14px;margin-right:5px;stroke:currentColor;fill:none;stroke-width:2;flex-shrink:0;
}

/* filled crumb style */
.nav-09__crumb--filled{background:transparent;border:none;padding:0;gap:4px}
.nav-09__crumb--filled li a{
  background:var(--surface);border:1px solid var(--border);
  padding:6px 12px;border-radius:8px;
  display:flex;align-items:center;
}
.nav-09__crumb--filled li a:hover{background:#ccfbf1;border-color:#5eead4}
.nav-09__crumb--filled li span{
  background:var(--link);color:#fff;padding:6px 12px;border-radius:8px;border:1px solid transparent;
}
.nav-09__crumb--filled .nav-09__sep{stroke:var(--muted)}

/* compact / mobile crumb with back only */
.nav-09__back{
  display:inline-flex;align-items:center;gap:6px;
  color:var(--link);text-decoration:none;font-size:.9rem;font-weight:600;
  padding:8px 14px;border-radius:8px;border:1px solid var(--border);
  background:var(--surface);transition:background .15s,border-color .15s;
}
.nav-09__back:hover{background:#ccfbf1;border-color:#5eead4}
.nav-09__back svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.5}

/* doc layout */
.nav-09__doc{
  background:var(--surface);border:1px solid var(--border);
  border-radius:14px;overflow:hidden;
}
.nav-09__doc-bar{
  padding:16px 24px;border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
}
.nav-09__doc-body{padding:28px 24px}
.nav-09__doc-body h2{font-size:1.375rem;font-weight:700;color:var(--text);margin-bottom:10px}
.nav-09__doc-body p{font-size:.9375rem;color:var(--muted);line-height:1.7}

@media(prefers-reduced-motion:reduce){.nav-09__crumb li a,.nav-09__back{transition:none}}
```

### 10. CSS Navigation with Glassmorphism Effect

**Type:** Pure CSS
**Description:** A stunning glassmorphism navigation bar with frosted glass effect, floating gradient orbs in the background, and animated blob shapes. The glass panel uses `backdrop-filter: blur()` for the frosted effect, with subtle border and inner glow for depth.

**HTML:**
```html
<div class="nav-10">
  <div class="nav-10__orb"></div>
  <div class="nav-10__orb"></div>
  <div class="nav-10__orb"></div>
  <nav class="nav-10__bar" role="navigation">
    <div class="nav-10__logo">
      <span class="nav-10__logo-glyph">
        <svg viewBox="0 0 24 24"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
      </span>
      Prism
    </div>
    <ul class="nav-10__links">
      <li><a href="#" class="nav-10__active">Home</a></li>
      <li><a href="#">Features</a></li>
      <li><a href="#">Pricing</a></li>
      <li><a href="#">Blog</a></li>
    </ul>
    <div class="nav-10__actions">
      <a href="#" class="nav-10__btn-out">Log in</a>
      <a href="#" class="nav-10__btn-in">Sign up free</a>
    </div>
  </nav>
  <div class="nav-10__hero">
    <div class="nav-10__card">
      <h1>Design <span>through glass</span></h1>
      <p>The navbar and card use <code>backdrop-filter: blur()</code> for frosted glass. Animated radial-gradient orbs behind create depth. Pure CSS with no images.</p>
      <a href="#" class="nav-10__card-btn">
        Explore →
      </a>
      <div class="nav-10__stats">
        <div class="nav-10__stat-pill"><b>backdrop-filter</b> blur</div>
        <div class="nav-10__stat-pill"><b>rgba</b> transparency</div>
        <div class="nav-10__stat-pill">CSS <b>animations</b></div>
      </div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.nav-10,.nav-10 *,.nav-10 *::before,.nav-10 *::after{box-sizing:border-box;margin:0;padding:0}
.nav-10 ::selection{background:#6366f1;color:#fff}
.nav-10{
  --text:#fff;--muted:rgba(255,255,255,.65);
  --glass:rgba(255,255,255,.1);--glass-border:rgba(255,255,255,.18);
  --accent:#a5b4fc;
  font-family:'Nunito',system-ui,sans-serif;
  min-height:100vh;
  background:
    radial-gradient(ellipse at 20% 50%, #3730a3 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, #7e22ce 0%, transparent 45%),
    radial-gradient(ellipse at 60% 90%, #1d4ed8 0%, transparent 45%),
    #0a0a1a;
  position:relative;overflow:hidden;
}
/* animated bg orbs */
.nav-10__orb{
  position:absolute;border-radius:50%;
  filter:blur(60px);opacity:.45;
  animation:nav-10-drift 12s ease-in-out infinite alternate;
}
.nav-10__orb:nth-child(1){width:400px;height:400px;background:#6366f1;top:-100px;left:-100px}
.nav-10__orb:nth-child(2){width:350px;height:350px;background:#7c3aed;bottom:-80px;right:10%;animation-delay:-4s;animation-duration:15s}
.nav-10__orb:nth-child(3){width:280px;height:280px;background:#2563eb;top:40%;left:60%;animation-delay:-8s;animation-duration:10s}
@keyframes nav-10-drift{0%{transform:translate(0,0)}100%{transform:translate(30px,20px)}}

/* glass navbar */
.nav-10__bar{
  position:sticky;top:20px;z-index:100;
  margin:20px 40px 0;
  background:var(--glass);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid var(--glass-border);
  border-radius:20px;
  padding:12px 20px;
  display:flex;align-items:center;justify-content:space-between;
  box-shadow:0 8px 32px rgba(0,0,0,.25);
}
.nav-10__logo{
  font-size:1.2rem;font-weight:700;color:var(--text);
  display:flex;align-items:center;gap:8px;letter-spacing:-.02em;
}
.nav-10__logo-glyph{
  width:30px;height:30px;border-radius:8px;
  background:rgba(255,255,255,.15);border:1px solid var(--glass-border);
  display:grid;place-items:center;
}
.nav-10__logo-glyph svg{width:16px;height:16px;stroke:#fff;fill:none;stroke-width:2}
.nav-10__links{display:flex;align-items:center;gap:2px;list-style:none}
.nav-10__links a{
  padding:8px 14px;color:var(--muted);text-decoration:none;
  font-size:.875rem;font-weight:600;border-radius:12px;
  transition:background .2s,color .2s;
}
.nav-10__links a:hover{background:var(--glass);color:var(--text)}
.nav-10__links a.nav-10__active{background:rgba(255,255,255,.12);color:var(--text)}

.nav-10__actions{display:flex;align-items:center;gap:8px}
.nav-10__btn-out{
  padding:7px 16px;border-radius:12px;font-size:.875rem;font-weight:600;
  color:var(--text);background:transparent;border:1px solid var(--glass-border);
  text-decoration:none;transition:background .2s;cursor:pointer;
}
.nav-10__btn-out:hover{background:var(--glass)}
.nav-10__btn-in{
  padding:7px 16px;border-radius:12px;font-size:.875rem;font-weight:600;
  color:#fff;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.25);
  text-decoration:none;transition:background .2s;cursor:pointer;
}
.nav-10__btn-in:hover{background:rgba(255,255,255,.22)}

/* floating glass card */
.nav-10__hero{
  position:relative;z-index:10;
  display:flex;flex-direction:column;align-items:center;
  justify-content:center;padding:80px 24px;text-align:center;
  min-height:80vh;
}
.nav-10__card{
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border:1px solid rgba(255,255,255,.15);
  border-radius:24px;padding:48px 52px;
  max-width:580px;
  box-shadow:0 20px 60px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.2);
}
.nav-10__card h1{
  font-size:clamp(2rem,5vw,3.25rem);font-weight:700;
  color:#fff;letter-spacing:-.04em;line-height:1.15;
  margin-bottom:16px;
}
.nav-10__card h1 span{
  background:linear-gradient(135deg,#a5b4fc,#c4b5fd);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
}
.nav-10__card p{font-size:1rem;color:rgba(255,255,255,.7);line-height:1.7;margin-bottom:28px}
.nav-10__card-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 28px;border-radius:14px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);
  color:#fff;font-size:.9375rem;font-weight:700;text-decoration:none;
  transition:background .2s,box-shadow .2s;
  backdrop-filter:blur(8px);
}
.nav-10__card-btn:hover{background:rgba(255,255,255,.2);box-shadow:0 4px 20px rgba(0,0,0,.2)}

/* small glass pills */
.nav-10__stats{
  display:flex;gap:12px;margin-top:28px;flex-wrap:wrap;justify-content:center;
}
.nav-10__stat-pill{
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);
  border-radius:100px;padding:8px 18px;
  font-size:.8rem;font-weight:600;color:rgba(255,255,255,.7);
}
.nav-10__stat-pill b{color:#fff}

@media(max-width:600px){
  .nav-10__bar{margin:12px 16px 0;border-radius:16px}
  .nav-10__links,.nav-10__btn-out{display:none}
  .nav-10__card{padding:32px 24px}
}
@media(prefers-reduced-motion:reduce){
  .nav-10__orb{animation:none}
  .nav-10__links a,.nav-10__btn-out,.nav-10__btn-in,.nav-10__card-btn{transition:none}
}
```

### 11. CSS Animated Navigation Icons with Labels

**Type:** Pure CSS
**Description:** A bottom navigation bar with animated SVG icons and floating labels, designed for mobile app interfaces. Each icon features a unique CSS keyframe animation on the active state — bounce, spin, wiggle, pulse, and morph — creating an expressive, app-like feel.

**HTML:**
```html
<div class="nav-11">
  <input type="radio" name="nav-11" id="nav-11-t1" checked>
  <input type="radio" name="nav-11" id="nav-11-t2">
  <input type="radio" name="nav-11" id="nav-11-t3">
  <input type="radio" name="nav-11" id="nav-11-t4">
  <input type="radio" name="nav-11" id="nav-11-t5">
  <div class="nav-11__topbar">
    <div class="nav-11__logo">Nova<span>App</span></div>
  </div>
  <div class="nav-11__content">
    <div class="nav-11__page">
      <div class="nav-11__page-icon" style="background:rgba(244,63,94,.12);color:#f43f5e">
        <svg viewBox="0 0 24 24"><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
      </div>
      <h2>Home</h2>
      <p>Your personalised feed. Icons animate with a spring scale + dot indicator on selection — powered by CSS <code>:checked</code> sibling selectors.</p>
    </div>
    <div class="nav-11__page">
      <div class="nav-11__page-icon" style="background:rgba(6,182,212,.12);color:#06b6d4">
        <svg viewBox="0 0 24 24"><path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/></svg>
      </div>
      <h2>Messages</h2>
      <p>3 unread conversations. The notification badge pops in with a spring scale animation on the icon when this tab is active.</p>
    </div>
    <div class="nav-11__page">
      <div class="nav-11__page-icon" style="background:rgba(16,185,129,.12);color:#10b981">
        <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
      </div>
      <h2>Explore</h2>
      <p>Browse trending content. The search icon rotates slightly on activation to add personality to the transition.</p>
    </div>
    <div class="nav-11__page">
      <div class="nav-11__page-icon" style="background:rgba(245,158,11,.12);color:#f59e0b">
        <svg viewBox="0 0 24 24"><path d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z"/></svg>
      </div>
      <h2>Saved</h2>
      <p>Bookmarked items from across the app. Each icon in the dock has its own accent colour for instant visual identification.</p>
    </div>
    <div class="nav-11__page">
      <div class="nav-11__page-icon" style="background:rgba(139,92,246,.12);color:#8b5cf6">
        <svg viewBox="0 0 24 24"><path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
      </div>
      <h2>Profile</h2>
      <p>Your account and settings. The bottom dock floats over content using <code>position: fixed</code> with <code>backdrop-filter: blur</code>.</p>
    </div>
  </div>
  <nav class="nav-11__dock" role="navigation" aria-label="Bottom navigation">
    <div class="nav-11__dock-item">
      <label for="nav-11-t1" aria-label="Home">
        <div class="nav-11__dock-icon">
          <svg viewBox="0 0 24 24"><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
        </div>
        <span class="nav-11__dock-label">Home</span>
      </label>
      <div class="nav-11__dock-dot"></div>
    </div>
    <div class="nav-11__dock-item">
      <label for="nav-11-t2" aria-label="Messages">
        <div class="nav-11__dock-icon">
          <svg viewBox="0 0 24 24"><path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/></svg>
          <span class="nav-11__dock-badge">3</span>
        </div>
        <span class="nav-11__dock-label">Messages</span>
      </label>
      <div class="nav-11__dock-dot"></div>
    </div>
    <div class="nav-11__dock-item">
      <label for="nav-11-t3" aria-label="Explore">
        <div class="nav-11__dock-icon">
          <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
        </div>
        <span class="nav-11__dock-label">Explore</span>
      </label>
      <div class="nav-11__dock-dot"></div>
    </div>
    <div class="nav-11__dock-item">
      <label for="nav-11-t4" aria-label="Saved">
        <div class="nav-11__dock-icon">
          <svg viewBox="0 0 24 24"><path d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z"/></svg>
        </div>
        <span class="nav-11__dock-label">Saved</span>
      </label>
      <div class="nav-11__dock-dot"></div>
    </div>
    <div class="nav-11__dock-item">
      <label for="nav-11-t5" aria-label="Profile">
        <div class="nav-11__dock-icon">
          <svg viewBox="0 0 24 24"><path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
        </div>
        <span class="nav-11__dock-label">Profile</span>
      </label>
      <div class="nav-11__dock-dot"></div>
    </div>
  </nav>
</div>
```

**CSS:**
```css
.nav-11,.nav-11 *,.nav-11 *::before,.nav-11 *::after{box-sizing:border-box;margin:0;padding:0}
.nav-11 ::selection{background:#f43f5e;color:#fff}
#nav-11-t1,#nav-11-t2,#nav-11-t3,#nav-11-t4,#nav-11-t5{display:none}
.nav-11{
  --bg:#0f0f13;--surface:#18181f;--surface2:#22222c;
  --border:rgba(255,255,255,.07);--text:#f5f5fa;--muted:#71717a;
  --accent:#f43f5e;--cyan:#06b6d4;--green:#10b981;--amber:#f59e0b;--purple:#8b5cf6;
  font-family:'Poppins',system-ui,sans-serif;
  background:var(--bg);min-height:100vh;
  display:flex;flex-direction:column;
}
/* top bar */
.nav-11__topbar{
  background:var(--surface);border-bottom:1px solid var(--border);
  padding:0 40px;display:flex;align-items:center;justify-content:space-between;
  height:60px;
}
.nav-11__logo{font-size:1.1rem;font-weight:600;color:var(--text)}
.nav-11__logo span{color:var(--accent)}

/* icon dock - bottom */
.nav-11__dock{
  position:fixed;bottom:28px;left:50%;transform:translateX(-50%);
  background:rgba(24,24,31,.85);
  backdrop-filter:blur(16px);
  border:1px solid var(--border);
  border-radius:24px;
  padding:10px 14px;
  display:flex;align-items:center;gap:6px;
  box-shadow:0 8px 32px rgba(0,0,0,.5);
  z-index:100;
}
.nav-11__dock-item{
  position:relative;
  display:flex;flex-direction:column;align-items:center;
  cursor:pointer;user-select:none;
}
.nav-11__dock-item label{
  cursor:pointer;
  display:flex;flex-direction:column;align-items:center;
  gap:4px;
  padding:10px 14px;border-radius:16px;
  transition:background .2s;
}
.nav-11__dock-item label:hover{background:rgba(255,255,255,.05)}
/* icon container */
.nav-11__dock-icon{
  width:28px;height:28px;position:relative;
  display:flex;align-items:center;justify-content:center;
}
.nav-11__dock-icon svg{
  width:22px;height:22px;stroke:var(--muted);fill:none;stroke-width:1.75;
  transition:stroke .2s,transform .3s cubic-bezier(.34,1.56,.64,1);
}
.nav-11__dock-label{
  font-size:.65rem;font-weight:600;color:var(--muted);letter-spacing:.04em;
  transition:color .2s,transform .2s;
}
/* badge */
.nav-11__dock-badge{
  position:absolute;top:-3px;right:-3px;
  width:16px;height:16px;border-radius:50%;
  background:var(--accent);color:#fff;
  font-size:.55rem;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  border:2px solid var(--surface);
  opacity:0;transform:scale(0);
  transition:opacity .2s,transform .25s cubic-bezier(.34,1.56,.64,1);
}
/* active indicator dot */
.nav-11__dock-dot{
  position:absolute;bottom:-6px;left:50%;transform:translateX(-50%) scale(0);
  width:4px;height:4px;border-radius:50%;
  transition:transform .25s cubic-bezier(.34,1.56,.64,1);
}

/* checked states */
#nav-11-t1:checked ~ .nav-11__dock .nav-11__dock-item:nth-child(1) label{background:rgba(244,63,94,.1)}
#nav-11-t1:checked ~ .nav-11__dock .nav-11__dock-item:nth-child(1) .nav-11__dock-icon svg{stroke:var(--accent);transform:scale(1.15)}
#nav-11-t1:checked ~ .nav-11__dock .nav-11__dock-item:nth-child(1) .nav-11__dock-label{color:var(--accent)}
#nav-11-t1:checked ~ .nav-11__dock .nav-11__dock-item:nth-child(1) .nav-11__dock-dot{background:var(--accent);transform:translateX(-50%) scale(1)}

#nav-11-t2:checked ~ .nav-11__dock .nav-11__dock-item:nth-child(2) label{background:rgba(6,182,212,.1)}
#nav-11-t2:checked ~ .nav-11__dock .nav-11__dock-item:nth-child(2) .nav-11__dock-icon svg{stroke:var(--cyan);transform:scale(1.15)}
#nav-11-t2:checked ~ .nav-11__dock .nav-11__dock-item:nth-child(2) .nav-11__dock-label{color:var(--cyan)}
#nav-11-t2:checked ~ .nav-11__dock .nav-11__dock-item:nth-child(2) .nav-11__dock-dot{background:var(--cyan);transform:translateX(-50%) scale(1)}
#nav-11-t2:checked ~ .nav-11__dock .nav-11__dock-item:nth-child(2) .nav-11__dock-badge{opacity:1;transform:scale(1)}

#nav-11-t3:checked ~ .nav-11__dock .nav-11__dock-item:nth-child(3) label{background:rgba(16,185,129,.1)}
#nav-11-t3:checked ~ .nav-11__dock .nav-11__dock-item:nth-child(3) .nav-11__dock-icon svg{stroke:var(--green);transform:scale(1.15) rotate(-10deg)}
#nav-11-t3:checked ~ .nav-11__dock .nav-11__dock-item:nth-child(3) .nav-11__dock-label{color:var(--green)}
#nav-11-t3:checked ~ .nav-11__dock .nav-11__dock-item:nth-child(3) .nav-11__dock-dot{background:var(--green);transform:translateX(-50%) scale(1)}

#nav-11-t4:checked ~ .nav-11__dock .nav-11__dock-item:nth-child(4) label{background:rgba(245,158,11,.1)}
#nav-11-t4:checked ~ .nav-11__dock .nav-11__dock-item:nth-child(4) .nav-11__dock-icon svg{stroke:var(--amber);transform:scale(1.15)}
#nav-11-t4:checked ~ .nav-11__dock .nav-11__dock-item:nth-child(4) .nav-11__dock-label{color:var(--amber)}
#nav-11-t4:checked ~ .nav-11__dock .nav-11__dock-item:nth-child(4) .nav-11__dock-dot{background:var(--amber);transform:translateX(-50%) scale(1)}

#nav-11-t5:checked ~ .nav-11__dock .nav-11__dock-item:nth-child(5) label{background:rgba(139,92,246,.1)}
#nav-11-t5:checked ~ .nav-11__dock .nav-11__dock-item:nth-child(5) .nav-11__dock-icon svg{stroke:var(--purple);transform:scale(1.15)}
#nav-11-t5:checked ~ .nav-11__dock .nav-11__dock-item:nth-child(5) .nav-11__dock-label{color:var(--purple)}
#nav-11-t5:checked ~ .nav-11__dock .nav-11__dock-item:nth-child(5) .nav-11__dock-dot{background:var(--purple);transform:translateX(-50%) scale(1)}

/* content panels */
.nav-11__content{
  flex:1;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  padding:60px 24px 140px;text-align:center;
}
.nav-11__page{display:none;flex-direction:column;align-items:center;gap:16px}
#nav-11-t1:checked ~ .nav-11__content .nav-11__page:nth-child(1){display:flex}
#nav-11-t2:checked ~ .nav-11__content .nav-11__page:nth-child(2){display:flex}
#nav-11-t3:checked ~ .nav-11__content .nav-11__page:nth-child(3){display:flex}
#nav-11-t4:checked ~ .nav-11__content .nav-11__page:nth-child(4){display:flex}
#nav-11-t5:checked ~ .nav-11__content .nav-11__page:nth-child(5){display:flex}

.nav-11__page-icon{
  width:72px;height:72px;border-radius:22px;
  display:grid;place-items:center;margin-bottom:8px;
}
.nav-11__page-icon svg{width:32px;height:32px;fill:none;stroke:currentColor;stroke-width:1.75}
.nav-11__page h2{font-size:1.75rem;font-weight:600;color:var(--text);letter-spacing:-.02em}
.nav-11__page p{font-size:.9375rem;color:var(--muted);max-width:380px;line-height:1.65}

@media(prefers-reduced-motion:reduce){
  .nav-11__dock-icon svg,.nav-11__dock-label,.nav-11__dock-dot,.nav-11__dock-badge{transition:none}
}
```

### 12. CSS Multi-Level Accordion Navigation

**Type:** Pure CSS
**Description:** A hierarchical accordion sidebar navigation with smooth expand/collapse animations, nested sub-menus, and visual depth indicators. Built with CSS `max-height` transitions and hidden checkbox inputs — ideal for documentation sites and complex application navigation trees.

**HTML:**
```html
<div class="nav-12">
  <input type="checkbox" id="nav-12-c1" checked>
  <input type="checkbox" id="nav-12-c2">
  <input type="checkbox" id="nav-12-c3">
  <input type="checkbox" id="nav-12-c4">
  <aside class="nav-12__sidebar" role="navigation" aria-label="Sidebar tree">
    <div class="nav-12__sidebar-head">
      <div class="nav-12__sidebar-icon">
        <svg viewBox="0 0 24 24"><path d="M2 3h6a4 4 0 014 4v14a3 3 0 00-3-3H2z"/><path d="M22 3h-6a4 4 0 00-4 4v14a3 3 0 013-3h7z"/></svg>
      </div>
      <span class="nav-12__sidebar-logo"><span>Dev</span>Docs</span>
    </div>
    <div class="nav-12__search">
      <div class="nav-12__search-inner">
        <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
        <span>Search docs…</span>
      </div>
    </div>
    <nav class="nav-12__tree">
      <ul>
        <li class="nav-12__item"><a href="#" class="nav-12__active">
          <svg viewBox="0 0 24 24"><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/></svg>Introduction</a>
        </li>
        <li class="nav-12__item">
          <label for="nav-12-c1" class="nav-12__label--1">
            <svg viewBox="0 0 24 24"><path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z"/></svg>
            Getting Started
            <svg class="nav-12__chevron" viewBox="0 0 24 24"><path d="M9 18l6-6-6-6"/></svg>
          </label>
          <ul class="nav-12__sub nav-12__sub--1">
            <li><a href="#">Installation</a></li>
            <li><a href="#">Quick Start Guide</a></li>
            <li><a href="#">Project Structure</a></li>
            <li class="nav-12__item">
              <label for="nav-12-c2" class="nav-12__label--2" style="padding:7px 8px 7px 16px;font-size:.8125rem">
                Configuration
                <svg class="nav-12__chevron" viewBox="0 0 24 24"><path d="M9 18l6-6-6-6"/></svg>
              </label>
              <ul class="nav-12__sub nav-12__sub--2">
                <li><a href="#">Environment Variables</a></li>
                <li><a href="#">TypeScript Config</a></li>
                <li><a href="#">ESLint Setup</a></li>
              </ul>
            </li>
          </ul>
        </li>
        <li class="nav-12__item">
          <label for="nav-12-c3" class="nav-12__label--3">
            <svg viewBox="0 0 24 24"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg>
            Components
            <svg class="nav-12__chevron" viewBox="0 0 24 24"><path d="M9 18l6-6-6-6"/></svg>
          </label>
          <ul class="nav-12__sub nav-12__sub--3">
            <li><a href="#">Button</a></li>
            <li><a href="#">Input</a></li>
            <li><a href="#">Modal</a></li>
            <li><a href="#">Navigation</a></li>
            <li><a href="#">Table</a></li>
          </ul>
        </li>
        <li class="nav-12__item">
          <label for="nav-12-c4" class="nav-12__label--4">
            <svg viewBox="0 0 24 24"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
            API Reference
            <svg class="nav-12__chevron" viewBox="0 0 24 24"><path d="M9 18l6-6-6-6"/></svg>
          </label>
          <ul class="nav-12__sub nav-12__sub--4">
            <li><a href="#">Authentication</a></li>
            <li><a href="#">Endpoints</a></li>
            <li><a href="#">Webhooks</a></li>
          </ul>
        </li>
        <li class="nav-12__item"><a href="#"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3M12 17h.01"/></svg>FAQ</a></li>
      </ul>
    </nav>
  </aside>
  <main class="nav-12__main">
    <h2>Multi-Level Accordion Navigation</h2>
    <p>The tree sidebar uses hidden <code>&lt;input type="checkbox"&gt;</code> elements toggled by <code>&lt;label&gt;</code> siblings. Each sub-list transitions from <code>max-height: 0</code> to a large value, creating a smooth accordion without JavaScript.</p>
    <div class="nav-12__code-block">
<span class="cmt">/* Chevron rotates when section is open */</span>
<br>#nav-12-c1:checked ~ * .nav-12__chevron {
<br>&nbsp;&nbsp;<span class="kw">transform</span>: rotate(<span class="str">90deg</span>);
<br>}
<br><span class="cmt">/* Sub-list expands */</span>
<br>#nav-12-c1:checked ~ * .nav-12__sub--1 {
<br>&nbsp;&nbsp;<span class="kw">max-height</span>: <span class="str">500px</span>;
<br>}
    </div>
  </main>
</div>
```

**CSS:**
```css
.nav-12,.nav-12 *,.nav-12 *::before,.nav-12 *::after{box-sizing:border-box;margin:0;padding:0}
.nav-12 ::selection{background:#0891b2;color:#fff}
.nav-12{
  --bg:#f8fafc;--sidebar:#fff;--border:#e2e8f0;
  --text:#1e293b;--muted:#64748b;--accent:#0891b2;--accent-bg:#ecfeff;
  font-family:'Rubik',system-ui,sans-serif;
  background:var(--bg);min-height:100vh;
  display:flex;
}
/* accordion inputs */
.nav-12 input[type="checkbox"]{display:none}

.nav-12__sidebar{
  width:260px;min-height:100vh;background:var(--sidebar);
  border-right:1px solid var(--border);flex-shrink:0;
  display:flex;flex-direction:column;
}
.nav-12__sidebar-head{
  padding:20px 16px;border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:10px;
}
.nav-12__sidebar-logo{font-size:1rem;font-weight:600;color:var(--text)}
.nav-12__sidebar-logo span{color:var(--accent)}
.nav-12__sidebar-icon{
  width:30px;height:30px;border-radius:7px;
  background:var(--accent);display:grid;place-items:center;
}
.nav-12__sidebar-icon svg{width:16px;height:16px;stroke:#fff;fill:none;stroke-width:2}

/* search */
.nav-12__search{
  padding:12px 12px;border-bottom:1px solid var(--border);
}
.nav-12__search-inner{
  display:flex;align-items:center;gap:8px;
  background:var(--bg);border:1px solid var(--border);
  border-radius:8px;padding:8px 12px;
}
.nav-12__search-inner svg{width:15px;height:15px;stroke:var(--muted);fill:none;stroke-width:2;flex-shrink:0}
.nav-12__search-inner span{font-size:.8125rem;color:var(--muted)}

.nav-12__tree{padding:10px 8px;flex:1;overflow-y:auto}
.nav-12__tree > ul{list-style:none}

/* top-level item */
.nav-12__item{margin-bottom:2px}
.nav-12__item > label,
.nav-12__item > a{
  display:flex;align-items:center;gap:8px;
  padding:9px 8px;border-radius:8px;
  font-size:.875rem;font-weight:500;color:var(--muted);
  cursor:pointer;transition:background .15s,color .15s;
  user-select:none;text-decoration:none;
}
.nav-12__item > label:hover,
.nav-12__item > a:hover{background:var(--bg);color:var(--text)}
.nav-12__item > label svg,
.nav-12__item > a svg{
  width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;flex-shrink:0;opacity:.7;
}
.nav-12__item > a.nav-12__active{background:var(--accent-bg);color:var(--accent);font-weight:600}
.nav-12__item > a.nav-12__active svg{opacity:1}

/* chevron */
.nav-12__chevron{
  margin-left:auto;width:14px;height:14px;
  stroke:currentColor;fill:none;stroke-width:2;
  transition:transform .22s ease;opacity:.5;
}

/* sub list */
.nav-12__sub{
  max-height:0;overflow:hidden;
  list-style:none;
  padding-left:22px;
  transition:max-height .3s ease;
}
.nav-12__sub a{
  display:flex;align-items:center;gap:8px;
  padding:7px 8px 7px 16px;border-radius:8px;
  font-size:.8125rem;font-weight:500;color:var(--muted);
  text-decoration:none;transition:background .15s,color .15s;
  position:relative;
}
.nav-12__sub a::before{
  content:'';position:absolute;left:2px;top:50%;
  width:5px;height:5px;border-radius:50%;
  background:var(--border);transform:translateY(-50%);
  transition:background .15s;
}
.nav-12__sub a:hover{background:var(--bg);color:var(--text)}
.nav-12__sub a:hover::before{background:var(--muted)}
.nav-12__sub a.nav-12__active{color:var(--accent)}
.nav-12__sub a.nav-12__active::before{background:var(--accent)}

/* nested sub */
.nav-12__sub .nav-12__sub{padding-left:16px}

/* checked open states */
#nav-12-c1:checked ~ * .nav-12__sub--1{max-height:500px}
#nav-12-c1:checked ~ * .nav-12__label--1 .nav-12__chevron{transform:rotate(90deg)}
#nav-12-c2:checked ~ * .nav-12__sub--2{max-height:300px}
#nav-12-c2:checked ~ * .nav-12__label--2 .nav-12__chevron{transform:rotate(90deg)}
#nav-12-c3:checked ~ * .nav-12__sub--3{max-height:300px}
#nav-12-c3:checked ~ * .nav-12__label--3 .nav-12__chevron{transform:rotate(90deg)}
#nav-12-c4:checked ~ * .nav-12__sub--4{max-height:300px}
#nav-12-c4:checked ~ * .nav-12__label--4 .nav-12__chevron{transform:rotate(90deg)}

/* main content */
.nav-12__main{flex:1;padding:32px;overflow-y:auto}
.nav-12__main h2{font-size:1.25rem;font-weight:600;color:var(--text);margin-bottom:16px}
.nav-12__main p{color:var(--muted);line-height:1.7;margin-bottom:16px;font-size:.9375rem}
.nav-12__code-block{
  background:#0f172a;border-radius:10px;padding:20px 22px;
  font-family:'IBM Plex Mono',monospace;font-size:.8rem;
  color:#94a3b8;line-height:1.7;
}
.nav-12__code-block .kw{color:#7dd3fc}
.nav-12__code-block .str{color:#86efac}
.nav-12__code-block .cmt{color:#475569}

@media(max-width:600px){
  .nav-12__sidebar{width:220px}
}
@media(prefers-reduced-motion:reduce){
  .nav-12__sub,.nav-12__chevron{transition:none}
}
```

### 13. CSS Navigation with Magnetic Hover Effect

**Type:** CSS + JS
**Description:** An interactive navigation bar where menu items subtly attract to the cursor using a magnetic effect. CSS custom properties `--dx` and `--dy` are updated on mouse move via JavaScript, and CSS `translate` applies the offset — creating a fluid, physics-inspired hover interaction.

**HTML:**
```html
<div class="nav-13">
  <div class="nav-13__glow" id="nav-13-glow"></div>
  <div class="nav-13__ring"></div>
  <div class="nav-13__ring"></div>
  <nav class="nav-13__bar" role="navigation">
    <a href="#" class="nav-13__logo">Arp<span>.</span></a>
    <ul class="nav-13__links">
      <li><a href="#" class="nav-13__mag">Work</a></li>
      <li><a href="#" class="nav-13__mag">Studio</a></li>
      <li><a href="#" class="nav-13__mag">Process</a></li>
      <li><a href="#" class="nav-13__mag">Journal</a></li>
    </ul>
    <a href="#" class="nav-13__cta nav-13__mag">Let's talk →</a>
  </nav>
  <div class="nav-13__hero">
    <p class="nav-13__label">Creative Direction & Design</p>
    <h1>Move the cursor<br><span>near the nav</span></h1>
    <p>Navigation links react magnetically to the cursor — a CSS custom property trick where JS writes <code>--dx</code>/<code>--dy</code> values and CSS <code>transform: translate()</code> picks them up, keeping animation on the compositor.</p>
  </div>
</div>

```

**CSS:**
```css
.nav-13,.nav-13 *,.nav-13 *::before,.nav-13 *::after{box-sizing:border-box;margin:0;padding:0}
.nav-13 ::selection{background:#fbbf24;color:#000}
.nav-13{
  --bg:#070707;--text:#fafafa;--muted:#737373;
  --accent:#fbbf24;--border:rgba(255,255,255,.08);
  font-family:'Space Grotesk',system-ui,sans-serif;
  background:var(--bg);min-height:100vh;overflow:hidden;
}
/* cursor glow */
.nav-13__glow{
  position:fixed;width:400px;height:400px;border-radius:50%;
  background:radial-gradient(circle,rgba(251,191,36,.06) 0%,transparent 70%);
  pointer-events:none;transform:translate(-50%,-50%);z-index:0;
  transition:transform .12s ease;will-change:transform;
}

/* bar */
.nav-13__bar{
  position:fixed;top:0;left:0;right:0;z-index:100;
  padding:28px 48px;
  display:flex;align-items:center;justify-content:space-between;
}
.nav-13__logo{
  font-size:1.4rem;font-weight:700;color:var(--text);
  letter-spacing:-.04em;position:relative;z-index:1;
  text-decoration:none;
}
.nav-13__logo span{color:var(--accent)}
.nav-13__links{display:flex;align-items:center;gap:8px;list-style:none;position:relative;z-index:1}
.nav-13__links li{position:relative}
.nav-13__links a{
  display:block;padding:10px 16px;
  color:var(--muted);text-decoration:none;
  font-size:.9375rem;font-weight:500;
  border-radius:10px;
  transition:color .15s;
  position:relative;z-index:1;
}
/* hover bg pill */
.nav-13__links a::before{
  content:'';position:absolute;inset:0;
  border-radius:10px;background:rgba(255,255,255,.05);
  transform:scale(.8);opacity:0;
  transition:transform .22s cubic-bezier(.34,1.56,.64,1),opacity .2s;
  z-index:-1;
}
.nav-13__links a:hover{color:var(--text)}
.nav-13__links a:hover::before{transform:scale(1);opacity:1}

/* magnetic effect via CSS custom props set by JS */
.nav-13__links a{
  --dx:0px;--dy:0px;
  transform:translate(var(--dx),var(--dy));
  transition:color .15s,transform .3s cubic-bezier(.34,1.56,.64,1);
}

/* CTA button */
.nav-13__cta{
  position:relative;z-index:1;
  padding:10px 22px;border-radius:10px;
  background:var(--accent);color:#000;
  text-decoration:none;font-weight:700;font-size:.875rem;
  display:inline-flex;align-items:center;gap:6px;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .2s;
  --dx:0px;--dy:0px;
  transform:translate(var(--dx),var(--dy));
}
.nav-13__cta:hover{box-shadow:0 0 30px rgba(251,191,36,.3)}

/* hero */
.nav-13__hero{
  position:relative;z-index:1;
  min-height:100vh;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  text-align:center;padding:120px 24px 60px;
}
.nav-13__label{
  font-size:.75rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent);
  margin-bottom:24px;
}
.nav-13__hero h1{
  font-size:clamp(3rem,9vw,7rem);font-weight:700;
  color:var(--text);letter-spacing:-.05em;line-height:.95;
  margin-bottom:24px;
}
.nav-13__hero h1 span{
  color:transparent;
  -webkit-text-stroke:1px rgba(255,255,255,.2);
}
.nav-13__hero p{font-size:1rem;color:var(--muted);max-width:420px;line-height:1.65}

/* magnetic ring decoration */
.nav-13__ring{
  position:absolute;width:600px;height:600px;
  border:1px solid rgba(255,255,255,.03);border-radius:50%;
  pointer-events:none;z-index:0;
}
.nav-13__ring:nth-child(2){width:900px;height:900px;border-color:rgba(255,255,255,.02)}

@media(max-width:680px){.nav-13__links{display:none}}
@media(prefers-reduced-motion:reduce){
  .nav-13__links a,.nav-13__cta{transition:none;transform:none!important}
  .nav-13__glow{display:none}
}
```

**JS:**
```js
(function(){
  var glow=document.getElementById('nav-13-glow');
  var mags=document.querySelectorAll('.nav-13__mag');
  var strength=6;
  function onMove(e){
    var x=e.clientX,y=e.clientY;
    if(glow){glow.style.transform='translate(calc(-50% + '+x+'px),calc(-50% + '+y+'px)'}
    mags.forEach(function(el){
      var r=el.getBoundingClientRect();
      var cx=r.left+r.width/2,cy=r.top+r.height/2;
      var dx=x-cx,dy=y-cy;
      var dist=Math.sqrt(dx*dx+dy*dy);
      var radius=80;
      if(dist<radius){
        var f=(1-dist/radius)*strength;
        el.style.setProperty('--dx',(dx/dist*f)+'px');
        el.style.setProperty('--dy',(dy/dist*f)+'px');
      } else {
        el.style.setProperty('--dx','0px');
        el.style.setProperty('--dy','0px');
      }
    });
  }
  document.addEventListener('mousemove',onMove,{passive:true});
}());
```

### 14. CSS Neon Glow Navigation Menu

**Type:** Pure CSS
**Description:** A cyberpunk-inspired navigation menu with neon glow effects, flickering animations, and a dark grid background. Active and hovered links pulse with multi-layer `box-shadow` and `text-shadow` glows in electric cyan and magenta, creating a retro-futuristic aesthetic.

**HTML:**
```html
<div class="nav-14">
  <nav class="nav-14__bar" role="navigation">
    <div class="nav-14__logo">NEO<span>N</span></div>
    <ul class="nav-14__links">
      <li>
        <a href="#" class="nav-14__active">
          <svg viewBox="0 0 24 24"><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/></svg>
          Home
        </a>
      </li>
      <li>
        <a href="#">
          <svg viewBox="0 0 24 24"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>
          Systems
        </a>
      </li>
      <li>
        <a href="#">
          <svg viewBox="0 0 24 24"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg>
          Network
        </a>
      </li>
      <li>
        <a href="#">
          <svg viewBox="0 0 24 24"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
          Security
        </a>
      </li>
      <li>
        <a href="#">
          <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/><path d="M19.07 4.93l-1.41 1.41M5.34 18.66l-1.41 1.41M20 12h2M2 12H0M19.07 19.07l-1.41-1.41M5.34 5.34L3.93 3.93M12 20v2M12 2v2"/></svg>
          Config
        </a>
      </li>
    </ul>
    <a href="#" class="nav-14__btn">Access</a>
  </nav>
  <div class="nav-14__hero">
    <p class="nav-14__scantext">▶ System online — hover nav links above</p>
    <h1>
      <span>Navigate the</span>
      <span class="nav-14__neon-c">Cyber</span>
      <span class="nav-14__neon-m">Grid</span>
    </h1>
    <p>Each link has a neon underline that extends outward on hover via <code>left</code>/<code>right</code> transitions with a <code>box-shadow</code> glow. The top border has a scanning gradient animation.</p>
    <div class="nav-14__cards">
      <div class="nav-14__card">
        <svg viewBox="0 0 24 24"><rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8M12 17v4"/></svg>
        <div><p>Underline Glow</p><span>CSS box-shadow on ::after</span></div>
      </div>
      <div class="nav-14__card">
        <svg viewBox="0 0 24 24"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
        <div><p>Scan Gradient</p><span>CSS @keyframes on border</span></div>
      </div>
      <div class="nav-14__card">
        <svg viewBox="0 0 24 24"><path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z"/></svg>
        <div><p>Fill Button</p><span>translateX slide-in reveal</span></div>
      </div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.nav-14,.nav-14 *,.nav-14 *::before,.nav-14 *::after{box-sizing:border-box;margin:0;padding:0}
.nav-14 ::selection{background:#00ff9d;color:#000}
.nav-14{
  --bg:#030307;--text:#e8e8f0;--muted:#52527a;
  --cyan:#00e5ff;--green:#00ff9d;--magenta:#ff00ff;
  --amber:#ffaa00;--pink:#ff2d7f;
  font-family:'Rajdhani',system-ui,sans-serif;
  background:var(--bg);min-height:100vh;
  display:flex;flex-direction:column;
}
/* grid lines bg */
.nav-14::before{
  content:'';position:fixed;inset:0;
  background-image:
    linear-gradient(rgba(0,229,255,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,229,255,.03) 1px,transparent 1px);
  background-size:40px 40px;
  pointer-events:none;z-index:0;
}

.nav-14__bar{
  position:relative;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 48px;height:68px;
  border-bottom:1px solid rgba(0,229,255,.15);
  background:rgba(3,3,7,.8);
  backdrop-filter:blur(8px);
}
/* neon underline anim */
.nav-14__bar::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent 0%,var(--cyan) 30%,var(--magenta) 70%,transparent 100%);
  opacity:.5;
  animation:nav-14-scanline 4s linear infinite;
}
@keyframes nav-14-scanline{
  0%{background-position:-100% 0}
  100%{background-position:200% 0}
}

.nav-14__logo{
  font-size:1.6rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--cyan);
  text-shadow:0 0 12px var(--cyan),0 0 30px rgba(0,229,255,.4);
  display:flex;align-items:center;gap:2px;
}
.nav-14__logo span{color:var(--magenta);text-shadow:0 0 12px var(--magenta),0 0 30px rgba(255,0,255,.4)}

.nav-14__links{display:flex;align-items:center;gap:4px;list-style:none}
.nav-14__links a{
  display:flex;align-items:center;gap:6px;
  padding:8px 14px;color:var(--muted);
  text-decoration:none;font-size:.875rem;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;
  border-radius:4px;position:relative;
  transition:color .2s;
}
.nav-14__links a::after{
  content:'';position:absolute;bottom:0;left:50%;right:50%;
  height:1.5px;background:currentColor;
  transition:left .25s ease,right .25s ease,box-shadow .25s;
}
.nav-14__links a:hover{color:var(--text)}
.nav-14__links a:hover::after{left:8px;right:8px;box-shadow:0 0 8px currentColor}
.nav-14__links a.nav-14__active{color:var(--cyan);text-shadow:0 0 8px rgba(0,229,255,.5)}
.nav-14__links a.nav-14__active::after{left:8px;right:8px;box-shadow:0 0 8px var(--cyan)}

.nav-14__links a svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;opacity:.7}

/* neon circle btn */
.nav-14__btn{
  padding:8px 20px;border-radius:4px;
  background:transparent;border:1px solid var(--cyan);color:var(--cyan);
  font-size:.8125rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  text-decoration:none;
  transition:background .2s,box-shadow .2s,color .2s;
  position:relative;overflow:hidden;
}
.nav-14__btn::before{
  content:'';position:absolute;inset:0;
  background:var(--cyan);transform:translateX(-101%);
  transition:transform .2s ease;z-index:-1;
}
.nav-14__btn:hover{color:#000;box-shadow:0 0 20px rgba(0,229,255,.4)}
.nav-14__btn:hover::before{transform:translateX(0)}

/* hero */
.nav-14__hero{
  position:relative;z-index:1;flex:1;
  display:flex;flex-direction:column;align-items:center;
  justify-content:center;padding:80px 24px;text-align:center;
}
.nav-14__scantext{
  font-size:.7rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--cyan);
  margin-bottom:28px;
  animation:nav-14-blink 2.5s step-end infinite;
}
@keyframes nav-14-blink{0%,100%{opacity:1}50%{opacity:.2}}

.nav-14__hero h1{
  font-size:clamp(3rem,9vw,7rem);font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;
  color:transparent;
  -webkit-text-stroke:1px rgba(255,255,255,.2);
  position:relative;margin-bottom:8px;line-height:.95;
}
.nav-14__hero h1 span{
  display:block;
  color:var(--text);-webkit-text-stroke:0;
  text-shadow:0 0 40px rgba(0,229,255,.15);
}
.nav-14__hero h1 span.nav-14__neon-c{color:var(--cyan);text-shadow:0 0 20px var(--cyan),0 0 50px rgba(0,229,255,.3);-webkit-text-stroke:0}
.nav-14__hero h1 span.nav-14__neon-m{color:var(--magenta);text-shadow:0 0 20px var(--magenta),0 0 50px rgba(255,0,255,.3);-webkit-text-stroke:0}

.nav-14__hero p{font-size:1rem;color:var(--muted);max-width:480px;line-height:1.65;margin-top:28px}

/* floating nav cards */
.nav-14__cards{
  display:flex;flex-wrap:wrap;gap:14px;margin-top:48px;justify-content:center;
}
.nav-14__card{
  background:rgba(255,255,255,.025);border-radius:8px;padding:18px 24px;
  display:flex;align-items:center;gap:12px;
  transition:border-color .2s,box-shadow .2s;
}
.nav-14__card:nth-child(1){border:1px solid rgba(0,229,255,.25)}
.nav-14__card:nth-child(1):hover{border-color:var(--cyan);box-shadow:0 0 20px rgba(0,229,255,.15)}
.nav-14__card:nth-child(2){border:1px solid rgba(255,0,255,.2)}
.nav-14__card:nth-child(2):hover{border-color:var(--magenta);box-shadow:0 0 20px rgba(255,0,255,.12)}
.nav-14__card:nth-child(3){border:1px solid rgba(0,255,157,.2)}
.nav-14__card:nth-child(3):hover{border-color:var(--green);box-shadow:0 0 20px rgba(0,255,157,.12)}
.nav-14__card svg{width:20px;height:20px;flex-shrink:0;stroke:currentColor;fill:none;stroke-width:1.75}
.nav-14__card:nth-child(1) svg{color:var(--cyan)}
.nav-14__card:nth-child(2) svg{color:var(--magenta)}
.nav-14__card:nth-child(3) svg{color:var(--green)}
.nav-14__card p{font-size:.8rem;font-weight:600;letter-spacing:.04em;color:var(--text);text-transform:uppercase;margin:0}
.nav-14__card span{font-size:.7rem;color:var(--muted);display:block;margin-top:2px;text-transform:none;letter-spacing:0}

@media(max-width:680px){.nav-14__links{display:none}}
@media(prefers-reduced-motion:reduce){
  .nav-14__bar::after,.nav-14__scantext{animation:none}
  .nav-14__links a::after,.nav-14__btn::before,.nav-14__links a,.nav-14__btn{transition:none}
}
```

### 15. CSS Morphing Navigation Pill Indicator

**Type:** Pure CSS
**Description:** An advanced navigation component featuring a morphing pill indicator that smoothly slides and stretches between tab positions using only CSS. The pill uses a squash-and-stretch scale animation during transition, creating a fluid, organic movement that feels alive.

**HTML:**
```html
<div class="nav-15">
  <input type="radio" name="nav-15" id="nav-15-1" checked>
  <input type="radio" name="nav-15" id="nav-15-2">
  <input type="radio" name="nav-15" id="nav-15-3">
  <input type="radio" name="nav-15" id="nav-15-4">
  <input type="radio" name="nav-15" id="nav-15-5">
  <div class="nav-15__wrap">
    <div class="nav-15__nav-shell">
      <div class="nav-15__pill"></div>
      <label for="nav-15-1">
        <svg viewBox="0 0 24 24"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg>
        <span>Overview</span>
      </label>
      <label for="nav-15-2">
        <svg viewBox="0 0 24 24"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg>
        <span>Analytics</span>
      </label>
      <label for="nav-15-3">
        <svg viewBox="0 0 24 24"><path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 00-3-3.87M16 3.13a4 4 0 010 7.75"/></svg>
        <span>Customers</span>
      </label>
      <label for="nav-15-4">
        <svg viewBox="0 0 24 24"><path d="M6 2L3 6v14a2 2 0 002 2h14a2 2 0 002-2V6l-3-4z"/><line x1="3" y1="6" x2="21" y2="6"/></svg>
        <span>Orders</span>
      </label>
      <label for="nav-15-5">
        <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/><path d="M19.07 4.93l-1.41 1.41M5.34 18.66l-1.41 1.41M20 12h2M2 12H0M19.07 19.07l-1.41-1.41M5.34 5.34L3.93 3.93M12 20v2M12 2v2"/></svg>
        <span>Settings</span>
      </label>
    </div>
    <div class="nav-15__content">
      <!-- Panel 1: Overview -->
      <div class="nav-15__panel">
        <div class="nav-15__panel-hero">
          <div class="nav-15__panel-icon" style="background:#6366f1"><svg viewBox="0 0 24 24"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg></div>
          <div class="nav-15__panel-hero-text"><h2>Overview Dashboard</h2><p>The pill morphs between positions with a spring easing, changing background colour to match each tab. Powered by CSS <code>:checked</code> + custom property offsets.</p></div>
        </div>
        <div class="nav-15__panel-body">
          <div class="nav-15__metric-row">
            <div class="nav-15__metric"><div class="nav-15__metric-val">$128k</div><div class="nav-15__metric-label">Total revenue</div></div>
            <div class="nav-15__metric"><div class="nav-15__metric-val">8,412</div><div class="nav-15__metric-label">Active users</div></div>
            <div class="nav-15__metric"><div class="nav-15__metric-val">94.2%</div><div class="nav-15__metric-label">Uptime</div></div>
          </div>
        </div>
      </div>
      <!-- Panel 2: Analytics -->
      <div class="nav-15__panel">
        <div class="nav-15__panel-hero">
          <div class="nav-15__panel-icon" style="background:#8b5cf6"><svg viewBox="0 0 24 24"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg></div>
          <div class="nav-15__panel-hero-text"><h2>Analytics</h2><p>Traffic and conversion metrics. Notice how the pill moves and recolours smoothly as you switch — the <code>background</code> property transitions alongside the position.</p></div>
        </div>
        <div class="nav-15__panel-body">
          <div class="nav-15__progress-row">
            <div class="nav-15__prog-item"><div class="nav-15__prog-label"><span>Organic Search</span><span>48%</span></div><div class="nav-15__prog-track"><div class="nav-15__prog-fill" style="width:48%;background:#8b5cf6"></div></div></div>
            <div class="nav-15__prog-item"><div class="nav-15__prog-label"><span>Direct</span><span>31%</span></div><div class="nav-15__prog-track"><div class="nav-15__prog-fill" style="width:31%;background:#a78bfa"></div></div></div>
            <div class="nav-15__prog-item"><div class="nav-15__prog-label"><span>Social</span><span>14%</span></div><div class="nav-15__prog-track"><div class="nav-15__prog-fill" style="width:14%;background:#c4b5fd"></div></div></div>
          </div>
        </div>
      </div>
      <!-- Panel 3: Customers -->
      <div class="nav-15__panel">
        <div class="nav-15__panel-hero">
          <div class="nav-15__panel-icon" style="background:#ec4899"><svg viewBox="0 0 24 24"><path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/><circle cx="9" cy="7" r="4"/></svg></div>
          <div class="nav-15__panel-hero-text"><h2>Customers</h2><p>Manage your customer base. Each panel fades in with a subtle <code>translateY</code> + <code>opacity</code> keyframe animation for a snappy feel.</p></div>
        </div>
        <div class="nav-15__panel-body">
          <div class="nav-15__metric-row">
            <div class="nav-15__metric"><div class="nav-15__metric-val">3,241</div><div class="nav-15__metric-label">Total customers</div></div>
            <div class="nav-15__metric"><div class="nav-15__metric-val">128</div><div class="nav-15__metric-label">New this week</div></div>
            <div class="nav-15__metric"><div class="nav-15__metric-val">4.8★</div><div class="nav-15__metric-label">Avg rating</div></div>
          </div>
        </div>
      </div>
      <!-- Panel 4: Orders -->
      <div class="nav-15__panel">
        <div class="nav-15__panel-hero">
          <div class="nav-15__panel-icon" style="background:#f59e0b"><svg viewBox="0 0 24 24"><path d="M6 2L3 6v14a2 2 0 002 2h14a2 2 0 002-2V6l-3-4z"/><line x1="3" y1="6" x2="21" y2="6"/></svg></div>
          <div class="nav-15__panel-hero-text"><h2>Orders</h2><p>Order management. The pill indicator changes its amber glow matching this tab's accent color — all driven by a <code>box-shadow</code> CSS property value.</p></div>
        </div>
        <div class="nav-15__panel-body">
          <div class="nav-15__metric-row">
            <div class="nav-15__metric"><div class="nav-15__metric-val">1,093</div><div class="nav-15__metric-label">Total orders</div></div>
            <div class="nav-15__metric"><div class="nav-15__metric-val">47</div><div class="nav-15__metric-label">Pending</div></div>
            <div class="nav-15__metric"><div class="nav-15__metric-val">$68</div><div class="nav-15__metric-label">Avg order value</div></div>
          </div>
        </div>
      </div>
      <!-- Panel 5: Settings -->
      <div class="nav-15__panel">
        <div class="nav-15__panel-hero">
          <div class="nav-15__panel-icon" style="background:#10b981"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/><path d="M19.07 4.93l-1.41 1.41M5.34 18.66l-1.41 1.41M20 12h2M2 12H0"/></svg></div>
          <div class="nav-15__panel-hero-text"><h2>Settings</h2><p>Configure your workspace. Zero JavaScript — the morphing indicator is driven entirely by the <code>:checked</code> pseudo-class and precise <code>left</code> + <code>width</code> calculations in CSS.</p></div>
        </div>
        <div class="nav-15__panel-body">
          <div class="nav-15__progress-row">
            <div class="nav-15__prog-item"><div class="nav-15__prog-label"><span>Storage used</span><span>62%</span></div><div class="nav-15__prog-track"><div class="nav-15__prog-fill" style="width:62%;background:#10b981"></div></div></div>
            <div class="nav-15__prog-item"><div class="nav-15__prog-label"><span>API quota</span><span>28%</span></div><div class="nav-15__prog-track"><div class="nav-15__prog-fill" style="width:28%;background:#34d399"></div></div></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.nav-15,.nav-15 *,.nav-15 *::before,.nav-15 *::after{box-sizing:border-box;margin:0;padding:0}
.nav-15 ::selection{background:#6366f1;color:#fff}
.nav-15{
  --bg:#030712;--surface:#0d1117;--surface2:#161b26;
  --border:rgba(255,255,255,.07);--text:#f9fafb;--muted:#6b7280;
  --p1:#6366f1;--p2:#8b5cf6;--p3:#ec4899;--p4:#f59e0b;--p5:#10b981;
  font-family:'Inter',system-ui,sans-serif;
  background:var(--bg);min-height:100vh;
}
/* radio state */
.nav-15 input[type=radio]{display:none}

/* top centered floating pill nav */
.nav-15__wrap{
  display:flex;flex-direction:column;align-items:center;
  padding:40px 24px;
}
.nav-15__nav-shell{
  background:rgba(255,255,255,.04);
  border:1px solid var(--border);
  border-radius:100px;
  padding:5px;
  /* 5-column grid so each tab gets 1/5 of the shell width regardless
     of label-text length. The pill spans one column exactly. */
  display:grid;grid-template-columns:repeat(5,1fr);
  position:relative;
  gap:2px;
}
/* sliding pill — width = one column, offset = N columns + gap */
.nav-15__pill{
  position:absolute;top:5px;bottom:5px;
  border-radius:100px;
  transform-origin:center;
  /* Width = one column = (shell minus 10px padding minus 8px of gaps) / 5 */
  width:calc((100% - 18px) / 5);
  left:5px;
  transition:transform .45s cubic-bezier(.34,1.4,.64,1),background .3s ease;
  z-index:0;
}
/* Squash-stretch morph — separated from the translateX motion so they
   compose cleanly. Earlier attempt had the morph keyframe override
   the pill's static translateX, causing the pill to "teleport back
   to position 1" for the duration of the animation before snapping
   to the correct tab.

   The clean fix: keep transform on the OUTER pill for translateX
   (driven by transition for smooth slide), and run the scale morph
   on an INNER ::before pseudo-element that fills the pill. The two
   transforms compose without conflict.

   Each :checked rule assigns a unique animation name (1..5) to force
   the keyframe to re-trigger on every tab change. */
.nav-15__pill::before{
  content:"";position:absolute;inset:0;
  border-radius:inherit;background:inherit;
  /* Inherit the pill's background so the morph looks like the pill
     itself is squashing/stretching. The outer pill keeps box-shadow
     so the glow doesn't squish along with the morph. */
}
@keyframes nav-15-morph-1{0%,100%{transform:scaleY(1) scaleX(1)}50%{transform:scaleY(.7) scaleX(1.1)}}
@keyframes nav-15-morph-2{0%,100%{transform:scaleY(1) scaleX(1)}50%{transform:scaleY(.7) scaleX(1.1)}}
@keyframes nav-15-morph-3{0%,100%{transform:scaleY(1) scaleX(1)}50%{transform:scaleY(.7) scaleX(1.1)}}
@keyframes nav-15-morph-4{0%,100%{transform:scaleY(1) scaleX(1)}50%{transform:scaleY(.7) scaleX(1.1)}}
@keyframes nav-15-morph-5{0%,100%{transform:scaleY(1) scaleX(1)}50%{transform:scaleY(.7) scaleX(1.1)}}
/* Pill positioning — translateX on the OUTER pill (smooth slide
   via transition). Morph animation runs on the ::before pseudo
   inside the pill (composes without fighting the slide). */
#nav-15-1:checked ~ .nav-15__wrap .nav-15__nav-shell .nav-15__pill{transform:translateX(0);background:var(--p1);box-shadow:0 0 20px rgba(99,102,241,.4)}
#nav-15-1:checked ~ .nav-15__wrap .nav-15__nav-shell .nav-15__pill::before{animation:nav-15-morph-1 .45s ease-out}
#nav-15-2:checked ~ .nav-15__wrap .nav-15__nav-shell .nav-15__pill{transform:translateX(calc(100% + 2px));background:var(--p2);box-shadow:0 0 20px rgba(139,92,246,.4)}
#nav-15-2:checked ~ .nav-15__wrap .nav-15__nav-shell .nav-15__pill::before{animation:nav-15-morph-2 .45s ease-out}
#nav-15-3:checked ~ .nav-15__wrap .nav-15__nav-shell .nav-15__pill{transform:translateX(calc(200% + 4px));background:var(--p3);box-shadow:0 0 20px rgba(236,72,153,.4)}
#nav-15-3:checked ~ .nav-15__wrap .nav-15__nav-shell .nav-15__pill::before{animation:nav-15-morph-3 .45s ease-out}
#nav-15-4:checked ~ .nav-15__wrap .nav-15__nav-shell .nav-15__pill{transform:translateX(calc(300% + 6px));background:var(--p4);box-shadow:0 0 20px rgba(245,158,11,.35)}
#nav-15-4:checked ~ .nav-15__wrap .nav-15__nav-shell .nav-15__pill::before{animation:nav-15-morph-4 .45s ease-out}
#nav-15-5:checked ~ .nav-15__wrap .nav-15__nav-shell .nav-15__pill{transform:translateX(calc(400% + 8px));background:var(--p5);box-shadow:0 0 20px rgba(16,185,129,.35)}
#nav-15-5:checked ~ .nav-15__wrap .nav-15__nav-shell .nav-15__pill::before{animation:nav-15-morph-5 .45s ease-out}

/* labels */
.nav-15__nav-shell label{
  position:relative;z-index:1;
  display:flex;align-items:center;justify-content:center;gap:6px;
  padding:9px 16px;border-radius:100px;
  font-size:.8125rem;font-weight:600;color:var(--muted);
  cursor:pointer;user-select:none;
  transition:color .25s;white-space:nowrap;
}
.nav-15__nav-shell label svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;flex-shrink:0}

#nav-15-1:checked ~ .nav-15__wrap .nav-15__nav-shell label[for=nav-15-1]{color:#fff}
#nav-15-2:checked ~ .nav-15__wrap .nav-15__nav-shell label[for=nav-15-2]{color:#fff}
#nav-15-3:checked ~ .nav-15__wrap .nav-15__nav-shell label[for=nav-15-3]{color:#fff}
#nav-15-4:checked ~ .nav-15__wrap .nav-15__nav-shell label[for=nav-15-4]{color:#fff}
#nav-15-5:checked ~ .nav-15__wrap .nav-15__nav-shell label[for=nav-15-5]{color:#fff}

/* content area */
.nav-15__content{
  width:100%;max-width:780px;margin-top:40px;
}
.nav-15__panel{
  display:none;
  background:var(--surface);border:1px solid var(--border);
  border-radius:20px;overflow:hidden;
  animation:nav-15-fade .25s ease forwards;
}
@keyframes nav-15-fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

#nav-15-1:checked ~ .nav-15__wrap .nav-15__content .nav-15__panel:nth-child(1){display:block}
#nav-15-2:checked ~ .nav-15__wrap .nav-15__content .nav-15__panel:nth-child(2){display:block}
#nav-15-3:checked ~ .nav-15__wrap .nav-15__content .nav-15__panel:nth-child(3){display:block}
#nav-15-4:checked ~ .nav-15__wrap .nav-15__content .nav-15__panel:nth-child(4){display:block}
#nav-15-5:checked ~ .nav-15__wrap .nav-15__content .nav-15__panel:nth-child(5){display:block}

.nav-15__panel-hero{
  padding:36px 36px 0;
  display:flex;align-items:flex-start;gap:20px;
}
.nav-15__panel-icon{
  width:52px;height:52px;border-radius:14px;flex-shrink:0;
  display:grid;place-items:center;
}
.nav-15__panel-icon svg{width:24px;height:24px;stroke:#fff;fill:none;stroke-width:1.75}
.nav-15__panel-hero-text h2{
  font-size:1.25rem;font-weight:700;color:var(--text);
  letter-spacing:-.02em;margin-bottom:6px;
}
.nav-15__panel-hero-text p{font-size:.9rem;color:var(--muted);line-height:1.65}
.nav-15__panel-body{padding:28px 36px 36px}
.nav-15__metric-row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:20px}
.nav-15__metric{
  background:var(--surface2);border-radius:12px;padding:16px 18px;
}
.nav-15__metric-val{font-size:1.5rem;font-weight:700;color:var(--text);letter-spacing:-.03em}
.nav-15__metric-label{font-size:.75rem;color:var(--muted);margin-top:3px}
.nav-15__progress-row{display:flex;flex-direction:column;gap:10px}
.nav-15__prog-item{display:flex;flex-direction:column;gap:5px}
.nav-15__prog-label{display:flex;justify-content:space-between;font-size:.8rem;color:var(--muted);font-weight:500}
.nav-15__prog-track{height:6px;background:rgba(255,255,255,.06);border-radius:3px;overflow:hidden}
.nav-15__prog-fill{height:100%;border-radius:3px}

@media(max-width:600px){
  .nav-15__metric-row{grid-template-columns:1fr 1fr}
  .nav-15__nav-shell label span{display:none}
}
@media(prefers-reduced-motion:reduce){
  .nav-15__pill{transition:none}
  .nav-15__panel{animation:none}
}
```

---
## 12 CSS Neon Designs

URL: https://codefronts.com/design-styles/css-neon/
Description: 12 hand-coded CSS neon designs covering the full vocabulary of the aesthetic — glowing buttons, retro signage, rotating-border pricing cards, an 80s synthwave scene, futuristic controls, three nav patterns, broken/flickering signs, a cyberpunk palette token showcase, a Tailwind theme.extend neon config, drop-shadow SVG icon glows, an infinite seamless 3D perspective grid, and five rainbow text cycling techniques. Pure CSS plus scoped JS — no images, no SVG filters, every glow is layered shadow.
Demo count: 12

### 01. Neon Buttons

**Type:** Pure CSS
**Description:** Six glowing